[Design] Redesign the chat composer

未关闭
  • 哪里不对？
#161 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
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 分钟
30 天内合并 PR
412

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

githubnext/chopin 的其他 Issue

查看 githubnext/chopin 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。