🎉 feat: Code Interpreter API and Agents Release (#4860)

* feat: Code Interpreter API & File Search Agent Uploads

chore: add back code files

wip: first pass, abstract key dialog

refactor: influence checkbox on key changes

refactor: update localization keys for 'execute code' to 'run code'

wip: run code button

refactor: add throwError parameter to loadAuthValues and getUserPluginAuthValue functions

feat: first pass, API tool calling

fix: handle missing toolId in callTool function and return 404 for non-existent tools

feat: show code outputs

fix: improve error handling in callTool function and log errors

fix: handle potential null value for filepath in attachment destructuring

fix: normalize language before rendering and prevent null return

fix: add loading indicator in RunCode component while executing code

feat: add support for conditional code execution in Markdown components

feat: attachments

refactor: remove bash

fix: pass abort signal to graph/run

refactor: debounce and rate limit tool call

refactor: increase debounce delay for execute function

feat: set code output attachments

feat: image attachments

refactor: apply message context

refactor: pass `partIndex`

feat: toolCall schema/model/methods

feat: block indexing

feat: get tool calls

chore: imports

chore: typing

chore: condense type imports

feat: get tool calls

fix: block indexing

chore: typing

refactor: update tool calls mapping to support multiple results

fix: add unique key to nav link for rendering

wip: first pass, tool call results

refactor: update query cache from successful tool call mutation

style: improve result switcher styling

chore: note on using \`.toObject()\`

feat: add agent_id field to conversation schema

chore: typing

refactor: rename agentMap to agentsMap for consistency

feat: Agent Name as chat input placeholder

chore: bump agents

📦 chore: update @langchain dependencies to latest versions to match agents package

📦 chore: update @librechat/agents dependency to version 1.8.0

fix: Aborting agent stream removes sender; fix(bedrock): completion removes preset name label

refactor: remove direct file parameter to use req.file, add `processAgentFileUpload` for image uploads

feat: upload menu

feat: prime message_file resources

feat: implement conversation access validation in chat route

refactor: remove file parameter from processFileUpload and use req.file instead

feat: add savedMessageIds set to track saved message IDs in BaseClient, to prevent unnecessary double-write to db

feat: prevent duplicate message saves by checking savedMessageIds in AgentController

refactor: skip legacy RAG API handling for agents

feat: add files field to convoSchema

refactor: update request type annotations from Express.Request to ServerRequest in file processing functions

feat: track conversation files

fix: resendFiles, addPreviousAttachments handling

feat: add ID validation for session_id and file_id in download route

feat: entity_id for code file uploads/downloads

fix: code file edge cases

feat: delete related tool calls

feat: add stream rate handling for LLM configuration

feat: enhance system content with attached file information

fix: improve error logging in resource priming function

* WIP: PoC, sequential agents

WIP: PoC Sequential Agents, first pass content data + bump agents package

fix: package-lock

WIP: PoC, o1 support, refactor bufferString

feat: convertJsonSchemaToZod

fix: form issues and schema defining erroneous model

fix: max length issue on agent form instructions, limit conversation messages to sequential agents

feat: add abort signal support to createRun function and AgentClient

feat: PoC, hide prior sequential agent steps

fix: update parameter naming from config to metadata in event handlers for clarity, add model to usage data

refactor: use only last contentData, track model for usage data

chore: bump agents package

fix: content parts issue

refactor: filter contentParts to include tool calls and relevant indices

feat: show function calls

refactor: filter context messages to exclude tool calls when no tools are available to the agent

fix: ensure tool call content is not undefined in formatMessages

feat: add agent_id field to conversationPreset schema

feat: hide sequential agents

feat: increase upload toast duration to 10 seconds

* refactor: tool context handling & update Code API Key Dialog

feat: toolContextMap

chore: skipSpecs -> useSpecs

ci: fix handleTools tests

feat: API Key Dialog

* feat: Agent Permissions Admin Controls

feat: replace label with button for prompt permission toggle

feat: update agent permissions

feat: enable experimental agents and streamline capability configuration

feat: implement access control for agents and enhance endpoint menu items

feat: add welcome message for agent selection in localization

feat: add agents permission to access control and update version to 0.7.57

* fix: update types in useAssistantListMap and useMentions hooks for better null handling

* feat: mention agents

* fix: agent tool resource race conditions when deleting agent tool resource files

* feat: add error handling for code execution with user feedback

* refactor: rename AdminControls to AdminSettings for clarity

* style: add gap to button in AdminSettings for improved layout

* refactor: separate agent query hooks and check access to enable fetching

* fix: remove unused provider from agent initialization options, creates issue with custom endpoints

* refactor: remove redundant/deprecated modelOptions from AgentClient processes

* chore: update @librechat/agents to version 1.8.5 in package.json and package-lock.json

* fix: minor styling issues + agent panel uniformity

* fix: agent edge cases when set endpoint is no longer defined

* refactor: remove unused cleanup function call from AppService

* fix: update link in ApiKeyDialog to point to pricing page

* fix: improve type handling and layout calculations in SidePanel component

* fix: add missing localization string for agent selection in SidePanel

* chore: form styling and localizations for upload filesearch/code interpreter

* fix: model selection placeholder logic in AgentConfig component

* style: agent capabilities

* fix: add localization for provider selection and improve dropdown styling in ModelPanel

* refactor: use gpt-4o-mini > gpt-3.5-turbo

* fix: agents configuration for loadDefaultInterface and update related tests

* feat: DALLE Agents support

client/src/components/Prompts/AdminSettings.tsx

@@ -29,17 +29,19 @@ const LabelController: React.FC<LabelControllerProps> = ({
   setValue,
 }) => (
   <div className="mb-4 flex items-center justify-between gap-2">
-    <label
+    <button
       className="cursor-pointer select-none"
-      htmlFor={promptPerm}
+      type="button"
+      // htmlFor={promptPerm}
       onClick={() =>
         setValue(promptPerm, !getValues(promptPerm), {
           shouldDirty: true,
         })
       }
+      tabIndex={0}
     >
       {label}
-    </label>
+    </button>
     <Controller
       name={promptPerm}
       control={control}
@@ -48,7 +50,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
           {...field}
           checked={field.value}
           onCheckedChange={field.onChange}
-          value={field?.value?.toString()}
+          value={field.value.toString()}
         />
       )}
     />
@@ -61,7 +63,7 @@ const AdminSettings = () => {
   const { showToast } = useToastContext();
   const { mutate, isLoading } = useUpdatePromptPermissionsMutation({
     onSuccess: () => {
-      showToast({ status: 'success', message: localize('com_endpoint_preset_saved') });
+      showToast({ status: 'success', message: localize('com_ui_saved') });
     },
     onError: () => {
       showToast({ status: 'error', message: localize('com_ui_error_save_admin_settings') });

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -14,9 +14,9 @@ import {
   replaceSpecialVars,
   extractVariableInfo,
 } from '~/utils';
+import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import { useAuthContext, useLocalize, useSubmitMessage } from '~/hooks';
 import { TextareaAutosize, InputCombobox } from '~/components/ui';
-import { code } from '~/components/Chat/Messages/Content/Markdown';
 
 type FieldType = 'text' | 'select';
 
@@ -143,12 +143,16 @@ export default function VariableForm({
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-gray-100 p-4 text-text-secondary dark:bg-gray-700/50 sm:max-w-full md:max-h-80">
           <ReactMarkdown
+            /** @ts-ignore */
             remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
             rehypePlugins={[
+              /** @ts-ignore */
               [rehypeKatex, { output: 'mathml' }],
+              /** @ts-ignore */
               [rehypeHighlight, { ignoreMissing: true }],
             ]}
-            components={{ code }}
+            /** @ts-ignore */
+            components={{ code: codeNoExecution }}
             className="prose dark:prose-invert light dark:text-gray-70 my-1 max-h-[50vh] break-words"
           >
             {generateHighlightedMarkdown()}

client/src/components/Prompts/PromptDetails.tsx

@@ -6,7 +6,7 @@ import remarkMath from 'remark-math';
 import supersub from 'remark-supersub';
 import rehypeHighlight from 'rehype-highlight';
 import type { TPromptGroup } from 'librechat-data-provider';
-import { code } from '~/components/Chat/Messages/Content/Markdown';
+import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import { useLocalize, useAuthContext } from '~/hooks';
 import CategoryIcon from './Groups/CategoryIcon';
 import PromptVariables from './PromptVariables';
@@ -50,12 +50,20 @@ const PromptDetails = ({ group }: { group?: TPromptGroup }) => {
             </h2>
             <div className="group relative min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 dark:border-gray-600 sm:max-w-full">
               <ReactMarkdown
-                remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+                remarkPlugins={[
+                  /** @ts-ignore */
+                  supersub,
+                  remarkGfm,
+                  [remarkMath, { singleDollarTextMath: true }],
+                ]}
                 rehypePlugins={[
+                  /** @ts-ignore */
                   [rehypeKatex, { output: 'mathml' }],
+                  /** @ts-ignore */
                   [rehypeHighlight, { ignoreMissing: true }],
                 ]}
-                components={{ p: PromptVariableGfm, code }}
+                /** @ts-ignore */
+                components={{ p: PromptVariableGfm, code: codeNoExecution }}
                 className="prose dark:prose-invert light dark:text-gray-70 my-1"
               >
                 {mainText}

client/src/components/Prompts/PromptEditor.tsx

@@ -9,8 +9,8 @@ import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
 import supersub from 'remark-supersub';
 import ReactMarkdown from 'react-markdown';
+import { codeNoExecution } from '~/components/Chat/Messages/Content/Markdown';
 import AlwaysMakeProd from '~/components/Prompts/Groups/AlwaysMakeProd';
-import { code } from '~/components/Chat/Messages/Content/Markdown';
 import { SaveIcon, CrossIcon } from '~/components/svg';
 import { TextareaAutosize } from '~/components/ui';
 import { PromptVariableGfm } from './Markdown';
@@ -75,7 +75,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
         role="button"
         className={cn(
           'min-h-[8rem] w-full rounded-b-lg border border-border-medium p-4 transition-all duration-150',
-          { 'bg-surface-secondary-alt cursor-pointer hover:bg-surface-tertiary': !isEditing },
+          { 'cursor-pointer bg-surface-secondary-alt hover:bg-surface-tertiary': !isEditing },
         )}
         onClick={() => !isEditing && setIsEditing(true)}
         onKeyDown={(e) => {
@@ -107,9 +107,12 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
               />
             ) : (
               <ReactMarkdown
+                /** @ts-ignore */
                 remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+                /** @ts-ignore */
                 rehypePlugins={rehypePlugins}
-                components={{ p: PromptVariableGfm, code }}
+                /** @ts-ignore */
+                components={{ p: PromptVariableGfm, code: codeNoExecution }}
                 className="markdown prose dark:prose-invert light my-1 w-full break-words text-text-primary"
               >
                 {field.value}

client/src/components/Prompts/PromptVariables.tsx

@@ -53,6 +53,7 @@ const PromptVariables = ({
         ) : (
           <div className="flex h-7 items-center">
             <span className="text-xs text-text-secondary md:text-sm">
+              {/** @ts-ignore */}
               <ReactMarkdown components={{ code: CodeVariableGfm }}>
                 {localize('com_ui_variables_info')}
               </ReactMarkdown>
@@ -68,6 +69,7 @@ const PromptVariables = ({
               </span>
               {'\u00A0'}
               <span className="text-xs text-text-secondary md:text-sm">
+                {/** @ts-ignore */}
                 <ReactMarkdown components={{ code: CodeVariableGfm }}>
                   {localize('com_ui_special_variables_info')}
                 </ReactMarkdown>
@@ -79,6 +81,7 @@ const PromptVariables = ({
               </span>
               {'\u00A0'}
               <span className="text-xs text-text-secondary md:text-sm">
+                {/** @ts-ignore */}
                 <ReactMarkdown components={{ code: CodeVariableGfm }}>
                   {localize('com_ui_dropdown_variables_info')}
                 </ReactMarkdown>