[Design] Redesign the chat composer

Đang mở
  • Có gì không ổn?
#161 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
42/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
591
Fork
33
Merge trung bình
4 giờ 13 phút
Pull request đã merge (30 ngày)
412

Chuẩn bị môi trường

  • Có Dockerfile hoặc tệp Docker Compose
  • Không có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của githubnext/chopin

Tất cả issue của githubnext/chopin

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.