Skip to content

Chat tools UI#1301

Merged
Kitenite merged 11 commits into
mainfrom
kitenite/chat-ui-tools
Feb 8, 2026
Merged

Chat tools UI#1301
Kitenite merged 11 commits into
mainfrom
kitenite/chat-ui-tools

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Feb 8, 2026

Description

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Documentation
  • Refactor
  • Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

Release Notes

  • New Features

    • Added visual tools for displaying shell commands, file diffs, web searches, and fetches with expandable details
    • Introduced multi-step question flows for user interactions with keyboard navigation support
    • Added text selection actions with a contextual popover menu
    • Implemented automatic grouping of consecutive tool explorations for better organization
  • Bug Fixes

    • Fixed division by zero error in context percentage calculations
    • Added default alt text for generated images
    • Improved URL parsing error handling with fallbacks
  • UI/UX Improvements

    • Simplified message layout for improved readability
    • Enhanced tool rendering consistency across the interface
  • Chores

    • Updated dependencies

@Kitenite Kitenite merged commit 8421c7a into main Feb 8, 2026
5 of 7 checks passed
@Kitenite Kitenite deleted the kitenite/chat-ui-tools branch February 8, 2026 10:05
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 8, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The PR introduces a tool-specific UI component system for the chat interface with specialized renderers for various tool types, refactors tool call rendering to use a dispatch-based architecture, groups consecutive exploring tool-calls, and integrates a text-segment enrichment pipeline into stream processing.

Changes

Cohort / File(s) Summary
Dependency Addition
apps/desktop/package.json
Adds lucide-react ^0.563.0 dependency.
Chat UI Refactoring
apps/desktop/src/renderer/screens/main/components/.../ChatMessageItem.tsx, ToolCallBlock.tsx
ChatMessageItem introduces grouping of consecutive exploring tool-calls (Read, Grep, Glob) with ExploringGroup when 3+ sequential calls occur; uses groupParts to merge and render grouped items with streaming state. ToolCallBlock refactors to dispatch-based specialized sub-block rendering (BashToolBlock, FileDiffToolBlock, WebSearchToolBlock, WebFetchToolBlock, DefaultToolBlock) with centralized state/metadata resolution instead of generic Tool wrapper.
Tool Metadata & Registry
apps/desktop/src/renderer/screens/main/components/.../tool-registry.ts
New module defining ToolMeta type, getToolMeta/getToolStatus/getDisplayPath exports; registry maps tool names to metadata with dynamic titles/subtitles based on state and outputs.
Tool-Specific Components
packages/ui/src/components/ai-elements/bash-tool.tsx, file-diff-tool.tsx, web-fetch-tool.tsx, web-search-tool.tsx, user-question-tool.tsx
New specialized tool renderers: BashTool displays shell commands with streaming state, output limiting, and expandable details; FileDiffTool renders collapsible diffs with stats and color-coded lines; WebFetchTool shows fetch metadata with collapsible content; WebSearchTool displays results with expandable list; UserQuestionTool implements multi-step question flow with keyboard navigation and answer tracking.
Supporting UI Components
packages/ui/src/components/ai-elements/exploring-group.tsx, tool-call.tsx, tool-interrupted.tsx, text-selection-popover.tsx
ExploringGroup: collapsible streaming-enabled list with auto-expand/collapse on stream state changes and scroll management. ToolCall: compact clickable tool item with loading state. ToolInterrupted: displays interrupted tool name with optional subtitle. TextSelectionPopover: contextual popover for text selection actions with positioning logic.
Existing Component Updates
packages/ui/src/components/ai-elements/code-block.tsx, context.tsx, inline-citation.tsx, message.tsx, image.tsx
CodeBlock: replaces mounted flag with cancellation logic, updates copy button icon toggle. Context: guards division by zero in percentage calculations. InlineCitation: safe URL parsing with fallback, registers named event handler. Message: simplified layout and styling (removed max-width, reduced gaps, standardized formatting). Image: provides default alt text when missing.
Stream Processing Enrichment
apps/streams/src/sdk-to-ai-chunks.ts, packages/durable-session/src/enrich-text-segments.ts, materialize.ts, packages/durable-session/src/index.ts
Introduces createTextSegmentEnricher function that maintains per-segment accumulated text and injects content field to TEXT_MESSAGE_CONTENT chunks; integrates enrichment into sdk-to-ai-chunks and materialize pipelines; re-exports from index.ts.

Sequence Diagram(s)

sequenceDiagram
    participant ChatUI as Chat Interface
    participant GroupLogic as Group/Render Logic
    participant ToolRegistry as Tool Registry
    participant SpecializedBlock as Specialized Block
    participant ToolComponent as Tool Component
    
    ChatUI->>GroupLogic: Process message parts
    GroupLogic->>GroupLogic: Identify consecutive exploring tools
    alt 3+ exploring tools in sequence
        GroupLogic->>ToolRegistry: getToolMeta for each
        GroupLogic->>GroupLogic: Build ExploringGroup items
        GroupLogic->>ToolComponent: Render ExploringGroup
    else Single/scattered tools
        GroupLogic->>ToolCallBlock: Render individual tool
        ToolCallBlock->>ToolRegistry: getToolMeta & getToolStatus
        ToolCallBlock->>SpecializedBlock: Dispatch based on tool name
        SpecializedBlock->>ToolComponent: Render BashTool/FileDiffTool/etc
        ToolComponent->>ToolComponent: Format output, handle state
        ToolComponent-->>ChatUI: Rendered tool UI
    end
Loading
sequenceDiagram
    participant StreamProc as Stream Processor
    participant Enricher as TextSegmentEnricher
    participant Materialize as Materialize
    
    StreamProc->>StreamProc: Convert message to chunks
    StreamProc->>Enricher: Create enrichChunk instance
    
    loop For each streamed chunk
        StreamProc->>Enricher: Pass chunk through enrichChunk
        Enricher->>Enricher: Accumulate text for segment
        Enricher->>Enricher: Inject content field if missing
        Enricher->>Enricher: Reset on tool call
        Enricher-->>StreamProc: Return enriched chunk
        StreamProc->>Materialize: Process enriched chunk
        Materialize->>Materialize: Apply enrichment if needed
        Materialize-->>StreamProc: Processed result
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • Nice Chat UI #1265 — Modifies ChatMessageItem.tsx and ToolCallBlock.tsx with overlapping tool rendering refactoring and shared tool-state representation logic.
  • feat(desktop): connect chat UI to durable session infrastructure #1275 — Touches same chat UI surface (ChatMessageItem, ToolCallBlock) and introduces tool metadata/state utilities (tool-registry equivalent) and durable-session integration.
  • use ui state #103 — Updates lucide-react dependency in package.json and modifies icon-related UI components with shared dependency change.

Poem

🐰✨ A rabbit hops through tools with grace,
Grouping explores in their proper place,
With specialized blocks and streams enriched,
Each message rendered, perfectly pitched!
From bash to diffs, the UI takes flight—
New components gleaming, oh what a sight! 🌟

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch kitenite/chat-ui-tools

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 8, 2026

🚀 Preview Deployment

🔗 Preview Links

Service Status Link
Neon Database (Neon) View Branch
Fly.io Electric (Fly.io) View App
Vercel API (Vercel) Open Preview
Vercel Web (Vercel) Open Preview
Vercel Marketing (Vercel) Open Preview
Vercel Admin (Vercel) Open Preview
Vercel Docs (Vercel) Open Preview

Preview updates automatically with new commits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant