From 0c66823c26b301eae24aead2453612f20f91c3cb Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Wed, 25 Mar 2026 12:31:39 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=A9=20feat:=20Redesign=20Tool=20Call?= =?UTF-8?q?=20UI=20with=20Contextual=20Icons,=20Smart=20Grouping,=20and=20?= =?UTF-8?q?Rich=20Output=20Rendering=20(#12163)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redesign tool call UI with type-specific icons, smart grouping, and rich output rendering Replace the generic spinner/checkmark tool call UI with a modern, Cursor-inspired design: - Add per-tool-type icons (Plug for MCP, Terminal for code, Globe for web search, etc.) - Group 2+ consecutive tool calls into collapsible "Used N tools" sections - Stack unique tool icons in grouped headers with overlapping circle design - Replace raw JSON output with intelligent renderers (table, error, text) - Restructure ToolCallInfo: output first, parameters collapsible at bottom - Add shared useExpandCollapse hook for consistent animations - Add CodeWindowHeader for ExecuteCode windowed view - Remove FinishedIcon (purple checkmark) entirely * feat: display custom MCP server icons in tool calls Add useMCPIconMap hook to resolve MCP server names to their configured icon paths. ToolIcon and StackedToolIcons now accept custom icon URLs, showing actual server logos (e.g., Home Assistant, GitHub) instead of the generic Plug icon for MCP tool calls. * refactor: unify container styling across code blocks, mermaid, and tool output Replace hardcoded gray colors with theme tokens throughout: - CodeBlock: bg-gray-900/700 -> bg-surface-secondary/tertiary + border-border-light - Mermaid dialog: bg-gray-700 -> bg-surface-secondary, text-gray-200 -> text-text-secondary - Mermaid containers: rounded-xl -> rounded-lg, remove shadow-md for consistency - ResultSwitcher: bg-gray-700 -> bg-surface-secondary with border separator - RunCode: hover:bg-gray-700 -> hover:bg-surface-hover - ErrorOutput: add border for visual consistency - MermaidHeader/CodeWindowHeader: consistent focus outlines using border-heavy * refactor: simplify tool output to plain text, remove custom renderers Remove over-engineered tool output system (TableOutput, ErrorOutput, detectOutputType) in favor of simple text extraction. Tool output now extracts the text content from MCP content blocks and displays it as clean readable text — no tables, no error styling, no JSON formatting. Parameters only show key-value badges for simple objects; complex JSON is hidden instead of dumped raw. Matches Cursor-style simplicity. * fix: handle error messages and format JSON arrays in tool output - Strip verbose MCP error prefixes (Error: [MCP][server][tool] tool call failed: Error POSTing...) and show just the meaningful error message - Display errors in red text - Format uniform JSON arrays as readable lists (name — path) instead of raw JSON dumps - Format plain JSON objects as key: value lines * feat: improve JSON display in tool call output and parameters - Replace flat formatObject with recursive formatValue for proper indented display of nested JSON structures - Add ComplexInput component for tool parameters with nested objects, arrays, or long strings (previously hidden) - Broaden hasParams check to show parameters for all object types - Add font-mono to output renderer for better alignment * feat: add localization keys for tool errors, web search, and code UI * refactor: move Mermaid components into dedicated directory module * refactor: extract CodeBar, FloatingCodeBar, and copy utilities from CodeBlock * feat: replace manual SVG icons with @icons-pack/react-simple-icons Supports 50+ programming languages with tree-shaken brand icons instead of hand-crafted SVGs for 19 languages. * refactor: simplify code execution UI with persistent code toggle * refactor: use useExpandCollapse hook in Thinking and Reasoning * feat: improve tool call error states, subtitles, and group summaries * feat: redesign web search with inline source display * feat: improve agent handoff with keyboard accessibility * feat: reorganize exports order in hooks and utils * refactor: unify CopyCodeButton with animated icon transitions and iconOnly support * feat: add run code state machine with animated success/error feedback * refactor: improve ResultSwitcher with lucide icons and accessibility * refactor: update CopyButton component * refactor: replace CopyCodeButton with CopyButton component across multiple files * test: add ImageGen test stubs * test: add RetrievalCall test stubs * feat: merge ImageGen with ToolIcon and localized progress text * feat: modernize RetrievalCall with ToolIcon and collapsible output * test: add getToolIconType action delimiter tests * test: add ImageGen collapsible output tests * feat: add action ToolIcon type with Zap icon * fix: replace AgentHandoff div with semantic button * feat: add aria-live regions to tool components * feat: redesign execute_code tool UI with syntax highlighting and language icons - Remove filename labels (script.py, main.rs) and line counter from CodeWindowHeader - Replace generic FileCode icon with language-specific LangIcon - Add syntax highlighting via highlight.js to code blocks - Add SquareTerminal icon to ExecuteCode progress text - Use shared CopyButton component in CodeWindowHeader - Remove active:scale-95 press animation from CopyButton and RunCode * feat: dynamic tool status text sizing based on markdown font-size variable - Add tool-status-text CSS class using calc(0.9 * --markdown-font-size) - Update progress-text-wrapper to use dynamic sizing instead of base size - Apply tool-status-text to WebSearch, ToolCallGroup, AgentHandoff, ImageGen - Replace hardcoded text-sm/text-xs with dynamic class across all tools - Animate chevron rotation in ProgressText and ToolCallGroup - Update subtitle text color from tertiary to secondary * fix: consistent spacing and text styles across all tool components - Standardize tool status row spacing to my-1/my-1.5 across all components - Update ToolCallInfo text from tertiary to secondary, add vertical padding - Animate ToolCallInfo parameters chevron rotation - Update OutputRenderer link colors from tertiary to secondary * feat: unify tool call grouping for all tool types All consecutive tool calls (MCP, execute_code, web_search, image_gen, file_search, code_interpreter) are now grouped under a single collapsible "Used N tools" header instead of only grouping generic tool calls. - Remove SPECIAL_TOOL_NAMES blacklist from groupToolCalls - Replace getToolCallData with getToolMeta to handle all tool types - Use renderPart callback in ToolCallGroup for proper component routing - Add file_search and code_interpreter mappings to getToolIconType * feat: friendly tool group labels, more icons, and output copy button - Show friendly names in group summary (Code, Web Search, Image Generation) instead of raw tool names - Display MCP server names instead of individual function names - Deduplicate labels and show up to 3 with +N overflow - Increase stacked icons from 3 to 4 - Add icon-only copy button to tool output (OutputRenderer) * fix: execute_code spacing and syntax-highlighted code visibility Match ToolCall spacing by using my-1.5 on status line and moving my-2 inside overflow-hidden. Replace broken hljs.highlight() with lowlight (same engine used by rehype-highlight for markdown code blocks) to render syntax-highlighted code as React elements. Handle object args in useParseArgs to support both string and Record arg formats. * feat: replace showCode with auto-expand tools setting Replace the execute_code-only "Always show code when using code interpreter" global toggle with a new "Auto-expand tool details" setting that controls all tool types. Each tool instance now uses independent local state initialized from the setting, so expanding one tool no longer affects others. Applies to ToolCall, ExecuteCode, ToolCallGroup, and CodeAnalyze components. * fix: apply auto-expand tools setting to WebSearch and RetrievalCall * fix: only auto-expand tools when content is available Defer auto-expansion until tool output or content arrives, preventing empty bordered containers from showing while tools are still running. Uses useEffect to expand when output becomes available during streaming. * feat: redesign file_search tool output, citations, and file preview - Redesign RetrievalCall with per-file cards using OutputRenderer (truncated content with show more/less, copy button) matching MCP tool pattern - Route file_search tool calls from Agents API to RetrievalCall instead of generic ToolCall - Add FilePreviewDialog for viewing files (PDF iframe, text content) with download option, opened from clickable filenames - Redesign file citations: FileText icon in badge, relevance and page numbers in hovercard, click opens file preview instead of downloading - Add file preview to message file attachments (Files.tsx) - Fix hovercard animation to slide top-to-bottom and dismiss instantly on file click to prevent glitching over dialog - Add localization keys for relevance, extracted content, preview - Add top margin to ToolCallGroup * chore: remove leftover .planning files * fix: polish FilePreviewDialog, CodeBlock, LangIcon, and Sources * fix: prevent keyboard focus on collapsed tool content Add inert attribute to all expand/collapse wrapper divs so collapsed content is removed from tab order and hidden from assistive technology. Skip disabled ProgressText buttons from tab order with tabIndex={-1}. * feat: integrate file metadata into file_search UI Pass fileType (MIME) and fileBytes from backend file records through to the frontend. Add file-type-specific icons, file size display, pages sorted by relevance, multi-snippet content per file, smart preview detection by MIME type, and copy button in file preview dialog. * fix: review fixes — inverted type check, wrong dimension, missing import, fail-open perms, timer leaks, dead code cleanup * fix: update CodeBlock styling for improved visual consistency * fix(chat): open composite file citations in preview * fix(chat): restore file previews for parsed search results * chore(git): ignore bg-shell artifacts * fix(chat): restore readable code content in light theme * style(chat): align code and output surfaces by theme * chore(i18n): remove 6 unused translation keys * fix(deps): replace private registry URL with public npm registry in lockfile * fix: CI lint, build, and test failures - Add missing scaleImage utility (fixes Vite build error) - Export scaleImage from utils/index.ts - Remove unused imports from Part.tsx (FunctionToolCall, CodeToolCall, Agents) - Fix prettier formatting in Part.tsx (multi-line → single-line imports, conditions) - Remove excess blank lines in Part.tsx - Remove unused CodeEditorRef import from Artifacts.tsx - Add useProgress mock to OpenAIImageGen.test.tsx - Add scaleImage mock to OpenAIImageGen.test.tsx - Update OpenAIImageGen tests to match redesigned component structure - Remove dead collapsible output panel tests from ImageGen.test.tsx - Add @icons-pack/react-simple-icons to Jest transformIgnorePatterns (ESM fix) * refactor: reorganize imports order across multiple components for consistency * fix: add scaleImage tests, delete dead ImageGen wrapper, wire up onUIAction in ToolCallInfo - Add 7 unit tests for scaleImage utility covering null ref, scaling, no-upscale, height clamping, landscape, and panoramic images - Delete unused Content/ImageGen.tsx re-export wrapper (ImageGen is imported from Parts/OpenAIImageGen via the Parts barrel) - Wire up onUIAction in ToolCallInfo to use handleUIAction + ask from useMessagesOperations, matching UIResourceCarousel's behavior (was previously a silent no-op) * refactor: optimize imports and enhance lazy loading for language icons * fix: address review findings for tool call UI redesign - Fix unstable array-index keys in ToolCallGroup (streaming state corruption) - Add plain-text fallback in InputRenderer for non-JSON tool args - Localize FRIENDLY_NAMES via translation keys instead of hardcoded English - Guard autoCollapse against user-initiated manual expansion - Fix CODE_INTERPRETER hasOutput to check actual outputs instead of hardcoding true - Add logger.warn for Citations fail-closed behavior on permission errors - Add Terminal icon to CodeAnalyze ProgressText for visual consistency - Fix getMCPServerName to use indexOf instead of fragile split - Use useLayoutEffect for inert attribute in useExpandCollapse (a11y) - Memoize style object in useExpandCollapse to avoid defeating React.memo - Memoize groupSequentialToolCalls in ContentParts to avoid recomputation - Use source.link as stable key instead of array index in WebSearch - Hoist rehypePlugins outside CodeMarkdown to prevent per-render recreation * fix: revert useMemo after conditional returns in ContentParts The useMemo placed after early returns violated React Rules of Hooks — hook call count would change when transitioning between edit/view mode. Reverted to the original plain forEach which is correct and equally performant since content changes on every streaming token anyway. * chore: remove unused com_ui_variables_info translation key * fix: update tests and jest config for ESM compatibility after rebase - Add ESM-only packages to transformIgnorePatterns (@dicebear, unified ecosystem, react-dnd, lowlight, etc.) to fix Jest parse failures introduced by dev rebase - Update ToolCall.test.tsx to match new component API (CSS expand/collapse instead of conditional rendering, simplified props) - Update ToolCallInfo.test.tsx to mock OutputRenderer (avoids ESM chain), align with current component interface (input/output/attachments) * refactor: replace @icons-pack/react-simple-icons with inline SVGs Inline the 51 Simple Icons SVG paths used by LangIcon directly into langIconPaths.ts, eliminating the runtime dependency on @icons-pack/react-simple-icons (which requires Node >= 24). - LangIcon now renders a plain with the path data instead of lazy-loading React components from the package - Removes Suspense/React.lazy overhead for code block language icons - SVG paths sourced from Simple Icons (CC0 1.0 license) - Package kept in package.json for now (will be removed separately) * fix: replace Plug icon with Wrench for MCP tools, remove unused i18n keys - MCP tools without a custom iconPath now show Wrench instead of Plug, matching the generic tool fallback and avoiding the "plugin" metaphor - Remove unused translation keys: com_assistants_action_attempt, com_assistants_attempt_info, com_assistants_domain_info, com_ui_ui_resources * fix: address second review findings - Combine 3x getToolMeta loop into single toolMetadata pass (ToolCallGroup) - Extract sortPagesByRelevance to shared util (was duplicated in FilePreviewDialog and RetrievalCall) - Deduplicate AGENT_STYLE_TOOLS Set (export from OpenAIImageGen/index.ts) - Localize "source/sources" in WebSearch aria-label - Add autoExpand useEffect to CodeAnalyze for live setting changes - Log download errors in FilePreviewDialog instead of silently swallowing - Replace @ts-ignore with @ts-expect-error + explanation in Code.tsx - Remove dead currentContent alias in CodeMarkdown * chore: remove @icons-pack/react-simple-icons dependency from package.json and package-lock.json - Deleted the @icons-pack/react-simple-icons entry from both package.json and package-lock.json, following the previous refactor to use inline SVGs for icons. * fix: address triage audit findings - Remove unused gIdx variable (ESLint error) - Fix singular/plural in web search sources aria-label - Separate inline type import in ToolCallGroup per AGENTS.md * fix: remove invalid placeholderDimensions prop from Image component * chore: import order * chore: import order * fix: resolve TypeScript errors in PR-touched files - Remove non-existent placeholderDimensions prop from Image in Files.tsx - Fix localize count param type (number, not string) in WebSearch.tsx - Pass full resource object instead of partial in UIResourceCarousel.tsx - Add 'as const' to toggleSwitchConfigs localizationKey in General.tsx - Fix SearchResultData type in Citation.test.tsx - Fix TAttachment and UIResource test fixture types across test files * docs: document formatBytes difference in FilePreviewDialog The local formatBytes returns a human-readable string with units ("1.5 MB"), while ~/utils/formatBytes returns a raw number. They serve different purposes, so the local copy is retained with a JSDoc comment explaining the distinction. * fix: address remaining review items - Replace cancelled IIFE with documented ternary in OpenAIImageGen, explaining the agent vs legacy path distinction - Add .catch() fallback to loadLowlight() in useLazyHighlight — falls back to plain text if the chunk fails to load - Fix import ordering in ToolCallGroup.tsx (type imports grouped before local value imports per AGENTS.md) * fix: blob URL leak and useGetFiles over-fetch - FilePreviewDialog: add cancelledRef guard to loadPreview so blob URLs are never created after the dialog closes (prevents orphaned object URLs on unmount during async PDF fetch) - RetrievalCall: filter useGetFiles by fileIds from fileSources instead of fetching the entire user file corpus for display-only name matching * chore: fix com_nav_auto_expand_tools alphabetical order in translation.json * fix: render non-object JSON params instead of returning null in InputRenderer * refactor: render JSON tool output as syntax-highlighted code block Replace the custom YAML-ish formatValue/formatObjectArray rendering with JSON.stringify + hljs language-json styling. Structured API responses (like GitHub search results) now display as proper syntax-highlighted JSON with indentation instead of a flat key-value text dump. - Remove formatValue, formatObjectArray, isUniformObjectArray helpers - Add isJson flag to extractText return type - JSON output rendered in block - Text content blocks (type: "text") still extracted and rendered as plain text - Error output unchanged * fix: extract cancelled IIFE to named function in OpenAIImageGen Replace nested ternary with a named computeCancelled() function that documents the agent vs legacy path branching. Resolves eslint no-nested-ternary warning. --------- Co-authored-by: Danny Avila --- .gitignore | 4 +- api/server/services/Files/Citations/index.js | 7 +- client/jest.config.cjs | 4 +- client/src/@types/react.d.ts | 8 + client/src/components/Artifacts/Artifacts.tsx | 18 +- client/src/components/Artifacts/Code.tsx | 100 ++- .../Chat/Messages/Content/AgentHandoff.tsx | 46 +- .../Chat/Messages/Content/CodeAnalyze.tsx | 25 +- .../Chat/Messages/Content/ContentParts.tsx | 29 +- .../Messages/Content/FilePreviewDialog.tsx | 344 +++++++ .../Chat/Messages/Content/Files.tsx | 51 +- .../Chat/Messages/Content/FinishedIcon.tsx | 17 - .../Chat/Messages/Content/ImageGen.tsx | 84 -- .../Messages/Content/MarkdownComponents.tsx | 3 +- .../components/Chat/Messages/Content/Part.tsx | 41 +- .../Content/Parts/CodeWindowHeader.tsx | 35 + .../Messages/Content/Parts/ExecuteCode.tsx | 308 ++++--- .../Parts/OpenAIImageGen/OpenAIImageGen.tsx | 194 +++- .../Parts/OpenAIImageGen/ProgressText.tsx | 44 +- .../Content/Parts/OpenAIImageGen/index.ts | 3 + .../Chat/Messages/Content/Parts/Reasoning.tsx | 20 +- .../Chat/Messages/Content/Parts/Stdout.tsx | 23 +- .../Chat/Messages/Content/Parts/Thinking.tsx | 19 +- .../Chat/Messages/Content/ProgressText.tsx | 45 +- .../Chat/Messages/Content/RetrievalCall.tsx | 495 +++++++++- .../Chat/Messages/Content/SearchContent.tsx | 6 +- .../Chat/Messages/Content/ToolCall.tsx | 164 ++-- .../Chat/Messages/Content/ToolCallGroup.tsx | 178 ++++ .../Chat/Messages/Content/ToolCallInfo.tsx | 216 +++-- .../Content/ToolOutput/OutputRenderer.tsx | 168 ++++ .../Content/ToolOutput/StackedToolIcons.tsx | 84 ++ .../Messages/Content/ToolOutput/ToolIcon.tsx | 101 +++ .../Chat/Messages/Content/ToolOutput/index.ts | 4 + .../Messages/Content/UIResourceCarousel.tsx | 6 +- .../Chat/Messages/Content/WebSearch.tsx | 238 ++++- .../Content/__tests__/AgentHandoff.test.tsx | 97 ++ .../Content/__tests__/ImageGen.test.tsx | 215 +++++ .../Content/__tests__/OpenAIImageGen.test.tsx | 70 +- .../Content/__tests__/RetrievalCall.test.tsx | 276 ++++++ .../Content/__tests__/ToolCall.test.tsx | 150 ++-- .../Content/__tests__/ToolCallInfo.test.tsx | 193 ++-- .../Content/__tests__/ToolIcon.test.tsx | 28 + .../components/Messages/Content/CodeBar.tsx | 42 + .../components/Messages/Content/CodeBlock.tsx | 228 ++--- .../Messages/Content/CopyButton.tsx | 89 ++ .../Messages/Content/FloatingCodeBar.tsx | 45 + .../components/Messages/Content/LangIcon.tsx | 104 +++ .../components/Messages/Content/Mermaid.tsx | 850 ------------------ .../Messages/Content/Mermaid/Mermaid.tsx | 288 ++++++ .../Content/Mermaid/MermaidDialog.tsx | 156 ++++ .../{ => Mermaid}/MermaidErrorBoundary.tsx | 10 +- .../Content/Mermaid/MermaidHeader.tsx | 104 +++ .../Messages/Content/Mermaid/ZoomControls.tsx | 106 +++ .../Messages/Content/Mermaid/index.ts | 2 + .../Content/Mermaid/useMermaidZoom.ts | 93 ++ .../Content/Mermaid/useSvgProcessing.ts | 176 ++++ .../Messages/Content/MermaidHeader.tsx | 111 --- .../Messages/Content/ResultSwitcher.tsx | 67 +- .../components/Messages/Content/RunCode.tsx | 117 ++- .../Messages/Content/langIconPaths.ts | 56 ++ .../Messages/Content/useCopyCode.ts | 34 + .../components/Nav/SettingsTabs/Chat/Chat.tsx | 8 +- .../Nav/SettingsTabs/General/General.tsx | 6 +- client/src/components/Web/Citation.tsx | 375 +++++--- client/src/components/Web/SourceHovercard.tsx | 167 ++-- client/src/components/Web/Sources.tsx | 47 +- .../Web/__tests__/Citation.test.tsx | 145 +++ client/src/hooks/MCP/index.ts | 4 +- client/src/hooks/MCP/useMCPIconMap.ts | 19 + client/src/hooks/Messages/index.ts | 6 +- .../src/hooks/Messages/useExpandCollapse.ts | 37 + client/src/locales/en/translation.json | 36 +- client/src/store/settings.ts | 2 +- client/src/style.css | 72 +- client/src/utils/__tests__/scaleImage.test.ts | 89 ++ client/src/utils/files.ts | 10 + client/src/utils/groupToolCalls.ts | 51 ++ client/src/utils/index.ts | 14 +- client/src/utils/scaleImage.ts | 32 + client/vite.config.ts | 4 + packages/data-provider/src/config.ts | 4 +- 81 files changed, 5572 insertions(+), 2395 deletions(-) create mode 100644 client/src/@types/react.d.ts create mode 100644 client/src/components/Chat/Messages/Content/FilePreviewDialog.tsx delete mode 100644 client/src/components/Chat/Messages/Content/FinishedIcon.tsx delete mode 100644 client/src/components/Chat/Messages/Content/ImageGen.tsx create mode 100644 client/src/components/Chat/Messages/Content/Parts/CodeWindowHeader.tsx create mode 100644 client/src/components/Chat/Messages/Content/ToolCallGroup.tsx create mode 100644 client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx create mode 100644 client/src/components/Chat/Messages/Content/ToolOutput/StackedToolIcons.tsx create mode 100644 client/src/components/Chat/Messages/Content/ToolOutput/ToolIcon.tsx create mode 100644 client/src/components/Chat/Messages/Content/ToolOutput/index.ts create mode 100644 client/src/components/Chat/Messages/Content/__tests__/AgentHandoff.test.tsx create mode 100644 client/src/components/Chat/Messages/Content/__tests__/ImageGen.test.tsx create mode 100644 client/src/components/Chat/Messages/Content/__tests__/RetrievalCall.test.tsx create mode 100644 client/src/components/Chat/Messages/Content/__tests__/ToolIcon.test.tsx create mode 100644 client/src/components/Messages/Content/CodeBar.tsx create mode 100644 client/src/components/Messages/Content/CopyButton.tsx create mode 100644 client/src/components/Messages/Content/FloatingCodeBar.tsx create mode 100644 client/src/components/Messages/Content/LangIcon.tsx delete mode 100644 client/src/components/Messages/Content/Mermaid.tsx create mode 100644 client/src/components/Messages/Content/Mermaid/Mermaid.tsx create mode 100644 client/src/components/Messages/Content/Mermaid/MermaidDialog.tsx rename client/src/components/Messages/Content/{ => Mermaid}/MermaidErrorBoundary.tsx (75%) create mode 100644 client/src/components/Messages/Content/Mermaid/MermaidHeader.tsx create mode 100644 client/src/components/Messages/Content/Mermaid/ZoomControls.tsx create mode 100644 client/src/components/Messages/Content/Mermaid/index.ts create mode 100644 client/src/components/Messages/Content/Mermaid/useMermaidZoom.ts create mode 100644 client/src/components/Messages/Content/Mermaid/useSvgProcessing.ts delete mode 100644 client/src/components/Messages/Content/MermaidHeader.tsx create mode 100644 client/src/components/Messages/Content/langIconPaths.ts create mode 100644 client/src/components/Messages/Content/useCopyCode.ts create mode 100644 client/src/components/Web/__tests__/Citation.test.tsx create mode 100644 client/src/hooks/MCP/useMCPIconMap.ts create mode 100644 client/src/hooks/Messages/useExpandCollapse.ts create mode 100644 client/src/utils/__tests__/scaleImage.test.ts create mode 100644 client/src/utils/groupToolCalls.ts create mode 100644 client/src/utils/scaleImage.ts diff --git a/.gitignore b/.gitignore index ff2ae59633..e302d15a46 100644 --- a/.gitignore +++ b/.gitignore @@ -63,6 +63,7 @@ bower_components/ .clineignore .cursor .aider* +.bg-shell/ # Floobits .floo @@ -129,6 +130,7 @@ helm/**/charts/ helm/**/.values.yaml !/client/src/@types/i18next.d.ts +!/client/src/@types/react.d.ts # SAML Idp cert *.cert @@ -143,7 +145,6 @@ helm/**/.values.yaml /.codeium *.local.md - # Removed Windows wrapper files per user request hive-mind-prompt-*.txt @@ -175,3 +176,4 @@ claude-flow # Removed Windows wrapper files per user request hive-mind-prompt-*.txt CLAUDE.md +.gsd diff --git a/api/server/services/Files/Citations/index.js b/api/server/services/Files/Citations/index.js index 008e21d7c4..a1d9322467 100644 --- a/api/server/services/Files/Citations/index.js +++ b/api/server/services/Files/Citations/index.js @@ -47,7 +47,10 @@ async function processFileCitations({ user, appConfig, toolArtifact, toolCallId, logger.error( `[processFileCitations] Permission check failed for FILE_CITATIONS: ${error.message}`, ); - logger.debug(`[processFileCitations] Proceeding with citations due to permission error`); + logger.warn( + '[processFileCitations] Returning null citations due to permission check error — citations will not be shown for this message', + ); + return null; } } @@ -145,6 +148,8 @@ async function enhanceSourcesWithMetadata(sources, appConfig) { metadata: { ...source.metadata, storageType: configuredStorageType, + fileType: fileRecord.type || undefined, + fileBytes: fileRecord.bytes || undefined, }, }; }); diff --git a/client/jest.config.cjs b/client/jest.config.cjs index 4d9087bff7..375e4418a7 100644 --- a/client/jest.config.cjs +++ b/client/jest.config.cjs @@ -41,7 +41,9 @@ module.exports = { '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'jest-file-loader', }, - transformIgnorePatterns: ['node_modules/?!@zattoo/use-double-click'], + transformIgnorePatterns: [ + '/node_modules/(?!(@zattoo/use-double-click|@dicebear|@react-dnd|react-dnd.*|dnd-core|filenamify|filename-reserved-regex|heic-to|lowlight|highlight\\.js|fault|react-markdown|unified|bail|trough|devlop|is-.*|parse-entities|stringify-entities|character-.*|trim-lines|style-to-object|inline-style-parser|html-url-attributes|escape-string-regexp|longest-streak|zwitch|ccount|markdown-table|comma-separated-tokens|space-separated-tokens|web-namespaces|property-information|remark-.*|rehype-.*|recma-.*|hast.*|mdast-.*|unist-.*|vfile.*|micromark.*|estree-util-.*|decode-named-character-reference)/)/', + ], setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '/test/setupTests.js'], clearMocks: true, }; diff --git a/client/src/@types/react.d.ts b/client/src/@types/react.d.ts new file mode 100644 index 0000000000..edf0b7af3f --- /dev/null +++ b/client/src/@types/react.d.ts @@ -0,0 +1,8 @@ +import 'react'; + +declare module 'react' { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes { + inert?: boolean | '' | undefined; + } +} diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx index 776f689f08..e2a322b1ad 100644 --- a/client/src/components/Artifacts/Artifacts.tsx +++ b/client/src/components/Artifacts/Artifacts.tsx @@ -1,15 +1,16 @@ -import { useRef, useState, useEffect } from 'react'; +import { useRef, useState, useEffect, useCallback } from 'react'; +import copy from 'copy-to-clipboard'; import * as Tabs from '@radix-ui/react-tabs'; import { Code, Play, RefreshCw, X } from 'lucide-react'; import { useSetRecoilState, useResetRecoilState } from 'recoil'; import { Button, Spinner, useMediaQuery, Radio } from '@librechat/client'; import type { SandpackPreviewRef } from '@codesandbox/sandpack-react'; +import CopyButton from '~/components/Messages/Content/CopyButton'; import { useShareContext, useMutationState } from '~/Providers'; import useArtifacts from '~/hooks/Artifacts/useArtifacts'; import DownloadArtifact from './DownloadArtifact'; import ArtifactVersion from './ArtifactVersion'; import ArtifactTabs from './ArtifactTabs'; -import { CopyCodeButton } from './Code'; import { useLocalize } from '~/hooks'; import { cn } from '~/utils'; import store from '~/store'; @@ -30,6 +31,7 @@ export default function Artifacts() { const [height, setHeight] = useState(90); const [isDragging, setIsDragging] = useState(false); const [blurAmount, setBlurAmount] = useState(0); + const [isCopied, setIsCopied] = useState(false); const dragStartY = useRef(0); const dragStartHeight = useRef(90); const setArtifactsVisible = useSetRecoilState(store.artifactsVisibility); @@ -86,6 +88,16 @@ export default function Artifacts() { setCurrentArtifactId, } = useArtifacts(); + const handleCopyArtifact = useCallback(() => { + const content = currentArtifact?.content ?? ''; + if (!content) { + return; + } + copy(content, { format: 'text/plain' }); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 3000); + }, [currentArtifact?.content]); + const handleDragStart = (e: React.PointerEvent) => { setIsDragging(true); dragStartY.current = e.clientY; @@ -281,7 +293,7 @@ export default function Artifacts() { }} /> )} - + - ); -}; + useEffect(() => { + const scrollContainer = scrollRef.current; + if (!scrollContainer) { + return; + } + + const handleScroll = () => { + const { scrollTop, scrollHeight, clientHeight } = scrollContainer; + const isNearBottom = scrollHeight - scrollTop - clientHeight < 50; + + if (!isNearBottom) { + setUserScrolled(true); + } else { + setUserScrolled(false); + } + }; + + scrollContainer.addEventListener('scroll', handleScroll); + + return () => { + scrollContainer.removeEventListener('scroll', handleScroll); + }; + }, []); + + useEffect(() => { + const scrollContainer = scrollRef.current; + if (!scrollContainer || !isSubmitting || userScrolled) { + return; + } + + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }, [content, isSubmitting, userScrolled]); + + return ( +
+ + {content} + +
+ ); + }, +); diff --git a/client/src/components/Chat/Messages/Content/AgentHandoff.tsx b/client/src/components/Chat/Messages/Content/AgentHandoff.tsx index f5fa162ff2..5a5505ee60 100644 --- a/client/src/components/Chat/Messages/Content/AgentHandoff.tsx +++ b/client/src/components/Chat/Messages/Content/AgentHandoff.tsx @@ -1,24 +1,23 @@ import React, { useMemo, useState } from 'react'; -import { EModelEndpoint, Constants } from 'librechat-data-provider'; import { ChevronDown } from 'lucide-react'; +import { EModelEndpoint, Constants } from 'librechat-data-provider'; import type { TMessage } from 'librechat-data-provider'; import MessageIcon from '~/components/Share/MessageIcon'; +import { useLocalize, useExpandCollapse } from '~/hooks'; import { useAgentsMapContext } from '~/Providers'; -import { useLocalize } from '~/hooks'; import { cn } from '~/utils'; interface AgentHandoffProps { name: string; args: string | Record; - output?: string | null; } const AgentHandoff: React.FC = ({ name, args: _args = '' }) => { const localize = useLocalize(); const agentsMap = useAgentsMapContext(); const [showInfo, setShowInfo] = useState(false); + const { style: expandStyle, ref: expandRef } = useExpandCollapse(showInfo); - /** Extracted agent ID from tool name (e.g., "lc_transfer_to_agent_gUV0wMb7zHt3y3Xjz-8_4" -> "agent_gUV0wMb7zHt3y3Xjz-8_4") */ const targetAgentId = useMemo(() => { if (typeof name !== 'string' || !name.startsWith(Constants.LC_TRANSFER_TO_)) { return null; @@ -44,19 +43,24 @@ const AgentHandoff: React.FC = ({ name, args: _args = '' }) = } }, [_args]) as string; - /** Requires more than 2 characters as can be an empty object: `{}` */ const hasInfo = useMemo(() => (args?.trim()?.length ?? 0) > 2, [args]); return ( -
-
+ +
+
+ {hasInfo && ( +
+
+ {localize('com_ui_handoff_instructions')}: +
+ 
{args}
+
+ )}
- )} +
); }; diff --git a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx index 139496c621..3d4fdee1c9 100644 --- a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx +++ b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx @@ -1,8 +1,10 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useRecoilValue } from 'recoil'; +import { Terminal } from 'lucide-react'; import { useProgress, useLocalize } from '~/hooks'; import ProgressText from './ProgressText'; import MarkdownLite from './MarkdownLite'; +import { cn } from '~/utils'; import store from '~/store'; export default function CodeAnalyze({ @@ -16,8 +18,14 @@ export default function CodeAnalyze({ }) { const localize = useLocalize(); const progress = useProgress(initialProgress); - const showAnalysisCode = useRecoilValue(store.showCode); - const [showCode, setShowCode] = useState(showAnalysisCode); + const autoExpand = useRecoilValue(store.autoExpandTools); + const [showCode, setShowCode] = useState(autoExpand); + + useEffect(() => { + if (autoExpand) { + setShowCode(true); + } + }, [autoExpand]); const logs = outputs.reduce((acc, output) => { if (output['logs']) { @@ -28,7 +36,10 @@ export default function CodeAnalyze({ return ( <> -
+ + {progress < 1 ? localize('com_ui_analyzing') : localize('com_ui_analyzing_finished')} + +
setShowCode((prev) => !prev)} @@ -36,6 +47,12 @@ export default function CodeAnalyze({ finishedText={localize('com_ui_analyzing_finished')} hasInput={!!code.length} isExpanded={showCode} + icon={ +
{showCode && ( diff --git a/client/src/components/Chat/Messages/Content/ContentParts.tsx b/client/src/components/Chat/Messages/Content/ContentParts.tsx index 4b431d7a98..65ebc66908 100644 --- a/client/src/components/Chat/Messages/Content/ContentParts.tsx +++ b/client/src/components/Chat/Messages/Content/ContentParts.tsx @@ -6,12 +6,12 @@ import type { TAttachment, Agents, } from 'librechat-data-provider'; -import { MessageContext, SearchContext } from '~/Providers'; import { ParallelContentRenderer, type PartWithIndex } from './ParallelContent'; -import { mapAttachments } from '~/utils'; +import { mapAttachments, groupSequentialToolCalls } from '~/utils'; +import { MessageContext, SearchContext } from '~/Providers'; import { EditTextPart, EmptyText } from './Parts'; import MemoryArtifacts from './MemoryArtifacts'; -import Sources from '~/components/Web/Sources'; +import ToolCallGroup from './ToolCallGroup'; import Container from './Container'; import Part from './Part'; @@ -160,10 +160,10 @@ const ContentParts = memo(function ContentParts({ } const isTextPart = part?.type === ContentTypes.TEXT || - typeof (part as unknown as Agents.MessageContentText)?.text !== 'string'; + typeof (part as unknown as Agents.MessageContentText)?.text === 'string'; const isThinkPart = part?.type === ContentTypes.THINK || - typeof (part as unknown as Agents.ReasoningDeltaUpdate)?.think !== 'string'; + typeof (part as unknown as Agents.ReasoningDeltaUpdate)?.think === 'string'; if (!isTextPart && !isThinkPart) { return null; } @@ -216,17 +216,32 @@ const ContentParts = memo(function ContentParts({ sequentialParts.push({ part, idx }); } }); + const groupedParts = groupSequentialToolCalls(sequentialParts); return ( - {showEmptyCursor && ( )} - {sequentialParts.map(({ part, idx }) => renderPart(part, idx, idx === lastContentIdx))} + {groupedParts.map((group) => { + if (group.type === 'single') { + const { part, idx } = group.part; + return renderPart(part, idx, idx === lastContentIdx); + } + return ( + p.idx === lastContentIdx)} + renderPart={renderPart} + lastContentIdx={lastContentIdx} + /> + ); + })} ); }); diff --git a/client/src/components/Chat/Messages/Content/FilePreviewDialog.tsx b/client/src/components/Chat/Messages/Content/FilePreviewDialog.tsx new file mode 100644 index 0000000000..c02e2fee4b --- /dev/null +++ b/client/src/components/Chat/Messages/Content/FilePreviewDialog.tsx @@ -0,0 +1,344 @@ +import { useState, useEffect, useCallback, useMemo, useRef } from 'react'; +import copy from 'copy-to-clipboard'; +import { useRecoilValue } from 'recoil'; +import { Download } from 'lucide-react'; +import { OGDialog, OGDialogContent, OGDialogTitle, OGDialogDescription } from '@librechat/client'; +import CopyButton from '~/components/Messages/Content/CopyButton'; +import { logger, sortPagesByRelevance } from '~/utils'; +import { useFileDownload } from '~/data-provider'; +import { useLocalize } from '~/hooks'; +import store from '~/store'; + +interface FilePreviewDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + fileName: string; + fileId?: string; + relevance?: number; + pages?: number[]; + pageRelevance?: Record; + fileType?: string; + fileSize?: number; +} + +function getFileExtension(filename: string): string { + const dot = filename.lastIndexOf('.'); + return dot > 0 ? filename.slice(dot + 1).toLowerCase() : ''; +} + +function canPreviewByMime(mime?: string): 'pdf' | 'text' | false { + if (!mime) { + return false; + } + if (mime.includes('pdf')) { + return 'pdf'; + } + if ( + mime.startsWith('text/') || + mime.includes('json') || + mime.includes('xml') || + mime.includes('javascript') || + mime.includes('typescript') || + mime.includes('yaml') || + mime.includes('csv') + ) { + return 'text'; + } + return false; +} + +function canPreviewByExt(filename: string): 'pdf' | 'text' | false { + const ext = getFileExtension(filename); + if (ext === 'pdf') { + return 'pdf'; + } + const textExts = new Set([ + 'txt', + 'md', + 'csv', + 'json', + 'xml', + 'yaml', + 'yml', + 'html', + 'css', + 'js', + 'ts', + 'jsx', + 'tsx', + 'py', + 'rb', + 'java', + 'c', + 'cpp', + 'h', + 'go', + 'rs', + 'sh', + 'sql', + 'log', + ]); + return textExts.has(ext) ? 'text' : false; +} + +/** Formats bytes with unit suffix (differs from ~/utils/formatBytes which returns a raw number). */ +function formatBytes(bytes: number): string { + if (bytes >= 1048576) { + return `${(bytes / 1048576).toFixed(1)} MB`; + } + if (bytes >= 1024) { + return `${(bytes / 1024).toFixed(1)} KB`; + } + return `${bytes} B`; +} + +function getDisplayType(fileType?: string, fileName?: string): string { + if (fileType) { + if (fileType.includes('pdf')) { + return 'PDF'; + } + if (fileType.includes('word') || fileType.includes('document')) { + return 'Document'; + } + if (fileType.includes('spreadsheet') || fileType.includes('excel')) { + return 'Spreadsheet'; + } + if (fileType.includes('presentation') || fileType.includes('powerpoint')) { + return 'Presentation'; + } + if (fileType.includes('image')) { + return 'Image'; + } + if (fileType.startsWith('text/')) { + return fileType.split('/')[1]?.toUpperCase() || 'Text'; + } + if (fileType.includes('json')) { + return 'JSON'; + } + if (fileType.includes('xml')) { + return 'XML'; + } + } + const ext = fileName ? getFileExtension(fileName) : ''; + return ext ? ext.toUpperCase() : 'File'; +} + +export default function FilePreviewDialog({ + open, + onOpenChange, + fileName, + fileId, + relevance, + pages, + pageRelevance, + fileType, + fileSize, +}: FilePreviewDialogProps) { + const localize = useLocalize(); + const user = useRecoilValue(store.user); + const { refetch: downloadFile } = useFileDownload(user?.id ?? '', fileId); + + const [fileContent, setFileContent] = useState(null); + const [fileBlobUrl, setFileBlobUrl] = useState(null); + const [loading, setLoading] = useState(false); + const [previewError, setPreviewError] = useState(false); + const [isCopied, setIsCopied] = useState(false); + const loadingRef = useRef(false); + + const previewKind = canPreviewByMime(fileType) || canPreviewByExt(fileName); + + const cancelledRef = useRef(false); + + const loadPreview = useCallback(async () => { + if (!fileId || !previewKind || loadingRef.current) { + return; + } + loadingRef.current = true; + cancelledRef.current = false; + setLoading(true); + setPreviewError(false); + + try { + const result = await downloadFile(); + if (cancelledRef.current || !result.data) { + if (!cancelledRef.current) { + setPreviewError(true); + } + return; + } + + const resp = await fetch(result.data); + const blob = await resp.blob(); + + if (cancelledRef.current) { + return; + } + + if (previewKind === 'text') { + setFileContent(await blob.text()); + } else { + const typed = new Blob([blob], { type: 'application/pdf' }); + setFileBlobUrl(URL.createObjectURL(typed)); + } + } catch { + if (!cancelledRef.current) { + setPreviewError(true); + } + } finally { + loadingRef.current = false; + if (!cancelledRef.current) { + setLoading(false); + } + } + }, [fileId, previewKind, downloadFile]); + + const handleDownload = useCallback(async () => { + if (!fileId) { + return; + } + try { + const result = await downloadFile(); + if (!result.data) { + return; + } + const a = document.createElement('a'); + a.href = result.data; + a.setAttribute('download', fileName); + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + setTimeout(() => URL.revokeObjectURL(result.data), 1000); + } catch (err) { + logger.error('[FilePreviewDialog] Download failed:', err); + } + }, [downloadFile, fileId, fileName]); + + useEffect(() => { + if (open && previewKind && !fileContent && !fileBlobUrl) { + loadPreview(); + } + }, [open, previewKind, fileContent, fileBlobUrl, loadPreview]); + + useEffect(() => { + return () => { + if (fileBlobUrl) { + URL.revokeObjectURL(fileBlobUrl); + } + }; + }, [fileBlobUrl]); + + useEffect(() => { + if (!open) { + cancelledRef.current = true; + setFileContent(null); + setFileBlobUrl(null); + setPreviewError(false); + setLoading(false); + setIsCopied(false); + } + }, [open]); + + const handleCopy = useCallback(() => { + if (!fileContent) { + return; + } + copy(fileContent, { format: 'text/plain' }); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 3000); + }, [fileContent]); + + const displayType = useMemo(() => getDisplayType(fileType, fileName), [fileType, fileName]); + const sortedPages = useMemo( + () => (pages && pageRelevance ? sortPagesByRelevance(pages, pageRelevance) : pages), + [pages, pageRelevance], + ); + + const metaParts: string[] = [displayType]; + if (relevance != null && relevance > 0) { + metaParts.push(`${localize('com_ui_relevance')}: ${Math.round(relevance * 100)}%`); + } + if (fileSize != null && fileSize > 0) { + metaParts.push(formatBytes(fileSize)); + } + if (sortedPages && sortedPages.length > 0) { + metaParts.push(localize('com_file_pages', { pages: sortedPages.join(', ') })); + } + + return ( + + +
+ {fileName} +
+ + {metaParts.join(' · ')} + + {fileId && ( + + )} +
+
+ +
+ {loading && ( +
+ + {localize('com_ui_loading')} + +
+ )} + {previewError && ( +
+ + {localize('com_ui_preview_unavailable')} + +
+ )} + {fileBlobUrl && ( +