[Design] Redesign the chat composer

Aberta
  • Algo errado?
#161 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
42/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
design, frontend

Direção de pesquisa

Start at /design-audit#surfaces and the chat composer in apps/web, then compare the listed shadcn Input Group and AI Elements PromptInput references with the current behavior. Run bun test apps/web/src/chat and review the required verification commands while checking each listed visual, keyboard, draft, reference, and error state. Done means the chosen library direction is documented, Maggie approves the specimen, and existing composer behavior remains intact.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

triage/human-response

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.
Linguagem predominante
TypeScript
Estrelas
591
Forks
33
Merge médio
4h 13min
PRs com merge (30d)
412

Preparar o ambiente

  • Inclui um Dockerfile ou arquivo Docker Compose
  • Sem modelo de pull request
  • Sem guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de githubnext/chopin

Todas as issues de githubnext/chopin

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.