[Design] Redesign the chat composer

オープン
  • 何か問題がありますか？
#161 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
42/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
typescript
領域
design, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.
主要言語
TypeScript
スター
591
フォーク
33
平均マージ
4時間 13分
マージ済み PR（30日）
412

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

githubnext/chopin のほかの issue

githubnext/chopin の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。