Qurator: adjust styling for tool messages

[nl0]

Make tool messages less prominent

• Tool icon
• Status icons
• Tool messages now use faint(er) color with hover effects
• Tool details are collapsed by default and expandable on click

[codecov]

Codecov Report

❌ Patch coverage is 14.28571% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 39.44%. Comparing base (6885b9e) to head (92abdc5).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
catalog/app/components/Assistant/UI/Chat/Chat.tsx	14.28%	12 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4572      +/-   ##
==========================================
- Coverage   39.44%   39.44%   -0.01%     
==========================================
  Files         852      852              
  Lines       36848    36860      +12     
  Branches     5760     6017     +257     
==========================================
+ Hits        14536    14538       +2     
+ Misses      21794    21098     -696     
- Partials      518     1224     +706     

Flag	Coverage Δ
api-python	91.67% <ø> (ø)
catalog	20.18% <14.28%> (-0.01%)	⬇️
lambda	92.60% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[greptile-apps]

Greptile Overview

Summary

This PR enhances the Assistant Chat UI by introducing better visual hierarchy for tool messages through a new collapsible `ToolMessage` component. The changes include renaming the 'bright' color scheme to 'normal' and adding a new 'faint' color scheme specifically for tool messages, which uses a grey background with reduced opacity and hover effects. The core improvement is the new `ToolMessage` component that displays tool usage information in a collapsed state by default, with expandable details and status icons (`Build`, `CheckCircleOutline`, `ErrorOutline`, `CircularProgress`) that provide immediate visual feedback about tool execution states.

The implementation replaces direct MessageContainer usage in both ToolUseEvent and ToolUseState components with the new ToolMessage component. This creates a more organized chat interface where tool messages have a subtle presence that doesn't compete with user and assistant messages for attention, while still providing full functionality through click-to-expand interaction patterns.

Important Files Changed

Changed Files

Filename	Score	Overview
catalog/app/components/Assistant/UI/Chat/Chat.tsx	4/5	Introduces new ToolMessage component with collapsible interface, faint color scheme, and status icons for better tool message visual hierarchy

Confidence score: 4/5

• This PR is safe to merge with minimal risk as it focuses on UI improvements without changing core functionality
• Score reflects well-structured component implementation with proper TypeScript typing and Material-UI integration
• Pay attention to the ToolMessage component's expand/collapse behavior and ensure proper testing of hover effects across different browsers

Sequence Diagram

sequenceDiagram
    participant User
    participant Chat
    participant MessageContainer
    participant ToolMessage
    participant Model
    participant DevTools
    participant Input

    User->>Chat: "Opens chat interface"
    Chat->>MessageContainer: "Renders initial greeting message"
    MessageContainer-->>Chat: "Displays greeting"

    User->>Input: "Types message and submits"
    Input->>Chat: "onSubmit(content)"
    Chat->>Model: "dispatch(Ask action)"
    Model-->>Chat: "Updates state to WaitingForAssistant"
    Chat->>MessageContainer: "Renders user message"
    Chat->>MessageContainer: "Renders WaitingState"
    MessageContainer-->>Chat: "Displays processing message"

    Model-->>Chat: "Updates state to ToolUse"
    Chat->>ToolMessage: "Renders ToolUseState with running status"
    ToolMessage->>MessageContainer: "Creates faint colored container"
    MessageContainer-->>ToolMessage: "Styled tool message"
    ToolMessage-->>Chat: "Collapsible tool message with spinner"

    User->>ToolMessage: "Clicks to expand details"
    ToolMessage->>ToolMessage: "toggleExpanded()"
    ToolMessage-->>User: "Shows JsonDisplay with tool details"

    Model-->>Chat: "Tool execution completes"
    Chat->>ToolMessage: "Updates with success/error status"
    ToolMessage-->>Chat: "Shows status icon (success/error)"

    Model-->>Chat: "Assistant response ready"
    Chat->>MessageContainer: "Renders assistant message"
    MessageContainer-->>Chat: "Displays assistant response"

    User->>Chat: "Clicks menu button"
    Chat->>Chat: "toggleMenu()"
    Chat-->>User: "Shows menu options"

    User->>Chat: "Selects 'Developer Tools'"
    Chat->>DevTools: "Renders developer panel"
    DevTools-->>Chat: "Shows dev tools interface"

    User->>MessageContainer: "Hovers over message with actions"
    MessageContainer->>MessageContainer: "Shows discard action"
    User->>MessageContainer: "Clicks discard"
    MessageContainer->>Model: "dispatch(Discard action)"
    Model-->>Chat: "Updates conversation state"

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[nl0]

@fiskus ping