dsh-smooth-stream 0.1.0

package/src/client/TypewriterAssistantNodeView.module.css

@@ -0,0 +1,240 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 16px;
+  line-height: 28px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.think {
+  display: flex;
+  flex-direction: column;
+}
+
+.thinkRow {
+  position: relative;
+  overflow: hidden;
+}
+
+.think[data-state='running'] .thinkRow::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-smooth-stream-think-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-smooth-stream-think-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+.thinkLeading {
+  flex-shrink: 0;
+}
+
+.thinkChevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.thinkTitle {
+  font-weight: 400;
+}
+
+.thinkSeparator {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.thinkSummary {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thinkSummary[data-follow-end] {
+  text-overflow: clip;
+}
+
+.thinkBody {
+  padding: 4px 0 4px 22px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/*
+ * AnimatedDisclosure chrome: mirrors the harness DisclosureRow geometry
+ * ([16px leading] gap 6 [title 14/24]) plus the hover icon->chevron preview.
+ */
+.disclosureRoot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.disclosureRow {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.disclosureLeading {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.disclosureIconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.disclosureChevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.disclosureRow:hover .disclosureIconIdle {
+  opacity: 0;
+}
+
+.disclosureRow:hover .disclosureChevronHover {
+  opacity: 1;
+}
+
+.disclosureTitle {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/*
+ * The animated body: one grid track transitions 0fr <-> 1fr, so the height
+ * glides to the body's natural size with no measured pixel target. The direct
+ * child clips to the track; `visibility` (not display) keeps a collapsed body
+ * out of the accessibility tree and tab order while it still measures for the
+ * animation - it flips visible immediately on expand and waits for the height
+ * to collapse before hiding. Rides the deepsuite curve tokens with fallbacks
+ * for standalone composition.
+ */
+.disclosureContent {
+  display: grid;
+  grid-template-rows: 1fr;
+  visibility: visible;
+  transition:
+    grid-template-rows var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
+    visibility 0s;
+}
+
+.disclosureContent[data-collapsed] {
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
+    visibility 0s var(--ds-transition-duration, 0.2s);
+}
+
+.disclosureContent > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .think[data-state='running'] .thinkRow::after {
+    animation: none;
+  }
+
+  .disclosureContent,
+  .disclosureContent[data-collapsed] {
+    transition: none;
+  }
+}
+
+.stopped {
+  align-self: flex-start;
+  padding: 0 6px;
+  border-radius: 6px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.visuallyHidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * Follow host: ordinary document flow. The last text block owns the
+ * conversation scrollport's bottom-follow while the reply reveals
+ * (see useConversationFollow).
+ */
+.follow {
+  min-width: 0;
+}
+
+/*
+ * Trim the half-leading above and below each text block so line boxes hug
+ * the font's ascent/descent edges. `text` edges are used instead of
+ * `cap alphabetic` because assistant text is CJK-heavy and cap-height
+ * trimming would clip ideographic glyphs.
+ */
+@supports (text-box-trim: trim-both) {
+  .root :is(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
+    text-box-trim: trim-both;
+    text-box-edge: text;
+  }
+}

package/src/client/TypewriterAssistantNodeView.tsx

@@ -0,0 +1,319 @@
+import { memo, useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from 'react'
+import { IconThinkOutline14, JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ImageGallery, type ImageLoader, type MessageImageLabels } from '@deepseek-ai/dsh-client-ui-attachment'
+import type { ChatNodeViewProps, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import { AnimatedDisclosure } from './AnimatedDisclosure.tsx'
+import { useSmoothStreamContent, type StreamSmoothingPreset } from './useSmoothStreamContent.ts'
+import { useFpsGuard } from './useFpsGuard.ts'
+import { FollowHost } from './FollowHost.tsx'
+import { DEFAULT_STREAM_CONFIG, type StreamMode } from '../config.ts'
+import css from './TypewriterAssistantNodeView.module.css'
+
+type AssistantProps = ChatNodeViewProps<'assistant-step'>
+type MarkdownProps = Pick<ComponentProps<typeof MarkdownText>, 'codeLabels' | 'fileMentions' | 'text'>
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true,
+  )
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.matchMedia === undefined) return
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const onChange = () => setReduced(query.matches)
+    query.addEventListener('change', onChange)
+    return () => query.removeEventListener('change', onChange)
+  }, [])
+  return reduced
+}
+
+interface AnimatedMarkdownTextProps extends MarkdownProps {
+  streaming: boolean
+  announce: boolean
+  /** True on the last text block: that block owns conversation follow. */
+  ownFollow: boolean
+  preset: StreamSmoothingPreset
+  shouldHoldBack: () => boolean
+}
+
+/**
+ * Smooth streaming text arm. While the reply runs, the accumulated source is
+ * revealed through the smoother at a rate that tracks the model's arrival
+ * and rendered by the Harness `MarkdownText`
+ * streaming arm (incremental parse, frozen non-tail blocks), so there is no
+ * raw-text tail and no text-to-markdown swap: the tree stays markdown
+ * throughout. The last text block owns conversation-port follow so wraps
+ * glide instead of snapping. Once the stream closes and the reveal queue
+ * drains, the settled full parse (KaTeX math, fence highlighting, file
+ * mentions) swaps in exactly once.
+ */
+function AnimatedMarkdownText({
+  text,
+  codeLabels,
+  fileMentions,
+  streaming,
+  announce,
+  ownFollow,
+  preset,
+  shouldHoldBack,
+}: AnimatedMarkdownTextProps) {
+  const reduced = usePrefersReducedMotion()
+  const [typing, setTyping] = useState(streaming)
+  const speedCpsRef = useRef(35)
+  const displayed = useSmoothStreamContent(text, {
+    enabled: typing && !reduced,
+    preset,
+    shouldHoldBack,
+    speedCpsRef,
+  })
+  const shown = reduced ? text : displayed
+  const live = typing && !reduced
+
+  // The stream closed: keep revealing the remaining queue, then swap to the
+  // settled parse exactly once. The markdown tree stays mounted until then.
+  useEffect(() => {
+    if (typing && !streaming && shown.length === text.length) setTyping(false)
+  }, [shown, streaming, text, typing])
+
+  if (live) {
+    return (
+      <>
+        {announce && <span className={css.visuallyHidden} aria-live="polite">{text}</span>}
+        <FollowHost active={ownFollow} speedCpsRef={speedCpsRef}>
+          <MarkdownText text={shown} streaming codeLabels={codeLabels} />
+        </FollowHost>
+      </>
+    )
+  }
+  return <MarkdownText text={text} codeLabels={codeLabels} fileMentions={fileMentions} />
+}
+
+function imageLabels(t: AssistantProps['t']): MessageImageLabels {
+  return {
+    image: t('image.label'),
+    open: t('image.openOriginal'),
+    openNamed: label => t('image.openOriginalLabel', { label }),
+    loading: t('image.loading'),
+    loadFailed: t('image.loadFailed'),
+    lightbox: {
+      dialog: t('image.preview'),
+      close: t('image.closePreview'),
+    },
+  }
+}
+
+function firstLine(text: string): string {
+  const newline = text.indexOf('\n')
+  return newline === -1 ? text : text.slice(0, newline)
+}
+
+function latestLine(text: string): string {
+  const visible = text.trimEnd()
+  const newline = visible.lastIndexOf('\n')
+  return newline === -1 ? visible : visible.slice(newline + 1)
+}
+
+/**
+ * Built-in Think disclosure with a smoothed `text` feed. Chevron and row
+ * click stay on the disclosure chrome, which the plugin's AnimatedDisclosure
+ * renders with a height-animated body (the harness primitive would mount and
+ * unmount it, which cannot glide). The row opens only while this block is
+ * the streaming tail and closes as soon as thinking ends — a later block,
+ * or the assistant node settling — not when the rest of the reply is
+ * still streaming.
+ */
+function AnimatedReasoning({
+  text,
+  running,
+  preset,
+  shouldHoldBack,
+  t,
+}: {
+  text: string
+  running: boolean
+  preset: StreamSmoothingPreset
+  shouldHoldBack: () => boolean
+  t: AssistantProps['t']
+}) {
+  const reduced = usePrefersReducedMotion()
+  const [expanded, setExpanded] = useState(running)
+  const summaryRef = useRef<HTMLSpanElement>(null)
+  const speedCpsRef = useRef(35)
+  const displayed = useSmoothStreamContent(text, {
+    enabled: running && !reduced,
+    preset,
+    shouldHoldBack,
+    speedCpsRef,
+  })
+  const shown = running && !reduced ? displayed : text
+  const summary = running ? latestLine(shown) : firstLine(text)
+
+  useEffect(() => {
+    setExpanded(running)
+  }, [running])
+
+  useEffect(() => {
+    const element = summaryRef.current
+    if (element === null) return
+    element.scrollLeft = running ? element.scrollWidth - element.clientWidth : 0
+  }, [running, summary])
+
+  return (
+    <FollowHost active={running} speedCpsRef={speedCpsRef}>
+      <div className={css.think} data-variant="think" data-state={running ? 'running' : 'ok'}>
+        {running && <span className={css.visuallyHidden}>{t('row.running')}</span>}
+        <AnimatedDisclosure
+          rowClassName={css.thinkRow}
+          leadingClassName={css.thinkLeading}
+          titleClassName={css.thinkTitle}
+          chevronClassName={css.thinkChevron}
+          icon={<IconThinkOutline14 size={14} />}
+          title="Think"
+          open={expanded}
+          onToggle={() => { setExpanded(value => !value) }}
+          collapsedContent={(
+            <>
+              <span className={css.thinkSeparator} aria-hidden />
+              <span ref={summaryRef} className={css.thinkSummary} data-follow-end={running || undefined}>{summary}</span>
+            </>
+          )}
+        >
+          <div className={css.thinkBody}>{shown}</div>
+        </AnimatedDisclosure>
+      </div>
+    </FollowHost>
+  )
+}
+
+/**
+ * Assistant node renderer for the typewriter overlay. Text observed while
+ * streaming is revealed by the smoother through the Harness Markdown
+ * renderer at a rate that tracks arrival. Reasoning blocks keep the
+ * built-in Think disclosure and only receive a smoothed text feed; the
+ * last text or reasoning block owns conversation-port follow so wraps
+ * glide. The FPS guard holds offscreen
+ * reveals when the frame rate is degraded. Settled text renders with the
+ * full Markdown pipeline.
+ */
+export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNodeView({
+  mode: _mode = DEFAULT_STREAM_CONFIG.mode,
+  preset = DEFAULT_STREAM_CONFIG.preset,
+  revealCharsPerSec: _revealCharsPerSec = DEFAULT_STREAM_CONFIG.revealCharsPerSec,
+  scrollSpeedPxPerSec: _scrollSpeedPxPerSec = DEFAULT_STREAM_CONFIG.scrollSpeedPxPerSec,
+  maxScrollSpeedPxPerSec: _maxScrollSpeedPxPerSec = DEFAULT_STREAM_CONFIG.maxScrollSpeedPxPerSec,
+  node,
+  useTurnData,
+  openFile,
+  loadImage,
+  fileMentions,
+  t,
+}: AssistantProps & {
+  mode?: StreamMode
+  preset?: StreamSmoothingPreset
+  revealCharsPerSec?: number
+  scrollSpeedPxPerSec?: number
+  maxScrollSpeedPxPerSec?: number
+}) {
+  const data = node.data
+  const streaming = data.status === 'running'
+  const { ref: guardRef, shouldHoldBack } = useFpsGuard(streaming)
+  const rootSpeedRef = useRef(35)
+  const turn = node.location.kind === 'turn' || node.location.kind === 'step'
+    ? node.location.turn
+    : undefined
+  const tail = useTurnData('turn-tail')
+  const owner = useMemo<TurnTailOwnerProps | undefined>(() => {
+    if (turn?.status !== 'closed' || data.finalNode === undefined) return undefined
+    if (tail?.closing?.finalNode.seq !== data.finalNode.seq) return undefined
+    return { turn, seq: data.finalNode.seq, openFile }
+  }, [data.finalNode, openFile, tail, turn])
+  const mentions = useMemo(
+    () => owner === undefined ? undefined : fileMentions(owner),
+    [fileMentions, owner],
+  )
+  const codeLabels = useMemo(() => ({ copyLabel: t('copy'), copiedLabel: t('copied') }), [t])
+  const imageLoader: ImageLoader = loadImage ?? (async () => {
+    throw new Error(t('image.serviceUnavailable'))
+  })
+  const hasVisible = streaming
+    || data.status === 'interrupted'
+    || data.blocks.some(block => block.kind !== 'tool-call')
+  if (!hasVisible) return null
+
+  const rendered: ReactNode[] = []
+  const last = data.blocks.length - 1
+  let lastFollow = -1
+  for (let index = 0; index < data.blocks.length; index += 1) {
+    const kind = data.blocks[index]?.kind
+    if (kind === 'text' || kind === 'reasoning') lastFollow = index
+  }
+  for (let index = 0; index < data.blocks.length; index += 1) {
+    const block = data.blocks[index]
+    if (block === undefined) continue
+    switch (block.kind) {
+      case 'text':
+        rendered.push(
+          <AnimatedMarkdownText
+            key={index}
+            text={block.text}
+            codeLabels={codeLabels}
+            fileMentions={mentions}
+            streaming={streaming}
+            announce={index === last}
+            ownFollow={!streaming && index === lastFollow}
+            preset={preset}
+            shouldHoldBack={shouldHoldBack}
+          />,
+        )
+        break
+      case 'reasoning':
+        rendered.push(
+          <AnimatedReasoning
+            key={index}
+            text={block.text}
+            running={streaming && index === last}
+            preset={preset}
+            shouldHoldBack={shouldHoldBack}
+            t={t}
+          />,
+        )
+        break
+      case 'image': {
+        const start = index
+        const group = [block]
+        while (index + 1 < data.blocks.length) {
+          const next = data.blocks[index + 1]
+          if (next === undefined || next.kind !== 'image') break
+          group.push(next)
+          index += 1
+        }
+        rendered.push(
+          <ImageGallery key={start} images={group} load={imageLoader} align="start" labels={imageLabels(t)} />,
+        )
+        break
+      }
+      case 'tool-call':
+        break
+      case 'other':
+        rendered.push(
+          <JsonBlock
+            key={index}
+            label={t('message.unknownBlock')}
+            payload={block.block}
+            truncatedLabel={total => t('json.truncated', { total })}
+          />,
+        )
+        break
+    }
+  }
+
+  return (
+    <div ref={guardRef} className={css.root} data-streaming={streaming || undefined}>
+      <FollowHost active={streaming} speedCpsRef={rootSpeedRef}>
+        <div className={css.body}>
+          {rendered}
+          {data.status === 'interrupted' && <span className={css.stopped}>{t('message.stopped')}</span>}
+        </div>
+      </FollowHost>
+    </div>
+  )
+})

package/src/client/TypewriterToolNodeView.tsx

@@ -0,0 +1,54 @@
+import { createElement, useRef, type ComponentType } from 'react'
+import { FollowHost } from './FollowHost.tsx'
+
+/** Props forwarded through a follow wrap; extra kit seats pass through. */
+export type FollowWrapProps = {
+  node?: unknown
+  renderSlot?: unknown
+} & Record<string, unknown>
+
+/**
+ * True while a Chat node is still growing: an assistant/workflow `status:
+ * 'running'` payload, a Tool root that has not settled (`kind` absent), or a
+ * model-retry whose current attempt is still `scheduled`.
+ * @param node - The Chat node's view `node` prop.
+ * @returns whether this row should own conversation follow.
+ */
+export function isGrowingChatNode(node: unknown): boolean {
+  if (node === null || typeof node !== 'object' || !('data' in node)) return false
+  const data = (node as { data: unknown }).data
+  if (data === null || typeof data !== 'object') return false
+  if ('status' in data && (data as { status: unknown }).status === 'running') return true
+  if ('root' in data) {
+    const root = (data as { root: unknown }).root
+    if (root !== null && typeof root === 'object' && !('kind' in root)) return true
+  }
+  if ('current' in data) {
+    const current = (data as { current: unknown }).current
+    if (
+      current !== null
+      && typeof current === 'object'
+      && 'retryState' in current
+      && (current as { retryState: unknown }).retryState === 'scheduled'
+    ) return true
+  }
+  return false
+}
+
+/**
+ * Wrap a prior Chat node renderer so a growing row shares conversation
+ * follow. Presentation stays with the wrapped component; kit seats
+ * (`renderSlot`, locale, inject) pass through unchanged.
+ * @param Inner - The already-registered row component.
+ * @returns A follow-hosted row.
+ */
+export function wrapFollowNodeView(Inner: ComponentType<FollowWrapProps>) {
+  return function TypewriterFollowNodeView(props: FollowWrapProps) {
+    const speedCpsRef = useRef(35)
+    return (
+      <FollowHost active={isGrowingChatNode(props.node)} speedCpsRef={speedCpsRef}>
+        {createElement(Inner, props)}
+      </FollowHost>
+    )
+  }
+}