feat: 引用块(QuoteChip)右上角增加小删除按钮,支持快捷移除添加到对话的文字
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 401
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
**提交人**: HalFree
**客户端版本**: 0.1.58
---
## 使用场景 / Use case
在会话消息流中选中回答文字,选区上方会浮出「添加到对话」按钮(SelectionQuoteButton);点击后该段文字作为引用块(QuoteChip)进入当前会话草稿/消息,便于把模型回答中的片段继续追问或引用。
## 当前痛点 / Pain
`QuoteChip` 源码注释明确写明「输入框与消息气泡复用同一套紧凑尺寸……**均不显示关闭按钮**」。这意味着:一旦把某段文字添加进对话,**没有对该小段引用的快捷删除入口**——用户若误加、或加完不想用了,只能清空整段草稿或手动改文本,无法精准移除这一颗引用胶囊。
## 诉求 / Ask
在添加进对话的那小段引用块(QuoteChip)右上角增加一个小的删除按钮,点击即从对话草稿/消息中移除该条引用,不影响其它内容与原文。交互保持轻量、低调(小号图标,hover 显现或常驻小尺寸)。
## 建议方案 / Proposal
**数据层**:引用为 `ChatQuote`(`apps/desktop/src/renderer/lib/chatQuotes.ts`),草稿引用存于 `composerDraftStore`(已有 `appendQuoteToDraft`)。建议对称新增按 id/索引移除引用的方法(如 `removeQuoteFromDraft`),草稿态删除直接走此通道。
**视图层**:
- 改动 `apps/desktop/src/renderer/components/chat/QuoteChip.tsx`(及底层 `InlineReferenceChip`),新增可选 `onRemove` prop;传入时渲染右上角小删除按钮。
- 区分两种场景:输入框草稿内的引用(可删,低风险)vs 已发送消息气泡内的引用(删除涉及消息持久化,需评估是否一并支持)。
- 复用现有 `lucide-react` 图标与 tooltip 体系,保持与现有 action 风格一致。
**范围建议(一期)**:优先支持**草稿/输入框内引用块**的快捷删除(改动最小、风险最低、覆盖绝大多数「加完想反悔」场景);已发送消息内的引用删除列为后续,需单独评估持久化影响。
**关键约束**:
1. 删除只移除该条引用胶囊,不动原文消息、不动其它引用。
2. 草稿态删除可撤销(用户未知是否需 Undo,建议至少不破坏发送)。
3. 已发送消息内的引用删除若一期不做,按钮在该场景不显示,保持现状。
## 关联
- 添加入口:`apps/desktop/src/renderer/components/chat/SelectionQuoteButton.tsx`
- 引用渲染:`apps/desktop/src/renderer/components/chat/QuoteChip.tsx`、`InlineReferenceChip.tsx`
- 草稿存储:`apps/desktop/src/renderer/lib/composerDraftStore.ts`
## 验收 / Acceptance
- [ ] 草稿/输入框内的引用块右上角出现小删除按钮。
- [ ] 点击删除该条引用,其它内容与原文不受影响。
- [ ] 空引用态(删到最后一条)输入框恢复正常可发送状态。
- [ ] 已发送消息内引用:一期不显示删除按钮(或按评估支持,并在提案注明)。
- [ ] 覆盖基础单测(参考 `selectionQuote*`、`chatQuotes` 相关测试)。
---
**版本区域**: CN
**OS**: win32 x64 (10.0.26200)
**界面语言**: zh-CN
Contributor guide
Research direction
Start with apps/desktop/src/renderer/components/chat/QuoteChip.tsx and InlineReferenceChip.tsx, then trace draft updates through composerDraftStore.ts and appendQuoteToDraft. Review the related selectionQuote* and chatQuotes tests before changing behavior. Done means draft quotes can be removed individually without affecting other content, empty drafts remain sendable, and sent-message quotes show no removal control in this phase.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 74/100