🗂️ feat: Rework the Projects Dashboard, Sidebar and Scoped Composer

client/src/components/Chat/ChatView.tsx

@@ -17,7 +17,6 @@ import {
 import { ChatContext, AddedChatContext, ChatFormProvider, useFileMapContext } from '~/Providers';
 import ConversationStarters from './Input/ConversationStarters';
 import { useGetMessagesByConvoId } from '~/data-provider';
-import ProjectLandingChip from './ProjectLandingChip';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
 import ChatForm from './Input/ChatForm';
@@ -143,9 +142,12 @@ function ChatView({ index = 0, project }: { index?: number; project?: TChatProje
                       isLandingPage && 'max-w-3xl transition-all duration-200 xl:max-w-4xl',
                     )}
                   >
-                    {isProjectLandingPage && project && <ProjectLandingChip project={project} />}
                     {isLandingPage && <ConversationStarters />}
-                    <ChatForm index={index} placeholder={chatFormPlaceholder} />
+                    <ChatForm
+                      index={index}
+                      placeholder={chatFormPlaceholder}
+                      project={isProjectLandingPage ? project : undefined}
+                    />
                     {!isLandingPage && <Footer />}
                   </div>
                 </div>

client/src/components/Chat/Input/ChatForm.tsx

@@ -3,7 +3,7 @@ import { useWatch } from 'react-hook-form';
 import { TextareaAutosize } from '@librechat/client';
 import { useRecoilState, useRecoilValue, useRecoilCallback } from 'recoil';
 import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
-import type { TMessage, TConversation } from 'librechat-data-provider';
+import type { TChatProject, TMessage, TConversation } from 'librechat-data-provider';
 import type { ExtendedFile, FileSetter, ConvoGenerator } from '~/common';
 import type { QueuedMessageContext } from '~/hooks/Chat/useSteering';
 import {
@@ -28,6 +28,7 @@ import useAskAnswerMode from '~/hooks/Input/useAskAnswerMode';
 import AskUserQuestionPopover from './AskUserQuestionPopover';
 import InterruptSteerButton from './InterruptSteerButton';
 import DuringRunSendButton from './DuringRunSendButton';
+import ProjectLandingChip from '../ProjectLandingChip';
 import { useGetStartupConfig } from '~/data-provider';
 import { mainTextareaId, BadgeItem } from '~/common';
 import PendingSteerChips from './PendingSteerChips';
@@ -54,7 +55,8 @@ import store from '~/store';
 interface ChatFormProps {
   index: number;
   placeholder?: string;
-  /** From ChatContext — individual values so memo can compare them */
+  project?: TChatProject;
+  /** From ChatContext: individual values so memo can compare them */
   files: Map<string, ExtendedFile>;
   setFiles: FileSetter;
   conversation: TConversation | null;
@@ -68,6 +70,7 @@ interface ChatFormProps {
 const ChatForm = memo(function ChatForm({
   index,
   placeholder,
+  project,
   files,
   setFiles,
   conversation,
@@ -556,6 +559,7 @@ const ChatForm = memo(function ChatForm({
                   : 'border-border-light bg-surface-chat',
               )}
             >
+              {project ? <ProjectLandingChip project={project} /> : null}
               <TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
               <PendingManualSkillsChips conversationId={conversationId} />
               {quotesEnabled && <PendingQuoteChips conversationId={conversationId} />}
@@ -732,7 +736,15 @@ ChatForm.displayName = 'ChatForm';
  * to the memo'd ChatForm. This prevents ChatForm from re-rendering on every
  * streaming chunk — it only re-renders when the specific values it uses change.
  */
-function ChatFormWrapper({ index = 0, placeholder }: { index?: number; placeholder?: string }) {
+function ChatFormWrapper({
+  index = 0,
+  placeholder,
+  project,
+}: {
+  index?: number;
+  placeholder?: string;
+  project?: TChatProject;
+}) {
   const {
     files,
     setFiles,
@@ -792,6 +804,7 @@ function ChatFormWrapper({ index = 0, placeholder }: { index?: number; placehold
     <ChatForm
       index={index}
       placeholder={placeholder}
+      project={project}
       files={files}
       setFiles={setFiles}
       conversation={stableConversation}

client/src/components/Chat/ProjectLandingChip.tsx

@@ -9,10 +9,10 @@ import { useChatContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 /**
- * Subtle project indicator shown on a project-scoped new-chat landing.
- * Clicking the chip switches the project (searchable combobox); the trailing
- * `×` removes the project scope. Both update the conversation draft and the
- * `?projectId` search param in place, so the typed message and model are kept.
+ * Project scope control rendered inside the composer on a project-scoped
+ * new-chat landing. The trigger switches projects; the trailing × drops the
+ * scope. Both update the draft and `?projectId` in place so the typed message
+ * and model are kept.
  */
 export default function ProjectLandingChip({ project }: { project: TChatProject }) {
   const localize = useLocalize();
@@ -53,7 +53,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
   );
 
   return (
-    <div className="group mb-2.5 flex items-center gap-1 px-1">
+    <div className="flex items-center gap-0.5 px-2.5 pt-2">
       <ControlCombobox
         selectId="project-landing-select"
         selectedValue={project._id}
@@ -69,9 +69,12 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
         searchPlaceholder={localize('com_ui_search_projects')}
         isCollapsed={false}
         showCarat={true}
-        placement="top"
-        containerClassName="w-auto px-0"
-        className="h-8 w-auto min-w-[11rem] gap-1.5 rounded-full px-2.5 text-sm font-medium text-text-secondary hover:text-text-primary"
+        placement="top-start"
+        gutter={12}
+        matchTriggerWidth={false}
+        containerClassName="w-auto min-w-0 px-0"
+        className="h-8 w-auto min-w-[7.5rem] max-w-[14rem] gap-1.5 rounded-full border-0 bg-transparent px-2.5 text-sm font-medium text-text-secondary hover:bg-surface-hover hover:text-text-primary"
+        popoverClassName="animate-popover-bottom min-w-64 rounded-2xl shadow-xl"
       />
       <TooltipAnchor
         description={localize('com_ui_remove_from_project')}
@@ -80,7 +83,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
             type="button"
             aria-label={localize('com_ui_remove_from_project')}
             onClick={() => applyProject(null)}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary opacity-0 outline-none transition-all hover:bg-surface-hover hover:text-text-primary focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring-primary group-hover:opacity-100"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary outline-none transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
           >
             <X className="h-3.5 w-3.5" aria-hidden="true" />
           </button>

client/src/components/Chat/__tests__/ChatView.spec.tsx

@@ -42,7 +42,6 @@ jest.mock('../Presentation', () => ({
 jest.mock('../Header', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Footer', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Landing', () => ({ __esModule: true, default: () => <div /> }));
-jest.mock('../ProjectLandingChip', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Messages/MessagesView', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Input/ChatForm', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Input/ConversationStarters', () => ({ __esModule: true, default: () => <div /> }));

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -69,6 +69,7 @@ function ConvoOptions({
   const { newConversation } = useNewConvo();
 
   const menuId = useId();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
   const shareButtonRef = useRef<HTMLButtonElement>(null);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
   const projectButtonRef = useRef<HTMLButtonElement>(null);
@@ -427,6 +428,7 @@ function ConvoOptions({
         setIsOpen={setIsPopoverActive}
         trigger={
           <Ariakit.MenuButton
+            ref={menuButtonRef}
             id={`conversation-menu-${conversationId}`}
             aria-label={localize('com_nav_convo_menu_options')}
             aria-expanded={isPopoverActive}
@@ -470,7 +472,7 @@ function ConvoOptions({
           conversationId={conversationId ?? ''}
           chatProjectId={chatProjectId}
           setMenuOpen={setIsPopoverActive}
-          triggerRef={projectButtonRef}
+          triggerRef={menuButtonRef}
           showProjectDialog={showProjectDialog}
           setShowProjectDialog={setShowProjectDialog}
         />

client/src/components/Conversations/ConvoOptions/ProjectButton.tsx

@@ -1,18 +1,22 @@
-import { useEffect, useMemo, useState, type RefObject } from 'react';
+import { useMemo, useState, type RefObject } from 'react';
+import { Folder } from 'lucide-react';
 import {
   Button,
-  Spinner,
+  ControlCombobox,
+  Label,
   OGDialog,
   OGDialogClose,
-  OGDialogTitle,
-  OGDialogHeader,
   OGDialogContent,
+  OGDialogHeader,
+  OGDialogTitle,
+  Spinner,
   useToastContext,
 } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
+import type { OptionWithIcon } from '~/common';
 import { useAssignConversationToProjectMutation, useProjectsInfiniteQuery } from '~/data-provider';
-import { useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
+import { useLocalize } from '~/hooks';
 
 type ProjectButtonProps = {
   conversationId: string;
@@ -41,23 +45,37 @@ function ProjectConversationDialog({
   const { data, fetchNextPage, isFetchingNextPage } = useProjectsInfiniteQuery({
     sortBy: 'name',
     sortDirection: 'asc',
+    limit: 100,
   });
 
   const projects = useMemo<TChatProject[]>(
     () => data?.pages.flatMap((page) => page.projects) ?? [],
     [data?.pages],
   );
   const hasNextPage = data?.pages[data.pages.length - 1]?.nextCursor != null;
-
-  useEffect(() => {
-    setSelectedProjectId(chatProjectId ?? '');
-  }, [chatProjectId]);
+  const selectedProject = projects.find((project) => project._id === selectedProjectId);
+  const projectItems = useMemo<OptionWithIcon[]>(
+    () =>
+      projects.map((project) => ({
+        label: project.name,
+        value: project._id,
+        icon: <Folder className="h-4 w-4 text-text-secondary" aria-hidden="true" />,
+      })),
+    [projects],
+  );
+  const canSave =
+    Boolean(selectedProjectId) &&
+    selectedProjectId !== (chatProjectId ?? '') &&
+    !assignConversation.isLoading;
 
   const saveProject = () => {
+    if (!canSave) {
+      return;
+    }
     assignConversation.mutate(
       {
         conversationId,
-        projectId: selectedProjectId || null,
+        projectId: selectedProjectId,
       },
       {
         onSuccess: () => {
@@ -83,44 +101,53 @@ function ProjectConversationDialog({
   return (
     <OGDialogContent
       id="project-conversation-dialog"
-      className="w-11/12 max-w-md"
+      className="w-11/12 max-w-md overflow-visible"
       showCloseButton={false}
     >
       <OGDialogHeader>
         <OGDialogTitle>{localize('com_ui_change_project')}</OGDialogTitle>
       </OGDialogHeader>
-      <label className="flex flex-col gap-2 text-sm text-text-primary">
-        {localize('com_ui_select_project')}
-        <select
-          value={selectedProjectId}
-          onChange={(event) => setSelectedProjectId(event.target.value)}
-          className="h-10 rounded-lg border border-border-light bg-surface-primary px-3 text-sm outline-none focus:ring-2 focus:ring-ring-primary"
-        >
-          <option value="">{localize('com_ui_unassigned')}</option>
-          {projects.map((project) => (
-            <option key={project._id} value={project._id}>
-              {project.name}
-            </option>
-          ))}
-        </select>
-      </label>
-      {hasNextPage && (
-        <button
-          type="button"
-          className="mt-3 text-sm text-text-secondary hover:text-text-primary"
-          onClick={() => fetchNextPage()}
-          disabled={isFetchingNextPage}
-        >
-          {isFetchingNextPage ? localize('com_ui_loading') : localize('com_ui_load_more')}
-        </button>
-      )}
-      <div className="flex justify-end gap-4 pt-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="change-project-select" className="text-sm font-medium text-text-primary">
+          {localize('com_ui_select_project')}
+        </Label>
+        <ControlCombobox
+          selectId="change-project-select"
+          selectedValue={selectedProjectId}
+          displayValue={selectedProject?.name}
+          items={projectItems}
+          setValue={setSelectedProjectId}
+          SelectIcon={<Folder className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
+          ariaLabel={localize('com_ui_select_project')}
+          searchPlaceholder={localize('com_ui_search_projects')}
+          selectPlaceholder={localize('com_ui_select_project')}
+          isCollapsed={false}
+          showCarat={true}
+          placement="bottom-start"
+          portal={false}
+          matchTriggerWidth={true}
+          containerClassName="w-full px-0"
+          className="h-10 w-full justify-start gap-2 rounded-xl border border-border-light bg-surface-tertiary px-3 text-sm text-text-primary hover:bg-surface-hover"
+        />
+        {hasNextPage ? (
+          <Button
+            type="button"
+            variant="link"
+            className="h-auto justify-start px-0 text-sm"
+            onClick={() => fetchNextPage()}
+            disabled={isFetchingNextPage}
+          >
+            {isFetchingNextPage ? localize('com_ui_loading') : localize('com_ui_load_more')}
+          </Button>
+        ) : null}
+      </div>
+      <div className="flex justify-end gap-2 pt-4">
         <OGDialogClose asChild>
-          <Button aria-label="cancel" variant="outline">
+          <Button type="button" variant="outline">
             {localize('com_ui_cancel')}
           </Button>
         </OGDialogClose>
-        <Button onClick={saveProject} disabled={assignConversation.isLoading}>
+        <Button type="button" variant="submit" onClick={saveProject} disabled={!canSave}>
           {assignConversation.isLoading ? <Spinner /> : localize('com_ui_save')}
         </Button>
       </div>