Session-log upload policy"] pkg_deepseek_llm_api_extensions["deepseek-llm-api-extensions"] svc_deepseekLlmApiExtensions["ctx.deepseekLlmApiExtensions
Official DeepSeek request extensions"] - pkg_session_log_deepseek["session-log-deepseek"] pkg_plugin_package_inventory_deepseek["plugin-package-inventory-deepseek"] pkg_token_meter["token-meter"] svc_tokenMeter["ctx.tokenMeter
Replay token measurement"] @@ -312,6 +313,8 @@ flowchart LR pkg_cordis_host_runner["cordis-host-runner"] svc_dynamicCordisRunner["ctx.dynamicCordisRunner
Dynamic Cordis package host runner"] svc_cordisInspect["ctx.cordisInspect
Dynamic Cordis inspect registry"] + pkg_experimental_liveshare["experimental-liveshare"] + svc_liveshareShares["ctx.liveshareShares
Owner share management Remote"] pkg_action_cards --> svc_actionCards pkg_agent --> svc_agents pkg_agent_default_model --> svc_agentDefaultModel @@ -369,6 +372,7 @@ flowchart LR pkg_experimental_forge --> svc_forge pkg_experimental_forge_github --> svc_forge pkg_experimental_forge_session --> svc_forgeSession + pkg_experimental_liveshare --> svc_liveshareShares pkg_experimental_ptc_runtime_python --> svc_ptcRuntime pkg_experimental_speech_to_text --> svc_speechToText pkg_experimental_speech_to_text_sensevoice --> svc_speechToText @@ -419,6 +423,7 @@ flowchart LR pkg_schedule --> svc_schedule pkg_session --> svc_sessions pkg_session_log_deepseek --> svc_deepseekLlmApiExtensions + pkg_session_log_deepseek --> svc_sessionLogDeepSeek pkg_session_persistence --> svc_sessionPersistence pkg_session_persistence_jsonl --> svc_sessionPersistence pkg_session_projection --> svc_sessionProjections @@ -669,6 +674,7 @@ flowchart LR | `ctx.attachments` | `seam` | [`attachment`](../packages/attachment/attachment) | [`attachment-local`](../packages/attachment/attachment-local) | [`api-session-controller`](../packages/api/session-controller), [`tool-fs`](../packages/fs/tool-fs), [`llm-pi-ai`](../packages/llm/llm-pi-ai), [`llm-deepseek`](../packages/llm/llm-deepseek) | - | The host commits accepted images before session events; provider adapters resolve authorized durable references into provider-native content. | | `ctx.fileUploads` | `core` | [`client-file-upload`](../packages/client/file-upload) | - | [`api-session-controller`](../packages/api/session-controller) | - | Owns streaming intake, durable storage, and staged receipt lifetime; the Session controller binds receipts to accepted submissions. | | `ctx.llm` | `seam` | [`llm`](../packages/llm/llm) | [`llm-deepseek`](../packages/llm/llm-deepseek), [`llm-pi-ai`](../packages/llm/llm-pi-ai), [`llm-replay`](../packages/test-support/llm-replay) | [`agent-loop`](../packages/core/agent-loop), [`compaction-basic`](../packages/compaction/compaction-basic) | - | Adapters register provider implementations; the loop and compaction call the provider-neutral stream service. | +| `ctx.sessionLogDeepSeek` | `core` | [`session-log-deepseek`](../packages/session/session-log-deepseek) | - | - | - | Plugins register caller-owned exclusions before the canonical Session-log request contribution is prepared; unmatched requests use normal upload eligibility. | | `ctx.deepseekLlmApiExtensions` | `seam` | [`deepseek-llm-api-extensions`](../packages/llm/deepseek-llm-api-extensions) | [`session-log-deepseek`](../packages/session/session-log-deepseek), [`plugin-package-inventory-deepseek`](../packages/llm/plugin-package-inventory-deepseek) | [`llm-deepseek`](../packages/llm/llm-deepseek) | - | Plugins prepare independent top-level fields; the official adapter merges them and commits their delivery state after HTTP acceptance. | | `ctx.tokenMeter` | `core` | [`token-meter`](../packages/llm/token-meter) | - | [`compaction-basic`](../packages/compaction/compaction-basic) | - | Owns isolated per-session replay folds; pressure consumers share immutable revisioned measurements. | | `ctx.toolResultPruner` | `core` | [`compaction-tool-result-pruner`](../packages/compaction/compaction-tool-result-pruner) | - | [`compaction-basic`](../packages/compaction/compaction-basic) | - | Rewrites oversized current tool results through replayable single-node surface replacements before summary compaction. | @@ -751,5 +757,6 @@ flowchart LR | `ctx.lsp` | `seam` | [`lsp`](../packages/lsp/lsp) | [`lsp-stdio`](../packages/lsp/lsp-stdio) | [`tool-lsp`](../packages/lsp/tool-lsp) | - | Provider registration and selection plus normalized query execution over exactly four operations; the seam offers no protocol escape hatch, so a backend translates into the normalized request and result. | | `ctx.dynamicCordisRunner` | `core` | [`cordis-host-runner`](../packages/extensions/cordis-host-runner) | - | [`tool-cordis`](../packages/extensions/tool-cordis) | - | Owns the in-memory definition registry, the vm sandbox for host halves, and the request-run round trip; browser pages reach the same service over the wire through its remote namespace. | | `ctx.cordisInspect` | `core` | [`cordis-host-runner`](../packages/extensions/cordis-host-runner) | - | [`tool-cordis`](../packages/extensions/tool-cordis) | - | Registers host inspect providers, mirrors the client provider manifest, and routes client queries through the dynamic Cordis transport. | +| `ctx.liveshareShares` | `service` | [`experimental-liveshare`](../packages/experimental/liveshare) | - | - | - | Publishes the owner share-management operations as one Typert Remote namespace that the owner client face calls; every method delegates to the same operations the same-origin routes used. | Maintenance mode: hybrid: services are discovered from Cordis declarations; interface/implementation/consumer roles are classified in `scripts/gen-doc-graphs.ts` with a completeness guard. diff --git a/docs/capability-seams.zh.md b/docs/capability-seams.zh.md index 4e517bbab6..f434835133 100644 --- a/docs/capability-seams.zh.md +++ b/docs/capability-seams.zh.md @@ -86,9 +86,10 @@ flowchart LR pkg_llm_replay["llm-replay"] pkg_agent_loop["agent-loop"] pkg_compaction_basic["compaction-basic"] + pkg_session_log_deepseek["session-log-deepseek"] + svc_sessionLogDeepSeek["ctx.sessionLogDeepSeek
Session-log upload policy"] pkg_deepseek_llm_api_extensions["deepseek-llm-api-extensions"] svc_deepseekLlmApiExtensions["ctx.deepseekLlmApiExtensions
Official DeepSeek request extensions"] - pkg_session_log_deepseek["session-log-deepseek"] pkg_plugin_package_inventory_deepseek["plugin-package-inventory-deepseek"] pkg_token_meter["token-meter"] svc_tokenMeter["ctx.tokenMeter
Replay token measurement"] @@ -314,6 +315,8 @@ flowchart LR pkg_cordis_host_runner["cordis-host-runner"] svc_dynamicCordisRunner["ctx.dynamicCordisRunner
Dynamic Cordis package host runner"] svc_cordisInspect["ctx.cordisInspect
Dynamic Cordis inspect registry"] + pkg_experimental_liveshare["experimental-liveshare"] + svc_liveshareShares["ctx.liveshareShares
Owner share management Remote"] pkg_action_cards --> svc_actionCards pkg_agent --> svc_agents pkg_agent_default_model --> svc_agentDefaultModel @@ -371,6 +374,7 @@ flowchart LR pkg_experimental_forge --> svc_forge pkg_experimental_forge_github --> svc_forge pkg_experimental_forge_session --> svc_forgeSession + pkg_experimental_liveshare --> svc_liveshareShares pkg_experimental_ptc_runtime_python --> svc_ptcRuntime pkg_experimental_speech_to_text --> svc_speechToText pkg_experimental_speech_to_text_sensevoice --> svc_speechToText @@ -421,6 +425,7 @@ flowchart LR pkg_schedule --> svc_schedule pkg_session --> svc_sessions pkg_session_log_deepseek --> svc_deepseekLlmApiExtensions + pkg_session_log_deepseek --> svc_sessionLogDeepSeek pkg_session_persistence --> svc_sessionPersistence pkg_session_persistence_jsonl --> svc_sessionPersistence pkg_session_projection --> svc_sessionProjections @@ -671,6 +676,7 @@ flowchart LR | `ctx.attachments` | `seam` | [`attachment`](../packages/attachment/attachment) | [`attachment-local`](../packages/attachment/attachment-local) | [`api-session-controller`](../packages/api/session-controller), [`tool-fs`](../packages/fs/tool-fs), [`llm-pi-ai`](../packages/llm/llm-pi-ai), [`llm-deepseek`](../packages/llm/llm-deepseek) | - | 宿主会在会话事件之前提交已接受的图片；提供方适配器将已授权的持久引用解析为提供方原生内容。 | | `ctx.fileUploads` | `core` | [`client-file-upload`](../packages/client/file-upload) | - | [`api-session-controller`](../packages/api/session-controller) | - | 负责流式接收、持久存储和暂存回执生命周期；Session Controller 将回执绑定到已接受的提交。 | | `ctx.llm` | `seam` | [`llm`](../packages/llm/llm) | [`llm-deepseek`](../packages/llm/llm-deepseek), [`llm-pi-ai`](../packages/llm/llm-pi-ai), [`llm-replay`](../packages/test-support/llm-replay) | [`agent-loop`](../packages/core/agent-loop), [`compaction-basic`](../packages/compaction/compaction-basic) | - | 适配器注册提供方实现；agent loop（智能体循环）与压缩功能调用提供方无关的流服务。 | +| `ctx.sessionLogDeepSeek` | `core` | [`session-log-deepseek`](../packages/session/session-log-deepseek) | - | - | - | 插件在准备权威 Session 日志请求贡献前注册归调用方所有的排除条件；没有条件匹配的请求应用普通上传资格判断。 | | `ctx.deepseekLlmApiExtensions` | `seam` | [`deepseek-llm-api-extensions`](../packages/llm/deepseek-llm-api-extensions) | [`session-log-deepseek`](../packages/session/session-log-deepseek), [`plugin-package-inventory-deepseek`](../packages/llm/plugin-package-inventory-deepseek) | [`llm-deepseek`](../packages/llm/llm-deepseek) | - | 插件准备彼此独立的顶层字段；官方适配器会合并这些字段，并在 HTTP 接受后提交其交付状态。 | | `ctx.tokenMeter` | `core` | [`token-meter`](../packages/llm/token-meter) | - | [`compaction-basic`](../packages/compaction/compaction-basic) | - | 拥有按会话隔离的回放折叠区；压力消费方共享不可变且带修订版本的测量结果。 | | `ctx.toolResultPruner` | `core` | [`compaction-tool-result-pruner`](../packages/compaction/compaction-tool-result-pruner) | - | [`compaction-basic`](../packages/compaction/compaction-basic) | - | 在摘要压缩前，通过可回放的单节点表层替换来改写过大的当前工具结果。 | @@ -753,5 +759,6 @@ flowchart LR | `ctx.lsp` | `seam` | [`lsp`](../packages/lsp/lsp) | [`lsp-stdio`](../packages/lsp/lsp-stdio) | [`tool-lsp`](../packages/lsp/tool-lsp) | - | 提供方注册与选择，加上恰好四种操作的标准化查询执行；该 seam 不提供协议逃生口，后端必须转换为标准化请求和结果。 | | `ctx.dynamicCordisRunner` | `core` | [`cordis-host-runner`](../packages/extensions/cordis-host-runner) | - | [`tool-cordis`](../packages/extensions/tool-cordis) | - | 拥有内存定义注册表、Host 半的 vm 沙箱和 request-run 往返流程；浏览器页面通过其 Remote 命名空间在线访问同一服务。 | | `ctx.cordisInspect` | `core` | [`cordis-host-runner`](../packages/extensions/cordis-host-runner) | - | [`tool-cordis`](../packages/extensions/tool-cordis) | - | 注册 Host inspect 提供方、镜像 Client 提供方 manifest，并通过动态 Cordis 传输路由 Client 查询。 | +| `ctx.liveshareShares` | `service` | [`experimental-liveshare`](../packages/experimental/liveshare) | - | - | - | 以单个 Typert Remote 命名空间发布 owner 分享管理操作，供 owner 客户端面调用；每个方法都委托给同源路由原先使用的同一组操作。 | 维护模式：混合模式。服务从 Cordis 声明中发现；接口、实现和消费方角色在 `scripts/gen-doc-graphs.ts` 中分类，并设有完整性守卫。 diff --git a/docs/config-catalog.md b/docs/config-catalog.md index 68c65673a9..ca0dc021f1 100644 --- a/docs/config-catalog.md +++ b/docs/config-catalog.md @@ -706,13 +706,30 @@ export type ThemePreference = typeof THEME_PREFERENCES[number] ``` + + + +## `@deepseek-ai/dsh-client-ui-trajectory` + +- `inject`: `sessions` · `typert` +- `source`: [`packages/client/ui-trajectory/src/index.ts:25`](../packages/client/ui-trajectory/src/index.ts) + +```ts config-catalog +/** Count limit for each live Session's transient tool results. */ +export interface Config { + /** Maximum retained results per Session, including values awaiting a result event. */ + maxResultsPerSession: number +} +``` + + ## `@deepseek-ai/dsh-compaction-basic` - `inject`: `llm` · `tokenMeter` · `sessions` -- `source`: [`packages/compaction/compaction-basic/src/types.ts:40`](../packages/compaction/compaction-basic/src/types.ts) +- `source`: [`packages/compaction/compaction-basic/src/types.ts:46`](../packages/compaction/compaction-basic/src/types.ts) ```ts config-catalog /** Basic compaction configuration with an optional exact-target policy table. */ @@ -1033,7 +1050,7 @@ export interface CotTranslationPreferences { ## `@deepseek-ai/dsh-experimental-client-ui-forge` - `inject`: `forge` · `forgeSession` · `sessionProjections` · `workingDirectory` · `fs` · `subprocess` · `sandbox` · `sandboxPolicy` · `agents` -- `source`: [`packages/experimental/client-ui-forge/src/types.ts:296`](../packages/experimental/client-ui-forge/src/types.ts) +- `source`: [`packages/experimental/client-ui-forge/src/types.ts:318`](../packages/experimental/client-ui-forge/src/types.ts) ```ts config-catalog /** Host settings of the forge panel Remote. */ @@ -1109,14 +1126,14 @@ export type Config = CuaConfig ## `@deepseek-ai/dsh-experimental-forge` -- `source`: [`packages/experimental/forge/src/types.ts:205`](../packages/experimental/forge/src/types.ts) +- `source`: [`packages/experimental/forge/src/types.ts:230`](../packages/experimental/forge/src/types.ts) ```ts config-catalog /** Poll cadence and fetch deadline for watched change requests. */ export interface Config { /** Poll interval in milliseconds while checks run or mergeability is unknown. */ activeIntervalMs?: number - /** Poll interval in milliseconds for an open change request whose checks have settled. */ + /** Poll interval in milliseconds for a closed request or an open request whose checks have settled. */ idleIntervalMs?: number /** Largest delay in milliseconds between polls after consecutive failures. */ maxBackoffMs?: number @@ -2217,8 +2234,8 @@ export type PiAiThinkingTokenBudgetField = NonNullable
- {t('chat.deepDiving')}
+ void>()
let folding = 0
const foldIdleListeners = new Set<() => void>()
@@ -477,8 +487,13 @@ export function createFlowMotion(driver: () => InputFoldDriver | null, foldingCh
for (const cancel of [...running.values()]) cancel()
}
+ function hideNow(element: HTMLElement, commit: () => void): void {
+ beforeInstantHide?.(element)
+ commit()
+ }
+
return {
- collapse, reveal, cancelMotion, foldActive, onFoldIdle, cancelInput, resumeInput, clear,
+ collapse, reveal, cancelMotion, foldActive, onFoldIdle, cancelInput, resumeInput, clear, hideNow,
inputActive: () => batch || (batchScheduled && [...boxes.values()].some(box => box.closing && batchMember(box))),
}
}
@@ -496,6 +511,7 @@ function useFlowTransition(motion: FlowMotionRows | undefined, grow: boolean): H
if (hidden) {
if (hiddenOrCollapsing(element)) return
if (mounted && element.closest(MOTION_SCOPE) !== null && motion !== undefined) motion.collapse(element, commit)
+ else if (mounted && motion?.hideNow !== undefined) motion.hideNow(element, commit)
else commit()
return
}
diff --git a/packages/client/ui-chat/src/client/chat/register-node-renderers.ts b/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
index 7e58223287..d634e30b00 100644
--- a/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
+++ b/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
@@ -37,10 +37,15 @@ export function registerChatNodeRenderers(
name: 'conversation.chat.reasoning.body',
priority: 100,
}, DefaultReasoningBody))
- ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
- { name: 'conversation.chat.node', key: 'user', locale: NS }, UserMessageNodeView))
- ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
- { name: 'conversation.chat.node', key: 'steering', locale: NS }, UserMessageNodeView))
+ ctx.slots.inject('conversation.chat.node', () => ctx.slots.register({
+ name: 'conversation.chat.node', key: 'user', locale: NS,
+ children: { 'conversation.chat.user.before': { kind: 'chain', scope: 'session' } },
+ }, UserMessageNodeView))
+ // Steering rows share the renderer without owning the message-source seat.
+ ctx.slots.inject('conversation.chat.node', () => ctx.slots.register({
+ name: 'conversation.chat.node', key: 'steering', locale: NS,
+ inject: () => ({ renderSlotChain: () => null }),
+ }, UserMessageNodeView))
ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
{ name: 'conversation.chat.node', key: 'context', locale: NS }, ContextMessageNodeView))
ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
diff --git a/packages/client/ui-chat/src/client/chat/use-chat-reading.ts b/packages/client/ui-chat/src/client/chat/use-chat-reading.ts
index c36b640393..9b4512c285 100644
--- a/packages/client/ui-chat/src/client/chat/use-chat-reading.ts
+++ b/packages/client/ui-chat/src/client/chat/use-chat-reading.ts
@@ -89,11 +89,12 @@ export class ChatReading {
/**
* Follow the tail on the active fold's animation clock.
+ * @param input - whether the reader's own input requests the landing rather than a content change.
* @returns whether a fold batch owns the tail movement instead of a separate scroll animation.
*/
- followInputFold(): boolean {
+ followInputFold(input: boolean): boolean {
this.cancelPending()
- return this.viewport.followInputFold(this.follow)
+ return this.viewport.followInputFold(this.follow, input)
}
/**
@@ -217,8 +218,6 @@ export class ChatReading {
private publish(state: ChatReadingState): void {
this.follow.setFollowing(state.followingTail)
- // Follow intent and pending sampling settle here, not only on the next scroll or resize.
- this.viewport.refreshTailPin()
if (state.initialized === this.state.initialized && state.followingTail === this.state.followingTail
&& state.activeTurn === this.state.activeTurn) return
this.state = state
diff --git a/packages/client/ui-chat/src/client/chat/use-chat-scroll.ts b/packages/client/ui-chat/src/client/chat/use-chat-scroll.ts
index 0fd20082e3..7924a33e3f 100644
--- a/packages/client/ui-chat/src/client/chat/use-chat-scroll.ts
+++ b/packages/client/ui-chat/src/client/chat/use-chat-scroll.ts
@@ -17,6 +17,8 @@ export interface ChatScrollInput extends ChatNavigationInput {
readonly lastIsUser: boolean
readonly steeringId: string | null
readonly submissionId: string | null
+ /** The latest visible submission steers the running Turn instead of opening a new one. */
+ readonly submissionSteers: boolean
readonly running: boolean
/** Enable the browser-local delayed-fold experiment and its input reveal animation. */
readonly deferCompletedTurns: boolean
@@ -44,8 +46,8 @@ interface ChatScrollState extends ChatReadingState {
*/
export function useChatScroll(input: ChatScrollInput): ChatScrollState {
const {
- ready, order, firstSeq, lastKey, lastIsUser, steeringId, submissionId, running, deferCompletedTurns,
- loadedTurns, chatScroll, hasMore, loadingOlder, loadOlder, loadThrough, transcriptView,
+ ready, order, firstSeq, lastKey, lastIsUser, steeringId, submissionId, submissionSteers, running,
+ deferCompletedTurns, loadedTurns, chatScroll, hasMore, loadingOlder, loadOlder, loadThrough, transcriptView,
} = input
const { viewport, listRef, columnRef } = useChatViewport()
const { reading, state } = useChatReading(viewport, chatScroll, loadedTurns.at(-1)?.turn ?? null)
@@ -64,11 +66,11 @@ export function useChatScroll(input: ChatScrollInput): ChatScrollState {
const current = content.current.input
if (!current.ready && !content.current.opened) return
const previous = content.current.applied
- const ownInput = (current.lastIsUser && current.lastKey !== previous?.lastKey)
- || (current.steeringId !== null && current.steeringId !== previous?.steeringId
- && current.steeringId !== previous?.submissionId)
- || (current.submissionId !== null && current.submissionId !== previous?.submissionId
- && current.submissionId !== previous?.steeringId)
+ const steeringInput = current.steeringId !== null && current.steeringId !== previous?.steeringId
+ && current.steeringId !== previous?.submissionId
+ const submissionInput = current.submissionId !== null && current.submissionId !== previous?.submissionId
+ && current.submissionId !== previous?.steeringId
+ const ownInput = (current.lastIsUser && current.lastKey !== previous?.lastKey) || steeringInput || submissionInput
if (reading.pending && !ownInput) return
content.current.applied = current
if (current.ready && !content.current.opened) {
@@ -79,8 +81,11 @@ export function useChatScroll(input: ChatScrollInput): ChatScrollState {
}
if (ownInput) {
navigation.cancel()
- if (current.deferCompletedTurns && reading.followInputFold()) return
- reading.followTail(current.deferCompletedTurns ? 'smooth' : 'instant')
+ if (current.deferCompletedTurns && reading.followInputFold(true)) return
+ // Steering lands at once: the running Turn keeps streaming above its echo, and that growth would push
+ // the echo down under a native animation.
+ const steering = steeringInput || (submissionInput && current.submissionSteers)
+ reading.followTail(current.deferCompletedTurns && !steering ? 'smooth' : 'instant')
return
}
if (navigation.contentCommitted()) {
@@ -93,7 +98,7 @@ export function useChatScroll(input: ChatScrollInput): ChatScrollState {
|| current.steeringId !== previous.steeringId || current.submissionId !== previous.submissionId
if (tipChanged && reading.followingTail) {
navigation.cancel()
- if (current.deferCompletedTurns && reading.followInputFold()) return
+ if (current.deferCompletedTurns && reading.followInputFold(false)) return
reading.followTail()
} else navigation.reconcile()
}, [reading, navigation])
@@ -136,8 +141,8 @@ export function useChatScroll(input: ChatScrollInput): ChatScrollState {
useLayoutEffect(() => {
const previous = content.current.input
content.current.input = {
- ready, order, lastKey, lastIsUser, steeringId, submissionId, running, loadedTurns, chatScroll,
- deferCompletedTurns, transcriptView, ...navigationInput,
+ ready, order, lastKey, lastIsUser, steeringId, submissionId, submissionSteers, running, loadedTurns,
+ chatScroll, deferCompletedTurns, transcriptView, ...navigationInput,
}
if (!deferCompletedTurns) {
cancelPendingFollow()
@@ -151,7 +156,8 @@ export function useChatScroll(input: ChatScrollInput): ChatScrollState {
if (layoutChanged && content.current.opened) reading.refreshActiveTurn()
}, [
viewport, reading, processContent, navigationInput, ready, order, lastKey, lastIsUser,
- steeringId, submissionId, running, loadedTurns, chatScroll, deferCompletedTurns, transcriptView, cancelPendingFollow,
+ steeringId, submissionId, submissionSteers, running, loadedTurns, chatScroll, deferCompletedTurns, transcriptView,
+ cancelPendingFollow,
])
const previousView = useRef(transcriptView)
diff --git a/packages/client/ui-chat/src/client/chat/use-chat-viewport.ts b/packages/client/ui-chat/src/client/chat/use-chat-viewport.ts
index dd0e9f5c08..b0dbf7528a 100644
--- a/packages/client/ui-chat/src/client/chat/use-chat-viewport.ts
+++ b/packages/client/ui-chat/src/client/chat/use-chat-viewport.ts
@@ -47,6 +47,21 @@ export interface FoldReader {
readonly pending: () => boolean
}
+/** A top-level row a closing shrink may keep still, measured before the rows close. */
+interface ShrinkAnchor {
+ readonly element: HTMLElement
+ /** Distance from the row's top to the end of the content last painted. */
+ readonly fromEnd: number
+}
+
+/** Layout measured at the first instant hide of a commit; only the size observation of that frame uses it. */
+interface ClosingLayout {
+ /** The first visible row, then the rows above it within one scrollport. */
+ readonly rows: readonly ShrinkAnchor[]
+ /** Content height without fold room when the rows were measured. */
+ readonly content: number
+}
+
interface PagingPosition {
readonly row: HTMLElement
readonly position: ChatScrollPosition
@@ -65,12 +80,16 @@ export class ChatViewport {
private observation: { top: number; landing: ViewportLanding | null } = { top: 0, landing: null }
private paging: PagingPosition | null = null
private reader: FoldReader | null = null
- /** Content overflow at the latest scroll or resize measurement; follow-intent commits reuse it. */
- private overflowing = false
- /** Whether the column carries `data-chat-tail-pinned`. */
- private tailPinned = false
+ /** Rows measured before an instant close; see {@link ChatViewport.keepAboveClosing}. */
+ private closing: ClosingLayout | null = null
+ /** Discards a closing measurement that no size observation consumed by the end of its frame. */
+ private closingFrame: number | null = null
+ /** Content height without fold room at the latest size observation: the content that frame painted. */
+ private settledContent = 0
/** The pending or running fold batch lands at the tail. */
private tailRequested = false
+ /** The tail request came from the reader's own input rather than from a content change. */
+ private tailInput = false
/** Switches the running batch to a tail landing; null while no batch runs. */
private retarget: (() => void) | null = null
/** Transition state and row callbacks owned by this viewport's attachment. */
@@ -79,6 +98,7 @@ export class ChatViewport {
(active) => {
if (this.elements !== null) this.elements.scroller.style.overflowAnchor = active ? 'none' : ''
},
+ (element) => { this.measureClosing(element) },
)
/**
@@ -100,12 +120,13 @@ export class ChatViewport {
if (typeof ResizeObserver !== 'undefined') {
this.observer = new ResizeObserver(() => {
if (this.elements !== elements) return
- // Read while layout is still clean, before this callback writes room or scroll positions.
- const overflowing = this.contentOverflows(scrollMetrics(elements.scroller))
+ // Read while layout is still clean, before this callback writes room or scroll positions. Those writes
+ // leave the content height unchanged, so it is also the content this frame paints.
+ this.settledContent = elements.scroller.scrollHeight - this.spacerHeight()
+ this.keepAboveClosing()
this.reclaimBelow()
this.invalidate()
this.events?.resize()
- this.refreshTailPin(overflowing)
})
this.observer.observe(column)
this.observer.observe(scroller)
@@ -117,12 +138,8 @@ export class ChatViewport {
detach(): void {
this.stopPreserving()
this.motion.clear()
- if (this.elements !== null) {
- this.elements.scroller.style.overflowAnchor = ''
- delete this.elements.column.dataset.chatTailPinned
- }
- this.overflowing = false
- this.tailPinned = false
+ if (this.elements !== null) this.elements.scroller.style.overflowAnchor = ''
+ this.dropClosing()
this.elements?.scroller.removeEventListener('scroll', this.onScroll)
this.elements?.scroller.removeEventListener('scrollend', this.onScrollEnd, true)
for (const type of READING_INTENTS) this.elements?.scroller.removeEventListener(type, this.onIntent, true)
@@ -131,6 +148,7 @@ export class ChatViewport {
this.elements = null
this.events = null
this.tailRequested = false
+ this.tailInput = false
this.retarget = null
this.turns = []
this.observation = { top: 0, landing: null }
@@ -186,24 +204,22 @@ export class ChatViewport {
*/
bindReader(reader: FoldReader): () => void {
this.reader = reader
- this.refreshTailPin()
- return () => {
- if (this.reader !== reader) return
- this.reader = null
- this.refreshTailPin()
- }
+ return () => { if (this.reader === reader) this.reader = null }
}
/**
* Land the pending or running fold batch at the tail instead of starting a separate scroll.
* @param follow - follow controller whose native animation yields to the batch.
+ * @param input - whether the reader's own input requests the landing; a content change, such as a Turn
+ * ending, requests it in place of the immediate follow.
* @returns whether a fold owns the tail movement.
*/
- followInputFold(follow: ScrollFollow): boolean {
+ followInputFold(follow: ScrollFollow, input: boolean): boolean {
// Rows still closing on CSS transitions after a batch have no batch to consume the request.
if (this.elements === null || this.reader === null || !this.motion.inputActive()) return false
this.interruptFollow(follow)
this.tailRequested = true
+ this.tailInput ||= input
this.retarget?.()
return true
}
@@ -263,11 +279,27 @@ export class ChatViewport {
begin: (boxes) => {
// Own input lands at the tail; otherwise an unsampled reading movement outranks follow intent.
tail = this.tailRequested || (follow.active && !reader.pending())
+ const input = this.tailInput
this.tailRequested = false
+ this.tailInput = false
viewportTop = elements.scroller.getBoundingClientRect().top
start = elements.scroller.scrollTop
const originalRoom = this.spacerHeight()
initialHeight = Math.max(elements.column.offsetHeight, elements.scroller.scrollHeight - originalRoom)
+ if (tail && !input) {
+ // The batch replaces the immediate follow of a reader pinned to the tail, following content that
+ // overflows with no fold room: content that grew outside the batch since that paint, such as a Turn's
+ // duration control, is taken before the first frame as following takes streaming growth, so the
+ // batch only animates its own rows.
+ const pinned = originalRoom === 0 && this.settledContent > elements.scroller.clientHeight
+ && follow.active && !reader.pending() && !follow.animating
+ const external = elements.scroller.scrollHeight - originalRoom - this.settledContent
+ if (external > 0.5 && pinned) {
+ elements.scroller.scrollTop = start + external
+ start = elements.scroller.scrollTop
+ this.observation = { top: start, landing: null }
+ }
+ }
let above = 0
const below: HTMLElement[] = []
for (const box of boxes) {
@@ -355,6 +387,7 @@ export class ChatViewport {
finish: (cancelled) => {
this.retarget = null
this.tailRequested = false
+ this.tailInput = false
if (this.elements !== elements) return
// Commit the final sibling margins while their fold transition override still applies.
void elements.column.offsetHeight
@@ -422,8 +455,129 @@ export class ChatViewport {
return null
}
+ /**
+ * Measure, before the first row of a commit closes at once, the rows a following reader's shrink keeps
+ * still: the first row visible in the last painted layout, the rows after it that were on screen, and the
+ * rows above it within one scrollport.
+ * Rows above the closing rows keep their painted screen positions, which the commit did not move; the same
+ * commit can add rows between them and the closing rows, as a Turn's duration control does, so rows from
+ * the closing rows on are placed against the current end. Reads happen only when rows close, never on the
+ * following path's size observations. A measurement the same frame's size observation does not use is
+ * discarded after that frame.
+ * @param element - the first row of this commit to close.
+ */
+ private measureClosing(element: HTMLElement): void {
+ const elements = this.elements
+ const reader = this.reader
+ if (elements === null || reader === null || this.closing !== null || !element.isConnected) return
+ if (!reader.follow.active || reader.follow.animating || reader.pending()) return
+ if (this.paging !== null || this.motion.foldActive() || this.motion.inputActive()) return
+ const scroller = elements.scroller
+ const scrollHeight = scroller.scrollHeight
+ const height = scroller.clientHeight
+ // The commit has not moved the scroll position, so it is the painted one, within the follow threshold too.
+ const painted = scroller.scrollTop + height
+ const origin = scroller.getBoundingClientRect().top - scroller.scrollTop
+ const rows = (elements.column.querySelector(':scope > [data-slot="conversation.chat.flow"]') ?? elements.column).children
+ // End is the content end each row is placed against: painted for rows above the closing rows.
+ const end = (row: Element): number => row !== element && !row.contains(element)
+ && (element.compareDocumentPosition(row) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? painted : scrollHeight
+ const screen = (row: Element, offset: number): number => offset - origin - (end(row) - height)
+ let low = 0
+ let high = rows.length
+ while (low < high) {
+ const middle = (low + high) >>> 1
+ const row = rows[middle] as Element
+ if (screen(row, row.getBoundingClientRect().bottom) > 0) high = middle
+ else low = middle + 1
+ }
+ let first = -1
+ for (let index = low; index < rows.length && first < 0; index++) {
+ const row = rows[index] as HTMLElement
+ const rect = row.getBoundingClientRect()
+ if (screen(row, rect.top) >= height) break
+ if (rect.height > 0 && !row.hasAttribute('hidden')) first = index
+ }
+ if (first < 0) return
+ const anchors: ShrinkAnchor[] = []
+ const add = (row: HTMLElement, rect: DOMRect): void => {
+ if (rect.height > 0 && !row.hasAttribute('hidden')) anchors.push({ element: row, fromEnd: end(row) - (rect.top - origin) })
+ }
+ add(rows[first] as HTMLElement, (rows[first] as HTMLElement).getBoundingClientRect())
+ // When the first visible row closes, the reader's eyes are on the rows that follow it on screen.
+ for (let index = first + 1; index < rows.length; index++) {
+ const row = rows[index] as HTMLElement
+ const rect = row.getBoundingClientRect()
+ if (screen(row, rect.top) >= height) break
+ add(row, rect)
+ }
+ for (let index = first - 1; index >= 0; index--) {
+ const row = rows[index] as HTMLElement
+ const rect = row.getBoundingClientRect()
+ if (screen(row, rect.bottom) <= -height) break
+ add(row, rect)
+ }
+ this.closing = { rows: anchors, content: scrollHeight - this.spacerHeight() }
+ if (typeof requestAnimationFrame === 'function') {
+ // This frame's size observation runs before the second callback; nothing later may use the measurement.
+ this.closingFrame = requestAnimationFrame(() => {
+ this.closingFrame = requestAnimationFrame(() => {
+ this.closingFrame = null
+ this.closing = null
+ })
+ })
+ }
+ }
+
+ private dropClosing(): void {
+ this.closing = null
+ if (this.closingFrame !== null && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this.closingFrame)
+ this.closingFrame = null
+ }
+
+ /**
+ * Keep a following reader's content still after rows closed at once, for example work details at Turn
+ * completion: the first visible row keeps its screen position, or, when it closed, the first surviving row
+ * that followed it on screen, else the nearest surviving row above it. Room below fills the gap, at most half
+ * the scrollport; beyond that the content end stops at the scrollport's middle. Called from the size
+ * observation, after layout and before paint; only the observation of the frame that closed the rows uses
+ * the measurement, and only while the reader still follows the tail with no fold batch, native animation,
+ * unsampled movement, or paging writing positions.
+ */
+ private keepAboveClosing(): void {
+ const closing = this.closing
+ const elements = this.elements
+ const reader = this.reader
+ if (closing === null) return
+ this.dropClosing()
+ if (elements === null || reader === null || !reader.follow.active || reader.follow.animating || reader.pending()) return
+ if (this.paging !== null || this.motion.foldActive() || this.motion.inputActive()) return
+ const scroller = elements.scroller
+ const content = scroller.scrollHeight - this.spacerHeight()
+ // Growth in the same commit can outweigh the closed rows; nothing then shrank to compensate.
+ if (content >= closing.content - 0.5) return
+ const height = scroller.clientHeight
+ const origin = scroller.getBoundingClientRect().top - scroller.scrollTop
+ const cap = height / 2
+ let top = content + cap - height
+ for (const row of closing.rows) {
+ if (!row.element.isConnected || row.element.closest('[hidden]') !== null) continue
+ const rect = row.element.getBoundingClientRect()
+ if (rect.height === 0) continue
+ top = rect.top - origin - (height - row.fromEnd)
+ break
+ }
+ if (top + height - content > cap) top = content + cap - height
+ top = Math.max(0, top)
+ this.setSpacer(top === 0 ? 0 : Math.max(0, top + height - content))
+ if (scroller.scrollTop !== top) scroller.scrollTop = top
+ const metrics = scrollMetrics(scroller)
+ this.observation = { top: metrics.top, landing: { metrics, position: null, turn: this.latestTurn } }
+ }
+
/** Clear fold reservations after a display-mode change, allowing the scroll range to shrink. */
resetBelow(): void {
+ this.dropClosing()
this.setSpacer(0)
this.invalidate()
}
@@ -771,47 +925,16 @@ export class ChatViewport {
this.invalidate()
if (this.paging !== null) {
this.events?.resize()
- this.refreshTailPin()
return
}
const scroll = this.readScroll()
if (scroll !== null) this.events?.scroll(scroll)
- this.refreshTailPin(scroll === null ? undefined : this.contentOverflows(scroll.metrics))
- }
-
- /**
- * Mark the column while the tail is pinned: the reader follows the floor with no unsampled reader
- * movement, the test fold batches use for a tail landing, and the content overflows with no fold room
- * below it, so following scrolls absorb output growth and the status keeps its on-screen position. Fold
- * room, like the empty space below content that fits, takes growth before any scroll, so the status moves
- * there. The first-output slide runs at zero duration while pinned. A resize calls this after its own
- * follow scroll, before paint, so a slide that starts in that frame finishes before it is drawn; scroll and
- * scrollend call it after delivering the sample, and follow-intent commits call it with the latest
- * measurement. The attribute changes only with the pin.
- * @param overflowing - a fresh overflow measurement; omitted, the latest one is reused.
- */
- refreshTailPin(overflowing = this.overflowing): void {
- this.overflowing = overflowing
- const elements = this.elements
- if (elements === null) return
- const reader = this.reader
- const pinned = overflowing && this.spacerHeight() === 0 && reader !== null && reader.follow.active && !reader.pending()
- if (pinned === this.tailPinned) return
- this.tailPinned = pinned
- if (pinned) elements.column.dataset.chatTailPinned = ''
- else delete elements.column.dataset.chatTailPinned
- }
-
- /** Room below closing rows is not content: only rows taller than the scrollport scroll on growth. */
- private contentOverflows(metrics: ViewportMetrics): boolean {
- return metrics.floor - this.spacerHeight() > 0
}
private readonly onScrollEnd = (event: Event): void => {
if (event.target === this.elements?.scroller) {
this.events?.scrollEnd(true)
this.reclaimBelow()
- this.refreshTailPin()
} else if (event.target instanceof HTMLElement && event.target.hasAttribute('data-step-process-body')) this.events?.scrollEnd(false)
}
diff --git a/packages/client/ui-chat/src/client/contract/slots.ts b/packages/client/ui-chat/src/client/contract/slots.ts
index 948a546689..96028b0ffd 100644
--- a/packages/client/ui-chat/src/client/contract/slots.ts
+++ b/packages/client/ui-chat/src/client/contract/slots.ts
@@ -209,6 +209,20 @@ export interface ChatNodeInjected {
}
}
+/**
+ * Owner currency of the message-source decoration above one user message bubble.
+ *
+ * Entry selectors receive the durable message `source` and row kind. A
+ * non-null selection elects the component and reaches it as `matched`.
+ * Entries own their markup and copy; Chat does not interpret the source.
+ */
+export interface UserBeforeOwnerProps {
+ /** Durable message source; Chat does not interpret it. */
+ readonly source: unknown
+ /** Chat row kind that owns the decoration site. */
+ readonly kind: 'user' | 'steering'
+}
+
/** Stable owner currency delivered to a keyed Chat renderer. */
export interface ChatNodeOwnerProps {
/** Renderer-owned Node portion selected by the grouping Definition. */
@@ -423,6 +437,17 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
hookContext: ChatNodeHookContext
inject: ChatNodeInjected
}
+ /**
+ * Message-source decoration owned and rendered by the user Node entry.
+ * Selectors elect one component from the durable source and row kind.
+ * No match renders no visible content; steering and pending rows do not
+ * render this slot.
+ */
+ 'conversation.chat.user.before': {
+ kind: 'chain'
+ scope: 'session'
+ owner: UserBeforeOwnerProps
+ }
/**
* Renderer for one consecutive group of durable message images. The owner
* supplies image references, an authorized loader, and alignment. A
diff --git a/packages/client/ui-chat/src/client/conversation-nodes/README.i18n.yaml b/packages/client/ui-chat/src/client/conversation-nodes/README.i18n.yaml
index 1dee9a0b92..16edc1228e 100644
--- a/packages/client/ui-chat/src/client/conversation-nodes/README.i18n.yaml
+++ b/packages/client/ui-chat/src/client/conversation-nodes/README.i18n.yaml
@@ -24,8 +24,8 @@
en: 75564701ecd3d1bd
zh: 9c042288a15d441d
/chat-conversation-node-rules/whole-turn-folding:
- en: 09314600edba4979
- zh: da8d599372c7899c
+ en: 5e008ac2ab8de86a
+ zh: d782e34c7cfcb0f2
/chat-conversation-node-rules/display-modes:
en: ada5a60d2c46f6a8
zh: f3eaeb5cb4d9b3de
diff --git a/packages/client/ui-chat/src/client/conversation-nodes/README.md b/packages/client/ui-chat/src/client/conversation-nodes/README.md
index c0ea49ba5e..f3cc0552be 100644
--- a/packages/client/ui-chat/src/client/conversation-nodes/README.md
+++ b/packages/client/ui-chat/src/client/conversation-nodes/README.md
@@ -103,7 +103,7 @@ Clicking Load older anchors the first visible content item below that button in
Paging adds older content above the retained anchor without jumping to the new top. A capped group absorbs the displacement within its scroll range; the outer transcript absorbs the remainder, including when the group first reaches its cap. If the available scroll range is insufficient, compensation stops at the actual limit without adding bottom space. Later content growth keeps the same anchor until a reading gesture or explicit navigation releases it. Typing or clicking within the composer and non-scrolling transcript keys retain the anchor. If the reader scrolls while a page is loading, scrolling takes priority and its settled reading position becomes the new paging anchor.
-While the Session runs, Chat shows a Session-level indicator at the running Turn's tail: a whale tail beside shimmering elapsed time. It follows the transcript rows and the echoes of submissions that open a Turn; steering still pending when a submission opens the next Turn is claimed first, so its echoes precede that submission's echo. Echoes of steering that waits for the running Turn's next Step follow the indicator. While the running Step has no output, the indicator sits directly below the input. When the first output row appears, the indicator slides from that position into its slot below the row; the travel equals the row's gap plus one row height, which follows the font size setting, so it starts exactly where it stood. Later output moves it without animation. When the transcript overflows the viewport and follows its bottom, following scrolls keep the indicator in place as output grows, so this slide does not play; admitted steering still moves the indicator past its pending echo, so the steering entrance plays while the page scrolls by the added slot. The steering entrance starts one slot above the indicator's new position rather than where it stood, and its fade-in covers the difference. Before the current Turn start time arrives, the indicator shows status text without a duration. The clock updates in whole seconds, starts at one second, and uses hours from 60 minutes. While the Client connection is disconnected or reconnecting, the clock holds its last value; after reconnection it shows the elapsed time since the Turn start again. When the Session stops running, the indicator disappears; the closed Turn process control shows the fixed duration, cancellation, or failure status. Lifecycle changes have a polite announcement; clock ticks do not. The whale is hidden from assistive technology and remains static under reduced motion.
+While the Session runs, Chat shows a Session-level indicator at the running Turn's tail: a whale tail beside shimmering elapsed time. It follows the transcript rows and the echoes of submissions that open a Turn; steering still pending when a submission opens the next Turn is claimed first, so its echoes precede that submission's echo. Echoes of steering that waits for the running Turn's next Step follow the indicator. Output appearing above the indicator moves it without animation. When steering is admitted, the indicator enters its new slot below the admitted rows from one slot higher rather than from where it stood, and its fade-in covers the difference. Before the current Turn start time arrives, the indicator shows status text without a duration. The clock updates in whole seconds, starts at one second, and uses hours from 60 minutes. While the Client connection is disconnected or reconnecting, the clock holds its last value; after reconnection it shows the elapsed time since the Turn start again. When the Session stops running, the indicator keeps its slot, hidden and silent, until the Turn's actions row replaces it, so the tail does not shrink in between; the closed Turn process control shows the fixed duration, cancellation, or failure status. Lifecycle changes have a polite announcement; clock ticks do not. The whale is hidden from assistive technology and remains static under reduced motion.
The top duration/status control and trigger title use the group-title font size and follow the font-size setting. Completed duration digits use the code font with tabular numerals; running and completed minutes and seconds have no leading zero. The timed running label ends with a space and “···”; completion shows “Completed in”.
diff --git a/packages/client/ui-chat/src/client/conversation-nodes/README.zh.md b/packages/client/ui-chat/src/client/conversation-nodes/README.zh.md
index c4e94caec3..21ecd7226b 100644
--- a/packages/client/ui-chat/src/client/conversation-nodes/README.zh.md
+++ b/packages/client/ui-chat/src/client/conversation-nodes/README.zh.md
@@ -103,7 +103,7 @@ description: "Chat 过程分组与活动摘要的明细业务规则。"
分页把更早内容加到保留的锚点上方，不主动跳到新内容顶部。限高组先在自己的滚动范围内吸收位移，剩余部分由外层文本滚动补偿，包括组正文刚达到限高的情况。可滚动范围不足时，补偿停在实际边界，不增加底部空白。后续内容撑高沿用同一个锚点，直到阅读手势或显式导航释放它。在 composer 中打字或点击，以及 transcript 内的非滚动按键，保留锚点。分页请求期间若读者滚动，优先服从滚动，停止后以新的阅读位置作为分页锚点。
-会话运行期间，Chat 在运行中 Turn 的末尾显示 Session 级运行指示：鲸鱼摆尾旁显示闪烁的已用时间。它位于 transcript 行和开启 Turn 的提交回显之后；某次提交开启下一个 Turn 时仍在等待的 steering 会先被领取，因此其回显排在该提交回显之前。等待运行中 Turn 下一个 Step 的 steering 回显位于运行指示之后。运行中的 Step 尚无输出时，运行指示紧贴在输入下方。第一条输出行出现时，运行指示从原位置滑入该行下方的位置；滑动距离等于该行间距加一行高度（随字号设置变化），因此起点正是它原来的位置。之后的输出不再带动画。transcript 超出视口并跟随底部时，输出增长由跟随滚动吸收，运行指示保持原位，因此这次下滑不播放；被领取的 steering 仍会让运行指示越过其等待中的回显，因此 steering 进场照常播放，同时页面随新增的槽位滚动。steering 进场从运行指示新位置上方一个槽位处开始，而不是从它原来的位置开始，淡入掩盖了这段差距。当前 Turn 的开始时间到达前，运行指示只显示状态文字，不显示时长。时钟按整秒更新，最少显示一秒，满 60 分钟使用小时。Client 连接断开或重新连接期间，时钟停在最后显示的值；恢复连接后重新显示自 Turn 开始以来的用时。会话停止运行后，该指示消失；已结束 Turn 的过程控件显示固定时长、取消或失败状态。生命周期变化有礼貌播报，时钟跳动不播报。鲸鱼对辅助技术隐藏，启用减少动态效果时保持静态。
+会话运行期间，Chat 在运行中 Turn 的末尾显示 Session 级运行指示：鲸鱼摆尾旁显示闪烁的已用时间。它位于 transcript 行和开启 Turn 的提交回显之后；某次提交开启下一个 Turn 时仍在等待的 steering 会先被领取，因此其回显排在该提交回显之前。等待运行中 Turn 下一个 Step 的 steering 回显位于运行指示之后。运行指示上方出现输出时，运行指示随之下移，不带动画。steering 被领取时，运行指示从新位置上方一个槽位处进入被领取行下方的新位置，而不是从它原来的位置开始，淡入掩盖了这段差距。当前 Turn 的开始时间到达前，运行指示只显示状态文字，不显示时长。时钟按整秒更新，最少显示一秒，满 60 分钟使用小时。Client 连接断开或重新连接期间，时钟停在最后显示的值；恢复连接后重新显示自 Turn 开始以来的用时。会话停止运行后，运行指示以隐藏、不播报的方式保留其位置，直到该 Turn 的操作行接替，因此尾部在此期间不会缩短；已结束 Turn 的过程控件显示固定时长、取消或失败状态。生命周期变化有礼貌播报，时钟跳动不播报。鲸鱼对辅助技术隐藏，启用减少动态效果时保持静态。
顶部用时／状态控件与唤醒标题沿用二级汇总标题字号，并跟随字号设置。已完成用时的数字使用代码等宽字体；运行和完成状态的分钟和秒数均不补前导零。含用时的运行文案末尾附加一个空格及“···”，完成后显示“已完成，用时”。
diff --git a/packages/client/ui-chat/src/client/index.ts b/packages/client/ui-chat/src/client/index.ts
index 275d76b96b..e56a8e0a7a 100644
--- a/packages/client/ui-chat/src/client/index.ts
+++ b/packages/client/ui-chat/src/client/index.ts
@@ -39,6 +39,7 @@ export type {
CommandRowOwnerProps, CommandRowProps, MessageImagesProps, OpenFileOptions, PresentationInjected,
QuotaNoticeCode, QuotaNoticeHostProps, QuotaNoticeInjected, QuotaNoticeOwnerProps, QuotaNoticeState,
ReasoningBodyOwnerProps, ReasoningContentInput, UserContentAttachment, UserContentData, UserContentInput,
+ UserBeforeOwnerProps,
TurnProcessOwnerProps, TurnTailOwnerProps, UseChat, UseChatNodeTurnData, UseDisclosure, UsePresentation, UseGroupAction,
} from './contract/slots.ts'
export type {
diff --git a/packages/client/ui-chat/tests/chat-apply.client.spec.tsx b/packages/client/ui-chat/tests/chat-apply.client.spec.tsx
index ab256ad15b..066a441068 100644
--- a/packages/client/ui-chat/tests/chat-apply.client.spec.tsx
+++ b/packages/client/ui-chat/tests/chat-apply.client.spec.tsx
@@ -152,6 +152,8 @@ describe('Chat apply wiring', () => {
const view = b.runtime.slots.entries('conversation.view')[0]
const flow = b.runtime.slots.entries('conversation.chat.flow')[0]
const assistant = b.runtime.slots.entries('conversation.chat.node').find(entry => entry.options.key === 'assistant-step')
+ const user = b.runtime.slots.entries('conversation.chat.node').find(entry => entry.options.key === 'user')
+ const steering = b.runtime.slots.entries('conversation.chat.node').find(entry => entry.options.key === 'steering')
const userContent = b.runtime.factoryOf('conversation.chat.user.content')
expect(userContent).toMatchObject({ scope: 'session', locale: 'chat', component: UserContent })
expect(userContent.children?.['conversation.chat.user.images']).toMatchObject({ kind: 'single', scope: 'session' })
@@ -163,6 +165,11 @@ describe('Chat apply wiring', () => {
expect(view?.children?.['conversation.chat.message.images']).toBeUndefined()
expect(view?.children?.['conversation.chat.user.images']).toBeUndefined()
expect(flow?.children?.['conversation.chat.node']).toBeDefined()
+ expect(flow?.children?.['conversation.chat.user.before']).toBeUndefined()
+ expect(user?.children?.['conversation.chat.user.before']).toMatchObject({ kind: 'chain', scope: 'session' })
+ expect(steering).toBeDefined()
+ expect(steering?.children?.['conversation.chat.user.before']).toBeUndefined()
+ expect(b.runtime.slots.spec('conversation.chat.user.before')).toMatchObject({ kind: 'chain', scope: 'session' })
expect(flow?.children?.['conversation.chat.message.images']).toBeUndefined()
expect(flow?.children?.['conversation.chat.user.images']).toBeUndefined()
expect(userContent.children?.['conversation.chat.message.images']).toBeUndefined()
@@ -172,6 +179,7 @@ describe('Chat apply wiring', () => {
await b.chat.dispose()
expect(b.runtime.slots.spec('conversation.chat.flow')).toBeUndefined()
expect(b.runtime.slots.spec('conversation.chat.node')).toBeUndefined()
+ expect(b.runtime.slots.spec('conversation.chat.user.before')).toBeUndefined()
expect(b.runtime.slots.spec('conversation.chat.message.images')).toBeUndefined()
expect(b.runtime.slots.spec('conversation.chat.user.images')).toBeUndefined()
expect(() => b.runtime.factoryOf('conversation.chat.user.content')).toThrow('no definition')
diff --git a/packages/client/ui-chat/tests/chat-branch-tails.client.spec.tsx b/packages/client/ui-chat/tests/chat-branch-tails.client.spec.tsx
index fa922ee1e1..574fe82df9 100644
--- a/packages/client/ui-chat/tests/chat-branch-tails.client.spec.tsx
+++ b/packages/client/ui-chat/tests/chat-branch-tails.client.spec.tsx
@@ -3,6 +3,7 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
import { bindSnapshotSelector, makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
import type {
ChatConversationViewNode, ConversationNode,
@@ -33,6 +34,11 @@ afterEach(() => {
const t: ChatNodeViewProps['t'] = makeTranslate(zh, commonZh)
const renderUserImages: Parameters>[1] = () => null
+const userSlots: PropsRenderSlots<'conversation.chat.user.before'> = {
+ renderSlot: () => null,
+ renderSlotChain: (_key, _owner, opts) => opts?.fallback ?? null,
+ SessionProvider: ({ children }) => <>{children},
+}
let renderUserContent: ReturnType
beforeEach(() => { renderUserContent = createUserContentFixture() })
const RETRY_ID = 'retry-fixture' as Extract['retryId']
@@ -81,8 +87,9 @@ function MessageItem({ node, t: translate, referenceLabels, skillNames }: Messag
}
switch (node.kind) {
case 'user':
+ return } {...userSlots} />
case 'steering':
- return } />
+ return } renderSlotChain={() => null} />
case 'context':
return } />
case 'compaction':
diff --git a/packages/client/ui-chat/tests/chat-scroll.client.spec.tsx b/packages/client/ui-chat/tests/chat-scroll.client.spec.tsx
index 33235c3daa..f0555f7fff 100644
--- a/packages/client/ui-chat/tests/chat-scroll.client.spec.tsx
+++ b/packages/client/ui-chat/tests/chat-scroll.client.spec.tsx
@@ -43,6 +43,7 @@ function mountScroll(deferCompletedTurns = true, initial: Partial void } = {}
+ class Observer implements ResizeObserver {
+ constructor(callback: ResizeObserverCallback) { callbacks.resize = () => { callback([], this) } }
+ observe(): void {}
+ unobserve(): void {}
+ disconnect(): void { delete callbacks.resize }
+ }
+ vi.stubGlobal('ResizeObserver', Observer)
+ const input: ChatScrollInput = {
+ ready: true, order: [], firstSeq: null, lastKey: null, lastIsUser: false,
+ steeringId: null, submissionId: null, submissionSteers: false, running: false, deferCompletedTurns: false,
+ transcriptView: 'standard', loadedTurns: [], hasMore: false, loadingOlder: false,
+ loadOlder: vi.fn(), loadThrough: vi.fn(async () => {}), chatScroll: { read: () => null, save: vi.fn() },
+ }
+ const view = render( { callbacks.motion = motion }}
+ />)
+ const scroller = within(view.container).getByTestId('scrollport')
+ const column = within(view.container).getByTestId('column')
+ const spacer = scroller.querySelector('[data-chat-turn-spacer]')!
+ const sizes = new Map()
+ const rows = heights.map((height) => {
+ const row = document.createElement('div')
+ sizes.set(row, height)
+ column.append(row)
+ return row
+ })
+ const sizeOf = (row: HTMLElement): number => row.hidden ? 0 : sizes.get(row) ?? 0
+ const docTop = (row: HTMLElement): number => {
+ let top = 0
+ for (const each of rows) {
+ if (each === row) return top
+ top += sizeOf(each)
+ }
+ return top
+ }
+ const content = (): number => rows.reduce((sum, row) => sum + sizeOf(row), 0)
+ const room = (): number => Number.parseFloat(spacer.style.height) || 0
+ const floor = (): number => Math.max(0, content() + room() - 400)
+ let top = 0
+ Object.defineProperties(scroller, {
+ clientHeight: { value: 400 },
+ scrollHeight: { get: () => content() + room() },
+ scrollTop: { get: () => top, set: (value: number) => { top = Math.max(0, Math.min(value, floor())) } },
+ scrollTo: { value: (options: ScrollToOptions) => { top = Math.max(0, Math.min(options.top ?? top, floor())) } },
+ getBoundingClientRect: { value: () => ({ top: 0, bottom: 400, height: 400 }) },
+ })
+ Object.defineProperty(column, 'offsetHeight', { get: content })
+ for (const row of rows) {
+ Object.defineProperty(row, 'getBoundingClientRect', { value: () => {
+ const rowTop = docTop(row) - top
+ return { top: rowTop, bottom: rowTop + sizeOf(row), height: sizeOf(row) }
+ } })
+ }
+ const resize = (): void => { act(() => { callbacks.resize?.() }) }
+ resize()
+ const row = (index: number): HTMLElement => {
+ const found = rows[index]
+ if (found === undefined) throw new Error(`no row ${String(index)}`)
+ return found
+ }
+ return {
+ scroller, row, room, resize,
+ top: () => top,
+ screenTop: (row: HTMLElement) => docTop(row) - top,
+ grow: (row: HTMLElement, by: number) => { sizes.set(row, (sizes.get(row) ?? 0) + by) },
+ /** Close rows at once, as completion-time folding does, then let layout clamp and observe. */
+ close: (...closing: HTMLElement[]) => {
+ act(() => {
+ for (const row of closing) callbacks.motion?.hideNow?.(row, () => { row.hidden = true })
+ top = Math.min(top, floor())
+ callbacks.resize?.()
+ })
+ },
+ /** Close one row while the same commit grows another, as a Turn's duration control does. */
+ closeGrowing: (closing: HTMLElement, grown: HTMLElement, by: number) => {
+ act(() => {
+ callbacks.motion?.hideNow?.(closing, () => { closing.hidden = true })
+ sizes.set(grown, (sizes.get(grown) ?? 0) + by)
+ top = Math.min(top, floor())
+ callbacks.resize?.()
+ })
+ },
+ }
+}
+
+describe('Chat scroll: a closing shrink keeps the content above still', () => {
+ it('keeps the first visible row still and fills the gap below with room', () => {
+ const h = mountRows([700, 100, 200])
+ expect(h.top()).toBe(600)
+ const [first, step, answer] = [h.row(0), h.row(1), h.row(2)]
+ h.close(step)
+ expect(h.screenTop(first)).toBe(-600)
+ expect(h.screenTop(answer)).toBe(100)
+ expect(h.room()).toBe(100)
+ })
+
+ it('moves nothing on screen when the closing rows are above the scrollport', () => {
+ const h = mountRows([200, 300, 500])
+ const [above, visible] = [h.row(0), h.row(2)]
+ h.close(above)
+ expect(h.screenTop(visible)).toBe(-100)
+ expect(h.room()).toBe(0)
+ })
+
+ it('keeps the row that followed a closed first row on screen still', () => {
+ const h = mountRows([500, 600, 100])
+ const [steps, answer] = [h.row(1), h.row(2)]
+ h.close(steps)
+ expect(h.screenTop(answer)).toBe(300)
+ expect(h.room()).toBe(0)
+ })
+
+ it('keeps the nearest surviving row above when no row followed a closed first row on screen', () => {
+ const h = mountRows([500, 900])
+ const [earlier, steps] = [h.row(0), h.row(1)]
+ h.close(steps)
+ // The earlier row would need more room than half the scrollport; the content end stops at the middle.
+ expect(h.screenTop(earlier)).toBe(-300)
+ expect(h.room()).toBe(200)
+ })
+
+ it('lets later growth take the room before following scrolls', () => {
+ const h = mountRows([700, 100, 200])
+ const [step, answer] = [h.row(1), h.row(2)]
+ h.close(step)
+ h.grow(answer, 60)
+ h.resize()
+ expect(h.room()).toBe(40)
+ expect(h.top()).toBe(600)
+ })
+
+ it('leaves a reader away from the tail to the browser', () => {
+ const h = mountRows([700, 100, 200])
+ const step = h.row(1)
+ fireEvent.wheel(h.scroller)
+ h.scroller.scrollTop = 100
+ fireEvent.scroll(h.scroller)
+ act(() => { vi.advanceTimersByTime(500) })
+ h.close(step)
+ expect(h.room()).toBe(0)
+ })
+
+ it('uses the measurement only for the observation of the commit that closed the rows', () => {
+ const h = mountRows([700, 100, 200])
+ const [step, answer] = [h.row(1), h.row(2)]
+ // Growth in the same commit outweighs the closed row, so nothing shrinks to compensate.
+ h.closeGrowing(step, answer, 100)
+ expect(h.room()).toBe(0)
+ // A later shrink follows the tail like any other; the stale measurement does not pull the reader.
+ h.grow(answer, -150)
+ h.resize()
+ expect(h.room()).toBe(0)
+ expect(h.top()).toBe(450)
+ })
+})
+
const visibleFoldCases = [
{ name: 'E/E', earlier: 2400, steps: 1000, body: 400, viewport: 800, top: 800, input: 80, target: 2080, room: 0 },
{ name: 'E/T', earlier: 600, steps: 1000, body: 100, viewport: 800, top: 200, input: 80, target: 200, room: 220 },
@@ -129,7 +288,7 @@ function mountVisibleFold(test: typeof visibleFoldCases[number], reduced: boolea
const onMotion = (value: FlowMotionRows): void => { motion = value }
let input: ChatScrollInput = {
ready: false, order: [], firstSeq: null, lastKey: null, lastIsUser: false,
- steeringId: null, submissionId: null, running: false, deferCompletedTurns: true,
+ steeringId: null, submissionId: null, submissionSteers: false, running: false, deferCompletedTurns: true,
transcriptView: 'detailed', loadedTurns: [], hasMore: false, loadingOlder: false,
loadOlder: vi.fn(), loadThrough: vi.fn(async () => {}), chatScroll: { read: () => null, save: vi.fn() },
}
@@ -381,6 +540,19 @@ describe('Chat scroll collapse timing', () => {
}
})
+ it.each([
+ ['a local steering echo', { submissionId: 'steer', submissionSteers: true }],
+ ['a pending steering message', { steeringId: 'inbox-steer' }],
+ ] as const)('lands %s at once under either fold timing', (_, change) => {
+ for (const deferred of [false, true]) {
+ const h = mountScroll(deferred)
+ h.update(change)
+ expect(h.scrollTo).not.toHaveBeenCalled()
+ expect(h.scroller.scrollTop).toBe(600)
+ h.view.unmount()
+ }
+ })
+
it('coalesces submitted inputs into one frame-owned fold', async () => {
const h = mountScroll()
h.startFold()
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 f17eb0fcdb..5f8de03ab8 100644
--- a/packages/client/ui-chat/tests/chat-view.client.spec.tsx
+++ b/packages/client/ui-chat/tests/chat-view.client.spec.tsx
@@ -9,7 +9,7 @@ import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testi
import { useEffect, useMemo } from 'react'
import type {
AssistantMessageNode, ChatFlowHookContext, ChatFlowOwnerProps, ChatFlowSlotProps,
- ChatNode, ChatNodeHookContext, ChatNodeOwnerProps, ChatSnapshot,
+ ChatNode, ChatNodeHookContext, ChatNodeOwnerProps, ChatSnapshot, UserBeforeOwnerProps,
ChatViewSlotProps, CommandNode, CompactionSummaryNode, ContextMessageNode, ConversationNode,
LegacyConversationSlice, ModelRetryNode, StartedToolCall, SteeringMessageNode,
ToolCallBlock, ToolResultNode, TurnErrorNode, TurnMaxTokensNode,
@@ -264,6 +264,9 @@ declare const flowDispatch: PropsRenderSlots<'conversation.chat.flow'>['renderSl
type NodeRenderer = typeof nodeDispatch<'conversation.chat.node'>
type FlowRenderer = typeof flowDispatch<'conversation.chat.flow'>
type ImageRenderer = (owner: MessageImagesOwnerProps) => React.ReactNode
+declare const userChainDispatch: PropsRenderSlots<'conversation.chat.user.before'>['renderSlotChain']
+type UserChainRenderer = typeof userChainDispatch<'conversation.chat.user.before'>
+type UserChainState = { readonly renderer: UserChainRenderer | undefined }
type HarnessStandardProps = ChatViewSlotProps & PropsRenderFactories
function isImageOwner(owner: object): owner is MessageImagesOwnerProps {
@@ -293,10 +296,22 @@ function HarnessChatFlow({ standard, owner, hookContext, renderSlot, useConnecti
useGroupHeaderAction: CHAT_FLOW_INJECT.hooks.groupHeaderAction(standard, hookContext),
}), [standard, hookContext])
const { renderSlot: _rootRenderSlot, __renders: _rootRenders, ...shared } = standard
- return
+ readonly owner: UserBeforeOwnerProps
+ readonly options: Parameters[2]
+}) {
+ const renderer = useRenderer(value => value.renderer)
+ return renderer?.('conversation.chat.user.before', owner, options) ?? options?.fallback ?? null
+}
+
+function HarnessChatNode({
+ standard, owner, hookContext, usePerformanceUsage, toolOwners, fallback, renderAssistantSlot, renderUserChain,
+}: {
readonly standard: HarnessStandardProps
readonly owner: RoutedChatNodeOwner
readonly hookContext: ChatNodeHookContext
@@ -304,6 +319,7 @@ function HarnessChatNode({ standard, owner, hookContext, usePerformanceUsage, to
readonly toolOwners: ToolOwner[]
readonly fallback: React.ReactNode
readonly renderAssistantSlot: React.ComponentProps['renderSlot']
+ readonly renderUserChain: PropsRenderSlots<'conversation.chat.user.before'>['renderSlotChain']
}) {
const hooks = useMemo(() => ({
useTurnData: CHAT_NODE_INJECT.hooks.turnData(standard, hookContext),
@@ -314,9 +330,9 @@ function HarnessChatNode({ standard, owner, hookContext, usePerformanceUsage, to
const nodeProps = { ...shared, ...owner, ...hooks }
switch (owner.node.kind) {
case 'user':
- return null} />
case 'context':
return ('completion')
const foldedReplies = createSnapshotStore('all')
const performanceUsage = createSnapshotStore<'compact' | 'detailed'>('detailed')
+ const originRenderer = createSnapshotStore({ renderer: undefined })
const t = makeTranslate(zh, commonZh)
const toolOwners: ToolOwner[] = []
const usePerformanceUsage = bindSnapshotSelector(performanceUsage)
+ const useOriginRenderer = bindSnapshotSelector(originRenderer)
let nodeSlotOverride: NodeRenderer | undefined
let imageSlotOverride: ImageRenderer | undefined
const renderImages = (name: string, owner: object, options?: { fallback?: React.ReactNode }) => {
@@ -438,7 +456,8 @@ function makeHarness(
if (nodeSlotOverride !== undefined) return nodeSlotOverride(key, owner, opts)
return ((_key, owner) => {owner.kind})
+ const empty = vi.fn(() => null)
+ const view = render(('[data-chat-flow-kind="user"]')!
+ const steeringRow = view.container.querySelector('[data-chat-flow-kind="steering"]')!
+ expect(userRow).not.toBeNull()
+ expect(steeringRow).not.toBeNull()
+ const bubble = userRow.querySelector('[data-message-bubble]')
+ const text = within(userRow).getByText('question').firstChild
+ const copy = within(userRow).getByRole('button', { name: '复制' })
+ const actions = copy.closest('[data-clock]')
+ const steeringBubble = steeringRow.querySelector('[data-message-bubble]')
+ const steeringText = within(steeringRow).getByText('direction').firstChild
+ const steeringCopy = within(steeringRow).getByRole('button', { name: '复制' })
+ expect(bubble).not.toBeNull()
+ expect(text?.nodeType).toBe(Node.TEXT_NODE)
+ expect(actions).not.toBeNull()
+ expect(steeringBubble).not.toBeNull()
+ expect(steeringText?.nodeType).toBe(Node.TEXT_NODE)
+ expect(origin).not.toHaveBeenCalled()
+ expect(view.container.querySelector('[data-test-origin]')).toBeNull()
+
+ for (const renderer of [origin, empty, undefined]) {
+ act(() => { h.setOriginRenderer(renderer) })
+
+ expect(view.container.querySelector('[data-chat-flow-kind="user"]')).toBe(userRow)
+ expect(userRow.querySelector('[data-message-bubble]')).toBe(bubble)
+ expect(within(userRow).getByText('question').firstChild).toBe(text)
+ expect(within(userRow).getByRole('button', { name: '复制' })).toBe(copy)
+ expect(copy.closest('[data-clock]')).toBe(actions)
+ expect(view.container.querySelector('[data-chat-flow-kind="steering"]')).toBe(steeringRow)
+ expect(steeringRow.querySelector('[data-message-bubble]')).toBe(steeringBubble)
+ expect(within(steeringRow).getByText('direction').firstChild).toBe(steeringText)
+ expect(within(steeringRow).getByRole('button', { name: '复制' })).toBe(steeringCopy)
+ expect(steeringRow.querySelector('[data-test-origin]')).toBeNull()
+ const label = userRow.querySelector('[data-test-origin]')
+ if (renderer === origin) {
+ expect(label?.textContent).toBe('user')
+ expect(label!.compareDocumentPosition(bubble!) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0)
+ } else {
+ expect(label).toBeNull()
+ }
+ }
+ expect(origin).toHaveBeenCalledExactlyOnceWith(
+ 'conversation.chat.user.before', { source: null, kind: 'user' }, { fallback: null },
+ )
+ expect(empty).toHaveBeenCalledExactlyOnceWith(
+ 'conversation.chat.user.before', { source: null, kind: 'user' }, { fallback: null },
+ )
+ })
+
it('renders Host-pending steering at the flow tail and hands off to the durable node', withClock(2_000, () => {
const writeText = vi.fn().mockResolvedValue(undefined)
Object.defineProperty(navigator, 'clipboard', {
@@ -4589,7 +4666,13 @@ describe('ChatView', () => {
expect(icon?.querySelectorAll('path')).toHaveLength(1)
expect(icon?.getAttribute('style')).toBeNull()
expect(status?.querySelector('animate')).toBeNull()
+ // The running bit clears before the Turn closes: the status keeps its slot unseen and unannounced.
act(() => { h.setSession({ running: false }) })
+ const held = column.querySelector('[data-chat-running]')
+ expect(held?.hasAttribute('data-holding')).toBe(true)
+ expect(held?.getAttribute('aria-hidden')).toBe('true')
+ expect(within(held!).queryByRole('status')).toBeNull()
+ act(() => { h.setChat({ turnEnds: new Map([[1, 2]]) }) })
expect(column.querySelector('[data-chat-running]')).toBeNull()
})
diff --git a/packages/client/ui-chat/tests/chat-viewport.client.spec.ts b/packages/client/ui-chat/tests/chat-viewport.client.spec.ts
index ab7e5cfb96..def772efb8 100644
--- a/packages/client/ui-chat/tests/chat-viewport.client.spec.ts
+++ b/packages/client/ui-chat/tests/chat-viewport.client.spec.ts
@@ -1,7 +1,6 @@
// @vitest-environment jsdom
import { expect, it, onTestFinished, vi } from 'vitest'
-import { ChatReading } from '../src/client/chat/use-chat-reading.ts'
import { ChatViewport } from '../src/client/chat/use-chat-viewport.ts'
import { ScrollFollow, scrollMetrics } from '../src/client/chat/use-scroll-follow.ts'
@@ -561,167 +560,3 @@ it('releases a removed paging row without navigating to unrelated content', () =
expect(h.viewport.preserving).toBe(false)
expect(h.scroller.scrollTop).toBe(80)
})
-
-it('pins the tail only while sampled follow intent holds over overflowing content, writing the mark on change', async () => {
- vi.useFakeTimers()
- let notifyResize = () => {}
- class Observer implements ResizeObserver {
- constructor(callback: ResizeObserverCallback) { notifyResize = () => { callback([], this) } }
- observe(): void {}
- unobserve(): void {}
- disconnect(): void {}
- }
- vi.stubGlobal('ResizeObserver', Observer)
- const scroller = document.createElement('div')
- const column = document.createElement('div')
- scroller.append(column)
- document.body.append(scroller)
- let content = 200
- let top = 0
- const floor = () => Math.max(0, content - 300)
- Object.defineProperties(scroller, {
- clientHeight: { configurable: true, get: () => 300 },
- scrollHeight: { configurable: true, get: () => Math.max(300, content) },
- scrollTop: {
- configurable: true,
- get: () => Math.min(top, floor()),
- set: (value: number) => { top = Math.max(0, Math.min(value, floor())) },
- },
- })
- const viewport = new ChatViewport()
- viewport.attach(scroller, column)
- const follow = new ScrollFollow(true, 4)
- const reading = new ChatReading(viewport, { read: () => null, save: vi.fn() }, {
- initialized: true, followingTail: true, activeTurn: 1,
- }, vi.fn(), follow)
- const unbind = reading.bindFolds()
- viewport.connect({
- scroll: reading.onScroll, scrollEnd: reading.onScrollEnd, interact: () => {},
- resize: () => { reading.onResize() },
- })
- const writes: (string | null)[] = []
- const mutations = new MutationObserver((records) => {
- for (const record of records) writes.push(record.oldValue)
- })
- mutations.observe(column, { attributes: true, attributeFilter: ['data-chat-tail-pinned'], attributeOldValue: true })
- onTestFinished(() => {
- mutations.disconnect()
- unbind()
- reading.dispose()
- viewport.detach()
- scroller.remove()
- vi.useRealTimers()
- vi.unstubAllGlobals()
- })
- const pinned = () => column.hasAttribute('data-chat-tail-pinned')
- const scrollTo = (value: number) => {
- scroller.scrollTop = value
- scroller.dispatchEvent(new Event('scroll'))
- }
-
- // Content that fits moves the tail on screen, so status moves keep their duration.
- notifyResize()
- expect(pinned()).toBe(false)
- // Growth that overflows is followed to the floor within the same resize, then pinned.
- content = 900
- notifyResize()
- expect(scroller.scrollTop).toBe(600)
- expect(pinned()).toBe(true)
- // Further growth and scroll deliveries at the floor keep the pin without rewriting it.
- content = 950
- notifyResize()
- scroller.dispatchEvent(new Event('scroll'))
- expect(pinned()).toBe(true)
- // A reader scroll away leaves follow intent set until its sample settles; growth in that window is not
- // followed, so the pin drops at once.
- scrollTo(300)
- expect(reading.pending).toBe(true)
- expect(follow.active).toBe(true)
- expect(pinned()).toBe(false)
- content = 1_000
- notifyResize()
- expect(scroller.scrollTop).toBe(300)
- expect(pinned()).toBe(false)
- // The settled sample releases follow intent; returning to the floor restores both.
- await vi.advanceTimersByTimeAsync(500)
- expect(follow.active).toBe(false)
- expect(pinned()).toBe(false)
- scrollTo(700)
- expect(follow.active).toBe(true)
- expect(pinned()).toBe(true)
- await Promise.resolve()
- // Set, removed, set: one write per pin change.
- expect(writes).toEqual([null, '', null])
- viewport.detach()
- expect(pinned()).toBe(false)
-})
-
-it('leaves the tail unpinned while fold room takes growth, then pins once the room is used', () => {
- let notifyResize = () => {}
- class Observer implements ResizeObserver {
- constructor(callback: ResizeObserverCallback) { notifyResize = () => { callback([], this) } }
- observe(): void {}
- unobserve(): void {}
- disconnect(): void {}
- }
- vi.stubGlobal('ResizeObserver', Observer)
- const scroller = document.createElement('div')
- const column = document.createElement('div')
- const spacer = document.createElement('div')
- spacer.dataset.chatTurnSpacer = ''
- scroller.append(column, spacer)
- document.body.append(scroller)
- let content = 900
- let top = 0
- const room = () => Number.parseFloat(spacer.style.height) || 0
- const floor = () => Math.max(0, content + room() - 300)
- Object.defineProperties(scroller, {
- clientHeight: { configurable: true, get: () => 300 },
- scrollHeight: { configurable: true, get: () => Math.max(300, content + room()) },
- scrollTop: {
- configurable: true,
- get: () => Math.min(top, floor()),
- set: (value: number) => { top = Math.max(0, Math.min(value, floor())) },
- },
- })
- const viewport = new ChatViewport()
- viewport.attach(scroller, column)
- const follow = new ScrollFollow(true, 4)
- const reading = new ChatReading(viewport, { read: () => null, save: vi.fn() }, {
- initialized: true, followingTail: true, activeTurn: 1,
- }, vi.fn(), follow)
- const unbind = reading.bindFolds()
- viewport.connect({
- scroll: reading.onScroll, scrollEnd: reading.onScrollEnd, interact: () => {},
- resize: () => { reading.onResize() },
- })
- onTestFinished(() => {
- unbind()
- reading.dispose()
- viewport.detach()
- scroller.remove()
- vi.unstubAllGlobals()
- })
- const pinned = () => column.hasAttribute('data-chat-tail-pinned')
-
- notifyResize()
- expect(scroller.scrollTop).toBe(600)
- expect(pinned()).toBe(true)
- // A fold landing leaves room below the content and commits the tail landing.
- spacer.style.height = '200px'
- scroller.scrollTop = 800
- reading.followTail()
- expect(pinned()).toBe(false)
- // Growth fills the room without scrolling, so the status moves on screen and keeps its slide.
- content = 940
- notifyResize()
- expect(room()).toBe(160)
- expect(scroller.scrollTop).toBe(800)
- expect(pinned()).toBe(false)
- // Once growth has used the room, following scrolls absorb it again.
- content = 1_100
- notifyResize()
- expect(room()).toBe(0)
- expect(scroller.scrollTop).toBe(800)
- expect(pinned()).toBe(true)
-})
diff --git a/packages/client/ui-chat/tests/fold-follow.client.spec.ts b/packages/client/ui-chat/tests/fold-follow.client.spec.ts
index 19a3dea326..92473b7968 100644
--- a/packages/client/ui-chat/tests/fold-follow.client.spec.ts
+++ b/packages/client/ui-chat/tests/fold-follow.client.spec.ts
@@ -174,6 +174,45 @@ it('keeps the reader landing while reader movement awaits sampling', async () =>
vi.advanceTimersByTime(500)
})
+/** Stub the size observer so a test can mark the layout a following reader last saw painted. */
+function observePaint(): () => void {
+ let observe = (): void => {}
+ vi.stubGlobal('ResizeObserver', class implements ResizeObserver {
+ constructor(callback: ResizeObserverCallback) { observe = () => { callback([], this) } }
+ observe(): void {}
+ unobserve(): void {}
+ disconnect(): void {}
+ })
+ return () => { observe() }
+}
+
+it('takes content growth outside the batch since the last paint before animating a following reader', async () => {
+ const painted = observePaint()
+ const h = fixture({ earlier: 600, later: 0, top: 2_000, following: true })
+ painted()
+ // A row above the reader, such as a Turn's duration control, arrives with the commit that starts the batch.
+ h.grow(2_449)
+ h.viewport.motion.collapse(h.row, () => { h.row.hidden = true; h.grow(649) })
+ await Promise.resolve()
+ runFrameCount(1)
+ expect(h.list.scrollTop).toBe(2_049)
+ runFrames()
+ expect(h.reading.followingTail).toBe(true)
+})
+
+it('animates growth that arrives with the reader\'s own input', async () => {
+ const painted = observePaint()
+ const h = fixture({ earlier: 600, later: 0, top: 2_000, following: true })
+ painted()
+ h.grow(2_449)
+ h.viewport.motion.collapse(h.row, () => { h.row.hidden = true; h.grow(649) })
+ expect(h.reading.followInputFold(true)).toBe(true)
+ await Promise.resolve()
+ runFrameCount(1)
+ expect(h.list.scrollTop).toBe(2_000)
+ runFrames()
+})
+
it('lands a tail batch on the committed content when it reaches past the estimate', async () => {
const h = fixture(VISIBLE_ROW)
// Content arriving with the hidden commit is not in the estimate; the landing reads the real floor.
diff --git a/packages/client/ui-chat/tests/turn-tail-spacing.client.spec.ts b/packages/client/ui-chat/tests/turn-tail-spacing.client.spec.ts
index 8bc6bcd08f..729628816f 100644
--- a/packages/client/ui-chat/tests/turn-tail-spacing.client.spec.ts
+++ b/packages/client/ui-chat/tests/turn-tail-spacing.client.spec.ts
@@ -1,4 +1,4 @@
-/** CSS checks for the Turn tail slot and the running status's move below a Step's first output. */
+/** CSS checks for the Turn tail slot and the running status's entrance after admitted steering. */
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
@@ -7,6 +7,11 @@ const read = (name: string): string =>
readFileSync(fileURLToPath(new URL(`../src/client/chat/${name}`, import.meta.url)), 'utf8')
describe('Turn tail slot spacing', () => {
+ it('gives a Turn duration control its gap without a transition while rows fold', () => {
+ const view = read('ChatView.module.css')
+ expect(view).toMatch(new RegExp(String.raw`\.column\[data-chat-motion\] > :global\(\[data-slot="conversation\.chat\.flow"\]\) > \[data-chat-flow-kind="turn-process"\] \{\s*transition: none;`))
+ })
+
it('combines the flow and footer offsets around turn-tail content', () => {
expect(read('ChatView.module.css')).toMatch(/margin-top:\s*var\(--dsh-chat-flow-gap, 4px\)/)
const tail = read('TurnTailNodeView.module.css')
@@ -42,55 +47,30 @@ describe('Turn tail slot spacing', () => {
})
})
-describe('Running status move below the first output', () => {
+describe('Running status entrance after admitted steering', () => {
const row = String.raw`calc\(24px \+ var\(--dsh-content-font-delta, 0px\)\)`
- const travel = (gap: number) => String.raw`--dsh-running-follow: calc\(${gap}px \+ 24px \+ var\(--dsh-content-font-delta, 0px\)\);`
- it('travels the first output row gap plus one font-scaled row', () => {
+ it('enters its new slot from one slot higher, outside reduced motion', () => {
const view = read('ChatView.module.css')
- // A process row or group header after a mid-Turn input: the default sits on the single-class
- // status rule, the lowest-specificity selector, so each variant below outranks it.
- expect(view).toMatch(new RegExp(String.raw`\n\.running \{[^}]*${travel(4)}`))
- expect(view.match(/--dsh-running-follow: calc\(/g)).toHaveLength(3)
- // A response keeps its 12px clearance.
- expect(view).toMatch(new RegExp(String.raw`\)\)\)\)\[data-chat-group-part="response"\] ~ \.running \{\s*${travel(12)}`))
- // A new Turn's first output follows the empty running process control at its 16px clearance.
- expect(view).toMatch(new RegExp(String.raw`> \[data-chat-flow-kind="turn-process"\] \+ :nth-last-child\(2 of [^{]*\) ~ \.running \{\s*${travel(16)}`))
+ expect(view).toMatch(new RegExp(String.raw`@media \(prefers-reduced-motion: no-preference\) \{\s*:where\(\.column > [^{]*\[data-chat-flow-kind="steering"\]\) \+ \.running \{\s*`
+ + String.raw`animation: running-enters-slot 140ms cubic-bezier\(0\.2, 0\.8, 0\.2, 1\);`))
+ expect(view).toMatch(new RegExp(String.raw`@keyframes running-enters-slot \{\s*from \{\s*opacity: 0;\s*`
+ + String.raw`translate: 0 calc\(-44px - var\(--dsh-content-font-delta, 0px\)\);\s*\}\s*40% \{\s*opacity: 1;`))
})
- it('slides the status from where it stood, like the steering entrance, outside reduced motion', () => {
- const view = read('ChatView.module.css')
- expect(view).toMatch(new RegExp(String.raw`@media \(prefers-reduced-motion: no-preference\) \{\s*:where\(\.column > [^{]*\[data-chat-group-key\]\s*\)\) ~ \.running \{\s*`
- + String.raw`animation: running-follows-output 110ms cubic-bezier\(0\.4, 0, 0\.2, 1\);`))
- expect(view).toMatch(new RegExp(String.raw`@keyframes running-follows-output \{\s*from \{\s*opacity: 0;\s*`
- + String.raw`translate: 0 calc\(-1 \* var\(--dsh-running-follow\)\);\s*\}\s*40% \{\s*opacity: 1;`))
- })
-
- it('lets input folds and the pinned tail change only the duration of a status move', () => {
+ it('is the only status move, and an input fold changes only its duration', () => {
const view = read('ChatView.module.css')
const normalize = (selector: string) => selector.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').trim()
- // Structure alone names each move, so a switch turning off never adds an animation name and replays a
- // finished move. The structure sits in :where() so the switch rules outrank it.
- const moves = [...view.matchAll(/([^{}]+)\{\s*animation: running-(?:enters-slot|follows-output) /g)].map(match => normalize(match[1]!))
- expect(moves).toHaveLength(2)
- for (const selector of moves) {
- expect(selector).toMatch(/^:where\(/)
- expect(selector).not.toMatch(/data-input-fold|data-chat-tail-pinned/)
- }
- // An input fold zeroes both moves; the pinned tail zeroes only the first-output slide, whose structure it
- // repeats, and leaves the entrance after admitted steering at its duration.
- const slide = moves.find(selector => selector.includes('[data-chat-group-key]'))!
- expect(slide.endsWith(') ~ .running')).toBe(true)
- const slideStructure = slide.slice(':where('.length, -') ~ .running'.length)
+ // Structure alone names the move, so lifting the switch never adds an animation name and replays it.
+ const moves = [...view.matchAll(/([^{}]+)\{\s*animation: running-[\w-]+ /g)].map(match => normalize(match[1]!))
+ expect(moves).toHaveLength(1)
+ expect(moves[0]).toMatch(/^:where\(/)
+ expect(moves[0]).not.toMatch(/data-input-fold/)
const switches = [...view.matchAll(/([^{}]+)\{\s*animation-duration: 0s;\s*\}/g)].map(match => normalize(match[1]!))
- expect(switches).toEqual([
- '.column[data-input-fold] .running',
- `${slideStructure.replace(/^\.column/, '.column[data-chat-tail-pinned]')} ~ .running`,
- ])
- expect(view.match(/data-chat-tail-pinned/g)).toHaveLength(1)
+ expect(switches).toEqual(['.column[data-input-fold] .running'])
})
- it('sizes every first-output row to the travelled row height', () => {
+ it('sizes the first output rows to one font-scaled row', () => {
expect(read('ReasoningRow.module.css')).toMatch(new RegExp(String.raw`\.root:not\(\[data-expanded\]\) \{[^}]*height: ${row};`))
expect(read('ChatGroupSeat.module.css')).toMatch(new RegExp(String.raw`\.title \{[^}]*line-height: ${row};`))
expect(read('AssistantMarkdown.module.css')).toMatch(new RegExp(String.raw`\.root \{[^}]*line-height: ${row};`))
diff --git a/packages/client/ui-chat/tests/user-origin-slot.client.spec.tsx b/packages/client/ui-chat/tests/user-origin-slot.client.spec.tsx
new file mode 100644
index 0000000000..7a522be8ed
--- /dev/null
+++ b/packages/client/ui-chat/tests/user-origin-slot.client.spec.tsx
@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+/**
+ * The official user renderer owns the source-decoration chain above its bubble.
+ * Steering rows do not render the chain; changing its occupant preserves the
+ * existing message content and actions.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
+import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
+import type {
+ ChatConversationViewNode, SteeringMessageNode, UserMessageNode,
+} from '@deepseek-ai/dsh-client-ui-chat/client'
+import type { ChatNodeViewProps, UserContentInput } from '../src/client/contract/slots.ts'
+import { UserMessageNodeView } from '../src/client/chat/MessageItem.tsx'
+import { zh } from '../src/client/locale.ts'
+import { createUserContentFixture } from './user-content-component-fixture.tsx'
+import { unusedImageLoader } from './reasoning-component-fixture.tsx'
+
+afterEach(cleanup)
+
+const t: ChatNodeViewProps['t'] = makeTranslate(zh, commonZh)
+type UserSlots = PropsRenderSlots<'conversation.chat.user.before'>
+const userSlots: UserSlots = {
+ renderSlot: () => null,
+ renderSlotChain: (_key, _owner, opts) => opts?.fallback ?? null,
+ SessionProvider: ({ children }) => <>{children},
+}
+
+/** One durable source, unread by Chat itself. */
+const SHARED = { kind: 'user', principal: { kind: 'share-viewer', shareId: 'share-1', actor: { subjectId: 'subject-42' } } }
+
+let renderUserContent: ReturnType
+beforeEach(() => { renderUserContent = createUserContentFixture() })
+
+const renderUserFactory: ChatNodeViewProps['renderFactorySlot'] = (name, input) => {
+ if (name !== 'conversation.chat.user.content') throw new Error(`Unexpected Chat Factory: ${name}`)
+ return renderUserContent(input as UserContentInput, () => null, t)
+}
+
+function viewProps(data: UserMessageNode): ChatNodeViewProps<'user'>
+function viewProps(data: SteeringMessageNode): ChatNodeViewProps<'steering'>
+function viewProps(data: UserMessageNode | SteeringMessageNode): ChatNodeViewProps<'user' | 'steering'> {
+ const node = {
+ key: `fixture:${data.kind}:${String(data.seq)}`,
+ id: String(data.seq),
+ kind: data.kind,
+ target: 'chat',
+ anchorSeq: data.seq,
+ location: { kind: 'session' },
+ visibility: 'visible',
+ data,
+ } as ChatConversationViewNode
+ const props: Partial> & { node: ChatConversationViewNode } = {
+ node, t, loadImage: unusedImageLoader, renderFactorySlot: renderUserFactory, openFile: vi.fn(),
+ }
+ return props as ChatNodeViewProps<'user' | 'steering'>
+}
+
+const userData: UserMessageNode = {
+ kind: 'user',
+ seq: 7,
+ time: 7_000,
+ content: [{ type: 'text', text: 'hello' }] as never,
+ source: SHARED,
+}
+
+const steeringData: SteeringMessageNode = {
+ kind: 'steering',
+ messageId: 'fixture-steering' as SteeringMessageNode['messageId'],
+ seq: 8,
+ time: 8_000,
+ content: [{ type: 'text', text: 'steer' }] as never,
+ source: SHARED,
+}
+
+describe('official user renderer origin seat', () => {
+ it('renders the source chain above the bubble and passes the durable source', () => {
+ const renderSlotChain = vi.fn(() => 来自会话分享)
+ const view = render( null} />
+ )
+ const steeringRow = view.container.lastElementChild!
+ expect(steeringRow.textContent).toContain('steer')
+
+ expect(renderSlotChain).toHaveBeenCalledExactlyOnceWith(
+ 'conversation.chat.user.before', { source: SHARED, kind: 'user' }, { fallback: null },
+ )
+ expect(view.container.querySelectorAll('[data-test-origin]')).toHaveLength(1)
+ expect(steeringRow.querySelector('[data-test-origin]')).toBeNull()
+ expect(view.container.querySelector('[data-chat-steering-batch]')).toBeNull()
+ })
+})
diff --git a/packages/client/ui-commands/package.json b/packages/client/ui-commands/package.json
index 0f97864fff..9fedd2d491 100644
--- a/packages/client/ui-commands/package.json
+++ b/packages/client/ui-commands/package.json
@@ -1,7 +1,7 @@
{
"name": "@deepseek-ai/dsh-client-ui-commands",
"description": "Client command surface: global directory cache, '/' source, three command UI kinds, popupSelect registry",
- "version": "0.2.1-rc.3",
+ "version": "0.2.2-alpha.2",
"publishConfig": {
"access": "public"
},
diff --git a/packages/client/ui-conversation/README.i18n.yaml b/packages/client/ui-conversation/README.i18n.yaml
index 09a0211fa7..353750e5e9 100644
--- a/packages/client/ui-conversation/README.i18n.yaml
+++ b/packages/client/ui-conversation/README.i18n.yaml
@@ -21,8 +21,8 @@
en: cc4dafd1aae02468
zh: be6b67724b7ac4a3
/deepseek-ai-dsh-client-ui-conversation/shell-and-standard-props:
- en: c62e2e19c9680567
- zh: e05ba69f967918c0
+ en: 9b596b668979544a
+ zh: 159f24dfc8715c92
/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 3b57654892..0633998db6 100644
--- a/packages/client/ui-conversation/README.md
+++ b/packages/client/ui-conversation/README.md
@@ -68,6 +68,8 @@ The existing semantic `DraftSnapshot` retains quote text and clipboard-coordinat
## Shell and standard props
+Below 768px, Web view tabs align with the header's 20px left inset. Desktop and wider Web windows retain the additional 8px tab inset.
+
The shared image slot props keep display choices separate from durable references: `thumbnail` requests a contained attachment-list thumbnail, while `compact` requests a cropped gallery tile. An optional per-image `label` supplies the accessible display name; loading and cache identity still use the original attachment reference. `MessageImagesContentInput` adds optional complete `MessageImageLabels` for the root-scoped `conversation.images.content` Factory. Message, tool, and Factory inputs carry the view's authorized `loadImage` callback explicitly; loading and URL caching remain with the resource owner. [ui-attachment](../ui-attachment/README.md) provides this Factory and owns rendering and the lightbox.
The composer uses a minimum 16px draft font on coarse-pointer devices to avoid focus-triggered browser zoom; larger font preferences still apply.
@@ -82,7 +84,7 @@ The context-occupancy button shows a ring and percentage below the input card, a
With Coding Tools off, the shell hides only Trajectory; other plugin-contributed Views remain available. The View tab bar is hidden when fewer than two Views are available. Turning Coding Tools off while Trajectory is active returns to Chat; stored View preferences and recorded Session data remain intact. Turning it on makes Trajectory available again. View owners receive the available roster so their navigation actions can follow the same visibility.
-While the root-scoped `conversation.session.header.views.actions` list has registrations, a **More conversation views** button with a tooltip follows the View tabs in the tab row. It opens a menu whose rows are that list's registrations. Each receives `entries` (Views outside the header in registration order with `id`, `label`, `pinned`, and `active`; Chat is never listed), `onOpen(id)`, which selects the View in this Session, `onPinnedChange(id, pinned)`, and `onDismiss()`, which closes the menu. The header keeps an in-memory list of unpinned View ids shared by every Session; the tab bar omits unpinned Views and places registered Chat first so it always remains outside More. Plugin reload resets pin choices, and legacy localStorage values are ignored. The tab bar's visibility counts available Views, not pinned ones, so the bar and More stay while every other View is unpinned. Unpinning the active View hides its tab immediately without changing the selected content. More lists only Views outside the header and identifies the current View through `active`. The header reads its available row width, reserves 48px for More and padding, and estimates 120px per tab. Remaining Views keep registration order in More. A single ResizeObserver watches the tab row so window resizing and sidebar expansion update the split; active selection does not change the order. The observer disconnects when the row is removed. If ResizeObserver is unavailable, the initial width calculation still applies without subsequent observation. The More button highlights and names the active View in its tooltip when that View is folded. Each tab label estimates its text width from the glyphs; its full-name tooltip appears only when that estimate exceeds the 88px cell. At least one preferred tab remains outside. Unregistered View ids remain in the in-memory pin list until plugin reload.
+While the root-scoped `conversation.session.header.views.actions` list has registrations, a **More conversation views** button with a tooltip follows the View tabs in the tab row. It opens a menu whose rows are that list's registrations. Each receives `entries` (Views outside the header in registration order with `id`, `label`, `pinned`, and `active`; Chat is never listed), `onOpen(id)`, which selects the View in this Session, `onPinnedChange(id, pinned)`, and `onDismiss()`, which closes the menu. The header keeps an in-memory list of unpinned View ids shared by every Session; the tab bar omits unpinned Views and places registered Chat first so it always remains outside More. Plugin reload resets pin choices, and legacy localStorage values are ignored. The tab bar's visibility counts available Views, not pinned ones, so the bar and More stay while every other View is unpinned. Unpinning the active View hides its tab immediately without changing the selected content. More lists only Views outside the header and identifies the current View through `active`. The header reads its available row width, reserves 48px for More and padding, and estimates 120px per tab. Remaining Views keep registration order in More. A single ResizeObserver watches the tab row so window resizing and sidebar expansion update the split; active selection does not change the order. The observer disconnects when the row is removed. If ResizeObserver is unavailable, the initial width calculation still applies without subsequent observation. The More button highlights when the active View is folded. Each tab label estimates its text width from the glyphs; its full-name tooltip appears only when that estimate exceeds the 88px cell. At least one preferred tab remains outside. Unregistered View ids remain in the in-memory pin list until plugin reload.
The composer registers the File command action and owns its label, availability, and native file-dialog callback. Menu availability and invocation both consult the mounted composer's current attachment-intake policy. Unmounting or locking the composer disables that action; disposing the plugin removes its registration. The callback binding stays inside the input module.
diff --git a/packages/client/ui-conversation/README.zh.md b/packages/client/ui-conversation/README.zh.md
index eebbbfca94..84993c9f9e 100644
--- a/packages/client/ui-conversation/README.zh.md
+++ b/packages/client/ui-conversation/README.zh.md
@@ -68,6 +68,8 @@ Queue 预览启用空白折叠和文档边缘 trim，保留 emoji，并使用 CS
## Shell 与标准 props
+宽度小于 768px 时，Web 的 View 标签与页头的 20px 左内边距对齐。桌面客户端和较宽的 Web 窗口保留标签额外的 8px 左内边距。
+
共享图片插槽属性将展示选择与持久化引用分开：`thumbnail` 请求完整缩放的附件列表缩略图，`compact` 请求裁剪的图片方块。每张图片可通过可选的 `label` 提供无障碍展示名称；加载和缓存标识仍使用原始附件引用。`MessageImagesContentInput` 为 root 作用域的 `conversation.images.content` Factory 增加可选的完整 `MessageImageLabels`。消息、工具及 Factory 输入显式携带视图提供的授权 `loadImage` 回调；读取和 URL 缓存仍由资源所有者负责。[ui-attachment](../ui-attachment/README.zh.md) 提供该 Factory，负责渲染与灯箱。
在粗指针设备上，composer 的草稿字号至少为 16px，以避免获得焦点时浏览器自动放大；更大的字号偏好仍然生效。
@@ -82,7 +84,7 @@ composer 在挂载、切换 Session 和解除锁定时使用共享的[文字输
关闭代码工作工具时，外壳仅隐藏 Trajectory；其他插件贡献的 View 仍然可用。可用 View 少于两个时隐藏 View 标签栏。在 Trajectory 激活时关闭代码工作工具会返回 Chat；已保存的 View 偏好和 Session 记录保持不变。开启后，Trajectory 恢复可用。View 所有者接收可用列表，使导航操作跟随相同的可见性。
-root 作用域的 `conversation.session.header.views.actions` list 有注册项时，标签行中的 View 标签之后显示带提示框的**更多会话视图**按钮。它打开的菜单以该 list 的注册项为菜单行。每个注册项接收 `entries`（按注册顺序的头部之外的 View，含 `id`、`label`、`pinned` 与 `active`；不含 Chat）、在本 Session 选择 View 的 `onOpen(id)`、`onPinnedChange(id, pinned)`，以及关闭菜单的 `onDismiss()`。头部在内存中保存所有 Session 共用的已收起 View id 列表；标签栏不显示已收起的 View，并将已注册的 Chat 放在首位，确保它始终留在更多菜单外。插件重新加载时 Pin 选择重置，不读取旧 localStorage 值。标签栏是否显示按可用 View 计算，不按已固定的 View 计算，因此其他 View 全部收起时，标签栏和“更多”仍然显示。收起当前激活的 View 会立即隐藏其标签，但不会切走其内容。更多菜单仅包含头部之外的 View，通过 `active` 标识当前 View。头部读取当前行可用宽度，为更多按钮与内边距预留 48px，每个标签估算 120px，其余 View 按注册顺序进入更多。单个 ResizeObserver 观察标签行，使窗口缩放和侧栏展开能够更新分组；当前选中项变化不改变顺序。标签行移除时断开观察。如果环境没有 ResizeObserver，仍按初始宽度计算，但不继续观察。当前 View 收起时，更多按钮高亮并在提示框中显示其名称。每个标签按字符宽度估算文本宽度；只有估算结果超过 88px 单元格时，才通过提示框提供全名。至少保留一个优先展示的外部标签。未注册 View 的 id 保留在内存 Pin 列表中，直到插件重新加载。
+root 作用域的 `conversation.session.header.views.actions` list 有注册项时，标签行中的 View 标签之后显示带提示框的**更多会话视图**按钮。它打开的菜单以该 list 的注册项为菜单行。每个注册项接收 `entries`（按注册顺序的头部之外的 View，含 `id`、`label`、`pinned` 与 `active`；不含 Chat）、在本 Session 选择 View 的 `onOpen(id)`、`onPinnedChange(id, pinned)`，以及关闭菜单的 `onDismiss()`。头部在内存中保存所有 Session 共用的已收起 View id 列表；标签栏不显示已收起的 View，并将已注册的 Chat 放在首位，确保它始终留在更多菜单外。插件重新加载时 Pin 选择重置，不读取旧 localStorage 值。标签栏是否显示按可用 View 计算，不按已固定的 View 计算，因此其他 View 全部收起时，标签栏和“更多”仍然显示。收起当前激活的 View 会立即隐藏其标签，但不会切走其内容。更多菜单仅包含头部之外的 View，通过 `active` 标识当前 View。头部读取当前行可用宽度，为更多按钮与内边距预留 48px，每个标签估算 120px，其余 View 按注册顺序进入更多。单个 ResizeObserver 观察标签行，使窗口缩放和侧栏展开能够更新分组；当前选中项变化不改变顺序。标签行移除时断开观察。如果环境没有 ResizeObserver，仍按初始宽度计算，但不继续观察。当前 View 收起时，更多按钮高亮。每个标签按字符宽度估算文本宽度；只有估算结果超过 88px 单元格时，才通过提示框提供全名。至少保留一个优先展示的外部标签。未注册 View 的 id 保留在内存 Pin 列表中，直到插件重新加载。
输入框注册「文件」命令动作，负责其标题、可用性和原生文件选择器回调。菜单可用性与实际调用都读取已挂载输入框当前的附件接收策略。输入框卸载或锁定后该动作不可用，插件 dispose（资源释放）时移除注册。回调绑定留在输入模块内部。
diff --git a/packages/client/ui-conversation/package.json b/packages/client/ui-conversation/package.json
index 050319168e..d2924b00e3 100644
--- a/packages/client/ui-conversation/package.json
+++ b/packages/client/ui-conversation/package.json
@@ -1,7 +1,7 @@
{
"name": "@deepseek-ai/dsh-client-ui-conversation",
"description": "Target-neutral Conversation assembly, shell, composer, queue, and view navigation",
- "version": "0.2.1-rc.3",
+ "version": "0.2.2-alpha.2",
"publishConfig": {
"access": "public"
},
diff --git a/packages/client/ui-conversation/src/client/locales.ts b/packages/client/ui-conversation/src/client/locales.ts
index 5606842886..dca76eb57f 100644
--- a/packages/client/ui-conversation/src/client/locales.ts
+++ b/packages/client/ui-conversation/src/client/locales.ts
@@ -81,7 +81,6 @@ export const zh = {
'hero.chooseWorkspace': '选择工作区',
'session.hierarchy': '会话层级',
'session.moreViews': '更多会话视图',
- 'session.moreViewsCurrent': '更多会话视图 · {name}',
'todo.title': '任务',
'todo.progress.done': '{done} 已完成',
'todo.progress.active': '{active} 进行中',
@@ -465,7 +464,6 @@ export const en = {
'hero.chooseWorkspace': 'Choose workspace',
'session.hierarchy': 'Session hierarchy',
'session.moreViews': 'More conversation views',
- 'session.moreViewsCurrent': 'More conversation views · {name}',
'todo.title': 'To-dos',
'todo.progress.done': '{done} completed',
'todo.progress.active': '{active} in progress',
@@ -848,7 +846,6 @@ export const ja = {
'hero.chooseWorkspace': 'ワークスペースを選択',
'session.hierarchy': 'セッション階層',
'session.moreViews': 'その他の会話ビュー',
- 'session.moreViewsCurrent': 'その他の会話ビュー · {name}',
'todo.title': 'ToDo',
'todo.progress.done': '{done}件完了',
'todo.progress.active': '{active}件進行中',
@@ -1229,7 +1226,6 @@ export const es = {
'hero.chooseWorkspace': 'Elige espacio de trabajo',
'session.hierarchy': 'Jerarquía de sesiones',
'session.moreViews': 'Más vistas de conversación',
- 'session.moreViewsCurrent': 'Más vistas de conversación · {name}',
'todo.title': 'Tareas pendientes',
'todo.progress.done': '{done} completado',
'todo.progress.active': '{active} en progreso',
@@ -1612,7 +1608,6 @@ export const fr = {
'hero.chooseWorkspace': 'Choisir un espace de travail',
'session.hierarchy': 'Hiérarchie des sessions',
'session.moreViews': 'Plus de vues de conversations',
- 'session.moreViewsCurrent': 'Plus de vues de conversations · {name}',
'todo.title': 'À faire',
'todo.progress.done': '{done} terminé',
'todo.progress.active': '{active} en cours',
@@ -1995,7 +1990,6 @@ export const de = {
'hero.chooseWorkspace': 'Wählen Sie einen Arbeitsbereich',
'session.hierarchy': 'Sitzungshierarchie',
'session.moreViews': 'Weitere Konversationsansichten',
- 'session.moreViewsCurrent': 'Weitere Konversationsansichten · {name}',
'todo.title': 'Aufgaben',
'todo.progress.done': '{done} abgeschlossen',
'todo.progress.active': '{active} in Bearbeitung',
@@ -2378,7 +2372,6 @@ export const ru = {
'hero.chooseWorkspace': 'Выберите рабочее пространство',
'session.hierarchy': 'Иерархия сеансов',
'session.moreViews': 'Больше просмотров беседы',
- 'session.moreViewsCurrent': 'Больше просмотров беседы · {name}',
'todo.title': 'Дела',
'todo.progress.done': '{done} завершено',
'todo.progress.active': '{active} в процессе',
@@ -2761,7 +2754,6 @@ export const pt = {
'hero.chooseWorkspace': 'Escolha o espaço de trabalho',
'session.hierarchy': 'Hierarquia de sessão',
'session.moreViews': 'Mais visualizações de conversas',
- 'session.moreViewsCurrent': 'Mais visualizações de conversas · {name}',
'todo.title': 'Tarefas',
'todo.progress.done': '{done} concluído',
'todo.progress.active': '{active} em andamento',
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
index ac6cb69f70..bf1a1e8d02 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
@@ -224,6 +224,12 @@
padding-left: 8px;
}
+@media (max-width: 767px) {
+ :global(html:not([data-platform])) .tabs {
+ padding-left: 0;
+ }
+}
+
.viewTabs {
display: flex;
flex-wrap: wrap;
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx b/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx
index 896d953c9f..deaddcf769 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx
@@ -234,7 +234,7 @@ export function ConversationSessionHeader({
{hasEntryActions && (
+ {holding ? null : (
+ {t('chat.deepDiving')}
+ )}
{label}
+ {label}
)
diff --git a/packages/client/ui-chat/src/client/chat/flow-motion.ts b/packages/client/ui-chat/src/client/chat/flow-motion.ts
index ea5bd225e8..b34c1f2645 100644
--- a/packages/client/ui-chat/src/client/chat/flow-motion.ts
+++ b/packages/client/ui-chat/src/client/chat/flow-motion.ts
@@ -23,6 +23,12 @@ export interface FlowMotionRows {
reveal(element: HTMLElement): void
/** @param element - row whose active transition should be cancelled without hiding it. */
cancelMotion(element: HTMLElement): void
+ /**
+ * Hide a row at once, outside a motion scope; the owning viewport measures the layout first.
+ * @param element - visible row.
+ * @param commit - applies the hidden state.
+ */
+ hideNow?(element: HTMLElement, commit: () => void): void
}
/** Geometry captured before one fold batch changes its boxes. */
@@ -136,9 +142,13 @@ interface OwnedBox {
* Create animation coordination without cross-viewport broadcasts.
* @param driver - the viewport's driver for the next batch; null while detached.
* @param foldingChanged - disable or restore this viewport's native scroll anchoring.
+ * @param beforeInstantHide - measures the layout before a row hides at once outside a motion scope.
* @returns stable callbacks and cleanup for this viewport's animations.
*/
-export function createFlowMotion(driver: () => InputFoldDriver | null, foldingChanged: (active: boolean) => void): FlowMotion {
+export function createFlowMotion(
+ driver: () => InputFoldDriver | null, foldingChanged: (active: boolean) => void,
+ beforeInstantHide?: (element: HTMLElement) => void,
+): FlowMotion {
const running = new Map
-
-
------
-
-
-## Further Exploration
-
-These packages own the selector and its two directory sources.
-
-- [Model selection](../ui-model-selection/README.md) — label placement and selection behavior.
-- [DeepSeek transport](../../llm/llm-deepseek/README.md) — built-in model catalog.
-- [DeepSeek account](../../llm/llm-deepseek-account/README.md) — account-provided model directory.
-
------
-
-
-## Model Experience
-
-None, as the package only decorates browser labels without changing model requests or Session events.
-
-#### KV Cache effect
-
-None; provider requests and their cached prefixes are unchanged.
-
-## Known Limitations and Deferred Work
-
-
-
-The fixed release marker has these presentation limits:
-
-- The settings editor, `/model` command, trigger accessibility text, and existing tooltip keep the original catalog name.
-- This package occupies a `single` slot. Another model-label plugin at the same priority conflicts; the two presentations do not compose automatically.
-- The `1017` marker is fixed client presentation, not a server capability assertion. Remove this package and its bundle row when structured release labels replace it.
-
-
-### Dev Note
-
-Implementation internals — click to expand
- -The browser entry contributes to the existing `conversation.input.model.label` slot through `ctx.slots.inject()`. Its component derives the label from owner props and uses the shared `Tag` primitive; it owns no cache, subscription, network request, or model-selection state. Registration and dictionaries leave with the plugin. The Host entry only makes the browser package available to the Loader. - -
-
diff --git a/packages/client/ui-deepseek-model-label-1017/README.zh.md b/packages/client/ui-deepseek-model-label-1017/README.zh.md
deleted file mode 100644
index 554f99c8e1..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/README.zh.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-description: "在输入框的模型选择器中为 DeepSeek Flash 显示临时的 1017 角标。"
-kind: "package-reference"
----
-
-# @deepseek-ai/dsh-client-ui-deepseek-model-label-1017
-
-[English](README.md) | 中文
-
-## 概述
-
-本包在输入框模型选择器的 `DeepSeek-V4.1-Flash` 旁显示 `1017`。它覆盖官方 API Key 和账号通道，保留目录名称和请求 ID。停用后恢复纯模型名称。
-
-## 目录
-
-- [使用本包](#use-this-package)
-- [理解实现](#understand-the-implementation)
-- [进一步探索](#further-exploration)
-- [模型体验](#model-experience)
-- [已知限制与延期工作](#known-limitations-and-deferred-work)
-- [开发备注](#dev-note)
-
------
-
-
-## 使用本包
-
-Web bundle 包含本插件，桌面端使用该 bundle 时也会加载。本包没有配置字段。
-
-只有提供方为 `deepseek-official` 或 `deepseek-account`、模型 ID 为 `deepseek-flash`，且目录名称恰好为 `DeepSeek-V4.1-Flash` 时才显示角标。其他名称和提供方保留目录文字。输入框按钮、当前模型菜单行和模型选项共用这个角标。
-
-通过 profile patch 停用以下条目即可恢复目录名称：
-
-```yaml
-- id: ui-deepseek-model-label-1017
- disabled: true
-```
-
------
-
-
-## 理解实现
-
-Working context for maintainers — click to expand
- -None. - -
-
-
------
-
-
-## 进一步探索
-
-以下包分别拥有选择器和两个目录来源。
-
-- [模型选择](../ui-model-selection/README.zh.md) — 名称显示位置与选择行为。
-- [DeepSeek 传输](../../llm/llm-deepseek/README.zh.md) — 内置模型目录。
-- [DeepSeek 账号](../../llm/llm-deepseek-account/README.zh.md) — 账号提供的模型目录。
-
------
-
-
-## 模型体验
-
-无，本包只装饰浏览器标签，不改变模型请求或 Session 事件。
-
-#### KV Cache effect
-
-无；提供方请求及其缓存前缀保持不变。
-
-## 已知限制与延期工作
-
-
-
-固定的版本标记有以下显示限制：
-
-- 设置编辑器、`/model` 命令、触发按钮的无障碍文字及已有提示保留原始目录名称。
-- 本包占用 `single` slot。其他模型名称插件若使用相同优先级会冲突，两种展示不会自动组合。
-- `1017` 是固定的客户端展示，不是服务端能力声明。结构化版本标签替代它时，移除本包及其 bundle 条目。
-
-
-### 开发备注
-
-内部实现 — 点击展开
- -浏览器入口通过 `ctx.slots.inject()` 向已有的 `conversation.input.model.label` slot 注册组件。组件根据 owner props 派生标签，使用共享 `Tag` 基元，不拥有缓存、订阅、网络请求或模型选择状态。注册和字典随插件卸载。Host 入口仅让 Loader 能加载浏览器包。 - -
-
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/de.json b/packages/client/ui-deepseek-model-label-1017/locale/de.json
deleted file mode 100644
index 97f572f313..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/de.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek 1017 Modellplakette",
- "description": "Fügen Sie den offiziellen DeepSeek Flash-Modellnamen ein temporäres 1017-Release-Abzeichen hinzu."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/en.json b/packages/client/ui-deepseek-model-label-1017/locale/en.json
deleted file mode 100644
index b4906f27c6..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/en.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek 1017 model badge",
- "description": "Add a temporary 1017 release badge to official DeepSeek Flash model names."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/es.json b/packages/client/ui-deepseek-model-label-1017/locale/es.json
deleted file mode 100644
index 39db24f093..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/es.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "Insignia del modelo DeepSeek 1017",
- "description": "Agregue una insignia de lanzamiento temporal 1017 a los nombres oficiales de los modelos Flash DeepSeek."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/fr.json b/packages/client/ui-deepseek-model-label-1017/locale/fr.json
deleted file mode 100644
index a0d47622b6..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/fr.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "Badge modèle DeepSeek 1017",
- "description": "Ajoutez un badge de version 1017 temporaire aux noms de modèles Flash DeepSeek officiels."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/ja.json b/packages/client/ui-deepseek-model-label-1017/locale/ja.json
deleted file mode 100644
index 3a11249af3..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/ja.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek 1017 モデルバッジ",
- "description": "公式 DeepSeek Flash モデルの名前に、一時的な 1017 リリースバッジを表示します。"
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/pt.json b/packages/client/ui-deepseek-model-label-1017/locale/pt.json
deleted file mode 100644
index 10be9f4c03..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/pt.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek selo do modelo 1017",
- "description": "Adicione um selo de versão temporário 1017 aos nomes oficiais dos modelos do DeepSeek Flash."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/ru.json b/packages/client/ui-deepseek-model-label-1017/locale/ru.json
deleted file mode 100644
index 1d116a03be..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/ru.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek Значок модели 1017",
- "description": "Добавьте временный значок выпуска 1017 к официальным названиям моделей Flash DeepSeek."
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/locale/zh.json b/packages/client/ui-deepseek-model-label-1017/locale/zh.json
deleted file mode 100644
index a8464157af..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/locale/zh.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "meta": {
- "title": "DeepSeek 1017 模型标记",
- "description": "为官方 DeepSeek Flash 模型名称添加临时的 1017 版本标记。"
- }
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/package.json b/packages/client/ui-deepseek-model-label-1017/package.json
deleted file mode 100644
index ea4d6f1b60..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/package.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
- "name": "@deepseek-ai/dsh-client-ui-deepseek-model-label-1017",
- "description": "Temporary 1017 release badge for official DeepSeek Flash model labels",
- "version": "0.2.1-rc.3",
- "publishConfig": {
- "access": "public"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
- "directory": "packages/client/ui-deepseek-model-label-1017"
- },
- "type": "module",
- "main": "lib/index.js",
- "types": "lib/types/index.d.ts",
- "exports": {
- ".": {
- "types": "./lib/types/index.d.ts",
- "default": "./lib/index.js"
- },
- "./client": {
- "types": "./lib/types/client/index.d.ts",
- "default": "./lib/client.js"
- },
- "./src/*": "./src/*",
- "./locale/*.json": "./locale/*.json",
- "./package.json": "./package.json"
- },
- "dsh": {
- "client": {
- "inject": [
- "@deepseek-ai/dsh-client-ui-model-selection",
- "@deepseek-ai/dsh-client-ui-renderer",
- "@deepseek-ai/dsh-client-locale"
- ],
- "platform": "web"
- }
- },
- "scripts": {
- "bundle": "tsdown",
- "watch": "tsdown --watch"
- },
- "license": "MIT",
- "peerDependencies": {
- "@deepseek-ai/cordis": "workspace:~"
- },
- "devDependencies": {
- "@deepseek-ai/cordis": "workspace:~",
- "@deepseek-ai/dsh-client-locale": "workspace:*",
- "@deepseek-ai/dsh-client-ui-model-selection": "workspace:*",
- "@deepseek-ai/dsh-client-ui-renderer": "workspace:*",
- "@deepseek-ai/dsh-client-ui-primitives": "workspace:*",
- "@deepseek-ai/dsh-client-ui-slots": "workspace:*",
- "@deepseek-ai/dsh-client-test-runtime": "workspace:*",
- "@deepseek-ai/dsh-session": "workspace:*",
- "@testing-library/react": "^16.3.3",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- },
- "files": [
- "locale/*.json",
- "lib/index.js",
- "lib/client.js",
- "lib/types/**/*.d.ts"
- ]
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.module.css b/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.module.css
deleted file mode 100644
index 2b24c72d1a..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.label {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- vertical-align: baseline;
- white-space: nowrap;
-}
diff --git a/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.tsx b/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.tsx
deleted file mode 100644
index 2c876319bd..0000000000
--- a/packages/client/ui-deepseek-model-label-1017/src/client/DeepSeekModelLabel.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/** Display-only release marking; the catalog and selected route remain unchanged. */
-import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import type {} from '@deepseek-ai/dsh-client-ui-model-selection/client'
-import { Tag } from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './DeepSeekModelLabel.module.css'
-
-const MODEL_NAME = 'DeepSeek-V4.1-Flash'
-
-/**
- * Render the fixed 1017 release label for recognized official Flash entries.
- * @param props - Provider and model identity plus the badge dictionary.
- * @returns The base name with a badge, or the untouched catalog name.
- */
-export function DeepSeekModelLabel({ provider, model, t }:
- PropsRuntime<'conversation.input.model.label'> & PropsLocale<'deepseek-model-label-1017'>,
-) {
- const official = provider.id === 'deepseek-account' || provider.id === 'deepseek-official'
- if (!official || model.id !== 'deepseek-flash' || model.name !== MODEL_NAME) return model.name
- return
- {model.name}{' '}维护者工作上下文 — 点击展开
- -无。 - -Implementation internals — click to expand
+The root registration supplies folded-landscape posture through an injected observable. The renderer owns its media-query subscription; AppFrame reads the snapshot through the bound hook. Client registrations running without browser media APIs use the ordinary layout. + `selectPanel(id)` checks the live `main` registry before changing selection; an absent key throws and leaves the current panel intact. `beginNavigation()` returns an abort signal for an asynchronous UI navigation. A later call, a valid panel selection (including repeated selection), or layout disposal aborts that signal without cancelling underlying Session creation. Consumers check the signal before committing navigation or moving drafts. One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions. @@ -92,7 +98,7 @@ None; this package neither assembles nor sends a provider request. These limits define the current layout behavior. They are current package constraints, not a general window-manager comparison or a task backlog. - **Panel geometry is transient** — reload restores the sidebar default and the right panel hidden; each dragged width is one frame-wide preference, not a per-Session fact. -- **Extremely narrow windows** — after the right panel closes, the center may still fall below 400px; the left 56px rail remains. +- **Extremely narrow windows** — after the right panel closes, the center may still fall below 400px; browser drawers reserve no sidebar width below 768px. - **Track and panel travel on one shared curve only while animating** — during a discrete open/close the frame sets `data-animating` and its track transition and the occupant's slide read the same duration and easing variables; an occupant that used its own would detach the panel's edge from the conversation's while squeezing. Drags and instant presentation switches run transition-free, so the curve does not cover them. - **No scroll anchoring during squeeze reflow** — layout changes may move the reader's viewport. diff --git a/packages/client/ui-layout/README.zh.md b/packages/client/ui-layout/README.zh.md index 9b426dcdef..e19b7a0bd2 100644 --- a/packages/client/ui-layout/README.zh.md +++ b/packages/client/ui-layout/README.zh.md @@ -25,9 +25,13 @@ kind: "package-reference" ## 使用本包 -桌面 Mod+B 通过与控件共用的布局操作切换左侧栏。模态弹窗打开时此快捷键不可用；终端输入优先。 +桌面 Mod+B 通过与控件共用的布局操作切换左侧栏。此快捷键在导航抽屉内仍可用，在其他模态弹窗打开时不可用；终端输入优先。 -本插件在 root slot 中组合侧边栏、主内容和右栏。侧边栏宽度为 264～420px，默认为 280px，收起后保留 56px 控制栏；窗口宽度低于 1024px 时自动收起，打开右侧面板也会收起手动展开的侧边栏。右侧面板首次打开时使用视口宽度的 45%，之后保留用户的像素宽度偏好，上限为 70%。为给中栏保留 400px，框架先将右侧面板缩减至 300px，再报告空间不足，使占用方将其关闭，最后才进一步压缩中栏。拖动没有过渡延迟；右侧手柄在关闭或全屏时不显示。 +本插件在 root slot 中组合侧边栏、主内容和右栏。侧边栏宽度为 264～420px，默认为 280px，在宽度不低于 768px 时，收起后保留 56px 控制栏。低于 768px 且没有原生 Windows 顶栏时，采用模态抽屉，不占据列宽；标题区域保留重新打开的控件，导航后关闭抽屉。窗口宽度低于 1024px 时自动收起，打开右侧面板也会收起手动展开的侧边栏。右侧面板首次打开时使用视口宽度的 45%，之后保留用户的像素宽度偏好，上限为 70%。为给中栏保留 400px，框架先将右侧面板缩减至 300px，再报告空间不足，使占用方将其关闭，最后才进一步压缩中栏。拖动没有过渡延迟；右侧手柄在关闭或全屏时不显示。 + +当浏览器报告设备处于横屏半折叠状态，且框架宽度不低于 768px 时，展开的侧边栏占据一半宽度。这一中点启发式面向折痕竖直且位于中央的书本姿态；它不识别铰链方向，也不为实体铰链宽度留空，因此这项调整不支持水平或偏离中央的折痕。此时隐藏拖拽手柄；完全展开后恢复保存的宽度。视口宽度不变时，折叠状态切换复用现有的列宽过渡；减少动态效果时禁用该过渡。不支持 device-posture 媒体特性的浏览器继续使用常规布局。 + +抽屉遮罩使用与面板相同的时长和缓动，在打开与关闭时渐变透明度；减少动态效果时两者均不播放动画。从已收起的侧栏切换到抽屉布局时，抽屉立即隐藏；已展开的侧栏保留收起动画。抽屉边缘不绘制分隔线，外层框架不滚动。macOS 抽屉与 Web 使用相同的不透明背景，毛玻璃仅用于普通侧栏。框架铺满外壳的布局视口，在键盘抬起时保留原有高度。抽屉背景和遮罩覆盖外壳完整高度，包括 `shell.bottom`，并显示在全屏和浮动右侧面板之上。浏览器管理的状态栏和地址栏位于外壳之外；布局不添加模拟安全区边距。 全局面板占据 root 作用域的 `main` keyed slot；`conversation` 是为会话界面保留的 key。`ctx.layout.selectPanel(id)` 选中已注册面板，`null` 则选中会话界面，但不改变当前会话。Plugins 页面是默认组合中的一个全局面板。 @@ -54,6 +58,8 @@ Windows Electron 的 `data-windows-titlebar` 标记在所有列上方预留顶实现细节——点击展开
+root 注册通过注入的可观察源提供横屏折叠状态，由渲染器负责媒体查询订阅，AppFrame 只通过绑定的 hook 读取快照。在没有浏览器媒体 API 的环境中运行客户端注册时，使用常规布局。 + `selectPanel(id)` 在改变选中态前检查实时 `main` 注册表；缺失的 key 会抛错并保留当前面板。`beginNavigation()` 为异步 UI 导航返回 abort signal。后续调用、有效面板选择（包括重复选择）或布局释放会中止该 signal，但不取消底层会话创建。消费方在提交导航或搬移草稿前检查 signal。 一次注册声明框架的子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`ctx.layout.panelInfo` 与标准 `usePanelInfo` hook 共用同一个选中态来源；AppFrame 订阅引用稳定的布局对象。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号、字体列表与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。 @@ -92,7 +98,7 @@ Windows Electron 的 `data-windows-titlebar` 标记在所有列上方预留顶 这些限制界定了当前布局行为。它们是当前包约束，不是通用窗口管理器对比或任务积压。 - **面板几何是瞬时状态**——重新加载会恢复侧栏默认值并隐藏右侧面板；拖动设置的宽度是整个框架共用的一份偏好，而非每个会话各自的属性。 -- **极窄窗口**——右侧面板关闭后，中栏仍可能小于 400px；左侧 56px 控制栏仍会保留。 +- **极窄窗口**——右侧面板关闭后，中栏仍可能小于 400px；低于 768px 时，浏览器抽屉不占据侧栏宽度。 - **轨道与面板仅在动画期间沿同一条曲线运动**——离散开合时框架设置 `data-animating`，其轨道过渡和占用方的滑入读取同一组时长与缓动变量；占用方若自用一套，挤压时面板边缘就会与会话界面的边缘脱开。拖拽和即时呈现切换不带过渡，因此该曲线不覆盖它们。 - **挤压重排期间无滚动锚定**——布局变化可能移动读者的视口。 diff --git a/packages/client/ui-layout/package.json b/packages/client/ui-layout/package.json index f92629e6c7..b0205ffa78 100644 --- a/packages/client/ui-layout/package.json +++ b/packages/client/ui-layout/package.json @@ -1,7 +1,7 @@ { "name": "@deepseek-ai/dsh-client-ui-layout", "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)", - "version": "0.2.1-rc.3", + "version": "0.2.2-alpha.2", "publishConfig": { "access": "public" }, diff --git a/packages/client/ui-layout/src/client/AppFrame.module.css b/packages/client/ui-layout/src/client/AppFrame.module.css index 5b71ebecfd..fa1065dc56 100644 --- a/packages/client/ui-layout/src/client/AppFrame.module.css +++ b/packages/client/ui-layout/src/client/AppFrame.module.css @@ -3,11 +3,12 @@ display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; + box-sizing: border-box; overflow: hidden; background: var(--dsw-alias-bg-base); } -/* Only a discrete collapse/expand toggle eases the tracks (the TSX holds +/* Only discrete collapse/expand and fold changes ease the tracks (the TSX holds data-animating across the toggle on the deepsuite sider curve). Steady-state tracks move only with the viewport, and those updates must land instantly: an eased track chases the live window edge and the centre column visibly @@ -56,6 +57,8 @@ } .sidebarCol { + grid-column: 1; + grid-row: 1; min-width: 0; overflow: hidden; background: var(--dsw-specific-sidebar-fill); @@ -63,12 +66,22 @@ } .centerCol { + grid-column: 2; + grid-row: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } +.mainPanel { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; + min-height: 0; +} + /* macOS desktop: the frame goes transparent so window vibrancy reaches the sidebar column, which keeps only a translucent tint; the centre paints the base background itself to stay opaque. The sidebar/centre separator moves @@ -107,7 +120,7 @@ --dsh-frame-chrome-top: 0px; } -:global([data-platform='darwin']) .sidebarCol { +:global([data-platform='darwin']) .frame:not([data-sidebar-drawer]) .sidebarCol { /* A blue wash over the top of the translucent tint, gone by a third of the column; a faint blue-grey-violet rises through the bottom third; and a faint blue cast is mixed into the tint itself. Every layer stays @@ -126,7 +139,7 @@ /* Dark drops the blue cast (the light-mode wash reads purple over dark fills) and thins the fill so more wallpaper shows; the washes stay. */ -:global([data-platform='darwin']) :global([data-ds-dark-theme]) .sidebarCol { +:global([data-platform='darwin']) :global([data-ds-dark-theme]) .frame:not([data-sidebar-drawer]) .sidebarCol { background: linear-gradient( to bottom, @@ -143,8 +156,8 @@ them with a 90%-opaque fill of the same token in both themes (the dark selector repeats so this outranks its thinner fill). */ @media (prefers-reduced-transparency: reduce) { - :global([data-platform='darwin']) .sidebarCol, - :global([data-platform='darwin']) :global([data-ds-dark-theme]) .sidebarCol { + :global([data-platform='darwin']) .frame:not([data-sidebar-drawer]) .sidebarCol, + :global([data-platform='darwin']) :global([data-ds-dark-theme]) .frame:not([data-sidebar-drawer]) .sidebarCol { background: color-mix(in srgb, var(--dsw-specific-sidebar-fill) 90%, transparent); } } @@ -265,11 +278,96 @@ * where it is. The occupant draws its own left border. */ .rightbarCol { + grid-column: 3; + grid-row: 1; position: relative; min-width: 0; overflow: visible; } +.frame[data-sidebar-drawer] { + --dsh-frame-leading-clearance: 84px; + overflow: clip; +} + +:global(html:not([data-platform])) .frame[data-sidebar-drawer] { + /* 12px seat offset + 28px opener + 8px gap; Desktop keeps room for two controls. */ + --dsh-frame-leading-clearance: 48px; +} + +.frame[data-sidebar-drawer] .mainPanel[data-global-panel] { + padding-top: max(0px, calc(48px - var(--dsh-frame-top-clearance, 0px))); +} + +.frame[data-sidebar-drawer] .sidebarCol { + position: absolute; + grid-area: auto; + inset: 0 auto 0 0; + z-index: 71; + box-sizing: border-box; + border-right: none; + transform: translateX(0); + visibility: visible; + transition: transform var(--ds-transition-duration-slow) var(--ds-ease-in-out); +} + +.frame[data-sidebar-drawer][data-sidebar-collapsed] .sidebarCol { + transform: translateX(-100%); + visibility: hidden; + transition: + transform var(--ds-transition-duration-slow) var(--ds-ease-in-out), + visibility 0s linear var(--ds-transition-duration-slow); +} + +.frame[data-sidebar-drawer][data-sidebar-instant] .sidebarCol { + transition: none; +} + +.drawerMask { + position: absolute; + inset: var(--dsh-frame-chrome-top, 0px) 0 0; + z-index: 70; + background: var(--dsw-alias-bg-mask-1); + backdrop-filter: var(--dsw-mask-blur); + opacity: 0; + pointer-events: none; + transition: opacity var(--ds-transition-duration-slow) var(--ds-ease-in-out); +} + +.frame[data-sidebar-drawer]:not([data-sidebar-collapsed]) .drawerMask { + opacity: 1; + pointer-events: auto; +} + +.frame[data-sidebar-drawer] .leadingSeat { + top: 11px; + left: 12px; +} + +:global([data-platform='darwin']) .frame[data-sidebar-drawer] { + --dsh-frame-leading-clearance: 160px; +} + +:global([data-platform='darwin']) .frame[data-sidebar-drawer] .leadingSeat { + left: 88px; +} + +:global([data-platform='darwin'][data-fullscreen]) .frame[data-sidebar-drawer] { + --dsh-frame-leading-clearance: 84px; +} + +:global([data-platform='darwin'][data-fullscreen]) .frame[data-sidebar-drawer] .leadingSeat { + left: 12px; +} + +@media (prefers-reduced-motion: reduce) { + .frame[data-sidebar-drawer] .sidebarCol, + .frame[data-sidebar-drawer][data-sidebar-collapsed] .sidebarCol, + .drawerMask { + transition: none; + } +} + .bottomRow { grid-column: 1 / -1; min-width: 0; diff --git a/packages/client/ui-layout/src/client/AppFrame.tsx b/packages/client/ui-layout/src/client/AppFrame.tsx index 5614947447..23e71c9c03 100644 --- a/packages/client/ui-layout/src/client/AppFrame.tsx +++ b/packages/client/ui-layout/src/client/AppFrame.tsx @@ -17,29 +17,37 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import type { ReactNode } from 'react' import type { - PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore, + HostObservable, InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore, } from '@deepseek-ai/dsh-client-ui-slots' -import { CENTER_MIN, clampWidth, computeColumns, RIGHTBAR_DEFAULT_RATIO, RIGHTBAR_MAX_RATIO, RIGHTBAR_MIN, SIDEBAR_AUTO_COLLAPSE, SIDEBAR_COLLAPSED, SIDEBAR_DEFAULT } from './columns.ts' +import { CENTER_MIN, clampWidth, computeColumns, RIGHTBAR_DEFAULT_RATIO, RIGHTBAR_MAX_RATIO, RIGHTBAR_MIN, SIDEBAR_AUTO_COLLAPSE, SIDEBAR_COLLAPSED, SIDEBAR_DEFAULT, SIDEBAR_DRAWER_BREAKPOINT } from './columns.ts' import { DocumentTitle } from './DocumentTitle.tsx' import type { createLayoutStore } from './stores.ts' import css from './AppFrame.module.css' -/** Full composed props: runtime share + child-slot render share + store share. */ +/** Browser posture supplied by the root registration. */ +export interface AppFrameInjected { + hooks: { foldedLandscape: HostObservable{props.children}
+function CenterColumn(props: { children?: ReactNode; inert: boolean }) {
+ return {props.children}
}
/** Subscribe to the main key without subscribing the column frame to each panel id. */
function MainPanel({ usePanelInfo, renderSlot }: Pick
+ {renderSlot('main', {}, { entryKey: panelId ?? 'conversation' })}
+
}
/**
@@ -47,8 +55,8 @@ function MainPanel({ usePanelInfo, renderSlot }: Pick{props.children}
+function RightbarColumn(props: { children?: ReactNode; inert: boolean }) {
+ return {props.children}
}
/**
@@ -122,6 +130,7 @@ export function AppFrame({
useStore,
useSessions,
usePanelInfo,
+ useFoldedLandscape,
actions,
renderSlot,
t,
@@ -129,6 +138,7 @@ export function AppFrame({
const layoutInfo = useStore(state => state.layoutInfo)
const frameRef = useRef 0 || undefined}
+ data-animating={animateTracks || undefined}
>
+ {drawer &&