@jcy2387/dsh-conversation-ui 0.1.0-rc.12

package/src/client/FollowHost.tsx

@@ -0,0 +1,25 @@
+import { useRef, type ReactNode } from 'react'
+import { useConversationFollow } from './teleprompterGlide.ts'
+import css from './TypewriterAssistantNodeView.module.css'
+
+/**
+ * Document-flow host that owns conversation-port follow while `active`.
+ * Shared by assistant blocks and every other growing Chat row.
+ */
+export function FollowHost({
+  active,
+  speedCpsRef,
+  minSpeedPxPerSec,
+  maxSpeedPxPerSec,
+  children,
+}: {
+  active: boolean
+  speedCpsRef: { current: number }
+  minSpeedPxPerSec?: number | undefined
+  maxSpeedPxPerSec?: number | undefined
+  children: ReactNode
+}) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  useConversationFollow(rootRef, active, speedCpsRef, minSpeedPxPerSec, maxSpeedPxPerSec)
+  return <div ref={rootRef} className={css.follow}>{children}</div>
+}

package/src/client/ToolActivityGroup.tsx

@@ -0,0 +1,341 @@
+import { createPortal } from 'react-dom'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import {
+  IconChevronDownOutline14,
+  IconChevronRightOutline14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import {
+  useTurnProcessFold,
+  type TurnFoldAddress,
+} from './turnProcessFold.ts'
+import { TurnProcessMember } from './TurnProcessMember.tsx'
+import css from './TypewriterAssistantNodeView.module.css'
+
+export type ToolActivityGroupPosition = 'start' | 'middle' | 'end'
+
+export interface ToolActivityGroupInfo {
+  readonly id: string
+  readonly domId: string
+  readonly semantic: string
+  readonly label: string
+  readonly count: number
+  readonly position: ToolActivityGroupPosition
+  readonly hasGrowing: boolean
+}
+
+interface ToolActivityGroupState {
+  collapsed: boolean
+  readonly listeners: Set<() => void>
+}
+
+interface ToolActivityMount {
+  target: HTMLElement | null
+  readonly listeners: Set<() => void>
+}
+
+const groupStates = new Map<string, ToolActivityGroupState>()
+const groupMounts = new Map<string, ToolActivityMount>()
+
+function groupState(id: string): ToolActivityGroupState {
+  const current = groupStates.get(id)
+  if (current !== undefined) return current
+  const created: ToolActivityGroupState = { collapsed: false, listeners: new Set() }
+  groupStates.set(id, created)
+  return created
+}
+
+function groupMount(id: string): ToolActivityMount {
+  const current = groupMounts.get(id)
+  if (current !== undefined) return current
+  const created: ToolActivityMount = { target: null, listeners: new Set() }
+  groupMounts.set(id, created)
+  return created
+}
+
+function notify(listeners: Set<() => void>): void {
+  for (const listener of listeners) listener()
+}
+
+function subscribeGroup(id: string, listener: () => void): () => void {
+  const state = groupState(id)
+  state.listeners.add(listener)
+  return () => {
+    state.listeners.delete(listener)
+    if (state.listeners.size === 0) groupStates.delete(id)
+  }
+}
+
+function subscribeMount(id: string, listener: () => void): () => void {
+  const mount = groupMount(id)
+  mount.listeners.add(listener)
+  return () => {
+    mount.listeners.delete(listener)
+    if (mount.listeners.size === 0 && mount.target === null) groupMounts.delete(id)
+  }
+}
+
+function setMount(id: string, target: HTMLElement | null): void {
+  const mount = groupMount(id)
+  if (mount.target === target) return
+  mount.target = target
+  notify(mount.listeners)
+}
+
+function hash(value: string): string {
+  let result = 2_166_136_261
+  for (let index = 0; index < value.length; index += 1) {
+    result ^= value.charCodeAt(index)
+    result = Math.imul(result, 16_777_619)
+  }
+  return (result >>> 0).toString(36)
+}
+
+/** Stable identity for one contiguous semantic tool group in a Turn. */
+export function toolActivityGroupId(
+  sessionId: string,
+  turn: number,
+  semantic: string,
+  firstNodeKey: string,
+): string {
+  return `dsh-tool-group-${hash(`${sessionId}\u0000${turn}\u0000${semantic}\u0000${firstNodeKey}`)}`
+}
+
+function useToolActivityFold(id: string): { collapsed: boolean; toggle: () => void; collapse: () => void } {
+  const subscribe = useCallback((listener: () => void) => subscribeGroup(id, listener), [id])
+  const collapsed = useSyncExternalStore(
+    subscribe,
+    () => groupState(id).collapsed,
+    () => false,
+  )
+  const toggle = useCallback(() => {
+    const state = groupState(id)
+    state.collapsed = !state.collapsed
+    notify(state.listeners)
+  }, [id])
+  const collapse = useCallback(() => {
+    const state = groupState(id)
+    if (state.collapsed) return
+    state.collapsed = true
+    notify(state.listeners)
+  }, [id])
+  return { collapsed, toggle, collapse }
+}
+
+function useToolActivityMount(id: string): HTMLElement | null {
+  const subscribe = useCallback((listener: () => void) => subscribeMount(id, listener), [id])
+  return useSyncExternalStore(
+    subscribe,
+    () => groupMount(id).target,
+    () => null,
+  )
+}
+
+interface ScrollPositionSnapshot {
+  readonly port: HTMLElement
+  readonly top: number
+  readonly bottomGap: number
+}
+
+function restoreScrollPosition(snapshot: ScrollPositionSnapshot): void {
+  const floor = Math.max(0, snapshot.port.scrollHeight - snapshot.port.clientHeight)
+  const target = snapshot.bottomGap <= 25
+    ? floor
+    : Math.min(snapshot.top, floor)
+  snapshot.port.scrollTop = target
+}
+
+function ToolActivityGroupFrame({
+  group,
+  collapsed,
+  toggle,
+  header,
+  children,
+}: {
+  readonly group: ToolActivityGroupInfo
+  readonly collapsed: boolean
+  readonly toggle: () => void
+  readonly header: ReactNode
+  readonly children: ReactNode
+}) {
+  const frameRef = useRef<HTMLDivElement | null>(null)
+  const pendingScroll = useRef<ScrollPositionSnapshot | null>(null)
+  const register = useCallback((element: HTMLDivElement | null) => {
+    frameRef.current = element
+    setMount(group.id, element)
+  }, [group.id])
+  const toggleWithScroll = useCallback(() => {
+    const port = frameRef.current?.closest<HTMLElement>('[data-conversation-scroll]')
+    if (port !== null && port !== undefined) {
+      const floor = Math.max(0, port.scrollHeight - port.clientHeight)
+      pendingScroll.current = {
+        port,
+        top: port.scrollTop,
+        bottomGap: floor - port.scrollTop,
+      }
+    }
+    toggle()
+  }, [toggle])
+  useLayoutEffect(() => {
+    const snapshot = pendingScroll.current
+    if (snapshot === null) return
+    pendingScroll.current = null
+    restoreScrollPosition(snapshot)
+    if (typeof window === 'undefined') return
+    const frame = window.requestAnimationFrame(() => restoreScrollPosition(snapshot))
+    return () => window.cancelAnimationFrame(frame)
+  }, [collapsed])
+  return (
+    <div
+      ref={register}
+      id={group.domId}
+      className={css.toolGroupFrame}
+      data-stream-tool-group={group.semantic}
+      data-stream-tool-group-frame=""
+      data-stream-tool-group-position={group.position}
+      data-stream-tool-group-count={group.count}
+      data-stream-tool-group-collapsed={collapsed || undefined}
+    >
+      <button
+        type="button"
+        className={css.toolGroupHeader}
+        aria-expanded={!collapsed}
+        aria-controls={group.domId}
+        data-stream-tool-group-toggle=""
+        onClick={toggleWithScroll}
+      >
+        {header}
+        <span className={css.toolGroupHeaderChevron} aria-hidden>
+          {collapsed ? <IconChevronRightOutline14 size={14} /> : <IconChevronDownOutline14 size={14} />}
+        </span>
+      </button>
+      {children}
+    </div>
+  )
+}
+
+interface ToolActivityGroupMemberProps {
+  readonly group: ToolActivityGroupInfo
+  readonly address: TurnFoldAddress
+  readonly memberId: string
+  readonly memberOrder: number
+  readonly turnStartTime?: number | undefined
+  readonly formatRunningElapsed?: ((ms: number) => string) | undefined
+  readonly memberRef?: Ref<HTMLDivElement> | undefined
+  readonly eventAttributes?: Readonly<Record<string, string | undefined>>
+  readonly header: ReactNode
+  readonly children: ReactNode
+}
+
+/**
+ * Mount the first member as a group host and portal subsequent tool members
+ * into the same host. The Turn fold remains shared with ordinary process rows,
+ * while a contiguous run of commands gets one Codex-style disclosure block.
+ */
+export function ToolActivityGroupMember({
+  group,
+  address,
+  memberId,
+  memberOrder,
+  turnStartTime,
+  formatRunningElapsed,
+  memberRef,
+  eventAttributes,
+  header,
+  children,
+}: ToolActivityGroupMemberProps) {
+  const fold = useTurnProcessFold(address, { memberId, memberOrder })
+  const activity = useToolActivityFold(group.id)
+  const mount = useToolActivityMount(group.id)
+
+  // Codex leaves a running tool group open while work is arriving, then folds
+  // the completed batch automatically. A manual toggle after completion still
+  // wins because this effect only reacts to the growing -> settled transition.
+  useEffect(() => {
+    if (group.position === 'start' && !group.hasGrowing) activity.collapse()
+  }, [activity.collapse, group.hasGrowing, group.position])
+
+  if (group.position === 'start') {
+    return (
+      <TurnProcessMember
+        address={address}
+        memberId={memberId}
+        memberOrder={memberOrder}
+        turnStartTime={turnStartTime}
+        formatRunningElapsed={formatRunningElapsed}
+        className={css.toolGroupAnchor}
+        data-stream-tool-group-anchor=""
+      >
+        <ToolActivityGroupFrame
+          group={group}
+          collapsed={activity.collapsed}
+          toggle={activity.toggle}
+          header={header}
+        >
+          <div
+            {...eventAttributes}
+            ref={memberRef}
+            className={css.eventRow}
+            data-stream-tool-group-member=""
+            data-stream-tool-group-position="start"
+            data-stream-tool-group-collapsed={activity.collapsed || undefined}
+          >
+            {children}
+          </div>
+        </ToolActivityGroupFrame>
+      </TurnProcessMember>
+    )
+  }
+
+  const hidden = fold.collapsed || activity.collapsed
+  const member = (
+    <div
+      id={memberId}
+      data-turn-process=""
+      data-tool-group-member=""
+      data-tool-group-hidden={hidden || undefined}
+      hidden={hidden}
+    >
+      <div
+        {...eventAttributes}
+        ref={memberRef}
+        className={css.eventRow}
+        data-stream-tool-group-member=""
+        data-stream-tool-group-position={group.position}
+        data-stream-tool-group-collapsed={activity.collapsed || undefined}
+      >
+        {children}
+      </div>
+    </div>
+  )
+
+  if (mount === null) return member
+  return (
+    <span data-tool-group-proxy="" aria-hidden>
+      {createPortal(member, mount)}
+    </span>
+  )
+}
+
+/** Render the group heading with the semantic icon supplied by the tool view. */
+export function ToolActivityGroupHeader({
+  label,
+  icon,
+}: {
+  readonly label: string
+  readonly icon: ReactNode
+}) {
+  return (
+    <>
+      <span className={css.toolGroupHeaderIcon} aria-hidden>{icon}</span>
+      <span className={css.toolGroupHeaderLabel}>{label}</span>
+    </>
+  )
+}

package/src/client/TurnPreludeUserNodeView.tsx

@@ -0,0 +1,258 @@
+import { createElement, useEffect, useState, type ComponentType } from 'react'
+import {
+  IconChevronDownOutline14,
+  IconChevronRightOutline14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { FollowWrapProps } from './TypewriterToolNodeView.tsx'
+import {
+  turnProcessBoundaryId,
+  useTurnProcessFold,
+  type TurnFoldAddress,
+} from './turnProcessFold.ts'
+import { formatTurnProcessed, type TurnElapsedTranslator } from './turnElapsed.ts'
+import css from './TypewriterAssistantNodeView.module.css'
+
+interface TimelineTurn {
+  readonly turn: number
+  readonly status: 'open' | 'closed' | 'unknown'
+  readonly start?: { readonly seq?: number; readonly time?: number } | undefined
+  readonly end?: { readonly seq?: number } | undefined
+}
+
+function nodeKey(node: unknown): string | undefined {
+  if (node === null || typeof node !== 'object' || !('key' in node)) return undefined
+  return typeof (node as { key: unknown }).key === 'string' ? (node as { key: string }).key : undefined
+}
+
+function userSeq(node: unknown): number | undefined {
+  if (node === null || typeof node !== 'object' || !('data' in node)) return undefined
+  const data = (node as { data: unknown }).data
+  if (data === null || typeof data !== 'object' || !('seq' in data)) return undefined
+  return typeof (data as { seq: unknown }).seq === 'number' ? (data as { seq: number }).seq : undefined
+}
+
+function userTime(node: unknown): number | undefined {
+  if (node === null || typeof node !== 'object' || !('data' in node)) return undefined
+  const data = (node as { data: unknown }).data
+  if (data === null || typeof data !== 'object' || !('time' in data)) return undefined
+  return typeof (data as { time: unknown }).time === 'number' ? (data as { time: number }).time : undefined
+}
+
+function chatParts(snapshot: unknown): {
+  readonly order: readonly unknown[]
+  readonly get: (key: string) => unknown
+  readonly turns: ReadonlyMap<number, TimelineTurn>
+  readonly turnOrder: readonly number[]
+} | undefined {
+  if (snapshot === null || typeof snapshot !== 'object' || !('chat' in snapshot)) return undefined
+  const chat = (snapshot as { chat: unknown }).chat
+  if (chat === null || typeof chat !== 'object') return undefined
+  if (!('order' in chat) || !Array.isArray((chat as { order: unknown }).order)) return undefined
+  if (!('nodes' in chat) || !('timeline' in chat)) return undefined
+  const nodes = (chat as { nodes: unknown }).nodes
+  const timeline = (chat as { timeline: unknown }).timeline
+  if (nodes === null || typeof nodes !== 'object' || !('get' in nodes)) return undefined
+  if (timeline === null || typeof timeline !== 'object' || !('turns' in timeline) || !('turnOrder' in timeline)) return undefined
+  const get = (nodes as { get: unknown }).get
+  const turns = (timeline as { turns: unknown }).turns
+  const turnOrder = (timeline as { turnOrder: unknown }).turnOrder
+  if (typeof get !== 'function' || !(turns instanceof Map) || !Array.isArray(turnOrder)) return undefined
+  return {
+    order: (chat as { order: readonly unknown[] }).order,
+    get: (key: string) => get.call(nodes, key),
+    turns: turns as ReadonlyMap<number, TimelineTurn>,
+    turnOrder: turnOrder as readonly number[],
+  }
+}
+
+function associatedTurn(snapshot: unknown, currentKey: string, currentSeq: number): TimelineTurn | undefined {
+  const chat = chatParts(snapshot)
+  if (chat === undefined) return undefined
+  const currentIndex = chat.order.indexOf(currentKey)
+  if (currentIndex === -1) return undefined
+  const current = chat.get(currentKey)
+  if (current !== null && typeof current === 'object' && 'location' in current) {
+    const location = (current as { location: unknown }).location
+    if (
+      location !== null
+      && typeof location === 'object'
+      && 'kind' in location
+      && ((location as { kind: unknown }).kind === 'turn' || (location as { kind: unknown }).kind === 'step')
+      && 'turn' in location
+    ) {
+      const turn = (location as { turn: unknown }).turn
+      if (turn !== null && typeof turn === 'object' && 'turn' in turn) return turn as TimelineTurn
+    }
+  }
+  let closest: TimelineTurn | undefined
+  let closestStartSeq = Number.NEGATIVE_INFINITY
+  for (const turnNumber of chat.turnOrder) {
+    const turn = chat.turns.get(turnNumber)
+    const startSeq = turn?.start?.seq
+    const endSeq = turn?.end?.seq
+    if (
+      turn !== undefined
+      && typeof startSeq === 'number'
+      && startSeq < currentSeq
+      && (typeof endSeq !== 'number' || currentSeq < endSeq)
+      && startSeq > closestStartSeq
+    ) {
+      closest = turn
+      closestStartSeq = startSeq
+    }
+  }
+  return closest
+}
+
+function isLatestUser(snapshot: unknown, currentKey: string): boolean {
+  const chat = chatParts(snapshot)
+  if (chat === undefined) return false
+  for (let index = chat.order.length - 1; index >= 0; index -= 1) {
+    const key = chat.order[index]
+    if (typeof key !== 'string') continue
+    const candidate = chat.get(key)
+    if (candidate === null || typeof candidate !== 'object' || !('kind' in candidate)) continue
+    if ((candidate as { kind: unknown }).kind === 'user') return key === currentKey
+  }
+  return false
+}
+
+function isRunning(snapshot: unknown): boolean {
+  return snapshot !== null
+    && typeof snapshot === 'object'
+    && 'running' in snapshot
+    && (snapshot as { running: unknown }).running === true
+}
+
+function useElapsedNow(active: boolean): number {
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!active) return
+    setNow(Date.now())
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000)
+    return () => window.clearInterval(timer)
+  }, [active])
+  return now
+}
+
+function TurnPrelude({
+  active,
+  address,
+  boundaryId,
+  boundaryOrder,
+  startTime,
+  t,
+}: {
+  readonly active: boolean
+  readonly address: TurnFoldAddress | undefined
+  readonly boundaryId: string
+  readonly boundaryOrder: number
+  readonly startTime: number
+  readonly t: TurnElapsedTranslator
+}) {
+  const fold = useTurnProcessFold(address, { boundaryId, boundaryOrder })
+  const running = active && !fold.completed
+  const now = useElapsedNow(running)
+  if (!running && !fold.completed) return null
+  const label = fold.completed ? fold.label : formatTurnProcessed(now - startTime, t)
+  if (label === undefined) return null
+  return (
+    <div className={css.turnPrelude} data-turn-prelude="">
+      <div
+        className={css.turnFoldRow}
+        data-turn-fold-row=""
+        data-turn-fold-state={fold.completed ? 'completed' : 'running'}
+      >
+        {fold.completed ? (
+          <button
+            type="button"
+            className={css.turnFoldButton}
+            aria-expanded={!fold.collapsed}
+            aria-controls={fold.controls}
+            onClick={fold.toggle}
+          >
+            <span>{label}</span>
+            {fold.collapsed ? <IconChevronRightOutline14 /> : <IconChevronDownOutline14 />}
+          </button>
+        ) : (
+          <span className={css.turnFoldLabel} aria-live="off">{label}</span>
+        )}
+      </div>
+      {running && !fold.hasMembers && (
+        <div className={css.turnWaiting} data-turn-waiting="" role="status" aria-live="polite">
+          思考中
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Add an immediate Turn status boundary directly after an ordinary user row. */
+export function wrapTurnPreludeNodeView(Inner: ComponentType<FollowWrapProps>) {
+  return function TurnPreludeUserNodeView(props: FollowWrapProps) {
+    const key = nodeKey(props.node)
+    const seq = userSeq(props.node)
+    const time = userTime(props.node)
+    const useSession = props.useSession
+    if (
+      key === undefined
+      || seq === undefined
+      || time === undefined
+      || typeof props.sessionId !== 'string'
+      || typeof useSession !== 'function'
+      || typeof props.t !== 'function'
+    ) return createElement(Inner, props)
+    return (
+      <TurnPreludeUserWithSession
+        Inner={Inner}
+        props={props}
+        nodeKey={key}
+        nodeSeq={seq}
+        nodeTime={time}
+        sessionId={props.sessionId}
+        useSession={useSession as (selector: (snapshot: unknown) => unknown) => unknown}
+        t={props.t as TurnElapsedTranslator}
+      />
+    )
+  }
+}
+
+function TurnPreludeUserWithSession({
+  Inner,
+  props,
+  nodeKey: currentKey,
+  nodeSeq,
+  nodeTime,
+  sessionId,
+  useSession,
+  t,
+}: {
+  readonly Inner: ComponentType<FollowWrapProps>
+  readonly props: FollowWrapProps
+  readonly nodeKey: string
+  readonly nodeSeq: number
+  readonly nodeTime: number
+  readonly sessionId: string
+  readonly useSession: (selector: (snapshot: unknown) => unknown) => unknown
+  readonly t: TurnElapsedTranslator
+}) {
+  const turn = useSession(snapshot => associatedTurn(snapshot, currentKey, nodeSeq)) as TimelineTurn | undefined
+  const running = useSession(isRunning) as boolean
+  const latestUser = useSession(snapshot => isLatestUser(snapshot, currentKey)) as boolean
+  const address = turn === undefined ? undefined : { sessionId, turn: turn.turn }
+  const active = turn?.status === 'open' || (turn === undefined && running && latestUser)
+  const startTime = typeof turn?.start?.time === 'number' ? turn.start.time : nodeTime
+  return (
+    <>
+      {createElement(Inner, props)}
+      <TurnPrelude
+        active={active}
+        address={address}
+        boundaryId={turnProcessBoundaryId(sessionId, currentKey)}
+        boundaryOrder={nodeSeq}
+        startTime={startTime}
+        t={t}
+      />
+    </>
+  )
+}