mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-09 16:07:49 +00:00
Refactor/app content main content and chat interface (#374)
* feat: improve version comparison logic in useVersionCheck hook
* refactor: useVersionCheck.js to typescript
* refactor: move VersionUpgradeModal component to its own file and remove it from AppContent component
* refactor: improve VersionUpgradeModal props and extract ReleaseInfo type
Using useVersionCheck hook in 2 places caused github requests to be made twice, which is not ideal.
* refactor: handleUpdateNow function with useCallback and error display in VersionUpgradeModal
* refactor: move isOpen check to the correct position in VersionUpgradeModal
* refactor: move VersionUpgradeModal and collapsed sidebar to Sidebar component from App.jsx
* refactor: remove unused SettingsIcon import from App.jsx
* refactor: move formatTimeAgo function to dateUtils.ts
* refactor: replace useLocalStorage with useUiPreferences for better state management in AppContent
* refactor: use shared props for Sidebar props in AppContent
* refactor: remove showQuickSettings state and toggle from AppContent, manage isOpen state directly in QuickSettingsPanel
* refactor: move preference props directly to QuickSettingsPanel and MainContent
* refactor: remove unused isPWA prop
* refactor: remove unused isPWA prop from AppContent
* refactor: remove unused generatingSummary state from Sidebar component
* refactor: remove unused isPWA prop from MainContent component
* refactor: use usePrefrences for sidebar visibility in Sidebar component
* refactor: extract device detection into hook and localize PWA handling to Sidebar
- Add new `useDeviceSettings` hook (`src/hooks/useDeviceSettings.ts`) to centralize
device-related state:
- exposes `isMobile` and `isPWA`
- supports options: `mobileBreakpoint`, `trackMobile`, `trackPWA`
- listens to window resize for mobile updates
- listens to `display-mode: standalone` changes for PWA updates
- includes `matchMedia.addListener/removeListener` fallback for older environments
- Update `AppContent` (`src/App.jsx`) to consume `isMobile` from
`useDeviceSettings({ trackPWA: false })`:
- remove local `isMobile` state/effect
- remove local `isPWA` state/effect
- keep existing `isMobile` behavior for layout and mobile sidebar flow
- stop passing `isPWA` into `Sidebar` props
- Update `Sidebar` (`src/components/Sidebar.jsx`) to own PWA detection:
- consume `isPWA` from `useDeviceSettings({ trackMobile: false })`
- add effect to toggle `pwa-mode` class on `document.documentElement` and `document.body`
- retain use of `isMobile` prop from `App` for sidebar/mobile rendering decisions
Why:
- removes duplicated device-detection logic from `AppContent`
- makes device-state logic reusable and easier to maintain
- keeps PWA-specific behavior where it is actually used (`Sidebar`)
* chore(to-remove): comment todo's
* refactor: remove unused createNewProject and cancelNewProject functions from Sidebar component
* refactor(sidebar): extract typed app/sidebar architecture and split Sidebar into modular components
- Replace `src/App.jsx` with `src/App.tsx` and move route-level UI orchestration into `src/components/app/AppContent.tsx`.
This separates provider/bootstrap concerns from runtime app layout logic, keeps route definitions minimal, and improves readability of the root app entry.
- Introduce `src/hooks/useProjectsState.ts` to centralize project/session/sidebar state management previously embedded in `App.jsx`.
This keeps the existing behavior for:
project loading,
Cursor session hydration,
WebSocket `loading_progress` handling,
additive-update protection for active sessions,
URL-based session selection,
sidebar refresh/delete/new-session flows.
The hook now exposes a typed `sidebarSharedProps` contract and typed handlers used by `AppContent`.
- Introduce `src/hooks/useSessionProtection.ts` for active/processing session lifecycle logic.
This preserves session-protection behavior while isolating `activeSessions`, `processingSessions`, and temporary-session replacement into a dedicated reusable hook.
- Replace monolithic `src/components/Sidebar.jsx` with typed `src/components/Sidebar.tsx` as a thin orchestrator.
`Sidebar.tsx` now focuses on wiring controller state/actions, modal visibility, collapsed mode, and version modal behavior instead of rendering every UI branch inline.
- Add `src/hooks/useSidebarController.ts` to encapsulate sidebar interaction/state logic.
This includes expand/collapse state, inline project/session editing state, project starring/sorting/filtering, lazy session pagination, delete confirmations, rename/delete actions, refresh state, and mobile touch click handling.
- Add strongly typed sidebar domain models in `src/components/sidebar/types.ts` and move sidebar-derived helpers into `src/components/sidebar/utils.ts`.
Utility coverage now includes:
session provider normalization,
session view-model creation (name/time/activity/message count),
project sorting/filtering,
task indicator status derivation,
starred-project persistence and readbacks.
- Split sidebar rendering into focused components under `src/components/sidebar/`:
`SidebarContent.tsx` for top-level sidebar layout composition.
`SidebarProjectList.tsx` for project-state branching and project iteration.
`SidebarProjectsState.tsx` for loading/empty/no-search-result placeholders.
`SidebarProjectItem.tsx` for per-project desktop/mobile header rendering and actions.
`SidebarProjectSessions.tsx` for expanded session area, skeletons, pagination, and new-session controls.
`SidebarSessionItem.tsx` for per-session desktop/mobile item rendering and session actions.
`SessionProviderIcon.tsx` for provider icon normalization.
`SidebarHeader.tsx`, `SidebarFooter.tsx`, `SidebarCollapsed.tsx`, and `SidebarModals.tsx` as dedicated typed UI surfaces.
This keeps rendering responsibilities local and significantly improves traceability.
- Convert shared UI primitives from JSX to TSX:
`src/components/ui/button.tsx`,
`src/components/ui/input.tsx`,
`src/components/ui/badge.tsx`,
`src/components/ui/scroll-area.tsx`.
These now provide typed props/variants (`forwardRef` where appropriate) while preserving existing class/behavior.
- Add shared app typings in `src/types/app.ts` for projects/sessions/websocket/loading contracts used by new hooks/components.
- Add global window declarations in `src/types/global.d.ts` for `__ROUTER_BASENAME__`, `refreshProjects`, and `openSettings`, removing implicit `any` usage for global integration points.
- Update `src/main.jsx` to import `App.tsx` and keep app bootstrap consistent with the TS migration.
- Update `src/components/QuickSettingsPanel.jsx` to self-resolve mobile state via `useDeviceSettings` (remove `isMobile` prop dependency), and update `src/components/ChatInterface.jsx` to render `QuickSettingsPanel` directly.
This reduces prop drilling and keeps quick settings colocated with chat UI concerns.
* refactor(sidebar): integrate settings modal into SidebarModals and update props
* fix(mobile): prevent menu tap from triggering unintended dashboard navigation
The mobile sidebar menu button redirects users to `cloudcli.ai/dashboard` when a
session was active. The redirect happened because
the menu was opened on `touchstart`, which mounted the sidebar before the touch
sequence completed; the follow-up tap/click then landed on the sidebar header
anchor.
This change rewrites mobile menu interaction handling in `MainContent.jsx` to
eliminate touch/click event leakage and ghost-click behavior.
Key changes:
- Added `suppressNextMenuClickRef` to guard against synthetic click events that
fire after a touch interaction.
- Added `openMobileMenu(event)` helper to centralize `preventDefault`,
`stopPropagation`, and `onMenuClick()` invocation.
- Added `handleMobileMenuTouchEnd(event)`:
- opens the menu on `touchend` instead of `touchstart`
- sets a short suppression window (350ms) for the next click.
- Added `handleMobileMenuClick(event)`:
- ignores/suppresses click events during the suppression window
- otherwise opens the menu normally.
- Updated all mobile menu button instances in `MainContent.jsx` (loading state,
no-project state, active header state) to use:
- `onTouchEnd={handleMobileMenuTouchEnd}`
- `onClick={handleMobileMenuClick}`
- Removed the previous `onTouchStart` path that caused premature DOM mutation.
Behavioral impact:
- Mobile sidebar still opens reliably with one tap.
- Tap no longer leaks to newly-mounted sidebar header links.
- Prevents accidental redirects while preserving existing menu UX.
* refactor(main-content): migrate MainContent to TypeScript and modularize UI/state boundaries
Replace the previous monolithic MainContent.jsx with a typed one and
extract focused subcomponents/hooks to improve readability, local state ownership,
and maintainability while keeping runtime behavior unchanged.
Key changes:
- Replace `src/components/MainContent.jsx` with `src/components/MainContent.tsx`.
- Add typed contracts for main-content domain in `src/components/main-content/types.ts`.
- Extract header composition into:
- `MainContentHeader.tsx`
- `MainContentTitle.tsx`
- `MainContentTabSwitcher.tsx`
- `MobileMenuButton.tsx`
- Extract loading/empty project views into `MainContentStateView.tsx`.
- Extract editor presentation into `EditorSidebar.tsx`.
- Move editor file-open + resize behavior into `useEditorSidebar.ts`.
- Move mobile menu touch/click suppression logic into `useMobileMenuHandlers.ts`.
- Extract TaskMaster-specific concerns into `TaskMasterPanel.tsx`:
- task detail modal state
- PRD editor modal state
- PRD list loading/refresh
- PRD save notification lifecycle
Behavior/compatibility notes:
- Preserve existing tab behavior, session passthrough props, and Chat/Git/File flows.
- Keep interop with existing JS components via boundary `as any` casts where needed.
- No intentional functional changes; this commit is structural/type-oriented refactor.
Validation:
- `npm run typecheck` passes.
- `npm run build` passes (existing unrelated CSS minify warnings remain).
* refactor(chat): split monolithic chat interface into typed modules and hooks
Replace the legacy monolithic ChatInterface.jsx implementation with a modular TypeScript architecture centered around a small orchestration component (ChatInterface.tsx).
Core architecture changes:
- Remove src/components/ChatInterface.jsx and add src/components/ChatInterface.tsx as a thin coordinator that wires provider state, session state, realtime WebSocket handlers, and composer behavior via dedicated hooks.
- Update src/components/MainContent.tsx to use typed ChatInterface directly (remove AnyChatInterface cast).
State ownership and hook extraction:
- Add src/hooks/chat/useChatProviderState.ts to centralize provider/model/permission-mode state, provider/session synchronization, cursor model bootstrap from backend config, and pending permission request scoping.
- Add src/hooks/chat/useChatSessionState.ts to own chat/session lifecycle state: session loading, cursor/claude/codex history loading, pagination, scroll restoration, visible-window slicing, token budget loading, persisted chat hydration, and processing-state restoration.
- Add src/hooks/chat/useChatRealtimeHandlers.ts to isolate WebSocket event processing for Claude/Cursor/Codex, including session filtering, streaming chunk buffering, session-created/pending-session transitions, permission request queueing/cancellation, completion/error handling, and session status updates.
- Add src/hooks/chat/useChatComposerState.ts to own composer-local state and interactions: input/draft persistence, textarea sizing and keyboard behavior, slash command execution, file mentions, image attachment/drop/paste workflow, submit/abort flows, permission decision responses, and transcript insertion.
UI modularization under src/components/chat:
- Add view/ChatMessagesPane.tsx for message list rendering, loading/empty states, pagination affordances, and thinking indicator.
- Add view/ChatComposer.tsx for composer shell layout and input area composition.
- Add view/ChatInputControls.tsx for mode toggles, token display, command launcher, clear-input, and scroll-to-bottom controls.
- Add view/PermissionRequestsBanner.tsx for explicit tool-permission review actions (allow once / allow & remember / deny).
- Add view/ProviderSelectionEmptyState.tsx for provider and model selection UX plus task starter integration.
- Add messages/MessageComponent.tsx and markdown/Markdown.tsx to isolate message rendering concerns, markdown/code rendering, and rich tool-output presentation.
- Add input/ImageAttachment.tsx for attachment previews/removal/progress/error overlay rendering.
Shared chat typing and utilities:
- Add src/components/chat/types.ts with shared types for providers, permission mode, message/tool payloads, pending permission requests, and ChatInterfaceProps.
- Add src/components/chat/utils/chatFormatting.ts for html decoding, code fence normalization, regex escaping, math-safe unescaping, and usage-limit text formatting.
- Add src/components/chat/utils/chatPermissions.ts for permission rule derivation, suggestion generation, and grant flow.
- Add src/components/chat/utils/chatStorage.ts for resilient localStorage access, quota handling, and normalized Claude settings retrieval.
- Add src/components/chat/utils/messageTransforms.ts for session message normalization (Claude/Codex/Cursor) and cached diff computation utilities.
Command/file input ergonomics:
- Add src/hooks/chat/useSlashCommands.ts for slash command fetching, usage-based ranking, fuzzy filtering, keyboard navigation, and command history persistence.
- Add src/hooks/chat/useFileMentions.tsx for project file flattening, @mention suggestions, mention highlighting, and keyboard/file insertion behavior.
TypeScript support additions:
- Add src/types/react-syntax-highlighter.d.ts module declarations to type-check markdown code highlighting imports.
Behavioral intent:
- Preserve existing chat behavior and provider flows while improving readability, separation of concerns, and future refactorability.
- Move state closer to the components/hooks that own it, reducing cross-cutting concerns in the top-level chat component.
* perf(project-loading): eliminate repeated Codex session rescans and duplicate cursor fetches
The staged changes remove the main source of project-load latency by avoiding repeated full scans of ~/.codex/sessions for every project and by removing redundant client-side cursor session refetches.
Server changes (server/projects.js):\n- Add a per-request Codex index reference in getProjects so Codex metadata is built once and reused across all projects, including manually added ones.\n- Introduce normalizeComparablePath() to canonicalize project paths (including Windows long-path prefixes and case-insensitive matching on Windows).\n- Introduce findCodexJsonlFiles() + buildCodexSessionsIndex() to perform a single recursive Codex scan and group sessions by normalized cwd.\n- Update getCodexSessions() to accept indexRef and read from the prebuilt index, with fallback index construction when no ref is provided.\n- Preserve existing session limiting behavior (limit=5 default, limit=0 returns all).
Client changes (src/hooks/useProjectsState.ts):\n- Remove loadCursorSessionsForProjects(), which previously triggered one extra /api/cursor/sessions request per project after /api/projects.\n- Use /api/projects response directly during initial load and refresh.\n- Expand projectsHaveChanges() to treat both cursorSessions and codexSessions as external session deltas.\n- Keep refresh comparison aligned with external session updates by using includeExternalSessions=true in sidebar refresh path.
Impact:\n- Reduces backend work from roughly O(projects * codex_session_files) to O(codex_session_files + projects) for Codex discovery during a project load cycle.\n- Removes an additional client-side O(projects) network fan-out for Cursor session fetches.\n- Improves perceived and actual sidebar project-loading time, especially in large session datasets.
* fix(chat): make Stop and Esc reliably abort active sessions
Problem
Stop requests were unreliable because aborting depended on currentSessionId being set, Esc had no actual global abort binding, stale pending session ids could be reused, and abort failures were surfaced as successful interruptions. Codex sessions also used a soft abort flag without wiring SDK cancellation.
Changes
- Add global Escape key handler in chat while a run is loading/cancellable to trigger the same abort path as the Stop button.
- Harden abort session target selection in composer by resolving from multiple active session id sources (current, pending view, pending storage, cursor storage, selected session) and ignoring temporary new-session-* ids.
- Clear stale pendingSessionId when launching a brand-new session to prevent aborting an old run.
- Update realtime abort handling to respect backend success=false responses: keep loading state when abort fails and emit an explicit failure message instead of pretending interruption succeeded.
- Improve websocket send reliability by checking socket.readyState === WebSocket.OPEN directly before send.
- Implement real Codex cancellation via AbortController + runStreamed(..., { signal }), propagate aborted status, and suppress expected abort-error noise.
Impact
This makes both UI Stop and Esc-to-stop materially more reliable across Claude/Cursor/Codex flows, especially during early-session windows before currentSessionId is finalized, and prevents false-positive interrupted states when backend cancellation fails.
Validation
- npm run -s typecheck
- npm run -s build
- node --check server/openai-codex.js
* refactor: tool components
* refactor: tool components
* fix: remove one-line logic from messagecomponent
* refactor(design): change the design of bash
* refactor(design): fix bash design and config
* refactor(design): change the design of tools and introduce todo list and task list.
* refactor(improvement):add memo on diffviewer, cleanup messsagecomponent
* refactor: update readme and remove unusedfiles.
* refactor(sidebar): remove duplicate loading message in SidebarProjectsState
* refactor(sidebar): move VersionUpgradeModal into SidebarModals
* refactor: replace individual provider logos with a unified SessionProviderLogo component
* fix(commands): restore /cost slash command and improve command execution errors
The /cost command was listed as built-in but had no handler, causing execution to
fall through to custom command logic and return 400 ("command path is required").
- Add a built-in /cost handler in server/routes/commands.js
- Return the expected payload shape for the chat UI (`action: "cost"`, token usage,
estimated cost, model)
- Normalize token usage inputs and compute usage percentage
- Add provider-based default pricing for cost estimation
- Fix model selection in command execution context so codex uses `codexModel`
instead of `claudeModel`
- Improve frontend command error handling by parsing backend error responses and
showing meaningful error messages instead of a generic failure
* fix(command-menu): correct slash command selection with frequent commands
When the “Frequently Used” section is visible, command clicks/hover could use a
UI-local index instead of the canonical `filteredCommands` index, causing the
wrong command to execute (e.g. clicking `/help` running `/clear`).
- map rendered menu items back to canonical command indices using a stable key
(`name + namespace/type + path`)
- use canonical index for hover/click selection callbacks
- deduplicate frequent commands from other grouped sections to avoid duplicate
rows and selection ambiguity
- keep and restore original inline comments, with clarifications where needed
* refactor(sidebar): update sessionMeta handling for session loading logic
- This fixes an issue where the sidebar was showing 6+ even when there were only 5 sessions, due to the hasMore logic not accounting for the case where there are exactly 6 sessions.
It was also showing "Show more sessions" even where there were no more sessions to load.
- This was because `hasMore` was sometimes `undefined` and the logic checked for hasMore !== false, which treated undefined as true.
Now we explicitly check for hasMore === true to determine if there are more sessions to load.
* refactor(project-watcher): add codex and cursor file watchers
* fix: chat session scroll to bottom error even when scrolled up
* fix(chat): clear stuck loading state across realtime lifecycle events
The chat UI could remain in a stale "Thinking/Processing" state when session IDs
did not line up exactly between view state (`currentSessionId`), selected route
session, pending session IDs, and provider lifecycle events. This was most visible
with Codex completion/abort flows, but the same mismatch risk existed in shared
handlers.
Unify lifecycle cleanup behavior in realtime handlers and make processing tracking
key off the active viewed session identity.
Changes:
- src/hooks/chat/useChatRealtimeHandlers.ts
- src/components/ChatInterface.tsx
- src/hooks/chat/useChatSessionState.ts
What changed:
- Added shared helpers in realtime handling:
- `collectSessionIds(...)` to normalize and dedupe candidate session IDs.
- `clearLoadingIndicators()` to consistently clear `isLoading`, abort UI, and status.
- `markSessionsAsCompleted(...)` to consistently notify inactive/not-processing state.
- Updated lifecycle branches to use shared cleanup logic:
- `cursor-result`
- `claude-complete`
- `codex-response` (`turn_complete` and `turn_failed`)
- `codex-complete`
- `session-aborted`
- Expanded completion/abort cleanup to include all relevant session IDs
(`latestMessage.sessionId`, `currentSessionId`, `selectedSession?.id`,
`pendingSessionId`, and Codex `actualSessionId` when present).
- Switched processing-session marking in `ChatInterface` to use
`selectedSession?.id || currentSessionId` instead of `currentSessionId` alone.
- Switched processing-session rehydration in `useChatSessionState` to use
the same active-view session identity fallback.
Result:
- Prevents stale loading indicators after completion/abort when IDs differ.
- Keeps processing session bookkeeping aligned with the currently viewed session.
- Reduces provider-specific drift by using one lifecycle cleanup pattern.
* fix(chat): stabilize long-history scroll-up pagination behavior
- fix top-pagination lockups by only locking when older messages are actually fetched
- make fetched older messages visible immediately by increasing `visibleMessageCount` on prepend
- prevent unintended auto-scroll-to-bottom during older-message loading and scroll restore
- replace state-based pagination offset with a ref to avoid stale offset/reload side effects
- ensure initial auto-scroll runs only after initial session load completes
- reset top-load lock/restore state and visible window when switching sessions
- loosen top-lock release near the top to avoid requiring a full down/up cycle
* refactor: Restructure files and folders to better mimic feature-based architecture
* refactor: reorganize chat view components and types
* feat(chat): move thinking modes, token usage pie, and related logic into chat folder
* refactor(tools): add agent category for Task tool
Add visual distinction for the Task tool (subagent invocation) by
introducing a new 'agent' category with purple border styling. This
separates subagent tasks from regular task management tools
(TaskCreate, TaskUpdate, etc.) for clearer user feedback.
Also refactor terminal command layout in OneLineDisplay to properly
nest flex containers, fixing copy button alignment issues.
* refactor(tools): improve Task tool display formatting
Update Task tool config to show cleaner subagent information in the UI.
Simplifies the input display by showing only the prompt when no
optional fields are present, reducing visual clutter. Updates title
format to "Subagent / {type}" for better categorization. Enhances
result display to better handle complex agent response structures with
array content types, extracting text blocks for cleaner presentation.
* fix: show auth url panel in shell only on mobile
- use static url: https://auth.openai.com/codex/device, for codex login.
- add an option for hiding the panel
* fix(chat): escape command name in regex to prevent unintended matches
* fix(chat): handle JSON parsing errors for saved chat messages
* refactor(chat): replace localStorage provider retrieval with prop usage in MessageComponent
* fix(chat): handle potential null content in message before splitting lines
* refactor(todo): update TodoListContentProps to include optional id and priority fields that are used in TodoList.jsx
* fix(watcher): ensure provider folders exist before creating watchers to maintain active watching
* refactor(chat): improve message handling by cloning state updates and improving structured message parsing
* refactor(chat): exclude currentSessionId from dependency array to prevent unnecessary reloading of messages
* refactor(useFileMentions): implement abort controller for fetch requests
* refactor(MessageComponent): add types
* refactor(calculateDiff): optimize LCS algorithm for improved diff calculation
* refactor(createCachedDiffCalculator): use both newStr and oldStr as cache keys
* refactor(useSidebarController): manage project session overrides in local state
* refactor(ScrollArea): adjust ref placement and className order
* fix: type annotations
* refactor(ChatInputControls): update import statement for ThinkingModeSelector
* refactor(dateUtils): update type annotation for formatTimeAgo function
* refactor(ToolRenderer): ensure stable hook order
* refactor(useProjectsState): normalize refreshed session metadata to maintain provider stability; use getProjectSessions helper for session retrieval.
* refactor(useChatComposerState): improve input handling and command execution flow
* refactor(useChatRealtimeHandlers): normalize interactive prompt content to string for consistent ChatMessage shape
* refactor(OneLineDisplay): improve clipboard functionality with fallback for unsupported environments
* refactor(QuickSettingsPanel): simplify state management by removing localIsOpen and using isOpen directly
* refactor(ChatMessagesPane): use stable message key
* refactor:: move AssistantThinkingIndicator component to its own file
* refactor(ChatMessagesPane): extract message key generation logic to a utility function
* refactor(SidebarModals): move normalizeProjectForSettings into utils file
* refactor(ToolConfigs): use optional chaining for content retrieval
* fix(chat): stabilize provider/message handling and complete chat i18n coverage
Unify provider typing, harden realtime message effects, normalize tool input
serialization, and finish i18n/a11y updates across chat UI components.
- tighten provider contracts from `Provider | string` to `SessionProvider` in:
- `useChatProviderState`
- `useChatComposerState`
- `useChatRealtimeHandlers`
- `ChatMessagesPane`
- `ProviderSelectionEmptyState`
- refactor `AssistantThinkingIndicator` to accept `selectedProvider` via props
instead of reading provider from local storage during render
- fix stale-closure risk in `useChatRealtimeHandlers` by:
- adding missing effect dependencies
- introducing `lastProcessedMessageRef` to prevent duplicate processing when
dependencies change without a new message object
- standardize `toolInput` shape in `messageTransforms`:
- add `normalizeToolInput(...)`
- ensure all conversion paths produce consistent string output
- remove mixed `null`/raw/stringified variants across cursor/session branches
- harden tool display fallback in `CollapsibleDisplay`:
- default border class now falls back safely for unknown categories
- improve chat i18n consistency:
- localize hardcoded strings in `MessageComponent`
(`permissions.*`, `interactive.*`, `thinking.emoji`, `json.response`,
`messageTypes.error`)
- localize button titles in `ChatInputControls`
(`input.clearInput`, `input.scrollToBottom`)
- localize provider-specific empty-project prompt in `ChatInterface`
(`projectSelection.startChatWithProvider`)
- localize repeated “Start the next task” prompt in
`ProviderSelectionEmptyState` (`tasks.nextTaskPrompt`)
- add missing translation keys in all supported chat locales:
- `src/i18n/locales/en/chat.json`
- `src/i18n/locales/ko/chat.json`
- `src/i18n/locales/zh-CN/chat.json`
- new keys:
- `input.clearInput`
- `input.scrollToBottom`
- `projectSelection.startChatWithProvider`
- `tasks.nextTaskPrompt`
- improve attachment remove-button accessibility in `ImageAttachment`:
- add `type="button"` and `aria-label`
- make control visible on touch/small screens and focusable states
- preserve hover behavior on larger screens
Validation:
- `npm run typecheck`
* fix(chat): sync quick settings state and stabilize thinking toggle
Synchronize useUiPreferences instances via custom sync events and storage listeners so Quick Settings updates apply across UI consumers immediately.
Also hide standalone thinking messages when showThinking is disabled, while preserving hook order to avoid Rendered fewer hooks runtime errors.
* refactor(validateGitRepository): improve directory validation for git work tree
* refactor(GitPanel): clear stale state on project change and improve error handling
* refactor(git): use spawnAsync for command execution and improve commit log retrieval
* fix: iOS pwa bottom margin
* fix: pass diff information to code editor
* refactor(sidebar): remove touch event handlers from project and session items
* bumping node to v22
* Release 1.17.0
---------
Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: simosmik <simosmik@gmail.com>
This commit is contained in:
Haileyesus
224
src/components/chat/tools/README.md
Normal file
224
src/components/chat/tools/README.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# Tool Rendering System
|
||||
|
||||
## Overview
|
||||
|
||||
Config-driven architecture for rendering tool executions in chat. All tool display behavior is defined in `toolConfigs.ts` — no scattered conditionals. Two base display patterns: **OneLineDisplay** for compact tools, **CollapsibleDisplay** for tools with expandable content.
|
||||
|
||||
Non-error tool results route through `ToolRenderer` with `mode="result"` (single source of truth). Error results are handled inline in `MessageComponent` with a red error box.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
tools/
|
||||
├── components/
|
||||
│ ├── OneLineDisplay.tsx # Compact one-line tool display
|
||||
│ ├── CollapsibleDisplay.tsx # Expandable tool display (uses children pattern)
|
||||
│ ├── CollapsibleSection.tsx # <details>/<summary> wrapper
|
||||
│ ├── ContentRenderers/
|
||||
│ │ ├── DiffViewer.tsx # File diff viewer (memoized)
|
||||
│ │ ├── MarkdownContent.tsx # Markdown renderer
|
||||
│ │ ├── FileListContent.tsx # Comma-separated clickable file list
|
||||
│ │ ├── TodoListContent.tsx # Todo items with status badges
|
||||
│ │ ├── TaskListContent.tsx # Task tracker with progress bar
|
||||
│ │ └── TextContent.tsx # Plain text / JSON / code
|
||||
├── configs/
|
||||
│ └── toolConfigs.ts # All tool configs + ToolDisplayConfig type
|
||||
├── ToolRenderer.tsx # Main router (React.memo wrapped)
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Display Patterns
|
||||
|
||||
### OneLineDisplay
|
||||
|
||||
Used by: Bash, Read, Grep, Glob, TodoRead, TaskCreate, TaskUpdate, TaskGet
|
||||
|
||||
Renders as a single line with `border-l-2` accent. Supports multiple rendering modes based on `action`:
|
||||
|
||||
- **terminal** (`style: 'terminal'`) — Dark pill around command text, green `$` prompt
|
||||
- **open-file** — Shows filename only (truncated from full path), clickable to open
|
||||
- **jump-to-results** — Shows pattern with anchor link to result section
|
||||
- **copy** — Shows value with hover copy button
|
||||
- **none** — Plain display
|
||||
|
||||
```tsx
|
||||
<OneLineDisplay
|
||||
toolName="Read"
|
||||
icon="terminal" // Optional icon or style keyword
|
||||
label="Read" // Tool label
|
||||
value="/path/to/file.ts" // Main display value
|
||||
secondary="description" // Optional secondary text (italic)
|
||||
action="open-file" // Action type
|
||||
onAction={() => ...} // Click handler
|
||||
colorScheme={{ // Per-tool colors
|
||||
primary: 'text-...',
|
||||
border: 'border-...',
|
||||
icon: 'text-...'
|
||||
}}
|
||||
resultId="tool-result-x" // For jump-to-results anchor
|
||||
toolResult={...} // For conditional jump arrow
|
||||
toolId="x" // Tool use ID
|
||||
/>
|
||||
```
|
||||
|
||||
### CollapsibleDisplay
|
||||
|
||||
Used by: Edit, Write, ApplyPatch, Grep/Glob results, TodoWrite, TaskList/TaskGet results, ExitPlanMode, Default
|
||||
|
||||
Wraps `CollapsibleSection` (`<details>`/`<summary>`) with a `border-l-2` accent colored by tool category. Accepts **children** directly (not contentProps).
|
||||
|
||||
```tsx
|
||||
<CollapsibleDisplay
|
||||
toolName="Edit"
|
||||
toolId="123"
|
||||
title="filename.ts" // Section title (can be clickable)
|
||||
defaultOpen={false}
|
||||
onTitleClick={() => ...} // Makes title a clickable link (for edit tools)
|
||||
showRawParameters={true} // Show raw JSON toggle
|
||||
rawContent="..." // Raw JSON string
|
||||
toolCategory="edit" // Drives border color
|
||||
>
|
||||
<DiffViewer {...} /> // Content as children
|
||||
</CollapsibleDisplay>
|
||||
```
|
||||
|
||||
**Tool category colors** (via `border-l-2`):
|
||||
| Category | Tools | Color |
|
||||
|----------|-------|-------|
|
||||
| `edit` | Edit, Write, ApplyPatch | amber |
|
||||
| `bash` | Bash | green |
|
||||
| `search` | Grep, Glob | gray |
|
||||
| `todo` | TodoWrite, TodoRead | violet |
|
||||
| `task` | TaskCreate/Update/List/Get | violet |
|
||||
| `plan` | ExitPlanMode | indigo |
|
||||
| `default` | everything else | neutral gray |
|
||||
|
||||
---
|
||||
|
||||
## Content Renderers
|
||||
|
||||
Specialized components for different content types, rendered as children of `CollapsibleDisplay`:
|
||||
|
||||
| contentType | Component | Used by |
|
||||
|---|---|---|
|
||||
| `diff` | `DiffViewer` | Edit, Write, ApplyPatch |
|
||||
| `markdown` | `MarkdownContent` | ExitPlanMode |
|
||||
| `file-list` | `FileListContent` | Grep/Glob results |
|
||||
| `todo-list` | `TodoListContent` | TodoWrite, TodoRead |
|
||||
| `task` | `TaskListContent` | TaskList, TaskGet results |
|
||||
| `text` | `TextContent` | Default fallback |
|
||||
| `success-message` | inline SVG | TodoWrite result |
|
||||
|
||||
---
|
||||
|
||||
## Adding a New Tool
|
||||
|
||||
**Step 1:** Add config to `configs/toolConfigs.ts`
|
||||
|
||||
```typescript
|
||||
MyTool: {
|
||||
input: {
|
||||
type: 'one-line', // or 'collapsible'
|
||||
label: 'MyTool',
|
||||
getValue: (input) => input.some_field,
|
||||
action: 'open-file',
|
||||
colorScheme: {
|
||||
primary: 'text-purple-600 dark:text-purple-400',
|
||||
border: 'border-purple-400 dark:border-purple-500'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true // Only show errors
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2:** If the tool needs a category color, add it to `getToolCategory()` in `ToolRenderer.tsx`.
|
||||
|
||||
**That's it.** The ToolRenderer auto-routes based on config.
|
||||
|
||||
---
|
||||
|
||||
## Configuration Reference
|
||||
|
||||
### ToolDisplayConfig
|
||||
|
||||
```typescript
|
||||
interface ToolDisplayConfig {
|
||||
input: {
|
||||
type: 'one-line' | 'collapsible' | 'hidden';
|
||||
|
||||
// One-line
|
||||
icon?: string;
|
||||
label?: string;
|
||||
getValue?: (input) => string;
|
||||
getSecondary?: (input) => string | undefined;
|
||||
action?: 'copy' | 'open-file' | 'jump-to-results' | 'none';
|
||||
style?: string; // 'terminal' for Bash
|
||||
wrapText?: boolean;
|
||||
colorScheme?: {
|
||||
primary?: string;
|
||||
secondary?: string;
|
||||
background?: string;
|
||||
border?: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
// Collapsible
|
||||
title?: string | ((input) => string);
|
||||
defaultOpen?: boolean;
|
||||
contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task';
|
||||
getContentProps?: (input, helpers?) => any;
|
||||
actionButton?: 'none';
|
||||
};
|
||||
|
||||
result?: {
|
||||
hidden?: boolean; // Never show
|
||||
hideOnSuccess?: boolean; // Only show errors
|
||||
type?: 'one-line' | 'collapsible' | 'special';
|
||||
title?: string | ((result) => string);
|
||||
defaultOpen?: boolean;
|
||||
contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task';
|
||||
getMessage?: (result) => string;
|
||||
getContentProps?: (result) => any;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## All Configured Tools
|
||||
|
||||
| Tool | Input | Result | Notes |
|
||||
|------|-------|--------|-------|
|
||||
| Bash | terminal one-line | hide success | Dark command pill, green accent |
|
||||
| Read | one-line (open-file) | hidden | Shows filename, clicks to open |
|
||||
| Edit | collapsible (diff) | hide success | Amber border, clickable filename |
|
||||
| Write | collapsible (diff) | hide success | "New" badge on diff |
|
||||
| ApplyPatch | collapsible (diff) | hide success | "Patch" badge on diff |
|
||||
| Grep | one-line (jump) | collapsible file-list | Collapsed by default |
|
||||
| Glob | one-line (jump) | collapsible file-list | Collapsed by default |
|
||||
| TodoWrite | collapsible (todo-list) | success message | |
|
||||
| TodoRead | one-line | collapsible todo-list | |
|
||||
| TaskCreate | one-line | hide success | Shows task subject |
|
||||
| TaskUpdate | one-line | hide success | Shows `#id → status` |
|
||||
| TaskList | one-line | collapsible task | Progress bar, status icons |
|
||||
| TaskGet | one-line | collapsible task | Task details with status |
|
||||
| ExitPlanMode | collapsible (markdown) | collapsible markdown | Also registered as `exit_plan_mode` |
|
||||
| Default | collapsible (code) | collapsible text | Fallback for unknown tools |
|
||||
|
||||
---
|
||||
|
||||
## Performance
|
||||
|
||||
- **ToolRenderer** is wrapped with `React.memo` — skips re-render when props haven't changed
|
||||
- **parsedData** is memoized with `useMemo` — JSON parsing only runs when input changes
|
||||
- **DiffViewer** memoizes `createDiff()` — expensive diff computation cached
|
||||
- **MessageComponent** caches `localStorage` reads and timestamp formatting via `useMemo`
|
||||
- Tool results route through `ToolRenderer` (no duplicate rendering paths)
|
||||
- `CollapsibleDisplay` uses children pattern (no wasteful contentProps indirection)
|
||||
- Configs are static module-level objects — zero runtime overhead for lookups
|
||||
209
src/components/chat/tools/ToolRenderer.tsx
Normal file
209
src/components/chat/tools/ToolRenderer.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import React, { memo, useMemo, useCallback } from 'react';
|
||||
import { getToolConfig } from './configs/toolConfigs';
|
||||
import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent } from './components';
|
||||
import type { Project } from '../../../types/app';
|
||||
|
||||
type DiffLine = {
|
||||
type: string;
|
||||
content: string;
|
||||
lineNum: number;
|
||||
};
|
||||
|
||||
interface ToolRendererProps {
|
||||
toolName: string;
|
||||
toolInput: any;
|
||||
toolResult?: any;
|
||||
toolId?: string;
|
||||
mode: 'input' | 'result';
|
||||
onFileOpen?: (filePath: string, diffInfo?: any) => void;
|
||||
createDiff?: (oldStr: string, newStr: string) => DiffLine[];
|
||||
selectedProject?: Project | null;
|
||||
autoExpandTools?: boolean;
|
||||
showRawParameters?: boolean;
|
||||
rawToolInput?: string;
|
||||
}
|
||||
|
||||
function getToolCategory(toolName: string): string {
|
||||
if (['Edit', 'Write', 'ApplyPatch'].includes(toolName)) return 'edit';
|
||||
if (['Grep', 'Glob'].includes(toolName)) return 'search';
|
||||
if (toolName === 'Bash') return 'bash';
|
||||
if (['TodoWrite', 'TodoRead'].includes(toolName)) return 'todo';
|
||||
if (['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskGet'].includes(toolName)) return 'task';
|
||||
if (toolName === 'Task') return 'agent'; // Subagent task
|
||||
if (toolName === 'exit_plan_mode' || toolName === 'ExitPlanMode') return 'plan';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
/**
|
||||
* Main tool renderer router
|
||||
* Routes to OneLineDisplay or CollapsibleDisplay based on tool config
|
||||
*/
|
||||
export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
|
||||
toolName,
|
||||
toolInput,
|
||||
toolResult,
|
||||
toolId,
|
||||
mode,
|
||||
onFileOpen,
|
||||
createDiff,
|
||||
selectedProject,
|
||||
autoExpandTools = false,
|
||||
showRawParameters = false,
|
||||
rawToolInput
|
||||
}) => {
|
||||
const config = getToolConfig(toolName);
|
||||
const displayConfig: any = mode === 'input' ? config.input : config.result;
|
||||
|
||||
const parsedData = useMemo(() => {
|
||||
try {
|
||||
const rawData = mode === 'input' ? toolInput : toolResult;
|
||||
return typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
|
||||
} catch {
|
||||
return mode === 'input' ? toolInput : toolResult;
|
||||
}
|
||||
}, [mode, toolInput, toolResult]);
|
||||
|
||||
const handleAction = useCallback(() => {
|
||||
if (displayConfig?.action === 'open-file' && onFileOpen) {
|
||||
const value = displayConfig.getValue?.(parsedData) || '';
|
||||
onFileOpen(value);
|
||||
}
|
||||
}, [displayConfig, parsedData, onFileOpen]);
|
||||
|
||||
// Keep hooks above this guard so hook call order stays stable across renders.
|
||||
if (!displayConfig) return null;
|
||||
|
||||
if (displayConfig.type === 'one-line') {
|
||||
const value = displayConfig.getValue?.(parsedData) || '';
|
||||
const secondary = displayConfig.getSecondary?.(parsedData);
|
||||
|
||||
return (
|
||||
<OneLineDisplay
|
||||
toolName={toolName}
|
||||
toolResult={toolResult}
|
||||
toolId={toolId}
|
||||
icon={displayConfig.icon}
|
||||
label={displayConfig.label}
|
||||
value={value}
|
||||
secondary={secondary}
|
||||
action={displayConfig.action}
|
||||
onAction={handleAction}
|
||||
style={displayConfig.style}
|
||||
wrapText={displayConfig.wrapText}
|
||||
colorScheme={displayConfig.colorScheme}
|
||||
resultId={mode === 'input' ? `tool-result-${toolId}` : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (displayConfig.type === 'collapsible') {
|
||||
const title = typeof displayConfig.title === 'function'
|
||||
? displayConfig.title(parsedData)
|
||||
: displayConfig.title || 'Details';
|
||||
|
||||
const defaultOpen = displayConfig.defaultOpen !== undefined
|
||||
? displayConfig.defaultOpen
|
||||
: autoExpandTools;
|
||||
|
||||
const contentProps = displayConfig.getContentProps?.(parsedData, {
|
||||
selectedProject,
|
||||
createDiff,
|
||||
onFileOpen
|
||||
}) || {};
|
||||
|
||||
// Build the content component based on contentType
|
||||
let contentComponent: React.ReactNode = null;
|
||||
|
||||
switch (displayConfig.contentType) {
|
||||
case 'diff':
|
||||
if (createDiff) {
|
||||
contentComponent = (
|
||||
<DiffViewer
|
||||
{...contentProps}
|
||||
createDiff={createDiff}
|
||||
onFileClick={() => onFileOpen?.(contentProps.filePath)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'markdown':
|
||||
contentComponent = <MarkdownContent content={contentProps.content || ''} />;
|
||||
break;
|
||||
|
||||
case 'file-list':
|
||||
contentComponent = (
|
||||
<FileListContent
|
||||
files={contentProps.files || []}
|
||||
onFileClick={onFileOpen}
|
||||
title={contentProps.title}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'todo-list':
|
||||
if (contentProps.todos?.length > 0) {
|
||||
contentComponent = (
|
||||
<TodoListContent
|
||||
todos={contentProps.todos}
|
||||
isResult={contentProps.isResult}
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'task':
|
||||
contentComponent = <TaskListContent content={contentProps.content || ''} />;
|
||||
break;
|
||||
|
||||
case 'text':
|
||||
contentComponent = (
|
||||
<TextContent
|
||||
content={contentProps.content || ''}
|
||||
format={contentProps.format || 'plain'}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'success-message': {
|
||||
const msg = displayConfig.getMessage?.(parsedData) || 'Success';
|
||||
contentComponent = (
|
||||
<div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{msg}
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// For edit tools, make the title (filename) clickable to open the file
|
||||
const handleTitleClick = (toolName === 'Edit' || toolName === 'Write' || toolName === 'ApplyPatch') && contentProps.filePath && onFileOpen
|
||||
? () => onFileOpen(contentProps.filePath, {
|
||||
old_string: contentProps.oldContent,
|
||||
new_string: contentProps.newContent
|
||||
})
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<CollapsibleDisplay
|
||||
toolName={toolName}
|
||||
toolId={toolId}
|
||||
title={title}
|
||||
defaultOpen={defaultOpen}
|
||||
onTitleClick={handleTitleClick}
|
||||
showRawParameters={mode === 'input' && showRawParameters}
|
||||
rawContent={rawToolInput}
|
||||
toolCategory={getToolCategory(toolName)}
|
||||
>
|
||||
{contentComponent}
|
||||
</CollapsibleDisplay>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
ToolRenderer.displayName = 'ToolRenderer';
|
||||
76
src/components/chat/tools/components/CollapsibleDisplay.tsx
Normal file
76
src/components/chat/tools/components/CollapsibleDisplay.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { CollapsibleSection } from './CollapsibleSection';
|
||||
|
||||
interface CollapsibleDisplayProps {
|
||||
toolName: string;
|
||||
toolId?: string;
|
||||
title: string;
|
||||
defaultOpen?: boolean;
|
||||
action?: React.ReactNode;
|
||||
onTitleClick?: () => void;
|
||||
children: React.ReactNode;
|
||||
showRawParameters?: boolean;
|
||||
rawContent?: string;
|
||||
className?: string;
|
||||
toolCategory?: string;
|
||||
}
|
||||
|
||||
const borderColorMap: Record<string, string> = {
|
||||
edit: 'border-l-amber-500 dark:border-l-amber-400',
|
||||
search: 'border-l-gray-400 dark:border-l-gray-500',
|
||||
bash: 'border-l-green-500 dark:border-l-green-400',
|
||||
todo: 'border-l-violet-500 dark:border-l-violet-400',
|
||||
task: 'border-l-violet-500 dark:border-l-violet-400',
|
||||
agent: 'border-l-purple-500 dark:border-l-purple-400',
|
||||
plan: 'border-l-indigo-500 dark:border-l-indigo-400',
|
||||
default: 'border-l-gray-300 dark:border-l-gray-600',
|
||||
};
|
||||
|
||||
export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
|
||||
toolName,
|
||||
title,
|
||||
defaultOpen = false,
|
||||
action,
|
||||
onTitleClick,
|
||||
children,
|
||||
showRawParameters = false,
|
||||
rawContent,
|
||||
className = '',
|
||||
toolCategory
|
||||
}) => {
|
||||
// Fall back to default styling for unknown/new categories so className never includes "undefined".
|
||||
const borderColor = borderColorMap[toolCategory || 'default'] || borderColorMap.default;
|
||||
|
||||
return (
|
||||
<div className={`border-l-2 ${borderColor} pl-3 py-0.5 my-1 ${className}`}>
|
||||
<CollapsibleSection
|
||||
title={title}
|
||||
toolName={toolName}
|
||||
open={defaultOpen}
|
||||
action={action}
|
||||
onTitleClick={onTitleClick}
|
||||
>
|
||||
{children}
|
||||
|
||||
{showRawParameters && rawContent && (
|
||||
<details className="relative mt-2 group/raw">
|
||||
<summary className="flex items-center gap-1.5 text-[11px] text-gray-400 dark:text-gray-500 cursor-pointer hover:text-gray-600 dark:hover:text-gray-300 py-0.5">
|
||||
<svg
|
||||
className="w-2.5 h-2.5 transition-transform duration-150 group-open/raw:rotate-90"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
raw params
|
||||
</summary>
|
||||
<pre className="mt-1 text-[11px] bg-gray-50 dark:bg-gray-900/50 border border-gray-200/40 dark:border-gray-700/40 p-2 rounded whitespace-pre-wrap break-words overflow-hidden text-gray-600 dark:text-gray-400 font-mono">
|
||||
{rawContent}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
61
src/components/chat/tools/components/CollapsibleSection.tsx
Normal file
61
src/components/chat/tools/components/CollapsibleSection.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
|
||||
interface CollapsibleSectionProps {
|
||||
title: string;
|
||||
toolName?: string;
|
||||
open?: boolean;
|
||||
action?: React.ReactNode;
|
||||
onTitleClick?: () => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable collapsible section with consistent styling
|
||||
*/
|
||||
export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
|
||||
title,
|
||||
toolName,
|
||||
open = false,
|
||||
action,
|
||||
onTitleClick,
|
||||
children,
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<details className={`relative group/details ${className}`} open={open}>
|
||||
<summary className="flex items-center gap-1.5 text-xs cursor-pointer py-0.5 select-none">
|
||||
<svg
|
||||
className="w-3 h-3 text-gray-400 dark:text-gray-500 transition-transform duration-150 group-open/details:rotate-90 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
{toolName && (
|
||||
<span className="font-medium text-gray-500 dark:text-gray-400 flex-shrink-0">{toolName}</span>
|
||||
)}
|
||||
{toolName && (
|
||||
<span className="text-gray-300 dark:text-gray-600 text-[10px] flex-shrink-0">/</span>
|
||||
)}
|
||||
{onTitleClick ? (
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTitleClick(); }}
|
||||
className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-mono hover:underline truncate flex-1 text-left transition-colors"
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-gray-600 dark:text-gray-400 truncate flex-1">
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
{action && <span className="flex-shrink-0 ml-1">{action}</span>}
|
||||
</summary>
|
||||
<div className="mt-1.5 pl-[18px]">
|
||||
{children}
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
interface FileListItem {
|
||||
path: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
interface FileListContentProps {
|
||||
files: string[] | FileListItem[];
|
||||
onFileClick?: (filePath: string) => void;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a compact comma-separated list of clickable file names
|
||||
* Used by: Grep/Glob results
|
||||
*/
|
||||
export const FileListContent: React.FC<FileListContentProps> = ({
|
||||
files,
|
||||
onFileClick,
|
||||
title
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
{title && (
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400 mb-1">
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-x-1 gap-y-0.5 max-h-48 overflow-y-auto">
|
||||
{files.map((file, index) => {
|
||||
const filePath = typeof file === 'string' ? file : file.path;
|
||||
const fileName = filePath.split('/').pop() || filePath;
|
||||
const handleClick = typeof file === 'string'
|
||||
? () => onFileClick?.(file)
|
||||
: file.onClick;
|
||||
|
||||
return (
|
||||
<span key={index} className="inline-flex items-center">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="text-[11px] font-mono text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors"
|
||||
title={filePath}
|
||||
>
|
||||
{fileName}
|
||||
</button>
|
||||
{index < files.length - 1 && (
|
||||
<span className="text-gray-300 dark:text-gray-600 text-[10px] ml-1">,</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { Markdown } from '../../../view/subcomponents/Markdown';
|
||||
|
||||
interface MarkdownContentProps {
|
||||
content: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders markdown content with proper styling
|
||||
* Used by: exit_plan_mode, long text results, etc.
|
||||
*/
|
||||
export const MarkdownContent: React.FC<MarkdownContentProps> = ({
|
||||
content,
|
||||
className = 'mt-1 prose prose-sm max-w-none dark:prose-invert'
|
||||
}) => {
|
||||
return (
|
||||
<Markdown className={className}>
|
||||
{content}
|
||||
</Markdown>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TaskItem {
|
||||
id: string;
|
||||
subject: string;
|
||||
status: 'pending' | 'in_progress' | 'completed';
|
||||
owner?: string;
|
||||
blockedBy?: string[];
|
||||
}
|
||||
|
||||
interface TaskListContentProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
function parseTaskContent(content: string): TaskItem[] {
|
||||
const tasks: TaskItem[] = [];
|
||||
const lines = content.split('\n');
|
||||
|
||||
for (const line of lines) {
|
||||
// Match patterns like: #15. [in_progress] Subject here
|
||||
// or: - #15 [in_progress] Subject (owner: agent)
|
||||
// or: #15. Subject here (status: in_progress)
|
||||
const match = line.match(/#(\d+)\.?\s*(?:\[(\w+)\]\s*)?(.+?)(?:\s*\((?:owner:\s*\w+)?\))?$/);
|
||||
if (match) {
|
||||
const [, id, status, subject] = match;
|
||||
const blockedMatch = line.match(/blockedBy:\s*\[([^\]]*)\]/);
|
||||
tasks.push({
|
||||
id,
|
||||
subject: subject.trim(),
|
||||
status: (status as TaskItem['status']) || 'pending',
|
||||
blockedBy: blockedMatch ? blockedMatch[1].split(',').map(s => s.trim()).filter(Boolean) : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return tasks;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
completed: {
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
textClass: 'line-through text-gray-400 dark:text-gray-500',
|
||||
badgeClass: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800'
|
||||
},
|
||||
in_progress: {
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
textClass: 'text-gray-900 dark:text-gray-100',
|
||||
badgeClass: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800'
|
||||
},
|
||||
pending: {
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="9" strokeWidth={2} />
|
||||
</svg>
|
||||
),
|
||||
textClass: 'text-gray-700 dark:text-gray-300',
|
||||
badgeClass: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders task list results with proper status icons and compact layout
|
||||
* Parses text content from TaskList/TaskGet results
|
||||
*/
|
||||
export const TaskListContent: React.FC<TaskListContentProps> = ({ content }) => {
|
||||
const tasks = parseTaskContent(content);
|
||||
|
||||
// If we couldn't parse any tasks, fall back to text display
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<pre className="text-[11px] font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
|
||||
{content}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
const completed = tasks.filter(t => t.status === 'completed').length;
|
||||
const total = tasks.length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span className="text-[11px] text-gray-500 dark:text-gray-400">
|
||||
{completed}/{total} completed
|
||||
</span>
|
||||
<div className="flex-1 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-green-500 dark:bg-green-400 rounded-full transition-all"
|
||||
style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-px">
|
||||
{tasks.map((task) => {
|
||||
const config = statusConfig[task.status] || statusConfig.pending;
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-1.5 py-0.5 group"
|
||||
>
|
||||
<span className="flex-shrink-0">{config.icon}</span>
|
||||
<span className="text-[11px] font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
|
||||
#{task.id}
|
||||
</span>
|
||||
<span className={`text-xs truncate flex-1 ${config.textClass}`}>
|
||||
{task.subject}
|
||||
</span>
|
||||
<span className={`text-[10px] px-1 py-px rounded border flex-shrink-0 ${config.badgeClass}`}>
|
||||
{task.status.replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TextContentProps {
|
||||
content: string;
|
||||
format?: 'plain' | 'json' | 'code';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders plain text, JSON, or code content
|
||||
* Used by: Raw parameters, generic text results, JSON responses
|
||||
*/
|
||||
export const TextContent: React.FC<TextContentProps> = ({
|
||||
content,
|
||||
format = 'plain',
|
||||
className = ''
|
||||
}) => {
|
||||
if (format === 'json') {
|
||||
let formattedJson = content;
|
||||
try {
|
||||
const parsed = JSON.parse(content);
|
||||
formattedJson = JSON.stringify(parsed, null, 2);
|
||||
} catch (e) {
|
||||
// If parsing fails, use original content
|
||||
}
|
||||
|
||||
return (
|
||||
<pre className={`mt-1 text-xs bg-gray-900 dark:bg-gray-950 text-gray-100 p-2.5 rounded overflow-x-auto font-mono ${className}`}>
|
||||
{formattedJson}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
if (format === 'code') {
|
||||
return (
|
||||
<pre className={`mt-1 text-xs bg-gray-50 dark:bg-gray-800/50 border border-gray-200/50 dark:border-gray-700/50 p-2 rounded whitespace-pre-wrap break-words overflow-hidden text-gray-700 dark:text-gray-300 font-mono ${className}`}>
|
||||
{content}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
// Plain text
|
||||
return (
|
||||
<div className={`mt-1 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap ${className}`}>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import TodoList from '../../../../TodoList';
|
||||
|
||||
interface TodoListContentProps {
|
||||
todos: Array<{
|
||||
id?: string;
|
||||
content: string;
|
||||
status: string;
|
||||
priority?: string;
|
||||
}>;
|
||||
isResult?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a todo list
|
||||
* Used by: TodoWrite, TodoRead
|
||||
*/
|
||||
export const TodoListContent: React.FC<TodoListContentProps> = ({
|
||||
todos,
|
||||
isResult = false
|
||||
}) => {
|
||||
return <TodoList todos={todos} isResult={isResult} />;
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export { MarkdownContent } from './MarkdownContent';
|
||||
export { FileListContent } from './FileListContent';
|
||||
export { TodoListContent } from './TodoListContent';
|
||||
export { TaskListContent } from './TaskListContent';
|
||||
export { TextContent } from './TextContent';
|
||||
88
src/components/chat/tools/components/DiffViewer.tsx
Normal file
88
src/components/chat/tools/components/DiffViewer.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
type DiffLine = {
|
||||
type: string;
|
||||
content: string;
|
||||
lineNum: number;
|
||||
};
|
||||
|
||||
interface DiffViewerProps {
|
||||
oldContent: string;
|
||||
newContent: string;
|
||||
filePath: string;
|
||||
createDiff: (oldStr: string, newStr: string) => DiffLine[];
|
||||
onFileClick?: () => void;
|
||||
badge?: string;
|
||||
badgeColor?: 'gray' | 'green';
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact diff viewer — VS Code-style
|
||||
*/
|
||||
export const DiffViewer: React.FC<DiffViewerProps> = ({
|
||||
oldContent,
|
||||
newContent,
|
||||
filePath,
|
||||
createDiff,
|
||||
onFileClick,
|
||||
badge = 'Diff',
|
||||
badgeColor = 'gray'
|
||||
}) => {
|
||||
const badgeClasses = badgeColor === 'green'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400';
|
||||
|
||||
const diffLines = useMemo(
|
||||
() => createDiff(oldContent, newContent),
|
||||
[createDiff, oldContent, newContent]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200/60 dark:border-gray-700/50 rounded overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-2.5 py-1 bg-gray-50/80 dark:bg-gray-800/40 border-b border-gray-200/60 dark:border-gray-700/50">
|
||||
{onFileClick ? (
|
||||
<button
|
||||
onClick={onFileClick}
|
||||
className="text-[11px] font-mono text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 truncate cursor-pointer transition-colors"
|
||||
>
|
||||
{filePath}
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-[11px] font-mono text-gray-600 dark:text-gray-400 truncate">
|
||||
{filePath}
|
||||
</span>
|
||||
)}
|
||||
<span className={`text-[10px] font-medium px-1.5 py-px rounded ${badgeClasses} flex-shrink-0 ml-2`}>
|
||||
{badge}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Diff lines */}
|
||||
<div className="text-[11px] font-mono leading-[18px]">
|
||||
{diffLines.map((diffLine, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span
|
||||
className={`w-6 text-center select-none flex-shrink-0 ${
|
||||
diffLine.type === 'removed'
|
||||
? 'bg-red-50 dark:bg-red-950/30 text-red-400 dark:text-red-500'
|
||||
: 'bg-green-50 dark:bg-green-950/30 text-green-400 dark:text-green-500'
|
||||
}`}
|
||||
>
|
||||
{diffLine.type === 'removed' ? '-' : '+'}
|
||||
</span>
|
||||
<span
|
||||
className={`px-2 flex-1 whitespace-pre-wrap ${
|
||||
diffLine.type === 'removed'
|
||||
? 'bg-red-50/50 dark:bg-red-950/20 text-red-800 dark:text-red-200'
|
||||
: 'bg-green-50/50 dark:bg-green-950/20 text-green-800 dark:text-green-200'
|
||||
}`}
|
||||
>
|
||||
{diffLine.content}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
233
src/components/chat/tools/components/OneLineDisplay.tsx
Normal file
233
src/components/chat/tools/components/OneLineDisplay.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
type ActionType = 'copy' | 'open-file' | 'jump-to-results' | 'none';
|
||||
|
||||
interface OneLineDisplayProps {
|
||||
|
||||
toolName: string;
|
||||
icon?: string;
|
||||
label?: string;
|
||||
value: string;
|
||||
secondary?: string;
|
||||
action?: ActionType;
|
||||
onAction?: () => void;
|
||||
style?: string;
|
||||
wrapText?: boolean;
|
||||
colorScheme?: {
|
||||
primary?: string;
|
||||
secondary?: string;
|
||||
background?: string;
|
||||
border?: string;
|
||||
icon?: string;
|
||||
};
|
||||
resultId?: string;
|
||||
toolResult?: any;
|
||||
toolId?: string;
|
||||
}
|
||||
|
||||
// Fallback for environments where the async Clipboard API is unavailable or blocked.
|
||||
const copyWithLegacyExecCommand = (text: string): boolean => {
|
||||
if (typeof document === 'undefined' || !document.body) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.setAttribute('readonly', '');
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
textarea.style.left = '-9999px';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, text.length);
|
||||
|
||||
let copied = false;
|
||||
try {
|
||||
copied = document.execCommand('copy');
|
||||
} catch {
|
||||
copied = false;
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
return copied;
|
||||
};
|
||||
|
||||
const copyTextToClipboard = async (text: string): Promise<boolean> => {
|
||||
if (
|
||||
typeof navigator !== 'undefined' &&
|
||||
typeof window !== 'undefined' &&
|
||||
window.isSecureContext &&
|
||||
navigator.clipboard?.writeText
|
||||
) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch {
|
||||
// Fall back below when writeText is rejected (permissions/insecure contexts/browser limits).
|
||||
}
|
||||
}
|
||||
|
||||
return copyWithLegacyExecCommand(text);
|
||||
};
|
||||
|
||||
/**
|
||||
* Unified one-line display for simple tool inputs and results
|
||||
* Used by: Bash, Read, Grep/Glob (minimized), TodoRead, etc.
|
||||
*/
|
||||
export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
|
||||
toolName,
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
secondary,
|
||||
action = 'none',
|
||||
onAction,
|
||||
style,
|
||||
wrapText = false,
|
||||
colorScheme = {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
secondary: 'text-gray-500 dark:text-gray-400',
|
||||
background: '',
|
||||
border: 'border-gray-300 dark:border-gray-600',
|
||||
icon: 'text-gray-500 dark:text-gray-400'
|
||||
},
|
||||
resultId,
|
||||
toolResult,
|
||||
toolId
|
||||
}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const isTerminal = style === 'terminal';
|
||||
|
||||
const handleAction = async () => {
|
||||
if (action === 'copy' && value) {
|
||||
const didCopy = await copyTextToClipboard(value);
|
||||
if (!didCopy) {
|
||||
return;
|
||||
}
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} else if (onAction) {
|
||||
onAction();
|
||||
}
|
||||
};
|
||||
|
||||
const renderCopyButton = () => (
|
||||
<button
|
||||
onClick={handleAction}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-all ml-1 flex-shrink-0"
|
||||
title="Copy to clipboard"
|
||||
aria-label="Copy to clipboard"
|
||||
>
|
||||
{copied ? (
|
||||
<svg className="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
// Terminal style: dark pill only around the command
|
||||
if (isTerminal) {
|
||||
return (
|
||||
<div className="group my-1">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0 pt-0.5">
|
||||
<svg className="w-3 h-3 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 flex items-start gap-2">
|
||||
<div className="bg-gray-900 dark:bg-black rounded px-2.5 py-1 flex-1 min-w-0">
|
||||
<code className={`text-xs text-green-400 font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'block truncate'}`}>
|
||||
<span className="text-green-600 dark:text-green-500 select-none">$ </span>{value}
|
||||
</code>
|
||||
</div>
|
||||
{action === 'copy' && renderCopyButton()}
|
||||
</div>
|
||||
</div>
|
||||
{secondary && (
|
||||
<div className="ml-7 mt-1">
|
||||
<span className="text-[11px] text-gray-400 dark:text-gray-500 italic">
|
||||
{secondary}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// File open style - show filename only, full path on hover
|
||||
if (action === 'open-file') {
|
||||
const displayName = value.split('/').pop() || value;
|
||||
return (
|
||||
<div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
|
||||
<span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
|
||||
<button
|
||||
onClick={handleAction}
|
||||
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-mono hover:underline transition-colors truncate"
|
||||
title={value}
|
||||
>
|
||||
{displayName}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Search / jump-to-results style
|
||||
if (action === 'jump-to-results') {
|
||||
return (
|
||||
<div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
|
||||
<span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
|
||||
<span className={`text-xs font-mono truncate flex-1 min-w-0 ${colorScheme.primary}`}>
|
||||
{value}
|
||||
</span>
|
||||
{secondary && (
|
||||
<span className="text-[11px] text-gray-400 dark:text-gray-500 italic flex-shrink-0">
|
||||
{secondary}
|
||||
</span>
|
||||
)}
|
||||
{toolResult && (
|
||||
<a
|
||||
href={`#tool-result-${toolId}`}
|
||||
className="flex-shrink-0 text-[11px] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors flex items-center gap-0.5"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Default one-line style
|
||||
return (
|
||||
<div className={`group flex items-center gap-1.5 ${colorScheme.background || ''} border-l-2 ${colorScheme.border} pl-3 py-0.5 my-0.5`}>
|
||||
{icon && icon !== 'terminal' && (
|
||||
<span className={`${colorScheme.icon} flex-shrink-0 text-xs`}>{icon}</span>
|
||||
)}
|
||||
{!icon && (label || toolName) && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">{label || toolName}</span>
|
||||
)}
|
||||
{(icon || label || toolName) && (
|
||||
<span className="text-gray-300 dark:text-gray-600 text-[10px]">/</span>
|
||||
)}
|
||||
<span className={`text-xs font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'truncate'} flex-1 min-w-0 ${colorScheme.primary}`}>
|
||||
{value}
|
||||
</span>
|
||||
{secondary && (
|
||||
<span className={`text-[11px] ${colorScheme.secondary} italic flex-shrink-0`}>
|
||||
{secondary}
|
||||
</span>
|
||||
)}
|
||||
{action === 'copy' && renderCopyButton()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
5
src/components/chat/tools/components/index.ts
Normal file
5
src/components/chat/tools/components/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { CollapsibleSection } from './CollapsibleSection';
|
||||
export { DiffViewer } from './DiffViewer';
|
||||
export { OneLineDisplay } from './OneLineDisplay';
|
||||
export { CollapsibleDisplay } from './CollapsibleDisplay';
|
||||
export * from './ContentRenderers';
|
||||
569
src/components/chat/tools/configs/toolConfigs.ts
Normal file
569
src/components/chat/tools/configs/toolConfigs.ts
Normal file
@@ -0,0 +1,569 @@
|
||||
/**
|
||||
* Centralized tool configuration registry
|
||||
* Defines display behavior for all tool types
|
||||
*/
|
||||
|
||||
export interface ToolDisplayConfig {
|
||||
input: {
|
||||
type: 'one-line' | 'collapsible' | 'hidden';
|
||||
// One-line config
|
||||
icon?: string;
|
||||
label?: string;
|
||||
getValue?: (input: any) => string;
|
||||
getSecondary?: (input: any) => string | undefined;
|
||||
action?: 'copy' | 'open-file' | 'jump-to-results' | 'none';
|
||||
style?: string;
|
||||
wrapText?: boolean;
|
||||
colorScheme?: {
|
||||
primary?: string;
|
||||
secondary?: string;
|
||||
background?: string;
|
||||
border?: string;
|
||||
icon?: string;
|
||||
};
|
||||
// Collapsible config
|
||||
title?: string | ((input: any) => string);
|
||||
defaultOpen?: boolean;
|
||||
contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task';
|
||||
getContentProps?: (input: any, helpers?: any) => any;
|
||||
actionButton?: 'file-button' | 'none';
|
||||
};
|
||||
result?: {
|
||||
hidden?: boolean;
|
||||
hideOnSuccess?: boolean;
|
||||
type?: 'one-line' | 'collapsible' | 'special';
|
||||
title?: string | ((result: any) => string);
|
||||
defaultOpen?: boolean;
|
||||
// Special result handlers
|
||||
contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task';
|
||||
getMessage?: (result: any) => string;
|
||||
getContentProps?: (result: any) => any;
|
||||
};
|
||||
}
|
||||
|
||||
export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
|
||||
// ============================================================================
|
||||
// COMMAND TOOLS
|
||||
// ============================================================================
|
||||
|
||||
Bash: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
icon: 'terminal',
|
||||
getValue: (input) => input.command,
|
||||
getSecondary: (input) => input.description,
|
||||
action: 'copy',
|
||||
style: 'terminal',
|
||||
wrapText: true,
|
||||
colorScheme: {
|
||||
primary: 'text-green-400 font-mono',
|
||||
secondary: 'text-gray-400',
|
||||
background: '',
|
||||
border: 'border-green-500 dark:border-green-400',
|
||||
icon: 'text-green-500 dark:text-green-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true,
|
||||
type: 'special'
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// FILE OPERATION TOOLS
|
||||
// ============================================================================
|
||||
|
||||
Read: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Read',
|
||||
getValue: (input) => input.file_path || '',
|
||||
action: 'open-file',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
background: '',
|
||||
border: 'border-gray-300 dark:border-gray-600',
|
||||
icon: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
|
||||
Edit: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: (input) => {
|
||||
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
|
||||
return `${filename}`;
|
||||
},
|
||||
defaultOpen: false,
|
||||
contentType: 'diff',
|
||||
actionButton: 'none',
|
||||
getContentProps: (input) => ({
|
||||
oldContent: input.old_string,
|
||||
newContent: input.new_string,
|
||||
filePath: input.file_path,
|
||||
badge: 'Edit',
|
||||
badgeColor: 'gray'
|
||||
})
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true
|
||||
}
|
||||
},
|
||||
|
||||
Write: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: (input) => {
|
||||
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
|
||||
return `${filename}`;
|
||||
},
|
||||
defaultOpen: false,
|
||||
contentType: 'diff',
|
||||
actionButton: 'none',
|
||||
getContentProps: (input) => ({
|
||||
oldContent: '',
|
||||
newContent: input.content,
|
||||
filePath: input.file_path,
|
||||
badge: 'New',
|
||||
badgeColor: 'green'
|
||||
})
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true
|
||||
}
|
||||
},
|
||||
|
||||
ApplyPatch: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: (input) => {
|
||||
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
|
||||
return `${filename}`;
|
||||
},
|
||||
defaultOpen: false,
|
||||
contentType: 'diff',
|
||||
actionButton: 'none',
|
||||
getContentProps: (input) => ({
|
||||
oldContent: input.old_string,
|
||||
newContent: input.new_string,
|
||||
filePath: input.file_path,
|
||||
badge: 'Patch',
|
||||
badgeColor: 'gray'
|
||||
})
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// SEARCH TOOLS
|
||||
// ============================================================================
|
||||
|
||||
Grep: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Grep',
|
||||
getValue: (input) => input.pattern,
|
||||
getSecondary: (input) => input.path ? `in ${input.path}` : undefined,
|
||||
action: 'jump-to-results',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
secondary: 'text-gray-500 dark:text-gray-400',
|
||||
background: '',
|
||||
border: 'border-gray-400 dark:border-gray-500',
|
||||
icon: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
defaultOpen: false,
|
||||
title: (result) => {
|
||||
const toolData = result.toolUseResult || {};
|
||||
const count = toolData.numFiles || toolData.filenames?.length || 0;
|
||||
return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
|
||||
},
|
||||
contentType: 'file-list',
|
||||
getContentProps: (result) => {
|
||||
const toolData = result.toolUseResult || {};
|
||||
return {
|
||||
files: toolData.filenames || []
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Glob: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Glob',
|
||||
getValue: (input) => input.pattern,
|
||||
getSecondary: (input) => input.path ? `in ${input.path}` : undefined,
|
||||
action: 'jump-to-results',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
secondary: 'text-gray-500 dark:text-gray-400',
|
||||
background: '',
|
||||
border: 'border-gray-400 dark:border-gray-500',
|
||||
icon: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
defaultOpen: false,
|
||||
title: (result) => {
|
||||
const toolData = result.toolUseResult || {};
|
||||
const count = toolData.numFiles || toolData.filenames?.length || 0;
|
||||
return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
|
||||
},
|
||||
contentType: 'file-list',
|
||||
getContentProps: (result) => {
|
||||
const toolData = result.toolUseResult || {};
|
||||
return {
|
||||
files: toolData.filenames || []
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// TODO TOOLS
|
||||
// ============================================================================
|
||||
|
||||
TodoWrite: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: 'Updating todo list',
|
||||
defaultOpen: false,
|
||||
contentType: 'todo-list',
|
||||
getContentProps: (input) => ({
|
||||
todos: input.todos
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'success-message',
|
||||
getMessage: () => 'Todo list updated'
|
||||
}
|
||||
},
|
||||
|
||||
TodoRead: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'TodoRead',
|
||||
getValue: () => 'reading list',
|
||||
action: 'none',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-500 dark:text-gray-400',
|
||||
border: 'border-violet-400 dark:border-violet-500'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'todo-list',
|
||||
getContentProps: (result) => {
|
||||
try {
|
||||
const content = String(result.content || '');
|
||||
let todos = null;
|
||||
if (content.startsWith('[')) {
|
||||
todos = JSON.parse(content);
|
||||
}
|
||||
return { todos, isResult: true };
|
||||
} catch (e) {
|
||||
return { todos: [], isResult: true };
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// TASK TOOLS (TaskCreate, TaskUpdate, TaskList, TaskGet)
|
||||
// ============================================================================
|
||||
|
||||
TaskCreate: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Task',
|
||||
getValue: (input) => input.subject || 'Creating task',
|
||||
getSecondary: (input) => input.status || undefined,
|
||||
action: 'none',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
border: 'border-violet-400 dark:border-violet-500',
|
||||
icon: 'text-violet-500 dark:text-violet-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true
|
||||
}
|
||||
},
|
||||
|
||||
TaskUpdate: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Task',
|
||||
getValue: (input) => {
|
||||
const parts = [];
|
||||
if (input.taskId) parts.push(`#${input.taskId}`);
|
||||
if (input.status) parts.push(input.status);
|
||||
if (input.subject) parts.push(`"${input.subject}"`);
|
||||
return parts.join(' → ') || 'updating';
|
||||
},
|
||||
action: 'none',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
border: 'border-violet-400 dark:border-violet-500',
|
||||
icon: 'text-violet-500 dark:text-violet-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
hideOnSuccess: true
|
||||
}
|
||||
},
|
||||
|
||||
TaskList: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Tasks',
|
||||
getValue: () => 'listing tasks',
|
||||
action: 'none',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-500 dark:text-gray-400',
|
||||
border: 'border-violet-400 dark:border-violet-500',
|
||||
icon: 'text-violet-500 dark:text-violet-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
defaultOpen: true,
|
||||
title: 'Task list',
|
||||
contentType: 'task',
|
||||
getContentProps: (result) => ({
|
||||
content: String(result?.content || '')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
TaskGet: {
|
||||
input: {
|
||||
type: 'one-line',
|
||||
label: 'Task',
|
||||
getValue: (input) => input.taskId ? `#${input.taskId}` : 'fetching',
|
||||
action: 'none',
|
||||
colorScheme: {
|
||||
primary: 'text-gray-700 dark:text-gray-300',
|
||||
border: 'border-violet-400 dark:border-violet-500',
|
||||
icon: 'text-violet-500 dark:text-violet-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
defaultOpen: true,
|
||||
title: 'Task details',
|
||||
contentType: 'task',
|
||||
getContentProps: (result) => ({
|
||||
content: String(result?.content || '')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// SUBAGENT TASK TOOL
|
||||
// ============================================================================
|
||||
|
||||
Task: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: (input) => {
|
||||
const subagentType = input.subagent_type || 'Agent';
|
||||
const description = input.description || 'Running task';
|
||||
return `Subagent / ${subagentType}: ${description}`;
|
||||
},
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
getContentProps: (input) => {
|
||||
// If only prompt exists (and required fields), show just the prompt
|
||||
// Otherwise show all available fields
|
||||
const hasOnlyPrompt = input.prompt &&
|
||||
!input.model &&
|
||||
!input.resume;
|
||||
|
||||
if (hasOnlyPrompt) {
|
||||
return {
|
||||
content: input.prompt || ''
|
||||
};
|
||||
}
|
||||
|
||||
// Format multiple fields
|
||||
const parts = [];
|
||||
|
||||
if (input.model) {
|
||||
parts.push(`**Model:** ${input.model}`);
|
||||
}
|
||||
|
||||
if (input.prompt) {
|
||||
parts.push(`**Prompt:**\n${input.prompt}`);
|
||||
}
|
||||
|
||||
if (input.resume) {
|
||||
parts.push(`**Resuming from:** ${input.resume}`);
|
||||
}
|
||||
|
||||
return {
|
||||
content: parts.join('\n\n')
|
||||
};
|
||||
},
|
||||
colorScheme: {
|
||||
border: 'border-purple-500 dark:border-purple-400',
|
||||
icon: 'text-purple-500 dark:text-purple-400'
|
||||
}
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
title: (result) => {
|
||||
// Check if result has content with type array (agent results often have this structure)
|
||||
if (result && result.content && Array.isArray(result.content)) {
|
||||
return 'Subagent Response';
|
||||
}
|
||||
return 'Subagent Result';
|
||||
},
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
getContentProps: (result) => {
|
||||
// Handle agent results which may have complex structure
|
||||
if (result && result.content) {
|
||||
// If content is an array (typical for agent responses with multiple text blocks)
|
||||
if (Array.isArray(result.content)) {
|
||||
const textContent = result.content
|
||||
.filter((item: any) => item.type === 'text')
|
||||
.map((item: any) => item.text)
|
||||
.join('\n\n');
|
||||
return { content: textContent || 'No response text' };
|
||||
}
|
||||
// If content is already a string
|
||||
return { content: String(result.content) };
|
||||
}
|
||||
// Fallback to string representation
|
||||
return { content: String(result || 'No response') };
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// PLAN TOOLS
|
||||
// ============================================================================
|
||||
|
||||
exit_plan_mode: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: 'Implementation plan',
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
getContentProps: (input) => ({
|
||||
content: input.plan?.replace(/\\n/g, '\n') || input.plan
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'markdown',
|
||||
getContentProps: (result) => {
|
||||
try {
|
||||
let parsed = result.content;
|
||||
if (typeof parsed === 'string') {
|
||||
parsed = JSON.parse(parsed);
|
||||
}
|
||||
return {
|
||||
content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
|
||||
};
|
||||
} catch (e) {
|
||||
return { content: '' };
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Also register as ExitPlanMode (the actual tool name used by Claude)
|
||||
ExitPlanMode: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: 'Implementation plan',
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
getContentProps: (input) => ({
|
||||
content: input.plan?.replace(/\\n/g, '\n') || input.plan
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'markdown',
|
||||
getContentProps: (result) => {
|
||||
try {
|
||||
let parsed = result.content;
|
||||
if (typeof parsed === 'string') {
|
||||
parsed = JSON.parse(parsed);
|
||||
}
|
||||
return {
|
||||
content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
|
||||
};
|
||||
} catch (e) {
|
||||
return { content: '' };
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
// DEFAULT FALLBACK
|
||||
// ============================================================================
|
||||
|
||||
Default: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
title: 'Parameters',
|
||||
defaultOpen: false,
|
||||
contentType: 'text',
|
||||
getContentProps: (input) => ({
|
||||
content: typeof input === 'string' ? input : JSON.stringify(input, null, 2),
|
||||
format: 'code'
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'text',
|
||||
getContentProps: (result) => ({
|
||||
content: String(result?.content || ''),
|
||||
format: 'plain'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get configuration for a tool, with fallback to default
|
||||
*/
|
||||
export function getToolConfig(toolName: string): ToolDisplayConfig {
|
||||
return TOOL_CONFIGS[toolName] || TOOL_CONFIGS.Default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a tool result should be hidden
|
||||
*/
|
||||
export function shouldHideToolResult(toolName: string, toolResult: any): boolean {
|
||||
const config = getToolConfig(toolName);
|
||||
|
||||
if (!config.result) return false;
|
||||
|
||||
// Always hidden
|
||||
if (config.result.hidden) return true;
|
||||
|
||||
// Hide on success only
|
||||
if (config.result.hideOnSuccess && toolResult && !toolResult.isError) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
3
src/components/chat/tools/index.ts
Normal file
3
src/components/chat/tools/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { ToolRenderer } from './ToolRenderer';
|
||||
export { getToolConfig, shouldHideToolResult } from './configs/toolConfigs';
|
||||
export * from './components';
|
||||
Reference in New Issue
Block a user