#15 - Frontend chat view — message rendering & input - charles/peon

claude-desktop commented

2026-04-16 11:31:36 +00:00

Collaborator

User story

As a user chatting with an AI agent, I want the chat view to render messages with Markdown formatting and syntax-highlighted code blocks, stream assistant responses in real-time, display tool calls as collapsible widgets, and provide a text input area with send functionality, so that I have a rich, responsive chat experience.

Acceptance criteria

ChatViewModel (RELM4 component, `components/chat_view.rs`)

Displays all messages for the active thread's turns (from read model)
Auto-scrolls to the latest message
Shows a spinner/indicator when the agent is running (ThreadStatus::Running)

Message rendering

MessageContent::Text — parsed as Markdown:
- Inline text rendered via gtk::Label with Pango markup (markdown_to_pango() helper)
- Code blocks rendered via sourceview5::View with syntax highlighting (language detection from fence)
- sourceview5::View is read-only with line numbers enabled
MessageContent::ToolCall — collapsible widget showing tool name and JSON input
MessageContent::ToolResult — shown inline, errors highlighted in red
MessageContent::ThinkingBlock — rendered in a distinct visual style (muted, collapsible)
User messages vs assistant messages have distinct visual alignment/styling

Streaming

MessageChunkReceived events append text to the current assistant message in real-time
No full re-render on each chunk — incremental text append

Message input

GtkTextView (multi-line) at the bottom of the chat view
Ctrl+Return sends the message (dispatches StartTurn command)
Return inserts a newline (multi-line input)
Input is disabled when thread is running or in AwaitingApproval state
Clear input after sending

Supervised mode

When ThreadStatus::AwaitingApproval: show Approve/Reject buttons
Approve dispatches ApprovePendingAction, Reject dispatches RejectPendingAction

Tests

Test: markdown_to_pango converts basic markdown (bold, italic, inline code, links)
Test: code block extraction from markdown text produces correct language + code pairs
Test: chat view renders correct number of message widgets from read model

Out of scope

Image/attachment rendering (post-v1)
Message editing or deletion

References

Spec §10.3 (ChatView — rendu des messages)
Spec Annexe A (streaming flow)

Dependencies

Blocked by: #4 (MessageContent + ThreadStatus types), #13 (AppModel, AppMsg)
Blocks: none (v0.1 leaf)
Branch off: issue-13-app-shell
Full graph: #21

## User story As a **user chatting with an AI agent**, I want the chat view to render messages with Markdown formatting and syntax-highlighted code blocks, stream assistant responses in real-time, display tool calls as collapsible widgets, and provide a text input area with send functionality, so that I have a rich, responsive chat experience. ## Acceptance criteria ### ChatViewModel (RELM4 component, `components/chat_view.rs`) - [ ] Displays all messages for the active thread's turns (from read model) - [ ] Auto-scrolls to the latest message - [ ] Shows a spinner/indicator when the agent is running (ThreadStatus::Running) ### Message rendering - [ ] `MessageContent::Text` — parsed as Markdown: - Inline text rendered via `gtk::Label` with Pango markup (`markdown_to_pango()` helper) - Code blocks rendered via `sourceview5::View` with syntax highlighting (language detection from fence) - `sourceview5::View` is read-only with line numbers enabled - [ ] `MessageContent::ToolCall` — collapsible widget showing tool name and JSON input - [ ] `MessageContent::ToolResult` — shown inline, errors highlighted in red - [ ] `MessageContent::ThinkingBlock` — rendered in a distinct visual style (muted, collapsible) - [ ] User messages vs assistant messages have distinct visual alignment/styling ### Streaming - [ ] `MessageChunkReceived` events append text to the current assistant message in real-time - [ ] No full re-render on each chunk — incremental text append ### Message input - [ ] `GtkTextView` (multi-line) at the bottom of the chat view - [ ] `Ctrl+Return` sends the message (dispatches `StartTurn` command) - [ ] `Return` inserts a newline (multi-line input) - [ ] Input is disabled when thread is running or in AwaitingApproval state - [ ] Clear input after sending ### Supervised mode - [ ] When `ThreadStatus::AwaitingApproval`: show Approve/Reject buttons - [ ] Approve dispatches `ApprovePendingAction`, Reject dispatches `RejectPendingAction` ### Tests - [ ] Test: markdown_to_pango converts basic markdown (bold, italic, inline code, links) - [ ] Test: code block extraction from markdown text produces correct language + code pairs - [ ] Test: chat view renders correct number of message widgets from read model ## Out of scope - Image/attachment rendering (post-v1) - Message editing or deletion ## References - Spec §10.3 (ChatView — rendu des messages) - Spec Annexe A (streaming flow) ## Dependencies - **Blocked by:** #4 (MessageContent + ThreadStatus types), #13 (AppModel, AppMsg) - **Blocks:** none (v0.1 leaf) - **Branch off:** `issue-13-app-shell` - **Full graph:** #21

claude-desktop added this to the v0.1.0 milestone

2026-04-16 11:31:36 +00:00

claude-desktop added the

area:frontend

type:user-story

labels

2026-04-16 11:31:36 +00:00

claude-desktop referenced this issue

2026-04-16 20:22:35 +00:00

v0.1.0 dependency tree and implementation order #21

claude-desktop referenced this issue

2026-04-16 20:24:37 +00:00