diff --git a/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.i18n.yaml b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.i18n.yaml new file mode 100644 index 0000000000..efb7b7a757 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.i18n.yaml @@ -0,0 +1,22 @@ +# Bilingual-pair consistency record for 2026-08-26-web-rich-text-quotes.md (docs/i18n/README.md): per heading +# section, a hash of its English and Chinese blocks outside code blocks and generated regions. +# After editing either side, bring the other along and re-record with: +# pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.md +/agent-note-durable-rich-text-quotes-in-the-web-composer: + en: 49522a0a81db6981 + zh: 92e81872377e96e9 +/agent-note-durable-rich-text-quotes-in-the-web-composer/problem: + en: 7bd295c086ad9905 + zh: 704dc665acfaa5ec +/agent-note-durable-rich-text-quotes-in-the-web-composer/decision: + en: d27134e46ab55ea0 + zh: 3f1da063b661a1b3 +/agent-note-durable-rich-text-quotes-in-the-web-composer/alternatives-considered: + en: 1999da9f900c9be3 + zh: cf6aad990a180851 +/agent-note-durable-rich-text-quotes-in-the-web-composer/verification: + en: b320c262d9c08ee4 + zh: 6047f864213a2b4c +/agent-note-durable-rich-text-quotes-in-the-web-composer/consequences: + en: bb6f4338aad0ec41 + zh: 93a4396b619492b1 diff --git a/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.md b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.md new file mode 100644 index 0000000000..c122d6c671 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.md @@ -0,0 +1,37 @@ +# Agent Note: Durable rich-text quotes in the Web composer + +Status: implemented + +English | [中文](2026-08-26-web-rich-text-quotes.zh.md) + +## Problem + +Selected transcript excerpts need atomic editing and reload-safe drafts without depending on the availability of their source messages. + +## Decision + +`ui-conversation` owns an inline `QuoteNode` beside reference nodes in the existing editor runtime. Its clipboard projection is canonical Markdown, while its detect projection is one atomic character. The existing semantic `DraftSnapshot` persists quote text and clipboard-coordinate spans beside references; raw Lexical JSON and runtime node identities remain outside browser storage. Session switching, Workspace transfer, and failed-send restoration use this same snapshot. Quote controls receive runtime-only locale labels. + +`ui-chat` accepts one nonblank browser selection within displayed user content, including pending steering and local submission echoes or finalized Assistant text and reasoning. Streaming and interrupted Assistant output, tools, injected context, and Markdown controls are excluded. Selection extraction follows visible line and block breaks and inserts through the current Session input actions. + +Text interaction belongs to the shared primitive and the Chat-owned list Slot. Quote registers only gesture admission and insertion. Local absolute placement keeps actions in the content coordinate system; outside presses and Escape close the same area-owned interaction for every consumer. Dismissal and selection clearing are separate operations so a failed insertion preserves the excerpt. Context-menu consumers cancel their originating browser event synchronously; rendering a Slot cannot retroactively cancel it. + +The [text-derived blockquote decision](../simplification/2026-10-13-text-derived-message-quotes.md) owns sent-message recognition and presentation. The [UserText evaluator](../architecture/2026-10-10-user-text-json-nodes.md) renders derived quote nodes through the existing matcher registry. + +Quotes display a compact single-line preview; clipped excerpts expose the complete text in a shared inline HoverCard. Their text has no source-navigation action. The editable draft alone exposes whole-node removal. Only selected text survives message persistence: no source Session, message, or selection coordinates are retained. + +## Alternatives considered + +**Persist Lexical JSON or introduce another draft format.** Editor serialization would become a product storage obligation, while a second draft format would duplicate restoration and transfer ownership. The existing semantic snapshot already carries reference spans and extends to quotes. + +**Retain source navigation.** Availability checks would require source coordinates, subscriptions, history pagination, focus routing, and failure states. A future navigation feature must define those durable coordinates and target-owned actions before adding them. + +**Store UserText nodes or callbacks.** Text nodes are derived presentation, and callbacks are runtime state. Both can change independently of the logged input and semantic draft. + +## Verification + +Composer tests cover atomic removal and undo, semantic storage round trips, Markdown serialization, and failed-send restoration. UserText tests cover text recognition, literal excerpt rendering, literal references, and credential spelling. The keyless Web scenario exercises selection, clipped previews, draft switching and reload, persistence, and ordinary Markdown submission through the shipped composition. + +## Consequences + +The draft and Session retain enough data for atomic editing and replay without retaining source-history dependencies. UserText remains a display projection; its JSON nodes never replace authoritative content. Browser-local storage retains unsent selected text under the existing draft policy. diff --git a/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.zh.md b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.zh.md new file mode 100644 index 0000000000..7f324768e1 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-26-web-rich-text-quotes.zh.md @@ -0,0 +1,37 @@ +# Agent Note：Web composer 中的持久富文本 quote + +Status: implemented + +[English](2026-08-26-web-rich-text-quotes.md) | 中文 + +## 问题 + +所选 transcript 摘录需要原子编辑与可跨刷新恢复的草稿，不依赖来源消息的可用性。 + +## 决策 + +`ui-conversation` 在现有编辑器 runtime 中于 reference 节点旁拥有行内 `QuoteNode`。其剪贴板投影是规范 Markdown，检测投影则是一个原子字符。现有语义 `DraftSnapshot` 在 reference 旁持久化 quote 文本与剪贴板坐标范围；原始 Lexical JSON 与 runtime 节点身份不进入浏览器存储。Session 切换、Workspace 转移和发送失败恢复使用同一个 snapshot。Quote 控件接收仅用于 runtime 的 locale 标签。 + +`ui-chat` 接受已展示的用户内容（包括待接纳 steering 和本地发送回显）、或最终完成的 Assistant 文本与 reasoning 中的一个非空浏览器选区。流式及中断的 Assistant 输出、tool、注入上下文和 Markdown 控件被排除。选区提取遵循可见的行与 block 换行，通过当前 Session 的 input actions 插入。 + +文本交互属于共享基础能力与 Chat 拥有的 list Slot，quote 只注册手势接管与插入操作。本地绝对定位让操作处于内容坐标系；外部按下与 Escape 对所有使用方关闭同一个区域拥有的交互。关闭展示与清除选区是独立操作，因此插入失败时保留摘录。右键菜单使用方同步取消来源浏览器事件；渲染 Slot 无法事后取消事件。 + +[文本派生 blockquote 决策](../simplification/2026-10-13-text-derived-message-quotes.zh.md)拥有发送后的消息识别与展示。[UserText 计算器](../architecture/2026-10-10-user-text-json-nodes.zh.md)通过现有 matcher registry 渲染派生的 quote 节点。 + +Quote 显示紧凑的单行预览；截断的摘录通过共享行内 HoverCard 展示完整文本。文本不提供来源导航操作，只有可编辑草稿提供整节点删除。消息持久化只保留所选文本：不保留来源 Session、消息或选区坐标。 + +## 考虑过的替代方案 + +**持久化 Lexical JSON 或引入另一套草稿格式。** 编辑器序列化会成为产品存储义务，第二套草稿格式则会重复拥有恢复与转移逻辑。现有语义 snapshot 已携带 reference 范围，也可扩展到 quote。 + +**保留来源导航。** 可用性检查需要来源坐标、订阅、历史分页、焦点路由和失败状态。未来若添加导航功能，必须先定义其持久坐标与目标拥有的操作。 + +**存储 UserText 节点或 callback。** 文本节点是派生的展示，callback 是 runtime 状态；二者都可以独立于记录的输入和语义草稿变化。 + +## 验证 + +Composer 测试覆盖原子删除与撤销、语义存储往返、Markdown 序列化和发送失败恢复。UserText 测试覆盖文本识别、字面摘录展示、字面 reference 与凭据原文。无密钥 Web 场景通过已发布组合验证选区、截断预览、草稿切换与刷新、持久化和普通 Markdown 提交。 + +## 后果 + +草稿与 Session 保留足以支持原子编辑和 replay 的数据，不保留对来源历史的依赖。UserText 仍是展示投影；其 JSON 节点不会替代权威 content。浏览器本地存储按现有草稿策略保留未发送的所选文本。 diff --git a/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.i18n.yaml b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.i18n.yaml new file mode 100644 index 0000000000..0b25c139c2 --- /dev/null +++ b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.i18n.yaml @@ -0,0 +1,22 @@ +# Bilingual-pair consistency record for 2026-10-13-text-derived-message-quotes.md (docs/i18n/README.md): per heading +# section, a hash of its English and Chinese blocks outside code blocks and generated regions. +# After editing either side, bring the other along and re-record with: +# pnpm run verify-translation-pairing --write .agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.md +/agent-note-recognize-message-quotes-from-markdown-text: + en: a2abd7f693937d51 + zh: f9e4bb817536dbbe +/agent-note-recognize-message-quotes-from-markdown-text/problem: + en: d71ebbacbd9bd8a3 + zh: 45c1f7fd1d797f61 +/agent-note-recognize-message-quotes-from-markdown-text/decision: + en: 0abb09d5ba396f69 + zh: dd067b0ca5fd376f +/agent-note-recognize-message-quotes-from-markdown-text/alternatives-considered: + en: 05c6009796927583 + zh: 9f08229767c07b31 +/agent-note-recognize-message-quotes-from-markdown-text/verification: + en: 790598fd0f3f0c67 + zh: 0399e0e322ffca40 +/agent-note-recognize-message-quotes-from-markdown-text/consequences: + en: 21f96c04f6edcc1d + zh: 8ea3f42a8e981592 diff --git a/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.md b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.md new file mode 100644 index 0000000000..2a6ecaa833 --- /dev/null +++ b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.md @@ -0,0 +1,29 @@ +# Agent Note: Recognize message quotes from Markdown text + +Status: implemented + +English | [中文](2026-10-13-text-derived-message-quotes.zh.md) + +## Problem + +Quote-only content indexes duplicate information in Markdown text and require coordinated prompt, source, echo, and queue metadata. The same visible blockquote can acquire different presentation and direct-input behavior depending on how it was created. + +## Decision + +Messages contain ordinary Markdown text. The shared blockquote matcher recognizes consecutive explicitly marked lines for UserText presentation. Hand-written and composer-created blockquotes have identical sent-message behavior. Quote previews display decoded text without running UserText rules over their contents. Session-reference and skill processing applies normally to quoted text; recognized Session labels retain the same presentation as the surrounding quote text. + +The [rich-text quote feature](../feature/2026-08-26-web-rich-text-quotes.md) retains atomic draft nodes and semantic restoration spans. This decision supersedes only its durable quote-index distinction. UserText nodes and recognition ranges remain derived values. + +## Alternatives considered + +**Keep quote-only indexes.** Indexes preserve a distinction between typed and inserted quotes, but that distinction is unnecessary for sent messages and requires metadata coordination across every producer and renderer. + +**Remove atomic draft spans.** Plain text cannot restore whole-node editing, undo, Session switching, or failed-send restoration. Draft spans remain browser-owned editing state. + +## Verification + +Matcher tests cover original offsets, explicit line markers, blank excerpts, and literal nested quotes. Composer tests assert ordinary text submission. The shipped Web scenario checks text-only persistence and quote display after reload. + +## Consequences + +Messages need no quote fields or content indexes. Typed blockquotes also display as quotes without changing direct-input processing. Recognition deliberately covers explicit quote lines rather than Markdown lazy continuation or fenced-code parsing. Source navigation still requires a separate durable-coordinate design. diff --git a/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.zh.md b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.zh.md new file mode 100644 index 0000000000..c9ee20f906 --- /dev/null +++ b/.agents/notes/implemented/simplification/2026-10-13-text-derived-message-quotes.zh.md @@ -0,0 +1,29 @@ +# Agent Note: 从 Markdown 文本识别消息 quote + +Status: implemented + +[English](2026-10-13-text-derived-message-quotes.md) | 中文 + +## 问题 + +纯 quote content 索引重复了 Markdown 文本中的信息，并要求 prompt、source、回显与队列协同携带元数据。同样可见的 blockquote 会因创建方式不同而获得不同的展示与直接输入行为。 + +## 决策 + +消息包含普通 Markdown 文本。共享 blockquote 匹配器识别连续的显式标记行，用于 UserText 展示。手写与输入框创建的 blockquote 在发送后具有相同行为。Quote 预览直接展示还原后的文本，不对正文再次运行 UserText 规则。Session-reference 与 skill 处理照常作用于引用文本；已识别的 Session 标签与周围引用文字保持相同样式。 + +[富文本 quote 功能](../feature/2026-08-26-web-rich-text-quotes.zh.md)保留原子草稿节点与语义恢复范围。本决策仅取代其持久 quote 索引区分。UserText 节点与识别范围仍是派生值。 + +## 考虑过的替代方案 + +**保留纯 quote 索引。** 索引保留手写与插入 quote 的区别，但发送后的消息无需这一区分，且要求每个生产方与渲染器协同处理元数据。 + +**移除原子草稿范围。** 纯文本无法恢复整节点编辑、撤销、Session 切换或发送失败恢复。草稿范围仍是浏览器拥有的编辑状态。 + +## 验证 + +匹配器测试覆盖原始偏移、显式行标记、空白摘录与字面的嵌套 quote。Composer 测试断言普通文本提交。已发布 Web 场景检查仅文本的持久化与刷新后的 quote 展示。 + +## 后果 + +消息无需 quote 字段或 content 索引。手写 blockquote 也显示为 quote，不改变直接输入处理。识别有意限定为显式引用行，不涵盖 Markdown 懒惰续行或代码围栏解析。来源导航仍需独立设计持久坐标。 diff --git a/apps/web/package.json b/apps/web/package.json index 90e6296c65..8fc868a93f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -72,5 +72,8 @@ "@deepseek-ai/dsh-experimental-cot-translation-bundle": "workspace:*", "@deepseek-ai/dsh-experimental-worktree": "workspace:*", "@deepseek-ai/dsh-experimental-plugin-market-bundle": "workspace:*" + }, + "dependencies": { + "@deepseek-ai/dsh-message-quotes": "workspace:*" } } diff --git a/apps/web/tests/caption-overlays.e2e.ts b/apps/web/tests/caption-overlays.e2e.ts index d0713573c2..2a86277843 100644 --- a/apps/web/tests/caption-overlays.e2e.ts +++ b/apps/web/tests/caption-overlays.e2e.ts @@ -26,6 +26,10 @@ it('keeps settings and expanded plugin dialogs clear of the Windows caption acro await openSettings(page, 'zh') const settings = page.getByRole('dialog', { name: '设置', exact: true }) const settingsMask = settings.locator('..').locator(':scope > [aria-hidden="true"]') + const permissionText = settings.getByText('权限', { exact: true }).locator('..') + expect(await permissionText.evaluate(el => getComputedStyle(el).paddingRight)).toBe('48px') + const cubes = settings.getByRole('button', { name: /浅色|深色|跟随系统/ }) + expect(await cubes.first().evaluate(el => getComputedStyle(el).flexBasis)).toBe('180px') for (const fullscreen of [false, true, false]) { await page.evaluate(value => document.documentElement.toggleAttribute('data-fullscreen', value), fullscreen) const margin = fullscreen ? 24 : 60 @@ -86,8 +90,10 @@ it('keeps settings and expanded plugin dialogs clear of the Windows caption acro }, platform) if (await reopenSidebar.isVisible()) await reopenSidebar.click() await openSettings(page, 'zh') - await expect.poll(async () => (await settings.boundingBox())?.y).toBe(platform === 'darwin' ? 68 : 24) + await expect.poll(async () => (await settings.boundingBox())?.y).toBe(platform === 'darwin' ? 68 : 0) expect((await settingsMask.boundingBox())?.y).toBe(0) + expect(await permissionText.evaluate(el => getComputedStyle(el).paddingRight)).toBe(platform === 'darwin' ? '48px' : '16px') + expect(await cubes.first().evaluate(el => getComputedStyle(el).flexBasis)).toBe(platform === 'darwin' ? '180px' : '0px') await page.keyboard.press('Escape') await settings.waitFor({ state: 'hidden' }) } diff --git a/apps/web/tests/expected/agent-preset-authoring/section.expected.md b/apps/web/tests/expected/agent-preset-authoring/section.expected.md index dd8628cd57..3b5ebf1b20 100644 --- a/apps/web/tests/expected/agent-preset-authoring/section.expected.md +++ b/apps/web/tests/expected/agent-preset-authoring/section.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/deepseek-messages-settings/cards.expected.md b/apps/web/tests/expected/deepseek-messages-settings/cards.expected.md index abd17a0782..dc532d598d 100644 --- a/apps/web/tests/expected/deepseek-messages-settings/cards.expected.md +++ b/apps/web/tests/expected/deepseek-messages-settings/cards.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/desktop-locale/automatic.expected.md b/apps/web/tests/expected/desktop-locale/automatic.expected.md index 84a652e494..f657109584 100644 --- a/apps/web/tests/expected/desktop-locale/automatic.expected.md +++ b/apps/web/tests/expected/desktop-locale/automatic.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/desktop-locale/selected.expected.md b/apps/web/tests/expected/desktop-locale/selected.expected.md index 865390f104..885ad3b4f3 100644 --- a/apps/web/tests/expected/desktop-locale/selected.expected.md +++ b/apps/web/tests/expected/desktop-locale/selected.expected.md @@ -1,6 +1,6 @@ - dialog "Settings": + - text: Settings - navigation: - - text: Settings - button "General" - button "Models" - button "Built-in plugins" diff --git a/apps/web/tests/expected/models-settings-recovery/stored-error.expected.md b/apps/web/tests/expected/models-settings-recovery/stored-error.expected.md index 84f93fc533..c53b1d766f 100644 --- a/apps/web/tests/expected/models-settings-recovery/stored-error.expected.md +++ b/apps/web/tests/expected/models-settings-recovery/stored-error.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/catalog-inputs.expected.md b/apps/web/tests/expected/models-settings/catalog-inputs.expected.md index de6a45d25c..9015847ef4 100644 --- a/apps/web/tests/expected/models-settings/catalog-inputs.expected.md +++ b/apps/web/tests/expected/models-settings/catalog-inputs.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/configured.expected.md b/apps/web/tests/expected/models-settings/configured.expected.md index 0380871342..063bbf1550 100644 --- a/apps/web/tests/expected/models-settings/configured.expected.md +++ b/apps/web/tests/expected/models-settings/configured.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/declared-edit.expected.md b/apps/web/tests/expected/models-settings/declared-edit.expected.md index 73e8fc9a47..f2aa8d44b9 100644 --- a/apps/web/tests/expected/models-settings/declared-edit.expected.md +++ b/apps/web/tests/expected/models-settings/declared-edit.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/declared.expected.md b/apps/web/tests/expected/models-settings/declared.expected.md index 269d5ebd35..27749f1ca2 100644 --- a/apps/web/tests/expected/models-settings/declared.expected.md +++ b/apps/web/tests/expected/models-settings/declared.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/empty.expected.md b/apps/web/tests/expected/models-settings/empty.expected.md index 0561d65614..dd808d7f86 100644 --- a/apps/web/tests/expected/models-settings/empty.expected.md +++ b/apps/web/tests/expected/models-settings/empty.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/image-only.expected.md b/apps/web/tests/expected/models-settings/image-only.expected.md index e0b4eb62cf..07d8f4c169 100644 --- a/apps/web/tests/expected/models-settings/image-only.expected.md +++ b/apps/web/tests/expected/models-settings/image-only.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/native-keyless.expected.md b/apps/web/tests/expected/models-settings/native-keyless.expected.md index e8ae4de994..339655dde8 100644 --- a/apps/web/tests/expected/models-settings/native-keyless.expected.md +++ b/apps/web/tests/expected/models-settings/native-keyless.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/models-settings/refreshing.expected.md b/apps/web/tests/expected/models-settings/refreshing.expected.md index ad9ac8cda1..52e4eb8439 100644 --- a/apps/web/tests/expected/models-settings/refreshing.expected.md +++ b/apps/web/tests/expected/models-settings/refreshing.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/onboarding-deepseek-config/default-models.expected.md b/apps/web/tests/expected/onboarding-deepseek-config/default-models.expected.md index cff2fd1b37..312a5cf8d9 100644 --- a/apps/web/tests/expected/onboarding-deepseek-config/default-models.expected.md +++ b/apps/web/tests/expected/onboarding-deepseek-config/default-models.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/onboarding-deepseek-config/models.expected.md b/apps/web/tests/expected/onboarding-deepseek-config/models.expected.md index 35771c887a..f64f3276aa 100644 --- a/apps/web/tests/expected/onboarding-deepseek-config/models.expected.md +++ b/apps/web/tests/expected/onboarding-deepseek-config/models.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/onboarding-native/models.expected.md b/apps/web/tests/expected/onboarding-native/models.expected.md index 317a184c37..3d1f292685 100644 --- a/apps/web/tests/expected/onboarding-native/models.expected.md +++ b/apps/web/tests/expected/onboarding-native/models.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/onboarding-usable-provider/dismissed.expected.md b/apps/web/tests/expected/onboarding-usable-provider/dismissed.expected.md index ad970ad588..15dfde8f44 100644 --- a/apps/web/tests/expected/onboarding-usable-provider/dismissed.expected.md +++ b/apps/web/tests/expected/onboarding-usable-provider/dismissed.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/expected/settings-chrome/dialog-en.expected.md b/apps/web/tests/expected/settings-chrome/dialog-en.expected.md index e36458f98a..a51f5a125c 100644 --- a/apps/web/tests/expected/settings-chrome/dialog-en.expected.md +++ b/apps/web/tests/expected/settings-chrome/dialog-en.expected.md @@ -1,6 +1,6 @@ - dialog "Settings": + - text: Settings - navigation: - - text: Settings - button "General" - button "Models" - button "Built-in plugins" diff --git a/apps/web/tests/expected/settings-chrome/dialog-no-browser.expected.md b/apps/web/tests/expected/settings-chrome/dialog-no-browser.expected.md index e36458f98a..a51f5a125c 100644 --- a/apps/web/tests/expected/settings-chrome/dialog-no-browser.expected.md +++ b/apps/web/tests/expected/settings-chrome/dialog-no-browser.expected.md @@ -1,6 +1,6 @@ - dialog "Settings": + - text: Settings - navigation: - - text: Settings - button "General" - button "Models" - button "Built-in plugins" diff --git a/apps/web/tests/expected/settings-chrome/dialog.expected.md b/apps/web/tests/expected/settings-chrome/dialog.expected.md index 9f9c6ee85e..9288e7fb27 100644 --- a/apps/web/tests/expected/settings-chrome/dialog.expected.md +++ b/apps/web/tests/expected/settings-chrome/dialog.expected.md @@ -1,6 +1,6 @@ - dialog "设置": + - text: 设置 - navigation: - - text: 设置 - button "通用设置" - button "模型" - button "内置插件" diff --git a/apps/web/tests/rich-text-quotes.e2e.ts b/apps/web/tests/rich-text-quotes.e2e.ts new file mode 100644 index 0000000000..ba7b5e0c7c --- /dev/null +++ b/apps/web/tests/rich-text-quotes.e2e.ts @@ -0,0 +1,646 @@ +/** Keyless real-Web coverage for quote selection, persistence, and uniform reference presentation. */ +import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises' +import { tmpdir } from 'node:os' +import { fileURLToPath } from 'node:url' +import { join } from 'node:path' +import type { Browser, Locator, Page } from 'playwright' +import { chromium } from 'playwright' +import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest' +import type { ReplayOverrideDoc } from '@deepseek-ai/dsh-llm-replay' +import { SessionId } from '@deepseek-ai/dsh-session' +import { formatSessionReferenceMention } from '@deepseek-ai/dsh-session-reference' +import { formatQuoteText } from '@deepseek-ai/dsh-client-ui-primitives' +import { + assertFixtureInventory, captureStableAria, compareOrRefreshGolden, launchWebScaffold, + parseSeedFixture, renderSeedFixture, seedSession, selectedSessionFixture, watchConsole, webSnapshotMode, + type WebScaffold, +} from './scaffold.ts' +import { newEnglishPage, saveFailureShot } from './support.ts' + +const SNAPSHOT_DIR = fileURLToPath(new URL('../../../snapshots/web/rich-text-quotes', import.meta.url)) +const BORROWED = fileURLToPath(new URL('../../../snapshots/web/seeded-history/session.jsonl', import.meta.url)) +const UI_EXPECTED = fileURLToPath(new URL('../../../snapshots/web/rich-text-quotes/ui.expected.md', import.meta.url)) +const MODE = webSnapshotMode() +const SESSION_ID = 'rich-text-quotes-web-e2e' +const OTHER_ID = 'rich-text-quotes-other' +const LEGACY_DRAFT_KEY = `dsh.conversation.${SESSION_ID}` +const CURRENT_DRAFT_KEY = `dsh.conversation.${SESSION_ID}` +const LEGACY_DRAFT = JSON.stringify({ draft: 'Imported plain draft', view: 'chat', viewRequest: null }) +const SOURCE_TEXT = 'Durable source phrase selected from an earlier message and preserved as structured quote metadata.' +const THINKING_TEXT = 'Settled reasoning source' +const LITERAL_CREDENTIAL = 'sk-1234567890abcdefghijklmnopqrstuvwxyz' +const SESSION_MENTION = formatSessionReferenceMention({ sessionId: SessionId(OTHER_ID), label: 'Quote source' }) +const DIRECT_SYNTAX_TEXT = [ + `/quoted-demo ${SESSION_MENTION} ${LITERAL_CREDENTIAL} **literal Markdown**`, + ...Array.from({ length: 80 }, (_, index) => `Quote line ${String(index + 1)} contains preserved text.`), + 'End of long quote.', +].join('\n') +const SELECTED_SYNTAX_TEXT = DIRECT_SYNTAX_TEXT.replaceAll('\n', ' ') +const SENT_SYNTAX_TEXT = SELECTED_SYNTAX_TEXT.replace(SESSION_MENTION, '@Quote source') +const REPLY = 'Quote received.' + +async function quoteAppearance(quote: Locator): Promise> { + return quote.evaluate((element) => { + const style = getComputedStyle(element) + return { + alignItems: style.alignItems, + color: style.color, + display: style.display, + fontSize: style.fontSize, + gap: style.gap, + lineHeight: style.lineHeight, + margin: style.margin, + padding: style.padding, + } + }) +} + +const REPLAY: ReplayOverrideDoc = [{ + kind: 'chunks', + chunks: [ + { type: 'block-start', index: 0, blockType: 'text' }, + { type: 'text-delta', index: 0, text: REPLY }, + { type: 'block-end', index: 0, block: { type: 'text', text: REPLY } }, + { type: 'usage', usage: { inputTokens: 128, outputTokens: 8 } }, + { type: 'finish', reason: { kind: 'stop' } }, + ], +}] + +function quoteHistoryFixture(raw: string): string { + const { headerLine } = parseSeedFixture(raw) + let seq = 0 + let time = 0 + const events: Array & { seq: number; time: number }> = [] + const at = (event: Record): number => { + const assigned = seq++ + events.push({ ...event, seq: assigned, time: time++ }) + return assigned + } + at({ type: 'turn/start', data: { turn: 1 } }) + at({ + type: 'user/message', + data: { + id: '{{message:1}}', + role: 'user', + content: [{ type: 'text', text: SOURCE_TEXT }], + source: { kind: 'user', rpcId: '{{rpc:1}}' }, + }, + surfaceOp: 'append', + }) + for (let ordinal = 2; ordinal <= 51; ordinal++) { + at({ + type: 'user/message', + data: { + id: `{{message:${String(ordinal)}}}`, + role: 'user', + content: [{ + type: 'text', + text: ordinal === 2 ? formatQuoteText(DIRECT_SYNTAX_TEXT) : `Filler message ${String(ordinal)}`, + }], + source: { kind: 'user', rpcId: `{{rpc:${String(ordinal)}}}` }, + }, + surfaceOp: 'append', + }) + } + at({ + type: 'user/message', + data: { + id: '{{message:52}}', + role: 'user', + content: [ + { type: 'text', text: `> ${SOURCE_TEXT}` }, + { type: 'text', text: '\n\nUse that excerpt.' }, + ], + source: { + kind: 'user', + rpcId: '{{rpc:52}}', + }, + }, + surfaceOp: 'append', + }) + at({ + type: 'session/title', + data: { + title: 'Quote history', + messageSeqs: Array.from({ length: 52 }, (_value, index) => index + 1), + source: { kind: 'fallback' }, + }, + }) + at({ type: 'step/start', data: { turn: 1, step: 1 } }) + at({ + type: 'assistant/message', + data: { + turn: 1, + step: 1, + message: { + id: '{{message:53}}', + role: 'assistant', + content: [ + { type: 'reasoning', text: THINKING_TEXT }, + { type: 'text', text: 'Quote fixture ready.' }, + ], + source: { kind: 'model', provider: 'fixture', model: 'fixture' }, + }, + stream: [ + { type: 'chunk', time: 0, chunk: { type: 'block-start', index: 0, blockType: 'reasoning' } }, + { type: 'reasoning-chunks', time0: 0, index: 0, dt: [], texts: [THINKING_TEXT] }, + { type: 'chunk', time: 0, chunk: { type: 'block-end', index: 0, block: { type: 'reasoning', text: THINKING_TEXT } } }, + { type: 'chunk', time: 0, chunk: { type: 'block-start', index: 1, blockType: 'text' } }, + { type: 'text-chunks', time0: 0, index: 1, dt: [], texts: ['Quote fixture ready.'] }, + { type: 'chunk', time: 0, chunk: { type: 'block-end', index: 1, block: { type: 'text', text: 'Quote fixture ready.' } } }, + { type: 'chunk', time: 0, chunk: { type: 'finish', reason: { kind: 'stop' } } }, + ], + }, + surfaceOp: 'append', + }) + at({ type: 'step/end', data: { turn: 1, step: 1 } }) + at({ type: 'turn/end', data: { turn: 1, reason: { kind: 'completed' } } }) + return renderSeedFixture(headerLine, events) +} + +function otherSessionFixture(raw: string): string { + const { headerLine } = parseSeedFixture(raw) + let seq = 0 + const events: Array & { seq: number; time: number }> = [] + const at = (event: Record): void => { + events.push({ ...event, seq, time: seq }) + seq += 1 + } + at({ type: 'turn/start', data: { turn: 1 } }) + at({ + type: 'user/message', surfaceOp: 'append', + data: { + id: '{{message:1}}', role: 'user', + content: [{ type: 'text', text: 'Other session.' }], + source: { kind: 'user', rpcId: '{{rpc:1}}' }, + }, + }) + at({ type: 'session/title', data: { title: 'Other session', messageSeqs: [1], source: { kind: 'fallback' } } }) + at({ type: 'turn/end', data: { turn: 1, reason: { kind: 'completed' } } }) + return renderSeedFixture(headerLine, events) +} + +async function selectAllText(locator: Locator): Promise { + await locator.evaluate((element) => { + const range = document.createRange() + range.selectNodeContents(element) + const selection = window.getSelection() + selection?.removeAllRanges() + selection?.addRange(range) + document.dispatchEvent(new Event('selectionchange')) + }) +} + +async function expectEllipsizedQuote(box: Locator, text: Locator, container: Locator): Promise { + const [quoteBounds, containerBounds, presentation] = await Promise.all([ + box.boundingBox(), + container.boundingBox(), + text.evaluate((element) => { + const style = getComputedStyle(element) + return { + clientWidth: element.clientWidth, + scrollWidth: element.scrollWidth, + overflow: style.overflow, + textOverflow: style.textOverflow, + whiteSpace: style.whiteSpace, + } + }), + ]) + expect(quoteBounds).not.toBeNull() + expect(containerBounds).not.toBeNull() + const expectedMaximum = Math.min(containerBounds!.width * 0.8, 300) + expect(quoteBounds!.width).toBeLessThanOrEqual(expectedMaximum + 1) + expect(presentation.overflow).toBe('hidden') + expect(presentation.textOverflow).toBe('ellipsis') + expect(presentation.whiteSpace).toBe('nowrap') + expect(presentation.scrollWidth).toBeGreaterThan(presentation.clientWidth) + return quoteBounds!.width +} + +async function openQuoteSession(page: Page): Promise { + await page.locator(`[data-row-key="session:${SESSION_ID}"]`).click() +} + +async function expectScrollableQuote(page: Page, quote: Locator, text: string): Promise { + await quote.hover() + const content = page.locator('[data-quote-popover]') + await expect.poll(() => content.textContent()).toBe(text) + const panel = content.locator('..') + await expect.poll(async () => { + const bounds = await panel.boundingBox() + return bounds !== null && bounds.y >= 8 && bounds.y + bounds.height <= page.viewportSize()!.height - 8 + }).toBe(true) + await panel.hover() + await page.mouse.wheel(0, 10_000) + await expect.poll(() => panel.evaluate(element => ({ + scrolled: element.scrollTop > 0, + atEnd: element.scrollTop + element.clientHeight >= element.scrollHeight - 1, + }))).toEqual({ scrolled: true, atEnd: true }) + expect(await content.evaluate((element) => { + const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT) + let last: Node | null = null + for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) last = node + if (last === null) return false + const length = last.textContent?.length ?? 0 + const range = document.createRange() + range.setStart(last, length - 'End of long quote.'.length) + range.setEnd(last, length) + const end = range.getBoundingClientRect() + const panelBounds = element.parentElement!.getBoundingClientRect() + return end.top >= panelBounds.top && end.bottom <= panelBounds.bottom + })).toBe(true) + await page.mouse.move(0, 0) + await expect.poll(() => content.count()).toBe(0) +} + +async function crossQuoteGap(page: Page, quote: Locator, text: string, placement: 'above' | 'below'): Promise { + await quote.hover() + const content = page.locator('[data-quote-popover]') + await expect.poll(() => content.count()).toBe(1) + await expect.poll(() => content.textContent()).toBe(text) + const anchor = (await quote.locator('..').boundingBox())! + const panel = (await content.locator('..').boundingBox())! + expect(panel.width).toBeLessThan(300) + const above = panel.y < anchor.y + expect(above).toBe(placement === 'above') + const x = Math.max(anchor.x, panel.x) + Math.min(anchor.width, panel.width) / 2 + const y = above ? (panel.y + panel.height + anchor.y) / 2 : (anchor.y + anchor.height + panel.y) / 2 + expect(await page.evaluate(point => + Boolean(document.elementFromPoint(point.x, point.y)?.closest('[data-hovercard-bridge]')), { x, y })).toBe(true) + await page.mouse.move(x, y, { steps: 8 }) + await page.evaluate(() => new Promise((resolve) => { requestAnimationFrame(() => { requestAnimationFrame(() => { resolve() }) }) })) + await expect.poll(() => content.count()).toBe(1) + expect(await content.textContent()).toBe(text) + await content.hover() + const body = (await content.boundingBox())! + await page.mouse.move(body.x + 12, body.y + 15) + await page.mouse.down() + await page.mouse.move(body.x + 60, body.y + 15, { steps: 5 }) + await page.mouse.up() + expect(await page.evaluate(() => window.getSelection()?.toString().trim())).not.toBe('') + expect(await content.count()).toBe(1) + await page.keyboard.press('Escape') + await expect.poll(() => content.count()).toBe(0) +} + +describe.skipIf(MODE === 'record')('web e2e: rich-text quotes', () => { + let scaffold: WebScaffold + let browser: Browser + let page: Page + let replayDir: string + let tripwire: ReturnType + + beforeAll(async () => { + replayDir = await mkdtemp(join(tmpdir(), 'dsh-rich-text-quotes-replay-')) + const replayOverride = join(replayDir, 'replay.override.json') + await writeFile(replayOverride, JSON.stringify(REPLAY)) + scaffold = await launchWebScaffold({ + replayFixture: join(replayDir, 'override-only.jsonl'), + replayOverride, + }) + const skillDir = join(scaffold.workspaceCwd, '.agents', 'skills', 'quoted-demo') + await mkdir(skillDir, { recursive: true }) + await writeFile(join(skillDir, 'SKILL.md'), [ + '---', + 'name: quoted-demo', + 'description: Example user-invoked skill', + 'disable-model-invocation: true', + '---', + '', + 'An example skill instruction.', + '', + ].join('\n')) + const borrowed = await readFile(await selectedSessionFixture(BORROWED), 'utf8') + const createdAt = Date.now() - 60_000 + await seedSession(scaffold, quoteHistoryFixture(borrowed), SESSION_ID, undefined, { createdAt }) + await seedSession(scaffold, otherSessionFixture(borrowed), OTHER_ID, undefined, { createdAt: createdAt + 1_000 }) + browser = await chromium.launch() + page = await newEnglishPage(browser) + await page.addInitScript(({ key, value }) => { + if (localStorage.getItem(key) === null) localStorage.setItem(key, value) + }, { key: LEGACY_DRAFT_KEY, value: LEGACY_DRAFT }) + tripwire = watchConsole(page) + await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' }) + await page.waitForSelector('[class*="frame"]', { timeout: 30_000 }) + const group = page.getByRole('treeitem', { name: /Ungrouped/ }) + await group.waitFor({ timeout: 15_000 }) + if (await group.getAttribute('aria-expanded') !== 'true') await group.click() + await openQuoteSession(page) + }, 120_000) + + afterAll(async () => { + const failures: unknown[] = [] + await browser?.close().catch((error: unknown) => failures.push(error)) + await scaffold?.close().catch((error: unknown) => failures.push(error)) + if (replayDir !== undefined) { + await rm(replayDir, { recursive: true, force: true }) + .catch((error: unknown) => failures.push(error)) + } + if (failures.length === 1) throw failures[0] + if (failures.length > 1) throw new AggregateError(failures, 'rich-text-quotes e2e cleanup failed') + }) + + it('renders and restores rich quotes with uniform styling after reference recognition', async () => { + onTestFailed(() => saveFailureShot(page, 'web-e2e-rich-text-quotes')) + const input = page.locator('[data-composer-input]').first() + await expect.poll(() => input.textContent()).toBe('Imported plain draft') + await input.click() + await input.press('ControlOrMeta+A') + await input.press('Backspace') + await expect.poll(() => input.textContent()).toBe('') + const sentQuote = page.locator('[data-message-bubble] [data-quote-preview]').filter({ hasText: SOURCE_TEXT }).first() + await sentQuote.waitFor({ timeout: 15_000 }) + await expect.poll(() => sentQuote.getAttribute('title')).toBeNull() + await expect.poll(() => sentQuote.getAttribute('role')).toBeNull() + await expect.poll(() => sentQuote.getAttribute('tabindex')).toBeNull() + await expect.poll(() => sentQuote.locator('xpath=ancestor::*[@data-message-bubble][1]').textContent()) + .toBe(`${SOURCE_TEXT} Use that excerpt.`) + const sentText = sentQuote.locator('[data-quote-preview-text]') + const sentWidth = await expectEllipsizedQuote( + sentQuote, + sentText, + sentQuote.locator('xpath=ancestor::*[@data-message-bubble][1]'), + ) + const sentAppearance = await quoteAppearance(sentQuote) + expect(sentAppearance.gap).toBe('4px') + expect(sentAppearance.margin).toBe('0px') + await sentQuote.hover() + const quotePopover = page.locator('[data-quote-popover]') + await expect.poll(() => quotePopover.textContent()).toBe(SOURCE_TEXT) + const hoveredSentBounds = await sentQuote.boundingBox() + expect(hoveredSentBounds).not.toBeNull() + expect(hoveredSentBounds!.width).toBeCloseTo(sentWidth, 0) + await quotePopover.hover() + // Exceed the pointer grace to prove the panel itself keeps the popover open. + await page.waitForTimeout(300) + await expect.poll(() => quotePopover.count()).toBe(1) + await page.mouse.move(0, 0) + await expect.poll(() => quotePopover.count()).toBe(0) + + const sourceBlocks = page.locator('[data-text-interaction-source]').filter({ hasText: SOURCE_TEXT }) + const olderSource = page.getByRole('button', { name: 'Load earlier' }) + if (await sourceBlocks.count() < 2 && await olderSource.isVisible()) await olderSource.click() + await expect.poll(() => sourceBlocks.count(), { timeout: 15_000 }).toBeGreaterThanOrEqual(2) + const source = sourceBlocks.filter({ hasNot: page.locator('[data-quote-preview]') }).first() + await source.waitFor() + + const quoteAction = page.getByRole('button', { name: 'Quote text', exact: true }) + await source.scrollIntoViewIfNeeded() + await source.dispatchEvent('pointerdown', { pointerId: 1, pointerType: 'mouse', buttons: 1 }) + await selectAllText(source) + await expect.poll(() => quoteAction.count()).toBe(0) + await source.dispatchEvent('pointerup', { pointerId: 1, pointerType: 'mouse', buttons: 0 }) + await expect.poll(() => quoteAction.count()).toBe(1) + expect(await quoteAction.evaluate(element => element.closest('[data-chat-flow]') !== null)).toBe(true) + expect(await quoteAction.evaluate(element => getComputedStyle(element.closest('[data-text-interaction-surface]')!).position)).toBe('absolute') + await page.keyboard.press('Escape') + await expect.poll(() => quoteAction.count()).toBe(0) + await page.evaluate(() => window.dispatchEvent(new Event('resize'))) + await expect.poll(() => quoteAction.count()).toBe(0) + await source.dispatchEvent('pointerdown', { pointerId: 1, pointerType: 'mouse', button: 0, buttons: 1 }) + await selectAllText(source) + await source.dispatchEvent('pointerup', { pointerId: 1, pointerType: 'mouse', button: 0, buttons: 0 }) + await expect.poll(() => quoteAction.count()).toBe(1) + await input.click() + await source.scrollIntoViewIfNeeded() + await expect.poll(() => quoteAction.count()).toBe(0) + await source.dispatchEvent('pointerdown', { pointerId: 1, pointerType: 'mouse', button: 0, buttons: 1 }) + await selectAllText(source) + await source.dispatchEvent('pointerup', { pointerId: 1, pointerType: 'mouse', button: 0, buttons: 0 }) + await expect.poll(() => quoteAction.count()).toBe(1) + await page.locator('[data-conversation-scroll]').evaluate((element) => { + element.scrollTop = element.scrollHeight + element.dispatchEvent(new Event('scroll')) + }) + await expect.poll(() => quoteAction.isVisible()).toBe(false) + expect(await page.locator('[data-text-interaction-surface] button').count()).toBe(1) + await source.scrollIntoViewIfNeeded() + await expect.poll(() => quoteAction.isVisible()).toBe(true) + await quoteAction.click() + const draftQuote = page.locator('[data-composer-quote]') + const draftPreview = draftQuote.locator('[data-quote-preview]') + const draftPreviewText = draftPreview.locator('[data-quote-preview-text]') + await expect.poll(() => draftQuote.count()).toBe(1) + await expect.poll(() => draftQuote.textContent()).toContain(SOURCE_TEXT) + const draftText = draftPreviewText + await expect.poll(() => draftPreview.getAttribute('role')).toBeNull() + await expect.poll(() => draftPreview.getAttribute('tabindex')).toBeNull() + const draftWidth = await expectEllipsizedQuote( + draftPreview, + draftPreviewText, + input, + ) + expect(await quoteAppearance(draftPreview)).toEqual(sentAppearance) + await draftText.hover() + await expect.poll(() => quotePopover.textContent()).toBe(SOURCE_TEXT) + const hoveredDraftBounds = await draftPreview.boundingBox() + expect(hoveredDraftBounds).not.toBeNull() + expect(hoveredDraftBounds!.width).toBeCloseTo(draftWidth, 0) + await page.mouse.move(0, 0) + await expect.poll(() => quotePopover.count()).toBe(0) + await input.press('Backspace') + await expect.poll(() => draftQuote.count()).toBe(0) + await expect.poll(() => input.textContent()).toBe('') + await input.press('ControlOrMeta+z') + await expect.poll(() => draftQuote.count()).toBe(1) + + const removeQuote = draftQuote.getByRole('button', { name: 'Remove quote' }) + const removeIcons = removeQuote.locator('svg') + await expect.poll(() => removeIcons.first().evaluate(element => getComputedStyle(element).opacity)).toBe('1') + await expect.poll(() => removeIcons.last().evaluate(element => getComputedStyle(element).opacity)).toBe('0') + await input.click() + await page.keyboard.press('ControlOrMeta+A') + await expect.poll(() => page.evaluate(() => window.getSelection()?.toString() ?? '')).toContain(SOURCE_TEXT) + await draftQuote.hover() + await expect.poll(() => removeIcons.first().evaluate(element => getComputedStyle(element).opacity)).toBe('0') + await expect.poll(() => removeIcons.last().evaluate(element => getComputedStyle(element).opacity)).toBe('1') + await removeQuote.focus() + await expect.poll(() => removeIcons.last().evaluate(element => getComputedStyle(element).opacity)).toBe('1') + await expectEllipsizedQuote(draftPreview, draftPreviewText, input) + await removeQuote.click() + await expect.poll(() => draftQuote.count()).toBe(0) + await expect.poll(() => input.textContent()).toBe('') + await expect.poll(() => page.evaluate(() => window.getSelection()?.isCollapsed ?? true)).toBe(true) + await page.keyboard.press('ControlOrMeta+z') + await expect.poll(() => draftQuote.count()).toBe(1) + + await input.click() + await page.keyboard.press('ControlOrMeta+A') + await page.keyboard.press('ArrowRight') + await page.keyboard.press('Backspace') + await page.keyboard.press('Backspace') + await expect.poll(() => draftQuote.count()).toBe(0) + await page.keyboard.press('ControlOrMeta+z') + await expect.poll(() => draftQuote.count()).toBe(1) + await page.keyboard.press('ControlOrMeta+A') + await page.keyboard.press('ArrowLeft') + await page.keyboard.press('Delete') + await expect.poll(() => draftQuote.count()).toBe(0) + await page.keyboard.press('ControlOrMeta+z') + await expect.poll(() => draftQuote.count()).toBe(1) + + await page.locator(`[data-row-key="session:${OTHER_ID}"]`).click() + await openQuoteSession(page) + await expect.poll(() => draftQuote.count()).toBe(1) + + await page.reload({ waitUntil: 'load' }) + await page.waitForSelector('[class*="frame"]', { timeout: 30_000 }) + const restoredQuote = page.locator('[data-composer-quote]') + await expect.poll(() => restoredQuote.count(), { timeout: 15_000 }).toBe(1) + const restoredPreview = restoredQuote.locator('[data-quote-preview]') + const restoredText = restoredQuote.locator('[data-quote-preview-text]') + await expect.poll(() => restoredPreview.getAttribute('role')).toBeNull() + await restoredText.click() + + await restoredQuote.getByRole('button', { name: 'Remove quote' }).click() + await expect.poll(() => input.textContent()).toBe('') + const process = page.locator('[data-turn-process]').first() + if (await process.getAttribute('aria-expanded') === 'false') await process.click() + await page.getByRole('button', { name: 'Analysis completed', exact: true }).click() + const think = page.getByRole('button', { name: /Think/u }) + await think.click() + const reasoningSource = page.locator('[data-text-interaction-source]').filter({ hasText: THINKING_TEXT }) + await reasoningSource.waitFor() + await selectAllText(reasoningSource) + await expect.poll(() => quoteAction.isVisible()).toBe(true) + const beforeComposerScroll = await reasoningSource.evaluate((element) => { + const scroller = element.closest('[data-conversation-scroll]')! + const composer = scroller.querySelector('[data-composer-seat]')! + const previous = scroller.scrollTop + scroller.scrollTop -= composer.getBoundingClientRect().top - element.getBoundingClientRect().top + 16 + return previous + }) + await expect.poll(() => reasoningSource.evaluate((element) => { + const composer = element.closest('[data-conversation-scroll]')!.querySelector('[data-composer-seat]')! + return element.getBoundingClientRect().top >= composer.getBoundingClientRect().top + })).toBe(true) + await expect.poll(() => quoteAction.isVisible()).toBe(false) + expect(await page.locator('[data-text-interaction-surface] button').count()).toBe(1) + await page.locator('[data-conversation-scroll]').evaluate((element, top) => { element.scrollTop = top }, beforeComposerScroll) + await expect.poll(() => quoteAction.isVisible()).toBe(true) + await quoteAction.click() + await expect.poll(() => draftQuote.textContent()).toContain(THINKING_TEXT) + await think.click() + await expect.poll(() => reasoningSource.isVisible()).toBe(false) + const reasoningQuote = draftQuote.locator('[data-quote-preview-text]') + await expect.poll(() => draftQuote.locator('[data-quote-preview]').getAttribute('role')).toBeNull() + await reasoningQuote.click() + await expect.poll(() => reasoningSource.isVisible()).toBe(false) + await expect.poll(() => think.getAttribute('aria-expanded')).toBe('false') + + const backToBottom = page.getByRole('button', { name: 'Back to bottom', exact: true }) + if (await backToBottom.isVisible()) await backToBottom.click() + await expect.poll(() => backToBottom.isVisible()).toBe(false) + + const snapshot = await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd) + + await draftQuote.getByRole('button', { name: 'Remove quote' }).click() + const loadEarlier = page.getByRole('button', { name: 'Load earlier' }) + if (await loadEarlier.isVisible()) await loadEarlier.click() + await page.getByText('Filler message 3', { exact: true }).waitFor({ timeout: 15_000 }) + await page.locator('[data-conversation-scroll]').evaluate((element) => { + element.scrollTop = 0 + element.dispatchEvent(new Event('scroll')) + }) + const syntaxSource = page.locator('[data-text-interaction-source]').filter({ hasText: DIRECT_SYNTAX_TEXT }).first() + await syntaxSource.waitFor({ timeout: 15_000 }) + await syntaxSource.scrollIntoViewIfNeeded() + await selectAllText(syntaxSource) + await quoteAction.click() + const viewport = page.viewportSize()! + try { + await expectScrollableQuote(page, draftPreview, SELECTED_SYNTAX_TEXT) + await page.setViewportSize({ width: 420, height: 420 }) + await expectScrollableQuote(page, draftPreview, SELECTED_SYNTAX_TEXT) + } finally { + await page.setViewportSize(viewport) + } + const beforeOffset = scaffold.ctx.agents.get(SessionId(SESSION_ID))!.session.seq + const settled = scaffold.whenTurnSettled() + await page.getByRole('button', { name: 'Send message' }).click() + const settledSessionId = await settled + await page.getByText(REPLY, { exact: true }).waitFor({ timeout: 20_000 }) + const longSentQuote = page.locator('[data-message-bubble] [data-quote-preview]').filter({ hasText: SENT_SYNTAX_TEXT }).last() + try { + await expectScrollableQuote(page, longSentQuote, SENT_SYNTAX_TEXT) + await page.setViewportSize({ width: 420, height: 420 }) + await expectScrollableQuote(page, longSentQuote, SENT_SYNTAX_TEXT) + } finally { + await page.setViewportSize(viewport) + } + expect(await longSentQuote.textContent()).toContain(LITERAL_CREDENTIAL) + const sentSource = longSentQuote.locator('[data-quote-preview-text]') + expect(await sentSource.textContent()).toBe(SENT_SYNTAX_TEXT) + expect(await sentSource.locator('*').count()).toBe(0) + const textAppearance = await quoteAppearance(sentSource) + const quoteStyle = await quoteAppearance(longSentQuote) + expect(textAppearance.color).toBe(quoteStyle.color) + expect(textAppearance.fontSize).toBe(quoteStyle.fontSize) + expect(textAppearance.lineHeight).toBe(quoteStyle.lineHeight) + expect(await longSentQuote.locator('[data-secret], [data-ref-chip], strong').count()).toBe(0) + const events = scaffold.ctx.agents.get(settledSessionId)!.session.snapshotEvents(beforeOffset) + expect(events.some(event => event.type === 'user/message' + && event.data.source.kind === 'skill-invocation')).toBe(true) + expect(events.some(event => event.type === 'user/message' + && event.data.source.kind === 'session-reference')).toBe(true) + const submitted = events.find(event => event.type === 'user/message' + && event.data.source.kind === 'user') + expect(submitted).toMatchObject({ + data: { + content: [{ type: 'text', text: formatQuoteText(SENT_SYNTAX_TEXT) }], + }, + }) + expect(submitted).not.toHaveProperty('data.source.quotes') + await expect.poll(() => input.textContent()).toBe('') + const persisted = await page.evaluate((key): unknown => JSON.parse(localStorage.getItem(key)!), CURRENT_DRAFT_KEY) + expect(persisted).toMatchObject({ draft: { text: '', references: [] } }) + await page.reload({ waitUntil: 'load' }) + await page.getByText(REPLY, { exact: true }).waitFor({ timeout: 20_000 }) + await expectScrollableQuote(page, longSentQuote, SENT_SYNTAX_TEXT) + const literalQuote = await captureStableAria( + page, `[data-message-bubble]:has([data-quote-preview-text]):has-text("${LITERAL_CREDENTIAL}") >> nth=-1`, scaffold.workspaceCwd, + ) + await compareOrRefreshGolden(UI_EXPECTED, `${snapshot}\n\n## Literal quote body\n\n${literalQuote}`, MODE) + await expect.poll(() => input.textContent()).toBe('') + expect(await page.locator('[data-slot-error]').count()).toBe(0) + expect(tripwire.pageErrors).toEqual([]) + expect(tripwire.warnings).toEqual([]) + await assertFixtureInventory(SNAPSHOT_DIR, ['ui.expected.md']) + }, 120_000) + + it('keeps adjacent quote previews exclusive while crossing their hover gaps', async () => { + onTestFailed(() => saveFailureShot(page, 'web-e2e-quote-hover-gap')) + const texts = ['First excerpt', 'Second excerpt'].map(line => Array.from({ length: 6 }, () => line).join('\n')) + const quoted = texts.map(formatQuoteText) + const separator = '\nx\n' + const draft = { + text: quoted[0]! + separator + quoted[1]!, references: [], + quotes: texts.map((text, index) => ({ + text, offset: index === 0 ? 0 : quoted[0]!.length + separator.length, length: quoted[index]!.length, + })), + } + const viewport = page.viewportSize()! + try { + await page.evaluate(({ key, draft }) => { + localStorage.setItem(key, JSON.stringify({ draft, view: 'chat', viewRequest: null })) + }, { key: CURRENT_DRAFT_KEY, draft }) + await page.reload({ waitUntil: 'load' }) + const draftQuotes = page.locator('[data-composer-quote] [data-quote-preview]') + await expect.poll(() => draftQuotes.count()).toBe(2) + await crossQuoteGap(page, draftQuotes.last(), texts[1]!, 'above') + const settled = scaffold.whenTurnSettled() + await page.getByRole('button', { name: 'Send message' }).click() + await settled + await page.setViewportSize({ width: 600, height: 1000 }) + const sentQuotes = page.locator('[data-message-bubble] [data-quote-preview]').filter({ hasText: 'First excerpt' }) + await sentQuotes.last().waitFor() + await sentQuotes.last().evaluate((element) => { element.scrollIntoView({ block: 'center' }) }) + await crossQuoteGap(page, sentQuotes.last(), texts[0]!, 'below') + expect(tripwire.pageErrors).toEqual([]) + } finally { + await page.keyboard.press('Escape') + await page.setViewportSize(viewport) + } + }) + +}) diff --git a/apps/web/tests/schedule-phone.e2e.ts b/apps/web/tests/schedule-phone.e2e.ts new file mode 100644 index 0000000000..b28049ba3d --- /dev/null +++ b/apps/web/tests/schedule-phone.e2e.ts @@ -0,0 +1,130 @@ +// UI-only phone geometry for the Automation tasks page: no text field it owns +// sits under the 16px touch step, so the page never reads wider than the screen +// — iOS Safari zooms the visual viewport for a focused field below it. +import type { Browser, Locator, Page } from 'playwright' +import { chromium } from 'playwright' +import { expect, it } from 'vitest' +import { SessionId } from '@deepseek-ai/dsh-session' +import type {} from '@deepseek-ai/dsh-schedule' +import { launchWebScaffold, watchConsole } from './scaffold.ts' + +const PHONE_TASK_SESSION = SessionId('schedule-phone-web-e2e') +const PHONE_TASK_TITLE = 'Review overdue deployment' +const PHONE_PAGE_WIDTH = 390 + +/** The page's box against the screen, plus the font steps of its text fields. */ +interface ViewFacts { + width: number + documentWidth: number + smallestField: number + name: string + search: string + instruction: string +} + +/** Open the Automation tasks page and return its panel. */ +async function openTaskManager(page: Page, url: string): Promise { + await page.goto(url, { waitUntil: 'load' }) + await page.getByRole('button', { name: '自动化任务', exact: true }).click() + const panel = page.getByTestId('task-manager-page') + await panel.getByRole('heading', { name: '自动化任务', exact: true }).waitFor({ timeout: 30_000 }) + await page.evaluate(() => document.fonts.ready) + return panel +} + +/** Read the facts above from the open view. */ +async function viewFacts(page: Page): Promise { + return page.evaluate(() => { + const panel = document.querySelector('[data-testid="task-manager-page"]') + const fields = Array.from(panel?.querySelectorAll('input, textarea, select') ?? []) + const steps = fields.map(element => Number.parseFloat(getComputedStyle(element).fontSize)) + const step = (selector: string): string => { + const element = document.querySelector(selector) + return element === null ? 'absent' : getComputedStyle(element).fontSize + } + return { + width: window.innerWidth, + documentWidth: document.documentElement.scrollWidth, + smallestField: steps.length === 0 ? -1 : Math.min(...steps), + name: step('[class*="_editName"]'), + search: step('[class*="_searchField"] input'), + instruction: step('[class*="_instruction"]'), + } + }) +} + +it('keeps the automation page on screen with its text fields at the touch step', async () => { + const scaffold = await launchWebScaffold() + const url = scaffold.authenticatedUrl + try { + await scaffold.ctx.schedule.create(PHONE_TASK_SESSION, { + prompt: 'Check the deployment log', title: PHONE_TASK_TITLE, at: '2099-08-25T12:08:00.000Z', + }) + const browser: Browser = await chromium.launch() + try { + // A coarse pointer is the touch device, so the phone context takes the + // 16px step. + const phone = await browser.newContext({ + viewport: { width: PHONE_PAGE_WIDTH, height: 844 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true, locale: 'zh-CN', + }) + const phonePage = await phone.newPage() + const phoneConsole = watchConsole(phonePage) + const phonePanel = await openTaskManager(phonePage, url) + await expect.poll(() => viewFacts(phonePage)).toEqual({ + width: PHONE_PAGE_WIDTH, + documentWidth: PHONE_PAGE_WIDTH, + smallestField: 16, + name: 'absent', + search: '16px', + instruction: 'absent', + }) + // The detail keeps the floor too, and the name control keeps the 20px step + // the floor must not flatten. + await phonePanel.getByRole('button', { name: PHONE_TASK_TITLE, exact: true }).click() + await phonePanel.locator('[class*="_detailScroll"]').waitFor({ timeout: 10_000 }) + await expect.poll(() => viewFacts(phonePage)).toEqual({ + width: PHONE_PAGE_WIDTH, + documentWidth: PHONE_PAGE_WIDTH, + smallestField: 16, + name: '20px', + search: '16px', + instruction: '16px', + }) + await phone.close() + + // A fine pointer keeps the compact steps: the floor is pointer-scoped. + const desktop = await browser.newContext({ viewport: { width: 1024, height: 800 }, locale: 'zh-CN' }) + const desktopPage = await desktop.newPage() + const desktopConsole = watchConsole(desktopPage) + const desktopPanel = await openTaskManager(desktopPage, url) + await expect.poll(() => viewFacts(desktopPage)).toEqual({ + width: 1024, + documentWidth: 1024, + smallestField: 14, + name: 'absent', + search: '14px', + instruction: 'absent', + }) + await desktopPanel.getByRole('button', { name: PHONE_TASK_TITLE, exact: true }).click() + await desktopPanel.locator('[class*="_detailScroll"]').waitFor({ timeout: 10_000 }) + await expect.poll(() => viewFacts(desktopPage)).toEqual({ + width: 1024, + documentWidth: 1024, + smallestField: 14, + name: '20px', + search: '14px', + instruction: '14px', + }) + await desktop.close() + + expect(phoneConsole.pageErrors).toEqual([]) + expect(phoneConsole.warnings).toEqual([]) + expect(desktopConsole.pageErrors).toEqual([]) + expect(desktopConsole.warnings).toEqual([]) + } finally { + await browser.close() + } + } finally { + await scaffold.close() + } +}, 180_000) diff --git a/apps/web/tests/settings-chrome.e2e.ts b/apps/web/tests/settings-chrome.e2e.ts index 5155daf95c..302a40331f 100644 --- a/apps/web/tests/settings-chrome.e2e.ts +++ b/apps/web/tests/settings-chrome.e2e.ts @@ -84,6 +84,17 @@ describe('web e2e: settings modal and General preferences', () => { const dialog = page.getByRole('dialog', { name: '设置' }) await dialog.waitFor({ timeout: 10_000 }) expect(await trigger.getAttribute('aria-expanded')).toBe('false') + const panelBox = await dialog.boundingBox() + const optionsBox = await dialog.locator('[class*="_options"]').boundingBox() + const firstSectionBox = await dialog.getByRole('navigation').getByRole('button').first().boundingBox() + expect(optionsBox!.y - panelBox!.y).toBe(54) + expect(firstSectionBox!.y - panelBox!.y).toBe(64) + const lastSection = dialog.getByRole('navigation').getByRole('button').last() + await lastSection.focus() + await page.keyboard.press('Tab') + expect(await dialog.getByRole('button', { name: '打开配置文件' }).evaluate(el => el === document.activeElement)).toBe(true) + await page.keyboard.press('Tab') + expect(await dialog.getByRole('button', { name: '关闭', exact: true }).evaluate(el => el === document.activeElement)).toBe(true) // General is active by default; Permission, Language and Appearance are functional. expect(await dialog.getByRole('button', { name: '通用设置' }).getAttribute('aria-current')).toBe('true') await dialog.getByRole('button', { name: '工作区内修改' }).waitFor({ timeout: 10_000 }) @@ -210,7 +221,7 @@ describe('web e2e: settings modal and General preferences', () => { await page.keyboard.press('Escape') await expect.poll(() => page.getByRole('dialog', { name: '设置' }).count(), { timeout: 5_000 }).toBe(0) expect(await trigger.getAttribute('aria-expanded')).toBe('false') - // Close path 2: the header close button (focus lands there on open). + // Close path 2: the header close button. await openSettings(page, 'zh') await page.getByRole('dialog', { name: '设置' }).getByRole('button', { name: '关闭' }).click() await expect.poll(() => page.getByRole('dialog', { name: '设置' }).count(), { timeout: 5_000 }).toBe(0) @@ -227,7 +238,7 @@ describe('web e2e: settings modal and General preferences', () => { const dialog = overflowPage.getByRole('dialog', { name: '设置', exact: true }) const navigation = dialog.getByRole('navigation') const list = navigation.locator('[class*="_navList"]') - const title = navigation.getByText('设置', { exact: true }) + const title = dialog.getByText('设置', { exact: true }) const options = dialog.locator('[class*="_options"]') const last = navigation.getByRole('button').last() await last.waitFor() @@ -261,6 +272,98 @@ describe('web e2e: settings modal and General preferences', () => { expect(console.warnings).toEqual([]) }) + it('fills a phone viewport and turns the rail into the horizontal section strip', async () => { + const phone = await browser.newPage({ viewport: { width: 390, height: 844 }, locale: ZH_BROWSER_LOCALE }) + onTestFinished(() => phone.close()) + onTestFailed(() => saveSettingsFailureShot(phone, 'web-e2e-settings-phone')) + const console = watchConsole(phone) + await phone.goto(scaffold.authenticatedUrl, { waitUntil: 'load' }) + await openSettings(phone, 'zh') + const dialog = phone.getByRole('dialog', { name: '设置', exact: true }) + await dialog.waitFor({ timeout: 10_000 }) + await dialog.getByRole('button', { name: '通用设置', exact: true }).waitFor({ timeout: 10_000 }) + + // The panel is the viewport: no centered card, no side margins, no rail. + await expect.poll(() => dialog.boundingBox()).toEqual({ x: 0, y: 0, width: 390, height: 844 }) + + // The rail reads left to right on one line instead of stacking. + const navigation = dialog.getByRole('navigation') + const list = navigation.locator('[class*="_navList"]') + const cells = navigation.getByRole('button') + const first = await cells.first().boundingBox() + const second = await cells.nth(1).boundingBox() + expect(first).not.toBeNull() + expect(second).not.toBeNull() + expect(second!.x).toBeGreaterThanOrEqual(first!.x + first!.width - 1) + expect(Math.abs(second!.y - first!.y)).toBeLessThan(1) + expect(await list.evaluate(el => getComputedStyle(el).overflowX)).toBe('auto') + + // The shipped sections overflow the strip, which scrolls sideways; the + // section column starts below it and keeps the panel's width. + const strip = await list.boundingBox() + const options = dialog.locator('[class*="_options"]') + const optionsBox = await options.boundingBox() + expect(strip).not.toBeNull() + expect(optionsBox).not.toBeNull() + expect(await list.evaluate(el => el.scrollWidth)).toBeGreaterThan(await list.evaluate(el => el.clientWidth)) + expect(optionsBox!.y).toBeGreaterThanOrEqual(strip!.y + strip!.height - 1) + expect(Math.round(optionsBox!.width)).toBe(390) + expect(await phone.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390) + + // Tapping a cell swaps the page, and a General row keeps its label and + // control on one line rather than stacking. + await cells.nth(1).click() + await expect.poll(() => cells.nth(1).getAttribute('aria-current')).toBe('true') + await expect.poll(() => dialog.getByText('权限', { exact: true }).count()).toBe(0) + await cells.first().click() + await expect.poll(() => dialog.getByText('权限', { exact: true }).count(), { timeout: 5_000 }).toBe(1) + const permissionRow = dialog.getByText('权限', { exact: true }).locator('..') + const permissionBox = await permissionRow.boundingBox() + const controlBox = await dialog.getByRole('button', { name: '工作区内修改' }).boundingBox() + expect(controlBox).not.toBeNull() + expect(permissionBox).not.toBeNull() + expect(controlBox!.y).toBeLessThan(permissionBox!.y + permissionBox!.height) + + // The Appearance cubes share one row instead of wrapping to two. + const cubes = dialog.getByRole('button', { name: /浅色|深色|跟随系统/ }) + const cubeBoxes = await cubes.evaluateAll(nodes => nodes.map(node => node.getBoundingClientRect().top)) + expect(new Set(cubeBoxes.map(top => Math.round(top))).size).toBe(1) + + await cells.first().focus() + for (let index = 1; index < await cells.count(); index += 1) { + await phone.keyboard.press('Tab') + } + const last = cells.last() + expect(await last.evaluate(el => el === document.activeElement)).toBe(true) + const lastBox = await last.boundingBox() + // Scroll offsets can round while glyph widths remain fractional. + expect(Math.round(lastBox!.x)).toBeGreaterThanOrEqual(0) + expect(Math.round(lastBox!.x + lastBox!.width)).toBeLessThanOrEqual(390) + await last.click() + await expect.poll(() => last.getAttribute('aria-current')).toBe('true') + await phone.keyboard.press('Escape') + await dialog.waitFor({ state: 'hidden' }) + await openSettings(phone, 'zh') + const active = dialog.locator('[aria-current="true"]') + expect(await active.textContent()).toBe('通用设置') + expect(await active.evaluate(el => el === document.activeElement)).toBe(true) + + const close = dialog.getByRole('button', { name: '关闭', exact: true }) + const closeBox = await close.boundingBox() + expect(closeBox!.width).toBe(28) + expect(closeBox!.x).toBeGreaterThanOrEqual(0) + expect(closeBox!.y).toBeGreaterThanOrEqual(0) + expect(closeBox!.x + closeBox!.width).toBeLessThanOrEqual(390) + expect(closeBox!.y + closeBox!.height).toBeLessThanOrEqual(844) + await close.click() + await dialog.waitFor({ state: 'hidden' }) + const trigger = phone.getByRole('button', { name: '账号菜单', exact: true }) + await expect.poll(() => trigger.evaluate(el => el === document.activeElement)).toBe(true) + + expect(console.pageErrors).toEqual([]) + expect(console.warnings).toEqual([]) + }) + it('stores Permission as the default for future sessions without changing an existing session', async () => { onTestFailed(() => saveFailureShot(page, 'web-e2e-settings-permission')) const existing = scaffold.ctx.sessions.create(SessionId('settings-permission-before')) diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index 6a03b44055..ad7b72f14f 100644 --- a/apps/web/tsconfig.json +++ b/apps/web/tsconfig.json @@ -23,6 +23,7 @@ // this client-registered project must not also hold them (one program // cannot see both sides of the cordis Context merges). "exclude": [ + "tests/rich-text-quotes.e2e.ts", "tests/hover-input.e2e.ts", "tests/collapse-timing.e2e.ts", "tests/notice-wake-tail.e2e.ts", @@ -89,6 +90,7 @@ "tests/cua-optin.e2e.ts", "tests/cua-permissions.e2e.ts", "tests/schedule-header.e2e.ts", + "tests/schedule-phone.e2e.ts", "tests/worktree-opt-in.e2e.ts", "tests/session-inspector.e2e.ts", "tests/shared-inspector.e2e.ts", diff --git a/docs/config-catalog.md b/docs/config-catalog.md index b7c27899b7..c613b734c0 100644 --- a/docs/config-catalog.md +++ b/docs/config-catalog.md @@ -4785,6 +4785,7 @@ These load from a `cordis.yml` entry with no `config:` block; they declare no co | `@deepseek-ai/dsh-llm` | — | [`packages/llm/llm/src/index.ts`](../packages/llm/llm/src/index.ts) | | `@deepseek-ai/dsh-lsp` | — | [`packages/lsp/lsp/src/index.ts`](../packages/lsp/lsp/src/index.ts) | | `@deepseek-ai/dsh-mcp-resources` | `tools` | [`packages/mcp/mcp-resources/src/index.ts`](../packages/mcp/mcp-resources/src/index.ts) | +| `@deepseek-ai/dsh-message-quotes` | — | [`packages/session/message-quotes/src/index.ts`](../packages/session/message-quotes/src/index.ts) | | `@deepseek-ai/dsh-otel` | — | [`packages/telemetry/otel/src/index.ts`](../packages/telemetry/otel/src/index.ts) | | `@deepseek-ai/dsh-sandbox-ssh` | `ssh` | [`packages/ssh/sandbox-ssh/src/index.ts`](../packages/ssh/sandbox-ssh/src/index.ts) | | `@deepseek-ai/dsh-session` | — | [`packages/core/session/src/index.ts`](../packages/core/session/src/index.ts) | diff --git a/docs/config-catalog.zh.md b/docs/config-catalog.zh.md index 5fa0ba5159..c25bc8c246 100644 --- a/docs/config-catalog.zh.md +++ b/docs/config-catalog.zh.md @@ -4787,6 +4787,7 @@ export interface Config { | `@deepseek-ai/dsh-llm` | — | [`packages/llm/llm/src/index.ts`](../packages/llm/llm/src/index.ts) | | `@deepseek-ai/dsh-lsp` | — | [`packages/lsp/lsp/src/index.ts`](../packages/lsp/lsp/src/index.ts) | | `@deepseek-ai/dsh-mcp-resources` | `tools` | [`packages/mcp/mcp-resources/src/index.ts`](../packages/mcp/mcp-resources/src/index.ts) | +| `@deepseek-ai/dsh-message-quotes` | — | [`packages/session/message-quotes/src/index.ts`](../packages/session/message-quotes/src/index.ts) | | `@deepseek-ai/dsh-otel` | — | [`packages/telemetry/otel/src/index.ts`](../packages/telemetry/otel/src/index.ts) | | `@deepseek-ai/dsh-sandbox-ssh` | `ssh` | [`packages/ssh/sandbox-ssh/src/index.ts`](../packages/ssh/sandbox-ssh/src/index.ts) | | `@deepseek-ai/dsh-session` | — | [`packages/core/session/src/index.ts`](../packages/core/session/src/index.ts) | diff --git a/docs/module-graph.md b/docs/module-graph.md index 1566f893e7..dbe60b20a7 100644 --- a/docs/module-graph.md +++ b/docs/module-graph.md @@ -374,6 +374,7 @@ flowchart TD pkg_sdk_protocol["sdk-protocol"] end subgraph group_session["packages/session"] + pkg_message_quotes["message-quotes"] pkg_session_checkpoint_policy["session-checkpoint-policy"] pkg_session_format["session-format"] pkg_session_format_catalog["session-format-catalog"] @@ -1563,6 +1564,7 @@ flowchart TD | [`host-directory-picker-native`](../packages/host/directory-picker-native) | `host` | — | | [`host-open-in-app`](../packages/host/open-in-app) | `host` | — | | [`host-webserver`](../packages/host/webserver) | `host` | — | +| [`message-quotes`](../packages/session/message-quotes) | `session` | — | | [`session-format`](../packages/session/session-format) | `session` | — | | [`session-format-v0-to-v1`](../packages/session/session-format-v0-to-v1) | `session` | — | | [`session-format-v1-to-v2`](../packages/session/session-format-v1-to-v2) | `session` | — | diff --git a/docs/module-graph.zh.md b/docs/module-graph.zh.md index 57e96d7a4f..af6c8060a1 100644 --- a/docs/module-graph.zh.md +++ b/docs/module-graph.zh.md @@ -376,6 +376,7 @@ flowchart TD pkg_sdk_protocol["sdk-protocol"] end subgraph group_session["packages/session"] + pkg_message_quotes["message-quotes"] pkg_session_checkpoint_policy["session-checkpoint-policy"] pkg_session_format["session-format"] pkg_session_format_catalog["session-format-catalog"] @@ -1565,6 +1566,7 @@ flowchart TD | [`host-directory-picker-native`](../packages/host/directory-picker-native) | `host` | — | | [`host-open-in-app`](../packages/host/open-in-app) | `host` | — | | [`host-webserver`](../packages/host/webserver) | `host` | — | +| [`message-quotes`](../packages/session/message-quotes) | `session` | — | | [`session-format`](../packages/session/session-format) | `session` | — | | [`session-format-v0-to-v1`](../packages/session/session-format-v0-to-v1) | `session` | — | | [`session-format-v1-to-v2`](../packages/session/session-format-v1-to-v2) | `session` | — | diff --git a/docs/subsystems/slots.md b/docs/subsystems/slots.md index e15901b657..998aebbffc 100644 --- a/docs/subsystems/slots.md +++ b/docs/subsystems/slots.md @@ -137,6 +137,7 @@ Factory: conversation.content [ConversationContent] ├─ conversation.session [ConversationSession / DefaultConversationViews] │ └─ conversation.view │ ├─ id=chat [ChatView] +│ │ ├─ conversation.chat.text-interaction [list] │ │ └─ conversation.chat.flow [ChatFlow] │ │ └─ conversation.chat.node [ChatNodeSeat dispatch] │ │ ├─ key=user,steering [UserMessageNodeView] diff --git a/docs/subsystems/slots.zh.md b/docs/subsystems/slots.zh.md index 46e5f1b04e..e2d9217ec6 100644 --- a/docs/subsystems/slots.zh.md +++ b/docs/subsystems/slots.zh.md @@ -139,6 +139,7 @@ Factory: conversation.content [ConversationContent] ├─ conversation.session [ConversationSession / DefaultConversationViews] │ └─ conversation.view │ ├─ id=chat [ChatView] +│ │ ├─ conversation.chat.text-interaction [list] │ │ └─ conversation.chat.flow [ChatFlow] │ │ └─ conversation.chat.node [ChatNodeSeat dispatch] │ │ ├─ key=user,steering [UserMessageNodeView] diff --git a/packages/api/session-controller/README.i18n.yaml b/packages/api/session-controller/README.i18n.yaml index 67261d6093..0bc8aff3f8 100644 --- a/packages/api/session-controller/README.i18n.yaml +++ b/packages/api/session-controller/README.i18n.yaml @@ -24,8 +24,8 @@ en: 49a3d0e8e92017d3 zh: 91302aa3dd6e9378 /session-controller/configuration: - en: 5ae2b340c630897f - zh: 1ffbd61ecf302ec2 + en: c92590fbaf75e45e + zh: fcac67017bb0e3ab /session-controller/model-experience: en: 30b917bf822bb4df zh: b0b023b5b526c317 diff --git a/packages/api/session-controller/README.md b/packages/api/session-controller/README.md index 092727dd59..b935dfe606 100644 --- a/packages/api/session-controller/README.md +++ b/packages/api/session-controller/README.md @@ -106,6 +106,8 @@ The generated [configuration catalog](../../../docs/config-catalog.md#deepseek-a ----- +Blockquotes travel as ordinary prompt text without quote metadata. Local submission echoes and durable messages use the same text rendering rules; queue edits replace content while retaining prompt correlation. + ## Model Experience diff --git a/packages/api/session-controller/README.zh.md b/packages/api/session-controller/README.zh.md index 83da9b21bf..57262c5267 100644 --- a/packages/api/session-controller/README.zh.md +++ b/packages/api/session-controller/README.zh.md @@ -106,6 +106,8 @@ GUI 模型选择要求确切提供方／模型对出现在可用目录中；不 ----- +Blockquote 作为普通 prompt 文本传递，不携带 quote 元数据。本地提交回显与持久消息使用同一文本渲染规则；队列编辑替换 content，同时保留 prompt 关联信息。 + ## 模型体验 diff --git a/packages/api/session-controller/tests/commands-queue-attachment.host.spec.ts b/packages/api/session-controller/tests/commands-queue-attachment.host.spec.ts index 1601cd61f3..a23917b312 100644 --- a/packages/api/session-controller/tests/commands-queue-attachment.host.spec.ts +++ b/packages/api/session-controller/tests/commands-queue-attachment.host.spec.ts @@ -35,6 +35,7 @@ async function commandHarness( inbox: Inbox steer: ReturnType cancel: ReturnType + resolveAgent: ReturnType }> { const ctx = new Context() await ctx.plugin(SessionStore) @@ -107,7 +108,7 @@ async function commandHarness( saveSelection: () => Promise.resolve(), } as never) const agents = new ApiSessionAgentController(ctx) - vi.spyOn(agents, 'resolveAgent').mockImplementation(id => Promise.resolve(id === agent.id + const resolveAgent = vi.spyOn(agents, 'resolveAgent').mockImplementation(id => Promise.resolve(id === agent.id ? { agent } : { error: new RemoteError('session/not-found', 'missing', { sessionId: id }) })) vi.spyOn(agents, 'composeAgent').mockResolvedValue({ setup: () => {} }) @@ -118,6 +119,7 @@ async function commandHarness( inbox, steer, cancel, + resolveAgent, } } @@ -126,6 +128,19 @@ async function expectFailure(operation: Promise, code: string): Promise } describe('Session queue commands', () => { + it('edits a blockquote into ordinary text without changing prompt correlation', async () => { + const { ctx, controller, agent, inbox } = await commandHarness() + try { + const message = createUserMessage({ content: [{ type: 'text', text: '> selected' }], + source: { kind: 'user', rpcId: 'quote-edit' as import('../src/types.ts').SessionRequestId } }) + inbox.append('next-turn', message) + await controller.updateQueue({ sessionId: agent.id, itemId: message.id, + action: { kind: 'edit', content: [{ type: 'text', text: 'plain replacement' }] } }) + expect(inbox.nextTurn[0]?.content).toEqual([{ type: 'text', text: 'plain replacement' }]) + expect(inbox.nextTurn[0]?.source).toEqual(message.source) + } finally { await ctx.fiber.dispose() } + }) + it('preserves the cold Agent resolver rejection', async () => { const ctx = new Context() await ctx.plugin(SessionStore) diff --git a/packages/api/session-controller/tests/session-models.host.spec.ts b/packages/api/session-controller/tests/session-models.host.spec.ts index cdb6f9e1d9..cda4c14e6a 100644 --- a/packages/api/session-controller/tests/session-models.host.spec.ts +++ b/packages/api/session-controller/tests/session-models.host.spec.ts @@ -794,6 +794,33 @@ describe('Web session model selection', () => { await ctx.fiber.dispose() }) + it('admits Markdown blockquote text without source metadata', async () => { + const { ctx, agent, sessionId } = await harness() + const followup = vi.fn() + Object.assign(agent, { followup }) + const remote = await createSessionTestRemote(ctx, { + defaultModelSelection: () => ({ provider: 'deepseek-official', model: 'deepseek-chat' }), + cwd: '/tmp', + }) + expectValue(await remote.prompt(promptRequest({ + sessionId, + mode: 'queue', + content: [ + { type: 'text', text: 'Question:\n\n' }, + { type: 'text', text: '> quoted source' }, + ], + }))) + const message = followup.mock.calls[0]?.[0] as UserMessage + expect(message.content).toEqual([ + { type: 'text', text: 'Question:\n\n' }, + { type: 'text', text: '> quoted source' }, + ]) + expect(message.source.kind).toBe('user') + expect(message.source).not.toHaveProperty('quotes') + + await ctx.fiber.dispose() + }) + it('serves a session and its catalog when the stored default names a route that is gone', async () => { const { ctx, sessionId } = await harness() await createSessionTestRemote(ctx, { diff --git a/packages/bundle/web-app/cordis.patch.yml b/packages/bundle/web-app/cordis.patch.yml index 7f9dd10f40..1b44f09b93 100644 --- a/packages/bundle/web-app/cordis.patch.yml +++ b/packages/bundle/web-app/cordis.patch.yml @@ -329,6 +329,9 @@ - id: ui-approval name: '@deepseek-ai/dsh-client-ui-approval' + - id: message-quotes + name: '@deepseek-ai/dsh-message-quotes' + - id: ui-chat name: '@deepseek-ai/dsh-client-ui-chat' diff --git a/packages/bundle/web-app/package.json b/packages/bundle/web-app/package.json index 487009c170..a6aeab97d7 100644 --- a/packages/bundle/web-app/package.json +++ b/packages/bundle/web-app/package.json @@ -77,6 +77,7 @@ "@deepseek-ai/dsh-client-ui-approval": "workspace:*", "@deepseek-ai/dsh-client-ui-attachment": "workspace:*", "@deepseek-ai/dsh-client-ui-brand-official": "workspace:*", + "@deepseek-ai/dsh-message-quotes": "workspace:*", "@deepseek-ai/dsh-client-ui-chat": "workspace:*", "@deepseek-ai/dsh-client-ui-commands": "workspace:*", "@deepseek-ai/dsh-client-ui-conversation": "workspace:*", diff --git a/packages/client/locale/README.i18n.yaml b/packages/client/locale/README.i18n.yaml index 2e2736659e..2b410ece29 100644 --- a/packages/client/locale/README.i18n.yaml +++ b/packages/client/locale/README.i18n.yaml @@ -18,8 +18,8 @@ en: 7fedfbcbc3ad8cea zh: e29ba5230e0b9ecb /deepseek-ai-dsh-client-locale/use-this-package/choosing-a-language: - en: 8527d77583824eff - zh: 2ac53ced0a32ba19 + en: 2b82458e185ba321 + zh: e55a7e709a3f0158 /deepseek-ai-dsh-client-locale/use-this-package/registering-a-dictionary: en: 9b2fcfa8cae8dc4b zh: 293012a4d364ef59 diff --git a/packages/client/locale/README.md b/packages/client/locale/README.md index 8c52703748..3add5d256c 100644 --- a/packages/client/locale/README.md +++ b/packages/client/locale/README.md @@ -29,6 +29,8 @@ Use it wherever the web GUI needs a language switch or translated copy: the ship ### Choosing a language +The Language row uses a smaller label gutter in narrow browser settings; Windows and macOS desktop windows retain the standard spacing. + Open Settings → General and select a registered language. The active locale is applied immediately: the UI copy switches, `` points at the external id or built-in document tag, and the choice is written to the durable settings section. A browser without an explicit Host preference selects the first registered language that matches `navigator` by full tag and then primary subtag, falling back to English. A stored external locale waits for its definition to register instead of becoming active while unavailable. Native shells may provide `__DSH_LOCALE__` with an asynchronous `read()` and an `onChange(locale)` callback. Initialization supplies the current Host preference and ordered OS languages before the Client mounts. Automatic selection stays provisional; only Settings selections write `locale.preference`. A fresh read on each page load prevents a stale preload preference after reload. Ordinary browsers keep navigator-based detection and their existing settings-scope policy. diff --git a/packages/client/locale/README.zh.md b/packages/client/locale/README.zh.md index 0527984591..bdbde381b3 100644 --- a/packages/client/locale/README.zh.md +++ b/packages/client/locale/README.zh.md @@ -29,6 +29,8 @@ kind: "package-reference" ### 选择语言 +窄屏浏览器设置中，语言行缩小标签与控件的间距；Windows 和 macOS 桌面窗口保留标准间距。 + 打开“设置 → 常规”并选择一种已注册语言。生效中的 locale 会立即应用：UI 文案切换、`` 指向外部 id 或内置语言的文档标签，选择写入持久设置分区。没有显式 Host 偏好的浏览器会按完整标签、再按主语言子标签选择 `navigator` 请求的第一个已注册语言，无法匹配时回退到英文。已存储的外部 locale 会等待其定义注册，不会在不可用时生效。 原生壳可以提供包含异步 `read()` 和 `onChange(locale)` 回调的 `__DSH_LOCALE__`。初始化在 Client 挂载前提供当前 Host 偏好和有序的系统语言列表。自动选择保持临时状态；只有设置中的选择会写入 `locale.preference`。每次加载页面都重新读取，避免重载后沿用过期的 preload 偏好。普通浏览器继续使用 navigator 检测和原有的设置作用域策略。 diff --git a/packages/client/locale/src/client/LanguageRow.module.css b/packages/client/locale/src/client/LanguageRow.module.css index 3d78e59775..794ec53652 100644 --- a/packages/client/locale/src/client/LanguageRow.module.css +++ b/packages/client/locale/src/client/LanguageRow.module.css @@ -18,6 +18,14 @@ padding-right: 48px; } +/* Narrow settings panel: the 48px gutter separates the label from its control + across a wide row and only squeezes the label here. */ +@media (max-width: 767px) { + :global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .rowText { + padding-right: 16px; + } +} + .title { font-size: 14px; font-weight: 400; diff --git a/packages/client/ui-chat/README.i18n.yaml b/packages/client/ui-chat/README.i18n.yaml index abaab0beb5..b73a302dba 100644 --- a/packages/client/ui-chat/README.i18n.yaml +++ b/packages/client/ui-chat/README.i18n.yaml @@ -24,8 +24,8 @@ en: 41dcd70e14ebe9cc zh: ededead572b59037 /deepseek-ai-dsh-client-ui-chat/turn-token-usage: - en: bb20da372b144302 - zh: 75a8c5ab7ec8d665 + en: 059eef868161efe4 + zh: 52ecc8e682d4c630 /deepseek-ai-dsh-client-ui-chat/completed-turn-footer: en: 382821ca3ffa60dd zh: 9840ffa07c13082a @@ -36,8 +36,8 @@ en: a14c74ed7de0ef9c zh: d5e618b2ef809150 /deepseek-ai-dsh-client-ui-chat/scroll-ownership: - en: 284737900cb75668 - zh: 12e0844082ff79ce + en: 009ecb4fecd4ee9e + zh: ec2714337a1102c5 /deepseek-ai-dsh-client-ui-chat/model-experience: en: c17b4dd43a61c569 zh: f7414309810c3a08 diff --git a/packages/client/ui-chat/README.md b/packages/client/ui-chat/README.md index ed77f4074f..98b1aa5ec9 100644 --- a/packages/client/ui-chat/README.md +++ b/packages/client/ui-chat/README.md @@ -72,6 +72,8 @@ The composer statistics are two `conversation.composer.dock` list entries: `acti Explicit selections update every consumer immediately; accepted Host settings reconcile the live value, so a refused or pending write keeps the selected mode until the Host answers. +In narrow browser settings, preference labels use a smaller gutter before their controls. Windows and macOS desktop windows retain the standard spacing. + Preference menus restore focus to their trigger without scrolling before publishing a new selection. @@ -172,6 +174,10 @@ Active-Turn highlighting is approximate: `readVisibleTurn` binary-searches the f ----- +The Chat view detects selection and context-menu gestures on business nodes marked with `data-text-interaction-source`. Both selection endpoints must resolve to the same source container. Displayed user content and settled Assistant text or reasoning participate; tools, injected context, streaming or interrupted Assistant text, and Markdown controls do not. + +`ctx.uiConversation.interactions` dispatches eligible gestures to plugin registrations and supplies their component to the Chat view. The action surface is absolutely positioned inside the existing Chat column, above the composer seat and its dock. Its wrapper preserves the component's outer stroke and shadow; components own internal scrolling. Scrolling the selection outside that visible region temporarily hides the surface; returning restores it. Chat owns viewport visibility, placement, outside pointer presses, Escape, new selections, source invalidation, and disposal; explicit dismissal preserves browser selection and layout changes do not reopen the surface. [Message quotes](../../session/message-quotes/README.md) owns quotation eligibility and insertion. + ## Model Experience diff --git a/packages/client/ui-chat/README.zh.md b/packages/client/ui-chat/README.zh.md index ea539ee583..88fa3d4e5f 100644 --- a/packages/client/ui-chat/README.zh.md +++ b/packages/client/ui-chat/README.zh.md @@ -72,6 +72,8 @@ Assistant 尝试结束且没有可见消息时，Chat 隐藏已发布的 Node， 明确选择会立即更新所有使用方；Host 接受的设置会校正实时值，因此写入被拒绝或尚未应答时保持所选模式，直到 Host 应答。 +窄屏浏览器设置中，偏好标签与控件的间距缩小；Windows 和 macOS 桌面窗口保留标准间距。 + 偏好菜单在发布新选择之前，先将焦点还给触发按钮，且不引起滚动。 @@ -172,6 +174,10 @@ Chat 会在历史前插与 renderer 重新挂载时恢复语义锚点，并且 ----- +Chat view 在标记了 `data-text-interaction-source` 的业务节点上检测选区和右键手势。选区两端必须定位到同一个来源容器。已展示的用户内容和已完成的 Assistant 文本或 reasoning 参与交互；Tool、注入上下文、流式或中断的 Assistant 文本以及 Markdown 控件不参与。 + +`ctx.uiConversation.interactions` 将有效手势分发给插件注册项，并把对应组件交给 Chat view。操作展示位置在已有 Chat 列内绝对定位，限制在 composer seat 及其 dock 上方。外层容器保留组件的外描边与阴影，内部滚动由组件负责。选区滚出该可见范围时暂时隐藏操作，滚回后恢复。Chat 负责视口可见性、定位、外部指针按下、Escape、新选区、来源失效与卸载清理；主动关闭保留浏览器选区，布局变化不会重新打开操作。[Message quotes](../../session/message-quotes/README.zh.md) 负责引用的接管条件和插入。 + ## 模型体验 diff --git a/packages/client/ui-chat/src/client/apply.ts b/packages/client/ui-chat/src/client/apply.ts index 6432e3e09e..e61fe3d30c 100644 --- a/packages/client/ui-chat/src/client/apply.ts +++ b/packages/client/ui-chat/src/client/apply.ts @@ -205,11 +205,10 @@ export function apply(ctx: Context): void { }, TranscriptViewRow)) const connectionState = (ctx.get('connection') as ConnectionHandle).state - const nodeSources = (binding: SessionBinding): Pick => { + const nodeSources = (binding: SessionBinding): Pick => { const chat = chatSource(binding) const conversation = ctx.uiConversation.binding(binding) return { - hooks: { presentation }, keyedHooks: { chatNode: key => chat.getSnapshot().nodes.source(key), chatNodeBottom: key => chat.getSnapshot().nodes.bottomSource(key), @@ -227,8 +226,7 @@ export function apply(ctx: Context): void { inject: (sessionId: SessionId): ChatFlowDataInjected => { const binding = ctx.sessions.binding(sessionId) if (binding === undefined) throw new Error(`ui-chat: unknown session "${sessionId}"`) - const sources = nodeSources(binding) - return { ...sources, hooks: { ...sources.hooks, connectionState } } + return { ...nodeSources(binding), hooks: { presentation, connectionState } } }, }, ChatFlow)) @@ -241,6 +239,7 @@ export function apply(ctx: Context): void { locale: NS, children: { 'conversation.chat.flow': { kind: 'single', scope: 'session', inject: CHAT_FLOW_INJECT }, + 'conversation.chat.text-interaction': { kind: 'keyed', scope: 'session' }, }, store: chatStore, inject: (sessionId: SessionId): ChatViewInjected => { @@ -250,6 +249,8 @@ export function apply(ctx: Context): void { const chat = chatSource(binding) return { ...nodeSources(binding), + hooks: { presentation, interactionIds: ctx.uiConversation.interactions }, + dispatchInteraction: gesture => ctx.uiConversation.interactions.dispatch(sessionId, gesture), fileMentions: (owner: TurnTailOwnerProps) => ctx.get('chatFileMentions')?.forClosing(owner, sessionId), // Files open in the right Sidebar, not in a desktop application: the // content stays in the product, beside the conversation that produced diff --git a/packages/client/ui-chat/src/client/chat/AssistantMarkdown.tsx b/packages/client/ui-chat/src/client/chat/AssistantMarkdown.tsx index 22ae5bac70..3d946f8c91 100644 --- a/packages/client/ui-chat/src/client/chat/AssistantMarkdown.tsx +++ b/packages/client/ui-chat/src/client/chat/AssistantMarkdown.tsx @@ -36,6 +36,8 @@ export interface AssistantMarkdownProps extends useDisclosure: UseDisclosure blocks: readonly AssistantBlock[] streaming: boolean + /** Only finalized durable Assistant messages supply selection sources. */ + textInteractionSource?: boolean /** Frozen partial of an aborted turn: rendered with a stopped marker. */ interrupted?: boolean | undefined /** Hide reasoning that belongs to the Turn-level process disclosure. */ @@ -54,7 +56,7 @@ export interface AssistantMarkdownProps extends /** Renders non-blank reasoning blocks as independent disclosures alongside the response. */ export const AssistantMarkdown = memo(function AssistantMarkdown({ - blocks, streaming, interrupted, loadImage, groupPart, useDisclosure, + blocks, streaming, textInteractionSource = false, interrupted, loadImage, groupPart, useDisclosure, reasoningHidden = false, usePresentation, revealProcess, mentions, renderSlot, useGroupAction, t, }: AssistantMarkdownProps) { // Stable per locale revision (t identity changes on switch): a fresh object @@ -88,6 +90,7 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({ labels={labels} fileMentions={mentions} pathImages={pathImages} + textInteractionSource={textInteractionSource} />, ) break @@ -101,7 +104,7 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({ useGroupAction={useGroupAction} > + useDisclosure={useDisclosure} renderSlot={renderSlot} textInteractionSource={textInteractionSource} t={t} /> , ) break diff --git a/packages/client/ui-chat/src/client/chat/AssistantNodeView.tsx b/packages/client/ui-chat/src/client/chat/AssistantNodeView.tsx index 9f8cf6cbe6..455f90f9a2 100644 --- a/packages/client/ui-chat/src/client/chat/AssistantNodeView.tsx +++ b/packages/client/ui-chat/src/client/chat/AssistantNodeView.tsx @@ -40,6 +40,7 @@ export const AssistantNodeView = memo(function AssistantNodeView({ groupPart={groupPart} useDisclosure={useDisclosure} streaming={data.status === 'running'} + textInteractionSource={data.status === 'settled' && data.finalNode?.messageId !== undefined} interrupted={data.status === 'interrupted'} loadImage={loadImage} reasoningHidden={reasoningHidden} diff --git a/packages/client/ui-chat/src/client/chat/ChatView.module.css b/packages/client/ui-chat/src/client/chat/ChatView.module.css index 8c5bb1171a..5c28650c35 100644 --- a/packages/client/ui-chat/src/client/chat/ChatView.module.css +++ b/packages/client/ui-chat/src/client/chat/ChatView.module.css @@ -55,6 +55,7 @@ centered on the same axis as the input box (which caps at chat + 16px); the scroller itself stays full-bleed. */ .column { + position: relative; max-width: var(--dsh-chat-content-width); width: 100%; margin: 0 auto; @@ -66,10 +67,10 @@ `hidden="until-found"` retains a searchable zero-height box; hidden and empty Seats do not contribute spacing. The older-history control precedes the anchor; an ancestor :has() here also invalidates the history on unrelated descendant edits. */ -:is(.column, :global([data-slot="conversation.chat.flow"])) > :not([hidden]):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))) - ~ :not([hidden]):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))), +:is(.column, :global([data-slot="conversation.chat.flow"])) > :not([hidden]):not(.textInteraction):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))) + ~ :not([hidden]):not(.textInteraction):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))), .column > .older + :global([data-slot="conversation.chat.flow"]) - > :not([hidden]):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))) { + > :not([hidden]):not(.textInteraction):not(.flowItem:is(:empty, :has(> [data-slot="conversation.chat.node"]:empty))) { margin-top: var(--dsh-chat-flow-gap, 6px); } @@ -427,3 +428,13 @@ .modalAction { min-width: 72px; } + +/* Local surfaces do not contribute flex spacing or selected message text. */ +.column > .textInteraction { + position: absolute; + /* Remain below the sticky composer while scroll placement catches up. */ + z-index: 6; + visibility: hidden; + margin: 0; + width: max-content; +} diff --git a/packages/client/ui-chat/src/client/chat/ChatView.tsx b/packages/client/ui-chat/src/client/chat/ChatView.tsx index 1e0741f31f..3fb6ca18c6 100644 --- a/packages/client/ui-chat/src/client/chat/ChatView.tsx +++ b/packages/client/ui-chat/src/client/chat/ChatView.tsx @@ -15,6 +15,7 @@ import type { ChatFlowHookContext, ChatViewSlotProps, OpenFileOptions } from '.. import type { ChatSnapshot } from '../contract/snapshot.ts' import { TurnNavigator } from './TurnNavigator.tsx' import { mergeTurnRailItems } from './turn-rail-items.ts' +import { useTextInteraction } from './text-interaction.ts' import { useChatScroll } from './use-chat-scroll.ts' import { fileMediaUrl, resolveWorkspacePath } from '@deepseek-ai/dsh-util-workspace-path' import css from './ChatView.module.css' @@ -60,7 +61,7 @@ const MOTION_TAIL_MS = 800 export function ChatView({ useSession, useChat, useConversation, useSessions, renderSlot, sessionId, openFile, openExternalLink, loadOlder, loadThrough, loadImage, inspectCall, chatScroll, forkAt, fileMentions, - usePresentation, useProjection, t, + usePresentation, useProjection, useInteractionIds, dispatchInteraction, t, }: ChatViewSlotProps) { const order = useChat(s => s.order) const groupedEntries = useConversation(snapshot => snapshot.views.grouped('chat')?.entries) @@ -192,6 +193,9 @@ export function ChatView({ loadedTurns: turnNavigationItems, transcriptView, }) + const interactionSurfaceRef = useRef(null) + const interactionIds = useInteractionIds(ids => ids) + const textInteraction = useTextInteraction(scroll.columnRef, interactionSurfaceRef, dispatchInteraction, interactionIds) const flowContext = useMemo(() => ({ motion: scroll.motion }), [scroll.motion]) return ( @@ -229,6 +233,13 @@ export function ChatView({ cwd, openFile: requestOpenFile, inspectCall, forkAt, loadImage, fileMentions, }, { hookContext: flowContext })} +
+ {textInteraction.active !== null && renderSlot('conversation.chat.text-interaction', { + trigger: textInteraction.active.trigger, readText: textInteraction.readText, + dismiss: textInteraction.dismiss, clearSelection: textInteraction.clearSelection, + }, { entryKey: textInteraction.active.id })} +
{/* No pending placeholders: questions (ui-user-questions) and approvals (ApprovalPanel) both take over the composer, so a flow card would double-render the same wait. */} diff --git a/packages/client/ui-chat/src/client/chat/ReasoningRow.tsx b/packages/client/ui-chat/src/client/chat/ReasoningRow.tsx index 8bbd738f55..347ce6bee4 100644 --- a/packages/client/ui-chat/src/client/chat/ReasoningRow.tsx +++ b/packages/client/ui-chat/src/client/chat/ReasoningRow.tsx @@ -45,9 +45,12 @@ function latestCompletedParagraphFirstLine(text: string): string { * @param props.t - conversation locale seat for the disclosure and running status. * @returns the reasoning disclosure. */ -export const ReasoningRow = memo(function ReasoningRow({ text, running, usePresentation, useDisclosure, renderSlot, t }: { +export const ReasoningRow = memo(function ReasoningRow({ + text, running, textInteractionSource = false, usePresentation, useDisclosure, renderSlot, t, +}: { text: string running: boolean + textInteractionSource?: boolean useDisclosure: UseDisclosure usePresentation: UsePresentation t: ChatViewSlotProps['t'] @@ -68,10 +71,10 @@ export const ReasoningRow = memo(function ReasoningRow({ text, running, usePrese ), [running, summary]) const content = useMemo(() => expanded ? ( -
+
{renderSlot('conversation.chat.reasoning.body', { text, running })}
- ) : undefined, [expanded, renderSlot, running, text]) + ) : undefined, [expanded, renderSlot, running, text, textInteractionSource]) return (
) { ))}
)} - {showBubble &&
+ {showBubble &&
{renderFactorySlot('conversation.user.text', { text, facts, interactive, ellipsis })} {extraBlocks.map((block, index) => ( diff --git a/packages/client/ui-chat/src/client/chat/text-interaction.ts b/packages/client/ui-chat/src/client/chat/text-interaction.ts new file mode 100644 index 0000000000..f497b66952 --- /dev/null +++ b/packages/client/ui-chat/src/client/chat/text-interaction.ts @@ -0,0 +1,298 @@ +/** Area-local text gestures, action ownership, dismissal, and content-relative placement. */ +import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react' +import type { RefObject } from 'react' +import { readTextSelection, selectedText } from './text-selection.ts' +import type { TextSelection } from './text-selection.ts' + +import type { + TextInteractionGesture, TextInteractionSurface, TextInteractionTrigger, +} from '@deepseek-ai/dsh-client-ui-conversation/client' + +/** Current area-owned surface and its actions. */ +export interface TextInteractionBinding extends Omit { + readonly active: { readonly id: string; readonly trigger: TextInteractionTrigger } | null +} + +interface Target { + readonly source: HTMLElement + readonly selection: TextSelection | null + readonly text: string | null + readonly point: { readonly x: number; readonly y: number } | null +} + +interface Bounds { left: number; top: number; right: number; bottom: number } + +function rectBounds(rect: DOMRect): Bounds { + return { left: rect.left, top: rect.top, right: rect.left + rect.width, bottom: rect.top + rect.height } +} + +function intersects(a: Bounds, b: Bounds): boolean { + return a.right > b.left && a.left < b.right && a.bottom > b.top && a.top < b.bottom +} + +function sameRange(a: Range | null, b: Range | null): boolean { + return a === b || (a !== null && b !== null && a.startContainer === b.startContainer + && a.startOffset === b.startOffset && a.endContainer === b.endContainer && a.endOffset === b.endOffset) +} + +function available(root: HTMLElement, target: Target): boolean { + if (!root.isConnected || !root.contains(target.source) || !target.source.hasAttribute('data-text-interaction-source')) return false + const view = root.ownerDocument.defaultView + /* v8 ignore if -- Mounted browser content always has an owner window. */ + if (view === null) return false + for (let node: HTMLElement | null = target.source; node !== null; node = node.parentElement) { + const style = view.getComputedStyle(node) + if (node.hidden || node.inert || node.hasAttribute('data-text-interaction-exclude') + || style.display === 'none' || style.visibility === 'hidden') return false + } + return target.selection === null || (target.source.contains(target.selection.range.startContainer) + && target.source.contains(target.selection.range.endContainer) && selectedText(target.selection) === target.text) +} + +function composerSeat(root: HTMLElement): HTMLElement | null { + return root.closest('[data-conversation-scroll]')?.querySelector('[data-composer-seat]') ?? null +} + +function visibleBounds(root: HTMLElement, source: HTMLElement, view: Window): Bounds { + const rootRect = rectBounds(root.getBoundingClientRect()) + const bounds: Bounds = { + left: Math.max(0, rootRect.left), right: Math.min(view.innerWidth, rootRect.right), top: 0, bottom: view.innerHeight, + } + for (let node: HTMLElement | null = source; node !== null; node = node.parentElement) { + const style = view.getComputedStyle(node) + const rect = rectBounds(node.getBoundingClientRect()) + if (/(auto|scroll|hidden|clip)/u.test(style.overflowX)) { + bounds.left = Math.max(bounds.left, rect.left) + bounds.right = Math.min(bounds.right, rect.right) + } + if (/(auto|scroll|hidden|clip)/u.test(style.overflowY)) { + bounds.top = Math.max(bounds.top, rect.top) + bounds.bottom = Math.min(bounds.bottom, rect.bottom) + } + } + const composer = composerSeat(root)?.getBoundingClientRect() + if (composer !== undefined && composer.height > 0 + && composer.right > bounds.left && composer.left < bounds.right) { + bounds.bottom = Math.min(bounds.bottom, composer.top) + } + return bounds +} + +/** + * Own text interactions for one positioned content area and its local surface. + * @param rootRef - existing content element with position: relative. + * @param surfaceRef - absolute surface inside that element; only the selected Slot consumer is mounted. + * @param dispatchInteraction - framework-injected plugin gesture dispatch. + * @param registeredIds - live registered owners used to dismiss removed plugins. + * @returns current owner and area-local selection actions. + */ +export function useTextInteraction( + rootRef: RefObject, surfaceRef: RefObject, + dispatchInteraction: (gesture: TextInteractionGesture) => string | null, + registeredIds: readonly string[], +): TextInteractionBinding { + const target = useRef(null) + const [active, setActive] = useState(null) + const dismiss = useCallback(() => { + target.current = null + if (surfaceRef.current !== null) surfaceRef.current.style.visibility = 'hidden' + setActive(null) + }, [surfaceRef]) + useEffect(dismiss, [registeredIds, dispatchInteraction, dismiss]) + const readText = useCallback(() => { + const root = rootRef.current + const current = target.current + if (root === null || current === null || !available(root, current)) return null + return current.selection === null ? null : selectedText(current.selection) + }, [rootRef]) + const clearSelection = useCallback(() => { rootRef.current?.ownerDocument.getSelection()?.removeAllRanges() }, [rootRef]) + + const place = useCallback(() => { + const root = rootRef.current + const surface = surfaceRef.current + const current = target.current + if (root === null || surface === null || current === null) return + if (!available(root, current)) { dismiss(); return } + const view = root.ownerDocument.defaultView + /* v8 ignore if -- Mounted browser content always has an owner window. */ + if (view === null) return + const visible = visibleBounds(root, current.source, view) + const selectionRects = current.selection === null ? [] : [...current.selection.range.getClientRects()] + const fallback = current.selection?.range.getBoundingClientRect() ?? current.source.getBoundingClientRect() + const rects = selectionRects.length === 0 ? [fallback] : selectionRects + const sourceRect = current.source.getBoundingClientRect() + const pointX = current.point === null ? 0 : sourceRect.left + current.point.x - current.source.scrollLeft + const pointY = current.point === null ? 0 : sourceRect.top + current.point.y - current.source.scrollTop + const anchor = current.point === null + ? rects.map(rectBounds).find(rect => intersects(rect, visible)) + : { left: pointX, right: pointX + 1, top: pointY, bottom: pointY + 1 } + if (anchor === undefined || !intersects(anchor, visible) || visible.right <= visible.left || visible.bottom <= visible.top) { + surface.style.visibility = 'hidden' + return + } + const gap = 8 + surface.style.maxWidth = `${visible.right - visible.left}px` + surface.style.maxHeight = `${visible.bottom - visible.top}px` + const size = surface.getBoundingClientRect() + const x = current.point === null + ? (Math.max(anchor.left, visible.left) + Math.min(anchor.right, visible.right) - size.width) / 2 + : anchor.left + const above = anchor.top - gap - size.height + const below = anchor.bottom + gap + const preferredY = current.point === null && above >= visible.top ? above : below + const left = Math.max(visible.left, Math.min(x, visible.right - size.width)) + const top = Math.max(visible.top, Math.min(preferredY, visible.bottom - size.height)) + const rootRect = root.getBoundingClientRect() + const scaleX = root.offsetWidth === 0 ? 1 : rootRect.width / root.offsetWidth + const scaleY = root.offsetHeight === 0 ? 1 : rootRect.height / root.offsetHeight + surface.style.left = `${(left - rootRect.left) / scaleX - root.clientLeft + root.scrollLeft}px` + surface.style.top = `${(top - rootRect.top) / scaleY - root.clientTop + root.scrollTop}px` + surface.style.visibility = 'visible' + }, [dismiss, rootRef, surfaceRef]) + + // The surface's measured dimensions are needed after its Slot owner renders, before paint. + useLayoutEffect(place, [active, place]) + useEffect(() => { + const root = rootRef.current + const surface = surfaceRef.current + if (root === null || surface === null) return + const document = root.ownerDocument + const view = document.defaultView + /* v8 ignore if -- Mounted browser content always has an owner window. */ + if (view === null) return + let pointerSelecting = false + let keyboardSelecting = false + let selectionChangedDuringGesture = false + let previousRange: Range | null = null + let frame: number | undefined + const schedulePlacement = (): void => { + if (target.current === null || frame !== undefined) return + frame = view.requestAnimationFrame(() => { frame = undefined; place() }) + } + const dispatch = (trigger: TextInteractionTrigger, next: Target, event: Event): void => { + if (!available(root, next)) return + const id = dispatchInteraction({ + trigger, hasSelection: next.selection !== null, + readText: () => next.text, + preventDefault: () => { event.preventDefault() }, + }) + if (id === null) return + target.current = next + setActive({ id, trigger }) + } + const updateSelection = (event: Event): void => { + if (pointerSelecting || keyboardSelecting) { selectionChangedDuringGesture = true; return } + if (target.current !== null && target.current.point !== null) return + if (target.current !== null && surface.contains(document.activeElement)) return + const selection = readTextSelection(root, document.getSelection()) + const range = selection?.range ?? null + if (!selectionChangedDuringGesture && sameRange(previousRange, range)) return + selectionChangedDuringGesture = false + previousRange = range?.cloneRange() ?? null + dismiss() + if (selection === null) return + const text = selectedText(selection) + if (text === null) return + dispatch('selection', { source: selection.source, selection: { ...selection, range: selection.range.cloneRange() }, text, point: null }, event) + } + const insideSurface = (event: Event): boolean => event.composedPath().includes(surface) + const pointerDown = (event: PointerEvent): void => { + if (insideSurface(event)) return + const selection = document.getSelection() + previousRange = selection?.rangeCount === 1 ? selection.getRangeAt(0).cloneRange() : null + dismiss() + selectionChangedDuringGesture = false + pointerSelecting = event.button === 0 && event.target instanceof Node && root.contains(event.target) + } + const pointerUp = (event: PointerEvent): void => { + if (!pointerSelecting) return + pointerSelecting = false + updateSelection(event) + } + const cancel = (): void => { pointerSelecting = false; keyboardSelecting = false; dismiss() } + const keyDown = (event: KeyboardEvent): void => { + if (event.key === 'Escape') { cancel(); return } + if (insideSurface(event) || !(event.target instanceof Node) || !root.contains(event.target)) return + if (event.key === 'Shift' || event.shiftKey) { keyboardSelecting = true; dismiss() } + } + const keyUp = (event: KeyboardEvent): void => { + if (!keyboardSelecting || (event.key !== 'Shift' && event.shiftKey)) return + keyboardSelecting = false + updateSelection(event) + } + const contextMenu = (event: MouseEvent): void => { + if (insideSurface(event)) return + const element = event.target instanceof Element ? event.target : null + const source = element?.closest('[data-text-interaction-source]') + if (source === undefined || source === null || !root.contains(source) + || element?.closest('[data-text-interaction-exclude], button, input, textarea, [contenteditable="true"]')) return + pointerSelecting = false + dismiss() + const selected = readTextSelection(root, document.getSelection()) + const keyboard = event.clientX === 0 && event.clientY === 0 + const inSelection = selected?.source === source && (keyboard || [...selected.range.getClientRects()].some(rect => + event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom)) + const selection = inSelection ? selected : null + const bounds = source.getBoundingClientRect() + dispatch('contextmenu', { + source, selection: selection === null ? null : { ...selection, range: selection.range.cloneRange() }, + text: selection === null ? null : selectedText(selection), + point: { + x: (keyboard ? 0 : event.clientX - bounds.left) + source.scrollLeft, + y: (keyboard ? 0 : event.clientY - bounds.top) + source.scrollTop, + }, + }, event) + } + document.addEventListener('selectionchange', updateSelection) + document.addEventListener('pointerdown', pointerDown, true) + document.addEventListener('pointerup', pointerUp) + document.addEventListener('pointercancel', cancel) + document.addEventListener('keydown', keyDown) + document.addEventListener('keyup', keyUp) + document.addEventListener('scroll', schedulePlacement, true) + root.addEventListener('contextmenu', contextMenu) + view.addEventListener('resize', schedulePlacement) + view.addEventListener('blur', cancel) + return () => { + document.removeEventListener('selectionchange', updateSelection) + document.removeEventListener('pointerdown', pointerDown, true) + document.removeEventListener('pointerup', pointerUp) + document.removeEventListener('pointercancel', cancel) + document.removeEventListener('keydown', keyDown) + document.removeEventListener('keyup', keyUp) + document.removeEventListener('scroll', schedulePlacement, true) + root.removeEventListener('contextmenu', contextMenu) + view.removeEventListener('resize', schedulePlacement) + view.removeEventListener('blur', cancel) + if (frame !== undefined) view.cancelAnimationFrame(frame) + } + }, [dismiss, place, rootRef, surfaceRef, dispatchInteraction]) + useEffect(() => { + const root = rootRef.current + const surface = surfaceRef.current + if (active === null || root === null || surface === null) return + const view = root.ownerDocument.defaultView + /* v8 ignore if -- Mounted browser content always has an owner window. */ + if (view === null) return + let frame: number | undefined + const schedule = (): void => { + if (frame !== undefined) return + frame = view.requestAnimationFrame(() => { frame = undefined; place() }) + } + const resize = new ResizeObserver(schedule) + resize.observe(root) + resize.observe(surface) + const composer = composerSeat(root) + if (composer !== null) resize.observe(composer) + const mutations = new MutationObserver((records) => { + if (records.some(record => !surface.contains(record.target))) schedule() + }) + mutations.observe(root, { childList: true, subtree: true, characterData: true, attributes: true }) + return () => { + resize.disconnect() + mutations.disconnect() + if (frame !== undefined) view.cancelAnimationFrame(frame) + } + }, [active, place, rootRef, surfaceRef]) + return { active, dismiss, readText, clearSelection } +} diff --git a/packages/client/ui-chat/src/client/chat/text-selection.ts b/packages/client/ui-chat/src/client/chat/text-selection.ts new file mode 100644 index 0000000000..bc3ae4dec0 --- /dev/null +++ b/packages/client/ui-chat/src/client/chat/text-selection.ts @@ -0,0 +1,180 @@ +/** DOM selection validation and visible-text projection, independent of business actions. */ + +const PROJECTED_BLOCK_TAGS = new Set([ + 'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'DD', 'DIV', 'DL', 'DT', 'FIGCAPTION', + 'FIGURE', 'FOOTER', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'LI', 'MAIN', + 'NAV', 'OL', 'P', 'PRE', 'SECTION', 'TABLE', 'TBODY', 'TFOOT', 'THEAD', 'TR', 'UL', +]) +const PROJECTED_CELL_TAGS = new Set(['TD', 'TH']) + +function excluded(element: Element): boolean { + if (element.matches('.katex-mathml, [data-text-interaction-exclude], [hidden], .sr-only')) return true + if (element.matches('[aria-hidden="true"]') && !element.matches('.katex-html')) return true + return element.tagName === 'BUTTON' && element.parentElement?.tagName !== 'CODE' +} + +function projectedBoundary(node: Node): '\n' | '\t' | '' { + if (!(node instanceof Element)) return '' + if (PROJECTED_CELL_TAGS.has(node.tagName)) return '\t' + return PROJECTED_BLOCK_TAGS.has(node.tagName) ? '\n' : '' +} + +function projectedSeparator(previous: Node, current: Node): '\n' | '\t' | '' { + const left = projectedBoundary(previous) + const right = projectedBoundary(current) + if (left === '\n' || right === '\n') return '\n' + return left === '\t' || right === '\t' ? '\t' : '' +} + +interface ProjectedText { + readonly text: string + readonly offsets: readonly number[] +} + +function projectedText(node: Text): ProjectedText { + const source = node.data + const parent = node.parentElement + const view = node.ownerDocument.defaultView + const whiteSpace = parent === null || view === null ? '' : view.getComputedStyle(parent).whiteSpace + const preservesBreaks = whiteSpace === 'pre' || whiteSpace === 'pre-wrap' + || whiteSpace === 'pre-line' || whiteSpace === 'break-spaces' + const offsets = new Array(source.length + 1).fill(0) + const structuralWhitespace = !preservesBreaks + && /^[\t\n\f\r ]*$/u.test(source) + && [node.previousSibling, node.nextSibling].some( + sibling => sibling !== null && projectedBoundary(sibling) !== '', + ) + if (structuralWhitespace) return { text: '', offsets } + let text = '' + let cursor = 0 + if (!preservesBreaks && node.previousSibling instanceof HTMLElement + && node.previousSibling.tagName === 'BR' && source.startsWith('\n')) { + cursor = 1 + } + while (cursor < source.length) { + const softBreak = preservesBreaks ? null : /^[ \t]*[\r\n]+[ \t]*/u.exec(source.slice(cursor)) + if (softBreak !== null) { + const end = cursor + softBreak[0].length + for (let index = cursor; index < end; index++) offsets[index] = text.length + text += ' ' + offsets[end] = text.length + cursor = end + continue + } + offsets[cursor] = text.length + text += source.charAt(cursor) + cursor += 1 + offsets[cursor] = text.length + } + return { text, offsets } +} + +interface ProjectedTextSpan { + readonly node: Text + readonly start: number + readonly offsets: readonly number[] +} + +interface ProjectedFragment { + readonly text: string + readonly spans: readonly ProjectedTextSpan[] + readonly boundaries: readonly (readonly [Node, readonly number[]])[] +} + +function projectedFragment(node: Node): ProjectedFragment { + if (node.nodeType === Node.TEXT_NODE) { + const projected = projectedText(node as Text) + return { + text: projected.text, + spans: projected.offsets.length <= 1 + ? [] + : [{ node: node as Text, start: 0, offsets: projected.offsets }], + boundaries: [], + } + } + if (!(node instanceof Element)) { + return { text: '', spans: [], boundaries: [] } + } + if (excluded(node)) return { text: '', spans: [], boundaries: [] } + if (node.tagName === 'BR') return { text: '\n', spans: [], boundaries: [] } + let text = '' + let previous: Node | null = null + const spans: ProjectedTextSpan[] = [] + const boundaries: Array = [] + const offsets = new Array(node.childNodes.length + 1).fill(0) + for (const [index, child] of [...node.childNodes].entries()) { + const fragment = projectedFragment(child) + if (fragment.text !== '' && previous !== null) { + const separator = projectedSeparator(previous, child) + const needsSeparator = separator === '\n' + ? !text.endsWith('\n') && !fragment.text.startsWith('\n') + : separator === '\t' && !/[\t\n]$/u.test(text) && !/^[\t\n]/u.test(fragment.text) + if (needsSeparator) text += separator + } + offsets[index] = text.length + const base = text.length + text += fragment.text + for (const span of fragment.spans) { + spans.push({ node: span.node, start: base + span.start, offsets: span.offsets }) + } + for (const [owner, childOffsets] of fragment.boundaries) { + boundaries.push([owner, childOffsets.map(offset => base + offset)]) + } + if (fragment.text !== '') previous = child + offsets[index + 1] = text.length + } + boundaries.push([node, offsets]) + return { text, spans, boundaries } +} + +function projectedOffset( + projection: ProjectedFragment, + container: Node, + offset: number, +): number | null { + if (container.nodeType === Node.TEXT_NODE) { + const span = projection.spans.find(candidate => candidate.node === container) + const projected = span?.offsets[offset] + return span === undefined || projected === undefined ? null : span.start + projected + } + const boundaries = projection.boundaries.find(([owner]) => owner === container)?.[1] + return boundaries?.[offset] ?? null +} + +/** One browser range contained by an enabled text source. */ +export interface TextSelection { + readonly source: HTMLElement + readonly range: Range +} + +/** + * Find a single noncollapsed selection inside one enabled source. + * @param root - mounted interaction area. + * @param selection - browser selection in that area's document. + * @returns the selected source and range, or null across sources and excluded content. + */ +export function readTextSelection(root: HTMLElement, selection: Selection | null): TextSelection | null { + if (selection === null || selection.rangeCount !== 1 || selection.isCollapsed) return null + const range = selection.getRangeAt(0) + const sourceOf = (node: Node): HTMLElement | null => + (node instanceof Element ? node : node.parentElement)?.closest('[data-text-interaction-source]') ?? null + const source = sourceOf(range.startContainer) + if (source === null || source !== sourceOf(range.endContainer) || !root.contains(source) + || source.closest('[hidden], [inert], [data-text-interaction-exclude]') !== null) return null + return { source, range } +} + +/** + * Project selected DOM text with visible block boundaries and without renderer chrome. + * @param selection - range and its source, obtained through readTextSelection. + * @returns trimmed visible text; empty or excluded selections return null. + */ +export function selectedText(selection: TextSelection): string | null { + const { source, range } = selection + const projection = projectedFragment(source) + const start = projectedOffset(projection, range.startContainer, range.startOffset) + const end = projectedOffset(projection, range.endContainer, range.endOffset) + if (start === null || end === null) return null + const text = projection.text.slice(start, end).trim() + return text === '' ? null : text +} diff --git a/packages/client/ui-chat/src/client/contract/slots.ts b/packages/client/ui-chat/src/client/contract/slots.ts index 4bd88840f6..fc4be216cc 100644 --- a/packages/client/ui-chat/src/client/contract/slots.ts +++ b/packages/client/ui-chat/src/client/contract/slots.ts @@ -7,6 +7,7 @@ import type { FileAttachmentRef } from '@deepseek-ai/dsh-attachment' import type { InboxState } from '@deepseek-ai/dsh-agent/types' import type { CommandNode, CompactionSummaryNode, ConversationLocationDataStore, ConversationTurnDataMap, + TextInteractionGesture, TextInteractionSurface, ConversationGroupData, GroupSnapshot, MessageImageLoader, MessageImageSource, MessageImagesOwnerProps, RenderEntry, TurnLocation, UserTextFacts, UserTextInput, } from '@deepseek-ai/dsh-client-ui-conversation/client' @@ -297,7 +298,11 @@ export interface PerformanceUsageInjected { /** Business callbacks injected into the Chat view. */ export interface ChatViewInjected { + /** Dispatch one gesture to the Conversation plugin registry. */ + dispatchInteraction: (gesture: TextInteractionGesture) => string | null hooks: { + /** Live plugin IDs; removed plugins dismiss their active surface. */ + interactionIds: ObservableSnapshot /** Live presentation policy derived from the accepted work-details mode. */ presentation: ObservableSnapshot } @@ -328,7 +333,7 @@ export interface ChatViewInjected { /** Session-owned node sources shared with the view, plus the flow's connection state. */ export type ChatFlowDataInjected = Pick & { - hooks: ChatViewInjected['hooks'] & { + hooks: Pick & { /** Client connection lifecycle; the running clock pauses while it is not connected. */ connectionState: ConnectionStateSource } @@ -355,7 +360,7 @@ export type ChatFlowSlotProps = /** Full Chat view props. */ export type ChatViewSlotProps = PropsRuntime<'conversation.view'> - & PropsRenderSlots<'conversation.chat.flow'> + & PropsRenderSlots<'conversation.chat.flow' | 'conversation.chat.text-interaction'> & PropsStore & InjectFace & PropsLocale<'chat'> @@ -392,6 +397,9 @@ declare module '@deepseek-ai/dsh-client-ui-slots' { } interface SlotMap { + /** Area-local text gestures and surfaces; each consumer registers its own synchronous admission. */ + 'conversation.chat.text-interaction': { kind: 'keyed'; scope: 'session'; owner: TextInteractionSurface } + /** Ordered Chat rows and local echoes with viewport-bound visibility hooks. */ 'conversation.chat.flow': { kind: 'single' diff --git a/packages/client/ui-chat/src/client/conversation-nodes/message.ts b/packages/client/ui-chat/src/client/conversation-nodes/message.ts index 967b5446c1..fb7684a8f7 100644 --- a/packages/client/ui-chat/src/client/conversation-nodes/message.ts +++ b/packages/client/ui-chat/src/client/conversation-nodes/message.ts @@ -126,6 +126,7 @@ export const messageDefinition: ConversationNodeDefinition = { } : { kind: 'user', + messageId: event.data.id, seq: event.seq, time: event.time, content: event.data.content, diff --git a/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css b/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css index dfcb95648d..142f42af73 100644 --- a/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css +++ b/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css @@ -17,6 +17,14 @@ padding-right: 48px; } +/* Narrow settings panel: the 48px gutter separates the label from its control + across a wide row and only squeezes the label here. */ +@media (max-width: 767px) { + :global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .rowText { + padding-right: 16px; + } +} + .title { font-size: 14px; font-weight: 400; diff --git a/packages/client/ui-chat/tests/apply-inject.client.spec.tsx b/packages/client/ui-chat/tests/apply-inject.client.spec.tsx index 3bdd5e706b..c89f2c88b3 100644 --- a/packages/client/ui-chat/tests/apply-inject.client.spec.tsx +++ b/packages/client/ui-chat/tests/apply-inject.client.spec.tsx @@ -138,6 +138,50 @@ async function bench(initialSettings?: ChatSettings, withBrowserRegistry = true, } describe('Chat inject API', () => { + it('routes text gestures from each Chat view to the registered consumer with its own Session', async () => { + const b = await bench() + try { + const secondId = await b.runtime.sessions.add({ id: 'second-chat' }) + using secondReference = b.runtime.sessions.retain(secondId) + await secondReference.ready + const first = b.chatViewApi(b.rootReference).injected + const second = b.chatViewApi(secondReference).injected + const received: { sessionId: SessionId; text: string | null }[] = [] + const dispose = b.runtime.ctx.uiConversation.interactions.register({ + id: 'selection-menu', + onInteraction(request) { + received.push({ sessionId: request.sessionId, text: request.readText() }) + if (request.trigger !== 'contextmenu') return + request.preventDefault() + request.open() + }, + }) + expect(first.hooks.interactionIds.getSnapshot()).toEqual(['selection-menu']) + expect(second.hooks.interactionIds.getSnapshot()).toEqual(['selection-menu']) + const nativeMenu = vi.fn() + expect(first.dispatchInteraction({ + trigger: 'selection', hasSelection: true, readText: () => 'first selection', preventDefault: nativeMenu, + })).toBeNull() + expect(nativeMenu).not.toHaveBeenCalled() + const contextMenu = { + trigger: 'contextmenu' as const, hasSelection: true, + readText: () => 'second selection', preventDefault: nativeMenu, + } + expect(second.dispatchInteraction(contextMenu)).toBe('selection-menu') + expect(nativeMenu).toHaveBeenCalledOnce() + expect(received).toEqual([ + { sessionId: ROOT, text: 'first selection' }, + { sessionId: secondId, text: 'second selection' }, + ]) + dispose() + expect(first.hooks.interactionIds.getSnapshot()).toEqual([]) + expect(second.dispatchInteraction(contextMenu)).toBeNull() + expect(nativeMenu).toHaveBeenCalledOnce() + } finally { + await b.runtime.dispose() + } + }) + it('projects independent Settings choices and saves timing to Host settings', async () => { const b = await bench() try { diff --git a/packages/client/ui-chat/tests/chat-font-axis-styles.client.spec.ts b/packages/client/ui-chat/tests/chat-font-axis-styles.client.spec.ts index de1f0688dd..aeba01b380 100644 --- a/packages/client/ui-chat/tests/chat-font-axis-styles.client.spec.ts +++ b/packages/client/ui-chat/tests/chat-font-axis-styles.client.spec.ts @@ -161,8 +161,8 @@ describe('chat flow font-size axis', () => { const empty = declarationsFrom(css, emptySelector) expect(empty).toContain('height: 0') expect(empty).not.toContain('display: none') - expect(css).toContain(`:is(.column, :global([data-slot="conversation.chat.flow"])) > :not([hidden]):not(${emptySelector})`) - expect(css).toContain(`~ :not([hidden]):not(${emptySelector})`) + expect(css).toContain(`:is(.column, :global([data-slot="conversation.chat.flow"])) > :not([hidden]):not(.textInteraction):not(${emptySelector})`) + expect(css).toContain(`~ :not([hidden]):not(.textInteraction):not(${emptySelector})`) }) it('the interrupted-turn tag stays fixed like the dense token variants', () => { diff --git a/packages/client/ui-chat/tests/chat-view.client.spec.tsx b/packages/client/ui-chat/tests/chat-view.client.spec.tsx index 078181f3f3..f1840034d4 100644 --- a/packages/client/ui-chat/tests/chat-view.client.spec.tsx +++ b/packages/client/ui-chat/tests/chat-view.client.spec.tsx @@ -260,7 +260,7 @@ function bindKeyedSnapshotSelector( } declare const nodeDispatch: PropsRenderSlots<'conversation.chat.node'>['renderSlot'] -declare const flowDispatch: ChatViewSlotProps['renderSlot'] +declare const flowDispatch: PropsRenderSlots<'conversation.chat.flow'>['renderSlot'] type NodeRenderer = typeof nodeDispatch<'conversation.chat.node'> type FlowRenderer = typeof flowDispatch<'conversation.chat.flow'> type ImageRenderer = (owner: MessageImagesOwnerProps) => React.ReactNode @@ -453,7 +453,8 @@ function makeHarness( if (name !== 'conversation.chat.user.content') throw new Error(`Unexpected Chat Factory: ${name}`) return renderUserContent(owner as UserContentInput, renderImages, props.t) } - const renderSlot: FlowRenderer = (key, owner, opts) => { + const renderSlot = (key: string, owner: ChatFlowOwnerProps, opts: Parameters[2]) => { + if (key === 'conversation.chat.text-interaction') return null if (key !== 'conversation.chat.flow') throw new Error(`Undeclared ChatView child: ${key}`) if ('renderSlot' in owner || 'useStore' in owner || 'actions' in owner) { throw new Error('Flow owner data must not replace its rendering or store authority') @@ -492,6 +493,7 @@ function makeHarness( }, useInput: (() => { throw new Error('unused') }), inputActions: { + insertQuote: () => false, captureInsertion: () => ({ start: 0, end: 0, draftRev: 0 }), insertText: () => false, setDraft: () => {}, @@ -503,6 +505,8 @@ function makeHarness( }, useStore: bindSnapshotSelector(chat), actions: chat.actions, + useInteractionIds: bindSnapshotSelector(createSnapshotStore([])), + dispatchInteraction: () => null, usePresentation: bindSnapshotSelector(derivePresentationPolicy(transcriptView, collapseTiming, foldedReplies)), // The fixture implements the concrete flow dispatch behind the generic slot signature. renderSlot: renderSlot as ChatViewSlotProps['renderSlot'], @@ -4575,7 +4579,7 @@ describe('ChatView', () => { const view = render() const column = view.container.querySelector('[data-chat-flow]')! const status = column.querySelector('[data-chat-running]') - expect(column.lastElementChild).toBe(status) + expect([...column.children].filter(child => !child.hasAttribute('data-text-interaction-surface')).at(-1)).toBe(status) expect(within(status as HTMLElement).getByRole('status').textContent).toBe('深度求索中') expect(status?.lastElementChild?.textContent).toBe('深度求索中') const icon = status?.querySelector('svg')?.parentElement diff --git a/packages/client/ui-chat/tests/coverage-tails.client.spec.tsx b/packages/client/ui-chat/tests/coverage-tails.client.spec.tsx index 241a0faded..2d4043f261 100644 --- a/packages/client/ui-chat/tests/coverage-tails.client.spec.tsx +++ b/packages/client/ui-chat/tests/coverage-tails.client.spec.tsx @@ -16,6 +16,26 @@ const t: AssistantMarkdownProps['t'] = makeTranslate(zh, commonZh) afterEach(cleanup) describe('tails', () => { + it('enables quoting on the existing Markdown root without replacing streamed content', () => { + const body = (textInteractionSource: boolean, streaming: boolean) => ( + null} useDisclosure={useDisclosure} useGroupAction={useSearchableHidden} + usePresentation={useDetailedPresentation} t={t} loadImage={unusedImageLoader} + blocks={[{ kind: 'text', text: 'source words' }]} textInteractionSource={textInteractionSource} streaming={streaming} /> + ) + const view = render(body(false, true)) + const paragraph = view.getByText('source words') + const markdown = paragraph.parentElement + expect(view.container.querySelector('[data-text-interaction-source]')).toBeNull() + + view.rerender(body(true, false)) + expect(view.container.querySelector('[data-text-interaction-source]')).toBe(markdown) + expect(view.getByText('source words')).toBe(paragraph) + + view.rerender(body(false, false)) + expect(view.container.querySelector('[data-text-interaction-source]')).toBeNull() + expect(view.getByText('source words').parentElement).toBe(markdown) + }) + it('AssistantMarkdown renders reasoning as a Think row and unknown blocks as JSON fallback', () => { const view = render( null} useDisclosure={useDisclosure} useGroupAction={useSearchableHidden} diff --git a/packages/client/ui-chat/tests/text-interaction.client.spec.tsx b/packages/client/ui-chat/tests/text-interaction.client.spec.tsx new file mode 100644 index 0000000000..2d8a1d6426 --- /dev/null +++ b/packages/client/ui-chat/tests/text-interaction.client.spec.tsx @@ -0,0 +1,374 @@ +// @vitest-environment jsdom +import { createRef, useCallback, useMemo, useRef } from 'react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { act, cleanup, fireEvent, render, renderHook } from '@testing-library/react' +import { useTextInteraction } from '../src/client/chat/text-interaction.ts' +import { SessionId } from '@deepseek-ai/dsh-session/types' +import type { TextInteractionBinding } from '../src/client/chat/text-interaction.ts' +import type { TextInteractionGesture, TextInteractionRequest } from '@deepseek-ai/dsh-client-ui-conversation/client' + +const rect = (left: number, top: number, width: number, height: number): DOMRect => new DOMRect(left, top, width, height) +let selectionRect = rect(100, 120, 40, 20) +let resize: () => void + +beforeEach(() => { + selectionRect = rect(100, 120, 40, 20) + vi.stubGlobal('ResizeObserver', class { + constructor(callback: () => void) { resize = callback } + observe() {} + disconnect() {} + }) + Object.defineProperty(Range.prototype, 'getBoundingClientRect', { configurable: true, value: () => selectionRect }) + Object.defineProperty(Range.prototype, 'getClientRects', { configurable: true, value: () => Object.assign([selectionRect], { item: (i: number) => i === 0 ? selectionRect : null }) }) + vi.stubGlobal('PointerEvent', MouseEvent) + vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) { + if (this.dataset.surface !== undefined) return rect(0, 0, 80, 30) + if (this.dataset.viewport !== undefined) return rect(20, 80, 400, 300) + return rect(40, 100, 300, 500) + }) +}) + +afterEach(() => { + cleanup() + window.getSelection()?.removeAllRanges() + Reflect.deleteProperty(Range.prototype, 'getBoundingClientRect') + Reflect.deleteProperty(Range.prototype, 'getClientRects') + vi.restoreAllMocks() + vi.unstubAllGlobals() +}) + +function Area({ id = 'action', admit, onBinding, enabled = true, composer = false }: { + enabled?: boolean + composer?: boolean + id?: string + admit?: (request: TextInteractionRequest) => void + onBinding?: (binding: TextInteractionBinding) => void +}) { + const root = useRef(null) + const surface = useRef(null) + const ids = useMemo(() => enabled ? [id] : [], [enabled, id]) + const dispatch = useCallback((gesture: TextInteractionGesture): string | null => { + if (!enabled) return null + let opened = false + const request: TextInteractionRequest = { ...gesture, sessionId: SessionId(id), open: () => { opened = true } } + if (admit === undefined) { if (request.trigger === 'selection') request.open() } + else admit(request) + return opened ? id : null + }, [id, admit, enabled]) + const interaction = useTextInteraction(root, surface, dispatch, ids) + onBinding?.(interaction) + return
+
+

Hello {id}

+

Other text

+
+ {interaction.active?.id === id && } +
+
+ {composer &&
Composer and dock
} +
+} + +function select(source: Element) { + const range = document.createRange() + range.selectNodeContents(source) + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + fireEvent(document, new Event('selectionchange')) + return selection +} + +async function layout() { + await act(async () => { resize(); await new Promise(resolve => requestAnimationFrame(resolve)) }) +} + +describe('area text interactions', () => { + it('waits for pointer and keyboard selection to finish', () => { + const view = render() + const source = view.container.querySelector('[data-text-interaction-source]')! + fireEvent.pointerDown(source, { button: 0 }) + select(source) + expect(view.queryByRole('button')).toBeNull() + fireEvent.pointerUp(document) + expect(view.getByRole('button', { name: 'action' })).toBeTruthy() + fireEvent.keyDown(source, { key: 'Shift', shiftKey: true }) + expect(view.queryByRole('button')).toBeNull() + const range = window.getSelection()!.getRangeAt(0) + range.setEnd(source.firstChild!, 3) + fireEvent(document, new Event('selectionchange')) + fireEvent.keyUp(source, { key: 'Shift' }) + expect(view.getByRole('button')).toBeTruthy() + }) + + it('closes outside without clearing selection or reopening on scroll and resize', async () => { + const view = render(<>) + const selection = select(view.container.querySelector('[data-text-interaction-source]')!) + const action = view.getByRole('button', { name: 'action' }) + fireEvent.pointerDown(action, { button: 0 }) + expect(view.getByRole('button', { name: 'action' })).toBeTruthy() + fireEvent.pointerDown(view.getByRole('button', { name: 'Outside' }), { button: 0 }) + expect(view.queryByRole('button', { name: 'action' })).toBeNull() + expect(selection.toString()).toBe('Hello action') + fireEvent.pointerUp(document) + fireEvent(document, new Event('selectionchange')) + fireEvent.scroll(view.container.querySelector('[data-viewport]')!) + await layout() + expect(view.queryByRole('button', { name: 'action' })).toBeNull() + }) + + it('dismisses on Escape, cancellation and blur', () => { + const view = render() + const sources = view.container.querySelectorAll('[data-text-interaction-source]') + select(sources[0]!) + fireEvent.keyDown(document, { key: 'Escape' }) + expect(view.queryByRole('button')).toBeNull() + select(sources[1]!) + fireEvent.pointerCancel(document) + expect(view.queryByRole('button')).toBeNull() + select(sources[0]!) + fireEvent.blur(window) + expect(view.queryByRole('button')).toBeNull() + }) + + it('places in content coordinates, flips below at the top and restores after scrolling offscreen', async () => { + const view = render() + select(view.container.querySelector('[data-text-interaction-source]')!) + const surface = view.container.querySelector('[data-surface]')! + expect(surface.parentElement?.dataset.area).toBe('action') + expect(surface.style.left).toBe('40px') + expect(surface.style.top).toBe('-18px') + selectionRect = rect(100, 90, 40, 20) + await layout() + expect(surface.style.top).toBe('18px') + selectionRect = rect(100, 10, 40, 20) + fireEvent.scroll(view.container.querySelector('[data-viewport]')!) + await layout() + expect(view.queryByRole('button')).toBeNull() + expect(surface.querySelector('button')).not.toBeNull() + selectionRect = rect(100, 120, 40, 20) + fireEvent.scroll(view.container.querySelector('[data-viewport]')!) + await layout() + expect(view.getByRole('button')).toBeTruthy() + expect(surface.style.top).toBe('-18px') + }) + + it('hides behind the composer and its dock, restores on resize, and keeps explicit dismissal final', async () => { + const view = render() + const composer = view.container.querySelector('[data-composer-seat]')! + let composerTop = 260 + composer.getBoundingClientRect = () => rect(20, composerTop, 400, 380 - composerTop) + const source = view.container.querySelector('[data-text-interaction-source]')! + const selection = select(source) + const surface = view.container.querySelector('[data-surface]')! + const action = surface.querySelector('button')! + selectionRect = rect(100, 280, 40, 20) + await layout() + expect(surface.style.visibility).toBe('hidden') + expect(surface.querySelector('button')).toBe(action) + expect(selection.toString()).toBe('Hello action') + composerTop = 330 + await layout() + expect(view.getByRole('button')).toBe(action) + composerTop = 260 + await layout() + expect(surface.style.visibility).toBe('hidden') + fireEvent.pointerDown(composer, { button: 0 }) + composerTop = 330 + await layout() + expect(surface.querySelector('button')).toBeNull() + }) + + it('invalidates changed, disabled and removed sources', async () => { + const view = render() + const sources = view.container.querySelectorAll('[data-text-interaction-source]') + select(sources[0]!) + sources[0]!.firstChild!.textContent = 'Changed text' + await layout() + expect(view.queryByRole('button')).toBeNull() + select(sources[1]!) + sources[1]!.removeAttribute('data-text-interaction-source') + await layout() + expect(view.queryByRole('button')).toBeNull() + select(sources[0]!) + sources[0]!.remove() + await layout() + expect(view.queryByRole('button')).toBeNull() + }) + + it('isolates areas and removes listeners on unmount', () => { + const view = render(<>) + const areas = view.container.querySelectorAll('[data-area]') + select(areas[0]!.querySelector('[data-text-interaction-source]')!) + expect(view.getByRole('button', { name: 'first' })).toBeTruthy() + expect(view.queryByRole('button', { name: 'second' })).toBeNull() + select(areas[1]!.querySelector('[data-text-interaction-source]')!) + expect(view.queryByRole('button', { name: 'first' })).toBeNull() + expect(view.getByRole('button', { name: 'second' })).toBeTruthy() + view.unmount() + fireEvent(document, new Event('selectionchange')) + expect(document.querySelector('[data-surface]')).toBeNull() + }) + + it('leaves contextmenu defaults to the registrant and never reuses an unrelated selection', () => { + const admit = vi.fn((request: TextInteractionRequest) => { + if (request.trigger === 'contextmenu') { request.preventDefault(); request.open() } + }) + const view = render() + const sources = view.container.querySelectorAll('[data-text-interaction-source]') + select(sources[0]!) + const same = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 110, clientY: 130 }) + fireEvent(sources[0]!, same) + expect(same.defaultPrevented).toBe(true) + expect(admit.mock.lastCall![0].readText()).toBe('Hello action') + const other = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 110, clientY: 130 }) + fireEvent(sources[1]!, other) + expect(admit.mock.lastCall![0].hasSelection).toBe(false) + expect(admit.mock.lastCall![0].readText()).toBeNull() + view.rerender() + expect(view.queryByRole('button')).toBeNull() + const native = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 110, clientY: 130 }) + fireEvent(sources[0]!, native) + expect(native.defaultPrevented).toBe(false) + expect(view.queryByRole('button')).toBeNull() + }) +}) + + +describe('text interaction lifecycle', () => { + it('exposes DOM text only while the captured source remains usable', () => { + let binding: TextInteractionBinding | undefined + const view = render( { binding = value }} />) + expect(binding!.readText()).toBeNull() + const source = view.container.querySelector('[data-text-interaction-source]')! + const selection = select(source) + expect(binding!.readText()).toBe('Hello action') + source.hidden = true + expect(binding!.readText()).toBeNull() + source.hidden = false + source.removeAttribute('data-text-interaction-source') + expect(binding!.readText()).toBeNull() + source.setAttribute('data-text-interaction-source', '') + act(() => { binding!.clearSelection(); binding!.dismiss() }) + expect(selection.isCollapsed).toBe(true) + expect(view.queryByRole('button')).toBeNull() + expect(binding!.readText()).toBeNull() + view.unmount() + expect(binding!.readText()).toBeNull() + binding!.clearSelection() + }) + + it('supports an unmounted area', () => { + const root = createRef() + const surface = createRef() + const hook = renderHook(() => useTextInteraction(root, surface, () => null, [])) + expect(hook.result.current.readText()).toBeNull() + act(() => { hook.result.current.dismiss(); hook.result.current.clearSelection() }) + }) + + it('dismisses a surface when its plugin unregisters', () => { + const view = render() + select(view.container.querySelector('[data-text-interaction-source]')!) + expect(view.getByRole('button')).toBeTruthy() + view.rerender() + expect(view.queryByRole('button')).toBeNull() + }) + + it('opens context menus without cancelling defaults unless the consumer requests it', () => { + let binding: TextInteractionBinding | undefined + const view = render( { binding = value }} admit={(request) => { request.open() }} />) + const source = view.container.querySelector('[data-text-interaction-source]')! + const event = new MouseEvent('contextmenu', { bubbles: true, cancelable: true }) + fireEvent(source, event) + expect(event.defaultPrevented).toBe(false) + expect(view.getByRole('button')).toBeTruthy() + expect(binding!.readText()).toBeNull() + // Menu focus may collapse browser selection without closing the captured interaction. + view.getByRole('button').focus() + fireEvent(document, new Event('selectionchange')) + expect(view.getByRole('button')).toBeTruthy() + fireEvent.contextMenu(view.getByRole('button')) + expect(view.getByRole('button')).toBeTruthy() + }) + + it('keeps a focused selection action open and ignores unrelated keys', () => { + const view = render() + const source = view.container.querySelector('[data-text-interaction-source]')! + select(source) + const button = view.getByRole('button') + button.focus() + fireEvent(document, new Event('selectionchange')) + fireEvent.keyDown(button, { key: 'ArrowDown' }) + fireEvent.keyDown(document, { key: 'Shift' }) + fireEvent.keyUp(document, { key: 'a' }) + expect(view.getByRole('button')).toBeTruthy() + button.blur() + fireEvent.keyDown(source, { key: 'ArrowLeft' }) + fireEvent.keyDown(source, { key: 'Shift', shiftKey: true }) + fireEvent.keyUp(source, { key: 'ArrowLeft', shiftKey: true }) + expect(view.queryByRole('button')).toBeNull() + fireEvent.keyUp(source, { key: 'Shift' }) + }) + + it('does not admit blank or hidden selections, controls, or unmarked right-click targets', () => { + const admit = vi.fn((request: TextInteractionRequest) => { request.open() }) + const view = render() + const source = view.container.querySelector('[data-text-interaction-source]')! + source.textContent = ' ' + select(source) + expect(admit).not.toHaveBeenCalled() + source.textContent = 'visible words' + source.style.display = 'none' + select(source) + expect(admit).not.toHaveBeenCalled() + fireEvent.contextMenu(source) + expect(admit).not.toHaveBeenCalled() + source.style.display = '' + source.innerHTML = '' + fireEvent.contextMenu(source.firstElementChild!) + fireEvent.contextMenu(source.firstElementChild!.firstChild!) + fireEvent.contextMenu(view.container.querySelector('[data-area]')!) + expect(admit).not.toHaveBeenCalled() + }) + + it('invalidates folded ancestors and handles scaled positioning containers', async () => { + const view = render() + const area = view.container.querySelector('[data-area]')! + const source = area.querySelector('[data-text-interaction-source]')! + Object.defineProperties(area, { offsetWidth: { value: 150 }, offsetHeight: { value: 250 } }) + select(source) + const surface = area.querySelector('[data-surface]')! + expect(surface.style.left).toBe('20px') + expect(surface.style.top).toBe('-9px') + area.style.visibility = 'hidden' + await layout() + expect(view.queryByRole('button')).toBeNull() + }) + + it('keeps a context-menu point attached to its source through scrolling and reflow', async () => { + const view = render( { if (request.trigger === 'contextmenu') request.open() }} />) + const source = view.container.querySelector('[data-text-interaction-source]')! + let sourceTop = 100 + source.getBoundingClientRect = () => rect(40, sourceTop, 300, 500) + fireEvent.contextMenu(source, { clientX: 110, clientY: 130 }) + const surface = view.container.querySelector('[data-surface]')! + expect(surface.style.top).toBe('39px') + sourceTop = 80 + await layout() + expect(surface.style.top).toBe('19px') + source.scrollTop = 5 + fireEvent.scroll(source) + await layout() + expect(surface.style.top).toBe('14px') + }) + + it('cancels scheduled placement when an active area unmounts', () => { + const view = render() + select(view.container.querySelector('[data-text-interaction-source]')!) + fireEvent.scroll(view.container.querySelector('[data-viewport]')!) + resize() + view.unmount() + expect(document.querySelector('[data-surface]')).toBeNull() + }) +}) diff --git a/packages/client/ui-chat/tests/text-selection.client.spec.tsx b/packages/client/ui-chat/tests/text-selection.client.spec.tsx new file mode 100644 index 0000000000..63afd15753 --- /dev/null +++ b/packages/client/ui-chat/tests/text-selection.client.spec.tsx @@ -0,0 +1,276 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it, vi } from 'vitest' +import { cleanup, render } from '@testing-library/react' +import { MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives' +import { readTextSelection, selectedText } from '../src/client/chat/text-selection.ts' + +function readSelection(root: HTMLElement, selection: Selection | null) { + const result = readTextSelection(root, selection) + return result === null ? null : { text: selectedText(result) } +} + +const markdownLabels = { + code: { copyLabel: 'Copy', copiedLabel: 'Copied' }, + footnotes: 'Footnotes', +} + +afterEach(() => { + cleanup() + vi.useRealTimers() + vi.unstubAllGlobals() +}) + +describe('quote selection', () => { + it('extracts one source block and omits Markdown control copy', () => { + const view = render( +
+
+ Hello + + world +
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 10, top: 20, width: 30, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toMatchObject({ + text: 'Hello world', + }) + }) + + it('rejects cross-block and pending text selections', () => { + const view = render( +
+
one
+ pending +
two
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sources = view.container.querySelectorAll('[data-text-interaction-source]') + const range = document.createRange() + range.setStart(sources[0]!.firstChild!, 0) + range.setEnd(sources[1]!.firstChild!, 3) + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toBeNull() + }) + + it('keeps one visible newline for the Markdown hard-break DOM pair', () => { + const view = render( +
+
+ first
{'\n'}second +
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + const candidate = readSelection(root, selection) + expect(candidate).toMatchObject({ + text: 'first\nsecond', + }) + }) + + it('projects Markdown soft line breaks as visible spaces', () => { + const view = render( +
+

{'hello\nworld'}

+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toMatchObject({ text: 'hello world' }) + + const text = sourceRoot.querySelector('p')!.firstChild! + range.setStart(text, 6) + range.setEnd(text, 11) + expect(readSelection(root, selection)).toMatchObject({ text: 'world' }) + }) + + it('omits code banners while preserving preformatted line breaks', () => { + const view = render( +
+
+
typescript
+ 
{'const x = 1\nreturn x'}
+
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toMatchObject({ text: 'const x = 1\nreturn x' }) + }) + + it('uses one synthetic newline when a hard break has no text-node newline', () => { + const view = render( +
+
+ first
second +
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + const candidate = readSelection(root, selection) + expect(candidate).toMatchObject({ + text: 'first\nsecond', + }) + }) + + it('preserves visible boundaries between adjacent Markdown blocks', () => { + const view = render( +
+
+

first

second

+
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const range = document.createRange() + range.selectNodeContents(sourceRoot) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + const candidate = readSelection(root, selection) + expect(candidate).toMatchObject({ + text: 'first\nsecond', + }) + }) + + it('omits Markdown renderer whitespace between adjacent blocks', () => { + const view = render( +
+
+ +
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const sourceRoot = view.container.querySelector('[data-text-interaction-source]')! + const paragraphs = sourceRoot.querySelectorAll('p') + expect(paragraphs[0]!.nextSibling?.textContent).toBe('\n') + const range = document.createRange() + range.setStart(paragraphs[0]!.firstChild!, 0) + range.setEnd(paragraphs[1]!.firstChild!, 'second'.length) + range.getBoundingClientRect = () => ( + { left: 50, top: 60, width: 20, height: 10 } as DOMRect + ) + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toMatchObject({ text: 'first\nsecond' }) + }) + + it('maps visible KaTeX text while omitting its duplicate MathML branch', () => { + const view = render( +
+
+ + hidden TeX source + + +
+
, + ) + const root = view.container.querySelector('[data-chat-flow]')! + const visible = view.container.querySelector('.katex-html')! + const range = document.createRange() + range.selectNodeContents(visible) + range.getBoundingClientRect = () => ({ left: 50, top: 60, width: 20, height: 10 }) as DOMRect + const selection = window.getSelection()! + selection.removeAllRanges() + selection.addRange(range) + expect(readSelection(root, selection)).toMatchObject({ text: 'x + 1' }) + }) + +}) + +describe('text source boundaries', () => { + function source(html: string) { + const root = document.createElement('div') + const source = document.createElement('div') + source.setAttribute('data-text-interaction-source', '') + source.innerHTML = html + root.append(source) + const range = document.createRange() + range.selectNodeContents(source) + return { root, source, range } + } + + it('preserves table cells, existing tabs, and inline code reference buttons', () => { + const fixture = source('
onetwo
three\tfour
five\tsix
') + expect(selectedText(fixture)).toBe('one\ttwo\nthree\tfour\nfive\tsix\nreference') + }) + + it('omits hidden content, comments, and empty text nodes', () => { + const fixture = source('spokenvisible') + fixture.source.append(document.createTextNode('')) + fixture.range.selectNodeContents(fixture.source) + expect(selectedText(fixture)).toBe('visible') + const hidden = fixture.source.querySelector('span')! + fixture.range.selectNodeContents(hidden) + expect(selectedText(fixture)).toBeNull() + fixture.range.setStart(hidden.firstChild!, 0) + fixture.range.setEnd(hidden.firstChild!, 4) + expect(selectedText(fixture)).toBeNull() + }) + + it('rejects whitespace-only and detached sources outside the area', () => { + const fixture = source(' ') + expect(selectedText(fixture)).toBeNull() + const selection = window.getSelection()! + selection.removeAllRanges() + expect(readTextSelection(fixture.root, null)).toBeNull() + expect(readTextSelection(fixture.root, selection)).toBeNull() + document.body.append(fixture.root) + try { + selection.addRange(fixture.range) + expect(readTextSelection(document.createElement('div'), selection)).toBeNull() + fixture.source.hidden = true + expect(readTextSelection(fixture.root, selection)).toBeNull() + } finally { fixture.root.remove(); selection.removeAllRanges() } + }) + + it('projects text in a document without a browsing context', () => { + const doc = document.implementation.createHTMLDocument() + const source = doc.createElement('div') + source.textContent = 'hello\nworld' + const range = doc.createRange() + range.selectNodeContents(source) + expect(selectedText({ source, range })).toBe('hello world') + }) +}) diff --git a/packages/client/ui-conversation/README.i18n.yaml b/packages/client/ui-conversation/README.i18n.yaml index 1606974f49..844653cbff 100644 --- a/packages/client/ui-conversation/README.i18n.yaml +++ b/packages/client/ui-conversation/README.i18n.yaml @@ -18,11 +18,11 @@ en: ef43c4f149195939 zh: 49fc6c83fd3a05ce /deepseek-ai-dsh-client-ui-conversation/sent-user-text: - en: 9912b286384c41d7 - zh: 3e994887c1948677 + en: 7871f9fe6bcc4459 + zh: 0d51565c600b3958 /deepseek-ai-dsh-client-ui-conversation/shell-and-standard-props: - en: a7a0b235e1c5f2b0 - zh: ca24e6bf77ad7e1b + en: 457e642073206f7d + zh: 95ea47c204850314 /deepseek-ai-dsh-client-ui-conversation/temporary-composer-entries: en: bb1244310f5c0382 zh: 824b84077432b559 diff --git a/packages/client/ui-conversation/README.md b/packages/client/ui-conversation/README.md index 84049c6848..fb3c5a44f8 100644 --- a/packages/client/ui-conversation/README.md +++ b/packages/client/ui-conversation/README.md @@ -59,6 +59,12 @@ Businesses extend `UserTextDataMap` and `UserTextFacts` on this package's `/clie Queue previews enable whitespace collapsing and document-edge trimming, retain emoji, and use CSS ellipsis without truncating the input. Editing and copying retain the original text; native attachments use their separate presentation. +[Message quotes](../../session/message-quotes/README.md) registers quote matching and rendering through the same UserText extension points. Each user-text container and draft editor owns an independent hover-card group, so its quote previews replace one another immediately. + +The existing semantic `DraftSnapshot` retains quote text and clipboard-coordinate spans beside references. Storage accepts earlier string and reference-only drafts; Session switching, Workspace transfer, and failed-send restoration preserve atomic quotes through the existing editor runtime. `inputActions.insertQuote(text)` inserts a nonblank selection only while the composer is in plain mode. Submission emits ordinary Markdown text; pending echoes, queue rows, steering rows, and durable messages use the same text matcher. + +`UiConversation.interactions` owns plugin registrations for selected-text and context-menu gestures. A registration supplies a synchronous handler whose ID selects its keyed Slot component; plugins use the Slot injection mechanism for rendering. Handlers call `open()` to display and call `preventDefault()` separately when replacing a browser default. Chat supplies DOM selections and local layout; original source data and Markdown offsets are not inferred from DOM positions. + ## Shell and standard props @@ -98,6 +104,8 @@ The width-handle indicator follows the pointer only during a captured drag; ordi The resident composer survives no-Session and Session transitions. Whitespace hides its placeholder; a whitespace-only draft without attachments cannot be sent. The no-Session state keeps the same composer surface mounted but inert while the Workspace picker connects a blank Session. The surface is a shell-owned Lexical editor: reference chips are atomic decorator nodes carrying the owner's serialization identity (submission expands them through the owner codec), the claimed slash command is an atomic leading chip that carries its claim, folder text references carry the folder glyph as an icon prefix, and the draft's text and semantic references are persisted by the per-Session Conversation store. QueueDock reads `next-turn` from the Session `inbox` projection, including cold recovered messages, and excludes only requestIds still owned by local transcript submissions. Other queued rows retain their normal display and actions. Queue operations address exact queue occurrences through the scoped `ctx.conversation` service; queue previews use the [UserText Factory](#sent-user-text) (wire session forms fold to their label) and show local or durable images and files in original attachment order. Images use thumbnails; files use compact name-and-size cards. An edit exposes the literal sent text in the ui-primitives `InlineEditor`, so line breaks survive re-editing. Durable thumbnails resolve through the session image URL cache. Busy Enter behavior is stored in the Host-backed `ui-conversation` settings namespace. The composer keymap arbitrates the trigger menu's keys through the slash pipeline — Tab settles the highlighted completion (or drills a drillable one), Escape and Shift+Tab leave the menu without settling — and leaves every other key to the editor. An overlay that takes the keyboard hands it back through `SessionInput.focus()`, which rides Lexical's own focus so the caret returns where the draft left it rather than at the start. +In narrow browser settings, the busy-state Enter preference uses a smaller label gutter. Windows and macOS desktop windows retain the standard spacing. + Plain Enter uses the configured delivery mode, exactly Ctrl+Enter or Cmd+Enter uses its complement, and Shift+Enter inserts a line break. Enter with Alt, AltGraph, both Ctrl and Cmd, or Shift plus Ctrl/Cmd leaves the draft and command menu unchanged and keeps the DOM event available to application shortcuts. The Conversation plugin registers the fixed send, newline, complementary-delivery, command-menu, and reference-menu rows and reserves their bindings until it unloads. Clicking unused space inside an editable composer preserves its current caret or selection when focused, or restores its previous caret or selection when unfocused. Text selection, scrollbars, controls, and embedded overlays keep their own pointer behavior. diff --git a/packages/client/ui-conversation/README.zh.md b/packages/client/ui-conversation/README.zh.md index 0884a9cd39..8cf77157c3 100644 --- a/packages/client/ui-conversation/README.zh.md +++ b/packages/client/ui-conversation/README.zh.md @@ -59,6 +59,12 @@ target package 通过 declaration merge 扩展 snapshot 与 Location data map， Queue 预览启用空白折叠和文档边缘 trim，保留 emoji，并使用 CSS 省略而不截断输入。编辑和复制保留原文；原生附件使用独立的展示路径。 +[Message quotes](../../session/message-quotes/README.zh.md) 通过相同的 UserText 扩展点注册引用匹配与渲染。 每个用户文本容器和草稿编辑器各自拥有独立的悬停卡片分组，其中的 quote 原文弹层会立即互相替换。 + +现有语义 `DraftSnapshot` 在 references 旁保留 quote 文本及 clipboard 坐标范围。存储接受较早的字符串和仅含 reference 的草稿；Session 切换、Workspace 转移以及发送失败恢复通过现有编辑器 runtime 保留原子 quote。`inputActions.insertQuote(text)` 仅在输入框处于 plain 模式时插入非空选区。提交产出普通 Markdown 文本；待发送回显、队列行、steering 行和持久消息使用同一文本匹配器。 + +`UiConversation.interactions` 拥有插件对文本选择和右键手势的注册。每个注册项提供同步处理函数，其 ID 选择对应的 keyed Slot 组件；插件通过 Slot injection 机制渲染。处理函数调用 `open()` 展示，需要替代浏览器默认行为时单独调用 `preventDefault()`。Chat 提供 DOM 选区和区域内布局；机制不从 DOM 位置推断原始来源数据或 Markdown 偏移。 + ## Shell 与标准 props @@ -98,6 +104,8 @@ Session 首次绑定或缓存的 Session 成为 current 时，shell 会在渲染 常驻 composer 在无 Session 与有 Session 之间保持挂载。输入空白字符会隐藏占位提示；没有附件的纯空白草稿无法发送。无 Session 时，同一个编辑器表面保持 inert，Workspace picker 连接 blank Session。该表面是 shell 所有的 Lexical 编辑器：引用 chip 是携带 owner 序列化身份的原子 decorator 节点（提交时经 owner codec 展开），已认领的 slash command 是携带认领的行首原子 chip，文件夹文本引用以图标前缀携带文件夹图形，草稿文字和引用语义字段由逐 Session Conversation store 持久化。QueueDock 从 Session 的 `inbox` 投影读取 `next-turn`，包含从冷状态恢复的消息，仅排除仍由本地 transcript 提交承接的 requestId。其他排队行保留正常展示和操作。Queue 操作通过 scoped `ctx.conversation` service 寻址准确的 queue occurrence；queue 预览使用 [UserText Factory](#sent-user-text)（wire 会话形式折叠为其标签），并按原始附件顺序展示本地或持久化的图片和文件。图片使用缩略图，文件使用紧凑的名称与大小卡片。编辑态在 ui-primitives 的 `InlineEditor` 中展示字面发送文本，因此重新编辑不会丢失换行。持久化缩略图通过会话图片 URL 缓存解析。繁忙时 Enter 行为保存在 Host-backed `ui-conversation` settings namespace。 composer 键盘映射经斜杠流水线裁决触发菜单的按键——Tab 确认高亮补全项（可下钻项则下钻），Escape 与 Shift+Tab 离开菜单且不选定——其余按键交给编辑器自身。 接管键盘的浮层通过 `SessionInput.focus()` 把键盘还回来，该路径走 Lexical 自己的 focus，因此光标回到草稿原来的位置而不是开头。 +窄屏浏览器设置中，繁忙时 Enter 偏好的标签与控件间距缩小；Windows 和 macOS 桌面窗口保留标准间距。 + 普通 Enter 使用已配置的投递模式，严格的 Ctrl+Enter 或 Cmd+Enter 使用互补模式，Shift+Enter 插入换行。带 Alt、AltGraph、同时带 Ctrl 与 Cmd，或 Shift 与 Ctrl/Cmd 的 Enter 保持草稿和指令菜单不变，并将 DOM 事件留给应用快捷键。Conversation 插件注册发送、换行、互补投递、命令菜单和引用菜单的固定条目，并在卸载前保留这些键位。 点击可编辑输入框内的留白时，已聚焦的输入框保留当前光标或选区，未聚焦的输入框恢复上次的光标或选区。文本选择、滚动条、控件和内嵌浮层保持各自的指针交互行为。 diff --git a/packages/client/ui-conversation/package.json b/packages/client/ui-conversation/package.json index 11a24a79f7..09c12d692d 100644 --- a/packages/client/ui-conversation/package.json +++ b/packages/client/ui-conversation/package.json @@ -96,7 +96,8 @@ "@deepseek-ai/dsh-agent": "workspace:*", "@deepseek-ai/dsh-settings": "workspace:*", "@deepseek-ai/dsh-client-shortcuts": "workspace:*", - "@deepseek-ai/dsh-client-product-analytics": "workspace:*" + "@deepseek-ai/dsh-client-product-analytics": "workspace:*", + "@deepseek-ai/dsh-message-quotes": "workspace:*" }, "files": [ "locale/*.json", diff --git a/packages/client/ui-conversation/src/client/contract/draft-editor.ts b/packages/client/ui-conversation/src/client/contract/draft-editor.ts index 7d523c97d8..b305bb3a3c 100644 --- a/packages/client/ui-conversation/src/client/contract/draft-editor.ts +++ b/packages/client/ui-conversation/src/client/contract/draft-editor.ts @@ -22,6 +22,14 @@ export interface ReferenceInsert { /** Persisted reference data without the current editor's occurrence identity. */ export type DraftReference = Omit +/** One atomic quote in clipboard-text coordinates. */ +export interface DraftQuote { + readonly offset: number + readonly length: number + /** Selected text before Markdown quote prefixes are added. */ + readonly text: string +} + /** * Persisted command chip opening a draft. The claim itself (its submit * closure) is not persisted; the input rebuilds it from the token through the @@ -41,6 +49,7 @@ export interface DraftSnapshot { readonly text: string readonly references: readonly DraftReference[] readonly command?: DraftCommand + readonly quotes?: readonly DraftQuote[] } /** Plain initial text or an existing document with explicit reference identities. */ diff --git a/packages/client/ui-conversation/src/client/contract/input.ts b/packages/client/ui-conversation/src/client/contract/input.ts index c01ed5f99f..a47e044b6c 100644 --- a/packages/client/ui-conversation/src/client/contract/input.ts +++ b/packages/client/ui-conversation/src/client/contract/input.ts @@ -182,6 +182,9 @@ export interface InputTarget { /** Per-session input facade owned by the conversation wiring layer. */ export interface SessionInput extends InputTarget { + /** Insert selected transcript text as an atomic quote. @param text - nonblank selection. @returns whether editing accepted it. */ + insertQuote(text: string): boolean + /** Replace the whole draft with plain text, removing inline reference chips. */ setDraft(text: string): void /** Append ordered browser-owned attachment ids; busy admission phases refuse. */ @@ -248,11 +251,13 @@ export type DraftInitializationResult = 'applied' | 'preserved' | 'blocked' /** * The public input action face provided to every session-scope slot - * component: stable-identity void callbacks, mirroring the + * component: stable-identity callbacks, mirroring the * useStore+actions convention. Command-style handles (arbitrate/space/ * paste/…) stay InputBar-private and never ride this face. */ export interface InputActions { + /** Insert one nonblank transcript quote. @param text - selected text. @returns whether editing accepted it. */ + insertQuote(text: string): boolean /** @returns a revision-guarded copy of the current editor selection. */ captureInsertion(): TokenSpan /** diff --git a/packages/client/ui-conversation/src/client/contract/records.ts b/packages/client/ui-conversation/src/client/contract/records.ts index 6d7359e71d..daddf0aac7 100644 --- a/packages/client/ui-conversation/src/client/contract/records.ts +++ b/packages/client/ui-conversation/src/client/contract/records.ts @@ -41,6 +41,8 @@ export type AssistantBlock = /** A finalized user message. */ export interface UserMessageNode { kind: 'user' + /** Durable identity, absent only in synthetic projections. */ + messageId?: MessageId seq: number /** Unix epoch ms from the source session event. */ time: number diff --git a/packages/client/ui-conversation/src/client/contract/text-interaction.ts b/packages/client/ui-conversation/src/client/contract/text-interaction.ts new file mode 100644 index 0000000000..7f1707d61b --- /dev/null +++ b/packages/client/ui-conversation/src/client/contract/text-interaction.ts @@ -0,0 +1,35 @@ +/** Conversation text gestures and plugin-owned action surfaces. */ +import type { SessionId } from '@deepseek-ai/dsh-session/types' + +/** Browser gesture offered to text interaction consumers. */ +export type TextInteractionTrigger = 'selection' | 'contextmenu' + +/** Synchronous browser gesture; reading text does not imply source-data offsets. */ +export interface TextInteractionGesture { + readonly trigger: TextInteractionTrigger + readonly hasSelection: boolean + readonly readText: () => string | null + /** Cancel the originating browser event during dispatch only. */ + readonly preventDefault: () => void +} + +/** Scoped gesture offered to one registered plugin. */ +export interface TextInteractionRequest extends TextInteractionGesture { + readonly sessionId: SessionId + /** Select this plugin's keyed surface for the current gesture. */ + readonly open: () => void +} + +/** One consumer whose ID also names its keyed Slot renderer. */ +export interface TextInteractionDefinition { + readonly id: string + readonly onInteraction: (request: TextInteractionRequest) => void +} + +/** Area-local actions provided to the currently selected plugin component. */ +export interface TextInteractionSurface { + readonly trigger: TextInteractionTrigger + readonly dismiss: () => void + readonly readText: () => string | null + readonly clearSelection: () => void +} diff --git a/packages/client/ui-conversation/src/client/conversation/assembly.ts b/packages/client/ui-conversation/src/client/conversation/assembly.ts index b6cfcd6318..9b3ed5f5b8 100644 --- a/packages/client/ui-conversation/src/client/conversation/assembly.ts +++ b/packages/client/ui-conversation/src/client/conversation/assembly.ts @@ -24,6 +24,7 @@ import { ConversationEventRegistry } from './event-registry.ts' import { HistoricalImageCache } from './historical-images.ts' import { ConversationViewRegistry } from './view-registry.ts' import { ConversationGroupRegistry } from './group-registry.ts' +import { ConversationInteractionRegistry } from './interaction-registry.ts' import { UserTextRegistry } from './user-text-registry.ts' /** Observable faces published for one Session's Conversation assembly. */ @@ -193,6 +194,8 @@ export class UiConversation extends Service { readonly groups: ConversationGroupRegistry /** Pure text rules and parser snapshots, independent of durable Session assembly. */ readonly userText: UserTextRegistry + /** Plugin-owned handlers for selection and context-menu gestures. */ + readonly interactions: ConversationInteractionRegistry private readonly bindings = new WeakMapWithValues() private readonly images: HistoricalImageCache @@ -206,6 +209,7 @@ export class UiConversation extends Service { this.views = new ConversationViewRegistry(ctx) this.groups = new ConversationGroupRegistry(ctx, this.views) this.userText = new UserTextRegistry(ctx) + this.interactions = new ConversationInteractionRegistry(ctx) this.images = new HistoricalImageCache(ctx, sessions) const rebuild = (): void => { for (const record of this.bindings.values) record.binding.rebuild() diff --git a/packages/client/ui-conversation/src/client/conversation/interaction-registry.ts b/packages/client/ui-conversation/src/client/conversation/interaction-registry.ts new file mode 100644 index 0000000000..bd909da841 --- /dev/null +++ b/packages/client/ui-conversation/src/client/conversation/interaction-registry.ts @@ -0,0 +1,55 @@ +/** Plugin-owned text gesture handlers, scoped by the dispatching conversation. */ +import type { SessionId } from '@deepseek-ai/dsh-session/types' +import type { TextInteractionDefinition, TextInteractionGesture } from '../contract/text-interaction.ts' +import { ConversationDefinitionRegistry } from './definition-registry.ts' + +/** Effect-owned registrations; active surfaces belong to individual Chat views. */ +export class ConversationInteractionRegistry extends ConversationDefinitionRegistry { + private ids: readonly string[] = [] + + /** + * Register a synchronous handler and its keyed renderer identity. + * @param definition - uniquely named plugin handler. + * @returns idempotent disposer tied to the registering plugin's lifetime. + */ + register(definition: TextInteractionDefinition): () => void { + if (definition.id === '') throw new Error('text interaction ID must not be empty') + return this.registerDefinition(definition.id, definition, + `Duplicate text interaction: ${definition.id}`, `uiConversation.interactions.register(${JSON.stringify(definition.id)})`) + } + + /** + * Offer a gesture until one handler opens its surface; opening never prevents browser defaults. + * @param sessionId - conversation where the gesture occurred. + * @param gesture - synchronous access to the browser event and DOM text. + * @returns selected renderer ID, or null when no plugin opens a surface. + */ + dispatch(sessionId: SessionId, gesture: TextInteractionGesture): string | null { + for (const definition of this.entries()) { + const state = { opened: false } + let dispatching = true + try { + definition.onInteraction({ + ...gesture, sessionId, + open: () => { if (dispatching) state.opened = true }, + preventDefault: () => { if (dispatching) gesture.preventDefault() }, + }) + } finally { dispatching = false } + if (state.opened) return definition.id + } + return null + } + + /** + * Observe registration changes so Chat views can dismiss stale surfaces. + * @returns stable IDs until the registry changes. + */ + getSnapshot(): readonly string[] { + return this.ids + } + + protected override refresh(): void { + this.ids = [...this.definitions.keys()] + super.refresh() + } +} diff --git a/packages/client/ui-conversation/src/client/draft.ts b/packages/client/ui-conversation/src/client/draft.ts index cc1c814f43..e4cee855b2 100644 --- a/packages/client/ui-conversation/src/client/draft.ts +++ b/packages/client/ui-conversation/src/client/draft.ts @@ -1,6 +1,7 @@ /** Semantic draft snapshots shared by storage, programmatic input, and editor restoration. */ import { z } from 'zod' -import type { DraftInput, DraftReference, DraftSnapshot, Occurrence } from './contract/draft-editor.ts' +import { formatQuoteText } from '@deepseek-ai/dsh-client-ui-primitives' +import type { DraftInput, DraftQuote, DraftReference, DraftSnapshot, Occurrence } from './contract/draft-editor.ts' const referenceSchema = z.object({ source: z.string(), @@ -17,10 +18,17 @@ const commandSchema = z.object({ token: z.string(), }) +const quoteSchema = z.object({ + offset: z.number().int().nonnegative(), + length: z.number().int().positive(), + text: z.string().refine(text => text.trim() !== ''), +}) + const snapshotSchema = z.object({ text: z.string(), references: z.array(referenceSchema), command: commandSchema.optional(), + quotes: z.array(quoteSchema).optional(), }).refine((draft) => { const spelling = draft.command?.token.trimEnd() if (spelling !== undefined && (!/^\/\S/u.test(spelling) || !draft.text.startsWith(spelling))) return false @@ -30,6 +38,16 @@ const snapshotSchema = z.object({ end = reference.offset + reference.length if (end > draft.text.length || draft.text.slice(reference.offset, end) !== reference.clipboardText) return false } + for (const quote of draft.quotes ?? []) { + if (quote.length !== formatQuoteText(quote.text).length + || draft.text.slice(quote.offset, quote.offset + quote.length) !== formatQuoteText(quote.text)) return false + } + end = spelling?.length ?? 0 + for (const span of [...draft.references, ...draft.quotes ?? []].sort((a, b) => a.offset - b.offset)) { + if (span.offset < end) return false + end = span.offset + span.length + if (end > draft.text.length) return false + } return true }, 'Draft references must identify ordered, non-overlapping text spans after the leading command token') @@ -44,6 +62,7 @@ export function resolveDraftInput(input: DraftInput): DraftSnapshot { text: input.text, references: input.references.map(copyReference), ...(input.command === undefined ? {} : { command: { token: input.command.token } }), + ...(input.quotes === undefined ? {} : { quotes: input.quotes.map(quote => ({ ...quote })) }), } } @@ -58,6 +77,7 @@ export function parseStoredDraft(value: unknown): DraftSnapshot | undefined { if (!parsed.success) return undefined return { text: parsed.data.text, + ...parsed.data.quotes === undefined ? {} : { quotes: parsed.data.quotes }, references: parsed.data.references.map(({ appearance, invalid, ...reference }) => ({ ...reference, ...(appearance === undefined ? {} : { appearance }), @@ -72,13 +92,17 @@ export function parseStoredDraft(value: unknown): DraftSnapshot | undefined { * @param text - current clipboard projection. * @param occurrences - matching reference projections from the same document revision. * @param commandToken - claim token of the command chip opening the document, if any. + * @param quotes - atomic quotes from the same document revision. * @returns an editor-independent snapshot. */ -export function snapshotDraft(text: string, occurrences: readonly Occurrence[], commandToken?: string): DraftSnapshot { +export function snapshotDraft( + text: string, occurrences: readonly Occurrence[], commandToken?: string, quotes: readonly DraftQuote[] = [], +): DraftSnapshot { return { text, references: occurrences.map(copyReference), ...(commandToken === undefined ? {} : { command: { token: commandToken } }), + ...(quotes.length === 0 ? {} : { quotes: quotes.map(quote => ({ ...quote })) }), } } diff --git a/packages/client/ui-conversation/src/client/index.ts b/packages/client/ui-conversation/src/client/index.ts index 08a7432e1e..d4f06accc5 100644 --- a/packages/client/ui-conversation/src/client/index.ts +++ b/packages/client/ui-conversation/src/client/index.ts @@ -102,7 +102,7 @@ export type { InputState, InsertReferenceRequest, InsertTextRequest, PickOutcome, SessionInput, SessionInputResolver, SubmitAttachment, SubmitOutcome, } from './contract/input.ts' -export type { ArbitrateKey, ArbitrateOutcome, DraftInput, DraftReference, DraftSnapshot, ReferenceInsert, TokenSpan } from './contract/draft-editor.ts' +export type { ArbitrateKey, ArbitrateOutcome, DraftInput, DraftQuote, DraftReference, DraftSnapshot, ReferenceInsert, TokenSpan } from './contract/draft-editor.ts' export type { ComposerBlock, ComposerBlocks } from './contract/composer-blocks.ts' declare module '@deepseek-ai/cordis' { @@ -113,3 +113,6 @@ declare module '@deepseek-ai/cordis' { uiConversation: import('./conversation/assembly.ts').UiConversation } } + +export type { TextInteractionDefinition, TextInteractionGesture, TextInteractionRequest, TextInteractionSurface, TextInteractionTrigger } from './contract/text-interaction.ts' +export type { ConversationInteractionRegistry } from './conversation/interaction-registry.ts' diff --git a/packages/client/ui-conversation/src/client/input/editor/DraftEditor.tsx b/packages/client/ui-conversation/src/client/input/editor/DraftEditor.tsx index d03ff6232c..a51ef34160 100644 --- a/packages/client/ui-conversation/src/client/input/editor/DraftEditor.tsx +++ b/packages/client/ui-conversation/src/client/input/editor/DraftEditor.tsx @@ -2,6 +2,7 @@ import type { CSSProperties, KeyboardEventHandler, ReactNode, RefObject } from 'react' import type { LexicalEditor } from 'lexical' import clsx from 'clsx' +import { HoverCardGroup } from '@deepseek-ai/dsh-client-ui-primitives' import type { InputState } from '../../contract/input.ts' import { ComposerContentEditable } from './ComposerContentEditable.tsx' import { DecoratorPortals } from './DecoratorPortals.tsx' @@ -34,7 +35,7 @@ export function DraftEditor({ }: DraftEditorProps): ReactNode { return (
-
+ )} -
+
) } diff --git a/packages/client/ui-conversation/src/client/input/editor/QuoteNode.tsx b/packages/client/ui-conversation/src/client/input/editor/QuoteNode.tsx new file mode 100644 index 0000000000..ecd42af89d --- /dev/null +++ b/packages/client/ui-conversation/src/client/input/editor/QuoteNode.tsx @@ -0,0 +1,152 @@ +/** Atomic composer quote node and whole-node removal command. */ + +import type { JSX } from 'react' +import { QuotePreview } from '@deepseek-ai/dsh-client-ui-primitives' +import { formatQuoteText } from '@deepseek-ai/dsh-client-ui-primitives' +import type { + EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, +} from 'lexical' +import { createCommand, DecoratorNode } from 'lexical' + +/** Localized non-persisted labels applied by the owning input shell. */ +export interface QuoteNodeLabels { + readonly remove: string +} + +const EMPTY_LABELS: QuoteNodeLabels = { remove: '' } + +/** JSON form used only by Lexical's editor-state APIs, not browser persistence. */ +export type SerializedQuoteNode = Spread<{ + text: string +}, SerializedLexicalNode> + +/** Remove one quote occurrence by its Lexical identity. */ +export const REMOVE_QUOTE_COMMAND = createCommand('REMOVE_QUOTE_COMMAND') + +/** Pure React face of one quote node. */ +export function QuoteNodeView({ editor, nodeKey, text, labels }: { + readonly editor: LexicalEditor + readonly nodeKey: NodeKey + readonly text: string + readonly labels: QuoteNodeLabels +}) { + return ( + { editor.dispatchCommand(REMOVE_QUOTE_COMMAND, nodeKey) }, + }} + /> + ) +} + +/** One selected transcript range represented as an atomic inline decorator. */ +export class QuoteNode extends DecoratorNode { + __text: string + __labels: QuoteNodeLabels + + /** Lexical node registry type tag. */ + static override getType(): string { + return 'quote' + } + + /** @param node - node to clone. @returns a copy carrying the same NodeKey. */ + static override clone(node: QuoteNode): QuoteNode { + return new QuoteNode( + node.__text, + node.__labels, + node.__key, + ) + } + + /** @param json - serialized editor node. @returns a fresh node with default runtime labels. */ + static override importJSON(json: SerializedQuoteNode): QuoteNode { + return new QuoteNode(json.text) + } + + /** + * @param text - selected text. + * @param labels - runtime-only localized labels. + * @param key - Lexical clone-path key; absent for fresh nodes. + */ + constructor( + text: string, + labels: QuoteNodeLabels = EMPTY_LABELS, + key?: NodeKey, + ) { + super(key) + this.__text = text + this.__labels = labels + } + + /** Serialize the quote data without its runtime presentation state. */ + override exportJSON(): SerializedQuoteNode { + return { + ...super.exportJSON(), + type: 'quote', + version: 1, + text: this.__text, + } + } + + /** Mount one non-editable inline host. */ + override createDOM(_config: EditorConfig): HTMLElement { + const element = document.createElement('span') + element.setAttribute('data-composer-quote', '') + element.setAttribute('contenteditable', 'false') + return element + } + + /** Updates reuse the existing host element. */ + override updateDOM(): boolean { + return false + } + + /** Quotes flow with draft text and wrap at their own text boundary. */ + override isInline(): boolean { + return true + } + + /** Arrow movement crosses the quote without entering a NodeSelection. */ + override isKeyboardSelectable(): boolean { + return false + } + + /** Clipboard text is the exact model-visible Markdown blockquote. */ + override getTextContent(): string { + return formatQuoteText(this.__text) + } + + /** Selected visible quote text. */ + getQuoteText(): string { + return this.getLatest().__text + } + + /** Update the localized remove label without changing persisted quote data. */ + setLabels(labels: QuoteNodeLabels): void { + if (this.getLatest().__labels.remove !== labels.remove) this.getWritable().__labels = labels + } + + /** Render the quote body and its independent close control. */ + override decorate(editor: LexicalEditor): JSX.Element { + return ( + + ) + } +} + +/** @param text - selected quote text. @param labels - runtime labels. @returns a fresh node. */ +export function $createQuoteNode(text: string, labels: QuoteNodeLabels): QuoteNode { + return new QuoteNode(text, labels) +} + +/** @param node - possible Lexical node. @returns whether it is a QuoteNode. */ +export function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode { + return node instanceof QuoteNode +} diff --git a/packages/client/ui-conversation/src/client/input/editor/keymap.ts b/packages/client/ui-conversation/src/client/input/editor/keymap.ts index b4fe576e19..a2573fdefc 100644 --- a/packages/client/ui-conversation/src/client/input/editor/keymap.ts +++ b/packages/client/ui-conversation/src/client/input/editor/keymap.ts @@ -16,11 +16,14 @@ */ import type { LexicalEditor } from 'lexical' import { + $getAdjacentNode, $getSelection, $isElementNode, $isLineBreakNode, $isRangeSelection, $isTextNode, + KEY_DOWN_COMMAND, MOVE_TO_END, COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_SPACE_COMMAND, KEY_TAB_COMMAND, PASTE_COMMAND, } from 'lexical' import { mergeRegister } from '@lexical/utils' import type { ArbitrateKey, ArbitrateOutcome } from '../../contract/draft-editor.ts' +import { $isQuoteNode } from './QuoteNode.tsx' /** The bar-supplied behavior behind each intercepted gesture. */ export interface ComposerKeymapHandlers { @@ -51,6 +54,118 @@ function isComposingEvent(event: KeyboardEvent, recentlyComposing: () => boolean return event.isComposing || event.keyCode === 229 || recentlyComposing() } +function isApplePlatform(): boolean { + return typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform) +} + +/** Whether the browser caret touches one side of an atomic quote element. */ +function domCaretTouches(element: HTMLElement, backward: boolean): boolean { + const selection = element.ownerDocument.defaultView?.getSelection() + if (selection === null || selection === undefined || !selection.isCollapsed) return false + const focus = selection.focusNode + if (focus === null) return false + const parent = element.parentNode + if (parent === null) return false + const offset = selection.focusOffset + if (focus === parent) { + return focus.childNodes.item(backward ? offset - 1 : offset) === element + } + if (focus.nodeType === Node.TEXT_NODE) { + const size = focus.textContent?.length ?? 0 + if (backward ? offset !== 0 : offset !== size) return false + } else if (backward ? offset !== 0 : offset !== focus.childNodes.length) { + return false + } + let boundary = focus + while (boundary.parentNode !== null && boundary.parentNode !== parent) { + if ((backward ? boundary.previousSibling : boundary.nextSibling) !== null) return false + boundary = boundary.parentNode + } + return boundary.parentNode === parent + && (backward ? boundary.previousSibling : boundary.nextSibling) === element +} + +/** Find an atomic quote immediately beside both editor and browser carets. */ +function adjacentQuote(editor: LexicalEditor, backward: boolean) { + const selection = $getSelection() + if (!$isRangeSelection(selection) || !selection.isCollapsed()) return null + const adjacent = $getAdjacentNode(selection.focus, backward) + if (!$isQuoteNode(adjacent)) return null + const element = editor.getElementByKey(adjacent.getKey()) + return element !== null && domCaretTouches(element, backward) ? adjacent : null +} + +function lineLeadingQuoteBeforeSelection(editor: LexicalEditor) { + let quote = adjacentQuote(editor, true) + if (quote === null) return null + let previous = quote.getPreviousSibling() + while (previous !== null) { + if ($isLineBreakNode(previous)) return quote + if ($isQuoteNode(previous)) { + quote = previous + previous = previous.getPreviousSibling() + continue + } + if (!$isTextNode(previous)) return null + const text = previous.getTextContent() + const lastBreak = text.lastIndexOf('\n') + if (lastBreak >= 0) return text.slice(lastBreak + 1) === '' ? quote : null + if (text.trim() !== '') return null + const precedingQuote = previous.getPreviousSibling() + if (!$isQuoteNode(precedingQuote)) return null + quote = precedingQuote + previous = quote.getPreviousSibling() + } + return quote +} + +/** Put the browser caret before an adjacent line-leading quote. */ +function moveBeforeQuote(editor: LexicalEditor, event: KeyboardEvent): boolean { + if (event.shiftKey) return false + const quote = lineLeadingQuoteBeforeSelection(editor) + if (quote === null) return false + const element = editor.getElementByKey(quote.getKey()) + if (element === null) return false + const view = element.ownerDocument.defaultView + if (view === null) return false + const domSelection = view.getSelection() + if (domSelection === null) return false + const range = element.ownerDocument.createRange() + range.setStartBefore(element) + range.collapse(true) + domSelection.removeAllRanges() + domSelection.addRange(range) + event.preventDefault() + return true +} + +/** Move from immediately before a quote to the end of its hard line. */ +function movePastQuote(editor: LexicalEditor, event: KeyboardEvent): boolean { + if (!isApplePlatform() || event.key !== 'ArrowRight' || !event.metaKey + || event.ctrlKey || event.altKey || event.shiftKey) return false + const quote = adjacentQuote(editor, false) + if (quote === null) return false + const block = quote.getParent() + if (!$isElementNode(block)) return false + let lineEnd = quote.getIndexWithinParent() + 1 + while (lineEnd < block.getChildrenSize()) { + const child = block.getChildAtIndex(lineEnd) + if ($isLineBreakNode(child)) break + if ($isTextNode(child)) { + const hardBreak = child.getTextContent().indexOf('\n') + if (hardBreak >= 0) { + event.preventDefault() + child.select(hardBreak, hardBreak) + return true + } + } + lineEnd += 1 + } + event.preventDefault() + block.select(lineEnd, lineEnd) + return true +} + /** * Register the composer keymap on one editor. * @param editor - the shell-owned editor. @@ -101,6 +216,13 @@ export function registerComposerKeymap(editor: LexicalEditor, handlers: Composer root?.addEventListener('compositionend', onCompositionEnd) syncComposition() }), + editor.registerCommand(KEY_DOWN_COMMAND, (event) => { + if (!isApplePlatform() || !event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return false + const key = event.key.toLowerCase() + if (key === 'a') return moveBeforeQuote(editor, event) + return false + }, COMMAND_PRIORITY_CRITICAL), + editor.registerCommand(MOVE_TO_END, event => movePastQuote(editor, event), COMMAND_PRIORITY_CRITICAL), editor.registerUpdateListener(syncComposition), editor.registerCommand(KEY_ARROW_UP_COMMAND, arrow('up'), COMMAND_PRIORITY_CRITICAL), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, arrow('down'), COMMAND_PRIORITY_CRITICAL), diff --git a/packages/client/ui-conversation/src/client/input/editor/projection.ts b/packages/client/ui-conversation/src/client/input/editor/projection.ts index c48c97ad8a..dacc465d3b 100644 --- a/packages/client/ui-conversation/src/client/input/editor/projection.ts +++ b/packages/client/ui-conversation/src/client/input/editor/projection.ts @@ -11,8 +11,9 @@ import type { ElementNode, LexicalNode, NodeKey, Point } from 'lexical' import { $getRoot, $getSelection, $isElementNode, $isLineBreakNode, $isRangeSelection, $isTextNode, } from 'lexical' -import type { Occurrence } from '../../contract/draft-editor.ts' +import type { DraftQuote, Occurrence } from '../../contract/draft-editor.ts' import type { CommandClaim } from '../../contract/input.ts' +import { $isQuoteNode } from './QuoteNode.tsx' import { $isReferenceChipNode } from './chip-node.tsx' import { $isCommandChipNode } from './command-chip-node.tsx' @@ -81,7 +82,7 @@ export function $composerLayout(): ComposerLayout { const kids = element.getChildren() children.set(element.getKey(), kids.map(kid => kid.getKey())) for (const kid of kids) { - if ($isReferenceChipNode(kid) || $isCommandChipNode(kid)) { + if ($isReferenceChipNode(kid) || $isCommandChipNode(kid) || $isQuoteNode(kid)) { pushLeaf('chip', kid, ATOMIC_CHAR, kid.getTextContent()) } else if ($isTextNode(kid)) { const text = kid.getTextContent() @@ -160,6 +161,8 @@ export interface EditorProjection { readonly clipboardText: string /** InputState-compatible occurrence view (clipboardText coordinates). */ readonly occurrences: readonly Occurrence[] + /** Atomic quotes in clipboard coordinates. */ + readonly quotes: readonly DraftQuote[] /** Range selection in detect coordinates (ordered); null while absent or non-range. */ readonly selection: { readonly start: number; readonly end: number } | null /** Collapsed caret in detect coordinates; null while the selection is absent or ranged. */ @@ -200,8 +203,14 @@ export function $detectOffsetOfPoint(layout: ComposerLayout, point: Point): numb export function $projectComposer(idOf: (key: NodeKey) => number): EditorProjection { const layout = $composerLayout() const occurrences: Occurrence[] = [] + const quotes: DraftQuote[] = [] for (const segment of layout.segments) { - if (segment.kind !== 'chip' || !$isReferenceChipNode(segment.node)) continue + if (segment.kind !== 'chip') continue + if ($isQuoteNode(segment.node)) { + quotes.push({ offset: segment.clipboardStart, length: segment.clipboardLength, text: segment.node.getQuoteText() }) + continue + } + if (!$isReferenceChipNode(segment.node)) continue const chip = segment.node occurrences.push({ occurrenceId: idOf(chip.getKey()), @@ -229,6 +238,7 @@ export function $projectComposer(idOf: (key: NodeKey) => number): EditorProjecti detectText: layout.detectText, clipboardText: layout.clipboardText, occurrences, + quotes, selection: range, caret: range !== null && range.start === range.end ? range.start : null, command: $isCommandChipNode(lead) ? lead.getClaim() : undefined, diff --git a/packages/client/ui-conversation/src/client/input/editor/runtime.ts b/packages/client/ui-conversation/src/client/input/editor/runtime.ts index 31116db781..698ef7bda6 100644 --- a/packages/client/ui-conversation/src/client/input/editor/runtime.ts +++ b/packages/client/ui-conversation/src/client/input/editor/runtime.ts @@ -2,15 +2,19 @@ import type { ObservableSnapshot } from '@deepseek-ai/dsh-client-store' import type { LexicalEditor, NodeKey } from 'lexical' import { - $addUpdateTag, $createParagraphNode, $createTextNode, $getRoot, $getSelection, $isRangeSelection, - BLUR_COMMAND, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_CRITICAL, createEditor, HISTORY_MERGE_TAG, PASTE_TAG, - RootNode, SELECTION_CHANGE_COMMAND, SKIP_DOM_SELECTION_TAG, + $addUpdateTag, $createParagraphNode, $createTextNode, $getAdjacentNode, $isTextNode, + $getRoot, $getSelection, $getNodeByKey, $isRangeSelection, + BLUR_COMMAND, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_BEFORE_CRITICAL, COMMAND_PRIORITY_CRITICAL, createEditor, + HISTORY_MERGE_TAG, PASTE_TAG, + RootNode, SELECTION_CHANGE_COMMAND, SKIP_DOM_SELECTION_TAG, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, HISTORY_PUSH_TAG, } from 'lexical' import { registerPlainText } from '@lexical/plain-text' import { createEmptyHistoryState, registerHistory } from '@lexical/history' import { mergeRegister } from '@lexical/utils' -import type { DraftReference, ReferenceInsert } from '../../contract/draft-editor.ts' +import type { DraftQuote, DraftReference, ReferenceInsert } from '../../contract/draft-editor.ts' import type { CommandClaim } from '../../contract/input.ts' +import { QuoteNode, $createQuoteNode, $isQuoteNode, REMOVE_QUOTE_COMMAND } from './QuoteNode.tsx' +import type { QuoteNodeLabels } from './QuoteNode.tsx' import { registerReferenceActivation } from './reference-activation.ts' import { ReferenceChipNode, $createReferenceChipNode } from './chip-node.tsx' import { CommandChipNode, $createCommandChipNode, registerCommandChipSeat } from './command-chip-node.tsx' @@ -26,6 +30,7 @@ type Lexicon = ReadonlyMap<'/' | '@', readonly string[]> /** Model callbacks read at the same editor registration and update points. */ interface DraftEditorRuntimeDeps { readonly onUpdate: () => void + readonly quoteLabels: () => QuoteNodeLabels readonly openReference: (source: string | undefined, reference: Pick) => boolean readonly lexicon: () => Lexicon readonly resolveLexicon: () => ObservableSnapshot | undefined @@ -62,7 +67,7 @@ export class DraftEditorRuntime { /** The editor bound by the Composer's contenteditable host. */ readonly editor: LexicalEditor private projected: EditorProjection = { - detectText: '', clipboardText: '', occurrences: [], selection: null, caret: null, command: undefined, + detectText: '', clipboardText: '', occurrences: [], quotes: [], selection: null, caret: null, command: undefined, } /** Stable occurrence ids per chip NodeKey (undo restores keys, so ids survive it too). */ private readonly occurrenceIds = new Map() @@ -75,7 +80,7 @@ export class DraftEditorRuntime { constructor(private readonly deps: DraftEditorRuntimeDeps) { this.editor = createEditor({ namespace: 'dsh-composer', - nodes: [ReferenceChipNode, CommandChipNode, TextRefNode], + nodes: [ReferenceChipNode, CommandChipNode, TextRefNode, QuoteNode], onError: (error) => { throw error }, }) } @@ -95,6 +100,10 @@ export class DraftEditorRuntime { } const unregister = mergeRegister( registerPlainText(this.editor), + this.editor.registerNodeTransform(QuoteNode, (node) => { node.setLabels(this.deps.quoteLabels()) }), + this.editor.registerCommand(REMOVE_QUOTE_COMMAND, key => this.removeQuote(key), COMMAND_PRIORITY_CRITICAL), + this.editor.registerCommand(KEY_BACKSPACE_COMMAND, event => this.deleteAdjacentQuote(event, true), COMMAND_PRIORITY_BEFORE_CRITICAL), + this.editor.registerCommand(KEY_DELETE_COMMAND, event => this.deleteAdjacentQuote(event, false), COMMAND_PRIORITY_BEFORE_CRITICAL), this.editor.registerCommand(BLUR_COMMAND, () => { // Finish this batch before an explicit focus can restore its updated selection. this.editor.update(preserveExternalSelection, { discrete: true }) @@ -186,7 +195,7 @@ export class DraftEditorRuntime { */ setDraft(text: string): void { const clean = text.replace(REFERENCE_PLACEHOLDER_RE, '') - if (clean === this.projection.clipboardText && this.projection.occurrences.length === 0) return + if (clean === this.projection.clipboardText && this.projection.occurrences.length === 0 && this.projection.quotes.length === 0) return this.editor.update(() => { $getRoot().clear() $appendParagraphs(clean) @@ -332,6 +341,60 @@ export class DraftEditorRuntime { return applied } + /** + * Insert one quote after the retained draft selection as an independent undo edit. + * @param text - nonblank selected transcript text. + * @param labels - current localized editor controls. + * @returns whether the insertion position accepted the node. + */ + insertQuote(text: string, labels: QuoteNodeLabels): boolean { + let applied = false + this.applyEdit(() => { + const projection = $projectComposer(key => this.occurrenceIdOf(key)) + const at = projection.selection?.end ?? projection.detectText.length + applied = $replaceDetectSpanWithNodes({ start: at, end: at }, [$createQuoteNode(text, labels), $createTextNode(' ')]) + }, PASTE_TAG) + return applied + } + + /** Remove one quote node and leave the editor caret at its former position. */ + private removeQuote(key: NodeKey): boolean { + const node = $getNodeByKey(key) + if (!$isQuoteNode(node)) return false + const parent = node.getParent() + const offset = node.getIndexWithinParent() + const separator = node.getNextSibling() + $addUpdateTag(HISTORY_PUSH_TAG) + if ($isTextNode(separator) && separator.getTextContent().startsWith(' ')) { + const remaining = separator.getTextContent().slice(1) + if (remaining === '') separator.remove() + else separator.setTextContent(remaining) + } + node.remove() + const caret = Math.min(offset, parent?.getChildrenSize() ?? 0) + parent?.select(caret, caret) + queueMicrotask(() => { this.editor.getRootElement()?.focus({ preventScroll: true }) }) + return true + } + + /** Delete the QuoteNode immediately beside one collapsed caret. */ + private deleteAdjacentQuote(event: KeyboardEvent, backward: boolean): boolean { + const selection = $getSelection() + if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false + let adjacent = $getAdjacentNode(selection.anchor, backward) + if (!$isQuoteNode(adjacent) && backward && selection.anchor.type === 'text') { + const anchor = selection.anchor.getNode() + if ($isTextNode(anchor) + && selection.anchor.offset === 1 + && anchor.getTextContent().startsWith(' ')) { + adjacent = anchor.getPreviousSibling() + } + } + if (!$isQuoteNode(adjacent)) return false + event.preventDefault() + return this.removeQuote(adjacent.getKey()) + } + /** * Clear committed content using the model's suffix decision inside the editor update. * @param prefixLength - returns the clipboard-prefix length to remove, or null to clear the root. @@ -356,8 +419,10 @@ export class DraftEditorRuntime { * Import semantic content or a model-selected failure snapshot with fresh reference nodes. * @param draft - clipboard text. * @param occurrences - reference occurrences in clipboard order. + * @param quotes - atomic quotes in clipboard order. + * @param labels - localized quote controls. */ - restoreDraft(draft: string, occurrences: readonly DraftReference[]): void { + restoreDraft(draft: string, occurrences: readonly DraftReference[], quotes: readonly DraftQuote[] = [], labels: QuoteNodeLabels = { remove: '' }): void { this.editor.update(() => { const root = $getRoot() root.clear() @@ -375,15 +440,26 @@ export class DraftEditorRuntime { } } let cursor = 0 - for (const occurrence of occurrences) { + const spans = [ + ...occurrences.map(reference => ({ kind: 'reference' as const, value: reference })), + ...quotes.map(quote => ({ kind: 'quote' as const, value: quote })), + ].sort((a, b) => a.value.offset - b.value.offset) + for (const span of spans) { + const occurrence = span.value appendText(draft.slice(cursor, occurrence.offset)) + if (span.kind === 'quote') { + paragraph.append($createQuoteNode(span.value.text, labels)) + cursor = occurrence.offset + occurrence.length + continue + } + const reference = span.value paragraph.append(new ReferenceChipNode({ - source: occurrence.source, - ref: occurrence.ref, - label: occurrence.label, - ...(occurrence.appearance === undefined ? {} : { appearance: occurrence.appearance }), - clipboardText: occurrence.clipboardText, - }, occurrence.invalid === true)) + source: reference.source, + ref: reference.ref, + label: reference.label, + ...(reference.appearance === undefined ? {} : { appearance: reference.appearance }), + clipboardText: reference.clipboardText, + }, reference.invalid === true)) cursor = occurrence.offset + occurrence.length } appendText(draft.slice(cursor)) diff --git a/packages/client/ui-conversation/src/client/input/facade.ts b/packages/client/ui-conversation/src/client/input/facade.ts index 1965b30d12..b62228f0ca 100644 --- a/packages/client/ui-conversation/src/client/input/facade.ts +++ b/packages/client/ui-conversation/src/client/input/facade.ts @@ -20,9 +20,10 @@ import type { SessionInput, SubmitAttempt, SubmitAttachment, SubmitOutcome, } from '../contract/input.ts' import type { - ArbitrateKey, ArbitrateOutcome, ComposerKeyboard, DraftInput, DraftSnapshot, Occurrence, ReferenceInsert, TokenSpan, + ArbitrateKey, ArbitrateOutcome, ComposerKeyboard, DraftQuote, DraftInput, DraftSnapshot, Occurrence, ReferenceInsert, TokenSpan, } from '../contract/draft-editor.ts' import type { InputSubmitMode, MessageSubmission, MessageSubmissionState } from '../contract/composer-submission.ts' +import { serializeDraftPrompt } from './prompt.ts' import { SubmitMachine } from './machine.ts' import { resolveDraftInput, snapshotDraft } from '../draft.ts' import { DraftEditorRuntime } from './editor/runtime.ts' @@ -63,6 +64,10 @@ export interface SessionInputDeps { mode: InputSubmitMode, signal: AbortSignal, ): Promise + /** Live Session and composer-block policy for transcript insertion. */ + quoteInsertionAllowed?: () => boolean + /** Current localized quote removal copy. */ + quoteRemoveLabel?: () => string /** Command-plane attachment plumbing (the hub owns the conversation face and the copy). */ commandAttachments: { /** Resolve ordered draft ids to wire payloads without sending them; rejects when an id no longer resolves. */ @@ -87,6 +92,10 @@ function guardOf(phase: InputState['phase']): 'plain' | 'claimed' | 'frozen' { function projectionContentChanged(prev: EditorProjection, next: EditorProjection): boolean { if (prev.clipboardText !== next.clipboardText || prev.detectText !== next.detectText) return true if (prev.command !== next.command) return true + if (prev.quotes.length !== next.quotes.length || prev.quotes.some((quote, i) => { + const old = next.quotes[i] + return old?.text !== quote.text || old.offset !== quote.offset + })) return true if (prev.occurrences.length !== next.occurrences.length) return true return next.occurrences.some((occ, i) => { const old = prev.occurrences[i] @@ -103,6 +112,7 @@ const EMPTY_LEXICON: ReadonlyMap<'/' | '@', readonly string[]> = new Map() interface DetachedDraft { readonly draft: string readonly occurrences: readonly Occurrence[] + readonly quotes: readonly DraftQuote[] readonly attachmentIds: readonly DraftAttachmentId[] } @@ -122,6 +132,7 @@ export class SessionInputShell implements SessionInput { } /** The public provide-channel action face (one stable identity per session). */ readonly actions: InputActions = { + insertQuote: text => this.insertQuote(text), captureInsertion: () => ({ ...this.caretSpan(), draftRev: this.rev }), insertText: (text, span) => { if (this.snapshot.phase === 'adjudicating' || this.snapshot.phase === 'submitting' || this.disposed) return false @@ -175,6 +186,7 @@ export class SessionInputShell implements SessionInput { constructor(private readonly deps: SessionInputDeps) { this.draftEditor = new DraftEditorRuntime({ onUpdate: () => { this.onEditorUpdate() }, + quoteLabels: () => ({ remove: this.deps.quoteRemoveLabel?.() ?? '' }), openReference: (source, reference) => this.deps.inputTriggers?.()?.openReference(source, reference) ?? false, lexicon: () => this.lexicon.getSnapshot(), @@ -221,13 +233,21 @@ export class SessionInputShell implements SessionInput { setDraft(text: DraftInput): void { const draft = resolveDraftInput(text) this.cancelCommandRestore() - if (draft.references.length === 0) this.draftEditor.setDraft(draft.text) - else this.draftEditor.restoreDraft(draft.text, draft.references) + if (draft.references.length === 0 && (draft.quotes?.length ?? 0) === 0) this.draftEditor.setDraft(draft.text) + else this.draftEditor.restoreDraft(draft.text, draft.references, draft.quotes, { remove: this.deps.quoteRemoveLabel?.() ?? '' }) if (draft.command === undefined) return this.pendingCommand = { token: draft.command.token, rev: this.rev } this.restoreCommand() } + /** @param text - selected transcript text. @returns whether the editable draft accepted the quote. */ + insertQuote(text: string): boolean { + if (this.disposed || this.snapshot.phase !== 'plain' || this.deps.quoteInsertionAllowed?.() === false || text.trim() === '') return false + const inserted = this.draftEditor.insertQuote(text.replace(/\r\n?/gu, '\n'), { remove: this.deps.quoteRemoveLabel?.() ?? '' }) + if (inserted) this.focus() + return inserted + } + /** * Reconnect optional catalog notifications and resume a pending command * chip restore without waiting for another edit. @@ -272,7 +292,9 @@ export class SessionInputShell implements SessionInput { /** Current semantic document, stable until its content revision changes. */ get draftSnapshot(): DraftSnapshot { if (this.draftSnapshotCache?.revision === this.rev) return this.draftSnapshotCache.value - const value = snapshotDraft(this.projection.clipboardText, this.projection.occurrences, this.projection.command?.token) + const value = snapshotDraft( + this.projection.clipboardText, this.projection.occurrences, this.projection.command?.token, this.projection.quotes, + ) this.draftSnapshotCache = { revision: this.rev, value } return value } @@ -744,45 +766,27 @@ export class SessionInputShell implements SessionInput { const attachmentIds = [...this.attachmentIds] this.attachmentIds = [] const occurrences = this.projection.occurrences - const record = { draft, occurrences, attachmentIds } + const quotes = this.projection.quotes + const record = { draft, occurrences, quotes, attachmentIds } this.detachedDrafts.set(attempt.seq, record) if (this.failedRestoreRev === this.rev) { this.failedDetached.clear() this.failedRestoreRev = undefined } - if (occurrences.length === 0) { - this.settleSink(attempt, this.deps.defaultSink(draft.trim(), attachmentIds, mode, attempt.signal)) - return - } const inputTriggers = this.deps.inputTriggers?.() - void Promise.all(occurrences.map(async (o) => { - if (inputTriggers === undefined) throw new Error(`no serializer for reference source "${o.source}"`) - return { - offset: o.offset, - length: o.length, - text: await inputTriggers.serializeReference(o.source, o.ref, attempt.signal), - } - })).then( - (parts) => { - if (this.disposed) return - // Splice model forms over their clipboard ranges (offsets are - // clipboard-projection; parts arrive offset-sorted since chips walk in - // document order). - let out = '' - let cursor = 0 - for (const part of parts) { - out += draft.slice(cursor, part.offset) + part.text - cursor = part.offset + part.length - } - out += draft.slice(cursor) - this.settleSink(attempt, this.deps.defaultSink(out.trim(), attachmentIds, mode, attempt.signal)) - }, - (error: unknown) => { - if (this.dead(attempt)) return - const message = error instanceof Error ? error.message : String(error) - this.settleDetachedFailure(attempt, message) - }, - ) + const prompt = serializeDraftPrompt(snapshotDraft(draft, occurrences, undefined, quotes), async (source, ref) => { + if (inputTriggers === undefined) throw new Error(`no serializer for reference source "${source}"`) + return inputTriggers.serializeReference(source, ref, attempt.signal) + }) + const send = (text: string): void => { + if (this.dead(attempt)) return + this.settleSink(attempt, this.deps.defaultSink(text, attachmentIds, mode, attempt.signal)) + } + if (!(prompt instanceof Promise)) { send(prompt); return } + void prompt.then(send, (error: unknown) => { + if (this.dead(attempt)) return + this.settleDetachedFailure(attempt, error instanceof Error ? error.message : String(error)) + }) } private notifySubmission(submission: MessageSubmission | undefined): void { @@ -832,17 +836,19 @@ export class SessionInputShell implements SessionInput { const separator = '\n\n' let draft = '' const occurrences: Occurrence[] = [] + const quotes: DraftQuote[] = [] for (const record of records) { const base = draft.length + (draft === '' ? 0 : separator.length) if (draft !== '') draft += separator draft += record.draft + quotes.push(...record.quotes.map(quote => ({ ...quote, offset: base + quote.offset }))) for (const occurrence of record.occurrences) { occurrences.push({ ...occurrence, offset: base + occurrence.offset }) } } this.restoringFailures = true try { - this.draftEditor.restoreDraft(draft, occurrences) + this.draftEditor.restoreDraft(draft, occurrences, quotes, { remove: this.deps.quoteRemoveLabel?.() ?? '' }) this.draftEditor.clearHistory() this.failedRestoreRev = this.rev } finally { diff --git a/packages/client/ui-conversation/src/client/input/hub.ts b/packages/client/ui-conversation/src/client/input/hub.ts index 0412948d2e..6ab4c5b4a9 100644 --- a/packages/client/ui-conversation/src/client/input/hub.ts +++ b/packages/client/ui-conversation/src/client/input/hub.ts @@ -21,6 +21,7 @@ import type { SessionInputResolver, SessionInput, SubmitOutcome, } from '../contract/input.ts' import type { ComposerKeyboard } from '../contract/draft-editor.ts' +import type { ComposerBlocks } from '../contract/composer-blocks.ts' import type { InputSubmitMode } from '../contract/composer-submission.ts' import type { PopupDismissFace } from './facade.ts' import { SessionInputShell } from './facade.ts' @@ -40,6 +41,7 @@ interface InputTriggerServiceFace { /** Attachment-send face resolved lazily to keep hub/service construction acyclic. */ interface ConversationAttachmentFace { + readonly blocks: ComposerBlocks sendSession( session: SessionFace, text: string, @@ -123,6 +125,13 @@ export class InputHub implements SessionInputResolver { popup: () => this.popup(actx), inbox: session.projections.faceOf('inbox') as ObservableSnapshot, defaultSink: (text, attachmentIds, mode, signal) => this.sink(session, text, attachmentIds, mode, signal), + quoteRemoveLabel: () => this.t('quote.remove'), + quoteInsertionAllowed: () => { + const state = session.getSnapshot() + return !state.removed && (state.subagent === null + || (state.subagent.address.mode === 'continuable' && state.subagent.parentAvailable === true)) + && this.conversation().blocks.storeFor(session.sessionId).getSnapshot() === undefined + }, steerQueue: () => { void this.steerQueue(session, shell) }, commandAttachments: { serialize: async (ids) => { diff --git a/packages/client/ui-conversation/src/client/input/prompt.ts b/packages/client/ui-conversation/src/client/input/prompt.ts new file mode 100644 index 0000000000..548256599c --- /dev/null +++ b/packages/client/ui-conversation/src/client/input/prompt.ts @@ -0,0 +1,88 @@ +/** Serialize semantic draft spans without turning quoted references into gestures. */ +import { formatQuoteText } from '@deepseek-ai/dsh-client-ui-primitives' +import type { DraftSnapshot } from '../contract/draft-editor.ts' + +type DraftToken = { readonly kind: 'text'; text: string } | { readonly kind: 'quote'; readonly text: string } +interface DraftSpan { + readonly offset: number + readonly length: number + readonly token: DraftToken +} + +const QUOTE_SEPARATOR = '\n\n' + +function pushText(tokens: DraftToken[], text: string): void { + if (text === '') return + const last = tokens.at(-1) + if (last?.kind === 'text') last.text += text + else tokens.push({ kind: 'text', text }) +} + +function normalizeQuoteBoundaries(tokens: DraftToken[]): DraftToken[] { + const normalized: DraftToken[] = [] + for (const token of tokens) { + if (token.kind === 'text') { + pushText(normalized, token.text) + continue + } + const previous = normalized.at(-1) + if (previous?.kind === 'text') { + previous.text = previous.text.trimEnd() + if (previous.text !== '') previous.text += QUOTE_SEPARATOR + else normalized.pop() + } + if (normalized.at(-1)?.kind === 'quote') { + normalized.push({ kind: 'text', text: QUOTE_SEPARATOR }) + } + normalized.push(token) + } + for (let index = 0; index < normalized.length; index++) { + const token = normalized[index] + if (token?.kind !== 'quote') continue + const next = normalized[index + 1] + if (next?.kind !== 'text') continue + if (next.text === QUOTE_SEPARATOR && normalized[index + 2]?.kind === 'quote') continue + next.text = next.text.trimStart() + if (next.text !== '') next.text = `${QUOTE_SEPARATOR}${next.text}` + } + return normalized.filter(token => token.kind === 'quote' || token.text !== '') +} + +/** + * Serialize the captured draft through reference codecs, formatting quotes as Markdown. + * @param draft - one semantic draft revision. + * @param serializeReference - owner-routed reference serializer. + * @returns synchronous content without references, otherwise the resolving promise. + */ +export function serializeDraftPrompt( + draft: DraftSnapshot, + serializeReference: (source: string, ref: string) => Promise, +): string | Promise { + const build = (references: readonly DraftSpan[]): string => { + const spans = [ + ...references, + ...(draft.quotes ?? []).map(quote => ({ offset: quote.offset, length: quote.length, + token: { kind: 'quote' as const, text: quote.text } })), + ].sort((a, b) => a.offset - b.offset) + const tokens: DraftToken[] = [] + let cursor = 0 + for (const span of spans) { + pushText(tokens, draft.text.slice(cursor, span.offset)) + if (span.token.kind === 'text') pushText(tokens, span.token.text) + else tokens.push(span.token) + cursor = span.offset + span.length + } + pushText(tokens, draft.text.slice(cursor)) + const first = tokens[0] + if (first?.kind === 'text') first.text = first.text.trimStart() + const last = tokens.at(-1) + if (last?.kind === 'text') last.text = last.text.trimEnd() + return normalizeQuoteBoundaries(tokens) + .map(token => token.kind === 'quote' ? formatQuoteText(token.text) : token.text).join('') + } + if (draft.references.length === 0) return build([]) + return Promise.all(draft.references.map(async reference => ({ + offset: reference.offset, length: reference.length, + token: { kind: 'text' as const, text: await serializeReference(reference.source, reference.ref) }, + }))).then(build) +} diff --git a/packages/client/ui-conversation/src/client/locales.ts b/packages/client/ui-conversation/src/client/locales.ts index 5a221bc9a1..ac558bd2a7 100644 --- a/packages/client/ui-conversation/src/client/locales.ts +++ b/packages/client/ui-conversation/src/client/locales.ts @@ -9,6 +9,7 @@ const PLAN_NEXT_ACTION_EN = 'describe your task to generate plan' /** Simplified Chinese dictionary (the key-set source of truth). */ export const zh = { + 'quote.remove': '移除引用', 'shortcut.newline': '换行', 'shortcut.complementary': '使用互补的 Queue／Steer 方式', 'shortcut.slash': '打开命令菜单', @@ -390,6 +391,7 @@ export type ConversationKey = keyof typeof zh /** English dictionary, checked complete against the zh key set. */ export const en = { + 'quote.remove': 'Remove quote', 'shortcut.newline': 'New line', 'shortcut.complementary': 'Use the complementary Queue / Steer action', 'shortcut.slash': 'Open command menu', diff --git a/packages/client/ui-conversation/src/client/queue/QueueDock.tsx b/packages/client/ui-conversation/src/client/queue/QueueDock.tsx index 2ce7a20eef..6396387a91 100644 --- a/packages/client/ui-conversation/src/client/queue/QueueDock.tsx +++ b/packages/client/ui-conversation/src/client/queue/QueueDock.tsx @@ -229,7 +229,8 @@ export function QueueDock({ useSession, useProjection, updateQueue, notify, load )} {renderFactorySlot('conversation.user.text', { text: row.content.filter(block => block.type === 'text').map(block => block.text).join(''), - facts: QUEUE_TEXT_FACTS, interactive: false, ellipsis: true, + facts: QUEUE_TEXT_FACTS, + interactive: false, ellipsis: true, })} )} @@ -345,7 +346,9 @@ export function QueueDock({ useSession, useProjection, updateQueue, notify, load )} {renderFactorySlot('conversation.user.text', { - text: submission.text, facts: QUEUE_TEXT_FACTS, interactive: false, ellipsis: true, + text: submission.text, + facts: QUEUE_TEXT_FACTS, + interactive: false, ellipsis: true, })} {t('queue.sending')} {queueMutable &&
diff --git a/packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.module.css b/packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.module.css index 884b2ce331..d953998ea2 100644 --- a/packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.module.css +++ b/packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.module.css @@ -17,6 +17,14 @@ padding-right: 48px; } +/* Narrow settings panel: the 48px gutter separates the label from its control + across a wide row and only squeezes the label here. */ +@media (max-width: 767px) { + :global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .rowText { + padding-right: 16px; + } +} + .title { font-size: 14px; font-weight: 400; diff --git a/packages/client/ui-conversation/src/client/user-text/UserText.tsx b/packages/client/ui-conversation/src/client/user-text/UserText.tsx index d8cd8f3430..7513d75462 100644 --- a/packages/client/ui-conversation/src/client/user-text/UserText.tsx +++ b/packages/client/ui-conversation/src/client/user-text/UserText.tsx @@ -1,7 +1,7 @@ /** User-text presentation delegates evaluation to its data-layer document and renders JSON business nodes. */ import { Fragment, useEffect, useMemo } from 'react' import type { FactoryComponentPropsOf } from '@deepseek-ai/dsh-client-ui-slots' -import { ReferenceChip, UserTextRun } from '@deepseek-ai/dsh-client-ui-primitives' +import { HoverCardGroup, ReferenceChip, UserTextRun } from '@deepseek-ai/dsh-client-ui-primitives' import type { UserTextNodeProps } from '../contract/slots.ts' import type { UserTextNode } from '../contract/user-text.ts' import css from './UserText.module.css' @@ -42,7 +42,7 @@ export function UserText({ })} })}, [nodes, text, interactive, renderSlot]) - return {content} + return {content} } /** diff --git a/packages/client/ui-conversation/tests/apply-inject.client.spec.tsx b/packages/client/ui-conversation/tests/apply-inject.client.spec.tsx index 83d6db85c9..16caa7db32 100644 --- a/packages/client/ui-conversation/tests/apply-inject.client.spec.tsx +++ b/packages/client/ui-conversation/tests/apply-inject.client.spec.tsx @@ -8,6 +8,7 @@ import { describe, expect, it, onTestFinished, vi } from 'vitest' import type { CommandContribution, CommandUiContract } from '@deepseek-ai/dsh-client-ui-commands/client' import type { ISession, SessionReference } from '@deepseek-ai/dsh-api-session-controller/client' import { LocaleRuntime } from '@deepseek-ai/dsh-client-locale/client' +import * as messageQuotes from '@deepseek-ai/dsh-message-quotes/client' import type { ObservableSnapshot } from '@deepseek-ai/dsh-client-store' import { SlotTestRuntime, stubConfigForm, usePinnedBrowserLanguages, @@ -23,6 +24,12 @@ import { createConversationStore } from '../src/client/stores.ts' import type { SessionInputShell } from '../src/client/input/facade.ts' import { RemoteError } from '@deepseek-ai/dsh-client-test-runtime' +declare module '@deepseek-ai/dsh-client-ui-slots' { + interface SlotMap { + 'quote-probe': { kind: 'single'; scope: 'session' } + } +} + usePinnedBrowserLanguages('zh-CN') const ROOT = 'root-1' as SessionId @@ -38,7 +45,7 @@ function sessionFakeFor() { } satisfies SessionBehaviorOverrides } -async function bench() { +async function bench(renderQuote = false) { const runtime = await SlotTestRuntime.create() const rootUpload = vi.fn(() => Promise.resolve({ ok: true as const, @@ -98,9 +105,15 @@ async function bench() { runtime.slots.installLocale(locale) await runtime.root.declare({ 'main': { kind: 'keyed', scope: 'root' }, - }, (_props: { renderSlot?: unknown }) => null) + 'quote-probe': { kind: 'single', scope: 'session' }, + }, ({ renderFactorySlot, SessionProvider }) => renderQuote ? ( + + {renderFactorySlot('conversation.user.text', { text: '> @literal /review', facts: {} })} + + ) : null) const feature = await runtime.mount({ inject: [...inject], apply }) + if (renderQuote) await runtime.mount(messageQuotes) runtime.renderRoot() const entryOf = (key: 'main.conversation' | 'conversation.session' | 'conversation.session.header' | 'conversation.composer.bar') => runtime.slots.entries(key)[0]! @@ -145,6 +158,17 @@ async function bench() { } describe('Conversation inject API', () => { + it('renders literal quote text through the actual Factory and keyed node registration', async () => { + const b = await bench(true) + onTestFinished(() => b.runtime.dispose()) + const errors = vi.fn() + const unsubscribe = b.slots.onEntryError(errors) + onTestFinished(unsubscribe) + await vi.waitFor(() => { expect(document.querySelector('[data-quote-preview-text]')?.textContent).toBe('@literal /review') }) + expect(document.querySelector('[data-slot-error]')).toBeNull() + expect(errors).not.toHaveBeenCalled() + }) + it('owns the File action, reads its mounted composer availability, and unregisters on disposal', async () => { const b = await bench() onTestFinished(() => b.runtime.dispose()) diff --git a/packages/client/ui-conversation/tests/draft-document.client.spec.ts b/packages/client/ui-conversation/tests/draft-document.client.spec.ts index e96911e2d9..ef737eec06 100644 --- a/packages/client/ui-conversation/tests/draft-document.client.spec.ts +++ b/packages/client/ui-conversation/tests/draft-document.client.spec.ts @@ -13,6 +13,7 @@ import { parseStoredDraft, resolveDraftInput, snapshotDraft } from '../src/clien import { scanTextRefs } from '../src/client/input/decorations.ts' import { ReferenceChipNode } from '../src/client/input/editor/chip-node.tsx' import { CommandChipNode } from '../src/client/input/editor/command-chip-node.tsx' +import { QuoteNode } from '../src/client/input/editor/QuoteNode.tsx' import { TextRefNode } from '../src/client/input/editor/text-ref.ts' import { SessionInputShell, type SessionInputDeps } from '../src/client/input/facade.ts' @@ -302,6 +303,33 @@ describe('draft documents in the input shell', () => { await vi.waitFor(() => { expect(claim.submitted).toEqual(['ship']) }) }) + it('restores a command and an atomic quote together without changing their text or offsets', async () => { + const original = makeShell() + original.setDraft('/goal ') + expect(original.insertQuote('selected source text')).toBe(true) + expect(original.beginCommand(goalClaim(), { start: 0, end: 6, draftRev: original.snapshot.draftRev })).toBe(true) + const stored = parseStoredDraft(JSON.parse(JSON.stringify(original.draftSnapshot))) + expect(stored).toEqual({ + text: '/goal > selected source text ', references: [], command: { token: '/goal ' }, + quotes: [{ offset: 6, length: 22, text: 'selected source text' }], + }) + if (stored === undefined) throw new Error('Expected a stored draft') + const claim = goalClaim() + const provider: InputTriggerController = { + ...triggerProvider(createSnapshotStore(new Map())), + resolveClaim: () => Promise.resolve(claim), + } + const restored = makeShell({ inputTriggers: () => provider }) + restored.setDraft(stored) + await vi.waitFor(() => { expect(restored.snapshot.phase).toBe('claimed') }) + expect(commandChips(restored)).toBe(1) + expect(restored.editor.getEditorState().read(() => $nodesOfType(QuoteNode).map(node => node.getQuoteText()))) + .toEqual(['selected source text']) + expect(restored.draftSnapshot).toEqual(stored) + restored.submit() + await vi.waitFor(() => { expect(claim.submitted).toEqual(['> selected source text ']) }) + }) + it('waits for the trigger pipeline before resolving a restored command chip', async () => { const stored = storedGoalDraft() const resolveClaim = vi.fn(() => Promise.resolve(goalClaim())) diff --git a/packages/client/ui-conversation/tests/editor-focus.client.spec.ts b/packages/client/ui-conversation/tests/editor-focus.client.spec.ts index 7f115ff744..a75bdf01aa 100644 --- a/packages/client/ui-conversation/tests/editor-focus.client.spec.ts +++ b/packages/client/ui-conversation/tests/editor-focus.client.spec.ts @@ -37,6 +37,7 @@ function fixture(start = 1, end = 4) { const onUpdate = vi.fn() const runtime: DraftEditorRuntime = new DraftEditorRuntime({ onUpdate: () => { runtime.refreshProjection(); onUpdate() }, + quoteLabels: () => ({ remove: 'Remove quote' }), openReference: () => false, lexicon: () => new Map(), resolveLexicon: () => undefined, }) diff --git a/packages/client/ui-conversation/tests/interaction-registry.client.spec.ts b/packages/client/ui-conversation/tests/interaction-registry.client.spec.ts new file mode 100644 index 0000000000..197c5f02f1 --- /dev/null +++ b/packages/client/ui-conversation/tests/interaction-registry.client.spec.ts @@ -0,0 +1,61 @@ +/** Plugin dispatch is synchronous, scoped, and independent of browser default cancellation. */ +import { Context } from '@deepseek-ai/cordis' +import { SessionId } from '@deepseek-ai/dsh-session/types' +import { describe, expect, it, onTestFinished, vi } from 'vitest' +import type { TextInteractionRequest } from '../src/client/contract/text-interaction.ts' +import { ConversationInteractionRegistry } from '../src/client/conversation/interaction-registry.ts' + +function fixture() { + const ctx = new Context() + onTestFinished(() => ctx.fiber.dispose()) + return new ConversationInteractionRegistry(ctx) +} + +const sessionId = SessionId('interaction') +const gesture = () => ({ trigger: 'selection' as const, hasSelection: true, readText: () => 'selected', preventDefault: vi.fn() }) + +describe('Conversation interaction registrations', () => { + it('passes the session to consumers and stops at the first opened surface', () => { + const registry = fixture() + const pass = vi.fn() + const later = vi.fn() + registry.register({ id: 'pass', onInteraction: pass }) + registry.register({ id: 'quote', onInteraction: (request) => { request.open() } }) + registry.register({ id: 'later', onInteraction: later }) + const request = gesture() + expect(registry.dispatch(sessionId, request)).toBe('quote') + expect(pass).toHaveBeenCalledWith(expect.objectContaining({ sessionId, trigger: 'selection' })) + expect(later).not.toHaveBeenCalled() + expect(request.preventDefault).not.toHaveBeenCalled() + }) + + it('allows cancellation without opening and ignores retained gesture methods', () => { + const registry = fixture() + let retained: TextInteractionRequest | undefined + registry.register({ id: 'menu', onInteraction: (request) => { retained = request; request.preventDefault() } }) + const request = gesture() + expect(registry.dispatch(sessionId, request)).toBeNull() + expect(request.preventDefault).toHaveBeenCalledOnce() + retained!.open() + retained!.preventDefault() + expect(request.preventDefault).toHaveBeenCalledOnce() + }) + + it('publishes removal and rejects empty or duplicate IDs', () => { + const registry = fixture() + const changed = vi.fn() + const off = registry.subscribe(changed) + expect(() => registry.register({ id: '', onInteraction: () => {} })).toThrow('must not be empty') + const dispose = registry.register({ id: 'quote', onInteraction: (request) => { request.open() } }) + const ids = registry.getSnapshot() + expect(ids).toEqual(['quote']) + expect(registry.getSnapshot()).toBe(ids) + expect(() => registry.register({ id: 'quote', onInteraction: () => {} })).toThrow('Duplicate') + dispose() + dispose() + expect(registry.getSnapshot()).toEqual([]) + expect(changed).toHaveBeenCalledTimes(2) + expect(registry.dispatch(sessionId, gesture())).toBeNull() + off() + }) +}) diff --git a/packages/client/ui-conversation/tests/queue-dock.client.spec.tsx b/packages/client/ui-conversation/tests/queue-dock.client.spec.tsx index 879f980b91..4583814093 100644 --- a/packages/client/ui-conversation/tests/queue-dock.client.spec.tsx +++ b/packages/client/ui-conversation/tests/queue-dock.client.spec.tsx @@ -148,6 +148,21 @@ function imageRow(id: string, refId: string, text = ''): UserMessage { } describe('QueueDock', () => { + it('keeps the same quote preview when a queued echo hands off to Host content', () => { + const requestId = 'quote-handoff' as SessionSnapshot['pendingSubmissions'][number]['requestId'] + const content = [{ type: 'text' as const, text: '> @literal /review' }] + const initial = { ...snapshotWith([]), pendingSubmissions: [{ requestId, placement: 'queued' as const, + time: 1000, text: content[0]!.text, attachments: [] }] } + const source = liveSession(initial) + const view = render() + expect(view.container.querySelector('[data-quote-preview-text]')?.textContent).toBe('@literal /review') + const queued: UserMessage = { ...row('accepted-quote', ''), content, source: { kind: 'user', rpcId: requestId } } + act(() => { source.push(snapshotWith([queued])) }) + expect(view.container.querySelectorAll('[data-quote-preview]')).toHaveLength(1) + expect(view.container.querySelector('[data-quote-preview-text]')?.textContent).toBe('@literal /review') + expect(view.container.querySelector('[data-ref-chip]')).toBeNull() + }) + it.each(['ABC', 'ACB', 'BAC', 'BCA', 'CAB', 'CBA'])( 'keeps repeated queued submissions in Dock through acceptance and FIFO claims (%s)', (hostOrder) => { const pending: SessionSnapshot['pendingSubmissions'] = ['A', 'B', 'C'].map(id => ({ diff --git a/packages/client/ui-conversation/tests/quote-composer.client.spec.tsx b/packages/client/ui-conversation/tests/quote-composer.client.spec.tsx new file mode 100644 index 0000000000..7c5f62a484 --- /dev/null +++ b/packages/client/ui-conversation/tests/quote-composer.client.spec.tsx @@ -0,0 +1,202 @@ +// @vitest-environment jsdom +import { describe, expect, it, vi } from 'vitest' +import { fireEvent, render } from '@testing-library/react' +import type { Context } from '@deepseek-ai/cordis' +import { + KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, REDO_COMMAND, UNDO_COMMAND, + $getRoot, $getSelection, $isRangeSelection, $nodesOfType, +} from 'lexical' +import type { DraftSnapshot } from '../src/client/contract/draft-editor.ts' +import type { SubmitOutcome } from '../src/client/contract/input.ts' +import { SessionInputShell } from '../src/client/input/facade.ts' +import { + QuoteNode, QuoteNodeView, REMOVE_QUOTE_COMMAND, +} from '../src/client/input/editor/QuoteNode.tsx' +import { $selectDetectSpan } from '../src/client/input/editor/span-map.ts' + +const quote = 'selected source text' + +function bench(quoteInsertionAllowed?: () => boolean) { + const sink = vi.fn(() => Promise.resolve({ kind: 'success' })) + const shell = new SessionInputShell({ + actx: {} as Context, + defaultSink: sink, + commandAttachments: { + serialize: () => Promise.resolve([]), + release: () => {}, + unsupportedNotice: () => 'unsupported', + }, + quoteRemoveLabel: () => 'Remove quote', + ...(quoteInsertionAllowed === undefined ? {} : { quoteInsertionAllowed }), + }) + return { shell, sink } +} + +function quoteKeys(shell: SessionInputShell): string[] { + return shell.editor.getEditorState().read(() => $nodesOfType(QuoteNode).map(node => node.getKey())) +} + +describe('QuoteNode composer lifecycle', () => { + it('preserves the draft when its Session cannot accept an inserted quote', () => { + let allowed = false + const { shell } = bench(() => allowed) + shell.setDraft('base ') + const before = shell.draftSnapshot + expect(shell.insertQuote(quote)).toBe(false) + expect(shell.draftSnapshot).toBe(before) + allowed = true + expect(shell.insertQuote(quote)).toBe(true) + }) + + it('renders quote text as a non-interactive container and keeps close accessible', () => { + const dispatchCommand = vi.fn((_command: unknown, _payload: unknown) => true) + const parentKeyDown = vi.fn() + const editor = { dispatchCommand } as never + const view = render( +
+ +
, + ) + const text = view.container.querySelector('[data-quote-preview]')! + expect(text.getAttribute('role')).toBeNull() + expect(text.getAttribute('tabindex')).toBeNull() + expect(text.getAttribute('title')).toBeNull() + fireEvent.click(text) + expect(dispatchCommand).not.toHaveBeenCalled() + fireEvent.keyDown(view.getByRole('button', { name: 'Remove quote' }), { key: 'Enter' }) + expect(parentKeyDown).not.toHaveBeenCalled() + fireEvent.click(view.getByRole('button', { name: 'Remove quote' })) + expect(dispatchCommand).toHaveBeenCalledWith(REMOVE_QUOTE_COMMAND, 'quote-key') + expect(view.queryByRole('link')).toBeNull() + }) + + it('persists through DraftSnapshot restore as an atomic quote', () => { + const first = bench().shell + const mirrored: DraftSnapshot[] = [] + first.bindDraftPersistence((document) => { mirrored.push(document) }) + expect(first.insertQuote(quote)).toBe(true) + const persisted = mirrored.at(-1) + expect(persisted).toEqual({ text: '> selected source text ', references: [], quotes: [{ offset: 0, length: 22, text: quote }] }) + + const restored = bench().shell + restored.setDraft(persisted as DraftSnapshot) + restored.editor.getEditorState().read(() => { + const [node] = $nodesOfType(QuoteNode) + expect(node?.getQuoteText()).toBe(quote) + expect(node?.isKeyboardSelectable()).toBe(false) + expect(node?.createDOM({ namespace: 'quote', theme: {} }).getAttribute('contenteditable')).toBe('false') + }) + }) + + it('treats insert, close removal, Backspace, undo, and redo as whole-node operations', async () => { + const direct = bench().shell + direct.insertQuote(quote) + expect(direct.editor.dispatchCommand( + KEY_BACKSPACE_COMMAND, + new KeyboardEvent('keydown', { key: 'Backspace' }), + )).toBe(true) + await vi.waitFor(() => { expect(quoteKeys(direct)).toHaveLength(0) }) + expect(direct.snapshot.draft).toBe('') + direct.editor.dispatchCommand(UNDO_COMMAND, undefined) + await vi.waitFor(() => { expect(quoteKeys(direct)).toHaveLength(1) }) + + const { shell } = bench() + shell.setDraft('base ') + shell.insertQuote(quote) + expect(quoteKeys(shell)).toHaveLength(1) + await Promise.resolve() + shell.editor.dispatchCommand(UNDO_COMMAND, undefined) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(0) }) + shell.editor.dispatchCommand(REDO_COMMAND, undefined) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(1) }) + + const [key] = quoteKeys(shell) + shell.editor.update(() => { + expect($selectDetectSpan({ start: 6, end: 6 })).toBe(true) + }, { discrete: true }) + expect(shell.editor.dispatchCommand( + KEY_BACKSPACE_COMMAND, + new KeyboardEvent('keydown', { key: 'Backspace' }), + )).toBe(true) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(0) }) + shell.editor.dispatchCommand(UNDO_COMMAND, undefined) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(1) }) + shell.editor.update(() => { + expect($selectDetectSpan({ start: 5, end: 5 })).toBe(true) + }, { discrete: true }) + expect(shell.editor.dispatchCommand( + KEY_DELETE_COMMAND, + new KeyboardEvent('keydown', { key: 'Delete' }), + )).toBe(true) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(0) }) + shell.editor.dispatchCommand(UNDO_COMMAND, undefined) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(1) }) + shell.editor.dispatchCommand(REMOVE_QUOTE_COMMAND, key!) + await vi.waitFor(() => { expect(quoteKeys(shell)).toHaveLength(0) }) + expect(shell.snapshot.draft).toBe('base ') + shell.editor.getEditorState().read(() => { + const selection = $getSelection() + expect($isRangeSelection(selection) && selection.isCollapsed()).toBe(true) + }) + + const empty = bench().shell + empty.insertQuote(quote) + const [emptyKey] = quoteKeys(empty) + empty.editor.dispatchCommand(REMOVE_QUOTE_COMMAND, emptyKey!) + await vi.waitFor(() => { expect(quoteKeys(empty)).toHaveLength(0) }) + expect(empty.snapshot.draft).toBe('') + }) + + it('sends selected quotes as ordinary Markdown text', async () => { + const { shell, sink } = bench() + shell.insertQuote(quote) + shell.paste('answer') + shell.submit('queue') + expect(sink).toHaveBeenCalledWith('> selected source text\n\nanswer', [], 'queue', expect.any(AbortSignal)) + expect(shell.snapshot.draft).toBe('') + shell.editor.getEditorState().read(() => { expect($getRoot().getTextContent()).toBe('') }) + }) + + it('keeps adjacent quotes separated in model text', () => { + const { shell, sink } = bench() + shell.insertQuote('first') + shell.insertQuote('second') + shell.submit('queue') + expect(sink).toHaveBeenCalledWith('> first\n\n> second', [], 'queue', expect.any(AbortSignal)) + }) + + it('restores the complete rich document when an optimistic send fails', async () => { + let settle!: (outcome: { kind: 'error'; text: string }) => void + const { shell, sink } = bench() + sink.mockImplementationOnce(() => new Promise((resolve) => { settle = resolve })) + shell.insertQuote(quote) + shell.paste('answer') + const submitted = shell.draftSnapshot + + shell.submit('queue') + expect(shell.snapshot.draft).toBe('') + settle({ kind: 'error', text: 'retry' }) + + await vi.waitFor(() => { expect(shell.draftSnapshot).toEqual(submitted) }) + expect(quoteKeys(shell)).toHaveLength(1) + expect(shell.notices.getSnapshot()).toMatchObject({ level: 'error', text: 'retry' }) + }) + + it('mirrors optimistic successful-send clearing through the Session lifetime', async () => { + let settle!: (outcome: { kind: 'success' }) => void + const { shell, sink } = bench() + sink.mockImplementationOnce(() => new Promise((resolve) => { settle = resolve })) + const mirrored: DraftSnapshot[] = [] + shell.bindDraftPersistence((document) => { mirrored.push(document) }) + shell.insertQuote(quote) + shell.submit('queue') + expect(mirrored.at(-1)).toEqual({ text: '', references: [] }) + settle({ kind: 'success' }) + expect(mirrored.at(-1)).toEqual({ text: '', references: [] }) + }) +}) diff --git a/packages/client/ui-conversation/tests/quote-user-text.client.spec.tsx b/packages/client/ui-conversation/tests/quote-user-text.client.spec.tsx new file mode 100644 index 0000000000..1d88b71aee --- /dev/null +++ b/packages/client/ui-conversation/tests/quote-user-text.client.spec.tsx @@ -0,0 +1,30 @@ +/** Quote draft persistence and prompt serialization remain composer-owned. */ +import { describe, expect, it, vi } from 'vitest' +import { formatQuoteText } from '@deepseek-ai/dsh-client-ui-primitives' +import { parseStoredDraft } from '../src/client/draft.ts' +import { serializeDraftPrompt } from '../src/client/input/prompt.ts' + +describe('quote draft spans', () => { + it('validates canonical clipboard text and refuses overlapping references or empty quotes', () => { + const quote = { offset: 0, length: 7, text: 'quote' } + const draft = { text: '> quote', references: [], quotes: [quote] } + expect(parseStoredDraft(draft)).toEqual(draft) + expect(parseStoredDraft({ ...draft, text: 'changed' })).toBeUndefined() + expect(parseStoredDraft({ ...draft, quotes: [{ ...quote, text: ' ' }] })).toBeUndefined() + expect(parseStoredDraft({ ...draft, references: [{ source: 'file', ref: 'quote', label: 'quote', clipboardText: 'quote', offset: 2, length: 5 }] })).toBeUndefined() + expect(parseStoredDraft({ ...draft, quotes: [quote, quote] })).toBeUndefined() + }) + + it('serializes reference owners outside quotes into ordinary Markdown text', async () => { + const serialize = vi.fn(() => Promise.resolve('@[Session](dsh-session:id)')) + const quote = '/review @literal' + const quoted = formatQuoteText(quote) + const prompt = await serializeDraftPrompt({ + text: '@session ' + quoted, + references: [{ source: 'session', ref: 'id', label: 'Session', clipboardText: '@session', offset: 0, length: 8 }], + quotes: [{ offset: 9, length: quoted.length, text: quote }], + }, serialize) + expect(serialize).toHaveBeenCalledExactlyOnceWith('session', 'id') + expect(prompt).toBe('@[Session](dsh-session:id)\n\n' + quoted) + }) +}) diff --git a/packages/client/ui-conversation/tests/user-text-component-fixture.client.tsx b/packages/client/ui-conversation/tests/user-text-component-fixture.client.tsx index 8a475bc33d..f4970b398d 100644 --- a/packages/client/ui-conversation/tests/user-text-component-fixture.client.tsx +++ b/packages/client/ui-conversation/tests/user-text-component-fixture.client.tsx @@ -7,6 +7,8 @@ import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts import type { UserTextInput, UserTextNodeOwnerProps } from '../src/client/contract/slots.ts' import type { UserTextNode } from '../src/client/contract/user-text.ts' import { UserTextRegistry } from '../src/client/conversation/user-text-registry.ts' +import { QuotedUserText } from '@deepseek-ai/dsh-message-quotes/src/client/QuotedUserText.tsx' +import { quoteRule } from '@deepseek-ai/dsh-message-quotes/src/client/quote-rule.ts' import { UserText, PlainUserText, SessionReference } from '../src/client/user-text/UserText.tsx' import { sessionReferenceRule } from '../src/client/user-text/session-reference-rule.ts' import { collapseWhitespaceRule, trimWhitespaceRule } from '../src/client/user-text/whitespace-rules.ts' @@ -15,6 +17,8 @@ import { SkillReference } from '../../ui-skill/src/client/SkillReference.tsx' import { fileReferenceRule, folderReferenceRule } from '../../ui-reference/src/client/user-text-rules.ts' import { FileReference, FolderReference } from '../../ui-reference/src/client/FileReference.tsx' import { zh as referenceZh } from '../../ui-reference/src/client/locales.ts' +import { createSecretRule } from '../../ui-secret-mask/src/client/secret-rule.ts' +import { SecretText } from '../../ui-secret-mask/src/client/SecretText.tsx' import { goalCommandReferenceRule } from '../../ui-goal/src/client/user-text-rules.ts' import { GoalCommandReference } from '../../ui-goal/src/client/GoalCommandReference.tsx' @@ -37,7 +41,7 @@ export function createUserTextFixture(actions: UserTextFixtureActions = {}): (in onTestFinished(async () => { await ctx.fiber.dispose() }) const registry = new UserTextRegistry(ctx) for (const rule of [ - sessionReferenceRule, skillReferenceRule, fileReferenceRule, folderReferenceRule, + quoteRule, createSecretRule(), sessionReferenceRule, skillReferenceRule, fileReferenceRule, folderReferenceRule, goalCommandReferenceRule, collapseWhitespaceRule, trimWhitespaceRule, ]) registry.register(rule) const useUserTextRevision = bindSnapshotSelector({ @@ -54,6 +58,8 @@ export function createUserTextFixture(actions: UserTextFixtureActions = {}): (in const owner = input as UserTextNodeOwnerProps & { node: UserTextNode } switch (owner.node.id) { // The production components only read these owner, action and locale seats in these units. + case 'quote': return createElement(QuotedUserText, owner as ComponentProps) + case 'secret': return createElement(SecretText, { ...owner, t } as ComponentProps) case 'text': return createElement(PlainUserText, owner as ComponentProps) case 'session': return createElement(SessionReference, owner as ComponentProps) case 'file': return createElement(FileReference, { ...owner, openFile, t } as ComponentProps) @@ -63,7 +69,9 @@ export function createUserTextFixture(actions: UserTextFixtureActions = {}): (in default: return options?.fallback ?? null } } - return input => createElement(UserText, { - ...input, useUserTextRevision, createUserTextEvaluator, reportTransformFailure, renderSlot, + const renderText = (input: UserTextInput) => createElement(UserText, { + ...input, + useUserTextRevision, createUserTextEvaluator, reportTransformFailure, renderSlot, } as UserTextProps) + return renderText } diff --git a/packages/client/ui-permission-presets/README.i18n.yaml b/packages/client/ui-permission-presets/README.i18n.yaml index f9ae7348ed..9e64b4a3c4 100644 --- a/packages/client/ui-permission-presets/README.i18n.yaml +++ b/packages/client/ui-permission-presets/README.i18n.yaml @@ -15,8 +15,8 @@ en: d152484eb41ac6b4 zh: 09388d293f9be9cb /deepseek-ai-dsh-client-ui-permission-presets/use-this-package: - en: 91606bff7da02253 - zh: ef68e813d64c89be + en: b4193258023cf8ae + zh: e8e6e0ea0ccb8ef4 /deepseek-ai-dsh-client-ui-permission-presets/use-this-package/the-picker: en: 4e5a070ad4321548 zh: 010063336bd2b8df diff --git a/packages/client/ui-permission-presets/README.md b/packages/client/ui-permission-presets/README.md index 50d8b4918c..cc552f5a78 100644 --- a/packages/client/ui-permission-presets/README.md +++ b/packages/client/ui-permission-presets/README.md @@ -27,6 +27,8 @@ Choose permission presets for the current Web session or future sessions. Genera Mount this plugin alongside the settings, commands, and conversation packages. General settings receives the future-default row; the composer receives the `conversation.input.permission` control, and bare `/permission` opens the slash picker. Current-session controls require both the Session projection and a complete catalog snapshot. A permission-less composition exposes neither current-session controls nor the Settings row. +In narrow browser settings, the default-permission label uses a smaller gutter before its control. Windows and macOS desktop windows retain the standard spacing. + ### The picker A pick submits the `/permission ` command line. The argument-bearing form (`/permission ` typed directly) still switches directly; the decoration replaces only the bare invocation. The built-in labels are `Read Only`, `Workspace Write`, `Full access`, and `Auto review` in English and `仅可查看`, `工作区内修改`, `完全权限`, and `自动审查` in Chinese. Explicit host labels remain unchanged, unknown kebab-case names render in title case, and `auto` carries an `EXP` badge in menu options plus an experimental-risk confirmation. The selected composer control shows the mode without the badge. `custom` is display state, never a target. diff --git a/packages/client/ui-permission-presets/README.zh.md b/packages/client/ui-permission-presets/README.zh.md index df37cea7ec..d8c4b63854 100644 --- a/packages/client/ui-permission-presets/README.zh.md +++ b/packages/client/ui-permission-presets/README.zh.md @@ -27,6 +27,8 @@ kind: "package-reference" 将本插件与 settings、commands 和 conversation 包一同挂载。通用设置获得未来默认值行；composer 获得 `conversation.input.permission` 控件，裸 `/permission` 打开 slash 选择器。当前会话控件同时要求 Session 投影和完整目录快照。不提供权限功能的装配既不公开当前会话控件，也不公开设置行。 +窄屏浏览器设置中，默认权限标签与控件的间距缩小；Windows 和 macOS 桌面窗口保留标准间距。 + ### 选择器 选中即提交 `/permission ` 命令行。带参形式（直接键入 `/permission `）仍直接切换；装饰只替换裸调用。内置标签在英文界面中是 `Read Only`、`Workspace Write`、`Full access` 和 `Auto review`，在中文界面中是「仅可查看」「工作区内修改」「完全权限」和「自动审查」。显式 host 标签保持原样，未知 kebab-case 名称渲染为 Title Case；`auto` 在菜单选项中带有 `EXP` 标记，并在可见选择时要求实验风险确认。选中后的 composer 控件显示模式，不展示该标记。`custom` 只是显示状态，绝非目标。 diff --git a/packages/client/ui-permission-presets/src/client/PermissionRow.module.css b/packages/client/ui-permission-presets/src/client/PermissionRow.module.css index 32c6653554..e3d9b76252 100644 --- a/packages/client/ui-permission-presets/src/client/PermissionRow.module.css +++ b/packages/client/ui-permission-presets/src/client/PermissionRow.module.css @@ -17,6 +17,14 @@ padding-right: 48px; } +/* Narrow settings panel: the 48px gutter separates the label from its control + across a wide row and only squeezes the label here. */ +@media (max-width: 767px) { + :global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .rowText { + padding-right: 16px; + } +} + .title { font-size: 14px; font-weight: 400; diff --git a/packages/client/ui-primitives/README.i18n.yaml b/packages/client/ui-primitives/README.i18n.yaml index c4b3fe6eb0..080d24074b 100644 --- a/packages/client/ui-primitives/README.i18n.yaml +++ b/packages/client/ui-primitives/README.i18n.yaml @@ -21,11 +21,11 @@ en: cb874a0ca53a6747 zh: 31179193dd1d6e12 /deepseek-ai-dsh-client-ui-primitives/use-this-package/controls-and-icons: - en: 35403eb2a55cc77d - zh: 8f4466f7e15ae473 + en: fff68b60f4abdc7e + zh: 5cf5952ec78f7f91 /deepseek-ai-dsh-client-ui-primitives/use-this-package/rendering-agent-output: - en: 3a31ad8de6dd0af8 - zh: 6b22881a929c33df + en: 629f57d60fe5cce1 + zh: 5263447a14c21d61 /deepseek-ai-dsh-client-ui-primitives/use-this-package/localizing-copy: en: 4aef65dea11de083 zh: abc22cd7c65cdf38 @@ -45,8 +45,8 @@ en: 45f4cd1ef96bb6d2 zh: f264d25b780ad1dc /deepseek-ai-dsh-client-ui-primitives/further-exploration: - en: e82b713cdb2f954b - zh: a877f34b148f433f + en: abbbdbc9a7540743 + zh: cf5bbeaedb3696d0 /deepseek-ai-dsh-client-ui-primitives/model-experience: en: 3120df665299c634 zh: 1d9f365d091d0d2a diff --git a/packages/client/ui-primitives/README.md b/packages/client/ui-primitives/README.md index 4bfca87305..48e3967d34 100644 --- a/packages/client/ui-primitives/README.md +++ b/packages/client/ui-primitives/README.md @@ -94,15 +94,17 @@ The catalog above lists what each export is for; this section covers the behavio -`HoverCardGroup` owns private state for one mounted physical list. A `HoverCard` with `grouped` shares the first actually displayed card's dwell: subsequent cards replace the current card immediately during the same pointer interaction. The list and its active portaled card form one pointer interaction: the pointer may enter the card to read or copy, then return to another list item for immediate replacement. After the pointer leaves both, the shared dwell resets when the active card closes through its existing pointer-grace and close lifecycle; the group adds no separate timer. Leaving a list with no active card resets the dwell immediately. Opening an inline card by keyboard focus while the pointer is outside the list does not warm the next pointer visit. Exclusive display includes fading previews: ordinary preview dismissal retains its fade, but a group replacement removes the previous card immediately. Cards without `grouped` remain independent. +`HoverCardGroup` owns private state for one mounted physical list. A `HoverCard` with `grouped` shares the first actually displayed card's dwell: subsequent cards replace the current card immediately during the same pointer interaction. The list and its active portaled card form one pointer interaction: the pointer may enter the card to read or copy, then return to another list item for immediate replacement. After the pointer leaves both, the shared dwell resets when the active card closes through its existing pointer-grace and close lifecycle; the group adds no separate timer. Leaving a list with no active card resets the dwell immediately. Opening an inline card by keyboard focus while the pointer is outside the list does not warm the next pointer visit. Exclusive display includes fading previews: ordinary preview dismissal retains its fade, but a group replacement removes the previous card immediately. Cards without `grouped` remain independent. `as="span"` preserves an inline text container. ### Rendering agent output +The pure Markdown helper `formatQuoteText` normalizes CRLF and CR line endings, then prefixes each line with `> `. + The nearest `MarkdownDelegateProvider` supplies optional `openExternalLink` and `openFile` navigation callbacks. Nested providers replace the enclosing capabilities, and callback changes reach already-rendered links without rebuilding Markdown. Its `openFile` makes local Markdown links clickable after settlement. Absolute and workspace-relative paths support percent escapes and `#L24` / `#L24-L30` fragments; ranges open at their first line. Literal `?` and `#` in filenames must be percent-encoded. The tooltip uses the decoded path and supplies the accessible name when the label is empty. The callback receives the decoded path and optional line, while the renderer preserves the label and displays a file icon. Without a callback, local links remain text. URL schemes, queries, unsupported fragments, and malformed destinations never reach the file opener. `MarkdownText` renders untrusted GFM and TeX math, blocks unsafe links and images, and can turn resolved file mentions into explicit controls. Strikethrough requires `~~`; a single `~`, as in `10~20`, stays literal. A surrounding `MarkdownDelegateProvider` receives sanitized HTTP(S) URLs from ordinary clicks; modified clicks and links outside a provider retain native external-anchor behavior. `omitHtml` renders raw HTML as nothing instead of literal text, for documents written for HTML renderers. When the owner passes a `pathImages` vocabulary, image destinations that are local media paths rewrite to displayable URLs on settled renders only (the same streaming gate as file mentions); without a vocabulary, local destinations remain inert alt text. Rewritten images accept HTTP(S), data, blob, and the Desktop `dsh-app://app/api/file`, `dsh-app://app/api/plugin-market/detail-file`, and `dsh-app://app/api/plugin-manager/detail-file` routes; authored Desktop URLs remain inert. A load or decode failure replaces the image with its authored alt text, or the original destination when alt is empty; `fileImages` additionally supplies a localized failure prefix. Changing the image source permits a fresh load. While a reply streams, it freezes completed blocks, advances a top-level open fence by completed lines, and highlights that fence from saved Shiki grammar state. Completed token lines enter fixed-size React groups, so later chunks reconcile only the growing group; an unchanged fence retains that DOM when the final full parse resolves cross-document syntax. `TerminalBlock`, `ReadBlock`, `DiffBlock`, `SearchBlock`, and `WebBlock` render the matching tool-result intent with copy controls, overflow handling, and ANSI processing where applicable. `JsonTree` and `JsonBlock` inspect JSON values read-only, while `UserTextRun` renders uninterpreted text and `ReferenceChip` renders business-resolved labels. An explicit `onActivate` makes a chip a keyboard-accessible button; repeated pointer clicks and an existing text selection do not activate it, while keyboard activation remains available. Labels inherit their host’s wrapping policy. Recognition and JSON transforms belong to [ui-conversation](../ui-conversation/README.md#sent-user-text). -`MarkdownText` defaults to `variant="body"`. Use `variant="compact"` for secondary content: its 13px text and 20px line height follow the content-size setting, all heading levels use the same size with weight 600, and paragraphs and lists use tighter spacing. Text, links, and code keep the tertiary color; dotted underlines distinguish links. Code headers scroll with their blocks. Tables and math stay enabled at the surrounding text size and scroll horizontally within the available width. Both variants share the parser and streaming cache. +`MarkdownText` defaults to `variant="body"`. Use `variant="compact"` for secondary content: its 13px text and 20px line height follow the content-size setting, all heading levels use the same size with weight 600, and paragraphs and lists use tighter spacing. Text, links, and code keep the tertiary color; dotted underlines distinguish links. Code headers scroll with their blocks. Tables and math stay enabled at the surrounding text size and scroll horizontally within the available width. Both variants share the parser and streaming cache. `textInteractionSource` marks its existing root as a source for text selection interactions. `CodeBlock.toolbarLabels` enables the shared code-card header and spacing. `ReadBlock` and `DiffBlock` use the same header: tertiary-colored language and filename text, secondary-colored copy and wrap icons, and hover or keyboard-focus tooltips. Missing or unsupported languages use the owner’s localized code-block title; mixed-language diffs use that title too. Code cards share typography and content insets; their headers and bodies use the same background in both themes. Read gutters fit the largest returned line number, and diff fills cover the full scrollable row. The wrap toggle keeps a fixed accessible name and exposes its state through `aria-pressed`; its tooltip describes the next action. Wrapping is local to each mounted card and never changes copied text; code fences start wrapped, while reads and diffs preserve source columns until wrapping is enabled. Compact Markdown shares this toolbar, spacing, and code typography while retaining monochrome text. With `toolbarLabels`, source previews can pass `wrap` to follow their owner’s preference and show only the language and copy icon; owner CSS retains the source layout. @@ -110,7 +112,7 @@ The nearest `MarkdownDelegateProvider` supplies optional `openExternalLink` and `JsonTree` clamps collapsed strings to `collapsedStringLines` (three by default). Expanded strings show raw text, retain sibling commas, and fit within the window and outer scrolling containers. Resize and ancestor-scroll events update that limit. Row copy feedback updates independently of JSON value rendering; pending clipboard writes cannot update a different row or an unmounted tree. -`ImageLightbox` is the shared original-image modal with focus restoration and Escape dismissal. Like `Modal`, its mask leaves the Windows caption unpainted, and its close control sits 20px below the caption. The internal thumbnail renderer receives loading/failure labels from its owner. `HoverCard.inline` keeps a file link in the text flow and uses the shared menu material, keyboard-visible focus, and placement above or below the anchor without covering it. Escape closes an open thumbnail even when focus is elsewhere; subsequent Escape presses reach the owner. `MarkdownDelegateProvider.fileImages` supplies a decoded-path resolver and complete image labels: settled image links gain hover previews, and standalone images gain lightbox activation. Image-only anchors retain their single navigation target. The parser recovers only complete, unescaped, standalone local image references with bare spaces and an unambiguous supported image suffix; code and ambiguous destinations remain literal. +`ImageLightbox` is the shared original-image modal with focus restoration and Escape dismissal. Like `Modal`, its mask leaves the Windows caption unpainted, and its close control sits 20px below the caption. The internal thumbnail renderer receives loading/failure labels from its owner. `HoverCard.inline` keeps a file link in the text flow and uses the shared menu material, keyboard-visible focus, and placement above or below the anchor without covering it. Its transparent hover region connects the anchor to the panel across the visual gap, so crossing the gap does not activate content beneath it. Escape closes an open thumbnail even when focus is elsewhere; subsequent Escape presses reach the owner. `MarkdownDelegateProvider.fileImages` supplies a decoded-path resolver and complete image labels: settled image links gain hover previews, and standalone images gain lightbox activation. Image-only anchors retain their single navigation target. The parser recovers only complete, unescaped, standalone local image references with bare spaces and an unambiguous supported image suffix; code and ambiguous destinations remain literal. ### Localizing copy @@ -184,6 +186,8 @@ These pages place the atoms in the client stack and the design system. ----- +`QuotePreview` shares the compact quote excerpt and clipped-only inline HoverCard between composers and sent messages. The popover sizes to its text up to 300px and stays within the viewport. Both surfaces display the exact text; editable drafts may supply a localized whole-quote removal action. Quotes opt into the nearest `HoverCardGroup` for exclusive preview display. The primitive performs no recognition or navigation. + ## Model Experience diff --git a/packages/client/ui-primitives/README.zh.md b/packages/client/ui-primitives/README.zh.md index e5ebe6f486..92b794e0ce 100644 --- a/packages/client/ui-primitives/README.zh.md +++ b/packages/client/ui-primitives/README.zh.md @@ -94,15 +94,17 @@ kind: "package-library" -`HoverCardGroup` 为一个已挂载的物理列表持有私有状态。设置 `grouped` 的 `HoverCard` 共享首张实际显示卡片的等待：在同一次指针交互中，后续卡片立即替换当前卡片。列表与其当前活动的 portal 卡片构成一次指针交互：指针可进入卡片阅读或复制，再返回其他列表项并立即替换卡片。指针离开两者后，共享等待在活动卡片通过原有指针宽限及关闭生命周期关闭时重置；分组不另设计时器。列表没有活动卡片时，指针离开便立即重置等待。指针位于列表外时，通过键盘聚焦打开行内卡片不会让下一次指针进入跳过等待。互斥显示也包括正在淡出的预览：普通预览关闭保留淡出，但分组内替换会立即移除前一张卡片。未设置 `grouped` 的卡片保持独立。 +`HoverCardGroup` 为一个已挂载的物理列表持有私有状态。设置 `grouped` 的 `HoverCard` 共享首张实际显示卡片的等待：在同一次指针交互中，后续卡片立即替换当前卡片。列表与其当前活动的 portal 卡片构成一次指针交互：指针可进入卡片阅读或复制，再返回其他列表项并立即替换卡片。指针离开两者后，共享等待在活动卡片通过原有指针宽限及关闭生命周期关闭时重置；分组不另设计时器。列表没有活动卡片时，指针离开便立即重置等待。指针位于列表外时，通过键盘聚焦打开行内卡片不会让下一次指针进入跳过等待。互斥显示也包括正在淡出的预览：普通预览关闭保留淡出，但分组内替换会立即移除前一张卡片。未设置 `grouped` 的卡片保持独立。`as="span"` 保留行内文本容器。 ### 渲染 agent 输出 +纯 Markdown 工具 `formatQuoteText` 规范化 CRLF 和 CR 换行符，再为每行添加 `> ` 前缀。 + 最近的 `MarkdownDelegateProvider` 提供可选的 `openExternalLink` 和 `openFile` 导航回调。嵌套 Provider 替换外层能力，回调变化无需重新构建 Markdown 即可到达已渲染链接。其 `openFile` 使本地 Markdown 链接在落定后可点击。绝对路径和工作区相对路径支持百分号转义以及 `#L24` / `#L24-L30` 片段；范围定位到起始行。文件名中的字面 `?` 和 `#` 必须百分号编码。悬停提示使用解码后的路径，并在标签为空时提供可访问名称。回调接收解码后的路径和可选行号，渲染器保留标签并显示文件图标。不传回调时，本地链接仍为文本。URL 协议、查询串、不支持的片段及格式错误的目标不会传给文件打开器。 `MarkdownText` 渲染不可信的 GFM 与 TeX 公式、阻止不安全的链接与图片，并可把已解析的文件提及转换为显式控件。删除线需要 `~~`；单个 `~`（如 `10~20`）保持字面文本。外层 `MarkdownDelegateProvider` 会接收普通点击产生的已净化 HTTP(S) URL；带修饰键的点击和 Provider 外的链接保留原生外部 anchor 行为。`omitHtml` 不渲染原始 HTML，而不是将其显示为原样文本，用于为 HTML 渲染器编写的文档。当 owner 传入 `pathImages` 词表时，本地媒体路径的图片目标只在落定渲染阶段重写为可展示 URL（与 file mentions 相同的流式门）；不传词表时本地目标保持惰性 alt 文本。重写后的图片支持 HTTP(S)、data、blob 及桌面端 `dsh-app://app/api/file`、`dsh-app://app/api/plugin-market/detail-file` 与 `dsh-app://app/api/plugin-manager/detail-file` 路由；正文直接书写的桌面端 URL 仍保持惰性。加载或解码失败后，图片替换为作者的 alt 文本；alt 为空时显示原始目标路径；`fileImages` 还提供本地化的失败提示前缀。图片源变化后可重新加载。回复流式输出时，它冻结已完成的块、按已完成行推进顶层未闭合 fence，并从保存的 Shiki grammar state 为该 fence 增量高亮。已完成的 token 行进入固定大小的 React 分组，后续分片只 reconcile 正在增长的分组；最终全量解析解决跨文档语法时，未变化的 fence 会保留该 DOM。`TerminalBlock`、`ReadBlock`、`DiffBlock`、`SearchBlock` 与 `WebBlock` 把对应的工具结果意图渲染为带复制控件、溢出处理及适用时 ANSI 处理的卡片。`JsonTree` 与 `JsonBlock` 以只读方式检查 JSON 值；`UserTextRun` 渲染不做解析的文本，`ReferenceChip` 渲染业务已解析的标签。显式传入 `onActivate` 后，胶囊成为可由键盘操作的按钮；重复指针点击和已有文本选区不触发激活，键盘激活仍然可用。标签继承所属容器的换行规则。识别和 JSON 变换由 [ui-conversation](../ui-conversation/README.zh.md#sent-user-text) 负责。 -`MarkdownText` 默认为 `variant="body"`。次级内容使用 `variant="compact"`：其 13px 字号与 20px 行高跟随内容字号设置，各级标题保持同一字号并使用 600 字重，段落与列表采用更紧凑的间距。正文、链接和代码均保持 tertiary 颜色，以点状下划线区分链接。代码标题栏随代码块滚动。表格和公式仍然启用，使用周围文字的字号，并在可用宽度内横向滚动。两个变体共享解析器与流式缓存。 +`MarkdownText` 默认为 `variant="body"`。次级内容使用 `variant="compact"`：其 13px 字号与 20px 行高跟随内容字号设置，各级标题保持同一字号并使用 600 字重，段落与列表采用更紧凑的间距。正文、链接和代码均保持 tertiary 颜色，以点状下划线区分链接。代码标题栏随代码块滚动。表格和公式仍然启用，使用周围文字的字号，并在可用宽度内横向滚动。两个变体共享解析器与流式缓存。 `textInteractionSource` 将已有根元素标记为文本选区交互的来源。 `CodeBlock.toolbarLabels` 启用共享代码卡片的标题栏和间距。`ReadBlock` 与 `DiffBlock` 使用相同的标题栏：tertiary 色的语言名称与文件名、secondary 色的复制与换行图标，以及悬停或键盘聚焦时的提示。语言缺失或不受支持时显示调用方提供的本地化代码块标题；混合语言的 Diff 也使用该标题。代码卡片共用字体和内容内边距；在两种主题下，标题栏和正文都使用相同背景。读取卡片的行号栏容纳返回窗口中的最大行号，Diff 底色覆盖完整可滚动行。换行按钮保留固定的无障碍名称，以 `aria-pressed` 表达状态；提示文本说明下一步操作。换行设置仅属于当前挂载的卡片，不改变复制的文本；代码围栏默认换行，读取和差异卡片则在启用换行前保留源码列位置。紧凑 Markdown 共用此工具栏、间距和代码字体排版，同时保留单色文本。源码预览传入 `toolbarLabels` 后，可用 `wrap` 跟随所属视图的换行设置，仅显示语言和复制图标；所属视图的 CSS 保留源码布局。 @@ -110,7 +112,7 @@ kind: "package-library" `JsonTree` 把折叠字符串限制为 `collapsedStringLines` 行（默认三行）。展开后显示原始文本、保留同级逗号，并限制在窗口与外层滚动容器内；尺寸变化和祖先滚动事件会更新此限制。行复制反馈独立于 JSON 值渲染更新；尚未完成的剪贴板写入不会更新另一行或已卸载的树。 -`ImageLightbox` 是共享原图浮层，支持焦点恢复与 Esc 关闭。与 `Modal` 相同，其遮罩不覆盖 Windows 顶栏，关闭按钮位于顶栏下方 20px。包内缩略图渲染器由调用方提供加载及失败文案。`HoverCard.inline` 使文件链接保持在文本流内，并使用共享菜单材质、键盘可见焦点，并在锚点上方或下方定位而不遮挡锚点。即使焦点位于其他位置，Esc 也会关闭已打开的缩略图；后续 Esc 按键继续传给 owner。`MarkdownDelegateProvider.fileImages` 提供已解码路径解析器与完整图片文案：消息落定后的图片链接支持悬停预览，独立图片支持点击放大。仅包含图片的链接保留单一导航目标。解析器仅恢复完整、未转义、独立成段且带明确图片扩展名的含裸空格本地图片引用；代码与有歧义的目标保持原文。 +`ImageLightbox` 是共享原图浮层，支持焦点恢复与 Esc 关闭。与 `Modal` 相同，其遮罩不覆盖 Windows 顶栏，关闭按钮位于顶栏下方 20px。包内缩略图渲染器由调用方提供加载及失败文案。`HoverCard.inline` 使文件链接保持在文本流内，并使用共享菜单材质、键盘可见焦点，并在锚点上方或下方定位而不遮挡锚点。即使焦点位于其他位置，Esc 也会关闭已打开的缩略图；后续 Esc 按键继续传给 owner。`MarkdownDelegateProvider.fileImages` 提供已解码路径解析器与完整图片文案：消息落定后的图片链接支持悬停预览，独立图片支持点击放大。仅包含图片的链接保留单一导航目标。解析器仅恢复完整、未转义、独立成段且带明确图片扩展名的含裸空格本地图片引用；代码与有歧义的目标保持原文。 透明悬停区域连接锚点与弹层之间的视觉空隙，鼠标经过时不会激活下方内容。 ### 本地化文案 @@ -184,6 +186,8 @@ kind: "package-library" ----- +`QuotePreview` 在 composer 与已发送消息之间共享紧凑 quote 摘录和仅截断时显示的行内 HoverCard。原文弹层按文本内容确定宽度，最大为 300px，并限制在视口内。两处均展示原文；可编辑草稿可以提供本地化的整条 quote 删除操作。quote 加入最近的 `HoverCardGroup`，使原文弹层互斥显示。该 primitive 不负责识别或导航。 + ## 模型体验 diff --git a/packages/client/ui-primitives/src/HoverCard.module.css b/packages/client/ui-primitives/src/HoverCard.module.css index 50c62fa828..5679f43bd3 100644 --- a/packages/client/ui-primitives/src/HoverCard.module.css +++ b/packages/client/ui-primitives/src/HoverCard.module.css @@ -88,3 +88,16 @@ backdrop-filter: var(--dsw-menu-backdrop-filter); box-shadow: var(--dsw-elevation-panel); } + +.fitContent { + width: max-content; +} + +.portal { + display: contents; +} + +.bridge { + position: fixed; + z-index: 100; +} diff --git a/packages/client/ui-primitives/src/HoverCard.tsx b/packages/client/ui-primitives/src/HoverCard.tsx index e30d671c36..157cf35f06 100644 --- a/packages/client/ui-primitives/src/HoverCard.tsx +++ b/packages/client/ui-primitives/src/HoverCard.tsx @@ -16,6 +16,15 @@ const INLINE_PREVIEW_WIDTH = 300 const ANCHOR_GAP = 8 const VIEWPORT_MARGIN = 8 +interface CardPosition { + left: number + top: number + width?: number + maxWidth?: number + maxHeight?: number + bridge?: { left: number; top: number; width: number; height: number } +} + /** * Render an anchor with a hover-triggered preview card independently of nested tooltips. * Touch entry does not open a preview or intercept the anchor's action. @@ -27,6 +36,8 @@ const VIEWPORT_MARGIN = 8 * with 24px side insets, a 420px height cap, frame-top clearance, and 100ms opacity transitions. * @param props.widthAnchorRef - optional element whose width and horizontal position size the preview. * @param props.inline - keep the anchor in prose; show a contained preview on hover or keyboard focus. + * Its hover region connects the anchor and preview across the visual gap. + * @param props.fitContent - size an inline card to its content within the usual width cap. * @param props.disabled - suppress opening; turning true dismisses an open card. * @param props.grouped - share first-display dwell across the surrounding list and active portal. * Group replacement removes the previous card immediately, including a fading preview. @@ -38,11 +49,12 @@ const VIEWPORT_MARGIN = 8 */ export function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, grouped = false, - copyText, copyLabel, copiedLabel, variant = 'compact', widthAnchorRef, inline = false, + copyText, copyLabel, copiedLabel, variant = 'compact', widthAnchorRef, inline = false, fitContent = false, }: { anchor: ReactNode /** Inline media preview using the shared menu material and keyboard focus. */ inline?: boolean + fitContent?: boolean content: ReactNode openDelayMs?: number disabled?: boolean @@ -56,6 +68,7 @@ export function HoverCard({ })) { const rootRef = useRef(null) const cardRef = useRef(null) + const portalRef = useRef(null) const timerRef = useRef | null>(null) const copyTimerRef = useRef | null>(null) const copyHeightRef = useRef(null) @@ -65,7 +78,7 @@ export function HoverCard({ const [phase, setPhase] = useState<'closed' | 'open' | 'closing'>('closed') const open = phase !== 'closed' const closing = phase === 'closing' - const [pos, setPos] = useState<{ left: number; top: number; width?: number; maxHeight?: number } | null>(null) + const [pos, setPos] = useState(null) const positioned = pos !== null const [copied, setCopied] = useState(false) const parentGroup = useContext(HoverCardGroupContext) @@ -107,8 +120,8 @@ export function HoverCard({ const groupVisible = open && positioned useLayoutEffect(() => { if (!groupVisible || group === null) return - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- The visible card's ref is attached before layout effects. - group.shown(groupOwner, dismissImmediately, cardRef.current!) + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- The visible portal's ref is attached before layout effects. + group.shown(groupOwner, dismissImmediately, portalRef.current!) return () => { group.release(groupOwner) } }, [group, groupOwner, groupVisible, dismissImmediately]) @@ -180,17 +193,25 @@ export function HoverCard({ } if (inline) { const height = Math.max(h, cardRef.current?.scrollHeight ?? 0) - const width = Math.max(0, Math.min(INLINE_PREVIEW_WIDTH, window.innerWidth - VIEWPORT_MARGIN * 2)) + const maxWidth = Math.max(0, Math.min(INLINE_PREVIEW_WIDTH, window.innerWidth - VIEWPORT_MARGIN * 2)) + const width = fitContent ? Math.min(cardRef.current?.offsetWidth ?? maxWidth, maxWidth) : maxWidth const topMargin = overlayTopMargin(VIEWPORT_MARGIN) const belowTop = Math.max(topMargin, r.bottom + ANCHOR_GAP) const above = Math.max(0, r.top - ANCHOR_GAP - topMargin) const below = Math.max(0, window.innerHeight - belowTop - VIEWPORT_MARGIN) const onTop = height > below && above > below const maxHeight = onTop ? above : below + const left = Math.max(VIEWPORT_MARGIN, Math.min(r.left, window.innerWidth - width - VIEWPORT_MARGIN)) + const top = onTop ? r.top - ANCHOR_GAP - Math.min(height, maxHeight) : belowTop + const bridgeTop = onTop ? top + Math.min(height, maxHeight) : r.bottom + const bridgeLeft = Math.min(r.left, left) setPos({ - left: Math.max(VIEWPORT_MARGIN, Math.min(r.left, window.innerWidth - width - VIEWPORT_MARGIN)), - top: onTop ? r.top - ANCHOR_GAP - Math.min(height, maxHeight) : belowTop, - width, maxHeight, + left, top, ...fitContent ? {} : { width }, maxWidth, maxHeight, + bridge: { + left: bridgeLeft, top: bridgeTop, + width: Math.max(r.right, left + width) - bridgeLeft, + height: Math.max(0, (onTop ? r.top : top) - bridgeTop), + }, }) return } @@ -209,7 +230,7 @@ export function HoverCard({ window.removeEventListener('scroll', place, true) window.removeEventListener('resize', place) } - }, [open, variant, widthAnchorRef, positioned, inline]) + }, [open, variant, widthAnchorRef, positioned, inline, fitContent]) // The first placement ran before the card mounted (height read 0): once the // card's real height is measurable, correct the bottom-edge clamp. The @@ -240,7 +261,7 @@ export function HoverCard({ const copyable = copyText !== undefined const dismissFromAnchor = (event: SyntheticEvent): void => { // Portal content is a React child, but its clicks and text selection do not activate the anchor. - if (cardRef.current?.contains(event.target as Node)) return + if (portalRef.current?.contains(event.target as Node)) return clearTimer() cancelClose() close() @@ -248,10 +269,11 @@ export function HoverCard({ const card = open && pos !== null && (
{anchor} {open && copyable && {copied ? copiedLabel : ''}} - {card !== false && createPortal(card, document.body)} + {card !== false && createPortal( + + {pos.bridge !== undefined && } + {card} + , document.body, + )} ) } diff --git a/packages/client/ui-primitives/src/HoverCardGroup.tsx b/packages/client/ui-primitives/src/HoverCardGroup.tsx index 163202d813..a218110e1c 100644 --- a/packages/client/ui-primitives/src/HoverCardGroup.tsx +++ b/packages/client/ui-primitives/src/HoverCardGroup.tsx @@ -16,9 +16,14 @@ export const HoverCardGroupContext = createContext(null) * Share first-display dwell across a list and its active portal, including the card's existing pointer grace. * @param props.children - list contents, including opted-in HoverCards. * @param props.className - classes for the physical list container. + * @param props.as - physical container tag; use span to preserve inline text layout. * @returns the list container and its private hover coordinator. */ -export function HoverCardGroup({ children, className }: { children: ReactNode; className?: string }) { +export function HoverCardGroup({ children, className, as: Container = 'div' }: { + children: ReactNode + className?: string | undefined + as?: 'div' | 'span' +}) { const [group] = useState(() => { let pointer: 'outside' | 'list' | 'card' = 'outside' let warm = false @@ -52,7 +57,7 @@ export function HoverCardGroup({ children, className }: { children: ReactNode; c }) return ( -
{ const overCard = group.containsCard(event.target) @@ -66,7 +71,7 @@ export function HoverCardGroup({ children, className }: { children: ReactNode; c }} > {children} -
+ ) } diff --git a/packages/client/ui-primitives/src/QuotePreview.module.css b/packages/client/ui-primitives/src/QuotePreview.module.css new file mode 100644 index 0000000000..1418d8393c --- /dev/null +++ b/packages/client/ui-primitives/src/QuotePreview.module.css @@ -0,0 +1,101 @@ +.quote { + display: inline-flex; + align-items: baseline; + gap: 4px; + box-sizing: border-box; + max-width: min(80%, 300px); + margin: 0; + padding: 0; + vertical-align: baseline; + color: var(--dsw-alias-state-business-primary); + font-size: var(--dsh-content-font-size, 14px); + line-height: calc(20px + var(--dsh-content-font-delta, 0px)); +} + +.popoverText { + display: block; + padding: 8px 10px; + color: var(--dsw-alias-label-primary); + font-size: 14px; + line-height: 20px; + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.source { + min-width: 0; + padding: 0; + border: none; + outline: none; + background: none; + color: inherit; + font: inherit; + line-height: inherit; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.marker, +.remove { + display: grid; + place-items: center; + align-self: center; + flex: none; + width: 16px; + height: 16px; + padding: 0; + color: inherit; + user-select: none; +} + +.marker { + pointer-events: none; +} + +.remove { + border: none; + border-radius: 50%; + corner-shape: round; + background: transparent; + cursor: pointer; +} + +.quoteMark, +.closeMark { + grid-area: 1 / 1; + transition: opacity 120ms ease; +} + +.closeMark { + opacity: 0; +} + +.quote[data-removable]:focus-within .quoteMark { + opacity: 0; +} + +.quote[data-removable]:focus-within .closeMark { + opacity: 1; +} + +@media (hover: hover) { + .quote[data-removable]:hover .quoteMark { + opacity: 0; + } + + .quote[data-removable]:hover .closeMark { + opacity: 1; + } +} + +@media (hover: none) { + .quote[data-removable] .quoteMark { + opacity: 0; + } + + .quote[data-removable] .closeMark { + opacity: 1; + } +} diff --git a/packages/client/ui-primitives/src/QuotePreview.tsx b/packages/client/ui-primitives/src/QuotePreview.tsx new file mode 100644 index 0000000000..4cc56d2cec --- /dev/null +++ b/packages/client/ui-primitives/src/QuotePreview.tsx @@ -0,0 +1,103 @@ +/** Shared compact presentation for draft and sent text quotes. */ + +import { useLayoutEffect, useRef, useState } from 'react' +import type { JSX, MouseEvent as ReactMouseEvent } from 'react' +import { IconCloseOutlineRegular } from './icons/index.tsx' +import { HoverCard } from './HoverCard.tsx' +import css from './QuotePreview.module.css' + +function QuoteMarkIcon({ className }: { readonly className?: string | undefined }) { + return ( + + + + + + + ) +} + +/** Optional whole-quote removal control supplied by an editable owner. */ +export interface QuotePreviewRemoval { + /** Localized accessible name for the removal button. */ + readonly label: string + /** Remove the complete owning quote node. */ + readonly onRemove: () => void +} + +/** Presentation inputs for one compact quote excerpt. */ +export interface QuotePreviewProps { + /** Exact selected text rendered inline and exposed in a popover while clipped. */ + readonly text: string + /** Composer-only removal action; omit for inert sent quotes. */ + readonly removal?: QuotePreviewRemoval | undefined +} + +/** + * Render one width-capped quote preview shared by editable drafts and sent messages. + * Clipped excerpts open a content-sized, scrollable popover that fits within the viewport. + * @param props - selected text and optional localized removal action. + * @returns a non-navigating quote preview with a full-text popover only while clipped. + */ +export function QuotePreview({ text, removal }: QuotePreviewProps): JSX.Element { + const sourceRef = useRef(null) + const [truncated, setTruncated] = useState(false) + useLayoutEffect(() => { + const source = sourceRef.current + /* v8 ignore next -- the ref is attached before layout effects run. */ + if (source === null) return + const measure = () => { + const clipped = source.scrollWidth > source.clientWidth + setTruncated(clipped) + } + measure() + if (typeof ResizeObserver === 'undefined') return + const observer = new ResizeObserver(measure) + observer.observe(source) + return () => { observer.disconnect() } + }, [text]) + const remove = (event: ReactMouseEvent): void => { + event.preventDefault() + event.stopPropagation() + removal?.onRemove() + } + const preview = ( + + {removal === undefined + ? ( + + + + ) + : ( + + )} + {text} + + ) + return ( +