494 commits

Author	SHA1	Message	Date
Kashan Samad	dd7224b44c	Merge 3803a76095 into 8ed0bcf5ca	2026-04-05 02:32:22 +00:00
Danny Avila	ea28dbfa89	🧹 chore: Clean Up Config Fields (#12537) ... * chore: remove unused `interface.endpointsMenu` config field * chore: address review — restore JSDoc UI-only example, add Zod strip test * chore: remove unused `interface.sidePanel` config field * chore: restrict fileStrategy/fileStrategies schema to valid storage backends * fix: use valid FileStorage value in AppService test * chore: address review — version bump, exhaustiveness guard, JSDoc, configSchema test * chore: remove debug logger.log from MessageIcon render path * fix: rewrite MessageIcon render tests to use render counting instead of logger spying * chore: bump librechat-data-provider to 0.8.407 * chore: sync example YAML version to 1.3.7	2026-04-03 12:22:58 -04:00
Danny Avila	b4d97bd888	🗜️ refactor: Eliminate Unstable React Keys During SSE Lifecycle (#12536) ... * debug: add instrumentation to MessageIcon arePropsEqual + render cycle tests Temporary debug commit to identify which field triggers MessageIcon re-renders during message creation and streaming. arePropsEqual now logs 'icon_memo_diff' with the exact field name and prev/next values whenever it returns false. Filter browser console for 'icon_memo_diff' to see the trigger. Also adds render-level integration tests that simulate the message lifecycle (initial mount, streaming chunks, context updates) and assert render counts via logger spy. * perf: stabilize MultiMessage key to prevent unmount/remount during SSE lifecycle messageId changes 3 times during the SSE message lifecycle: 1. useChatFunctions creates initialResponse with client-generated UUID 2. createdHandler replaces it with userMessageId + '_' 3. finalHandler replaces it with server-assigned messageId Since MultiMessage used key={message.messageId}, each change caused React to destroy and recreate the entire message component subtree, unmounting MessageIcon and all memoized children. This produced visible icon/image flickering that no memo comparator could prevent. Switch to key={parentMessageId + '_' + siblingIdx}: - parentMessageId is stable from creation through final response - siblingIdx ensures sibling switches still get clean remounts - Eliminates 2 unnecessary unmount/remount cycles per message Add key stability tests verifying: - Current key={messageId} causes 3 mounts / 2 unmounts per lifecycle - Stable key causes 1 mount / 0 unmounts per lifecycle - Sibling switches still trigger clean remounts with stable key * perf: stabilize root MultiMessage key across new conversation lifecycle When a user sends their first message in a new conversation, conversationId transitions from null/'new' to the server-assigned UUID. MessagesView used key={conversationId} on the root MultiMessage, so this transition destroyed the entire message tree and rebuilt it from scratch — causing all MessageIcons to unmount/remount (visible as image flickering). Use a ref-based stable key that captures the first real conversationId and only changes on genuine conversation switches (navigating to a different conversation), not on the null→UUID transition within the same conversation. * debug: add mount/unmount lifecycle tracking to MessageIcon Adds icon_lifecycle logs (MOUNT/UNMOUNT) and render count to distinguish between fresh mounts (memo comparator not called) and internal re-renders (hook bypassing memo). Enable: localStorage.setItem('DEBUG_LOGGING', 'icon_lifecycle,icon_data,icon_memo_diff') * debug: add key and root tracking to MultiMessage and MessagesView Logs multi_message_key (stableKey, messageId, parentMessageId, route) and messages_view_key (rootKey, conversationId) to trace which key changes trigger unmount/remount cycles. Enable: localStorage.setItem('DEBUG_LOGGING', 'icon_lifecycle,icon_data,icon_memo_diff,multi_message_key,messages_view_key') * perf: remove key from root MultiMessage to prevent tree destruction The ref-based stable key still changed during 'new' → real UUID transition, destroying the entire tree. The root MultiMessage is the sole child at its position, so React reuses the instance via positional reconciliation without any key. The messageId prop (conversationId) naturally resets Recoil siblingIdxFamily state on conversation switches. * perf: remove unstable keys from MultiMessage to prevent SSE lifecycle remounts Both messageId and parentMessageId change during the SSE lifecycle (client UUID → CREATED server ID → FINAL server ID), making neither viable as a stable React key. Each key change caused React to destroy and recreate the entire message component subtree, including all memoized children — visible as icon/image flickering. Remove explicit keys entirely and rely on React's positional reconciliation. MultiMessage always renders exactly one child at the same position, so React reuses the component instance and updates props in place. The existing memo comparators on ContentRender/MessageRender handle field-level diffing correctly. Update tests to verify: key={messageId} causes 3 mounts/2 unmounts per lifecycle, while no key causes 1 mount/0 unmounts. * perf: remove unstable keys from child MultiMessage in message wrappers Message.tsx, MessageContent.tsx, and MessageParts.tsx each render a child MultiMessage with key={messageId} for the current message's children. Since messageId changes during the SSE lifecycle (CREATED event replaces the user message ID), the child MultiMessage gets destroyed and recreated, unmounting the entire agent response subtree including its MessageIcon. Remove these keys for the same reason as the parent MultiMessage: each child MultiMessage renders exactly one child at a fixed position, so positional reconciliation correctly reuses the instance. * chore: remove MultiMessage key tests — they test React behavior, not our code The tests verified that key={messageId} causes remounts while no key doesn't, but this is React's own reconciliation behavior. No unit test can prevent someone from re-adding a key prop to JSX. The JSDoc comments on MultiMessage document the decision and rationale.	2026-04-02 22:29:54 -04:00
Danny Avila	275af48592	🎯 fix: MCP Tool Misclassification from Action Delimiter Collision (#12512) ... * fix: prevent MCP tools with `_action` in name from being misclassified as OpenAPI action tools Add `isActionTool()` helper that checks for the `_action_` delimiter while guarding against cross-delimiter collision with `_mcp_`. Replace all `includes(actionDelimiter)` classification checks with the new helper across backend and frontend. * test: add coverage for MCP/action cross-delimiter collision Verify that `isActionTool` correctly rejects MCP tool names containing `_action` and that `loadAgentTools` does not filter them based on `actionsEnabled`. Add ToolIcon and definitions test cases. * fix: simplify isActionTool to handle all MCP name patterns - Use `!toolName.includes('_mcp_')` instead of checking only after the first `_action_` occurrence, which missed MCP tools with `_action_` in the middle of their name (e.g. `get_action_data_mcp_myserver`). - Reference `Constants.mcp_delimiter` value via a local const to avoid circular import from config.ts, with a comment explaining why. - Remove dead `actionDelimiter` import from definitions.ts. - Replace double-filter with single-pass partition in loadToolsForExecution. - Add test for mid-name `_action_` collision case. * fix: narrow MCP exclusion to delimiter position in isActionTool Only reject when `_mcp_` appears after `_action_` (the MCP suffix position). `_mcp_` before `_action_` is part of the operationId and is valid — e.g. `sync_mcp_state_action_api---example---com` is a legitimate action tool whose operationId happens to contain `_mcp_`. * fix: document positional _mcp_ guard and known RFC-invalid domain limitation Expand JSDoc on isActionTool to explain the action/MCP format disambiguation and the theoretical false negative for non-RFC-compliant domains containing `_mcp_`. Add test documenting this known edge case.	2026-04-01 22:36:21 -04:00
Danny Avila	7b368916d5	🔑 fix: Auth-Aware Startup Config Caching for Fresh Sessions (#12505) ... * fix: auth-aware config caching for fresh sessions - Add auth state to startup config query key via shared `startupConfigKey` builder so login (unauthenticated) and chat (authenticated) configs are cached independently - Disable queries during login onMutate to prevent premature unauthenticated refetches after cache clear - Re-enable queries in setUserContext only after setTokenHeader runs, with positive-only guard to avoid redundant disable on logout - Update all getQueryData call sites to use the shared key builder - Fall back to getConfigDefaults().interface in useEndpoints, hoisted to module-level constant to avoid per-render recomputation * fix: address review findings for auth-aware config caching - Move defaultInterface const after all imports in ModelSelector.tsx - Remove dead QueryKeys import, use import type for TStartupConfig in ImportConversations.tsx - Spread real exports in useQueryParams.spec.ts mock to preserve startupConfigKey, fixing TypeError in all 6 tests * chore: import order * fix: re-enable queries on login failure When login fails, onSuccess never fires so queriesEnabled stays false. Re-enable in onError so the login page can re-fetch config (needed for LDAP username validation and social login options).	2026-04-01 17:20:39 -04:00
Danny Avila	7181174c3b	🖼️ fix: Message Icon Flickering from Context-Triggered Re-renders (#12489) ... * perf: add custom memo comparator to MessageIcon for stable re-render gating MessageIcon receives full `agent` and `assistant` objects as props from useMessageActions, which recomputes them when AgentsMapContext or AssistantsMapContext update (e.g., react-query refetch on window focus). These context-triggered re-renders bypass MessageRender's React.memo, producing new object references for agent/assistant even when the underlying data is unchanged. The default shallow comparison in MessageIcon's memo then fails, causing unnecessary re-renders that manifest as visible icon flickering. Add arePropsEqual comparator that checks only the fields MessageIcon actually uses (name, avatar filepath, metadata avatar) instead of object identity, so the component correctly bails out when icon-relevant data hasn't changed. * refactor: export arePropsEqual, drop redundant useMemos, add JSDoc - Export arePropsEqual so it can be tested in isolation - Add JSDoc documenting which fields are intentionally omitted (id) and why iconData uses reference equality - Replace five trivial useMemo calls (agent?.name ?? '', etc.) with direct computed values — the custom comparator already gates re-renders, so these memos only add closure/dep-array overhead without ever providing cache hits - Remove unused React import * test: add unit tests for MessageIcon arePropsEqual comparator Exercise the custom memo comparator to ensure: - New object references with same display fields are treated as equal - Changed name or avatar filepath triggers re-render - iconData reference change triggers re-render - undefined→defined agent with undefined fields is treated as equal * fix: replace nested ternary with if-else for eslint compliance * test: add comment on subtle equality invariant and defined→undefined case * perf: compare iconData by field values instead of reference iconData is a useMemo'd object from the parent, but comparing by reference still causes unnecessary re-renders when the parent recomputes the memo with identical primitive values. Compare all five fields individually (endpoint, model, iconURL, modelLabel, isCreatedByUser) for consistency with how agent/assistant are handled.	2026-03-31 18:24:18 -04:00
Danny Avila	7e2b51697e	🪢 refactor: Eliminate Unnecessary Re-renders During Message Streaming (#12454) ... * refactor: add TMessageChatContext type for stable context passing Defines a type for a stable context object that wrapper components pass to memo'd message components, avoiding direct ChatContext subscriptions that bypass React.memo during streaming. * perf: remove ChatContext subscription from useMessageActions useMessageActions previously called useChatContext() inside memo'd components (MessageRender, ContentRender), bypassing React.memo when isSubmitting changed during streaming. Now accepts a stable chatContext param instead, using a ref for the isSubmitting guard in regenerateMessage. Also stabilizes handleScroll in useMessageProcess by using a ref for isSubmitting instead of including it in useCallback deps. * perf: pass stable chatContext to memo'd message components Wrapper components (Message, MessageContent) now create a stable chatContext object via useMemo with a getter-backed isSubmitting, and compute effectiveIsSubmitting (false for non-latest messages). This ensures MessageRender and ContentRender (both React.memo'd) only re-render for the latest message during streaming, preventing unnecessary re-renders of all prior messages and their SubRow, HoverButtons, and SiblingSwitch children. * perf: add custom memo comparators to prevent message reference re-renders buildTree creates new message objects on every streaming update for ALL messages, not just the changed one. This defeats React.memo's default shallow comparison since the message prop has a new reference even when the content hasn't changed. Custom areEqual comparators now compare message by key fields (messageId, text, error, depth, children length, etc.) instead of reference equality, preventing unnecessary re-renders of SubRow, Files, HoverButtons and other children for non-latest messages. * perf: memoize ChatForm children to prevent streaming re-renders - Wrap StopButton in React.memo - Wrap AudioRecorder in React.memo, use ref for isSubmitting in onTranscriptionComplete callback to stabilize it - Remove useChatContext() from FileFormChat (bypassed its memo during streaming), accept files/setFiles/setFilesLoading as props from ChatForm instead * perf: stabilize ChatForm child props to prevent cascading re-renders ChatForm re-renders frequently during streaming (ChatContext changes). This caused StopButton and AttachFileChat/AttachFileMenu to re-render despite being memo'd, because their props were new references each time. - Wrap handleStopGenerating in a ref-based stable callback so StopButton always receives the same function reference - Create stableConversation via useMemo keyed on rendering-relevant fields only (conversationId, endpoint, agent_id, etc.), so AttachFileChat and FileFormChat don't re-render from unrelated conversation metadata updates (e.g., title generation) * perf: remove ChatContext subscription from AttachFileMenu and FileFormChat Both components used useFileHandling() which internally calls useChatContext(), bypassing their React.memo wrappers and causing re-renders on every streaming chunk. Switch to useFileHandlingNoChatContext() which accepts file state as parameters. The state (files, setFiles, setFilesLoading, conversation) is passed down from ChatForm → AttachFileChat → AttachFileMenu as props, keeping the memo chain intact. * fix: update imports and test mocks for useFileHandlingNoChatContext - Re-export useFileHandlingNoChatContext from hooks barrel - Import from ~/hooks instead of direct path for test compatibility - Add useToastContext mock to @librechat/client in AttachFileMenu tests since useFileHandlingNoChatContext runs the core hook which needs it - Add useFileHandlingNoChatContext to ~/hooks test mock * perf: fix remaining ChatForm streaming re-renders - Switch AttachFileMenu from useSharePointFileHandling (subscribes to ChatContext) to useSharePointFileHandlingNoChatContext with explicit file state props - Memoize ChatForm textarea onFocus/onBlur handlers with useCallback to prevent TextareaAutosize re-renders (inline arrow functions and .bind() created new references on every ChatForm render) - Update AttachFileMenu test mocks for new hook variants * refactor: add displayName to ChatForm for React DevTools * perf: prevent ChatForm re-renders during streaming via wrapper pattern ChatForm was re-rendering on every streaming chunk because it subscribed to useChatContext() internally, and the ChatContext value changed frequently during streaming. Extract context subscription into a ChatFormWrapper that: - Subscribes to useChatContext() (re-renders on every chunk, cheap) - Stabilizes conversation via selective useMemo - Stabilizes handleStopGenerating via ref-based callback - Passes individual stable values as props to ChatForm ChatForm (memo'd) now receives context values as props instead of subscribing directly. Since individual values (files, setFiles, isSubmitting, etc.) are stable references during streaming, ChatForm's memo prevents re-renders entirely — it only re-renders when isSubmitting actually toggles (2x per stream: start/end). * perf: stabilize newConversation prop and memoize CollapseChat - Wrap newConversation in ref-based stable callback in ChatFormWrapper (was the remaining unstable prop causing ChatForm to re-render) - Wrap CollapseChat in React.memo to prevent re-renders from parent * perf: memoize useAddedResponse return value useAddedResponse returned a new object literal on every render, causing AddedChatContext.Provider to trigger re-renders of all consumers (including ChatForm) on every streaming chunk. Wrap in useMemo so the context value stays referentially stable. * perf: memoize TextareaHeader to prevent re-renders from ChatForm * perf: address review findings for streaming render optimization Finding 1: Switch AttachFile.tsx from useFileHandling to useFileHandlingNoChatContext, closing the optimization hole for standard (non-agent) chat endpoints. Finding 2: Replace content reference equality with length comparison in both memo comparators — safer against buildTree array reconstruction. Finding 3: Add conversation?.model to stableConversation deps in ChatFormWrapper so file uploads use the correct model after switches. Finding 4/14: Fix stableNewConversation to explicitly return the underlying call's result instead of discarding it via `as` cast. Finding 5/6: Extract useMemoizedChatContext hook shared by Message.tsx and MessageContent.tsx — eliminates ~70 lines of duplication and stabilizes chatContext.conversation via selective useMemo to prevent post-stream metadata updates from re-rendering all messages. Finding 8: Use TMessage type for regenerate param instead of Record<string, unknown>. Finding 9: Use FileSetter alias in FileFormChat instead of inline type. Finding 11: Fix pre-existing broken throttle in useMessageProcess — was creating a new throttle instance per call, providing zero deduplication. Now retains the instance via useMemo. Finding 12: Initialize isSubmittingRef with chatContext.isSubmitting instead of false for consistency. Finding 13: Add ChatFormWrapper displayName. * fix: revert content comparison to reference equality in memo comparators The length-based comparison (content?.length) missed updates within existing content parts during streaming — text chunks update a part's content without changing the array length, so the comparator returned true and skipped re-renders for the latest message. Reference equality (===) is correct here: buildTree preserves content array references for unchanged messages via shallow spread, while React Query gives the latest message a new reference when its content updates during streaming. * fix: cancel throttled handleScroll on unmount and remove unused import * fix: use chatContext getter directly in regenerateMessage callback The local isSubmittingRef was stale for non-latest messages (which don't re-render during streaming by design). chatContext.isSubmitting is a getter backed by the wrapper's ref, so reading it at call-time always returns the current value regardless of whether the component has re-rendered. * fix: remove unused useCallback import from useMemoizedChatContext * fix: pass global isSubmitting to HoverButtons for action gating HoverButtons uses isSubmitting via useGenerationsByLatest to disable regenerate and hide edit buttons during streaming. Passing the effective value (false for non-latest messages) re-enabled those actions mid-stream, risking overlapping edits/regenerations. Use chatContext.isSubmitting (getter, always returns current value) for HoverButtons while keeping the effective value for rendering-only UI (cursor, placeholder, streaming indicator). * fix: address second review — stale HoverButtons, messages dep, cleanup - Add isSubmitting to chatContext useMemo deps in useMemoizedChatContext so HoverButtons correctly updates when streaming starts/ends (2 extra re-renders per session, belt-and-suspenders for post-stream state) - Change conversation?.messages?.length dep to boolean in ChatFormWrapper stableConversation — only need 0↔1+ transition for landing page check, not exact count on every message addition - Add defensive comment at chatContext destructuring point in useMessageActions explaining why isSubmitting must not be destructured - Remove dead mockUseFileHandling.mockReturnValue from AttachFileMenu tests * chore: remove dead useFileHandling mock artifacts from AttachFileMenu tests * fix: resolve eslint warnings for useMemo dependencies - Extract complex expression (conversation?.messages?.length ?? 0) > 0 to hasMessages variable for static analysis in ChatFormWrapper - Add eslint-disable for intentional isSubmitting dep in useMemoizedChatContext (forces new chatContext reference on streaming start/end so HoverButtons re-renders)	2026-03-29 17:05:12 -04:00
Danny Avila	083042e56c	🪝 fix: Safe Hook Fallbacks for Tool-Call Components in Search Route (#12423) ... * fix: add useOptionalMessagesOperations hook for context-safe message operations Add a variant of useMessagesOperations that returns no-op functions when MessagesViewProvider is absent instead of throwing, enabling shared components to render safely outside the chat route. * fix: use optional message operations in ToolCallInfo and UIResourceCarousel Switch ToolCallInfo and UIResourceCarousel from useMessagesOperations to useOptionalMessagesOperations so they no longer crash when rendered in the /search route, which lacks MessagesViewProvider. * fix: update test mocks to use useOptionalMessagesOperations * fix: consolidate noops and narrow useMemo dependency in useOptionalMessagesOperations - Replace three noop variants (noopAsync, noopReturn, noop) with a single `const noop = () => undefined` that correctly returns void/undefined - Destructure individual fields from context before the useMemo so the dependency array tracks stable operation references, not the full context object (avoiding unnecessary re-renders on unrelated state changes) - Add useOptionalMessagesConversation for components that need conversation data outside MessagesViewProvider * fix: use optional hooks in MCPUIResource components to prevent search crash MCPUIResource and MCPUIResourceCarousel render inside Markdown prose and can appear in the /search route. Switch them from the strict useMessagesOperations/useMessagesConversation hooks to the optional variants that return safe defaults when MessagesViewProvider is absent. * test: update test mocks for optional hook renames * fix: update ToolCallInfo and UIResourceCarousel test mocks to useOptionalMessagesOperations * fix: use optional message operations in useConversationUIResources useConversationUIResources internally called the strict useMessagesOperations(), which still threw when MCPUIResource rendered outside MessagesViewProvider. Switch to useOptionalMessagesOperations so the entire MCPUIResource render chain is safe in the /search route. * style: fix import order per project conventions * fix: replace as-unknown-as casts with typed NOOP_OPS stubs - Define OptionalMessagesOps type and NOOP_OPS constant with properly typed no-op functions, eliminating all `as unknown as T` casts - Use conversationId directly from useOptionalMessagesConversation instead of re-deriving it from conversation object - Update JSDoc to reflect search route support * test: add no-provider regression tests for optional message hooks Verify useOptionalMessagesOperations and useOptionalMessagesConversation return safe defaults when rendered outside MessagesViewProvider, covering the core crash path this PR fixes.	2026-03-26 16:40:37 -04:00
Danny Avila	8e2721011e	🔑 fix: Robust MCP OAuth Detection in Tool-Call Flow (#12418) ... * fix(api): add buildOAuthToolCallName utility for MCP OAuth flows Extract a shared utility that builds the synthetic tool-call name used during MCP OAuth flows (oauth_mcp_{normalizedServerName}). Uses startsWith on the raw serverName (not the normalized form) to guard against double-wrapping, so names that merely normalize to start with oauth_mcp_ (e.g., oauth@mcp@server) are correctly prefixed while genuinely pre-wrapped names are left as-is. Add 8 unit tests covering normal names, pre-wrapped names, _mcp_ substrings, special characters, non-ASCII, and empty string inputs. * fix(backend): use buildOAuthToolCallName in MCP OAuth flows Replace inline tool-call name construction in both reconnectServer (MCP.js) and createOAuthEmitter (ToolService.js) with the shared buildOAuthToolCallName utility. Remove unused normalizeServerName import from ToolService.js. Fix import ordering in both files. This ensures the oauth_mcp_ prefix is consistently applied so the client correctly identifies MCP OAuth flows and binds the CSRF cookie to the right server. * fix(client): robust MCP OAuth detection and split handling in ToolCall - Fix split() destructuring to preserve tail segments for server names containing _mcp_ (e.g., foo_mcp_bar no longer truncated to foo). - Add auth URL redirect_uri fallback: when the tool-call name lacks the _mcp_ delimiter, parse redirect_uri for the MCP callback path. Set function_name to the extracted server name so progress text shows the server, not the raw tool-call ID. - Display server name instead of literal "oauth" as function_name, gated on auth presence to avoid misidentifying real tools named "oauth". - Consolidate three independent new URL(auth) parses into a single parsedAuthUrl useMemo shared across detection, actionId, and authDomain hooks. - Replace any type on ProgressText test mock with structural type. - Add 8 tests covering delimiter detection, multi-segment names, function_name display, redirect_uri fallback, normalized _mcp_ server names, and non-MCP action auth exclusion. * chore: fix import order in utils.test.ts * fix(client): drop auth gate on OAuth displayName so completed flows show server name The createOAuthEnd handler re-emits the toolCall delta without auth, so auth is cleared on the client after OAuth completes. Gating displayName on `func === 'oauth' && auth` caused completed OAuth steps to render "Completed oauth" instead of "Completed my-server". Remove the `&& auth` gate — within the MCP delimiter branch the func="oauth" check alone is sufficient. Also remove `auth` from the useMemo dep array since only `parsedAuthUrl` is referenced. Update the test to assert correct post-completion display.	2026-03-26 14:45:13 -04:00
Marco Beretta	0c66823c26	🧩 feat: Redesign Tool Call UI with Contextual Icons, Smart Grouping, and Rich Output Rendering (#12163) ... * 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 <svg> 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 <code class="hljs language-json"> 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 <danny@librechat.ai>	2026-03-25 12:31:39 -04:00
Marco Beretta	ccd049d8ce	📁 refactor: Prompts UI (#11570) ... * style: enhance prompts UI with new components and improved structure; add CreatePromptButton and AutoSendPrompt; refactor GroupSidePanel and PromptsAccordion * refactor(Prompts): move button components to buttons/ subdirectory * refactor(Prompts): move dialog components to dialogs/ subdirectory * refactor(Prompts): move display components to display/ subdirectory * refactor(Prompts): move editor components to editor/ subdirectory * refactor(Prompts): move field components to fields/ subdirectory * refactor(Prompts): move form components to forms/ subdirectory * refactor(Prompts): move layout components to layouts/ subdirectory * refactor(Prompts): move list components to lists/ subdirectory * refactor(Prompts): move sidebar components to sidebar/ subdirectory * refactor(Prompts): move utility components to utils/ subdirectory * refactor(Prompts): update main exports and external imports * refactor(Prompts): fix class name typo in AutoSendPrompt * refactor(Prompts): reorganize exports and imports order across components * refactor(Prompts): reorder exports for better organization and clarity * refactor(Buttons): enhance prompts accessibility with aria-labels and update translations * refactor(AdminSettings): reorganize imports and improve form structure for clarity * refactor(Dialogs): reorganize imports for consistency and clarity across DeleteVersion, SharePrompt, and VariableDialog components * refactor(Dialogs): enhance prompts accessibility with aria-labels * refactor(Display): enhance prompt components and accessibility features * refactor(.gitignore): add Playwright MCP directory * refactor(Preview): enhance prompt components, improve layout, and add accessibility features * refactor(Prompts): enhance variable handling, improve accessibility, and update UI components * refactor(Prompts): enhance loading state handling and improve accessibility in PromptName component * refactor(Prompts): streamline special variable handling, improve icon management, and enhance UI components * refactor(Prompts): update AdvancedSwitch component to use Radio for mode selection, enhance PromptName with tooltips, and improve layout in PromptForm * refactor(Prompts): enhance VersionCard and VersionBadge components for improved UI and accessibility, update loading state handling in VersionsPanel * refactor(Prompts): improve layout and styling of VersionCard component for better visual alignment and clarity * refactor(DeleteVersion): update text color for confirmation prompt in DeleteConfirmDialog * refactor(Prompts): add configurations for always make production and auto-send prompts, update localization strings for clarity * refactor(Prompts): enhance layout and styling in CategorySelector, CreatePromptForm, and List components for improved responsiveness and clarity * refactor(Prompts): enhance PromptDetailHeader and ChatGroupItem components, add shared prompt indication, and remove unused PromptMetadata component * refactor(Prompts): implement prompt group usage tracking, update sorting logic, and enhance related components * fix(Prompts): security, performance, and pagination fixes - Fix cursor pagination skipping/duplicating items by including numberOfGenerations in cursor condition to match sort order - Close NoSQL injection vector via otherFilters rest spread in GET /all, GET /groups, and buildPromptGroupFilter - Validate groupId as ObjectId before passing to query (GET /) - Add prompt body validation in addPromptToGroup (type + text) - Return 404 instead of 500 for missing group in POST /use - Combine data + count into single $facet aggregation - Add compound index {numberOfGenerations, updatedAt, _id} - Add index on prompt.author for deleteUserPrompts - Update useRecordPromptUsage to refresh client caches - Replace console.error with logger.error * refactor(PromptForm): remove console warning for unselected prompt in VersionsPanel * refactor(Prompts): improve error handling for groupId and streamline usage tracking * refactor(.gitignore): add CLAUDE.md to ignore list * refactor(Prompts): streamline prompt components by removing unused variables and enhancing props structure * refactor(Prompts): fix sort stability, keyboard handling, and remove dead code Add _id tiebreaker to prompt group sort pipelines for deterministic pagination ordering. Prevent default browser scroll on Space key in PromptEditor preview mode. Remove unused blurTimeoutRef and its onMutate callback from DashGroupItem. * refactor(Prompts): enhance groupId validation and improve prompt group aggregation handling * fix: aria-hidden, API fixes, accessibility improvements * fix: ACL author filter, mobile guard, semantic HTML, and add useFocusTrap hook - Remove author filter from patchPromptGroup so ACL-granted editors can update prompt groups (aligns with deletePromptGroupController) - Add missing group guard to mobile HeaderActions in PromptForm - Replace div with article in DashGroupItem, remove redundant stopPropagation and onClick on outer container - Add useFocusTrap hook for keyboard focus management - Add numberOfGenerations to default projection - Deduplicate ObjectId validation, remove console.warn, fix aria-labelledby, localize search announcements * refactor(Prompts): adjust UI and improve a11y * refactor(Prompts): reorder imports for consistency and clarity * refactor(Prompts): implement updateFieldsInPlace for efficient data updates and add related tests * refactor(Prompts): reorder imports to include updateFieldsInPlace for better organization * refactor(Prompts): enhance DashGroupItem with toast notifications for prompt updates and add click-to-edit functionality in PromptEditor * style: use self-closing TooltipAnchor in CreatePromptButton Replace ></TooltipAnchor> with /> for consistency with the rest of the Prompts directory. * fix(i18n): replace placeholder text for com_ui_global_group translation key The value was left as 'something needs to go here. was empty' which would be visible to users as an aria-label in DashGroupItem. * fix(DashGroupItem): sync rename input with group.name on external changes nameInputValue was initialized via useState(group.name) but never synced when group.name changed from a background refetch. Added useEffect that updates the input when the dialog is closed. * perf(useFocusTrap): store onEscape in ref to avoid listener churn onEscape was in the useEffect dependency array, causing the keydown listener to be torn down and re-attached on every render when callers passed an inline function. Now stored in a ref so the effect only re-runs when active or containerRef changes. * fix(a11y): replace role=button div with layered button overlay in ListCard The card used role='button' on a div that contained nested Button elements — an invalid ARIA pattern. Replaced with a hidden button at z-0 for the card action while child interactive elements sit at z-10, eliminating nested interactive element violations. * fix(PromptForm): reset selectionIndex on route change, guard auto-save, and fix a11y - Reset selectionIndex to 0 and isEditing to false when promptId changes, preventing out-of-bounds index when navigating between groups with different version counts. - Track selectedPrompt in a ref so the auto-save effect doesn't fire against a stale prompt when the selection changed mid-edit. - Stabilize useFocusTrap onEscape via useCallback to avoid unnecessary listener re-attachment. - Conditionally render mobile overlay instead of always-present button with aria-hidden/pointer-events toggling. * refactor: extract isValidObjectIdString to shared utility in data-schemas The same regex helper was duplicated in api/server/routes/prompts.js and packages/data-schemas/src/methods/prompt.ts. Moved to packages/data-schemas/src/utils/objectId.ts and imported from both consumers. Also removed a duplicate router.use block introduced during the extraction. * perf(updateFieldsInPlace): replace JSON deep clone with targeted spread Instead of JSON.parse(JSON.stringify(data)) which serializes the entire paginated data structure, use targeted immutable spreads that only copy the affected page and collection array. Returns the original data reference unchanged when the item is not found. * perf(VariablesDropdown): memoize items array and stabilize handleAddVariable The items array containing JSX elements was rebuilt on every render. Wrapped in useMemo keyed on usedVariables and localize. Also wrapped handleAddVariable in useCallback and memoized usedCount to avoid redundant array filtering. * perf(DashGroupItem): stabilize mutation callbacks via refs handleSaveRename and handleDelete had updateGroup/deleteGroup mutation objects in their useCallback dependency arrays. Since mutation objects are new references each render, the callbacks were recreated every render, defeating memoization. Now store mutation objects in refs and call via ref.current in the callbacks. * fix(security): validate groupId in incrementPromptGroupUsage The data-schema method passed the groupId string directly to findByIdAndUpdate without validation. If called from a different entrypoint without the route-level check, Mongoose would throw a CastError. Now validates with isValidObjectIdString before the DB call and throws a clean 'Invalid groupId' error. * fix(security): add rate limiter to prompt usage tracking endpoint POST /groups/:groupId/use had no rate limiting — a user could spam it to inflate numberOfGenerations, which controls sort order for all users. Added promptUsageLimiter (30 req/user/min) following the same pattern as toolCallLimiter. Also handle 'Invalid groupId' error from the data layer in the route error handler. * fix(updateFieldsInPlace): guard against undefined identifier value If updatedItem[identifierField] is null/undefined, findIndex could match unintended items where that field is also undefined. Added early return when the identifier value is nullish. * fix(a11y): use React useId for stable unique IDs in ListCard aria-describedby/id values were derived from prompt name which can contain spaces and special characters, producing invalid HTML IDs and potential collisions. Now uses React.useId() for guaranteed unique, valid IDs per component instance. * fix: Align prompts panel styling with other sidebar panels and fix test - Match FilterPrompts first row to Memory/Bookmark pattern (items-center gap-2) - Remove items-stretch override from PromptsAccordion - Add missing promptUsageLimiter mock to prompts route test * fix: Address code review findings for prompts refactor PR - Fix #5: Gate DeletePrompt in HeaderActions behind canDelete permission - Fix #8: BackToChat navigates to last conversation instead of /c/new - Fix #7: Restore useLiveAnnouncer for screen reader feedback on delete/rename - Fix #1: Use isPublic (set by API) instead of deprecated projectIds for globe icon - Fix #4: Optimistic cache update in useRecordPromptUsage instead of full invalidation - Fix #6: Add migration to drop superseded { createdAt, updatedAt } compound index - Fix #9: Single-pass reduce in PromptVariables instead of triple filter - Fix #10: Rename PromptLabelsForm internal component to avoid collision with PromptForm - Fix #14: Remove redundant aria-label from aria-hidden Checkbox in AutoSendPrompt * fix: Align prompts panel filter row element sizes with other panels - Override Dropdown trigger to size-9 (36px) to match FilterInput height - Set CreatePromptButton to size-9 shrink-0 bg-transparent matching Memory/Bookmark panel button pattern * fix(prompts): Shared Prompts filter ignores direct shares, only returns PUBLIC Folds fix from PR #11882 into the refactored codebase. Bug A: filterAccessibleIdsBySharedLogic now accepts ownedPromptGroupIds: - MY_PROMPTS: accessible intersect owned - SHARED_PROMPTS: (accessible union public) minus owned - ALL: accessible union public (deduplicated) Legacy fallback preserved when ownedPromptGroupIds is omitted. Bug B: getPromptGroup uses $lookup aggregation to populate productionPrompt, fixing empty text on direct URL navigation to shared prompts. Also adds getOwnedPromptGroupIds to data-schemas methods and passes it from both /all and /groups route handlers. * fix: Add missing canDelete to mobile HeaderActions, remove dead instanceProjectId prop - Pass canDelete to mobile HeaderActions row (was only on desktop) - Remove instanceProjectId prop from ChatGroupItem and DashGroupItem since global check now uses group.isPublic - Remove useGetStartupConfig from List.tsx (no longer needed) * fix: Use runtime ObjectId instead of type-only Types.ObjectId, fix i18next interpolation - getPromptGroup and getOwnedPromptGroupIds were using Types.ObjectId (imported as type-only), which is erased at compile time. Use the runtime ObjectId from mongoose.Types (already destructured at line 20). This fixes the 404s in PATCH /groups/:groupId tests. - Fix com_ui_prompt_deleted_group translation to use {{0}} (i18next double-brace syntax) instead of {0}. * chore: Fix translation key ordering, add sideEffects: false to data-provider - Reorder new translation keys to maintain alphabetical order: com_ui_click_to_edit, com_ui_labels, com_ui_live, com_ui_prompt_delete_confirm, com_ui_prompt_deleted_group, com_ui_prompt_details, com_ui_prompt_renamed, com_ui_prompt_update_error, com_ui_prompt_variables_list - Add "sideEffects": false to librechat-data-provider package.json to enable tree-shaking of unused exports (types, constants, pure functions) * fix: Reduce prompts panel spacing, align memory toggle with checkbox pattern - Remove unnecessary wrapper div around AutoSendPrompt in PromptsAccordion, reducing vertical space between the toggle and the first prompt item - Replace Memory panel's Switch toggle with Checkbox+Button pattern matching the prompts panel's AutoSendPrompt for visual consistency * fix: Reduce gap between AutoSendPrompt and first prompt item Change ChatGroupItem margin from my-2 to mb-2 to eliminate the doubled spacing (gap-2 from parent + top margin from first item). Restore wrapper div around AutoSendPrompt for right-alignment. * fix: Restore prompt name on empty save, remove dead bodyProps from checkGlobalPromptShare - PromptName: reset newName to name when save is cancelled due to empty or unchanged input, preventing blank title in read mode - checkGlobalPromptShare: remove dead bodyProps config — Permissions.SHARE was not in the permissions array so the bodyProps rule was never evaluated. Per-resource share checks are handled by canAccessPromptGroupResource. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-03-22 16:56:22 -04:00
Marco Beretta	733a9364c0	🎨 refactor: Redesign Sidebar with Unified Icon Strip Layout (#12013) ... * fix: Graceful SidePanelContext handling when ChatContext unavailable The UnifiedSidebar component is rendered at the Root level before ChatContext is provided (which happens only in ChatRoute). This caused an error when useSidePanelContext tried to call useChatContext before it was available. Changes: - Made SidePanelProvider gracefully handle missing ChatContext with try/catch - Changed useSidePanelContext to return a safe default instead of throwing - Prevents render error on application load and improves robustness * fix: Provide default context value for ChatContext to prevent setFilesLoading errors The ChatContext was initialized with an empty object as default, causing 'setFilesLoading is not a function' errors when components tried to call functions from the context. This fix provides a proper default context with no-op functions for all expected properties. Fixes FileRow component errors that occurred when navigating to sections with file upload functionality (Agent Builder, Attach Files, etc.). * fix: Move ChatFormProvider to Root to fix Prompts sidebar rendering The ChatFormProvider was only wrapping ChatView, but the sidebar (including Prompts) renders separately and needs access to the ChatFormContext. ChatGroupItem uses useSubmitMessage which calls useChatFormContext, causing a React error when Prompts were accessed. This fix moves the ChatFormProvider to the Root component to wrap both the sidebar and the main chat view, ensuring the form context is available throughout the entire application. * fix: Active section switching and dead code cleanup Sync ActivePanelProvider state when defaultActive prop changes so clicking a collapsed-bar icon actually switches the expanded section. Remove the now-unused hideSidePanel atom and its Settings toggle. * style: Redesign sidebar layout with optimized spacing and positioning - Remove duplicate new chat button from sidebar, keep it in main header - Reposition account settings to bottom of expanded sidebar - Simplify collapsed bar padding and alignment - Clean up unused framer-motion imports from Header - Optimize vertical space usage in expanded panel - Align search bar icon color with sidebar theme * fix: Chat history not showing in sidebar Add h-full to ConversationsSection outer div so it fills the Nav content panel, giving react-virtualized's AutoSizer a measurable height. Change Nav content panel from overflow-y-auto to overflow-hidden since the virtualized list handles its own scrolling. * refactor: Move nav icons to fixed icon strip alongside sidebar toggle Extract section icons from the Nav content panel into the ExpandedPanel icon strip, matching the CollapsedBar layout. Both states now share identical button styling and 50px width, eliminating layout shift on toggle. Nav.tsx simplified to content-only rendering. Set text-text-primary on Nav content for consistent child text color. * refactor: sidebar components and remove unused NewChat component * refactor: streamline sidebar components and introduce NewChat button * refactor: enhance sidebar functionality with expanded state management and improved layout * fix: re-implement sidebar resizing functionality with mouse events * feat: enhance sidebar layout responsiveness on mobile * refactor: remove unused components and streamline sidebar functionality * feat: enhance sidebar behavior with responsive transformations for small screens * feat: add new chat button for small screens with message cache clearing * feat: improve state management in sidebar and marketplace components * feat: enhance scrolling behavior in AgentPanel and Nav components * fix: normalize sidebar panel font sizes and default panel selection Set text-sm as base font size on the shared Nav container so all panels render consistently. Guard against empty localStorage value when restoring the active sidebar panel. * fix: adjust avatar size and class for collapsed state in AccountSettings component * style: adjust padding and class names in Nav, Parameters, and ConversationsSection components * fix: close mobile sidebar on pinned favorite selection * refactor: remove unused key in translation file * fix: Address review findings for unified sidebar - Restore ChatFormProvider per-ChatView to fix multi-conversation input isolation; add separate ChatFormProvider in UnifiedSidebar for Prompts panel access - Add inert attribute on mobile sidebar (when collapsed) and main content (when sidebar overlay is open) to prevent keyboard focus leaking - Replace unsafe `as unknown as TChatContext` cast with null-based context that throws descriptively when used outside a provider - Throttle mousemove resize handler with requestAnimationFrame to prevent React state updates at 120Hz during sidebar drag - Unify active panel state: remove split between activeSection in UnifiedSidebar and internal state in ActivePanelContext; single source of truth with localStorage sync on every write - Delete orphaned SidePanelProvider/useSidePanelContext (no consumers after SidePanel.tsx removal) - Add data-testid="new-chat-button" to NewChat component - Add includeHidePanel option to useSideNavLinks; remove no-op hidePanel callback and post-hoc filter in useUnifiedSidebarLinks - Close sidebar on first mobile visit when localStorage has no prior state - Remove unnecessary min-width/max-width CSS transitions (only width needed) - Remove dead SideNav re-export from SidePanel/index.ts - Remove duplicate aria-label from Sidebar nav element - Fix trailing blank line in mobile.css * style: fix prettier formatting in Root.tsx * fix: Address remaining review findings and re-render isolation - Extract useChatHelpers(0) into SidebarChatProvider child component so Recoil atom subscriptions (streaming tokens, latestMessage, etc.) only re-render the active panel — not the sidebar shell, resize logic, or icon strip (Finding 4) - Fix prompt pre-fill when sidebar form context differs from chat form: useSubmitMessage now reads the actual textarea DOM value via mainTextareaId as fallback for the currentText newline check (Finding 1) - Add id="close-sidebar-button" and data-testid to ExpandedPanel toggle so OpenSidebar focus management works after expand (Finding 10/N3) - Replace Dispatch<SetStateAction<number>> prop with onResizeKeyboard(direction) callback on Sidebar (Finding 13) - Fix first-mobile-visit sidebar flash: atom default now checks window.matchMedia at init time instead of defaulting to true then correcting in a useEffect; removes eslint-disable suppression (N1/N2) - Add tests for ActivePanelContext and ChatContext (Finding 8) * refactor: remove no-op memo from SidebarChatProvider memo(SidebarChatProvider) provided no memoization because its only prop (children) is inline JSX — a new reference on every parent render. The streaming isolation works through Recoil subscription scoping, not memo. Clarified in the JSDoc comment. * fix: add shebang to pre-commit hook for Windows compatibility Git on Windows cannot spawn hook scripts without a shebang line, causing 'cannot spawn .husky/pre-commit: No such file or directory'. * style: fix sidebar panel styling inconsistencies - Remove inner overflow-y-auto from AgentPanel form to eliminate double scrollbars when nested inside Nav.tsx's scroll container - Add consistent padding (px-3 py-2) to Nav.tsx panel container - Remove hardcoded 150px cell widths from Files PanelTable; widen date column from 25% to 35% so dates are no longer cut off - Compact pagination row with flex-wrap and smaller text - Add px-1 padding to Parameters panel for consistency - Change overflow-x-visible to overflow-x-hidden on Files and Bookmarks panels to prevent horizontal overflow * fix: Restore panel styling regressions in unified sidebar - Nav.tsx wrapper: remove extra px-3 padding, add hide-scrollbar class, restore py-1 to match old ResizablePanel wrapper - AgentPanel: restore scrollbar-gutter-stable and mx-1 margin (was px-1) - Parameters/Panel: restore p-3 padding (was px-1 pt-1) - Files/Panel: restore overflow-x-visible (was hidden, clipping content) - Files/PanelTable: restore 75/25 column widths, restore 150px cell width constraints, restore pagination text-sm and gap-2 - Bookmarks/Panel: restore overflow-x-visible * style: initial improvements post-sidenav change * style: update text size in DynamicTextarea for improved readability * style: update FilterPrompts alignment in PromptsAccordion for better layout consistency * style: adjust component heights and padding for consistency across SidePanel elements - Updated height from 40px to 36px in AgentSelect for uniformity - Changed button size class from "bg-transparent" to "size-9" in BookmarkTable, MCPBuilderPanel, and MemoryPanel - Added padding class "py-1.5" in DynamicDropdown for improved spacing - Reduced height from 10 to 9 in DynamicInput and DynamicTags for a cohesive look - Adjusted padding in Parameters/Panel for better layout * style: standardize button sizes and icon dimensions across chat components - Updated button size class from 'size-10' to 'size-9' in multiple components for consistency. - Adjusted icon sizes from 'icon-lg' to 'icon-md' in various locations to maintain uniformity. - Modified header height for better alignment with design specifications. * style: enhance layout consistency and component structure across various panels - Updated ActivePanelContext to utilize useCallback and useMemo for improved performance. - Adjusted padding and layout in multiple SidePanel components for better visual alignment. - Standardized icon sizes and button dimensions in AddMultiConvo and other components. - Improved overall spacing and structure in PromptsAccordion, MemoryPanel, and FilesPanel for a cohesive design. * style: standardize component heights and text sizes across various panels - Adjusted button heights from 10px to 9px in multiple components for consistency. - Updated text sizes from 'text-sm' to 'text-xs' in DynamicCheckbox, DynamicCombobox, DynamicDropdown, DynamicInput, DynamicSlider, DynamicSwitch, DynamicTags, and DynamicTextarea for improved readability. - Added portal prop to account settings menu for better rendering behavior. * refactor: optimize Tooltip component structure for performance - Introduced a new memoized TooltipPopup component to prevent unnecessary re-renders of the TooltipAnchor when the tooltip mounts/unmounts. - Updated TooltipAnchor to utilize the new TooltipPopup, improving separation of concerns and enhancing performance. - Maintained existing functionality while improving code clarity and maintainability. * refactor: improve sidebar transition handling for better responsiveness - Enhanced the transition properties in the UnifiedSidebar component to include min-width and max-width adjustments, ensuring smoother resizing behavior. - Cleaned up import statements by removing unnecessary lines for better code clarity. * fix: prevent text selection during sidebar resizing - Added functionality to disable text selection on the body while the sidebar is being resized, enhancing user experience during interactions. - Restored text selection capability once resizing is complete, ensuring normal behavior resumes. * fix: ensure Header component is always rendered in ChatView - Removed conditional rendering of the Header component to ensure it is always displayed, improving the consistency of the chat interface. * refactor: add NewChatButton to ExpandedPanel for improved user interaction - Introduced a NewChatButton component in the ExpandedPanel, allowing users to initiate new conversations easily. - Implemented functionality to clear message cache and invalidate queries upon button click, enhancing performance and user experience. - Restored import statements for OpenSidebar and PresetsMenu in Header component for better organization. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-03-22 01:15:20 -04:00
Danny Avila	b5c097e5c7	⚗️ feat: Agent Context Compaction/Summarization (#12287) ... * chore: imports/types Add summarization config and package-level summarize handler contracts Register summarize handlers across server controller paths Port cursor dual-read/dual-write summary support and UI status handling Selectively merge cursor branch files for BaseClient summary content block detection (last-summary-wins), dual-write persistence, summary block unit tests, and on_summarize_status SSE event handling with started/completed/failed branches. Co-authored-by: Cursor <cursoragent@cursor.com> refactor: type safety feat: add localization for summarization status messages refactor: optimize summary block detection in BaseClient Updated the logic for identifying existing summary content blocks to use a reverse loop for improved efficiency. Added a new test case to ensure the last summary content block is updated correctly when multiple summary blocks exist. chore: add runName to chainOptions in AgentClient refactor: streamline summarization configuration and handler integration Removed the deprecated summarizeNotConfigured function and replaced it with a more flexible createSummarizeFn. Updated the summarization handler setup across various controllers to utilize the new function, enhancing error handling and configuration resolution. Improved overall code clarity and maintainability by consolidating summarization logic. feat(summarization): add staged chunk-and-merge fallback feat(usage): track summarization usage separately from messages feat(summarization): resolve prompt from config in runtime fix(endpoints): use @librechat/api provider config loader refactor(agents): import getProviderConfig from @librechat/api chore: code order feat(app-config): auto-enable summarization when configured feat: summarization config refactor(summarization): streamline persist summary handling and enhance configuration validation Removed the deprecated createDeferredPersistSummary function and integrated a new createPersistSummary function for MongoDB persistence. Updated summarization handlers across various controllers to utilize the new persistence method. Enhanced validation for summarization configuration to ensure provider, model, and prompt are properly set, improving error handling and overall robustness. refactor(summarization): update event handling and remove legacy summarize handlers Replaced the deprecated summarization handlers with new event-driven handlers for summarization start and completion across multiple controllers. This change enhances the clarity of the summarization process and improves the integration of summarization events in the application. Additionally, removed unused summarization functions and streamlined the configuration loading process. refactor(summarization): standardize event names in handlers Updated event names in the summarization handlers to use constants from GraphEvents for consistency and clarity. This change improves maintainability and reduces the risk of errors related to string literals in event handling. feat(summarization): enhance usage tracking for summarization events Added logic to track summarization usage in multiple controllers by checking the current node type. If the node indicates a summarization task, the usage type is set accordingly. This change improves the granularity of usage data collected during summarization processes. feat(summarization): integrate SummarizationConfig into AppSummarizationConfig type Enhanced the AppSummarizationConfig type by extending it with the SummarizationConfig type from librechat-data-provider. This change improves type safety and consistency in the summarization configuration structure. test: add end-to-end tests for summarization functionality Introduced a comprehensive suite of end-to-end tests for the summarization feature, covering the full LibreChat pipeline from message creation to summarization. This includes a new setup file for environment configuration and a Jest configuration specifically for E2E tests. The tests utilize real API keys and ensure proper integration with the summarization process, enhancing overall test coverage and reliability. refactor(summarization): include initial summary in formatAgentMessages output Updated the formatAgentMessages function to return an initial summary alongside messages and index token count map. This change is reflected in multiple controllers and the corresponding tests, enhancing the summarization process by providing additional context for each agent's response. refactor: move hydrateMissingIndexTokenCounts to tokenMap utility Extracted the hydrateMissingIndexTokenCounts function from the AgentClient and related tests into a new tokenMap utility file. This change improves code organization and reusability, allowing for better management of token counting logic across the application. refactor(summarization): standardize step event handling and improve summary rendering Refactored the step event handling in the useStepHandler and related components to utilize constants for event names, enhancing consistency and maintainability. Additionally, improved the rendering logic in the Summary component to conditionally display the summary text based on its availability, providing a better user experience during the summarization process. feat(summarization): introduce baseContextTokens and reserveTokensRatio for improved context management Added baseContextTokens to the InitializedAgent type to calculate the context budget based on agentMaxContextNum and maxOutputTokensNum. Implemented reserveTokensRatio in the createRun function to allow configurable context token management. Updated related tests to validate these changes and ensure proper functionality. feat(summarization): add minReserveTokens, context pruning, and overflow recovery configurations Introduced new configuration options for summarization, including minReserveTokens, context pruning settings, and overflow recovery parameters. Updated the createRun function to accommodate these new options and added a comprehensive test suite to validate their functionality and integration within the summarization process. feat(summarization): add updatePrompt and reserveTokensRatio to summarization configuration Introduced an updatePrompt field for updating existing summaries with new messages, enhancing the flexibility of the summarization process. Additionally, added reserveTokensRatio to the configuration schema, allowing for improved management of token allocation during summarization. Updated related tests to validate these new features. feat(logging): add on_agent_log event handler for structured logging Implemented an on_agent_log event handler in both the agents' callbacks and responses to facilitate structured logging of agent activities. This enhancement allows for better tracking and debugging of agent interactions by logging messages with associated metadata. Updated the summarization process to ensure proper handling of log events. fix: remove duplicate IBalanceUpdate interface declaration perf(usage): single-pass partition of collectedUsage Replace two Array.filter() passes with a single for-of loop that partitions message vs. summarization usages in one iteration. fix(BaseClient): shallow-copy message content before mutating and preserve string content Avoid mutating the original message.content array in-place when appending a summary block. Also convert string content to a text content part instead of silently discarding it. fix(ui): fix Part.tsx indentation and useStepHandler summarize-complete handling - Fix SUMMARY else-if branch indentation in Part.tsx to match chain level - Guard ON_SUMMARIZE_COMPLETE with didFinalize flag to avoid unnecessary re-renders when no summarizing parts exist - Protect against undefined completeData.summary instead of unsafe spread fix(agents): use strict enabled check for summarization handlers Change summarizationConfig?.enabled !== false to === true so handlers are not registered when summarizationConfig is undefined. chore: fix initializeClient JSDoc and move DEFAULT_RESERVE_RATIO to module scope refactor(Summary): align collapse/expand behavior with Reasoning component - Single render path instead of separate streaming vs completed branches - Use useMessageContext for isSubmitting/isLatestMessage awareness so the "Summarizing..." label only shows during active streaming - Default to collapsed (matching Reasoning), user toggles to expand - Add proper aria attributes (aria-hidden, role, aria-controls, contentId) - Hide copy button while actively streaming feat(summarization): default to self-summarize using agent's own provider/model When no summarization config is provided (neither in librechat.yaml nor on the agent), automatically enable summarization using the agent's own provider and model. The agents package already provides default prompts, so no prompt configuration is needed. Also removes the dead resolveSummarizationLLMConfig in summarize.ts (and its spec) — run.ts buildAgentContext is the single source of truth for summarization config resolution. Removes the duplicate RuntimeSummarizationConfig local type in favor of the canonical SummarizationConfig from data-provider. chore: schema and type cleanup for summarization - Add trigger field to summarizationAgentOverrideSchema so per-agent trigger overrides in librechat.yaml are not silently stripped by Zod - Remove unused SummarizationStatus type from runs.ts - Make AppSummarizationConfig.enabled non-optional to reflect the invariant that loadSummarizationConfig always sets it refactor(responses): extract duplicated on_agent_log handler refactor(run): use agents package types for summarization config Import SummarizationConfig, ContextPruningConfig, and OverflowRecoveryConfig from @librechat/agents and use them to type-check the translation layer in buildAgentContext. This ensures the config object passed to the agent graph matches what it expects. - Use `satisfies AgentSummarizationConfig` on the config object - Cast contextPruningConfig and overflowRecoveryConfig to agents types - Properly narrow trigger fields from DeepPartial to required shape feat(config): add maxToolResultChars to base endpoint schema Add maxToolResultChars to baseEndpointSchema so it can be configured on any endpoint in librechat.yaml. Resolved during agent initialization using getProviderConfig's endpoint resolution: custom endpoint config takes precedence, then the provider-specific endpoint config, then the shared `all` config. Passed through to the agents package ToolNode, which uses it to cap tool result length before it enters the context window. When not configured, the agents package computes a sensible default from maxContextTokens. fix(summarization): forward agent model_parameters in self-summarize default When no explicit summarization config exists, the self-summarize default now forwards the agent's model_parameters as the summarization parameters. This ensures provider-specific settings (e.g. Bedrock region, credentials, endpoint host) are available when the agents package constructs the summarization LLM. fix(agents): register summarization handlers by default Change the enabled gate from === true to !== false so handlers register when no explicit summarization config exists. This aligns with the self-summarize default where summarization is always on unless explicitly disabled via enabled: false. refactor(summarization): let agents package inherit clientOptions for self-summarize Remove model_parameters forwarding from the self-summarize default. The agents package now reuses the agent's own clientOptions when the summarization provider matches the agent's provider, inheriting all provider-specific settings (region, credentials, proxy, etc.) automatically. refactor(summarization): use MessageContentComplex[] for summary content Unify summary content to always use MessageContentComplex[] arrays, matching the pattern used by on_message_delta. No more string | array unions — content is always an array of typed blocks ({ type: 'text', text: '...' } for text, { type: 'reasoning_content', ... } for reasoning). Agents package: - SummaryContentBlock.content: MessageContentComplex[] (was string) - tokenCount now optional (not sent on deltas) - Removed reasoning field — reasoning is now a content block type - streamAndCollect normalizes all chunks to content block arrays - Delta events pass content blocks directly LibreChat: - SummaryContentPart.content: Agents.MessageContentComplex[] - Updated Part.tsx, Summary.tsx, useStepHandler.ts, BaseClient.js - Summary.tsx derives display text from content blocks via useMemo - Aggregator uses simple array spread refactor(summarization): enhance summary handling and text extraction - Updated BaseClient.js to improve summary text extraction, accommodating both legacy and new content formats. - Modified summarization logic to ensure consistent handling of summary content across different message formats. - Adjusted test cases in summarization.e2e.spec.js to utilize the new summary text extraction method. - Refined SSE useStepHandler to initialize summary content as an array. - Updated configuration schema by removing unused minReserveTokens field. - Cleaned up SummaryContentPart type by removing rangeHash property. These changes streamline the summarization process and ensure compatibility with various content structures. refactor(summarization): streamline usage tracking and logging - Removed direct checks for summarization nodes in ModelEndHandler and replaced them with a dedicated markSummarizationUsage function for better readability and maintainability. - Updated OpenAIChatCompletionController and responses handlers to utilize the new markSummarizationUsage function for setting usage types. - Enhanced logging functionality by ensuring the logger correctly handles different log levels. - Introduced a new useCopyToClipboard hook in the Summary component to encapsulate clipboard copy logic, improving code reusability and clarity. These changes improve the overall structure and efficiency of the summarization handling and logging processes. refactor(summarization): update summary content block documentation - Removed outdated comment regarding the last summary content block in BaseClient.js. - Added a new comment to clarify the purpose of the findSummaryContentBlock method, ensuring consistency in documentation. These changes enhance code clarity and maintainability by providing accurate descriptions of the summarization logic. refactor(summarization): update summary content structure in tests - Modified the summarization content structure in e2e tests to use an array format for text, aligning with recent changes in summary handling. - Updated test descriptions to clarify the behavior of context token calculations, ensuring consistency and clarity in the tests. These changes enhance the accuracy and maintainability of the summarization tests by reflecting the updated content structure. refactor(summarization): remove legacy E2E test setup and configuration - Deleted the e2e-setup.js and jest.e2e.config.js files, which contained legacy configurations for E2E tests using real API keys. - Introduced a new summarization.e2e.ts file that implements comprehensive E2E backend integration tests for the summarization process, utilizing real AI providers and tracking summaries throughout the run. These changes streamline the testing framework by consolidating E2E tests into a single, more robust file while removing outdated configurations. refactor(summarization): enhance E2E tests and error handling - Added a cleanup step to force exit after all tests to manage Redis connections. - Updated the summarization model to 'claude-haiku-4-5-20251001' for consistency across tests. - Improved error handling in the processStream function to capture and return processing errors. - Enhanced logging for cross-run tests and tight context scenarios to provide better insights into test execution. These changes improve the reliability and clarity of the E2E tests for the summarization process. refactor(summarization): enhance test coverage for maxContextTokens behavior - Updated run-summarization.test.ts to include a new test case ensuring that maxContextTokens does not exceed user-defined limits, even when calculated ratios suggest otherwise. - Modified summarization.e2e.ts to replace legacy UsageMetadata type with a more appropriate type for collectedUsage, improving type safety and clarity in the test setup. These changes improve the robustness of the summarization tests by validating context token constraints and refining type definitions. feat(summarization): add comprehensive E2E tests for summarization process - Introduced a new summarization.e2e.test.ts file that implements extensive end-to-end integration tests for the summarization pipeline, covering the full flow from LibreChat to agents. - The tests utilize real AI providers and include functionality to track summaries during and between runs. - Added necessary cleanup steps to manage Redis connections post-tests and ensure proper exit. These changes enhance the testing framework by providing robust coverage for the summarization process, ensuring reliability and performance under real-world conditions. fix(service): import logger from winston configuration - Removed the import statement for logger from '@librechat/data-schemas' and replaced it with an import from '~/config/winston'. - This change ensures that the logger is correctly sourced from the updated configuration, improving consistency in logging practices across the application. refactor(summary): simplify Summary component and enhance token display - Removed the unused `meta` prop from the `SummaryButton` component to streamline its interface. - Updated the token display logic to use a localized string for better internationalization support. - Adjusted the rendering of the `meta` information to improve its visibility within the `Summary` component. These changes enhance the clarity and usability of the Summary component while ensuring better localization practices. feat(summarization): add maxInputTokens configuration for summarization - Introduced a new `maxInputTokens` property in the summarization configuration schema to control the amount of conversation context sent to the summarizer, with a default value of 10000. - Updated the `createRun` function to utilize the new `maxInputTokens` setting, allowing for more flexible summarization based on agent context. These changes enhance the summarization capabilities by providing better control over input token limits, improving the overall summarization process. refactor(summarization): simplify maxInputTokens logic in createRun function - Updated the logic for the `maxInputTokens` property in the `createRun` function to directly use the agent's base context tokens when the resolved summarization configuration does not specify a value. - This change streamlines the configuration process and enhances clarity in how input token limits are determined for summarization. These modifications improve the maintainability of the summarization configuration by reducing complexity in the token calculation logic. feat(summary): enhance Summary component to display meta information - Updated the SummaryContent component to accept an optional `meta` prop, allowing for additional contextual information to be displayed above the main content. - Adjusted the rendering logic in the Summary component to utilize the new `meta` prop, improving the visibility of supplementary details. These changes enhance the user experience by providing more context within the Summary component, making it clearer and more informative. refactor(summarization): standardize reserveRatio configuration in summarization logic - Replaced instances of `reserveTokensRatio` with `reserveRatio` in the `createRun` function and related tests to unify the terminology across the codebase. - Updated the summarization configuration schema to reflect this change, ensuring consistency in how the reserve ratio is defined and utilized. - Removed the per-agent override logic for summarization configuration, simplifying the overall structure and enhancing clarity. These modifications improve the maintainability and readability of the summarization logic by standardizing the configuration parameters. * fix: circular dependency of `~/models` * chore: update logging scope in agent log handlers Changed log scope from `[agentus:${data.scope}]` to `[agents:${data.scope}]` in both the callbacks and responses controllers to ensure consistent logging format across the application. * feat: calibration ratio * refactor(tests): update summarizationConfig tests to reflect changes in enabled property Modified tests to check for the new `summarizationEnabled` property instead of the deprecated `enabled` field in the summarization configuration. This change ensures that the tests accurately validate the current configuration structure and behavior of the agents. * feat(tests): add markSummarizationUsage mock for improved test coverage Introduced a mock for the markSummarizationUsage function in the responses unit tests to enhance the testing of summarization usage tracking. This addition supports better validation of summarization-related functionalities and ensures comprehensive test coverage for the agents' response handling. * refactor(tests): simplify event handler setup in createResponse tests Removed redundant mock implementations for event handlers in the createResponse unit tests, streamlining the setup process. This change enhances test clarity and maintainability while ensuring that the tests continue to validate the correct behavior of usage tracking during on_chat_model_end events. * refactor(agents): move calibration ratio capture to finally block Reorganized the logic for capturing the calibration ratio in the AgentClient class to ensure it is executed in the finally block. This change guarantees that the ratio is captured even if the run is aborted, enhancing the reliability of the response message persistence. Removed redundant code and improved clarity in the handling of context metadata. * refactor(agents): streamline bulk write logic in recordCollectedUsage function Removed redundant bulk write operations and consolidated document handling in the recordCollectedUsage function. The logic now combines all documents into a single bulk write operation, improving efficiency and reducing error handling complexity. Updated logging to provide consistent error messages for bulk write failures. * refactor(agents): enhance summarization configuration resolution in createRun function Streamlined the summarization configuration logic by introducing a base configuration and allowing for overrides from agent-specific settings. This change improves clarity and maintainability, ensuring that the summarization configuration is consistently applied while retaining flexibility for customization. Updated the handling of summarization parameters to ensure proper integration with the agent's model and provider settings. * refactor(agents): remove unused tokenCountMap and streamline calibration ratio handling Eliminated the unused tokenCountMap variable from the AgentClient class to enhance code clarity. Additionally, streamlined the logic for capturing the calibration ratio by using optional chaining and a fallback value, ensuring that context metadata is consistently defined. This change improves maintainability and reduces potential confusion in the codebase. * refactor(agents): extract agent log handler for improved clarity and reusability Refactored the agent log handling logic by extracting it into a dedicated function, `agentLogHandler`, enhancing code clarity and reusability across different modules. Updated the event handlers in both the OpenAI and responses controllers to utilize the new handler, ensuring consistent logging behavior throughout the application. * test: add summarization event tests for useStepHandler Implemented a series of tests for the summarization events in the useStepHandler hook. The tests cover scenarios for ON_SUMMARIZE_START, ON_SUMMARIZE_DELTA, and ON_SUMMARIZE_COMPLETE events, ensuring proper handling of summarization logic, including message accumulation and finalization. This addition enhances test coverage and validates the correct behavior of the summarization process within the application. * refactor(config): update summarizationTriggerSchema to use enum for type validation Changed the type of the `type` field in the summarizationTriggerSchema from a string to an enum with a single value 'token_count'. This modification enhances type safety and ensures that only valid types are accepted in the configuration, improving overall clarity and maintainability of the schema. * test(usage): add bulk write tests for message and summarization usage Implemented tests for the bulk write functionality in the recordCollectedUsage function, covering scenarios for combined message and summarization usage, summarization-only usage, and message-only usage. These tests ensure correct document handling and token rollup calculations, enhancing test coverage and validating the behavior of the usage tracking logic. * refactor(Chat): enhance clipboard copy functionality and type definitions in Summary component Updated the Summary component to improve the clipboard copy functionality by handling clipboard permission errors. Refactored type definitions for SummaryProps to use a more specific type, enhancing type safety. Adjusted the SummaryButton and FloatingSummaryBar components to accept isCopied and onCopy props, promoting better separation of concerns and reusability. * chore(translations): remove unused "Expand Summary" key from English translations Deleted the "Expand Summary" key from the English translation file to streamline the localization resources and improve clarity in the user interface. This change helps maintain an organized and efficient translation structure. * refactor: adjust token counting for Claude model to account for API discrepancies Implemented a correction factor for token counting when using the Claude model, addressing discrepancies between Anthropic's API and local tokenizer results. This change ensures accurate token counts by applying a scaling factor, improving the reliability of token-related functionalities. * refactor(agents): implement token count adjustment for Claude model messages Added a method to adjust token counts for messages processed by the Claude model, applying a correction factor to align with API expectations. This enhancement improves the accuracy of token counting, ensuring reliable functionality when interacting with the Claude model. * refactor(agents): token counting for media content in messages Introduced a new method to estimate token costs for image and document blocks in messages, improving the accuracy of token counting. This enhancement ensures that media content is properly accounted for, particularly for the Claude model, by integrating additional token estimation logic for various content types. Updated the token counting function to utilize this new method, enhancing overall reliability and functionality. * chore: fix missing import * fix(agents): clamp baseContextTokens and document reserve ratio change Prevent negative baseContextTokens when maxOutputTokens exceeds the context window (misconfigured models). Document the 10%→5% default reserve ratio reduction introduced alongside summarization. * fix(agents): include media tokens in hydrated token counts Add estimateMediaTokensForMessage to createTokenCounter so the hydration path (used by hydrateMissingIndexTokenCounts) matches the precomputed path in AgentClient.getTokenCountForMessage. Without this, messages containing images or documents were systematically undercounted during hydration, risking context window overflow. Add 34 unit tests covering all block-type branches of estimateMediaTokensForMessage. * fix(agents): include summarization output tokens in usage return value The returned output_tokens from recordCollectedUsage now reflects all billed LLM calls (message + summarization). Previously, summarization completions were billed but excluded from the returned metadata, causing a discrepancy between what users were charged and what the response message reported. * fix(tests): replace process.exit with proper Redis cleanup in e2e test The summarization E2E test used process.exit(0) to work around a Redis connection opened at import time, which killed the Jest runner and bypassed teardown. Use ioredisClient.quit() and keyvRedisClient.disconnect() for graceful cleanup instead. * fix(tests): update getConvo imports in OpenAI and response tests Refactor test files to import getConvo from the main models module instead of the Conversation submodule. This change ensures consistency across tests and simplifies the import structure, enhancing maintainability. * fix(clients): improve summary text validation in BaseClient Refactor the summary extraction logic to ensure that only non-empty summary texts are considered valid. This change enhances the robustness of the message processing by utilizing a dedicated method for summary text retrieval, improving overall reliability. * fix(config): replace z.any() with explicit union in summarization schema Model parameters (temperature, top_p, etc.) are constrained to primitive types rather than the policy-violating z.any(). * refactor(agents): deduplicate CLAUDE_TOKEN_CORRECTION constant Export from the TS source in packages/api and import in the JS client, eliminating the static class property that could drift out of sync. * refactor(agents): eliminate duplicate selfProvider in buildAgentContext selfProvider and provider were derived from the same expression with different type casts. Consolidated to a single provider variable. * refactor(agents): extract shared SSE handlers and restrict log levels - buildSummarizationHandlers() factory replaces triplicated handler blocks across responses.js and openai.js - agentLogHandlerObj exported from callbacks.js for consistent reuse - agentLogHandler restricted to an allowlist of safe log levels (debug, info, warn, error) instead of accepting arbitrary strings * fix(SSE): batch summarize deltas, add exhaustiveness check, conditional error announcement - ON_SUMMARIZE_DELTA coalesces rapid-fire renders via requestAnimationFrame instead of calling setMessages per chunk - Exhaustive never-check on TStepEvent catches unhandled variants at compile time when new StepEvents are added - ON_SUMMARIZE_COMPLETE error announcement only fires when a summary part was actually present and removed * feat(agents): persist instruction overhead in contextMeta and seed across runs Extend contextMeta with instructionOverhead and toolCount so the provider-observed instruction overhead is persisted on the response message and seeded into the pruner on subsequent runs. This enables the pruner to use a calibrated budget from the first call instead of waiting for a provider observation, preventing the ratio collapse caused by local tokenizer overestimating tool schema tokens. The seeded overhead is only used when encoding and tool count match between runs, ensuring stale values from different configurations are discarded. * test(agents): enhance OpenAI test mocks for summarization handlers Updated the OpenAI test suite to include additional mock implementations for summarization handlers, including buildSummarizationHandlers, markSummarizationUsage, and agentLogHandlerObj. This improves test coverage and ensures consistent behavior during testing. * fix(agents): address review findings for summarization v2 Cancel rAF on unmount to prevent stale Recoil writes from dead component context. Clear orphaned summarizing:true parts when ON_SUMMARIZE_COMPLETE arrives without a summary payload. Add null guard and safe spread to agentLogHandler. Handle Anthropic-format base64 image/* documents in estimateMediaTokensForMessage. Use role="region" for expandable summary content. Add .describe() to contextMeta Zod fields. Extract duplicate usage loop into helper. * refactor: simplify contextMeta to calibrationRatio + encoding only Remove instructionOverhead and toolCount from cross-run persistence — instruction tokens change too frequently between runs (prompt edits, tool changes) for a persisted seed to be reliable. The intra-run calibration in the pruner still self-corrects via provider observations. contextMeta now stores only the tokenizer-bias ratio and encoding, which are stable across instruction changes. * test(SSE): enhance useStepHandler tests for ON_SUMMARIZE_COMPLETE behavior Updated the test for ON_SUMMARIZE_COMPLETE to clarify that it finalizes the existing part with summarizing set to false when the summary is undefined. Added assertions to verify the correct behavior of message updates and the state of summary parts. * refactor(BaseClient): remove handleContextStrategy and truncateToolCallOutputs functions Eliminated the handleContextStrategy method from BaseClient to streamline message handling. Also removed the truncateToolCallOutputs function from the prompts module, simplifying the codebase and improving maintainability. * refactor: add AGENT_DEBUG_LOGGING option and refactor token count handling in BaseClient Introduced AGENT_DEBUG_LOGGING to .env.example for enhanced debugging capabilities. Refactored token count handling in BaseClient by removing the handleTokenCountMap method and simplifying token count updates. Updated AgentClient to log detailed token count recalculations and adjustments, improving traceability during message processing. * chore: update dependencies in package-lock.json and package.json files Bumped versions of several dependencies, including @librechat/agents to ^3.1.62 and various AWS SDK packages to their latest versions. This ensures compatibility and incorporates the latest features and fixes. * chore: imports order * refactor: extract summarization config resolution from buildAgentContext * refactor: rename and simplify summarization configuration shaping function * refactor: replace AgentClient token counting methods with single-pass pure utility Extract getTokenCount() and getTokenCountForMessage() from AgentClient into countFormattedMessageTokens(), a pure function in packages/api that handles text, tool_call, image, and document content types in one loop. - Decompose estimateMediaTokensForMessage into block-level helpers (estimateImageDataTokens, estimateImageBlockTokens, estimateDocumentBlockTokens) shared by both estimateMediaTokensForMessage and the new single-pass function - Remove redundant per-call getEncoding() resolution (closure captures once) - Remove deprecated gpt-3.5-turbo-0301 model branching - Drop this.getTokenCount guard from BaseClient.sendMessage * refactor: streamline token counting in createTokenCounter function Simplified the createTokenCounter function by removing the media token estimation and directly calculating the token count. This change enhances clarity and performance by consolidating the token counting logic into a single pass, while maintaining compatibility with Claude's token correction. * refactor: simplify summarization configuration types Removed the AppSummarizationConfig type and directly used SummarizationConfig in the AppConfig interface. This change streamlines the type definitions and enhances consistency across the codebase. * chore: import order * fix: summarization event handling in useStepHandler - Cancel pending summarizeDeltaRaf in clearStepMaps to prevent stale frames firing after map reset or component unmount - Move announcePolite('summarize_completed') inside the didFinalize guard so screen readers only announce when finalization actually occurs - Remove dead cleanup closure returned from stepHandler useCallback body that was never invoked by any caller * fix: estimate tokens for non-PDF/non-image base64 document blocks Previously estimateDocumentBlockTokens returned 0 for unrecognized MIME types (e.g. text/plain, application/json), silently underestimating context budget. Fall back to character-based heuristic or countTokens. * refactor: return cloned usage from markSummarizationUsage Avoid mutating LangChain's internal usage_metadata object by returning a shallow clone with the usage_type tag. Update all call sites in callbacks, openai, and responses controllers to use the returned value. * refactor: consolidate debug logging loops in buildMessages Merge the two sequential O(n) debug-logging passes over orderedMessages into a single pass inside the map callback where all data is available. * refactor: narrow SummaryContentPart.content type Replace broad Agents.MessageContentComplex[] with the specific Array<{ type: ContentTypes.TEXT; text: string }> that all producers and consumers already use, improving compile-time safety. * refactor: use single output array in recordCollectedUsage Have processUsageGroup append to a shared array instead of returning separate arrays that are spread into a third, reducing allocations. * refactor: use for...in in hydrateMissingIndexTokenCounts Replace Object.entries with for...in to avoid allocating an intermediate tuple array during token map hydration.	2026-03-21 14:28:56 -04:00
Danny Avila	6976414464	🗣️ a11y: Distinguish Conversation Headings for Screen Readers (#12341) ... * fix: distinguish message headings for screen readers Before, each message would have the heading of either the name of the user or the name of the agent (e.g. "Dan Lew" or "Claude Sonnet"). If you tried to navigate that with a screen reader, you'd just see a ton of headings switching back and forth between the two with no way to figure out where in the conversation each is. Now, we prefix each header with whether it's a "prompt" or "response", plus we number them so that you can distinguish how far in the conversation each part is. (This is a screen reader only change - there's no visual difference.) * fix: patch MessageParts heading, guard negative depth, add tests - Add sr-only heading prefix to MessageParts.tsx (Assistants endpoint path) - Extract shared getMessageNumber helper to avoid DRY violation between getMessageAriaLabel and getHeaderPrefixForScreenReader - Guard against depth < 0 producing "Prompt 0:" / "Response 0:" - Remove unused lodash import - Add unit tests covering all branches including depth edge cases --------- Co-authored-by: Dan Lew <daniel@mightyacorn.com>	2026-03-20 16:50:12 -04:00
Dustin Healy	5b31bb720d	🔧 fix: Proper MCP Menu Dismissal (#12256) ... * fix: replace manual focus hack with modal menu in MCP selector Use Ariakit's `modal={true}` instead of a manual `requestAnimationFrame` focus-restore wrapper, which eliminates the `useRef`/`useCallback` overhead and lets Ariakit manage focus trapping natively. Also removes the unused `focusLoop` option from both MCP menu stores and a narrating comment in MCPSubMenu. * test: add MCPSelect menu interaction tests Cover button rendering, menu open/close via click and Escape, and server toggle keeping the menu open. Renders real MCPServerMenuItem and StackedMCPIcons components instead of re-implementing their logic in mocks. * fix: add unmountOnHide to MCP menu for consistency Matches the pattern used by MCPSubMenu, BookmarkMenu, and other Ariakit menus in the codebase. Ensures the menu fully detaches from the DOM and accessibility tree when closed. * fix: restore focusLoop on MCP menu stores Ariakit's CompositeStore (which MenuStore extends) defaults focusLoop to false. The previous commit incorrectly removed the explicit focusLoop: true, which silently disabled Arrow-key wraparound (mandatory per WAI-ARIA Menu pattern). modal={true} only traps Tab focus — it does not enable Arrow-key looping. * test: improve MCPSelect test coverage and mock hygiene - Add aria-modal regression guard so removing modal={true} fails a test - Add guard branch tests: no MCP access, empty servers, unpinned+empty - Fix TooltipAnchor mock to correctly spread array children - Fix import ordering per project conventions - Move component import to top with other imports - Replace unasserted jest.fn() mocks with plain values - Use mutable module-scoped vars for per-test mock overrides * fix: enhance pointer event handling in FavoriteItem component Updated the opacity and pointer events logic in the FavoriteItem component to improve user interaction. The changes ensure that the component correctly manages pointer events based on the popover state, enhancing accessibility and usability. * test: add MCPSubMenu menu interaction tests Cover guard branch (empty servers), submenu open/close with real Ariakit components and real MCPServerMenuItem, toggle persistence, pin/unpin button behavior and aria-label states. Only context providers and cross-package UI are mocked. * test: add focusLoop regression guard for both MCP menus ArrowDown from the last item must wrap to the first — this fails without focusLoop: true on the menu store, directly guarding the keyboard accessibility regression that was silently introduced. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-03-17 02:50:18 -04:00
Danny Avila	93a628d7a2	📎 fix: Respect fileConfig.disabled for Agents Endpoint Upload Button (#12238) ... * fix: respect fileConfig.disabled for agents endpoint upload button The isAgents check was OR'd without the !isUploadDisabled guard, bypassing the fileConfig.endpoints.agents.disabled setting and always rendering the attach file menu for agents. * test: add regression tests for fileConfig.disabled upload guard Cover the isUploadDisabled rendering gate for agents and assistants endpoints, preventing silent reintroduction of the bypass bug. * test: cover disabled fallback chain in useAgentFileConfig Verify agents-disabled propagates when no provider is set, when provider has no specific config (agents as fallback), and that provider-specific enabled overrides agents disabled.	2026-03-15 10:35:44 -04:00
Danny Avila	2ac62a2e71	⛵ fix: Resolve Agent Provider Endpoint Type for File Upload Support (#12117) ... * chore: Remove unused setValueOnChange prop from MCPServerMenuItem component * fix: Resolve agent provider endpoint type for file upload support When using the agents endpoint with a custom provider (e.g., Moonshot), the endpointType was resolving to "agents" instead of the provider's actual type ("custom"), causing "Upload to Provider" to not appear in the file attach menu. Adds `resolveEndpointType` utility in data-provider that follows the chain: endpoint (if not agents) → agent.provider → agents. Applied consistently across AttachFileChat, DragDropContext, useDragHelpers, and AgentPanel file components (FileContext, FileSearch, Code/Files). * refactor: Extract useAgentFileConfig hook, restore deleted tests, fix review findings - Extract shared provider resolution logic into useAgentFileConfig hook (Finding #2: DRY violation across FileContext, FileSearch, Code/Files) - Restore 18 deleted test cases in AttachFileMenu.spec.tsx covering agent capabilities, SharePoint, edge cases, and button state (Finding #1: accidental test deletion) - Wrap fileConfigEndpoint in useMemo in AttachFileChat (Finding #3) - Fix misleading test name in AgentFileConfig.spec.tsx (Finding #4) - Fix import order in FileSearch.tsx, FileContext.tsx, Code/Files.tsx (Finding #5) - Add comment about cache gap in useDragHelpers (Finding #6) - Clarify resolveEndpointType JSDoc (Finding #7) * refactor: Memoize Footer component for performance optimization - Converted Footer component to a memoized version to prevent unnecessary re-renders. - Improved import structure by adding memo to the React import statement for clarity. * chore: Fix remaining review nits - Widen useAgentFileConfig return type to EModelEndpoint | string - Fix import order in FileContext.tsx and FileSearch.tsx - Remove dead endpointType param from setupMocks in AttachFileMenu test * fix: Pass resolved provider endpoint to file upload validation AgentPanel file components (FileContext, FileSearch, Code/Files) were hardcoding endpointOverride to "agents", causing both client-side validation (file limits, MIME types) and server-side validation to use the agents config instead of the provider-specific config. Adds endpointTypeOverride to UseFileHandling params so endpoint and endpointType can be set independently. Components now pass the resolved provider name and type from useAgentFileConfig, so the full fallback chain (provider → custom → agents → default) applies to file upload validation on both client and server. * test: Verify any custom endpoint is document-supported regardless of name Adds parameterized tests with arbitrary endpoint names (spaces, hyphens, colons, etc.) confirming that all custom endpoints resolve to document-supported through resolveEndpointType, both as direct endpoints and as agent providers. * fix: Use || for provider fallback, test endpointOverride wiring - Change providerValue ?? to providerValue || so empty string is treated as "no provider" consistently with resolveEndpointType - Add wiring tests to CodeFiles, FileContext, FileSearch verifying endpointOverride and endpointTypeOverride are passed correctly - Update endpointOverride JSDoc to document endpointType fallback	2026-03-07 10:45:43 -05:00
Danny Avila	b93d60c416	🎞️ refactor: Image Rendering with Preview Caching and Layout Reservation (#12114) ... * refactor: Update Image Component to Remove Lazy Loading and Enhance Rendering - Removed the react-lazy-load-image-component dependency from the Image component, simplifying the image loading process. - Updated the Image component to use a standard <img> tag with async decoding for improved performance and user experience. - Adjusted related tests to reflect changes in image rendering behavior and ensure proper functionality without lazy loading. * refactor: Enhance Image Handling and Caching Across Components - Introduced a new previewCache utility for managing local blob preview URLs, improving image loading efficiency. - Updated the Image component and related parts (FileRow, Files, Part, ImageAttachment, LogContent) to utilize cached previews, enhancing rendering performance and user experience. - Added width and height properties to the Image component for better layout management and consistency across different usages. - Improved file handling logic in useFileHandling to cache previews during file uploads, ensuring quick access to image data. - Enhanced overall code clarity and maintainability by streamlining image rendering logic and reducing redundancy. * refactor: Enhance OpenAIImageGen Component with Image Dimensions - Added width and height properties to the OpenAIImageGen component for improved image rendering and layout management. - Updated the Image component usage within OpenAIImageGen to utilize the new dimensions, enhancing visual consistency and performance. - Improved code clarity by destructuring additional properties from the attachment object, streamlining the component's logic. * refactor: Implement Image Size Caching in DialogImage Component - Introduced an imageSizeCache to store and retrieve image sizes, enhancing performance by reducing redundant fetch requests. - Updated the getImageSize function to first check the cache before making network requests, improving efficiency in image handling. - Added decoding attribute to the image element for optimized rendering behavior. * refactor: Enhance UserAvatar Component with Avatar Caching and Error Handling - Introduced avatar caching logic to optimize avatar resolution based on user ID and avatar source, improving performance and reducing redundant image loads. - Implemented error handling for failed image loads, allowing for fallback to a default avatar when necessary. - Updated UserAvatar props to streamline the interface by removing the user object and directly accepting avatar-related properties. - Enhanced overall code clarity and maintainability by refactoring the component structure and logic. * fix: Layout Shift in Message and Placeholder Components for Consistent Height Management - Adjusted the height of the PlaceholderRow and related message components to ensure consistent rendering with a minimum height of 31px. - Updated the MessageParts and ContentRender components to utilize a minimum height for better layout stability. - Enhanced overall code clarity by standardizing the structure of message-related components. * tests: Update FileRow Component to Prefer Cached Previews for Image Rendering - Modified the image URL selection logic in the FileRow component to prioritize cached previews over file paths when uploads are complete, enhancing rendering performance and user experience. - Updated related tests to reflect changes in image URL handling, ensuring accurate assertions for both preview and file path scenarios. - Introduced a fallback mechanism to use file paths when no preview exists, improving robustness in file handling. * fix: Image cache lifecycle and dialog decoding - Add deletePreview/clearPreviewCache to previewCache.ts for blob URL cleanup - Wire deletePreview into useFileDeletion to revoke blobs on file delete - Move dimensionCache.set into useMemo to avoid side effects during render - Extract IMAGE_MAX_W_PX constant (512) to document coupling with max-w-lg - Export _resetImageCaches for test isolation - Change DialogImage decoding from "sync" to "async" to avoid blocking main thread * fix: Avatar cache invalidation and cleanup - Include avatarSrc in cache invalidation to prevent stale avatars - Remove unused username parameter from resolveAvatar - Skip caching when userId is empty to prevent cache key collisions * test: Fix test isolation and type safety - Reset module-level dimensionCache/paintedUrls in beforeEach via _resetImageCaches - Replace any[] with typed mock signature in cn mock for both test files * chore: Code quality improvements from review - Use barrel imports for previewCache in Files.tsx and Part.tsx - Single Map.get with truthy check instead of has+get in useEventHandlers - Add JSDoc comments explaining EmptyText margin removal and PlaceholderRow height - Fix FileRow toast showing "Deleting file" when file isn't actually deleted (progress < 1) * fix: Address remaining review findings (R1-R3) - Add deletePreview calls to deleteFiles batch path to prevent blob URL leaks - Change useFileDeletion import from deep path to barrel (~/utils) - Change useMemo to useEffect for dimensionCache.set (side effect, not derived value) * fix: Address audit comments 2, 5, and 7 - Fix files preservation to distinguish null (missing) from [] (empty) in finalHandler - Add auto-revoke on overwrite in cachePreview to prevent leaked blobs - Add removePreviewEntry for key transfer without revoke - Clean up stale temp_file_id cache entry after promotion to permanent file_id	2026-03-06 19:09:52 -05:00
Airam Hernández Hernández	cc3d62c640	🛡️ fix: Add Permission Guard for Temporary Chat Visibility (#12107) ... - Add useHasAccess hook for TEMPORARY_CHAT permission type - Conditionally render TemporaryChat component based on user permissions - Ensures feature respects role-based access control Co-authored-by: Airam Hernández Hernández <airam.hernandez@intelequia.com>	2026-03-06 17:55:05 -05:00
Carolina	3a73907daa	📐 fix: Replace JS Image Scaling with CSS Viewport Constraints (#12089) ... * fix: remove scaleImage function that stretched vertical images * chore: lint * refactor: Simplify Image Component Usage Across Chat Parts - Removed height and width props from the Image component in various parts (Files, Part, ImageAttachment, LogContent) to streamline image rendering. - Introduced a constant for maximum image height in the Image component for consistent styling. - Updated related components to utilize the new simplified Image component structure, enhancing maintainability and reducing redundancy. * refactor: Simplify LogContent and Enhance Image Component Tests - Removed height and width properties from the ImageAttachment type in LogContent for cleaner code. - Updated the image rendering logic to rely solely on the filepath, improving clarity. - Enhanced the Image component tests with additional assertions for rendering behavior and accessibility. - Introduced new tests for OpenAIImageGen to validate image preloading and progress handling, ensuring robust functionality. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-03-06 16:42:23 -05:00
Danny Avila	5209f1dc9e	⚡ refactor: Optimize Message Re-renders (#12097) ... * 🔄 refactor: Update Artifacts and Messages Contexts to Use Latest Message ID and Depth - Modified ArtifactsContext to retrieve latestMessage using Recoil state management. - Updated MessagesViewContext to replace latestMessage with latestMessageId and latestMessageDepth for improved clarity and consistency. - Adjusted various components (HoverButtons, MessageParts, MessageRender, ContentRender) to utilize latestMessageId instead of the entire message object, enhancing performance and reducing unnecessary re-renders. - Refactored useChatHelpers to extract latestMessageId and latestMessageDepth, streamlining message handling across the application. * refactor: Introduce PartWithContext Component for Optimized Message Rendering - Added a new PartWithContext component to encapsulate message part rendering logic, improving context management and reducing redundancy in the ContentParts component. - Updated MessageRender to utilize the new PartWithContext, streamlining the context provider setup and enhancing code clarity. - Refactored related logic to ensure proper context values are passed, improving maintainability and performance in message rendering. * refactor: Update Components to Use Function Declarations and Improve Readability - Refactored several components (MessageContainer, Markdown, MarkdownCode, MarkdownCodeNoExecution, MarkdownAnchor, MarkdownParagraph, MarkdownImage, TextPart, PlaceholderRow) to use function declarations instead of arrow functions, enhancing readability and consistency across the codebase. - Added display names to memoized components for better debugging and profiling in React DevTools. - Improved overall code clarity and maintainability by standardizing component definitions. * refactor: Standardize MessageRender and ContentRender Components for Improved Clarity - Refactored MessageRender and ContentRender components to use function declarations, enhancing readability and consistency. - Streamlined props handling by removing unnecessary parameters and improving the use of hooks for state management. - Updated memoization and rendering logic to optimize performance and reduce unnecessary re-renders. - Enhanced overall code clarity and maintainability by standardizing component definitions and structure. * refactor: Enhance Header Component with Memoization for Performance - Refactored the Header component to utilize React's memoization by wrapping it with the memo function, improving rendering performance by preventing unnecessary re-renders. - Changed the export to a memoized version of the Header component, ensuring better debugging with a display name. - Maintained overall code clarity and consistency in component structure. * refactor: Transition Components to Use Recoil for State Management - Updated multiple components (AddMultiConvo, TemporaryChat, HeaderNewChat, PresetsMenu, ModelSelectorChatContext) to utilize Recoil for state management, enhancing consistency and performance. - Replaced useChatContext with Recoil selectors and atoms, improving data flow and reducing unnecessary re-renders. - Introduced new selectors for conversation ID and endpoint retrieval, streamlining component logic and enhancing maintainability. - Improved overall code clarity by standardizing state management practices across components. * refactor: Integrate getConversation Callback for Enhanced State Management - Updated multiple components (Mention, ModelSelectorChatContext, ModelSelectorContext, FavoritesList) to utilize a getConversation callback instead of directly accessing conversation state, improving encapsulation and maintainability. - Refactored useSelectMention hook to accept getConversation, streamlining conversation retrieval and enhancing code clarity. - Introduced new Recoil selectors for conversation properties, ensuring consistent state management across components. - Enhanced overall code structure by standardizing the approach to conversation handling, reducing redundancy and improving performance. * refactor: Optimize LiveAnnouncer Context Value with useMemo - Updated the LiveAnnouncer component to utilize useMemo for context value creation, enhancing performance by preventing unnecessary recalculations of the context object. - Improved overall code clarity and maintainability by ensuring that context values are only recomputed when their dependencies change. * refactor: Update AgentPanelSwitch to Use Recoil for Agent ID Management - Refactored AgentPanelSwitch component to utilize Recoil for retrieving the current agent ID, replacing the previous use of chat context. - Improved state management by ensuring the agent ID is derived from Recoil, enhancing code clarity and maintainability. - Adjusted useEffect dependencies to reflect the new state management approach, streamlining the component's logic. * refactor: Enhance useLocalize Hook with useCallback for Improved Performance - Updated the useLocalize hook to utilize useCallback for the translation function, optimizing performance by preventing unnecessary re-creations of the function on each render. - Improved code clarity by ensuring that the translation function is memoized, enhancing maintainability and efficiency in localization handling. * refactor: Rename useCreateConversationAtom to useSetConversationAtom for Clarity - Updated the hook name from useCreateConversationAtom to useSetConversationAtom to better reflect its functionality in managing conversation state. - Introduced a new implementation for setting conversation state, enhancing clarity and maintainability in the codebase. - Adjusted related references in the useNewConvo hook to align with the new naming convention. * refactor: Enhance useKeyDialog Hook with useMemo and useCallback for Improved Performance - Updated the useKeyDialog hook to utilize useMemo for returning the dialog state and handlers, optimizing performance by preventing unnecessary recalculations. - Refactored the onOpenChange function to use useCallback, ensuring it only changes when its dependencies do, enhancing maintainability and clarity in the code. - Improved overall code structure and readability by streamlining the hook's logic and dependencies. * feat: Add useRenderChangeLog Hook for Debugging Render Changes - Introduced a new hook, useRenderChangeLog, that logs changes in tracked values between renders when a debug flag is enabled. - Utilizes useEffect and useRef to track previous values and identify changes, enhancing debugging capabilities for component renders. - Provides detailed console output for initial renders and value changes, improving developer insights during the rendering process. * refactor: Update useSelectAgent Hook for Improved State Management and Performance - Refactored the useSelectAgent hook to utilize useRecoilCallback for fetching conversation data, enhancing state management and performance. - Replaced the use of useChatContext with a more efficient approach, streamlining the logic for selecting agents and updating conversations. - Improved error handling and ensured asynchronous operations are properly awaited, enhancing reliability in agent selection and data fetching processes. * refactor: Optimize useDefaultConvo Hook with useCallback for Improved Performance - Refactored the getDefaultConversation function within the useDefaultConvo hook to utilize useCallback, enhancing performance by memoizing the function and preventing unnecessary re-creations on re-renders. - Streamlined the logic for cleaning input and output in the conversation object, improving code clarity and maintainability. - Ensured that dependencies for useCallback are correctly set, enhancing the reliability of the hook's behavior. * refactor: Optimize Agent Components with Memoization for Improved Performance - Refactored multiple agent-related components (AgentAvatar, AgentCategorySelector, AgentSelect, DeleteButton, FileContext, FileSearch, Files) to utilize React.memo for memoization, enhancing rendering performance by preventing unnecessary re-renders. - Updated the FileRow component to make setFilesLoading optional, improving flexibility in file handling. - Streamlined component logic and improved maintainability by ensuring that props are compared efficiently in memoized components. * refactor: Enhance File Handling and Agent Components for Improved Performance - Refactored multiple components (DeleteButton, FileContext, FileSearch, Files) to utilize new file handling hooks that separate chat context from file operations, improving performance and maintainability. - Introduced useFileHandlingNoChatContext and useSharePointFileHandlingNoChatContext hooks to streamline file handling logic, enhancing flexibility in managing file states. - Updated DeleteButton to improve conversation state management and ensure proper handling of agent deletions, enhancing user experience. - Optimized imports and component structure for better clarity and organization across the affected files. * refactor: Enhance useRenderChangeLog Hook with Improved Type Safety and Documentation - Updated the useRenderChangeLog hook to improve type safety by specifying the value types as string, number, boolean, null, or undefined. - Enhanced documentation to clarify usage and enablement of the debug feature, ensuring better developer insights during rendering. - Added a production check to prevent logging in production builds, optimizing performance and maintaining clean console output. * chore: imports * refactor: Replace useRecoilCallback with useGetConversation Hook for Improved Clarity and Performance - Refactored multiple components (AddMultiConvo, ModelSelectorChatContext, FavoritesList, useSelectAgent, usePresets) to utilize the new useGetConversation hook, enhancing clarity and reducing complexity by eliminating the use of useRecoilCallback. - Streamlined conversation retrieval logic across components, improving maintainability and performance. - Updated imports and component structure for better organization and readability. * refactor: Enhance Memoization in DeleteButton Component for Improved Performance - Updated the memoization logic in the DeleteButton component to include a comparison for the setCurrentAgentId prop, ensuring more efficient re-renders. - This change improves performance by preventing unnecessary updates when the agent ID and current agent ID remain unchanged. * chore: fix test * refactor: Improve Memoization Logic in AgentSelect Component - Updated the memoization comparison in the AgentSelect component to directly compare agentQuery.data objects, enhancing performance by ensuring accurate re-renders. - Refactored the useCreateConversationAtom function to streamline the logic for updating conversation keys, improving clarity and maintainability. * refactor: Simplify State Management in DeleteButton Component - Removed unnecessary setConversationOption function, streamlining the logic for updating conversation state after agent deletion. - Updated the conversation state directly within the deleteAgent mutation, improving clarity and maintainability of the component. - Refactored conversationByKeySelector to directly reference conversationByIndex, enhancing performance and reducing complexity in state retrieval. * refactor: Remove Unused Conversation Prop from Mention Component - Eliminated the conversation prop from the Mention component, simplifying its interface and reducing unnecessary dependencies. - Updated the ChatForm component to reflect this change, enhancing clarity and maintainability of the codebase. - Introduced useGetConversation hook for improved conversation retrieval logic, streamlining the component's functionality. * refactor: Simplify File Handling State Management Across Components - Removed the unused setFilesLoading function from FileContext, FileSearch, and Files components, streamlining the file handling state management. - Updated the FileHandlingState type to make setFilesLoading optional, enhancing flexibility in file operations. - Improved memoization logic by directly referencing necessary state properties, ensuring better performance and maintainability. * refactor: Update ArtifactsContext for Improved State Management - Replaced the useChatContext hook with direct Recoil state retrieval for isSubmitting, latestMessage, and conversationId, simplifying the context provider's logic. - Enhanced memoization by ensuring relevant state properties are directly referenced, improving performance and maintainability. - Streamlined the context value creation to reflect the updated state management approach. * refactor: Adjust Memoization Logic in ArtifactsContext for Consistency - Updated the memoization logic in the ArtifactsProvider to ensure the messageId is consistently referenced, improving clarity and maintainability. - This change enhances the performance of the context provider by ensuring all relevant properties are included in the memoization dependencies.	2026-03-06 00:03:32 -05:00
Dustin Healy	93560f5f5b	👥 fix: Duplicate Indicators for Model Specs (#11946) ... * fix: key checkmark by endpoint , not just model name * fix: model spec endpoint collision for checkmark indicators * chore: fix formatting * refactor: move isSelected into EndpointModelItem, fix SearchResults, add tests Address PR review feedback: - Move isSelected computation from renderEndpointModels into EndpointModelItem via useModelSelectorContext, eliminating fragile positional params - Add !selectedSpec guard to SearchResults.tsx for both model and endpoint checks - Add unit tests for EndpointModelItem selection logic * test: update EndpointModelItem tests and add SearchResults tests - Update EndpointModelItem tests to replace null modelSpec with an empty string for consistency in rendering logic. - Introduce new SearchResults tests to validate selection behavior based on endpoint and model matching, including scenarios with and without active specs. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-03-02 21:48:55 -05:00
Daniel Lew	c0236b4ba7	🔍 fix: Correct Conversations ARIA Role and Increase Placeholder Contrast (#12021) ... - Set Conversations list role as "rowgroup", which better describes what is actually going on than "row". - Increased contrast on placeholder text in ChatForm.	2026-03-02 21:25:48 -05:00
Daniel Lew	8f7579c2f5	🫳 fix: Restore Background on Drag and Drop Overlay (#12017) ... The drag & drop background was practically translucent, which made it hard to see the rest of the overlay (especially on light mode). Now, we no longer make the background translucent, so you can see the overlay clearly.	2026-03-02 21:08:58 -05:00
Danny Avila	44dbbd5328	♿ a11y: Hide Collapsed Thinking Content From Screen Readers (#11927) ... * fix(a11y): hide collapsed thinking content from screen readers and link toggle to controlled region The thinking/reasoning toggle button visually collapsed content using a CSS grid animation (gridTemplateRows: 0fr + overflow-hidden), but the content remained in the DOM and fully accessible to screen readers, cluttering the reading flow for assistive technology users. - Add aria-hidden={!isExpanded} to the collapsible content region in both the legacy Thinking component and the modern Reasoning component, so screen readers skip collapsed thoughts entirely - Add role="region" and a unique id (via useId) to each collapsible content div, giving it a semantic landmark for assistive technology - Add contentId prop to the shared ThinkingButton and wire it to aria-controls on the toggle button, establishing an explicit relationship between the button and the region it expands/collapses - aria-expanded was already present on the button; combined with aria-controls, screen readers can now fully convey the toggle state and its target * fix(a11y): add aria-label to collapsible content regions in Thinking and Reasoning components Enhanced accessibility by adding aria-label attributes to the collapsible content regions in both the Thinking and Reasoning components. This change ensures that screen readers can provide better context for users navigating through the content. * fix(a11y): update roles and aria attributes in Thinking and Reasoning components Changed role from "region" to "group" for collapsible content areas in both Thinking and Reasoning components to better align with ARIA practices. Updated aria-hidden to handle undefined values correctly and ensured contentId is passed to relevant components for improved accessibility and screen reader support.	2026-02-24 20:59:56 -05:00
Dustin Healy	1d0a4c501f	🪨 feat: AWS Bedrock Document Uploads (#11912) ... * feat: add aws bedrock upload to provider support * chore: address copilot comments * feat: add shared Bedrock document format types and MIME mapping Bedrock Converse API accepts 9 document formats beyond PDF. Add BedrockDocumentFormat union type, MIME-to-format mapping, and helpers in data-provider so both client and backend can reference them. * refactor: generalize Bedrock PDF validation to support all document types Rename validateBedrockPdf to validateBedrockDocument with MIME-aware logic: 4.5MB hard limit applies to all types, PDF header check only runs for application/pdf. Adds test coverage for non-PDF documents. * feat: support all Bedrock document formats in encoding pipeline Widen file type gates to accept csv, doc, docx, xls, xlsx, html, txt, md for Bedrock. Uses shared MIME-to-format map instead of hardcoded 'pdf'. Other providers' PDF-only paths remain unchanged. * feat: expand Bedrock file upload UI to accept all document types Add 'image_document_extended' upload type for Bedrock with accept filters for all 9 supported formats. Update drag-and-drop validation to use isBedrockDocumentType helper. * fix: route Bedrock document types through provider pipeline	2026-02-23 22:32:44 -05:00
Pavel Fediushin	dbf8cd40d3	🪹 fix: Prevent whitespace-only Chat input Submissions (#11838) ... fix(input): normalize chat input text before submit Trim input text before checking if empty to show submit button as disabled	2026-02-17 20:53:22 -05:00
Danny Avila	10685fca9f	🗂️ refactor: Artifacts via Model Specs & Scope Badge Persistence by Spec Context (#11796) ... * 🔧 refactor: Simplify MCP selection logic in useMCPSelect hook - Removed redundant useEffect for setting ephemeral agent when MCP values change. - Integrated ephemeral agent update directly into the MCP value change handler, improving code clarity and reducing unnecessary re-renders. - Updated dependencies in the effect hook to ensure proper state management. Why Effect 2 Was Added (PR #9528) PR #9528 was a refactor that migrated MCP state from useLocalStorage hooks to Jotai atomWithStorage. Before that PR, useLocalStorage handled bidirectional sync between localStorage and Recoil in one abstraction. After the migration, the two useEffect hooks were introduced to bridge Jotai ↔ Recoil: - Effect 1 (Recoil → Jotai): When ephemeralAgent.mcp changes externally, update the Jotai atom (which drives the UI dropdown) - Effect 2 (Jotai → Recoil): When mcpValues changes, push it back to ephemeralAgent.mcp (which is read at submission time) Effect 2 was needed because in that PR's design, setMCPValues only wrote to Jotai — it never touched Recoil. Effect 2 was the bridge to propagate user selections into the ephemeral agent. Why Removing It Is Correct All user-initiated MCP changes go through setMCPValues. The callers are in useMCPServerManager: toggleServerSelection, batchToggleServers, OAuth success callbacks, and access revocation. Our change puts the Recoil write directly in that callback, so all these paths are covered. All external changes go through Recoil, handled by Effect 1 (kept). Model spec application (applyModelSpecEphemeralAgent), agent template application after submission, and BadgeRowContext initialization all write directly to ephemeralAgentByConvoId. Effect 1 watches ephemeralAgent?.mcp and syncs those into the Jotai atom for the UI. There is no code path where mcpValues changes without going through setMCPValues or Effect 1. The only other source is atomWithStorage's getOnInit reading from localStorage on mount — that's just restoring persisted state and is harmless (overwritten by Effect 1 if the ephemeral agent has values). Additional Benefits - Eliminates the race condition. Effect 2 fired on mount with Jotai's stale default ([]), overwriting ephemeralAgent.mcp that had been set by a model spec. Our change prevents that because the imperative sync only fires on explicit user action. - Eliminates infinite loop risk. The old bidirectional two-effect approach relied on isEqual/JSON.stringify checks to break cycles. The new unidirectional-reactive (Effect 1) + imperative (setMCPValues) approach has no such risk. - Effect 1's enhancements are preserved. The mcp_clear sentinel handling and configuredServers filtering (both added after PR #9528) continue to work correctly. * ✨ feat: Add artifacts support to model specifications and ephemeral agents - Introduced `artifacts` property in the model specification and ephemeral agent types, allowing for string or boolean values. - Updated `applyModelSpecEphemeralAgent` to handle artifacts, defaulting to 'default' if true or an empty string if not specified. - Enhanced localStorage handling to store artifacts alongside other agent properties, improving state management for ephemeral agents. * 🔧 refactor: Update BadgeRowContext to improve localStorage handling - Modified the logic to only apply values from localStorage that were actually stored, preventing unnecessary overrides of the ephemeral agent. - Simplified the setting of ephemeral agent values by directly using initialValues, enhancing code clarity and maintainability. * 🔧 refactor: Enhance ephemeral agent handling in BadgeRowContext and model spec application - Updated BadgeRowContext to apply localStorage values only for tools not already set in ephemeralAgent, improving state management. - Modified useApplyModelSpecEffects to reset the ephemeral agent when no spec is provided but specs are configured, ensuring localStorage defaults are applied correctly. - Streamlined the logic for applying model spec properties, enhancing clarity and maintainability. * refactor: Isolate spec and non-spec tool/MCP state with environment-keyed storage Spec tool state (badges, MCP) and non-spec user preferences previously shared conversation-keyed localStorage, causing cross-pollination when switching between spec and non-spec models. This introduces environment-keyed storage so each context maintains independent persisted state. Key changes: - Spec active: no localStorage persistence — admin config always applied fresh - Non-spec (with specs configured): tool/MCP state persisted to __defaults__ key - No specs configured: zero behavior change (conversation-keyed storage) - Per-conversation isolation preserved for existing conversations - Dual-write on user interaction updates both conversation and environment keys - Remove mcp_clear sentinel in favor of null ephemeral agent reset * refactor: Enhance ephemeral agent initialization and MCP handling in BadgeRowContext and useMCPSelect - Updated BadgeRowContext to clarify the handling of localStorage values for ephemeral agents, ensuring proper initialization based on conversation state. - Improved useMCPSelect tests to accurately reflect behavior when setting empty MCP values, ensuring the visual selection clears as expected. - Introduced environment-keyed storage logic to maintain independent state for spec and non-spec contexts, enhancing user experience during context switching. * test: Add comprehensive tests for useToolToggle and applyModelSpecEphemeralAgent hooks - Introduced unit tests for the useToolToggle hook, covering dual-write behavior in non-spec mode and per-conversation isolation. - Added tests for applyModelSpecEphemeralAgent, ensuring correct application of model specifications and user overrides from localStorage. - Enhanced test coverage for ephemeral agent state management during conversation transitions, validating expected behaviors for both new and existing conversations.	2026-02-14 13:56:50 -05:00
Danny Avila	bf1f2f4313	🗨️ refactor: Better Whitespace handling in Chat Message rendering (#11791) ... - Updated the rendering logic in the Part component to handle whitespace-only text more effectively. - Introduced a placeholder for whitespace-only last parts during streaming to enhance user experience. - Ensured non-last whitespace-only parts are skipped to avoid rendering empty containers, improving layout stability.	2026-02-14 09:41:10 -05:00
Danny Avila	6cc6ee3207	📳 refactor: Optimize Model Selector (#11787) ... - Introduced a new `EndpointMenuContent` component to lazily render endpoint submenu content, improving performance by deferring expensive model-list rendering until the submenu is mounted. - Refactored `EndpointItem` to utilize the new component, simplifying the code and enhancing readability. - Removed redundant filtering logic and model specifications handling from `EndpointItem`, centralizing it within `EndpointMenuContent` for better maintainability.	2026-02-13 22:46:14 -05:00
Kashan Samad	3803a76095	feat: Toggle Web Search functionality and integrate with BadgeRow context	2026-02-13 16:00:21 +01:00
Danny Avila	599f4a11f1	🛡️ fix: Secure MCP/Actions OAuth Flows, Resolve Race Condition & Tool Cache Cleanup (#11756) ... * 🔧 fix: Update OAuth error message for clarity - Changed the default error message in the OAuth error route from 'Unknown error' to 'Unknown OAuth error' to provide clearer context during authentication failures. * 🔒 feat: Enhance OAuth flow with CSRF protection and session management - Implemented CSRF protection for OAuth flows by introducing `generateOAuthCsrfToken`, `setOAuthCsrfCookie`, and `validateOAuthCsrf` functions. - Added session management for OAuth with `setOAuthSession` and `validateOAuthSession` middleware. - Updated routes to bind CSRF tokens for MCP and action OAuth flows, ensuring secure authentication. - Enhanced tests to validate CSRF handling and session management in OAuth processes. * 🔧 refactor: Invalidate cached tools after user plugin disconnection - Added a call to `invalidateCachedTools` in the `updateUserPluginsController` to ensure that cached tools are refreshed when a user disconnects from an MCP server after a plugin authentication update. This change improves the accuracy of tool data for users. * chore: imports order * fix: domain separator regex usage in ToolService - Moved the declaration of `domainSeparatorRegex` to avoid redundancy in the `loadActionToolsForExecution` function, improving code clarity and performance. * chore: OAuth flow error handling and CSRF token generation - Enhanced the OAuth callback route to validate the flow ID format, ensuring proper error handling for invalid states. - Updated the CSRF token generation function to require a JWT secret, throwing an error if not provided, which improves security and clarity in token generation. - Adjusted tests to reflect changes in flow ID handling and ensure robust validation across various scenarios.	2026-02-12 14:22:05 -05:00
Danny Avila	4ddaab68a1	🔧 fix: Update z-index for ImagePreview modal components (#11714) ... - Increased z-index values for the DialogPrimitive overlay and content in ImagePreview.tsx to ensure proper stacking order and visibility of modal elements. This change enhances the user experience by preventing modal content from being obscured by other UI elements.	2026-02-10 15:08:17 -05:00
Sean DMR	8da3c38780	🪟 fix: Update Link Target to Open in Separate Tabs (#11669) ... `_new` is not a recognized keyword for the `target` attribute. While browsers treat it as a named window, `_blank` is the standard value for opening links in a new tab/window.	2026-02-10 13:28:18 -05:00
Dustin Healy	46624798b6	🗣 fix: Add Various State Change Announcements (#11495) ... * fix: Agent Builder Reset button announcements * fix: special variables announcements * fix: model select announcements * fix: prompt deletion announcement * refactor: encapsulate model display name logic * chore: address comments * chore: re-order i18n strings	2026-02-05 16:42:15 +01:00
Danny Avila	e89e514fcb	📱 fix: Mention Touch UX and MCP Tool UI Consistency (#11627) ... * refactor: Reorganize imports in MCPTools component - Updated import statements in MCPTools.tsx for improved clarity and maintainability. - Moved `useAgentPanelContext` import above others and adjusted the order of `PermissionTypes` and `Permissions` imports to enhance readability. * chore: imports * refactor: Update MCPToolItem component props and styles - Added new props: onToggleDefer, onToggleSelect, and onToggleProgrammatic for improved functionality. - Adjusted class names for DropdownMenuLabel and text spans to enhance visual consistency and clarity. - Increased width of DropdownMenuContent for better layout. * refactor: Update DropdownMenu styles for improved visual consistency - Changed background color of DropdownMenuContent and DropdownMenuSubContent from secondary to primary for better alignment with design standards. - Updated text color to ensure readability against the new background, enhancing overall user experience. * refactor: Update Mention component styles and interaction handling - Increased ROW_HEIGHT in Mention and PromptsCommand components for improved layout consistency. - Enhanced MentionItem component with touch event handling to improve mobile interaction experience. - Updated button styles to ensure better visual alignment and responsiveness. * refactor: Enhance MentionItem component event handling and button attributes - Updated the onClick prop type in MentionItem to support both mouse and touch events, improving mobile interaction. - Added a button type attribute for better accessibility and compliance with HTML standards. - Refined event handling to ensure consistent behavior across different input methods. * refactor: Add button type attribute to MentionItem for improved accessibility - Added a type="button" attribute to the MentionItem component to enhance accessibility and compliance with HTML standards. - This change ensures better interaction behavior across different input methods. * refactor: Simplify MentionItem event handling for improved clarity - Removed touch event handling from the MentionItem component, streamlining the onClick prop to only accept mouse events. - This change simplifies the interaction logic, enhancing maintainability while retaining functionality for mouse interactions.	2026-02-04 15:22:32 +01:00
Danny Avila	75c02a1a18	🗂️ feat: Better Persistence for Code Execution Files Between Sessions (#11362) ... * refactor: process code output files for re-use (WIP) * feat: file attachment handling with additional metadata for downloads * refactor: Update directory path logic for local file saving based on basePath * refactor: file attachment handling to support TFile type and improve data merging logic * feat: thread filtering of code-generated files - Introduced parentMessageId parameter in addedConvo and initialize functions to enhance thread management. - Updated related methods to utilize parentMessageId for retrieving messages and filtering code-generated files by conversation threads. - Enhanced type definitions to include parentMessageId in relevant interfaces for better clarity and usage. * chore: imports/params ordering * feat: update file model to use messageId for filtering and processing - Changed references from 'message' to 'messageId' in file-related methods for consistency. - Added messageId field to the file schema and updated related types. - Enhanced file processing logic to accommodate the new messageId structure. * feat: enhance file retrieval methods to support user-uploaded execute_code files - Added a new method `getUserCodeFiles` to retrieve user-uploaded execute_code files, excluding code-generated files. - Updated existing file retrieval methods to improve filtering logic and handle edge cases. - Enhanced thread data extraction to collect both message IDs and file IDs efficiently. - Integrated `getUserCodeFiles` into relevant endpoints for better file management in conversations. * chore: update @librechat/agents package version to 3.0.78 in package-lock.json and related package.json files * refactor: file processing and retrieval logic - Added a fallback mechanism for download URLs when files exceed size limits or cannot be processed locally. - Implemented a deduplication strategy for code-generated files based on conversationId and filename to optimize storage. - Updated file retrieval methods to ensure proper filtering by messageIds, preventing orphaned files from being included. - Introduced comprehensive tests for new thread data extraction functionality, covering edge cases and performance considerations. * fix: improve file retrieval tests and handling of optional properties - Updated tests to safely access optional properties using non-null assertions. - Modified test descriptions for clarity regarding the exclusion of execute_code files. - Ensured that the retrieval logic correctly reflects the expected outcomes for file queries. * test: add comprehensive unit tests for processCodeOutput functionality - Introduced a new test suite for the processCodeOutput function, covering various scenarios including file retrieval, creation, and processing for both image and non-image files. - Implemented mocks for dependencies such as axios, logger, and file models to isolate tests and ensure reliable outcomes. - Validated behavior for existing files, new file creation, and error handling, including size limits and fallback mechanisms. - Enhanced test coverage for metadata handling and usage increment logic, ensuring robust verification of file processing outcomes. * test: enhance file size limit enforcement in processCodeOutput tests - Introduced a configurable file size limit for tests to improve flexibility and coverage. - Mocked the `librechat-data-provider` to allow dynamic adjustment of file size limits during tests. - Updated the file size limit enforcement test to validate behavior when files exceed specified limits, ensuring proper fallback to download URLs. - Reset file size limit after tests to maintain isolation for subsequent test cases.	2026-01-28 17:44:32 -05:00
Danny Avila	7c9c7e530b	⏲️ feat: Defer Loading MCP Tools (#11270) ... * WIP: code ptc * refactor: tool classification and calling logic * 🔧 fix: Update @librechat/agents dependency to version 3.0.68 * chore: import order and correct renamed tool name for tool search * refactor: streamline tool classification logic for local and programmatic tools * feat: add per-tool configuration options for agents, including deferred loading and allowed callers - Introduced `tool_options` in agent forms to manage tool behavior. - Updated tool classification logic to prioritize agent-level configurations. - Enhanced UI components to support tool deferral functionality. - Added localization strings for new tool options and actions. * feat: enhance agent schema with per-tool options for configuration - Added `tool_options` schema to support per-tool configurations, including `defer_loading` and `allowed_callers`. - Updated agent data model to incorporate new tool options, ensuring flexibility in tool behavior management. - Modified type definitions to reflect the new `tool_options` structure for agents. * feat: add tool_options parameter to loadTools and initializeAgent for enhanced agent configuration * chore: update @librechat/agents dependency to version 3.0.71 and enhance agent tool loading logic - Updated the @librechat/agents package to version 3.0.71 across multiple files. - Added support for handling deferred loading of tools in agent initialization and execution processes. - Improved the extraction of discovered tools from message history to optimize tool loading behavior. * chore: update @librechat/agents dependency to version 3.0.72 * chore: update @librechat/agents dependency to version 3.0.75 * refactor: simplify tool defer loading logic in MCPTool component - Removed local state management for deferred tools, relying on form state instead. - Updated related functions to directly use form values for checking and toggling defer loading. - Cleaned up code by eliminating unnecessary optimistic updates and local state dependencies. * chore: remove deprecated localization strings for tool deferral in translation.json - Eliminated unused strings related to deferred loading descriptions in the English translation file. - Streamlined localization to reflect recent changes in tool loading logic. * refactor: improve tool defer loading handling in MCPTool component - Enhanced the logic for managing deferred loading of tools by simplifying the update process for tool options. - Ensured that the state reflects the correct loading behavior based on the new deferred loading conditions. - Cleaned up the code to remove unnecessary complexity in handling tool options. * refactor: update agent mocks in callbacks test to use actual implementations - Modified the agent mocks in the callbacks test to include actual implementations from the @librechat/agents module. - This change enhances the accuracy of the tests by ensuring they reflect the real behavior of the agent functions.	2026-01-28 17:44:30 -05:00
Dustin Healy	13cea97c9b	🔗 feat: More Accessible Link Behaviors and Minor UI Improvements (#11549) ... * fix: accessibility issues with links and link descriptions + minor ui tweaks * fix: link accessibility in archived chats table * fix: remove open in new tab behavior for other footer links * chore: remove unused translation string * style: formatting * refactor: rename searchState to searchStore for clarity * chore: Reorganize imports and state variables in SharedLinks * chore: re-organize imports/hooks --------- Co-authored-by: Danny Avila <danacordially@gmail.com> Co-authored-by: Danny Avila <danny@librechat.ai>	2026-01-28 12:15:43 -05:00
Dustin Healy	dea246934e	😶‍🌫 feat: Better Blur on Collapsed Chat Input (#11464)	2026-01-21 13:54:20 -05:00
Dustin Healy	9d612715a5	✅️ feat: Accessible Model Selection Icons and Announcements (#11454) ... * feat: more accessible model selection ui and announcements * chore: formatting	2026-01-21 13:53:10 -05:00
Dustin Healy	12ec64b988	🔖 fix: Announce Bookmark Selection State (#11450) ... * fix: bookmarks announce selection state * chore: address Copilot comments	2026-01-21 13:49:50 -05:00
Danny Avila	c30afb8b68	🚏 chore: Remove Resumable Stream Toggle (#11258) ... * 🚏 chore: Remove Resumable Stream Toggle - Removed the `useResumableStreamToggle` hook and its associated logic from the ChatView component. - Updated Conversations and useAdaptiveSSE hooks to determine resumable stream status based on the endpoint type. - Cleaned up settings by removing the `resumableStreams` state from the store and its related localization strings. * 🔧 refactor: Simplify Active Jobs Logic in Conversations Component - Removed the endpoint type checks and associated logic for resumable streams in the Conversations component. - Updated the `useActiveJobs` hook call to no longer depend on resumable stream status, streamlining the data fetching process.	2026-01-07 20:37:35 -05:00
Danny Avila	d21dfba2ac	🏞️ fix: Image Preview Refactor with Accessibility Enhancements (#11217) ... * 🔧 fix: Prevent race condition by saving user messages before final event in ResumableAgentController - Updated the ResumableAgentController to save user messages prior to sending the final event. This change addresses a potential race condition where the client might refetch data before the database is updated. - Removed redundant message saving logic that was previously located after the final event handling, ensuring a more reliable message processing flow. * style: improve image preview dialogs with ChatGPT-like UX and accessibility Refactored image preview dialogs (DialogImage and ImagePreview) to provide a cleaner, more intuitive user experience similar to ChatGPT's implementation. ## DialogImage.tsx (generated images) - Replaced OGDialog/OGDialogContent with direct Radix Dialog primitives for finer control over behavior - Full-screen dark overlay (bg-black/90) that closes on click outside image - Restructured component so all interactive elements (close, download, details panel buttons) are inside DialogPrimitive.Content for proper focus trap and keyboard navigation - Added onOpenAutoFocus to focus close button when dialog opens - Added onCloseAutoFocus to return focus to trigger element on close - Added triggerRef prop to enable focus restoration - Removed animate-in/animate-out classes that caused stuttering on open - Changed transition-all to transition-[margin] to prevent animation jank - Added proper TypeScript types for component props ## ImagePreview.tsx (uploaded file thumbnails) - Same Radix Dialog primitive refactor for consistent behavior - Click-outside-to-close functionality - Proper focus management with closeButtonRef and triggerRef - Made button the container element to prevent focus ring clipping - Added focus-visible ring styling for keyboard navigation visibility ## Image.tsx (image display component) - Restructured so button is the outer container instead of being nested inside a div with overflow-hidden (which was clipping focus ring) - Added visible focus-visible:ring styling with ring-offset - Added aria-haspopup="dialog" for screen reader context - Added triggerRef and passed to DialogImage for focus restoration ## Accessibility improvements - Keyboard navigation now works properly (Tab cycles through buttons) - Escape key closes dialog (or resets zoom if zoomed in) - Focus is trapped within dialog when open - Focus returns to trigger element when dialog closes - Visible focus indicators on image buttons when focused via keyboard - Proper ARIA attributes (aria-label, aria-haspopup, aria-hidden) ## UX improvements - Click anywhere outside the image to close (not just specific regions) - No more weird scroll/navigation issues - Instant dialog open without stuttering animations - Clean, minimal overlay without container/header chrome * refactor: Improve click handling in image preview dialogs Updated the click handling logic in ImagePreview and DialogImage components to ensure that the dialog only closes when clicking directly on the overlay or content background, enhancing user experience by preventing unintended closures when interacting with child elements. Additionally, clarified comments to reflect the new behavior. * chore: import order	2026-01-05 16:31:35 -05:00
Danny Avila	b7db0dd9bc	📎 fix: Allow Message Attachments for Users with Viewer Permission on Agents (#11210) ... * fix: allow message attachments for users with viewer permission on agents Fixes regression introduced by the agent file upload access control fix (SBA-ADV-20251204-01). The original fix was too restrictive - it blocked ALL file uploads with agent_id + tool_resource, including temporary message attachments used during chat. ## Problem Users with VIEWER permission on a shared agent could not attach files to their chat messages. The permission check blocked any upload request that included both `agent_id` and `tool_resource`, but message attachments legitimately include both fields since files need to be added to the agent's context for processing within that conversation. * test: Add permission check for file uploads with message_file set to false Introduced a new test case to ensure that file uploads are denied when the `message_file` flag is false, reinforcing permission checks for users with VIEW access on agents. This change enhances security by preventing unauthorized file uploads while maintaining functionality for legitimate message attachments. * fix: Update BadgeRow to handle undefined endpoint in ChatForm Modified the `showEphemeralBadges` prop in the `BadgeRow` component to ensure it correctly handles cases where the `endpoint` is undefined. This change improves the robustness of the chat input functionality by preventing potential errors related to endpoint checks.	2026-01-05 13:44:59 -05:00
Joseph Licata	200098d992	🍌 feat: Gemini Image Generation Tool (Nano Banana) (#10676) ... * Added fully functioning Agent Tool supporting Google's Nano Banana * 🔧 refactor: Update Google credentials handling in GeminiImageGen.js * Refactored the credentials path to follow a consistent pattern with other Google service integrations, allowing for an environment variable override. * Updated documentation in README-GeminiNanoBanana.md to reflect the new credentials handling approach and removed references to hardcoded paths. * 🛠️ refactor: Remove unnecessary whitespace in handleTools.js * 🔧 feat: Update Gemini Image Generation Tool - Bump @google/genai package version to ^1.19.0 for improved functionality. - Refactor GeminiImageGen to createGeminiImageTool for better clarity and consistency. - Enhance manifest.json for Gemini Image Tools with updated descriptions and icon. - Add SVG icon for Gemini Image Tools. - Implement progress tracking for Gemini image generation in the UI. - Introduce new toolkit and context handling for image generation tools. This update improves the Gemini image generation capabilities and user experience. * 🗑️ chore: Remove outdated Gemini image generation PNG and update SVG icon - Deleted the obsolete PNG file for Gemini image generation. - Updated the SVG icon with a new design featuring a gradient and shadow effect, enhancing visual appeal and consistency. * fix: ESLint formatting and unused variable in GeminiImageGen * fix: Update default model to gemini-2.5-flash-image * ✨ feat: Enhance Gemini Image Generation Configuration - Updated .env.example to include new environment variables for Google Cloud region, service account configuration, and Gemini API key options. - Modified GeminiImageGen.js to support both user-provided API keys and Vertex AI service accounts, improving flexibility in client initialization. - Updated manifest.json to reflect changes in authentication methods for the Gemini Image Tools. - Bumped @google/genai package version to 1.19.0 in package-lock.json for compatibility with new features. * 🔧 fix: Format Default Service Key Path in GeminiImageGen.js - Adjusted the return statement in getDefaultServiceKeyPath function for improved readability by formatting it across multiple lines. This change enhances code clarity without altering functionality. * ✨ feat: Enhance Gemini Image Generation with Token Usage Tracking - Added `recordTokenUsage` function to track token usage for balance management. - Integrated token recording into the image generation process. - Updated Gemini image generation tool to accept optional `aspectRatio` and `imageSize` parameters for improved image customization. - Updated token values for new Gemini models in the transaction model. - Improved documentation for image generation tool descriptions and parameters. * ✨ feat: Add new Gemini models for image generation token limits - Introduced token limits for 'gemini-3-pro-image' and 'gemini-2.5-flash-image' models. - Updated token values to enhance the Gemini image generation capabilities. * 🔧 fix: Update Google Service Key Path for Consistency in Initialization (#11001) * 🔧 refactor: Update GeminiImageGen for improved file handling and path resolution - Changed the default service key path to use process.cwd() for better compatibility. - Replaced synchronous file system operations with asynchronous promises for mkdir and writeFile, enhancing performance and error handling. - Added error handling for credential file access to prevent crashes when the file does not exist. * 🔧 refactor: Update GeminiImageGen to streamline API key handling - Refactored API key checks to improve clarity and consistency. - Removed redundant checks for user-provided keys, enhancing code readability. - Ensured proper logging for API key usage across different configurations. * 🔧 fix: Update GeminiImageGen to handle imageSize support conditionally - Added a check to ensure imageSize is only applied if the gemini model does not include 'gemini-2.5-flash-image', improving compatibility. - Enhanced the logic for setting imageConfig to prevent potential issues with unsupported configurations. * 🔧 refactor: Simplify local storage condition in createGeminiImageTool function * 🔧 feat: Enhance image format handling in GeminiImageGen with conversion support * 🔧 refactor: Streamline API key initialization in GeminiImageGen - Simplified the handling of API keys by removing redundant checks for user-provided keys. - Updated logging to reflect the new priority order for API key usage, enhancing clarity and consistency. - Improved code readability by consolidating key retrieval logic. --------- Co-authored-by: Dev Bhanushali <dev.bhanushali@hingehealth.com> Co-authored-by: Danny Avila <danny@librechat.ai>	2026-01-03 11:26:46 -05:00
Danny Avila	b1a2b96276	🪜 fix: Layering Conflicts and UX Polish (#11177) ... * 🔧 refactor: Update z-index values for popover components - Reduced z-index from 50 to 40 across various popover components including Artifacts, ArtifactsSubMenu, MCPSubMenu, CustomMenu, and others to ensure consistent layering and improve UI behavior. - Adjusted related CSS styles in Dropdown.css and DropdownMenu.tsx to align with the new z-index values, enhancing overall component visibility and interaction. * chore: remove string template for className concatenation in CustomMenu component - Improved the readability of the className prop in the CustomMenu component by restructuring the concatenation of class names. This change enhances maintainability and clarity in the styling logic. * refactor: Simplify button visibility logic in SiblingHeader component - Updated the button rendering logic in the SiblingHeader component to improve clarity and maintainability. The button is now always rendered, with its visibility controlled by the disabled state based on messageId, agentId, and submission status, enhancing user experience during interactions. * refactor: Update shift key handling in Conversation and ConvoOptions components - Modified the handling of the `isShiftHeld` state in both the Conversation and ConvoOptions components to improve clarity and functionality. The logic now ensures that the shift key state is accurately reflected based on the active conversation status, enhancing user interaction during conversations. - Cleaned up imports in ConvoOptions by removing the unused `useShiftKey` hook, streamlining the component's dependencies. * refactor: Improve Escape key handling in OriginalDialog component - Updated the Escape key handling logic to prevent closing the dialog when a tooltip or dropdown menu has focus. This change enhances accessibility by ensuring compliance with WCAG standards for dismissable tooltips. - Simplified the focus checking mechanism by directly assessing the active element within dropdown menus and tooltips, improving code clarity and maintainability. * chore: imports * refactor: Enhance Escape key handling in OriginalDialog component - Updated the Escape key handling logic to prevent closing the dialog when a trigger with an open popover is focused. This change improves accessibility and user experience by ensuring that the dialog remains open during interactions with popovers, dropdowns, and listboxes. - Simplified the focus checking mechanism to include additional roles, enhancing the clarity and maintainability of the code. * refactor: Add dropdownClassName prop to FilterPrompts component - Enhanced the FilterPrompts component by introducing a new dropdownClassName prop, allowing for customizable styling of the dropdown element. - Updated the PromptsView component to utilize the new prop, improving the flexibility of the FilterPrompts integration within the UI. * refactor: Clean up imports and remove unused code in DashBreadcrumb component - Streamlined the DashBreadcrumb component by removing commented-out imports and unused code, enhancing clarity and maintainability. - Adjusted the import order for better organization and readability. * refactor: Update z-index handling in Dropdown component - Removed the z-index property from Dropdown.css to streamline styling. - Adjusted the className in Dropdown.tsx to include a new z-40 class for consistent z-index management, enhancing UI layering and interaction. * refactor: Enhance file type acceptance in AttachFileMenu and useDragHelpers - Updated the AttachFileMenu component to accept additional image formats (.heif, .heic) alongside existing types, improving file upload flexibility. - Modified the useDragHelpers hook to utilize inferMimeType for better file type detection, ensuring accurate handling of dragged files. * refactor: Enhance FloatingThinkingBar with copy functionality - Added a copy button to the FloatingThinkingBar component, allowing users to copy thoughts to the clipboard. - Updated the tooltip descriptions for the expand/collapse and copy actions to improve user experience. - Cleaned up imports and adjusted prop types for better clarity and maintainability. * refactor: Enhance RunCode component with icon-only mode - Updated the RunCode component to accept an `iconOnly` prop, allowing for a simplified button display that shows only the icon when desired. - Adjusted the button rendering logic to improve user experience and maintainability. - Cleaned up imports and ensured consistent styling in the FloatingCodeBar component.	2026-01-02 11:43:03 -05:00
Joel Hirzel	131eab7bff	🎨 fix: Use presentation background for header buttons (#11147)	2025-12-29 21:27:50 -05:00
Danny Avila	eb1a59d2fd	🧠 fix: Messages View Height Expansion from #11142 & improve Thinking/Code-Block UX (#11148) ... This commit fixes the messages view height auto-expansion issue introduced in PR #11142 and improves the UX of both Thinking and CodeBlock components. ## Bug Fix The ThinkingFooter component added in PR #11142 was causing the messages view height to automatically expand. The footer was placed inside the CSS grid's overflow-hidden container, but its presence affected the grid height calculation, causing layout issues during streaming. ## Solution: FloatingThinkingBar Replaced ThinkingFooter with a new FloatingThinkingBar component that: - Uses absolute positioning (bottom-right) like CodeBlock's FloatingCodeBar - Only appears on hover/focus, not affecting layout - Shows expand/collapse button with dynamic icon based on state - Uses TooltipAnchor for accessible tooltips - Supports keyboard navigation by showing when any element in the container is focused (top bar buttons or content) ## Changes ### Thinking.tsx - Added FloatingThinkingBar component with hover/focus visibility - Updated ThinkingContent with additional bottom padding (pb-10) - Added containerRef and hover/focus event handlers on outer container - Removed ThinkingFooter component (replaced by FloatingThinkingBar) ### Reasoning.tsx - Integrated FloatingThinkingBar with same hover/focus pattern - Added containerRef and event handlers on outer container - Supports keyboard navigation through entire component ### CodeBlock.tsx - Updated FloatingCodeBar to show icons only (removed text labels) - Added TooltipAnchor wrapper for copy button with localized tooltips - Improved accessibility with proper aria-label and aria-hidden ### Localization - Added com_ui_expand_thoughts: "Expand Thoughts" ## Accessibility - Full keyboard navigation support: tabbing through ThinkingButton, copy button, and FloatingThinkingBar - TooltipAnchor provides hover tooltips for icon-only buttons - Proper aria-label attributes on all interactive elements - tabIndex management based on visibility state	2025-12-29 21:21:50 -05:00
Marco Beretta	a59bab4dc7	🧠 style: Expanded Thinking footer, Banner links, and Copy Thoughts accessibility (#11142) ... * feat(Thinking): Add ThinkingFooter component for improved UX * style(Banner): auto-style hyperlinks in banner messages * fix: Simplify ThinkingFooter component by removing unused content prop and update aria-label for accessibility * fix: Correct import order for consistency in Thinking component * fix(ThinkingFooter): Update documentation to clarify footer functionality	2025-12-29 13:49:18 -05:00