feat: small projects UX tweaks (#5513)

Author: Weves

.vscode/launch.template.jsonc

@@ -72,17 +72,17 @@ def run_jobs() -> None:
         "--queues=docprocessing",
     ]
 
-    cmd_worker_user_files_indexing = [
+    cmd_worker_user_files = [
         "celery",
         "-A",
-        "onyx.background.celery.versioned_apps.docfetching",
+        "onyx.background.celery.versioned_apps.user_file_processing",
         "worker",
         "--pool=threads",
         "--concurrency=1",
         "--prefetch-multiplier=1",
         "--loglevel=INFO",
-        "--hostname=user_files_indexing@%n",
-        "--queues=user_files_indexing",
+        "--hostname=user_file_processing@%n",
+        "--queues=user_file_processing,user_file_project_sync",
     ]
 
     cmd_worker_monitoring = [
@@ -152,8 +152,8 @@ def run_jobs() -> None:
         text=True,
     )
 
-    worker_user_files_indexing_process = subprocess.Popen(
-        cmd_worker_user_files_indexing,
+    worker_user_file_process = subprocess.Popen(
+        cmd_worker_user_files,
         stdout=subprocess.PIPE,
         stderr=subprocess.STDOUT,
         text=True,
@@ -197,9 +197,9 @@ def run_jobs() -> None:
     worker_docprocessing_thread = threading.Thread(
         target=monitor_process, args=("DOCPROCESSING", worker_docprocessing_process)
     )
-    worker_user_files_indexing_thread = threading.Thread(
+    worker_user_file_thread = threading.Thread(
         target=monitor_process,
-        args=("USER_FILES_INDEX", worker_user_files_indexing_process),
+        args=("USER_FILE_PROCESSING", worker_user_file_process),
     )
     worker_monitoring_thread = threading.Thread(
         target=monitor_process, args=("MONITORING", worker_monitoring_process)
@@ -216,7 +216,7 @@ def run_jobs() -> None:
     worker_light_thread.start()
     worker_heavy_thread.start()
     worker_docprocessing_thread.start()
-    worker_user_files_indexing_thread.start()
+    worker_user_file_thread.start()
     worker_monitoring_thread.start()
     worker_kg_processing_thread.start()
     worker_docfetching_thread.start()
@@ -226,7 +226,7 @@ def run_jobs() -> None:
     worker_light_thread.join()
     worker_heavy_thread.join()
     worker_docprocessing_thread.join()
-    worker_user_files_indexing_thread.join()
+    worker_user_file_thread.join()
     worker_monitoring_thread.join()
     worker_kg_processing_thread.join()
     worker_docfetching_thread.join()

backend/scripts/dev_run_background_jobs.py

@@ -2,6 +2,7 @@
 
 import { useChatContext } from "@/components/context/ChatContext";
 import { ChatPage } from "./components/ChatPage";
+import { ProjectsProvider } from "./projects/ProjectsContext";
 import { useCallback, useState } from "react";
 
 export default function ChatLayout({
@@ -13,7 +14,7 @@ export default function ChatLayout({
   // we don't want to show the sidebar by default when the user opens the side panel
   defaultSidebarOff?: boolean;
 }) {
-  const { sidebarInitiallyVisible } = useChatContext();
+  const { sidebarInitiallyVisible, projects } = useChatContext();
 
   const [sidebarVisible, setSidebarVisible] = useState(
     (sidebarInitiallyVisible && !defaultSidebarOff) ?? false
@@ -26,14 +27,14 @@ export default function ChatLayout({
   }, []);
 
   return (
-    <>
+    <ProjectsProvider initialProjects={projects}>
       <div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
         <ChatPage
           toggle={toggle}
           sidebarVisible={sidebarVisible}
           firstMessage={firstMessage}
         />
       </div>
-    </>
+    </ProjectsProvider>
   );
 }

web/src/app/chat/WrappedChat.tsx

@@ -65,13 +65,24 @@ export default function FilePicker({
         onChange={handleUploadChange}
         accept={"*/*"}
       />
-      <Menubar className="bg-transparent dark:bg-transparent p-0 border-0">
+      <Menubar className="bg-transparent dark:bg-transparent p-0 border-0 h-8">
         <MenubarMenu>
-          <MenubarTrigger className="relative cursor-pointer flex items-center group rounded-lg text-input-text py-1.5 px-0 h-8">
+          <MenubarTrigger className="relative cursor-pointer flex items-center group rounded-lg text-input-text px-0 h-8">
             {showTriggerLabel ? (
               <div
                 className={cn(
-                  "flex flex-row gap-2 items-center justify-center p-2 rounded-md bg-background-dark/75 hover:dark:bg-neutral-800/75 hover:bg-accent-background-hovered transition-all duration-150",
+                  "flex",
+                  "flex-row",
+                  "gap-2",
+                  "items-center",
+                  "justify-center",
+                  "p-2",
+                  "rounded-md",
+                  "bg-background-dark/75",
+                  "hover:dark:bg-neutral-800/75",
+                  "hover:bg-accent-background-hovered",
+                  "transition-all",
+                  "duration-150",
                   triggerClassName
                 )}
               >
@@ -166,7 +177,7 @@ export default function FilePicker({
             >
               <Row>
                 <Paperclip size={16} />
-                <div className="flex flex-col">
+                <div className="flex flex-col cursor-pointer">
                   <span className="font-semibold">Upload Files</span>
                   <span className="text-xs font-description text-text-400 dark:text-neutral-400">
                     Upload a file from your device

web/src/app/chat/components/files/FilePicker.tsx

@@ -2,6 +2,7 @@ import React, { useState, ReactNode, forwardRef } from "react";
 import { Folder } from "./interfaces";
 import { ChatSession } from "@/app/chat/interfaces";
 import { Caret } from "@/components/icons/icons";
+import { cn } from "@/lib/utils";
 
 interface FolderDropdownProps {
   folder: Folder;
@@ -24,7 +25,19 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
         >
           <div
             ref={ref}
-            className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 bg-background-sidebar dark:bg-[#000] sticky top-0"
+            className={cn(
+              "flex",
+              "overflow-visible",
+              "items-center",
+              "w-full",
+              "text-text-darker",
+              "rounded-md",
+              "p-1",
+              "bg-background-sidebar",
+              "dark:bg-[#000]",
+              "sticky",
+              "top-0"
+            )}
             style={{ zIndex: 10 - index }}
           >
             <button

web/src/app/chat/components/folders/FolderDropdown.tsx

@@ -38,18 +38,23 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
           <div
             ref={componentRef}
             className={`
-            relative 
-            cursor-pointer 
-            flex 
-            items-center 
+            relative
+            cursor-pointer
+            flex
+            items-center
             ${name ? "space-x-1" : ""}
             group
             rounded-lg
             text-input-text
-            group-hover:text-neutral-900 
-            dark:group-hover:text-neutral-50
+            hover:text-neutral-900
+            hover:bg-background-chat-hover
+            dark:hover:text-neutral-50
+            transition-all
+            duration-300
+            ease-in-out
             py-1.5
             px-2
+            h-8
             ${
               flexPriority === "shrink" &&
               "flex-shrink-100 flex-grow-0 flex-basis-auto min-w-[30px] whitespace-nowrap overflow-hidden"

web/src/app/chat/components/input/ChatInputOption.tsx

@@ -36,6 +36,7 @@ export default async function Layout({
     ccPairs,
     inputPrompts,
     proSearchToggled,
+    projects,
   } = data;
 
   return (
@@ -56,6 +57,7 @@ export default async function Layout({
           availableTools,
           shouldShowWelcomeModal,
           defaultAssistantId,
+          projects,
         }}
       >
         {children}

web/src/app/chat/layout.tsx

@@ -1,6 +1,5 @@
 import { SEARCH_PARAMS } from "@/lib/extension/constants";
 import ChatLayout from "./WrappedChat";
-import { ProjectsProvider } from "./projects/ProjectsContext";
 
 export default async function Page(props: {
   searchParams: Promise<{ [key: string]: string }>;
@@ -11,11 +10,9 @@ export default async function Page(props: {
     searchParams[SEARCH_PARAMS.DEFAULT_SIDEBAR_OFF] === "true";
 
   return (
-    <ProjectsProvider>
-      <ChatLayout
-        firstMessage={firstMessage}
-        defaultSidebarOff={defaultSidebarOff}
-      />
-    </ProjectsProvider>
+    <ChatLayout
+      firstMessage={firstMessage}
+      defaultSidebarOff={defaultSidebarOff}
+    />
   );
 }

web/src/app/chat/page.tsx

@@ -72,12 +72,14 @@ const ProjectsContext = createContext<ProjectsContextType | undefined>(
 
 interface ProjectsProviderProps {
   children: ReactNode;
+  initialProjects?: Project[];
 }
 
 export const ProjectsProvider: React.FC<ProjectsProviderProps> = ({
   children,
+  initialProjects = [],
 }) => {
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [projects, setProjects] = useState<Project[]>(initialProjects);
   const [recentFiles, setRecentFiles] = useState<ProjectFile[]>([]);
   const [currentProjectDetails, setCurrentProjectDetails] =
     useState<ProjectDetails | null>(null);
@@ -261,17 +263,17 @@ export const ProjectsProvider: React.FC<ProjectsProviderProps> = ({
   );
 
   useEffect(() => {
-    // Initial load
+    // Initial load - only fetch recent files since projects come from props
     setIsLoading(true);
-    Promise.all([fetchProjects(), getRecentFiles()])
-      .then(([, recent]) => {
+    getRecentFiles()
+      .then((recent) => {
         setRecentFiles(recent);
       })
       .catch(() => {
         // errors captured in individual calls
       })
       .finally(() => setIsLoading(false));
-  }, [fetchProjects, getRecentFiles]);
+  }, [getRecentFiles]);
 
   useEffect(() => {
     if (currentProjectId) {

web/src/app/chat/projects/ProjectsContext.tsx

@@ -35,6 +35,7 @@ export default async function GalleryPage(props: {
     defaultAssistantId,
     inputPrompts,
     proSearchToggled,
+    projects,
   } = data;
 
   return (
@@ -54,6 +55,7 @@ export default async function GalleryPage(props: {
         llmProviders,
         shouldShowWelcomeModal,
         defaultAssistantId,
+        projects,
       }}
     >
       {shouldShowWelcomeModal && (