🚧 chore: merge latest dev build (#4288)

* fix: agent initialization, add `collectedUsage` handling

* style: improve side panel styling

* refactor(loadAgent): Optimize order agent project ID retrieval

* feat: code execution

* fix: typing issues

* feat: ExecuteCode content part

* refactor: use local state for default collapsed state of analysis content parts

* fix: code parsing in ExecuteCode component

* chore: bump agents package, export loadAuthValues

* refactor: Update handleTools.js to use EnvVar for code execution tool authentication

* WIP

* feat: download code outputs

* fix(useEventHandlers): type issues

* feat: backend handling for code outputs

* Refactor: Remove console.log statement in Part.tsx

* refactor: add attachments to TMessage/messageSchema

* WIP: prelim handling for code outputs

* feat: attachments rendering

* refactor: improve attachments rendering

* fix: attachments, nullish edge case, handle attachments from event stream, bump agents package

* fix filename download

* fix: tool assignment for 'run code' on agent creation

* fix: image handling by adding attachments

* refactor: prevent agent creation without provider/model

* refactor: remove unnecessary space in agent creation success message

* refactor: select first model if selecting provider from empty on form

* fix: Agent avatar bug

* fix: `defaultAgentFormValues` causing boolean typing issue and typeerror

* fix: capabilities counting as tools, causing duplication of them

* fix: formatted messages edge case where consecutive content text type parts with the latter having tool_call_ids would cause consecutive AI messages to be created. furthermore, content could not be an array for tool_use messages (anthropic limitation)

* chore: bump @librechat/agents dependency to version 1.6.9

* feat: bedrock agents

* feat: new Agents icon

* feat: agent titling

* feat: agent landing

* refactor: allow sharing agent globally only if user is admin or author

* feat: initial AgentPanelSkeleton

* feat: AgentPanelSkeleton

* feat: collaborative agents

* chore: add potential authorName as part of schema

* chore: Remove unnecessary console.log statement

* WIP: agent model parameters

* chore: ToolsDialog typing and tool related localization chnages

* refactor: update tool instance type (latest langchain class), and rename google tool to 'google' proper

* chore: add back tools

* feat: Agent knowledge files upload

* refactor: better verbiage for disabled knowledge

* chore: debug logs for file deletions

* chore: debug logs for file deletions

* feat: upload/delete agent knowledge/file-search files

* feat: file search UI for agents

* feat: first pass, file search tool

* chore: update default agent capabilities and info

client/src/hooks/Agents/useSelectAgent.ts

@@ -17,7 +17,7 @@ export default function useSelectAgent() {
   );
 
   const agentQuery = useGetAgentByIdQuery(selectedAgentId ?? '', {
-    enabled: !!selectedAgentId,
+    enabled: !!(selectedAgentId ?? ''),
   });
 
   const updateConversation = useCallback(

client/src/hooks/Files/useFileDeletion.ts

@@ -1,12 +1,7 @@
 import debounce from 'lodash/debounce';
-import { FileSources, EToolResources } from 'librechat-data-provider';
+import { FileSources, EToolResources, removeNullishValues } from 'librechat-data-provider';
 import { useCallback, useState, useEffect } from 'react';
-import type {
-  BatchFile,
-  TFile,
-  DeleteFilesResponse,
-  DeleteFilesBody,
-} from 'librechat-data-provider';
+import type * as t from 'librechat-data-provider';
 import type { UseMutateAsyncFunction } from '@tanstack/react-query';
 import type { ExtendedFile, GenericSetter } from '~/common';
 import useSetFilesToDelete from './useSetFilesToDelete';
@@ -15,21 +10,38 @@ type FileMapSetter = GenericSetter<Map<string, ExtendedFile>>;
 
 const useFileDeletion = ({
   mutateAsync,
+  agent_id,
   assistant_id,
   tool_resource,
 }: {
-  mutateAsync: UseMutateAsyncFunction<DeleteFilesResponse, unknown, DeleteFilesBody, unknown>;
+  mutateAsync: UseMutateAsyncFunction<t.DeleteFilesResponse, unknown, t.DeleteFilesBody, unknown>;
+  agent_id?: string;
   assistant_id?: string;
   tool_resource?: EToolResources;
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_batch, setFileDeleteBatch] = useState<BatchFile[]>([]);
+  const [_batch, setFileDeleteBatch] = useState<t.BatchFile[]>([]);
   const setFilesToDelete = useSetFilesToDelete();
 
   const executeBatchDelete = useCallback(
-    (filesToDelete: BatchFile[], assistant_id?: string, tool_resource?: EToolResources) => {
-      console.log('Deleting files:', filesToDelete, assistant_id, tool_resource);
-      mutateAsync({ files: filesToDelete, assistant_id, tool_resource });
+    ({
+      filesToDelete,
+      agent_id,
+      assistant_id,
+      tool_resource,
+    }: {
+      filesToDelete: t.BatchFile[];
+      agent_id?: string;
+      assistant_id?: string;
+      tool_resource?: EToolResources;
+    }) => {
+      const payload = removeNullishValues({
+        agent_id,
+        assistant_id,
+        tool_resource,
+      });
+      console.log('Deleting files:', filesToDelete, payload);
+      mutateAsync({ files: filesToDelete, ...payload });
       setFileDeleteBatch([]);
     },
     [mutateAsync],
@@ -44,22 +56,22 @@ const useFileDeletion = ({
   }, [debouncedDelete]);
 
   const deleteFile = useCallback(
-    ({ file: _file, setFiles }: { file: ExtendedFile | TFile; setFiles?: FileMapSetter }) => {
+    ({ file: _file, setFiles }: { file: ExtendedFile | t.TFile; setFiles?: FileMapSetter }) => {
       const {
         file_id,
         temp_file_id = '',
         filepath = '',
         source = FileSources.local,
         embedded,
-        attached,
-      } = _file as TFile & { attached?: boolean };
+        attached = false,
+      } = _file as t.TFile & { attached?: boolean };
 
       const progress = _file['progress'] ?? 1;
 
       if (progress < 1) {
         return;
       }
-      const file: BatchFile = {
+      const file: t.BatchFile = {
         file_id,
         embedded,
         filepath,
@@ -83,15 +95,20 @@ const useFileDeletion = ({
 
       setFileDeleteBatch((prevBatch) => {
         const newBatch = [...prevBatch, file];
-        debouncedDelete(newBatch, assistant_id, tool_resource);
+        debouncedDelete({
+          filesToDelete: newBatch,
+          agent_id,
+          assistant_id,
+          tool_resource,
+        });
         return newBatch;
       });
     },
-    [debouncedDelete, setFilesToDelete, assistant_id, tool_resource],
+    [debouncedDelete, setFilesToDelete, agent_id, assistant_id, tool_resource],
   );
 
   const deleteFiles = useCallback(
-    ({ files, setFiles }: { files: ExtendedFile[] | TFile[]; setFiles?: FileMapSetter }) => {
+    ({ files, setFiles }: { files: ExtendedFile[] | t.TFile[]; setFiles?: FileMapSetter }) => {
       const batchFiles = files.map((_file) => {
         const { file_id, embedded, filepath = '', source = FileSources.local } = _file;
 
@@ -117,11 +134,15 @@ const useFileDeletion = ({
 
       setFileDeleteBatch((prevBatch) => {
         const newBatch = [...prevBatch, ...batchFiles];
-        debouncedDelete(newBatch, assistant_id);
+        debouncedDelete({
+          filesToDelete: newBatch,
+          agent_id,
+          assistant_id,
+        });
         return newBatch;
       });
     },
-    [debouncedDelete, setFilesToDelete, assistant_id],
+    [debouncedDelete, setFilesToDelete, agent_id, assistant_id],
   );
 
   return { deleteFile, deleteFiles };

client/src/hooks/Files/useFileHandling.ts

@@ -40,6 +40,9 @@ const useFileHandling = (params?: UseFileHandling) => {
     params?.fileSetter ?? setFiles,
   );
 
+  const agent_id = params?.additionalMetadata?.agent_id ?? '';
+  const assistant_id = params?.additionalMetadata?.assistant_id ?? '';
+
   const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
     select: (data) => mergeFileConfig(data),
   });
@@ -84,13 +87,17 @@ const useFileHandling = (params?: UseFileHandling) => {
     onSuccess: (data) => {
       clearUploadTimer(data.temp_file_id);
       console.log('upload success', data);
+      if (agent_id) {
+        queryClient.refetchQueries([QueryKeys.agent, agent_id]);
+        return;
+      }
       updateFileById(
         data.temp_file_id,
         {
           progress: 0.9,
           filepath: data.filepath,
         },
-        params?.additionalMetadata?.assistant_id ? true : false,
+        assistant_id ? true : false,
       );
 
       setTimeout(() => {
@@ -108,7 +115,7 @@ const useFileHandling = (params?: UseFileHandling) => {
             source: data.source,
             embedded: data.embedded,
           },
-          params?.additionalMetadata?.assistant_id ? true : false,
+          assistant_id ? true : false,
         );
       }, 300);
     },
@@ -118,51 +125,45 @@ const useFileHandling = (params?: UseFileHandling) => {
       clearUploadTimer(file_id as string);
       deleteFileById(file_id as string);
       setError(
-        (error as TError)?.response?.data?.message ?? 'An error occurred while uploading the file.',
+        (error as TError | undefined)?.response?.data?.message ??
+          'An error occurred while uploading the file.',
       );
     },
   });
 
   const startUpload = async (extendedFile: ExtendedFile) => {
-    if (!endpoint) {
-      setError('An error occurred while uploading the file: Endpoint is undefined');
-      return;
-    }
-
-    startUploadTimer(extendedFile.file_id, extendedFile.file?.name || 'File', extendedFile.size);
+    const filename = extendedFile.file?.name ?? 'File';
+    startUploadTimer(extendedFile.file_id, filename, extendedFile.size);
 
     const formData = new FormData();
-    formData.append(
-      'file',
-      extendedFile.file as File,
-      encodeURIComponent(extendedFile.file?.name || 'File'),
-    );
+    formData.append('file', extendedFile.file as File, encodeURIComponent(filename));
     formData.append('file_id', extendedFile.file_id);
-    if (extendedFile.width) {
-      formData.append('width', extendedFile.width?.toString());
+
+    const width = extendedFile.width ?? 0;
+    const height = extendedFile.height ?? 0;
+    if (width) {
+      formData.append('width', width.toString());
     }
-    if (extendedFile.height) {
-      formData.append('height', extendedFile.height?.toString());
+    if (height) {
+      formData.append('height', height.toString());
     }
 
     if (params?.additionalMetadata) {
-      for (const [key, value] of Object.entries(params.additionalMetadata)) {
+      for (const [key, value = ''] of Object.entries(params.additionalMetadata)) {
         if (value) {
           formData.append(key, value);
         }
       }
     }
 
-    if (
-      isAssistantsEndpoint(endpoint) &&
-      !formData.get('assistant_id') &&
-      conversation?.assistant_id
-    ) {
+    const convoAssistantId = conversation?.assistant_id ?? '';
+    const convoModel = conversation?.model ?? '';
+    if (isAssistantsEndpoint(endpoint) && !formData.get('assistant_id') && convoAssistantId) {
       const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
       const version = endpointsConfig?.[endpoint]?.version ?? defaultAssistantsVersion[endpoint];
       formData.append('version', version);
-      formData.append('assistant_id', conversation.assistant_id);
-      formData.append('model', conversation?.model ?? '');
+      formData.append('assistant_id', convoAssistantId);
+      formData.append('model', convoModel);
       formData.append('message_file', 'true');
     }
     if (isAssistantsEndpoint(endpoint) && !formData.get('version')) {
@@ -238,7 +239,10 @@ const useFileHandling = (params?: UseFileHandling) => {
         (file) =>
           `${file.file?.name ?? file.filename}-${file.size}-${file.type?.split('/')[0] ?? 'file'}`,
       ),
-      ...fileList.map((file) => `${file.name}-${file.size}-${file.type?.split('/')[0] ?? 'file'}`),
+      ...fileList.map(
+        (file: File | undefined) =>
+          `${file?.name}-${file?.size}-${file?.type.split('/')[0] ?? 'file'}`,
+      ),
     ];
 
     const uniqueFilesSet = new Set(combinedFilesInfo);
@@ -300,7 +304,7 @@ const useFileHandling = (params?: UseFileHandling) => {
 
         addFile(extendedFile);
 
-        if (originalFile.type?.split('/')[0] === 'image') {
+        if (originalFile.type.split('/')[0] === 'image') {
           loadImage(extendedFile, preview);
           continue;
         }

client/src/hooks/Files/useUpdateFiles.ts

@@ -20,11 +20,7 @@ export default function useUpdateFiles(setFiles: FileSetter) {
     });
   };
 
-  const updateFileById = (
-    fileId: string,
-    updates: Partial<ExtendedFile>,
-    isAssistantFile?: boolean,
-  ) => {
+  const updateFileById = (fileId: string, updates: Partial<ExtendedFile>, isEntityFile = false) => {
     setFiles((currentFiles) => {
       if (!currentFiles.has(fileId)) {
         console.warn(`File with id ${fileId} not found.`);
@@ -38,8 +34,8 @@ export default function useUpdateFiles(setFiles: FileSetter) {
         return currentFiles;
       }
       updatedFiles.set(fileId, { ...currentFile, ...updates });
-
-      if (updates['filepath'] && updates['progress'] !== 1 && !isAssistantFile) {
+      const filepath = updates['filepath'] ?? '';
+      if (filepath && updates['progress'] !== 1 && !isEntityFile) {
         const files = Object.fromEntries(updatedFiles);
         setFilesToDelete(files);
       }

client/src/hooks/SSE/index.ts

@@ -1,3 +1,4 @@
 export { default as useSSE } from './useSSE';
 export { default as useStepHandler } from './useStepHandler';
 export { default as useContentHandler } from './useContentHandler';
+export { default as useAttachmentHandler } from './useAttachmentHandler';

client/src/hooks/SSE/useAttachmentHandler.ts

@@ -0,0 +1,20 @@
+import { useSetRecoilState } from 'recoil';
+import type { TAttachment, EventSubmission } from 'librechat-data-provider';
+import store from '~/store';
+
+export default function useAttachmentHandler() {
+  const setAttachmentsMap = useSetRecoilState(store.messageAttachmentsMap);
+
+  return ({ data }: { data: TAttachment; submission: EventSubmission }) => {
+    const { messageId } = data;
+
+    setAttachmentsMap((prevMap) => {
+      const messageAttachments =
+        (prevMap as Record<string, TAttachment[] | undefined>)[messageId] || [];
+      return {
+        ...prevMap,
+        [messageId]: [...messageAttachments, data],
+      };
+    });
+  };
+}

client/src/hooks/SSE/useEventHandlers.ts

@@ -28,6 +28,7 @@ import {
   updateConversation,
   getConversationById,
 } from '~/utils';
+import useAttachmentHandler from '~/hooks/SSE/useAttachmentHandler';
 import useContentHandler from '~/hooks/SSE/useContentHandler';
 import useStepHandler from '~/hooks/SSE/useStepHandler';
 import { useAuthContext } from '~/hooks/AuthContext';
@@ -62,7 +63,7 @@ export default function useEventHandlers({
   setMessages,
   getMessages,
   setCompleted,
-  isAddedRequest,
+  isAddedRequest = false,
   setConversation,
   setIsSubmitting,
   newConversation,
@@ -85,6 +86,7 @@ export default function useEventHandlers({
     setIsSubmitting,
     lastAnnouncementTimeRef,
   });
+  const attachmentHandler = useAttachmentHandler();
 
   const messageHandler = useCallback(
     (data: string | undefined, submission: EventSubmission) => {
@@ -138,15 +140,20 @@ export default function useEventHandlers({
       const { requestMessage, responseMessage, conversation } = data;
       const { messages, isRegenerate = false } = submission;
 
-      const convoUpdate = conversation ?? submission.conversation;
+      const convoUpdate =
+        (conversation as TConversation | null) ?? (submission.conversation as TConversation);
 
       // update the messages
       if (isRegenerate) {
-        const messagesUpdate = [...messages, responseMessage].filter((msg) => msg);
-        setMessages(messagesUpdate);
+        const messagesUpdate = (
+          [...messages, responseMessage] as Array<TMessage | undefined>
+        ).filter((msg) => msg);
+        setMessages(messagesUpdate as TMessage[]);
       } else {
-        const messagesUpdate = [...messages, requestMessage, responseMessage].filter((msg) => msg);
-        setMessages(messagesUpdate);
+        const messagesUpdate = (
+          [...messages, requestMessage, responseMessage] as Array<TMessage | undefined>
+        ).filter((msg) => msg);
+        setMessages(messagesUpdate as TMessage[]);
       }
 
       const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
@@ -208,7 +215,10 @@ export default function useEventHandlers({
         setConversation((prevState) => {
           let title = prevState?.title;
           const parentId = requestMessage.parentMessageId;
-          if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
+          if (
+            parentId !== Constants.NO_PARENT &&
+            (title?.toLowerCase()?.includes('new chat') ?? false)
+          ) {
             const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
             const cachedConvo = getConversationById(convos, conversationId);
             title = cachedConvo?.title;
@@ -289,7 +299,10 @@ export default function useEventHandlers({
         setConversation((prevState) => {
           let title = prevState?.title;
           const parentId = isRegenerate ? userMessage.overrideParentMessageId : parentMessageId;
-          if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
+          if (
+            parentId !== Constants.NO_PARENT &&
+            (title?.toLowerCase()?.includes('new chat') ?? false)
+          ) {
             const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
             const cachedConvo = getConversationById(convos, conversationId);
             title = cachedConvo?.title;
@@ -437,7 +450,7 @@ export default function useEventHandlers({
 
       setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
 
-      const conversationId = userMessage.conversationId ?? submission.conversationId;
+      const conversationId = userMessage.conversationId ?? submission.conversationId ?? '';
 
       const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
         const metadata = data['responseMessage'] ?? data;
@@ -456,7 +469,7 @@ export default function useEventHandlers({
       };
 
       if (!data) {
-        const convoId = conversationId ?? v4();
+        const convoId = conversationId || v4();
         const errorResponse = parseErrorResponse({
           text: 'Error connecting to server, try refreshing the page.',
           ...submission,
@@ -473,7 +486,8 @@ export default function useEventHandlers({
         return;
       }
 
-      if (!conversationId && !data.conversationId) {
+      const receivedConvoId = data.conversationId ?? '';
+      if (!conversationId && !receivedConvoId) {
         const convoId = v4();
         const errorResponse = parseErrorResponse(data);
         setMessages([...messages, userMessage, errorResponse]);
@@ -485,7 +499,7 @@ export default function useEventHandlers({
         }
         setIsSubmitting(false);
         return;
-      } else if (!data.conversationId) {
+      } else if (!receivedConvoId) {
         const errorResponse = parseErrorResponse(data);
         setMessages([...messages, userMessage, errorResponse]);
         setIsSubmitting(false);
@@ -500,9 +514,9 @@ export default function useEventHandlers({
       });
 
       setMessages([...messages, userMessage, errorResponse]);
-      if (data.conversationId && paramId === 'new' && newConversation) {
+      if (receivedConvoId && paramId === 'new' && newConversation) {
         newConversation({
-          template: { conversationId: data.conversationId },
+          template: { conversationId: receivedConvoId },
           preset: tPresetSchema.parse(submission.conversation),
         });
       }
@@ -517,7 +531,8 @@ export default function useEventHandlers({
     async (conversationId = '', submission: EventSubmission, messages?: TMessage[]) => {
       const runAbortKey = `${conversationId}:${messages?.[messages.length - 1]?.messageId ?? ''}`;
       console.log({ conversationId, submission, messages, runAbortKey });
-      const { endpoint: _endpoint, endpointType } = submission.conversation || {};
+      const { endpoint: _endpoint, endpointType } =
+        (submission.conversation as TConversation | null) ?? {};
       const endpoint = endpointType ?? _endpoint;
       try {
         const response = await fetch(`${EndpointURLs[endpoint ?? '']}/abort`, {
@@ -541,7 +556,7 @@ export default function useEventHandlers({
             setIsSubmitting(false);
             return;
           }
-          if (data.final) {
+          if (data.final === true) {
             finalHandler(data, submission);
           } else {
             cancelHandler(data, submission);
@@ -569,13 +584,13 @@ export default function useEventHandlers({
       } catch (error) {
         console.error('Error cancelling request');
         console.error(error);
-        const convoId = conversationId ?? v4();
+        const convoId = conversationId || v4();
         const text =
           submission.initialResponse.text.length > 45 ? submission.initialResponse.text : '';
         const errorMessage = {
           ...submission,
           ...submission.initialResponse,
-          text: text ?? (error as Error).message ?? 'Error cancelling request',
+          text: (text || (error as Error | undefined)?.message) ?? 'Error cancelling request',
           unfinished: !!text.length,
           error: true,
         };
@@ -601,6 +616,7 @@ export default function useEventHandlers({
     messageHandler,
     contentHandler,
     createdHandler,
+    attachmentHandler,
     abortConversation,
   };
 }

client/src/hooks/SSE/useSSE.ts

@@ -10,7 +10,7 @@ import {
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
-import type { TMessage, TSubmission, EventSubmission } from 'librechat-data-provider';
+import type { TMessage, TSubmission, TPayload, EventSubmission } from 'librechat-data-provider';
 import type { EventHandlerParams } from './useEventHandlers';
 import type { TResData } from '~/common';
 import { useGenTitleMutation } from '~/data-provider';
@@ -59,6 +59,7 @@ export default function useSSE(
     messageHandler,
     contentHandler,
     createdHandler,
+    attachmentHandler,
     abortConversation,
   } = useEventHandlers({
     genTitle,
@@ -88,7 +89,7 @@ export default function useSSE(
     const payloadData = createPayload(submission);
     let { payload } = payloadData;
     if (isAssistantsEndpoint(payload.endpoint) || isAgentsEndpoint(payload.endpoint)) {
-      payload = removeNullishValues(payload);
+      payload = removeNullishValues(payload) as TPayload;
     }
 
     let textIndex = null;
@@ -98,6 +99,15 @@ export default function useSSE(
       headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
     });
 
+    events.onattachment = (e: MessageEvent) => {
+      try {
+        const data = JSON.parse(e.data);
+        attachmentHandler({ data, submission: submission as EventSubmission });
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
     events.onmessage = (e: MessageEvent) => {
       const data = JSON.parse(e.data);