@assistant-ui/react 0.14.18 → 0.14.20

package/dist/utils/smooth/useSmooth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSmooth.js","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useAui, useAuiState } from \"@assistant-ui/store\";\nimport type {\n  MessagePartStatus,\n  ReasoningMessagePart,\n  TextMessagePart,\n  MessagePartState,\n} from \"@assistant-ui/core\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useSmoothStatusStore } from \"./SmoothContext\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\n/**\n * Tuning options for the smooth text streaming animation.\n */\nexport type SmoothOptions = {\n  /**\n   * Target time in milliseconds to drain the backlog of unrevealed\n   * characters. Larger values reveal long backlogs more gradually.\n   * @default 250\n   */\n  drainMs?: number | undefined;\n  /**\n   * Maximum time in milliseconds between revealed characters, i.e. the\n   * slowest reveal rate when the backlog is short.\n   * @default 5\n   */\n  maxCharIntervalMs?: number | undefined;\n  /**\n   * Maximum number of characters revealed per animation frame.\n   * @default Infinity\n   */\n  maxCharsPerFrame?: number | undefined;\n};\n\nconst DEFAULT_DRAIN_MS = 250;\nconst DEFAULT_MAX_CHAR_INTERVAL_MS = 5;\n\nclass TextStreamAnimator {\n  private animationFrameId: number | null = null;\n  private lastUpdateTime: number = Date.now();\n\n  public targetText: string = \"\";\n  public drainMs: number = DEFAULT_DRAIN_MS;\n  public maxCharIntervalMs: number = DEFAULT_MAX_CHAR_INTERVAL_MS;\n  public maxCharsPerFrame: number = Infinity;\n\n  constructor(\n    public currentText: string,\n    private setText: (newText: string) => void,\n  ) {}\n\n  start() {\n    if (this.animationFrameId !== null) return;\n    this.lastUpdateTime = Date.now();\n    this.animate();\n  }\n\n  stop() {\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n  }\n\n  private animate = () => {\n    const currentTime = Date.now();\n    const deltaTime = currentTime - this.lastUpdateTime;\n    let timeToConsume = deltaTime;\n\n    const remainingChars = this.targetText.length - this.currentText.length;\n    const baseTimePerChar = Math.min(\n      this.maxCharIntervalMs,\n      this.drainMs / remainingChars,\n    );\n\n    const frameLimit = Math.min(remainingChars, this.maxCharsPerFrame);\n    let charsToAdd = 0;\n    while (timeToConsume >= baseTimePerChar && charsToAdd < frameLimit) {\n      charsToAdd++;\n      timeToConsume -= baseTimePerChar;\n    }\n    // A cap-limited frame must not bank its surplus time, or the next\n    // frame would burst past the cap.\n    if (charsToAdd === frameLimit && frameLimit === this.maxCharsPerFrame) {\n      timeToConsume = 0;\n    }\n\n    if (charsToAdd !== remainingChars) {\n      this.animationFrameId = requestAnimationFrame(this.animate);\n    } else {\n      this.animationFrameId = null;\n    }\n    if (charsToAdd === 0) return;\n\n    this.currentText = this.targetText.slice(\n      0,\n      this.currentText.length + charsToAdd,\n    );\n    this.lastUpdateTime = currentTime - timeToConsume;\n    this.setText(this.currentText);\n  };\n}\n\nconst SMOOTH_STATUS: MessagePartStatus = Object.freeze({\n  type: \"running\",\n});\n\nconst positiveOr = (value: number | undefined, fallback: number): number =>\n  value !== undefined && value > 0 ? value : fallback;\n\n/**\n * Animates streamed message part text with a typewriter-style reveal.\n *\n * Takes the current part state and a `smooth` argument: `false` disables,\n * `true` uses the default rate, and a {@link SmoothOptions} object tunes\n * the reveal. Returns the part state with `text` replaced by the revealed\n * prefix and `status` reporting `running` until the reveal catches up.\n *\n * @example\n * ```tsx\n * const { text, status } = useSmooth(useMessagePartText(), {\n *   drainMs: 500,\n *   maxCharsPerFrame: 30,\n * });\n * ```\n */\nexport const useSmooth = (\n  state: MessagePartState & (TextMessagePart | ReasoningMessagePart),\n  smooth: boolean | SmoothOptions = false,\n): MessagePartState & (TextMessagePart | ReasoningMessagePart) => {\n  const { text } = state;\n  const options =\n    typeof smooth === \"object\" && smooth !== null ? smooth : undefined;\n  const enabled = smooth !== false && smooth !== null;\n  const drainMs = positiveOr(options?.drainMs, DEFAULT_DRAIN_MS);\n  const maxCharIntervalMs = positiveOr(\n    options?.maxCharIntervalMs,\n    DEFAULT_MAX_CHAR_INTERVAL_MS,\n  );\n  const maxCharsPerFrame = positiveOr(options?.maxCharsPerFrame, Infinity);\n\n  const [displayedText, setDisplayedText] = useState(\n    state.status.type === \"running\" ? \"\" : text,\n  );\n\n  // Render-phase resync on part flip or text discontinuity, so the\n  // first paint after a thread switch never shows the previous\n  // part's text (#4051). `displayedText` is already a prefix of\n  // `text` during normal streaming, so use it as the previous-text\n  // reference instead of carrying separate state — avoids the\n  // double render per streaming token. Read part identity through\n  // `useAuiState` so we actually subscribe to its changes instead\n  // of relying on a render-time proxy reference that may be stable\n  // across thread swaps.\n  const aui = useAui();\n  const part = useAuiState(() => aui.part());\n  const [prevPart, setPrevPart] = useState(part);\n  if (part !== prevPart || !text.startsWith(displayedText)) {\n    setPrevPart(part);\n    setDisplayedText(state.status.type === \"running\" ? \"\" : text);\n  }\n\n  const smoothStatusStore = useSmoothStatusStore({ optional: true });\n  const setText = useCallbackRef((text: string) => {\n    setDisplayedText(text);\n    if (smoothStatusStore) {\n      const target =\n        displayedText !== text || state.status.type === \"running\"\n          ? SMOOTH_STATUS\n          : state.status;\n      writableStore(smoothStatusStore).setState(target, true);\n    }\n  });\n\n  // TODO this is hacky\n  useEffect(() => {\n    if (smoothStatusStore) {\n      const target =\n        enabled && (displayedText !== text || state.status.type === \"running\")\n          ? SMOOTH_STATUS\n          : state.status;\n      writableStore(smoothStatusStore).setState(target, true);\n    }\n  }, [smoothStatusStore, enabled, text, displayedText, state.status]);\n\n  const [animatorRef] = useState<TextStreamAnimator>(\n    new TextStreamAnimator(displayedText, setText),\n  );\n\n  useEffect(() => {\n    animatorRef.drainMs = drainMs;\n    animatorRef.maxCharIntervalMs = maxCharIntervalMs;\n    animatorRef.maxCharsPerFrame = maxCharsPerFrame;\n  }, [animatorRef, drainMs, maxCharIntervalMs, maxCharsPerFrame]);\n\n  const animatorPartRef = useRef(part);\n  useEffect(() => {\n    if (!enabled) {\n      animatorRef.stop();\n      return;\n    }\n\n    // Discontinuity: part flipped, or new text breaks continuation\n    // of the animator's current target. Either case requires\n    // resetting the cursor — without the part check, a new part\n    // whose text happens to share a prefix with the previous target\n    // would keep the stale cursor and flicker.\n    const partChanged = animatorPartRef.current !== part;\n    animatorPartRef.current = part;\n    if (partChanged || !text.startsWith(animatorRef.targetText)) {\n      if (state.status.type === \"running\") {\n        animatorRef.currentText = \"\";\n        animatorRef.targetText = text;\n        animatorRef.start();\n      } else {\n        animatorRef.currentText = text;\n        animatorRef.targetText = text;\n        animatorRef.stop();\n      }\n      return;\n    }\n\n    animatorRef.targetText = text;\n    animatorRef.start();\n  }, [animatorRef, enabled, text, state.status.type, part]);\n\n  useEffect(() => {\n    return () => {\n      animatorRef.stop();\n    };\n  }, [animatorRef]);\n\n  return useMemo(\n    () =>\n      enabled\n        ? {\n            ...state,\n            text: displayedText,\n            status: text === displayedText ? state.status : SMOOTH_STATUS,\n          }\n        : state,\n    [enabled, displayedText, state, text],\n  );\n};\n"],"mappings":";;;;;;;AAqCA,MAAM,mBAAmB;AACzB,MAAM,+BAA+B;AAErC,IAAM,qBAAN,MAAyB;CAUd;CACC;CAVV,mBAA0C;CAC1C,iBAAiC,KAAK,IAAI;CAE1C,aAA4B;CAC5B,UAAyB;CACzB,oBAAmC;CACnC,mBAAkC;CAElC,YACE,aACA,SACA;EAFO,KAAA,cAAA;EACC,KAAA,UAAA;CACP;CAEH,QAAQ;EACN,IAAI,KAAK,qBAAqB,MAAM;EACpC,KAAK,iBAAiB,KAAK,IAAI;EAC/B,KAAK,QAAQ;CACf;CAEA,OAAO;EACL,IAAI,KAAK,qBAAqB,MAAM;GAClC,qBAAqB,KAAK,gBAAgB;GAC1C,KAAK,mBAAmB;EAC1B;CACF;CAEA,gBAAwB;EACtB,MAAM,cAAc,KAAK,IAAI;EAE7B,IAAI,gBADc,cAAc,KAAK;EAGrC,MAAM,iBAAiB,KAAK,WAAW,SAAS,KAAK,YAAY;EACjE,MAAM,kBAAkB,KAAK,IAC3B,KAAK,mBACL,KAAK,UAAU,cACjB;EAEA,MAAM,aAAa,KAAK,IAAI,gBAAgB,KAAK,gBAAgB;EACjE,IAAI,aAAa;EACjB,OAAO,iBAAiB,mBAAmB,aAAa,YAAY;GAClE;GACA,iBAAiB;EACnB;EAGA,IAAI,eAAe,cAAc,eAAe,KAAK,kBACnD,gBAAgB;EAGlB,IAAI,eAAe,gBACjB,KAAK,mBAAmB,sBAAsB,KAAK,OAAO;OAE1D,KAAK,mBAAmB;EAE1B,IAAI,eAAe,GAAG;EAEtB,KAAK,cAAc,KAAK,WAAW,MACjC,GACA,KAAK,YAAY,SAAS,UAC5B;EACA,KAAK,iBAAiB,cAAc;EACpC,KAAK,QAAQ,KAAK,WAAW;CAC/B;AACF;AAEA,MAAM,gBAAmC,OAAO,OAAO,EACrD,MAAM,UACR,CAAC;AAED,MAAM,cAAc,OAA2B,aAC7C,UAAU,KAAA,KAAa,QAAQ,IAAI,QAAQ;;;;;;;;;;;;;;;;;AAkB7C,MAAa,aACX,OACA,SAAkC,UAC8B;CAChE,MAAM,EAAE,SAAS;CACjB,MAAM,UACJ,OAAO,WAAW,YAAY,WAAW,OAAO,SAAS,KAAA;CAC3D,MAAM,UAAU,WAAW,SAAS,WAAW;CAC/C,MAAM,UAAU,WAAW,SAAS,SAAS,gBAAgB;CAC7D,MAAM,oBAAoB,WACxB,SAAS,mBACT,4BACF;CACA,MAAM,mBAAmB,WAAW,SAAS,kBAAkB,QAAQ;CAEvE,MAAM,CAAC,eAAe,oBAAoB,SACxC,MAAM,OAAO,SAAS,YAAY,KAAK,IACzC;CAWA,MAAM,MAAM,OAAO;CACnB,MAAM,OAAO,kBAAkB,IAAI,KAAK,CAAC;CACzC,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,IAAI,SAAS,YAAY,CAAC,KAAK,WAAW,aAAa,GAAG;EACxD,YAAY,IAAI;EAChB,iBAAiB,MAAM,OAAO,SAAS,YAAY,KAAK,IAAI;CAC9D;CAEA,MAAM,oBAAoB,qBAAqB,EAAE,UAAU,KAAK,CAAC;CACjE,MAAM,UAAU,gBAAgB,SAAiB;EAC/C,iBAAiB,IAAI;EACrB,IAAI,mBAAmB;GACrB,MAAM,SACJ,kBAAkB,QAAQ,MAAM,OAAO,SAAS,YAC5C,gBACA,MAAM;GACZ,cAAc,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;EACxD;CACF,CAAC;CAGD,gBAAgB;EACd,IAAI,mBAAmB;GACrB,MAAM,SACJ,YAAY,kBAAkB,QAAQ,MAAM,OAAO,SAAS,aACxD,gBACA,MAAM;GACZ,cAAc,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;EACxD;CACF,GAAG;EAAC;EAAmB;EAAS;EAAM;EAAe,MAAM;CAAM,CAAC;CAElE,MAAM,CAAC,eAAe,SACpB,IAAI,mBAAmB,eAAe,OAAO,CAC/C;CAEA,gBAAgB;EACd,YAAY,UAAU;EACtB,YAAY,oBAAoB;EAChC,YAAY,mBAAmB;CACjC,GAAG;EAAC;EAAa;EAAS;EAAmB;CAAgB,CAAC;CAE9D,MAAM,kBAAkB,OAAO,IAAI;CACnC,gBAAgB;EACd,IAAI,CAAC,SAAS;GACZ,YAAY,KAAK;GACjB;EACF;EAOA,MAAM,cAAc,gBAAgB,YAAY;EAChD,gBAAgB,UAAU;EAC1B,IAAI,eAAe,CAAC,KAAK,WAAW,YAAY,UAAU,GAAG;GAC3D,IAAI,MAAM,OAAO,SAAS,WAAW;IACnC,YAAY,cAAc;IAC1B,YAAY,aAAa;IACzB,YAAY,MAAM;GACpB,OAAO;IACL,YAAY,cAAc;IAC1B,YAAY,aAAa;IACzB,YAAY,KAAK;GACnB;GACA;EACF;EAEA,YAAY,aAAa;EACzB,YAAY,MAAM;CACpB,GAAG;EAAC;EAAa;EAAS;EAAM,MAAM,OAAO;EAAM;CAAI,CAAC;CAExD,gBAAgB;EACd,aAAa;GACX,YAAY,KAAK;EACnB;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO,cAEH,UACI;EACE,GAAG;EACH,MAAM;EACN,QAAQ,SAAS,gBAAgB,MAAM,SAAS;CAClD,IACA,OACN;EAAC;EAAS;EAAe;EAAO;CAAI,CACtC;AACF"}
+{"version":3,"file":"useSmooth.js","names":["useEffect","useMemo","useRef","useState","useAui","useAuiState","MessagePartStatus","ReasoningMessagePart","TextMessagePart","MessagePartState","useCallbackRef","useSmoothStatusStore","writableStore","SmoothOptions","drainMs","maxCharIntervalMs","maxCharsPerFrame","DEFAULT_DRAIN_MS","DEFAULT_MAX_CHAR_INTERVAL_MS","TextStreamAnimator","animationFrameId","lastUpdateTime","Date","now","targetText","Infinity","constructor","currentText","setText","newText","start","animate","stop","cancelAnimationFrame","currentTime","deltaTime","timeToConsume","remainingChars","length","baseTimePerChar","Math","min","frameLimit","charsToAdd","requestAnimationFrame","slice","SMOOTH_STATUS","Object","freeze","type","positiveOr","value","fallback","undefined","useSmooth","state","smooth","text","options","enabled","displayedText","setDisplayedText","status","aui","part","prevPart","setPrevPart","startsWith","smoothStatusStore","optional","target","setState","animatorRef","animatorPartRef","partChanged","current"],"sources":["../../../src/utils/smooth/useSmooth.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useAui, useAuiState } from \"@assistant-ui/store\";\nimport type {\n  MessagePartStatus,\n  ReasoningMessagePart,\n  TextMessagePart,\n  MessagePartState,\n} from \"@assistant-ui/core\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useSmoothStatusStore } from \"./SmoothContext\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\n/**\n * Tuning options for the smooth text streaming animation.\n */\nexport type SmoothOptions = {\n  /**\n   * Target time in milliseconds to drain the backlog of unrevealed\n   * characters. Larger values reveal long backlogs more gradually.\n   * @default 250\n   */\n  drainMs?: number | undefined;\n  /**\n   * Maximum time in milliseconds between revealed characters, i.e. the\n   * slowest reveal rate when the backlog is short.\n   * @default 5\n   */\n  maxCharIntervalMs?: number | undefined;\n  /**\n   * Maximum number of characters revealed per animation frame.\n   * @default Infinity\n   */\n  maxCharsPerFrame?: number | undefined;\n};\n\nconst DEFAULT_DRAIN_MS = 250;\nconst DEFAULT_MAX_CHAR_INTERVAL_MS = 5;\n\nclass TextStreamAnimator {\n  private animationFrameId: number | null = null;\n  private lastUpdateTime: number = Date.now();\n\n  public targetText: string = \"\";\n  public drainMs: number = DEFAULT_DRAIN_MS;\n  public maxCharIntervalMs: number = DEFAULT_MAX_CHAR_INTERVAL_MS;\n  public maxCharsPerFrame: number = Infinity;\n\n  constructor(\n    public currentText: string,\n    private setText: (newText: string) => void,\n  ) {}\n\n  start() {\n    if (this.animationFrameId !== null) return;\n    this.lastUpdateTime = Date.now();\n    this.animate();\n  }\n\n  stop() {\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n  }\n\n  private animate = () => {\n    const currentTime = Date.now();\n    const deltaTime = currentTime - this.lastUpdateTime;\n    let timeToConsume = deltaTime;\n\n    const remainingChars = this.targetText.length - this.currentText.length;\n    const baseTimePerChar = Math.min(\n      this.maxCharIntervalMs,\n      this.drainMs / remainingChars,\n    );\n\n    const frameLimit = Math.min(remainingChars, this.maxCharsPerFrame);\n    let charsToAdd = 0;\n    while (timeToConsume >= baseTimePerChar && charsToAdd < frameLimit) {\n      charsToAdd++;\n      timeToConsume -= baseTimePerChar;\n    }\n    // A cap-limited frame must not bank its surplus time, or the next\n    // frame would burst past the cap.\n    if (charsToAdd === frameLimit && frameLimit === this.maxCharsPerFrame) {\n      timeToConsume = 0;\n    }\n\n    if (charsToAdd !== remainingChars) {\n      this.animationFrameId = requestAnimationFrame(this.animate);\n    } else {\n      this.animationFrameId = null;\n    }\n    if (charsToAdd === 0) return;\n\n    this.currentText = this.targetText.slice(\n      0,\n      this.currentText.length + charsToAdd,\n    );\n    this.lastUpdateTime = currentTime - timeToConsume;\n    this.setText(this.currentText);\n  };\n}\n\nconst SMOOTH_STATUS: MessagePartStatus = Object.freeze({\n  type: \"running\",\n});\n\nconst positiveOr = (value: number | undefined, fallback: number): number =>\n  value !== undefined && value > 0 ? value : fallback;\n\n/**\n * Animates streamed message part text with a typewriter-style reveal.\n *\n * Takes the current part state and a `smooth` argument: `false` disables,\n * `true` uses the default rate, and a {@link SmoothOptions} object tunes\n * the reveal. Returns the part state with `text` replaced by the revealed\n * prefix and `status` reporting `running` until the reveal catches up.\n *\n * @example\n * ```tsx\n * const { text, status } = useSmooth(useMessagePartText(), {\n *   drainMs: 500,\n *   maxCharsPerFrame: 30,\n * });\n * ```\n */\nexport const useSmooth = (\n  state: MessagePartState & (TextMessagePart | ReasoningMessagePart),\n  smooth: boolean | SmoothOptions = false,\n): MessagePartState & (TextMessagePart | ReasoningMessagePart) => {\n  const { text } = state;\n  const options =\n    typeof smooth === \"object\" && smooth !== null ? smooth : undefined;\n  const enabled = smooth !== false && smooth !== null;\n  const drainMs = positiveOr(options?.drainMs, DEFAULT_DRAIN_MS);\n  const maxCharIntervalMs = positiveOr(\n    options?.maxCharIntervalMs,\n    DEFAULT_MAX_CHAR_INTERVAL_MS,\n  );\n  const maxCharsPerFrame = positiveOr(options?.maxCharsPerFrame, Infinity);\n\n  const [displayedText, setDisplayedText] = useState(\n    state.status.type === \"running\" ? \"\" : text,\n  );\n\n  // Render-phase resync on part flip or text discontinuity, so the\n  // first paint after a thread switch never shows the previous\n  // part's text (#4051). `displayedText` is already a prefix of\n  // `text` during normal streaming, so use it as the previous-text\n  // reference instead of carrying separate state — avoids the\n  // double render per streaming token. Read part identity through\n  // `useAuiState` so we actually subscribe to its changes instead\n  // of relying on a render-time proxy reference that may be stable\n  // across thread swaps.\n  const aui = useAui();\n  const part = useAuiState(() => aui.part());\n  const [prevPart, setPrevPart] = useState(part);\n  if (part !== prevPart || !text.startsWith(displayedText)) {\n    setPrevPart(part);\n    setDisplayedText(state.status.type === \"running\" ? \"\" : text);\n  }\n\n  const smoothStatusStore = useSmoothStatusStore({ optional: true });\n  const setText = useCallbackRef((text: string) => {\n    setDisplayedText(text);\n    if (smoothStatusStore) {\n      const target =\n        displayedText !== text || state.status.type === \"running\"\n          ? SMOOTH_STATUS\n          : state.status;\n      writableStore(smoothStatusStore).setState(target, true);\n    }\n  });\n\n  // TODO this is hacky\n  useEffect(() => {\n    if (smoothStatusStore) {\n      const target =\n        enabled && (displayedText !== text || state.status.type === \"running\")\n          ? SMOOTH_STATUS\n          : state.status;\n      writableStore(smoothStatusStore).setState(target, true);\n    }\n  }, [smoothStatusStore, enabled, text, displayedText, state.status]);\n\n  const [animatorRef] = useState<TextStreamAnimator>(\n    new TextStreamAnimator(displayedText, setText),\n  );\n\n  useEffect(() => {\n    animatorRef.drainMs = drainMs;\n    animatorRef.maxCharIntervalMs = maxCharIntervalMs;\n    animatorRef.maxCharsPerFrame = maxCharsPerFrame;\n  }, [animatorRef, drainMs, maxCharIntervalMs, maxCharsPerFrame]);\n\n  const animatorPartRef = useRef(part);\n  useEffect(() => {\n    if (!enabled) {\n      animatorRef.stop();\n      return;\n    }\n\n    // Discontinuity: part flipped, or new text breaks continuation\n    // of the animator's current target. Either case requires\n    // resetting the cursor — without the part check, a new part\n    // whose text happens to share a prefix with the previous target\n    // would keep the stale cursor and flicker.\n    const partChanged = animatorPartRef.current !== part;\n    animatorPartRef.current = part;\n    if (partChanged || !text.startsWith(animatorRef.targetText)) {\n      if (state.status.type === \"running\") {\n        animatorRef.currentText = \"\";\n        animatorRef.targetText = text;\n        animatorRef.start();\n      } else {\n        animatorRef.currentText = text;\n        animatorRef.targetText = text;\n        animatorRef.stop();\n      }\n      return;\n    }\n\n    animatorRef.targetText = text;\n    animatorRef.start();\n  }, [animatorRef, enabled, text, state.status.type, part]);\n\n  useEffect(() => {\n    return () => {\n      animatorRef.stop();\n    };\n  }, [animatorRef]);\n\n  return useMemo(\n    () =>\n      enabled\n        ? {\n            ...state,\n            text: displayedText,\n            status: text === displayedText ? state.status : SMOOTH_STATUS,\n          }\n        : state,\n    [enabled, displayedText, state, text],\n  );\n};\n"],"mappings":"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"}

package/dist/utils/useToolArgsFieldStatus.js

@@ -1,13 +1,21 @@
 import { useAuiState } from "@assistant-ui/store";
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
 import { getPartialJsonObjectFieldState } from "assistant-stream/utils";
 //#region src/utils/useToolArgsFieldStatus.ts
 const COMPLETE_STATUS = { type: "complete" };
 const useToolArgsFieldStatus = (fieldPath) => {
-	return useAuiState((s) => {
-		if (s.part.type !== "tool-call") throw new Error("useToolArgsFieldStatus can only be used inside tool-call message parts");
-		if (getPartialJsonObjectFieldState(s.part.args, fieldPath) === "complete" || s.part.status?.type === "requires-action") return COMPLETE_STATUS;
-		return s.part.status;
-	});
+	const $ = c(2);
+	let t0;
+	if ($[0] !== fieldPath) {
+		t0 = (s) => {
+			if (s.part.type !== "tool-call") throw new Error("useToolArgsFieldStatus can only be used inside tool-call message parts");
+			if (getPartialJsonObjectFieldState(s.part.args, fieldPath) === "complete" || s.part.status?.type === "requires-action") return COMPLETE_STATUS;
+			return s.part.status;
+		};
+		$[0] = fieldPath;
+		$[1] = t0;
+	} else t0 = $[1];
+	return useAuiState(t0);
 };
 //#endregion
 export { useToolArgsFieldStatus };

package/dist/utils/useToolArgsFieldStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolArgsFieldStatus.js","names":[],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"sourcesContent":["import { getPartialJsonObjectFieldState } from \"assistant-stream/utils\";\nimport { useAuiState } from \"@assistant-ui/store\";\n\nconst COMPLETE_STATUS = { type: \"complete\" };\n\nexport const useToolArgsFieldStatus = (fieldPath: (string | number)[]) => {\n  return useAuiState((s) => {\n    if (s.part.type !== \"tool-call\")\n      throw new Error(\n        \"useToolArgsFieldStatus can only be used inside tool-call message parts\",\n      );\n\n    const state = getPartialJsonObjectFieldState(s.part.args, fieldPath);\n    if (state === \"complete\" || s.part.status?.type === \"requires-action\")\n      return COMPLETE_STATUS;\n    return s.part.status;\n  });\n};\n"],"mappings":";;;AAGA,MAAM,kBAAkB,EAAE,MAAM,WAAW;AAE3C,MAAa,0BAA0B,cAAmC;CACxE,OAAO,aAAa,MAAM;EACxB,IAAI,EAAE,KAAK,SAAS,aAClB,MAAM,IAAI,MACR,wEACF;EAGF,IADc,+BAA+B,EAAE,KAAK,MAAM,SAClD,MAAM,cAAc,EAAE,KAAK,QAAQ,SAAS,mBAClD,OAAO;EACT,OAAO,EAAE,KAAK;CAChB,CAAC;AACH"}
+{"version":3,"file":"useToolArgsFieldStatus.js","names":["getPartialJsonObjectFieldState","useAuiState","COMPLETE_STATUS","type","useToolArgsFieldStatus","fieldPath","$","_c","t0","s","part","Error","state","args","status"],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"sourcesContent":["import { getPartialJsonObjectFieldState } from \"assistant-stream/utils\";\nimport { useAuiState } from \"@assistant-ui/store\";\n\nconst COMPLETE_STATUS = { type: \"complete\" };\n\nexport const useToolArgsFieldStatus = (fieldPath: (string | number)[]) => {\n  return useAuiState((s) => {\n    if (s.part.type !== \"tool-call\")\n      throw new Error(\n        \"useToolArgsFieldStatus can only be used inside tool-call message parts\",\n      );\n\n    const state = getPartialJsonObjectFieldState(s.part.args, fieldPath);\n    if (state === \"complete\" || s.part.status?.type === \"requires-action\")\n      return COMPLETE_STATUS;\n    return s.part.status;\n  });\n};\n"],"mappings":";;;;AAGA,MAAME,kBAAkB,EAAEC,MAAM,WAAW;AAE3C,MAAaC,0BAAyBC,cAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,WAAA;EACjBG,MAAAC,MAAA;GACjB,IAAIA,EAACC,KAAKP,SAAU,aAClB,MAAM,IAAIQ,MACR,wEACF;GAGF,IADcX,+BAA+BS,EAACC,KAAKG,MAAOR,SACtDO,MAAU,cAAcH,EAACC,KAAKI,QAAaX,SAAK,mBAAiB,OAC5DD;GAAgB,OAClBO,EAACC,KAAKI;EAAO;EACrBR,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAVML,YAAYO,EAUlB;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.14.18",
+  "version": "0.14.20",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,17 +55,17 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.2.14",
-    "@assistant-ui/store": "^0.2.16",
-    "@assistant-ui/tap": "^0.7.1",
+    "@assistant-ui/core": "^0.2.16",
+    "@assistant-ui/store": "^0.2.18",
+    "@assistant-ui/tap": "^0.9.1",
     "@radix-ui/primitive": "^1.1.4",
     "@radix-ui/react-compose-refs": "^1.1.3",
     "@radix-ui/react-context": "^1.1.4",
     "@radix-ui/react-primitive": "^2.1.5",
     "@radix-ui/react-use-callback-ref": "^1.1.2",
     "@radix-ui/react-use-escape-keydown": "^1.1.2",
-    "assistant-cloud": "^0.1.32",
-    "assistant-stream": "^0.3.21",
+    "assistant-cloud": "^0.1.33",
+    "assistant-stream": "^0.3.23",
     "nanoid": "^5.1.11",
     "radix-ui": "^1.5.0",
     "react-textarea-autosize": "^8.5.9",
@@ -90,15 +90,15 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^25.9.2",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.8",
-    "@assistant-ui/vite": "0.0.4",
-    "@assistant-ui/x-buildutils": "0.0.12"
+    "@assistant-ui/vite": "0.0.5",
+    "@assistant-ui/x-buildutils": "0.0.14"
   },
   "publishConfig": {
     "access": "public",

package/src/client/ExternalThread.ts

@@ -13,6 +13,7 @@ import type {
   AppendMessage,
   Attachment,
   CreateAttachment,
+  RespondToToolApprovalOptions,
   ThreadAssistantMessagePart,
   ThreadUserMessagePart,
   ThreadMessage,
@@ -21,7 +22,10 @@ import type {
 } from "@assistant-ui/core";
 import type { QueueItemState } from "@assistant-ui/core/store";
 import type { ComposerSendOptions } from "@assistant-ui/core/store";
-import { getThreadMessageText } from "@assistant-ui/core/internal";
+import {
+  getThreadMessageText,
+  resolveToolApprovalResponse,
+} from "@assistant-ui/core/internal";
 import { ModelContext, Suggestions } from "@assistant-ui/core/store";
 import { Tools, DataRenderers } from "@assistant-ui/core/react";
 import { SingleThreadList } from "./SingleThreadList";
@@ -56,6 +60,8 @@ export type ExternalThreadProps = {
   queue?: ExternalThreadQueueAdapter;
   /** Branch adapter for runtimes that track sibling variants of messages. */
   branches?: ExternalThreadBranchAdapter;
+  /** Callback for tool approval decisions. Absent: responding to an approval throws a capability error. */
+  onRespondToToolApproval?: (options: RespondToToolApprovalOptions) => void;
 };
 
 type MessageClientProps = {
@@ -65,6 +71,9 @@ type MessageClientProps = {
   onReload?: () => void;
   queue?: ExternalThreadQueueAdapter | undefined;
   branches?: ExternalThreadBranchAdapter | undefined;
+  onRespondToToolApproval?:
+    | ((options: RespondToToolApprovalOptions) => void)
+    | undefined;
 };
 
 // Message Client - minimal implementation
@@ -75,29 +84,28 @@ const useMessageClient = ({
   onReload,
   queue,
   branches,
+  onRespondToToolApproval,
 }: MessageClientProps): ClientOutput<"message"> => {
   const [isCopied, setIsCopied] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
   const partClients = useClientLookup(
-    () =>
-      message.content.map((part, idx) => withKey(idx, PartResource({ part }))),
-    [message.content],
+    message.content.map((part, idx) =>
+      withKey(idx, PartResource({ part, onRespondToToolApproval })),
+    ),
   );
 
   const attachmentClients = useClientLookup(
-    () =>
-      (message.attachments ?? []).map((attachment) =>
-        withKey(
-          attachment.id,
-          AttachmentResource({
-            attachment,
-            onRemove: () => {},
-          }),
-        ),
+    (message.attachments ?? []).map((attachment) =>
+      withKey(
+        attachment.id,
+        AttachmentResource({
+          attachment,
+          onRemove: () => {},
+        }),
       ),
-    [message.attachments],
+    ),
   );
 
   const handleBeginEdit = () => {
@@ -211,10 +219,16 @@ const MessageClient = resource(useMessageClient);
 
 type PartResourceProps = {
   part: ThreadAssistantMessagePart | ThreadUserMessagePart;
+  onRespondToToolApproval?:
+    | ((options: RespondToToolApprovalOptions) => void)
+    | undefined;
 };
 
 // Part Client - minimal implementation
-const usePartResource = ({ part }: PartResourceProps): ClientOutput<"part"> => {
+const usePartResource = ({
+  part,
+  onRespondToToolApproval,
+}: PartResourceProps): ClientOutput<"part"> => {
   const state = useMemo(
     () => ({
       ...part,
@@ -227,7 +241,26 @@ const usePartResource = ({ part }: PartResourceProps): ClientOutput<"part"> => {
     getState: () => state,
     addToolResult: () => {},
     resumeToolCall: () => {},
-    respondToToolApproval: () => {},
+    respondToToolApproval: (response) => {
+      if (!onRespondToToolApproval)
+        throw new Error("Runtime does not support tool approvals.");
+
+      if (part.type !== "tool-call")
+        throw new Error(
+          "Tried to respond to tool approval on non-tool message part",
+        );
+
+      if (
+        !part.approval ||
+        part.approval.approved !== undefined ||
+        part.approval.resolution !== undefined
+      )
+        throw new Error("Tool call has no pending approval");
+
+      onRespondToToolApproval(
+        resolveToolApprovalResponse(part.approval, response),
+      );
+    },
   };
 };
 
@@ -325,35 +358,31 @@ const useComposerClientResource = ({
   }, [isEditing]);
 
   const attachmentClients = useClientLookup(
-    () =>
-      attachments.map((attachment, idx) =>
-        withKey(
-          attachment.id,
-          AttachmentResource({
-            attachment,
-            onRemove: () => {
-              setAttachments(attachments.filter((_, i) => i !== idx));
-            },
-          }),
-        ),
+    attachments.map((attachment, idx) =>
+      withKey(
+        attachment.id,
+        AttachmentResource({
+          attachment,
+          onRemove: () => {
+            setAttachments(attachments.filter((_, i) => i !== idx));
+          },
+        }),
       ),
-    [attachments],
+    ),
   );
 
   const queueItems = queue?.items ?? EMPTY_QUEUE_ITEMS;
   const queueItemClients = useClientLookup(
-    () =>
-      queueItems.map((item) =>
-        withKey(
-          item.id,
-          QueueItemClient({
-            item,
-            onSteer: () => queue?.steer(item.id),
-            onRemove: () => queue?.remove(item.id),
-          }),
-        ),
+    queueItems.map((item) =>
+      withKey(
+        item.id,
+        QueueItemClient({
+          item,
+          onSteer: () => queue?.steer(item.id),
+          onRemove: () => queue?.remove(item.id),
+        }),
       ),
-    [queueItems],
+    ),
   );
 
   const state = useMemo(() => {
@@ -485,6 +514,7 @@ const useExternalThread = ({
   onCancel,
   queue,
   branches,
+  onRespondToToolApproval,
 }: ExternalThreadProps): ClientOutput<"thread"> => {
   const handleReload = (messageId: string) => {
     const messageIndex = messages.findIndex((m) => m.id === messageId);
@@ -496,19 +526,18 @@ const useExternalThread = ({
   };
 
   const messageClients = useClientLookup(
-    () =>
-      messages.map((msg, index) => {
-        const props: MessageClientProps = {
-          message: msg,
-          index,
-          onReload: () => handleReload(msg.id),
-          queue,
-          branches,
-        };
-        if (onEdit) props.onEdit = onEdit;
-        return withKey(msg.id, MessageClient(props));
-      }),
-    [messages, onEdit, queue, branches],
+    messages.map((msg, index) => {
+      const props: MessageClientProps = {
+        message: msg,
+        index,
+        onReload: () => handleReload(msg.id),
+        queue,
+        branches,
+        onRespondToToolApproval,
+      };
+      if (onEdit) props.onEdit = onEdit;
+      return withKey(msg.id, MessageClient(props));
+    }),
   );
 
   const handleCancelRun = () => {

package/src/client/InMemoryThreadList.ts

@@ -129,21 +129,19 @@ const useInMemoryThreadList = (
   };
 
   const threadListItems = useClientLookup(
-    () =>
-      threads.map((t) =>
-        withKey(
-          t.id,
-          ThreadListItemClient({
-            data: t,
-            onSwitchTo: () => handleSwitchToThread(t.id),
-            onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
-            onArchive: () => handleArchive(t.id),
-            onUnarchive: () => handleUnarchive(t.id),
-            onDelete: () => handleDelete(t.id),
-          }),
-        ),
+    threads.map((t) =>
+      withKey(
+        t.id,
+        ThreadListItemClient({
+          data: t,
+          onSwitchTo: () => handleSwitchToThread(t.id),
+          onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
+          onArchive: () => handleArchive(t.id),
+          onUnarchive: () => handleUnarchive(t.id),
+          onDelete: () => handleDelete(t.id),
+        }),
       ),
-    [threads],
+    ),
   );
 
   // Create the main thread

package/src/hooks/useToolCallElapsed.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+/**
+ * Hook that returns the elapsed wall-clock time of the current tool call in
+ * milliseconds, ticking once per second while the call runs.
+ *
+ * Reads `part.timing`. Returns `undefined` when the part is not a tool call,
+ * carries no timing, ended without a recorded completion (the duration is
+ * unknown), or when no message part scope is available (so kit components
+ * stay renderable standalone, e.g. in docs previews).
+ *
+ * @example
+ * ```tsx
+ * function ToolDuration() {
+ *   const elapsedMs = useToolCallElapsed();
+ *   if (elapsedMs === undefined) return null;
+ *   return <span>{(elapsedMs / 1000).toFixed(1)}s</span>;
+ * }
+ * ```
+ */
+export const useToolCallElapsed = (): number | undefined => {
+  const aui = useAui();
+  const hasPart = aui.part.source !== null;
+  const timing = useAuiState((s) =>
+    hasPart && s.part.type === "tool-call" ? s.part.timing : undefined,
+  );
+  const partRunning = useAuiState(
+    (s) =>
+      hasPart &&
+      s.part.type === "tool-call" &&
+      s.part.status.type === "running",
+  );
+  const running =
+    timing !== undefined && timing.completedAt === undefined && partRunning;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!running) return undefined;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [running]);
+
+  if (timing === undefined) return undefined;
+  if (timing.completedAt !== undefined)
+    return Math.max(0, timing.completedAt - timing.startedAt);
+  if (!running) return undefined;
+  return Math.max(0, now - timing.startedAt);
+};

package/src/index.ts

@@ -289,6 +289,12 @@ export { useThreadViewportAutoScroll } from "./primitives/thread/useThreadViewpo
 export { useScrollLock } from "./primitives/reasoning/useScrollLock";
 export { useMessageQuote } from "./hooks/useMessageQuote";
 export { useMessageTiming } from "./hooks/useMessageTiming";
+export { useToolCallElapsed } from "./hooks/useToolCallElapsed";
+export {
+  unstable_useMessageStallDetection,
+  type Unstable_MessageStallDetection,
+  type Unstable_MessageStallDetectionOptions,
+} from "./unstable/useMessageStallDetection";
 export { useSmooth, type SmoothOptions } from "./utils/smooth/useSmooth";
 
 // Re-export core types from @assistant-ui/core
@@ -309,7 +315,12 @@ export type {
   GenerativeUINode,
   GenerativeUISpec,
   Unstable_AudioMessagePart,
+  RespondToToolApprovalOptions,
+  ToolApprovalOption,
+  ToolApprovalOptionKind,
+  ToolApprovalResponse,
   ToolCallMessagePart,
+  ToolCallTiming,
   ToolModelContentPart,
   MessageStatus,
   MessagePartStatus,

package/src/legacy-runtime/runtime-cores/assistant-transport/replayBoundaryStream.test.ts

@@ -29,12 +29,16 @@ const createResponse = (
   chunks: readonly string[],
   replayContentLength?: number | string,
 ) =>
-  new Response(createBody(chunks), {
-    headers:
-      replayContentLength === undefined
-        ? undefined
-        : { [REPLAY_CONTENT_LENGTH_HEADER]: String(replayContentLength) },
-  });
+  new Response(
+    createBody(chunks),
+    replayContentLength === undefined
+      ? undefined
+      : {
+          headers: {
+            [REPLAY_CONTENT_LENGTH_HEADER]: String(replayContentLength),
+          },
+        },
+  );
 
 const createRenderWait = () => {
   const pending: Array<() => void> = [];

package/src/primitives/composer/trigger/TriggerPopover.tsx

@@ -9,6 +9,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useEffectEvent,
   useId,
   useMemo,
   useRef,
@@ -161,23 +162,21 @@ export const ComposerPrimitiveTriggerPopover = forwardRef<
       }),
     );
 
-    // Wrapper changes per render, but tap-stable methods inside don't.
-    const resourceRef = useRef(resource);
-    resourceRef.current = resource;
+    const getResource = useEffectEvent(() => resource);
 
     const root = useTriggerPopoverRootContext();
     useEffect(() => {
       return root.register({
         char,
         ...(behavior ? { behavior } : {}),
-        resource: resourceRef.current,
+        resource: getResource(),
       });
     }, [root, char, behavior]);
 
     const pluginRegistry = useComposerInputPluginRegistryOptional();
     useEffect(() => {
       if (!pluginRegistry) return undefined;
-      return pluginRegistry.register(resourceRef.current);
+      return pluginRegistry.register(getResource());
     }, [pluginRegistry]);
 
     const open = behavior !== null && resource.open;