🎉 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
2025-12-24 04:10:15 +01:00 · 2024-12-04 15:48:13 -05:00 · 2024-12-04 15:48:13 -05:00 · 1a815f5e19
commit 1a815f5e19
parent affcebd48c
189 changed files with 5056 additions and 1815 deletions
--- a/client/src/components/Chat/Messages/Content/ContentParts.tsx
+++ b/client/src/components/Chat/Messages/Content/ContentParts.tsx
@ -4,12 +4,14 @@ import { ContentTypes } from 'librechat-data-provider';
 import type { TMessageContentParts, TAttachment, Agents } from 'librechat-data-provider';
 import EditTextPart from './Parts/EditTextPart';
 import { mapAttachments } from '~/utils/map';
+import { MessageContext } from '~/Providers';
 import store from '~/store';
 import Part from './Part';

 type ContentPartsProps = {
  content: Array<TMessageContentParts | undefined> | undefined;
  messageId: string;
+  conversationId?: string | null;
  attachments?: TAttachment[];
  isCreatedByUser: boolean;
  isLast: boolean;
@ -27,6 +29,7 @@ const ContentParts = memo(
  ({
    content,
    messageId,
+    conversationId,
    attachments,
    isCreatedByUser,
    isLast,
@ -79,15 +82,23 @@ const ContentParts = memo(
            const attachments = attachmentMap[toolCallId];

            return (
-              <Part
-                part={part}
-                isSubmitting={isSubmitting}
-                attachments={attachments}
-                key={`display-${messageId}-${idx}`}
-                showCursor={idx === content.length - 1 && isLast}
-                messageId={messageId}
-                isCreatedByUser={isCreatedByUser}
-              />
+              <MessageContext.Provider
+                key={`provider-${messageId}-${idx}`}
+                value={{
+                  messageId,
+                  conversationId,
+                  partIndex: idx,
+                }}
+              >
+                <Part
+                  part={part}
+                  attachments={attachments}
+                  isSubmitting={isSubmitting}
+                  key={`part-${messageId}-${idx}`}
+                  isCreatedByUser={isCreatedByUser}
+                  showCursor={idx === content.length - 1 && isLast}
+                />
+              </MessageContext.Provider>
            );
          })}
      </>
--- a/client/src/components/Chat/Messages/Content/Markdown.tsx
+++ b/client/src/components/Chat/Messages/Content/Markdown.tsx
@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useRef, useEffect } from 'react';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import supersub from 'remark-supersub';
@ -10,10 +10,10 @@ import remarkDirective from 'remark-directive';
 import type { Pluggable } from 'unified';
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
+import { useToastContext, CodeBlockProvider, useCodeBlockContext } from '~/Providers';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
 import useLocalize from '~/hooks/useLocalize';
-import { useToastContext } from '~/Providers';
 import store from '~/store';

 type TCodeProps = {
@ -25,6 +25,32 @@ type TCodeProps = {
 export const code: React.ElementType = memo(({ className, children }: TCodeProps) => {
  const match = /language-(\w+)/.exec(className ?? '');
  const lang = match && match[1];
+  const isMath = lang === 'math';
+  const isSingleLine = typeof children === 'string' && children.split('\n').length === 1;
+
+  const { getNextIndex, resetCounter } = useCodeBlockContext();
+  const blockIndex = useRef(getNextIndex(isMath || isSingleLine)).current;
+
+  useEffect(() => {
+    resetCounter();
+  }, [children, resetCounter]);
+
+  if (isMath) {
+    return children;
+  } else if (isSingleLine) {
+    return (
+      <code onDoubleClick={handleDoubleClick} className={className}>
+        {children}
+      </code>
+    );
+  } else {
+    return <CodeBlock lang={lang ?? 'text'} codeChildren={children} blockIndex={blockIndex} />;
+  }
+});
+
+export const codeNoExecution: React.ElementType = memo(({ className, children }: TCodeProps) => {
+  const match = /language-(\w+)/.exec(className ?? '');
+  const lang = match && match[1];

  if (lang === 'math') {
    return children;
@ -35,7 +61,7 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
      </code>
    );
  } else {
-    return <CodeBlock lang={lang ?? 'text'} codeChildren={children} />;
+    return <CodeBlock lang={lang ?? 'text'} codeChildren={children} allowExecution={false} />;
  }
 });

@ -45,7 +71,11 @@ export const a: React.ElementType = memo(
    const { showToast } = useToastContext();
    const localize = useLocalize();

-    const { file_id, filename, filepath } = useMemo(() => {
+    const {
+      file_id = '',
+      filename = '',
+      filepath,
+    } = useMemo(() => {
      const pattern = new RegExp(`(?:files|outputs)/${user?.id}/([^\\s]+)`);
      const match = href.match(pattern);
      if (match && match[0]) {
@ -164,25 +194,27 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
    : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];

  return (
-    <ReactMarkdown
-      /** @ts-ignore */
-      remarkPlugins={remarkPlugins}
-      /* @ts-ignore */
-      rehypePlugins={rehypePlugins}
-      // linkTarget="_new"
-      components={
-        {
-          code,
-          a,
-          p,
-          artifact: Artifact,
-        } as {
-          [nodeType: string]: React.ElementType;
+    <CodeBlockProvider>
+      <ReactMarkdown
+        /** @ts-ignore */
+        remarkPlugins={remarkPlugins}
+        /* @ts-ignore */
+        rehypePlugins={rehypePlugins}
+        // linkTarget="_new"
+        components={
+          {
+            code,
+            a,
+            p,
+            artifact: Artifact,
+          } as {
+            [nodeType: string]: React.ElementType;
+          }
        }
-      }
-    >
-      {isLatestMessage && showCursor === true ? currentContent + cursor : currentContent}
-    </ReactMarkdown>
+      >
+        {isLatestMessage && showCursor === true ? currentContent + cursor : currentContent}
+      </ReactMarkdown>
+    </CodeBlockProvider>
  );
 });

--- a/client/src/components/Chat/Messages/Content/MarkdownLite.tsx
+++ b/client/src/components/Chat/Messages/Content/MarkdownLite.tsx
@ -6,40 +6,51 @@ import supersub from 'remark-supersub';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
+import { code, codeNoExecution, a, p } from './Markdown';
+import { CodeBlockProvider } from '~/Providers';
 import { langSubset } from '~/utils';
-import { code, a, p } from './Markdown';

-const MarkdownLite = memo(({ content = '' }: { content?: string }) => {
-  const rehypePlugins: PluggableList = [
-    [rehypeKatex, { output: 'mathml' }],
-    [
-      rehypeHighlight,
-      {
-        detect: true,
-        ignoreMissing: true,
-        subset: langSubset,
-      },
-    ],
-  ];
-
-  return (
-    <ReactMarkdown
-      remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
-      rehypePlugins={rehypePlugins}
-      // linkTarget="_new"
-      components={
+const MarkdownLite = memo(
+  ({ content = '', codeExecution = true }: { content?: string; codeExecution?: boolean }) => {
+    const rehypePlugins: PluggableList = [
+      [rehypeKatex, { output: 'mathml' }],
+      [
+        rehypeHighlight,
        {
-          code,
-          a,
-          p,
-        } as {
-          [nodeType: string]: React.ElementType;
-        }
-      }
-    >
-      {content}
-    </ReactMarkdown>
-  );
-});
+          detect: true,
+          ignoreMissing: true,
+          subset: langSubset,
+        },
+      ],
+    ];
+
+    return (
+      <CodeBlockProvider>
+        <ReactMarkdown
+          remarkPlugins={[
+            /** @ts-ignore */
+            supersub,
+            remarkGfm,
+            [remarkMath, { singleDollarTextMath: true }],
+          ]}
+          /** @ts-ignore */
+          rehypePlugins={rehypePlugins}
+          // linkTarget="_new"
+          components={
+            {
+              code: codeExecution ? code : codeNoExecution,
+              a,
+              p,
+            } as {
+              [nodeType: string]: React.ElementType;
+            }
+          }
+        >
+          {content}
+        </ReactMarkdown>
+      </CodeBlockProvider>
+    );
+  },
+);

 export default MarkdownLite;
--- a/client/src/components/Chat/Messages/Content/Part.tsx
+++ b/client/src/components/Chat/Messages/Content/Part.tsx
@ -21,143 +21,130 @@ type PartProps = {
  part?: TMessageContentParts;
  isSubmitting: boolean;
  showCursor: boolean;
-  messageId: string;
  isCreatedByUser: boolean;
  attachments?: TAttachment[];
 };

-const Part = memo(
-  ({ part, isSubmitting, attachments, showCursor, messageId, isCreatedByUser }: PartProps) => {
-    attachments && console.log(attachments);
-    if (!part) {
+const Part = memo(({ part, isSubmitting, attachments, showCursor, isCreatedByUser }: PartProps) => {
+  if (!part) {
+    return null;
+  }
+
+  if (part.type === ContentTypes.ERROR) {
+    return <ErrorMessage text={part[ContentTypes.TEXT].value} className="my-2" />;
+  } else if (part.type === ContentTypes.TEXT) {
+    const text = typeof part.text === 'string' ? part.text : part.text.value;
+
+    if (typeof text !== 'string') {
+      return null;
+    }
+    if (part.tool_call_ids != null && !text) {
+      return null;
+    }
+    return (
+      <Container>
+        <Text text={text} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
+      </Container>
+    );
+  } else if (part.type === ContentTypes.TOOL_CALL) {
+    const toolCall = part[ContentTypes.TOOL_CALL];
+
+    if (!toolCall) {
      return null;
    }

-    if (part.type === ContentTypes.ERROR) {
-      return <ErrorMessage text={part[ContentTypes.TEXT].value} className="my-2" />;
-    } else if (part.type === ContentTypes.TEXT) {
-      const text = typeof part.text === 'string' ? part.text : part.text.value;
-
-      if (typeof text !== 'string') {
-        return null;
-      }
-      if (part.tool_call_ids != null && !text) {
-        return null;
-      }
+    const isToolCall =
+      'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
+    if (isToolCall && toolCall.name === Tools.execute_code) {
      return (
-        <Container>
-          <Text
-            text={text}
-            isCreatedByUser={isCreatedByUser}
-            messageId={messageId}
-            showCursor={showCursor}
-          />
-        </Container>
+        <ExecuteCode
+          args={typeof toolCall.args === 'string' ? toolCall.args : ''}
+          output={toolCall.output ?? ''}
+          initialProgress={toolCall.progress ?? 0.1}
+          isSubmitting={isSubmitting}
+          attachments={attachments}
+        />
      );
-    } else if (part.type === ContentTypes.TOOL_CALL) {
-      const toolCall = part[ContentTypes.TOOL_CALL];
-
-      if (!toolCall) {
+    } else if (isToolCall) {
+      return (
+        <ToolCall
+          args={toolCall.args ?? ''}
+          name={toolCall.name || ''}
+          output={toolCall.output ?? ''}
+          initialProgress={toolCall.progress ?? 0.1}
+          isSubmitting={isSubmitting}
+          attachments={attachments}
+        />
+      );
+    } else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {
+      const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
+      return (
+        <CodeAnalyze
+          initialProgress={toolCall.progress ?? 0.1}
+          code={code_interpreter.input}
+          outputs={code_interpreter.outputs ?? []}
+          isSubmitting={isSubmitting}
+        />
+      );
+    } else if (
+      toolCall.type === ToolCallTypes.RETRIEVAL ||
+      toolCall.type === ToolCallTypes.FILE_SEARCH
+    ) {
+      return (
+        <RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />
+      );
+    } else if (
+      toolCall.type === ToolCallTypes.FUNCTION &&
+      ToolCallTypes.FUNCTION in toolCall &&
+      imageGenTools.has(toolCall.function.name)
+    ) {
+      return (
+        <ImageGen
+          initialProgress={toolCall.progress ?? 0.1}
+          args={toolCall.function.arguments as string}
+        />
+      );
+    } else if (toolCall.type === ToolCallTypes.FUNCTION && ToolCallTypes.FUNCTION in toolCall) {
+      if (isImageVisionTool(toolCall)) {
+        if (isSubmitting && showCursor) {
+          return (
+            <Container>
+              <Text text={''} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
+            </Container>
+          );
+        }
        return null;
      }

-      const isToolCall =
-        'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
-      if (isToolCall && toolCall.name === Tools.execute_code) {
-        return (
-          <ExecuteCode
-            args={typeof toolCall.args === 'string' ? toolCall.args : ''}
-            output={toolCall.output ?? ''}
-            initialProgress={toolCall.progress ?? 0.1}
-            isSubmitting={isSubmitting}
-            attachments={attachments}
-          />
-        );
-      } else if (isToolCall) {
-        return (
-          <ToolCall
-            args={toolCall.args ?? ''}
-            name={toolCall.name ?? ''}
-            output={toolCall.output ?? ''}
-            initialProgress={toolCall.progress ?? 0.1}
-            isSubmitting={isSubmitting}
-          />
-        );
-      } else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {
-        const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
-        return (
-          <CodeAnalyze
-            initialProgress={toolCall.progress ?? 0.1}
-            code={code_interpreter.input}
-            outputs={code_interpreter.outputs ?? []}
-            isSubmitting={isSubmitting}
-          />
-        );
-      } else if (
-        toolCall.type === ToolCallTypes.RETRIEVAL ||
-        toolCall.type === ToolCallTypes.FILE_SEARCH
-      ) {
-        return (
-          <RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />
-        );
-      } else if (
-        toolCall.type === ToolCallTypes.FUNCTION &&
-        ToolCallTypes.FUNCTION in toolCall &&
-        imageGenTools.has(toolCall.function.name)
-      ) {
-        return (
-          <ImageGen
-            initialProgress={toolCall.progress ?? 0.1}
-            args={toolCall.function.arguments as string}
-          />
-        );
-      } else if (toolCall.type === ToolCallTypes.FUNCTION && ToolCallTypes.FUNCTION in toolCall) {
-        if (isImageVisionTool(toolCall)) {
-          if (isSubmitting && showCursor) {
-            return (
-              <Container>
-                <Text
-                  text={''}
-                  isCreatedByUser={isCreatedByUser}
-                  messageId={messageId}
-                  showCursor={showCursor}
-                />
-              </Container>
-            );
-          }
-          return null;
-        }
-
-        return (
-          <ToolCall
-            initialProgress={toolCall.progress ?? 0.1}
-            isSubmitting={isSubmitting}
-            args={toolCall.function.arguments as string}
-            name={toolCall.function.name}
-            output={toolCall.function.output}
-          />
-        );
-      }
-    } else if (part.type === ContentTypes.IMAGE_FILE) {
-      const imageFile = part[ContentTypes.IMAGE_FILE];
-      const height = imageFile.height ?? 1920;
-      const width = imageFile.width ?? 1080;
      return (
-        <Image
-          imagePath={imageFile.filepath}
-          height={height}
-          width={width}
-          altText={imageFile.filename ?? 'Uploaded Image'}
-          placeholderDimensions={{
-            height: height + 'px',
-            width: width + 'px',
-          }}
+        <ToolCall
+          initialProgress={toolCall.progress ?? 0.1}
+          isSubmitting={isSubmitting}
+          args={toolCall.function.arguments as string}
+          name={toolCall.function.name}
+          output={toolCall.function.output}
        />
      );
    }
+  } else if (part.type === ContentTypes.IMAGE_FILE) {
+    const imageFile = part[ContentTypes.IMAGE_FILE];
+    const height = imageFile.height ?? 1920;
+    const width = imageFile.width ?? 1080;
+    return (
+      <Image
+        imagePath={imageFile.filepath}
+        height={height}
+        width={width}
+        altText={imageFile.filename ?? 'Uploaded Image'}
+        placeholderDimensions={{
+          height: height + 'px',
+          width: width + 'px',
+        }}
+      />
+    );
+  }

-    return null;
-  },
-);
+  return null;
+});

 export default Part;
--- a/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
@ -0,0 +1,19 @@
+import { imageExtRegex } from 'librechat-data-provider';
+import type { TAttachment, TFile, TAttachmentMetadata } from 'librechat-data-provider';
+import Image from '~/components/Chat/Messages/Content/Image';
+
+export default function Attachment({ attachment }: { attachment?: TAttachment }) {
+  if (!attachment) {
+    return null;
+  }
+  const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
+  const isImage =
+    imageExtRegex.test(attachment.filename) && width != null && height != null && filepath != null;
+
+  if (isImage) {
+    return (
+      <Image altText={attachment.filename} imagePath={filepath} height={height} width={width} />
+    );
+  }
+  return null;
+}
--- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
@ -1,12 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { CodeInProgress } from './CodeProgress';
-import { imageExtRegex } from 'librechat-data-provider';
-import type { TFile, TAttachment, TAttachmentMetadata } from 'librechat-data-provider';
+import type { TAttachment } from 'librechat-data-provider';
 import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
 import FinishedIcon from '~/components/Chat/Messages/Content/FinishedIcon';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
-import Image from '~/components/Chat/Messages/Content/Image';
+import { CodeInProgress } from './CodeProgress';
+import Attachment from './Attachment';
 import LogContent from './LogContent';
 import { useProgress } from '~/hooks';
 import store from '~/store';
@ -86,7 +85,10 @@ export default function ExecuteCode({
      </div>
      {showCode && (
        <div className="code-analyze-block mb-3 mt-0.5 overflow-hidden rounded-xl bg-black">
-          <MarkdownLite content={code ? `\`\`\`${lang}\n${code}\n\`\`\`` : ''} />
+          <MarkdownLite
+            content={code ? `\`\`\`${lang}\n${code}\n\`\`\`` : ''}
+            codeExecution={false}
+          />
          {output.length > 0 && (
            <div className="bg-gray-700 p-4 text-xs">
              <div
@ -103,25 +105,9 @@ export default function ExecuteCode({
          )}
        </div>
      )}
-      {attachments?.map((attachment, index) => {
-        const { width, height, filepath } = attachment as TFile & TAttachmentMetadata;
-        const isImage =
-          imageExtRegex.test(attachment.filename) &&
-          width != null &&
-          height != null &&
-          filepath != null;
-        if (isImage) {
-          return (
-            <Image
-              key={index}
-              altText={attachment.filename}
-              imagePath={filepath}
-              height={height}
-              width={width}
-            />
-          );
-        }
-      })}
+      {attachments?.map((attachment, index) => (
+        <Attachment attachment={attachment} key={index} />
+      ))}
    </>
  );
 }
--- a/client/src/components/Chat/Messages/Content/Parts/LogContent.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/LogContent.tsx
@ -1,17 +1,26 @@
 import { isAfter } from 'date-fns';
 import React, { useMemo } from 'react';
 import { imageExtRegex } from 'librechat-data-provider';
-import type { TAttachment } from 'librechat-data-provider';
+import type { TFile, TAttachment, TAttachmentMetadata } from 'librechat-data-provider';
+import Image from '~/components/Chat/Messages/Content/Image';
 import { useLocalize } from '~/hooks';
 import LogLink from './LogLink';

 interface LogContentProps {
  output?: string;
+  renderImages?: boolean;
  attachments?: TAttachment[];
 }

-const LogContent: React.FC<LogContentProps> = ({ output = '', attachments }) => {
+type ImageAttachment = TFile &
+  TAttachmentMetadata & {
+    height: number;
+    width: number;
+  };
+
+const LogContent: React.FC<LogContentProps> = ({ output = '', renderImages, attachments }) => {
  const localize = useLocalize();
+
  const processedContent = useMemo(() => {
    if (!output) {
      return '';
@ -21,8 +30,29 @@ const LogContent: React.FC<LogContentProps> = ({ output = '', attachments }) =>
    return parts[0].trim();
  }, [output]);

-  const nonImageAttachments =
-    attachments?.filter((file) => !imageExtRegex.test(file.filename)) || [];
+  const { imageAttachments, nonImageAttachments } = useMemo(() => {
+    const imageAtts: ImageAttachment[] = [];
+    const nonImageAtts: TAttachment[] = [];
+
+    attachments?.forEach((attachment) => {
+      const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
+      const isImage =
+        imageExtRegex.test(attachment.filename) &&
+        width != null &&
+        height != null &&
+        filepath != null;
+      if (isImage) {
+        imageAtts.push(attachment as ImageAttachment);
+      } else {
+        nonImageAtts.push(attachment);
+      }
+    });
+
+    return {
+      imageAttachments: renderImages === true ? imageAtts : null,
+      nonImageAttachments: nonImageAtts,
+    };
+  }, [attachments, renderImages]);

  const renderAttachment = (file: TAttachment) => {
    const now = new Date();
@ -59,6 +89,18 @@ const LogContent: React.FC<LogContentProps> = ({ output = '', attachments }) =>
          ))}
        </div>
      )}
+      {imageAttachments?.map((attachment, index) => {
+        const { width, height, filepath } = attachment;
+        return (
+          <Image
+            key={index}
+            altText={attachment.filename}
+            imagePath={filepath}
+            height={height}
+            width={width}
+          />
+        );
+      })}
    </>
  );
 };
--- a/client/src/components/Chat/Messages/Content/Parts/Text.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Text.tsx
@ -2,15 +2,14 @@ import { memo, useMemo, ReactElement } from 'react';
 import { useRecoilValue } from 'recoil';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
 import Markdown from '~/components/Chat/Messages/Content/Markdown';
-import { useChatContext } from '~/Providers';
+import { useChatContext, useMessageContext } from '~/Providers';
 import { cn } from '~/utils';
 import store from '~/store';

 type TextPartProps = {
  text: string;
-  isCreatedByUser: boolean;
-  messageId: string;
  showCursor: boolean;
+  isCreatedByUser: boolean;
 };

 type ContentType =
@ -18,7 +17,8 @@ type ContentType =
  | ReactElement<React.ComponentProps<typeof MarkdownLite>>
  | ReactElement;

-const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPartProps) => {
+const TextPart = memo(({ text, isCreatedByUser, showCursor }: TextPartProps) => {
+  const { messageId } = useMessageContext();
  const { isSubmitting, latestMessage } = useChatContext();
  const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
  const showCursorState = useMemo(() => showCursor && isSubmitting, [showCursor, isSubmitting]);
--- a/client/src/components/Chat/Messages/Content/ToolCall.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolCall.tsx
@ -1,9 +1,11 @@
 import { useMemo } from 'react';
-import { actionDelimiter, actionDomainSeparator, Constants } from 'librechat-data-provider';
 import * as Popover from '@radix-ui/react-popover';
+import { actionDelimiter, actionDomainSeparator, Constants } from 'librechat-data-provider';
+import type { TAttachment } from 'librechat-data-provider';
 import useLocalize from '~/hooks/useLocalize';
 import ProgressCircle from './ProgressCircle';
 import InProgressCall from './InProgressCall';
+import Attachment from './Parts/Attachment';
 import CancelledIcon from './CancelledIcon';
 import ProgressText from './ProgressText';
 import FinishedIcon from './FinishedIcon';
@ -18,12 +20,14 @@ export default function ToolCall({
  name,
  args: _args = '',
  output,
+  attachments,
 }: {
  initialProgress: number;
  isSubmitting: boolean;
  name: string;
  args: string | Record<string, unknown>;
  output?: string | null;
+  attachments?: TAttachment[];
 }) {
  const localize = useLocalize();
  const progress = useProgress(initialProgress);
@ -106,6 +110,9 @@ export default function ToolCall({
          />
        )}
      </div>
+      {attachments?.map((attachment, index) => (
+        <Attachment attachment={attachment} key={index} />
+      ))}
    </Popover.Root>
  );
 }
--- a/client/src/components/Chat/Messages/Content/ToolPopover.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolPopover.tsx
@ -33,7 +33,7 @@ export default function ToolPopover({
        <div tabIndex={-1}>
          <div className="bg-token-surface-primary max-w-sm rounded-md p-2 shadow-[0_0_24px_0_rgba(0,0,0,0.05),inset_0_0.5px_0_0_rgba(0,0,0,0.05),0_2px_8px_0_rgba(0,0,0,0.05)]">
            <div className="mb-2 text-sm font-medium dark:text-gray-100">
-              {domain
+              {domain != null && domain
                ? localize('com_assistants_domain_info', domain)
                : localize('com_assistants_function_use', function_name)}
            </div>
@ -42,7 +42,7 @@ export default function ToolPopover({
                <code className="!whitespace-pre-wrap ">{formatText(input)}</code>
              </div>
            </div>
-            {output && (
+            {output != null && output && (
              <>
                <div className="mb-2 mt-2 text-sm font-medium dark:text-gray-100">
                  {localize('com_ui_result')}