@changfenhuang/dsh-genui 0.9.1

package/src/client/GenuiBlock.tsx

@@ -0,0 +1,166 @@
+/**
+ * GenuiBlock: renders a declarative GenUI spec (from a ```dsh-ui fence in an
+ * assistant reply) as real interactive components inline in the conversation.
+ * The component tree is white-listed and mapped to DOM directly — no raw HTML.
+ * The block shell holds the shared interaction state (answers registry,
+ * durable localStorage persistence, action debounce); the per-family
+ * components live in src/client/blocks/*.
+ */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useGenuiAction } from './action-context.ts'
+import css from './GenuiBlock.module.css'
+import { loadBlockState, saveBlockState } from './interaction-store.ts'
+import { renderNode } from './blocks/render-node.tsx'
+import type { AnswersState, GenuiBlockProps, QuestionMeta } from './blocks/state.ts'
+import type { GenuiSpec } from './spec.ts'
+
+export const GENUI_ACTION_DEBOUNCE_MS = 300
+
+/**
+ * Wrap the harness action callback with the per-action trailing debounce.
+ * Absent provider = v1 behavior (components are display-only, callback
+ * stays undefined). Pending timers are cleared on unmount so a click that
+ * never fired does not leak into the next mount.
+ */
+function useDebouncedAction(onAction: GenuiBlockProps['onAction'] | undefined): GenuiBlockProps['onAction'] {
+  const pending = useRef<Map<string, ReturnType<typeof setTimeout>> | null>(null)
+  useEffect(() => {
+    return () => {
+      const timers = pending.current
+      if (timers === null) return
+      for (const timer of timers.values()) clearTimeout(timer)
+      timers.clear()
+    }
+  }, [])
+  return useMemo(() => {
+    if (onAction === undefined) return undefined
+    const timers = new Map<string, ReturnType<typeof setTimeout>>()
+    pending.current = timers
+    return (action: string, payload: Record<string, unknown>): void => {
+      const existing = timers.get(action)
+      if (existing !== undefined) clearTimeout(existing)
+      timers.set(action, setTimeout(() => {
+        timers.delete(action)
+        onAction(action, payload)
+      }, GENUI_ACTION_DEBOUNCE_MS))
+    }
+  }, [onAction])
+}
+
+/**
+ * Structural spec equality for the memo comparator: the fence path re-parses
+ * the body on every streaming chunk and produces a FRESH object even when the
+ * repaired content is unchanged (a chunk that closed no new component). The
+ * default shallow memo would then re-render the whole tree per chunk — up to
+ * ~200 full-tree renders for a max-size fence. Stringify equality makes the
+ * memo skip renders whose content did not actually change; the cost is one
+ * JSON.stringify per chunk (≤200 nodes, negligible next to a React tree
+ * reconciliation). `stateKey` already embeds the content fingerprint, so when
+ * both keys are equal and non-undefined the specs necessarily stringify
+ * equal — the stringify branch matters for the streaming path (stateKey
+ * undefined).
+ */
+function specEquivalent(a: GenuiSpec, b: GenuiSpec): boolean {
+  if (a === b) return true
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+/**
+ * Render a GenUI spec as an inline block. Falls back to nothing when the spec
+ * carries no items (the fence renderer already refused non-specs before us).
+ */
+export const GenuiBlock = memo(function GenuiBlock({ spec, stateKey }: GenuiBlockProps) {
+  const gap = spec.gap ?? 16
+  const onAction = useDebouncedAction(useGenuiAction())
+  // v2.5/v2.6 answers registry: grouped radios record selections + question
+  // metadata here; `submit` nodes grade locally (locked until 重新作答) or
+  // collect into one action. Block-local state survives re-renders (streaming
+  // settle, panel updates) — selections persist while the block is mounted.
+  // v2.7 durability: with a stateKey the state ALSO survives refresh/reopen —
+  // loaded once at mount (seed for re-renders of the same content) and saved
+  // on every change.
+  const [persisted] = useState(() => (stateKey === undefined ? null : loadBlockState(stateKey)))
+  const [answers, setAnswers] = useState<Record<string, string>>(persisted?.answers ?? {})
+  const [fields, setFields] = useState<Record<string, string>>(persisted?.fields ?? {})
+  const [meta, setMeta] = useState<Record<string, QuestionMeta>>({})
+  const [locked, setLocked] = useState(persisted?.locked === true)
+  const [round, setRound] = useState(0)
+  // Secret (password) field ids: their values never persist and never join
+  // submit collection — the input itself stays masked and its own action
+  // still delivers the value on explicit user submit.
+  const [secretFields, setSecretFields] = useState<ReadonlySet<string>>(new Set())
+  const setAnswer = useCallback((group: string, choice: string) => {
+    setAnswers(prev => (prev[group] === choice ? prev : { ...prev, [group]: choice }))
+  }, [])
+  const setField = useCallback((id: string, value: string) => {
+    // Field invariant: a blank (trim-empty) value leaves the shared registry.
+    setFields(prev => {
+      if (value.trim() === '') {
+        if (!(id in prev)) return prev
+        const next = { ...prev }
+        delete next[id]
+        return next
+      }
+      return prev[id] === value ? prev : { ...prev, [id]: value }
+    })
+  }, [])
+  const registerSecretField = useCallback((id: string) => {
+    setSecretFields(prev => (prev.has(id) ? prev : new Set(prev).add(id)))
+  }, [])
+  const registerMeta = useCallback((group: string, m: QuestionMeta) => {
+    setMeta(prev => {
+      const existing = prev[group]
+      if (existing !== undefined && existing.label === m.label && existing.answer === m.answer
+        && existing.explanation === m.explanation) return prev
+      return { ...prev, [group]: m }
+    })
+  }, [])
+  const clear = useCallback(() => {
+    setAnswers({})
+    setLocked(false)
+    setRound(r => r + 1) // radios remount (key carries the round) with clean selections
+  }, [])
+  const answersState = useMemo<AnswersState>(
+    () => ({
+      answers, fields, secretFields, meta, locked, round,
+      setAnswer, setField, registerSecretField, registerMeta, clear, setLocked,
+    }),
+    [answers, fields, secretFields, meta, locked, round, setAnswer, setField, registerSecretField, registerMeta, clear],
+  )
+  // Durable save (debounced 300ms — typing in a field fires per keystroke).
+  // Secret field values are stripped before writing: passwords never persist.
+  useEffect(() => {
+    if (stateKey === undefined) return
+    const timer = setTimeout(() => {
+      const safeFields = Object.fromEntries(
+        Object.entries(fields).filter(([id]) => !secretFields.has(id)),
+      )
+      saveBlockState(stateKey, {
+        answers,
+        locked,
+        ...(Object.keys(safeFields).length > 0 ? { fields: safeFields } : {}),
+      })
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [stateKey, answers, locked, fields, secretFields])
+  return (
+    <div className={css.block} data-genui>
+      {spec.title !== undefined && <div className={css.banner}>{spec.title}</div>}
+      <div className={css.col} style={{ gap: `${gap}px` }}>
+        {spec.items.map((c, i) => (
+          // Staggered reveal: each root item fades/slides in after its
+          // predecessors, so the block assembles piece by piece instead of
+          // popping in as one slab. Delay capped so long specs still settle
+          // quickly; prefers-reduced-motion disables it (see CSS).
+          <div
+            key={i}
+            className={css.reveal}
+            style={{ animationDelay: `${Math.min(i * 90, 720)}ms` }}
+          >
+            {renderNode(c, i, onAction, 0, answersState)}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}, (prev, next) => prev.stateKey === next.stateKey && specEquivalent(prev.spec, next.spec))

package/src/client/PlotBlock.module.css

@@ -0,0 +1,155 @@
+/* PlotBlock: SVG function plot inside a genui block. Design system v2
+   (0.5.0): same token vocabulary as GenuiBlock.module.css — this root
+   carries its own copy because the plot can also mount standalone. */
+
+.block {
+  --dsl-g-radius-surface: 12px;
+  --dsl-g-radius-control: 8px;
+
+  --dsl-g-font-title: 13px;
+  --dsl-g-font-meta: 12px;
+  --dsl-g-font-data: 11px;
+
+  --dsl-g-gap-md: 12px;
+  --dsl-g-gap-sm: 8px;
+  --dsl-g-gap-xs: 4px;
+
+  --dsl-g-border: var(--dsw-alias-border-l1, var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12)));
+  --dsl-g-accent: var(--dsw-alias-state-business-primary, #4f8ef7);
+  --dsl-g-accent-soft: color-mix(in srgb, var(--dsl-g-accent) var(--dsl-g-tint), transparent);
+  --dsl-g-tint: 8%;
+  --dsl-g-tint-strong: 14%;
+  --dsl-g-font-mono: var(--ds-font-family-code, ui-monospace, 'SF Mono', monospace);
+
+  padding: 14px 16px;
+  background: var(--dsw-alias-bg-layer-1, var(--dsw-alias-markdown-code-block));
+  border: 1px solid var(--dsl-g-border);
+  border-radius: var(--dsl-g-radius-surface);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsl-g-gap-sm);
+}
+
+.title {
+  font-size: var(--dsl-g-font-title);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--dsw-alias-label-primary);
+}
+
+.gridLine {
+  stroke: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.07));
+  stroke-width: 1;
+}
+
+.axis {
+  stroke: var(--dsw-alias-label-tertiary);
+  stroke-width: 1;
+}
+
+.tick {
+  fill: var(--dsw-alias-label-tertiary);
+  font-size: var(--dsl-g-font-data);
+  font-family: var(--dsl-g-font-mono);
+}
+
+.line {
+  fill: none;
+  stroke: var(--dsl-g-accent);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* v2.9 draw shapes */
+.area {
+  stroke: none;
+  fill-opacity: 0.16;
+}
+.scatterDot {
+  stroke: var(--dsw-alias-bg-base, #17171a);
+  stroke-width: 1;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsl-g-gap-md);
+}
+
+.legendItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsl-g-gap-xs);
+  font-size: var(--dsl-g-font-meta);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.legendSwatch {
+  width: 10px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--dsl-g-accent);
+}
+
+.empty {
+  padding: 14px 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: var(--dsl-g-font-title);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsl-g-gap-xs);
+}
+
+.emptyRow {
+  font-family: var(--dsl-g-font-mono);
+}
+
+.surface { cursor: grab; touch-action: none; }
+.surface:active { cursor: grabbing; }
+
+.sliders { display: flex; flex-direction: column; gap: var(--dsl-g-gap-sm); }
+.sliderRow { display: flex; align-items: center; gap: var(--dsl-g-gap-sm); font-size: var(--dsl-g-font-meta); }
+.sliderName { color: var(--dsw-alias-label-secondary); min-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.slider { flex: 1; accent-color: var(--dsl-g-accent); height: 4px; cursor: pointer; }
+.sliderValue { color: var(--dsw-alias-label-primary); font-family: var(--dsl-g-font-mono); min-width: 34px; text-align: right; }
+
+/* ---------- animation bar ---------- */
+
+.animBar { display: flex; align-items: center; gap: var(--dsl-g-gap-md); }
+.playBtn {
+  width: fit-content;
+  background: var(--dsl-g-accent-soft);
+  border: 1px solid color-mix(in srgb, var(--dsl-g-accent) 30%, transparent);
+  color: var(--dsl-g-accent);
+  border-radius: var(--dsl-g-radius-control);
+  padding: 6px 14px;
+  font-size: var(--dsl-g-font-title);
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+.playBtn:hover { filter: brightness(1.1); }
+.animTrack {
+  flex: 1;
+  height: 5px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: inset 0 0 0 1px var(--dsl-g-border);
+  overflow: hidden;
+}
+.animFill { height: 100%; border-radius: 999px; background: var(--dsl-g-accent); }
+.resetBtn {
+  width: fit-content;
+  background: transparent;
+  border: 1px solid var(--dsl-g-border);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: var(--dsl-g-radius-control);
+  padding: 6px 14px;
+  font-size: var(--dsl-g-font-title);
+  font-family: inherit;
+  cursor: pointer;
+}
+.resetBtn:hover { border-color: var(--dsl-g-accent); color: var(--dsl-g-accent); }
+.slidersHead { display: flex; align-items: center; justify-content: space-between; }
+.slidersTitle { font-size: var(--dsl-g-font-meta); color: var(--dsw-alias-label-tertiary); }