Chat Interface & Messaging
Relevant source files
The following files were used as context for generating this wiki page:
The Chat Interface and Messaging system is the primary interaction layer of the Agent Cowork application. It provides a visual environment for users to collaborate with an AI agent, allowing for the execution of complex tasks such as file management, programming, and command execution. Unlike traditional CLI-based AI tools, this system offers real-time visual feedback, session history management, and interactive permission controls.
Sources: README.md:27-38, src/ui/App.tsx:1-20
Component Architecture & Data Flow
The interface is built using React 19 and follows a unidirectional data flow mediated by IPC (Inter-Process Communication) between the Electron main process and the renderer. The UI is structured into a main application container (App.tsx) that manages the scrollable message list, a sidebar for session navigation, and a persistent prompt input area.
Messaging Lifecycle
The messaging lifecycle begins with user input in the PromptInput component. If no session exists, the system generates a title and starts a new session via the session.start event. For existing sessions, messages are appended via session.continue.
The diagram above illustrates the path of a message from the User Interface to the AI backend and back to the display.
Sources: src/ui/App.tsx:44-90, src/ui/components/PromptInput.tsx:28-50, src/ui/types.ts:28-40
Message Rendering & Event Cards
Messages are rendered dynamically using the EventCard (exported as MessageCard) component. This component handles diverse message types ranging from raw user prompts to complex tool executions and system status updates.
Supported Message Types
| Message Type | Component / Logic | Description |
|---|---|---|
user_prompt | UserMessageCard | Displays the text input from the user with Markdown support. |
thinking | AssistantBlockCard | Shows the AI's internal reasoning process (Chain of Thought). |
text | AssistantBlockCard | The final text response provided by the assistant. |
tool_use | ToolUseCard | Visualizes an agent action (e.g., Bash, Read, Write, Edit, WebFetch). |
tool_result | ToolResult | Shows the output of a tool execution, including error states and logs. |
system | SystemInfoCard | Displays session metadata like Session ID, Model, and CWD. |
result | SessionResult | Summarizes session statistics like duration, cost, and token usage. |
Sources: src/ui/components/EventCard.tsx:244-315, src/ui/types.ts:7-13
Real-time Streaming
To provide immediate feedback, the system handles partial message deltas. The App component listens for stream_event payloads, specifically tracking content_block_start, content_block_delta, and content_block_stop to assemble messages incrementally.
This sequence ensures a fluid "typing" effect as the AI generates responses.
Sources: src/ui/App.tsx:55-83, src/ui/components/EventCard.tsx:11-20
Tool Interaction & Permission Management
A critical feature of the messaging system is the interactive permission layer. When the agent attempts a sensitive action (e.g., executing a Bash command), the UI intercepts the request and presents a DecisionPanel.
The Decision Workflow
- Request: The backend sends a
permission.requestevent. - Display: The
DecisionPanelrenders the tool name and the proposed input (e.g., the specific code to be written). - Interaction: The user can "Allow", "Deny", or provide answers to questions via
AskUserQuestion. - Response: The UI sends a
permission.responseback to the backend to proceed or abort.
Sources: src/ui/components/DecisionPanel.tsx:12-30, src/ui/components/EventCard.tsx:190-218, src/ui/types.ts:34-35
Interactive Questions
The AskUserQuestion tool allows the agent to prompt the user for selections or clarification. The DecisionPanel supports multi-select options and free-text "Other" inputs.
Markdown & Syntax Highlighting
The system utilizes react-markdown to render AI responses. This ensures that code snippets, headers, and lists are displayed with professional formatting.
- Plugins: Uses
remark-gfmfor GitHub Flavored Markdown andrehype-highlightfor syntax highlighting. - Styling: Custom components are mapped to Markdown elements (h1, p, code, pre) to ensure consistency with the application's "Claude orange" and "Ink" color theme.
- Code Blocks: Differentiates between inline code (rendered in a subtle background) and block code (rendered in a scrollable container).
Sources: src/ui/render/markdown.tsx:6-55, src/ui/index.css:26-38
Session Persistence
Messages are not just volatile UI state; they are persisted in a SQLite database using the SessionStore. Each message is recorded via the recordMessage method, which stores the session ID and the full JSON data of the StreamMessage.
Summary
The Chat Interface & Messaging system provides a robust, real-time environment for AI collaboration. By combining streaming deltas for responsiveness, Markdown for clarity, and an interactive permission panel for security, it transforms the Claude Agent SDK into a user-friendly desktop experience. All interactions are backed by a persistent SQLite store, ensuring session history and continuity across application restarts.