githubnext/chopinPublic

Let's compose rich plans together

[Design] Redesign the chat composer

triage/human-response
MA

Base branch: main Branch: maggie/redesign-chat-composer Depends on: None

## Goal Replace the visually inconsistent chat composer shell with a polished shared composition built from proven component patterns while preserving Chopin's collaboration behavior.

## Context From Planning - The composer in `/design-audit#surfaces` looks inconsistent with the rest of Chopin and should not be reinvented from scratch. - Investigate shadcn Input Group and AI SDK AI Elements PromptInput as references, not preselected dependencies. - AI Elements PromptInput is a close reference for auto-resize, submit-status icons, attachments, and keyboard behavior: https://elements.ai-sdk.dev/components/prompt-input

## Current Behavior The production composer owns acknowledged drafts, `#` document references, a listbox picker, send/stop state, keyboard submission, connection/read-only state, and inline send errors. Its visual shell is assembled from generic field/button classes and local layout utilities.

## Desired Behavior Create a cohesive composer with a clear input surface, footer/actions, reference affordance, busy/error presentation, and excellent keyboard/focus behavior. Reuse a library pattern where it fits, but adapt it to Chopin's existing state model.

## Acceptance Criteria - [ ] A short library evaluation compares shadcn Input Group, AI Elements PromptInput, and adapting the current composer; it records the chosen direction and dependency cost. - [ ] The design audit covers empty, drafted, focused, disabled/disconnected, submitting, Planner-working/stop, reference-picker, reference-limit, and send-error states. - [ ] Existing acknowledged-draft behavior, `#` references, picker keyboard navigation, Enter/Shift-Enter behavior, submit focus restoration, stop action, and error recovery remain intact. - [ ] The composer is usable at narrow widths and with long referenced document names. - [ ] The visual shell is shared where appropriate with comment/research composers without forcing their different domain behavior into one state machine. - [ ] Maggie approves the audit specimen before production migration.

## Verification Commands - `bun run types` - `bun run ci` - `bun test apps/web/src/chat` - `bun run e2e`

## Primary Surfaces - `/design-audit#surfaces` - Chat composer in `apps/web` - Reference picker and acknowledged composer drafts

## Expected PR Checks - Repo required checks

## Report Requirements - Library comparison and decision - Before/after screenshots for key states and widths - Keyboard/accessibility evidence - Confirmation that draft/reference behavior is unchanged

## Implementation Notes - Treat external components as visual/interaction references. Chopin's wire protocol and draft reconciliation remain authoritative. - Do not replace the composer with a component that assumes a different message or attachment model. - Keep send errors associated with the composer without collapsing the input layout.

## Stop Conditions - A candidate library requires replacing Chopin's draft/reference state model. - Attachment scope or new composer features would expand beyond this visual redesign.

  1. lavaman131referenced this in [Design] Replace the composer @ mention picker with assistant-ui mentions #308last month on GitHub

  2. github-actions[bot]botadded label triage/human-responselast month on GitHub