🗂️ feat: Add Private Chat Projects

api/server/controllers/agents/client.js

@@ -209,6 +209,7 @@ class AgentClient extends BaseClient {
         {
           spec: this.options.spec,
           iconURL: this.options.iconURL,
+          chatProjectId: this.options.chatProjectId,
           endpoint: this.options.endpoint,
           agent_id: this.options.agent.id,
           modelLabel: this.options.modelLabel,

api/server/experimental.js

@@ -382,6 +382,7 @@ if (cluster.isMaster) {
     app.use('/api/messages', routes.messages);
     app.use('/api/convos', routes.convos);
     app.use('/api/presets', routes.presets);
+    app.use('/api/projects', routes.projects);
     app.use('/api/prompts', routes.prompts);
     app.use('/api/skills', routes.skills);
     app.use('/api/categories', routes.categories);

api/server/index.js

@@ -201,6 +201,7 @@ const startServer = async () => {
   app.use('/api/messages', routes.messages);
   app.use('/api/convos', routes.convos);
   app.use('/api/presets', routes.presets);
+  app.use('/api/projects', routes.projects);
   app.use('/api/prompts', routes.prompts);
   app.use('/api/skills', routes.skills);
   app.use('/api/categories', routes.categories);

api/server/routes/convos.js

@@ -31,13 +31,23 @@ const assistantClients = {
 const router = express.Router();
 router.use(requireJwtAuth);
 
+const isValidProjectFilter = (projectId) =>
+  !projectId || projectId === 'unassigned' || /^[a-f\d]{24}$/i.test(projectId);
+
 router.get('/', async (req, res) => {
   const limit = parseInt(req.query.limit, 10) || 25;
   const cursor = req.query.cursor;
   const isArchived = isEnabled(req.query.isArchived);
   const search = req.query.search ? decodeURIComponent(req.query.search) : undefined;
   const sortBy = req.query.sortBy || 'updatedAt';
   const sortDirection = req.query.sortDirection || 'desc';
+  const projectId = Array.isArray(req.query.projectId)
+    ? req.query.projectId[0]
+    : req.query.projectId;
+
+  if (!isValidProjectFilter(projectId)) {
+    return res.status(400).json({ error: 'projectId must be a valid project id or unassigned' });
+  }
 
   let tags;
   if (req.query.tags) {
@@ -53,6 +63,7 @@ router.get('/', async (req, res) => {
       search,
       sortBy,
       sortDirection,
+      projectId,
     });
     res.status(200).json(result);
   } catch (error) {

api/server/routes/index.js

@@ -12,6 +12,7 @@ const staticRoute = require('./static');
 const messages = require('./messages');
 const memories = require('./memories');
 const presets = require('./presets');
+const projects = require('./projects');
 const prompts = require('./prompts');
 const skills = require('./skills');
 const balance = require('./balance');
@@ -59,6 +60,7 @@ module.exports = {
   config,
   models,
   prompts,
+  projects,
   skills,
   actions,
   presets,

api/server/routes/projects.js

@@ -0,0 +1,25 @@
+const express = require('express');
+const { createProjectHandlers } = require('@librechat/api');
+const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
+const db = require('~/models');
+
+const router = express.Router();
+const handlers = createProjectHandlers({
+  listChatProjects: db.listChatProjects,
+  createChatProject: db.createChatProject,
+  getChatProject: db.getChatProject,
+  updateChatProject: db.updateChatProject,
+  deleteChatProject: db.deleteChatProject,
+  assignConversationToProject: db.assignConversationToProject,
+});
+
+router.use(requireJwtAuth);
+
+router.get('/', handlers.listProjects);
+router.post('/', handlers.createProject);
+router.put('/conversations/:conversationId', handlers.assignConversationToProject);
+router.get('/:projectId', handlers.getProject);
+router.patch('/:projectId', handlers.updateProject);
+router.delete('/:projectId', handlers.deleteProject);
+
+module.exports = router;

api/server/services/Endpoints/agents/build.js

@@ -7,7 +7,7 @@ const db = require('~/models');
 const loadAgent = (params) => loadAgentFn(params, { getAgent: db.getAgent, getMCPServerTools });
 
 const buildOptions = (req, endpoint, parsedBody, endpointType) => {
-  const { spec, iconURL, agent_id, ...model_parameters } = parsedBody;
+  const { spec, iconURL, agent_id, chatProjectId, ...model_parameters } = parsedBody;
   const agentPromise = loadAgent({
     req,
     spec,
@@ -28,6 +28,7 @@ const buildOptions = (req, endpoint, parsedBody, endpointType) => {
     endpoint,
     agent_id,
     endpointType,
+    chatProjectId,
     model_parameters,
     agent: agentPromise,
     addedConvo,

api/server/services/Endpoints/agents/initialize.js

@@ -857,6 +857,7 @@ const initializeClient = async ({ req, res, signal, endpointOption }) => {
     agent: primaryConfig,
     spec: endpointOption.spec,
     iconURL: endpointOption.iconURL,
+    chatProjectId: endpointOption.chatProjectId,
     attachments: primaryConfig.requestAttachments ?? primaryConfig.attachments,
     agentContextAttachmentsByAgentId,
     endpointType: endpointOption.endpointType,

client/src/components/Chat/ChatView.tsx

@@ -4,14 +4,21 @@ import { useForm } from 'react-hook-form';
 import { Spinner } from '@librechat/client';
 import { useParams } from 'react-router-dom';
 import { Constants, buildTree } from 'librechat-data-provider';
-import type { TMessage } from 'librechat-data-provider';
+import type { TChatProject, TMessage } from 'librechat-data-provider';
 import type { ChatFormValues } from '~/common';
 import { ChatContext, AddedChatContext, ChatFormProvider, useFileMapContext } from '~/Providers';
-import { useAddedResponse, useResumeOnLoad, useAdaptiveSSE, useChatHelpers } from '~/hooks';
+import {
+  useAddedResponse,
+  useResumeOnLoad,
+  useAdaptiveSSE,
+  useChatHelpers,
+  useLocalize,
+} from '~/hooks';
 import ConversationStarters from './Input/ConversationStarters';
 import { useGetMessagesByConvoId } from '~/data-provider';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
+import ProjectLandingChip from './ProjectLandingChip';
 import ChatForm from './Input/ChatForm';
 import Landing from './Landing';
 import Header from './Header';
@@ -29,8 +36,9 @@ function LoadingSpinner() {
   );
 }
 
-function ChatView({ index = 0 }: { index?: number }) {
+function ChatView({ index = 0, project }: { index?: number; project?: TChatProject }) {
   const { conversationId } = useParams();
+  const localize = useLocalize();
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
   const isSubmitting = useRecoilValue(store.isSubmittingFamily(index));
   const centerFormOnLanding = useRecoilValue(store.centerFormOnLanding);
@@ -70,6 +78,7 @@ function ChatView({ index = 0 }: { index?: number }) {
     (!messagesTree || messagesTree.length === 0) &&
     (conversationId === Constants.NEW_CONVO || !conversationId);
   const isNavigating = (!messagesTree || messagesTree.length === 0) && conversationId != null;
+  const isProjectLandingPage = isLandingPage && project != null;
 
   if (isLoading && conversationId !== Constants.NEW_CONVO) {
     content = <LoadingSpinner />;
@@ -81,6 +90,11 @@ function ChatView({ index = 0 }: { index?: number }) {
     content = <Landing centerFormOnLanding={centerFormOnLanding} />;
   }
 
+  const chatFormPlaceholder =
+    isProjectLandingPage && project
+      ? localize('com_ui_new_chat_in_project', { name: project.name })
+      : undefined;
+
   return (
     <ChatFormProvider {...methods}>
       <ChatContext.Provider value={chatHelpers}>
@@ -104,7 +118,8 @@ function ChatView({ index = 0 }: { index?: number }) {
                       isLandingPage && 'max-w-3xl transition-all duration-200 xl:max-w-4xl',
                     )}
                   >
-                    <ChatForm index={index} />
+                    {isProjectLandingPage && project && <ProjectLandingChip project={project} />}
+                    <ChatForm index={index} placeholder={chatFormPlaceholder} />
                     {isLandingPage ? <ConversationStarters /> : <Footer />}
                   </div>
                 </div>

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

@@ -42,6 +42,7 @@ import store from '~/store';
 
 interface ChatFormProps {
   index: number;
+  placeholder?: string;
   /** From ChatContext — individual values so memo can compare them */
   files: Map<string, ExtendedFile>;
   setFiles: FileSetter;
@@ -55,6 +56,7 @@ interface ChatFormProps {
 
 const ChatForm = memo(function ChatForm({
   index,
+  placeholder,
   files,
   setFiles,
   conversation,
@@ -177,6 +179,7 @@ const ChatForm = memo(function ChatForm({
     submitButtonRef,
     setIsScrollable,
     disabled: disableInputs,
+    placeholder,
   });
 
   useQueryParams({ textAreaRef });
@@ -413,7 +416,7 @@ 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 }: { index?: number }) {
+function ChatFormWrapper({ index = 0, placeholder }: { index?: number; placeholder?: string }) {
   const {
     files,
     setFiles,
@@ -465,6 +468,7 @@ function ChatFormWrapper({ index = 0 }: { index?: number }) {
   return (
     <ChatForm
       index={index}
+      placeholder={placeholder}
       files={files}
       setFiles={setFiles}
       conversation={stableConversation}

client/src/components/Chat/ProjectLandingChip.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Folder, X } from 'lucide-react';
+import { ControlCombobox, TooltipAnchor } from '@librechat/client';
+import type { TChatProject } from 'librechat-data-provider';
+import type { OptionWithIcon } from '~/common';
+import { useProjectsInfiniteQuery } from '~/data-provider';
+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.
+ */
+export default function ProjectLandingChip({ project }: { project: TChatProject }) {
+  const localize = useLocalize();
+  const { conversation, setConversation } = useChatContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { data } = useProjectsInfiniteQuery(
+    { sortBy: 'lastConversationAt', sortDirection: 'desc', limit: 100 },
+    { staleTime: 30000 },
+  );
+  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) ?? [], [data?.pages]);
+  const items = useMemo<OptionWithIcon[]>(
+    () =>
+      projects.map((item) => ({
+        label: item.name,
+        value: item._id,
+        icon: <Folder className="h-4 w-4 text-text-secondary" aria-hidden="true" />,
+      })),
+    [projects],
+  );
+
+  const applyProject = useCallback(
+    (projectId: string | null) => {
+      if (conversation) {
+        setConversation({ ...conversation, chatProjectId: projectId });
+      }
+      const nextParams = new URLSearchParams(searchParams);
+      if (projectId) {
+        nextParams.set('projectId', projectId);
+      } else {
+        nextParams.delete('projectId');
+      }
+      setSearchParams(nextParams, { replace: true });
+    },
+    [conversation, setConversation, searchParams, setSearchParams],
+  );
+
+  return (
+    <div className="group mb-2.5 flex items-center gap-1 px-1">
+      <ControlCombobox
+        selectId="project-landing-select"
+        selectedValue={project._id}
+        displayValue={project.name}
+        items={items}
+        setValue={(value) => {
+          if (value) {
+            applyProject(value);
+          }
+        }}
+        SelectIcon={<Folder className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />}
+        ariaLabel={localize('com_ui_change_project')}
+        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"
+      />
+      <TooltipAnchor
+        description={localize('com_ui_remove_from_project')}
+        render={
+          <button
+            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"
+          >
+            <X className="h-3.5 w-3.5" aria-hidden="true" />
+          </button>
+        }
+      />
+    </div>
+  );
+}