@assistant-ui/react 0.14.24 → 0.14.27

package/dist/utils/smooth/useSmooth.d.ts

@@ -1,5 +1,4 @@
 import { MessagePartState, ReasoningMessagePart, TextMessagePart } from "@assistant-ui/core";
-
 //#region src/utils/smooth/useSmooth.d.ts
 /**
  * Tuning options for the smooth text streaming animation.
@@ -39,6 +38,10 @@ type SmoothOptions = {
  * the reveal. Returns the part state with `text` replaced by the revealed
  * prefix and `status` reporting `running` until the reveal catches up.
  *
+ * The reveal auto-disables under `prefers-reduced-motion: reduce`,
+ * committing the full text immediately; this takes precedence over an
+ * explicit `smooth={true}`.
+ *
  * @example
  * ```tsx
  * const { text, status } = useSmooth(useMessagePartText(), {

package/dist/utils/smooth/useSmooth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;AAiBA;KAAY,aAAA;;;;;;EAMV,OAAA;EAmBW;AAAA;AAsGb;;;EAnHE,iBAAA;EAoH2B;;;;EA/G3B,gBAAA;EAiHuC;;;;;;;EAzGvC,WAAA;AAAA;;;;;AAyG2D;;;;;;;;;;;;cAHhD,SAAA,GACX,KAAA,EAAO,gBAAA,IAAoB,eAAA,GAAkB,oBAAA,GAC7C,MAAA,aAAkB,aAAA,KACjB,gBAAA,IAAoB,eAAA,GAAkB,oBAAA"}
+{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;KAkBY;;;;;;EAMV;;;;;;EAMA;;;;;EAKA;;;;;;;;EAQA;;;;;;;;;;;;;;;;;;;;;;cA0GW,YACX,OAAO,oBAAoB,kBAAkB,uBAC7C,mBAAkB,kBACjB,oBAAoB,kBAAkB"}

package/dist/utils/smooth/useSmooth.js

@@ -1,5 +1,6 @@
 "use client";
 import { writableStore } from "../../context/ReadonlyStore.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useSmoothStatusStore } from "./SmoothContext.js";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useEffect, useMemo, useRef, useState } from "@assistant-ui/tap/react-shim";
@@ -66,6 +67,10 @@ const positiveOr = (value, fallback) => value !== void 0 && value > 0 ? value :
 * the reveal. Returns the part state with `text` replaced by the revealed
 * prefix and `status` reporting `running` until the reveal catches up.
 *
+* The reveal auto-disables under `prefers-reduced-motion: reduce`,
+* committing the full text immediately; this takes precedence over an
+* explicit `smooth={true}`.
+*
 * @example
 * ```tsx
 * const { text, status } = useSmooth(useMessagePartText(), {
@@ -76,8 +81,9 @@ const positiveOr = (value, fallback) => value !== void 0 && value > 0 ? value :
 */
 const useSmooth = (state, smooth = false) => {
 	const { text } = state;
+	const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
 	const options = typeof smooth === "object" && smooth !== null ? smooth : void 0;
-	const enabled = smooth !== false && smooth !== null;
+	const enabled = smooth !== false && smooth !== null && !reduceMotion;
 	const drainMs = positiveOr(options?.drainMs, DEFAULT_DRAIN_MS);
 	const maxCharIntervalMs = positiveOr(options?.maxCharIntervalMs, DEFAULT_MAX_CHAR_INTERVAL_MS);
 	const maxCharsPerFrame = positiveOr(options?.maxCharsPerFrame, Infinity);

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

@@ -1 +1 @@
-{"version":3,"file":"useSmooth.js","names":["useEffect","useMemo","useRef","useState","useAui","useAuiState","MessagePartStatus","ReasoningMessagePart","TextMessagePart","MessagePartState","useCallbackRef","useSmoothStatusStore","writableStore","SmoothOptions","drainMs","maxCharIntervalMs","maxCharsPerFrame","minCommitMs","DEFAULT_DRAIN_MS","DEFAULT_MAX_CHAR_INTERVAL_MS","TextStreamAnimator","animationFrameId","lastUpdateTime","Date","now","lastCommitTime","targetText","Infinity","constructor","currentText","setText","newText","start","animate","stop","cancelAnimationFrame","currentTime","deltaTime","timeToConsume","remainingChars","length","baseTimePerChar","Math","min","frameLimit","charsToAdd","requestAnimationFrame","slice","isComplete","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   * Minimum time in milliseconds between committed updates. The reveal keeps\n   * advancing every frame, but the visible text (and the downstream re-render\n   * and markdown re-parse it triggers) is committed at most once per interval.\n   * The final frame always commits. `0` commits every frame.\n   * @default 0\n   */\n  minCommitMs?: 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  public lastCommitTime: number = 0;\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  public minCommitMs: number = 0;\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\n    const isComplete = charsToAdd === remainingChars;\n    if (isComplete || currentTime - this.lastCommitTime >= this.minCommitMs) {\n      this.lastCommitTime = currentTime;\n      this.setText(this.currentText);\n    }\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  const minCommitMs = positiveOr(options?.minCommitMs, 0);\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.minCommitMs = minCommitMs;\n  }, [animatorRef, drainMs, maxCharIntervalMs, maxCharsPerFrame, minCommitMs]);\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.lastCommitTime = 0;\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":";;;;;;;AA6CA,MAAMkB,mBAAmB;AACzB,MAAMC,+BAA+B;AAErC,IAAMC,qBAAN,MAAyB;CAYdS;CACCC;CAZV,mBAA0C;CAC1C,iBAAiCP,KAAKC,IAAI;CAC1C,iBAAgC;CAEhC,aAA4B;CAC5B,UAAyBN;CACzB,oBAAmCC;CACnC,mBAAkCQ;CAClC,cAA6B;CAE7BC,YACE,aACA,SACA;EAFOC,KAAAA,cAAAA;EACCC,KAAAA,UAAAA;CACP;CAEHE,QAAQ;EACN,IAAI,KAAKX,qBAAqB,MAAM;EACpC,KAAKC,iBAAiBC,KAAKC,IAAI;EAC/B,KAAKS,QAAQ;CACf;CAEAC,OAAO;EACL,IAAI,KAAKb,qBAAqB,MAAM;GAClCc,qBAAqB,KAAKd,gBAAgB;GAC1C,KAAKA,mBAAmB;EAC1B;CACF;CAEA,gBAAwB;EACtB,MAAMe,cAAcb,KAAKC,IAAI;EAE7B,IAAIc,gBADcF,cAAc,KAAKd;EAGrC,MAAMiB,iBAAiB,KAAKb,WAAWc,SAAS,KAAKX,YAAYW;EACjE,MAAMC,kBAAkBC,KAAKC,IAC3B,KAAK5B,mBACL,KAAKD,UAAUyB,cACjB;EAEA,MAAMK,aAAaF,KAAKC,IAAIJ,gBAAgB,KAAKvB,gBAAgB;EACjE,IAAI6B,aAAa;EACjB,OAAOP,iBAAiBG,mBAAmBI,aAAaD,YAAY;GAClEC;GACAP,iBAAiBG;EACnB;EAGA,IAAII,eAAeD,cAAcA,eAAe,KAAK5B,kBACnDsB,gBAAgB;EAGlB,IAAIO,eAAeN,gBACjB,KAAKlB,mBAAmByB,sBAAsB,KAAKb,OAAO;OAE1D,KAAKZ,mBAAmB;EAE1B,IAAIwB,eAAe,GAAG;EAEtB,KAAKhB,cAAc,KAAKH,WAAWqB,MACjC,GACA,KAAKlB,YAAYW,SAASK,UAC5B;EACA,KAAKvB,iBAAiBc,cAAcE;EAGpC,IADmBO,eAAeN,kBAChBH,cAAc,KAAKX,kBAAkB,KAAKR,aAAa;GACvE,KAAKQ,iBAAiBW;GACtB,KAAKN,QAAQ,KAAKD,WAAW;EAC/B;CACF;AACF;AAEA,MAAMoB,gBAAmCC,OAAOC,OAAO,EACrDC,MAAM,UACR,CAAC;AAED,MAAMC,cAAcC,OAA2BC,aAC7CD,UAAUE,KAAAA,KAAaF,QAAQ,IAAIA,QAAQC;;;;;;;;;;;;;;;;;AAkB7C,MAAaE,aACXC,OACAC,SAAkC,UAC8B;CAChE,MAAM,EAAEC,SAASF;CACjB,MAAMG,UACJ,OAAOF,WAAW,YAAYA,WAAW,OAAOA,SAASH,KAAAA;CAC3D,MAAMM,UAAUH,WAAW,SAASA,WAAW;CAC/C,MAAM7C,UAAUuC,WAAWQ,SAAS/C,SAASI,gBAAgB;CAC7D,MAAMH,oBAAoBsC,WACxBQ,SAAS9C,mBACTI,4BACF;CACA,MAAMH,mBAAmBqC,WAAWQ,SAAS7C,kBAAkBW,QAAQ;CACvE,MAAMV,cAAcoC,WAAWQ,SAAS5C,aAAa,CAAC;CAEtD,MAAM,CAAC8C,eAAeC,oBAAoB7D,SACxCuD,MAAMO,OAAOb,SAAS,YAAY,KAAKQ,IACzC;CAWA,MAAMM,MAAM9D,OAAO;CACnB,MAAM+D,OAAO9D,kBAAkB6D,IAAIC,KAAK,CAAC;CACzC,MAAM,CAACC,UAAUC,eAAelE,SAASgE,IAAI;CAC7C,IAAIA,SAASC,YAAY,CAACR,KAAKU,WAAWP,aAAa,GAAG;EACxDM,YAAYF,IAAI;EAChBH,iBAAiBN,MAAMO,OAAOb,SAAS,YAAY,KAAKQ,IAAI;CAC9D;CAEA,MAAMW,oBAAoB5D,qBAAqB,EAAE6D,UAAU,KAAK,CAAC;CACjE,MAAM1C,UAAUpB,gBAAgBkD,WAAiB;EAC/CI,iBAAiBJ,MAAI;EACrB,IAAIW,mBAAmB;GACrB,MAAME,SACJV,kBAAkBH,UAAQF,MAAMO,OAAOb,SAAS,YAC5CH,gBACAS,MAAMO;GACZrD,cAAc2D,iBAAiB,CAAC,CAACG,SAASD,QAAQ,IAAI;EACxD;CACF,CAAC;CAGDzE,gBAAgB;EACd,IAAIuE,mBAAmB;GACrB,MAAME,WACJX,YAAYC,kBAAkBH,QAAQF,MAAMO,OAAOb,SAAS,aACxDH,gBACAS,MAAMO;GACZrD,cAAc2D,iBAAiB,CAAC,CAACG,SAASD,UAAQ,IAAI;EACxD;CACF,GAAG;EAACF;EAAmBT;EAASF;EAAMG;EAAeL,MAAMO;CAAM,CAAC;CAElE,MAAM,CAACU,eAAexE,SACpB,IAAIiB,mBAAmB2C,eAAejC,OAAO,CAC/C;CAEA9B,gBAAgB;EACd2E,YAAY7D,UAAUA;EACtB6D,YAAY5D,oBAAoBA;EAChC4D,YAAY3D,mBAAmBA;EAC/B2D,YAAY1D,cAAcA;CAC5B,GAAG;EAAC0D;EAAa7D;EAASC;EAAmBC;EAAkBC;CAAW,CAAC;CAE3E,MAAM2D,kBAAkB1E,OAAOiE,IAAI;CACnCnE,gBAAgB;EACd,IAAI,CAAC8D,SAAS;GACZa,YAAYzC,KAAK;GACjB;EACF;EAOA,MAAM2C,cAAcD,gBAAgBE,YAAYX;EAChDS,gBAAgBE,UAAUX;EAC1B,IAAIU,eAAe,CAACjB,KAAKU,WAAWK,YAAYjD,UAAU,GAAG;GAC3D,IAAIgC,MAAMO,OAAOb,SAAS,WAAW;IACnCuB,YAAY9C,cAAc;IAC1B8C,YAAYjD,aAAakC;IACzBe,YAAYlD,iBAAiB;IAC7BkD,YAAY3C,MAAM;GACpB,OAAO;IACL2C,YAAY9C,cAAc+B;IAC1Be,YAAYjD,aAAakC;IACzBe,YAAYzC,KAAK;GACnB;GACA;EACF;EAEAyC,YAAYjD,aAAakC;EACzBe,YAAY3C,MAAM;CACpB,GAAG;EAAC2C;EAAab;EAASF;EAAMF,MAAMO,OAAOb;EAAMe;CAAI,CAAC;CAExDnE,gBAAgB;EACd,aAAa;GACX2E,YAAYzC,KAAK;EACnB;CACF,GAAG,CAACyC,WAAW,CAAC;CAEhB,OAAO1E,cAEH6D,UACI;EACE,GAAGJ;EACHE,MAAMG;EACNE,QAAQL,SAASG,gBAAgBL,MAAMO,SAAShB;CAClD,IACAS,OACN;EAACI;EAASC;EAAeL;EAAOE;CAAI,CACtC;AACF"}
+{"version":3,"file":"useSmooth.js","names":["useEffect","useMemo","useRef","useState","useAui","useAuiState","MessagePartStatus","ReasoningMessagePart","TextMessagePart","MessagePartState","useCallbackRef","useMediaQuery","useSmoothStatusStore","writableStore","SmoothOptions","drainMs","maxCharIntervalMs","maxCharsPerFrame","minCommitMs","DEFAULT_DRAIN_MS","DEFAULT_MAX_CHAR_INTERVAL_MS","TextStreamAnimator","animationFrameId","lastUpdateTime","Date","now","lastCommitTime","targetText","Infinity","constructor","currentText","setText","newText","start","animate","stop","cancelAnimationFrame","currentTime","deltaTime","timeToConsume","remainingChars","length","baseTimePerChar","Math","min","frameLimit","charsToAdd","requestAnimationFrame","slice","isComplete","SMOOTH_STATUS","Object","freeze","type","positiveOr","value","fallback","undefined","useSmooth","state","smooth","text","reduceMotion","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 { useMediaQuery } from \"../hooks/useMediaQuery\";\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   * Minimum time in milliseconds between committed updates. The reveal keeps\n   * advancing every frame, but the visible text (and the downstream re-render\n   * and markdown re-parse it triggers) is committed at most once per interval.\n   * The final frame always commits. `0` commits every frame.\n   * @default 0\n   */\n  minCommitMs?: 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  public lastCommitTime: number = 0;\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  public minCommitMs: number = 0;\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\n    const isComplete = charsToAdd === remainingChars;\n    if (isComplete || currentTime - this.lastCommitTime >= this.minCommitMs) {\n      this.lastCommitTime = currentTime;\n      this.setText(this.currentText);\n    }\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 * The reveal auto-disables under `prefers-reduced-motion: reduce`,\n * committing the full text immediately; this takes precedence over an\n * explicit `smooth={true}`.\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 reduceMotion = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n  const options =\n    typeof smooth === \"object\" && smooth !== null ? smooth : undefined;\n  const enabled = smooth !== false && smooth !== null && !reduceMotion;\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  const minCommitMs = positiveOr(options?.minCommitMs, 0);\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.minCommitMs = minCommitMs;\n  }, [animatorRef, drainMs, maxCharIntervalMs, maxCharsPerFrame, minCommitMs]);\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.lastCommitTime = 0;\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolArgsFieldStatus.d.ts","names":[],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"mappings":";cAKa,sBAAA,GAA0B,SAAA;EAAA"}
+{"version":3,"file":"useToolArgsFieldStatus.d.ts","names":[],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"mappings":";cAKa,yBAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.14.24",
+  "version": "0.14.27",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,21 +55,23 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.2.19",
-    "@assistant-ui/store": "^0.2.19",
-    "@assistant-ui/tap": "^0.9.3",
-    "@radix-ui/primitive": "^1.1.4",
+    "@assistant-ui/core": "^0.2.21",
+    "@assistant-ui/store": "^0.2.20",
+    "@assistant-ui/tap": "^0.9.4",
+    "@radix-ui/primitive": "^1.1.5",
+    "@radix-ui/react-collection": "^1.1.12",
     "@radix-ui/react-compose-refs": "^1.1.3",
-    "@radix-ui/react-context": "^1.1.4",
-    "@radix-ui/react-primitive": "^2.1.6",
+    "@radix-ui/react-context": "^1.2.0",
+    "@radix-ui/react-primitive": "^2.1.7",
     "@radix-ui/react-use-callback-ref": "^1.1.2",
-    "@radix-ui/react-use-escape-keydown": "^1.1.2",
-    "assistant-cloud": "^0.1.34",
-    "assistant-stream": "^0.3.24",
-    "nanoid": "^5.1.15",
-    "radix-ui": "^1.6.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.3",
+    "@radix-ui/react-use-escape-keydown": "^1.1.3",
+    "assistant-cloud": "^0.1.35",
+    "assistant-stream": "^0.3.26",
+    "nanoid": "^6.0.0",
+    "radix-ui": "^1.6.2",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.21",
+    "safe-content-frame": "^0.0.23",
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },
@@ -90,15 +92,15 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.1.1",
     "@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.9",
-    "@assistant-ui/vite": "0.0.6",
-    "@assistant-ui/x-buildutils": "0.0.16"
+    "vitest": "^4.1.10",
+    "@assistant-ui/vite": "0.0.9",
+    "@assistant-ui/x-buildutils": "0.0.18"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -209,7 +209,9 @@ export {
   providerTool,
   type ProviderToolConfig,
   defineMcpToolkit,
+  type McpToolkitEntry,
   type McpToolkitDefinition,
+  type McpToolkitToolConfig,
   Tools,
   DataRenderers,
   Interactables,
@@ -337,6 +339,7 @@ export type {
   AppendMessage,
   TextMessagePart,
   ReasoningMessagePart,
+  PartProviderMetadata,
   SourceProviderMetadata,
   SourceMessagePart,
   ImageMessagePart,

package/src/legacy-runtime/cloud/auiV0.ts

@@ -1,11 +1,17 @@
 import type {
+  CompleteAttachment,
+  DataMessagePart,
+  FileMessagePart,
+  ImageMessagePart,
   MessageStatus,
   SourceProviderMetadata,
   ThreadMessage,
+  TextMessagePart,
+  Unstable_AudioMessagePart,
 } from "@assistant-ui/core";
 import { fromThreadMessageLike } from "../runtime-cores/external-store/ThreadMessageLike";
 import type { CloudMessage } from "assistant-cloud";
-import { isJSONValue } from "../../utils/json/is-json";
+import { isJSONValue } from "@assistant-ui/core/internal";
 import type {
   ReadonlyJSONObject,
   ReadonlyJSONValue,
@@ -65,10 +71,27 @@ type AuiV0MessagePart =
       readonly filename?: string;
     };
 
+type AuiV0AttachmentPart =
+  | TextMessagePart
+  | ImageMessagePart
+  | FileMessagePart
+  | Unstable_AudioMessagePart
+  | DataMessagePart<ReadonlyJSONValue>;
+
+type AuiV0Attachment = {
+  readonly id: string;
+  readonly type: CompleteAttachment["type"];
+  readonly name: string;
+  readonly contentType?: string;
+  readonly status: CompleteAttachment["status"];
+  readonly content: readonly AuiV0AttachmentPart[];
+};
+
 type AuiV0Message = {
   readonly role: "assistant" | "user" | "system";
   readonly status?: MessageStatus;
   readonly content: readonly AuiV0MessagePart[];
+  readonly attachments?: readonly AuiV0Attachment[];
   readonly metadata: {
     readonly unstable_state?: ReadonlyJSONValue;
     readonly unstable_annotations: readonly ReadonlyJSONValue[];
@@ -83,14 +106,59 @@ type AuiV0Message = {
   };
 };
 
+const encodeAttachmentPart = (
+  part: CompleteAttachment["content"][number],
+): AuiV0AttachmentPart => {
+  const type = part.type;
+  switch (type) {
+    case "text":
+    case "image":
+    case "file":
+    case "audio":
+      return part;
+
+    case "data": {
+      if (!isJSONValue(part.data)) {
+        console.warn(`attachment data is not JSON! ${JSON.stringify(part)}`);
+      }
+      return { ...part, data: part.data as ReadonlyJSONValue };
+    }
+
+    default: {
+      const unhandledType: never = type;
+      throw new Error(
+        `Attachment part type not supported by aui/v0: ${unhandledType}`,
+      );
+    }
+  }
+};
+
+const encodeAttachments = (
+  message: ThreadMessage,
+): readonly AuiV0Attachment[] | undefined => {
+  if (message.role !== "user" || message.attachments.length === 0) {
+    return undefined;
+  }
+
+  return message.attachments.map(
+    ({ id, type, name, contentType, status, content }) => ({
+      id,
+      type,
+      name,
+      status,
+      ...(contentType != null ? { contentType } : undefined),
+      content: content.map(encodeAttachmentPart),
+    }),
+  );
+};
+
 export function auiV0Encode(message: ThreadMessage): AuiV0Message {
-  // TODO attachments are currently intentionally ignored
   // info: ID and createdAt are ignored (we use the server value instead)
-
   const status: MessageStatus | undefined =
     message.status?.type === "running"
       ? { type: "incomplete", reason: "cancelled" }
       : message.status;
+  const attachments = encodeAttachments(message);
 
   return {
     role: message.role,
@@ -172,6 +240,7 @@ export function auiV0Encode(message: ThreadMessage): AuiV0Message {
     }),
     metadata: message.metadata as AuiV0Message["metadata"],
     ...(status ? { status } : undefined),
+    ...(attachments ? { attachments } : undefined),
   };
 }
 

package/src/mcp-apps/McpAppRenderer.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import { render, waitFor } from "@testing-library/react";
+import { resource, useResource } from "@assistant-ui/tap";
+import type { ToolCallMessagePartProps } from "@assistant-ui/core/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { McpAppBridgeHandlers, McpAppsHost } from "./types";
+
+const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useAui: () => ({
+    thread: () => ({ append: vi.fn() }),
+  }),
+}));
+
+vi.mock("./app-frame", () => ({
+  McpAppFrame: (props: unknown) => {
+    framePropsMock(props);
+    return null;
+  },
+}));
+
+import { McpAppRenderer } from "./McpAppRenderer";
+
+const useHost = ({ host }: { host: McpAppsHost }) => host;
+const Host = resource(useHost);
+
+const createPart = (serverId?: string): ToolCallMessagePartProps => ({
+  type: "tool-call",
+  toolCallId: "call-1",
+  toolName: "search",
+  args: {},
+  argsText: "{}",
+  status: { type: "complete" },
+  mcp: {
+    app: {
+      resourceUri: "ui://example/search",
+      ...(serverId !== undefined ? { serverId } : {}),
+    },
+  },
+  addResult: vi.fn(),
+  resume: vi.fn(),
+  respondToApproval: vi.fn(),
+});
+
+function Harness({ host, serverId }: { host: McpAppsHost; serverId?: string }) {
+  const renderer = useResource(
+    McpAppRenderer({
+      host: Host({ host }),
+    }),
+  );
+  const Renderer = renderer.render;
+  return <Renderer {...createPart(serverId)} />;
+}
+
+describe("McpAppRenderer", () => {
+  beforeEach(() => {
+    framePropsMock.mockReset();
+  });
+
+  it("injects serverId into loadResource and reloads when it changes", async () => {
+    const loadResource = vi.fn(async ({ uri }: { uri: string }) => ({
+      uri,
+      mimeType: "text/html;profile=mcp-app" as const,
+      html: "",
+    }));
+    const host: McpAppsHost = {
+      loadResource,
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources: vi.fn(),
+    };
+
+    const view = render(<Harness host={host} serverId="server-a" />);
+    await waitFor(() =>
+      expect(loadResource).toHaveBeenCalledWith({
+        uri: "ui://example/search",
+        serverId: "server-a",
+      }),
+    );
+
+    view.rerender(<Harness host={host} serverId="server-b" />);
+    await waitFor(() => expect(loadResource).toHaveBeenCalledTimes(2));
+    expect(loadResource).toHaveBeenLastCalledWith({
+      uri: "ui://example/search",
+      serverId: "server-b",
+    });
+  });
+
+  it("gives the renderer serverId precedence in listResources", async () => {
+    const listResources = vi.fn();
+    const host: McpAppsHost = {
+      loadResource: vi.fn(async ({ uri }) => ({
+        uri,
+        mimeType: "text/html;profile=mcp-app" as const,
+        html: "",
+      })),
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources,
+    };
+
+    render(<Harness host={host} serverId="host-server" />);
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    await handlers.listResources?.({
+      cursor: "next",
+      serverId: "widget-server",
+    });
+    expect(listResources).toHaveBeenCalledWith({
+      cursor: "next",
+      serverId: "host-server",
+    });
+  });
+
+  it("passes listResources params through unchanged without serverId", async () => {
+    const listResources = vi.fn();
+    const host: McpAppsHost = {
+      loadResource: vi.fn(async ({ uri }) => ({
+        uri,
+        mimeType: "text/html;profile=mcp-app" as const,
+        html: "",
+      })),
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources,
+    };
+    const params = { cursor: "next" };
+
+    render(<Harness host={host} />);
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    await handlers.listResources?.(params);
+    expect(listResources).toHaveBeenCalledWith(params);
+  });
+});

package/src/mcp-apps/McpAppRenderer.tsx

@@ -26,6 +26,7 @@ import type {
   McpAppsHost,
 } from "./types";
 import { getMcpAppFromToolPart } from "./utils";
+import { isRecord } from "@assistant-ui/core/internal";
 
 export type McpAppRendererOptions = {
   /**
@@ -55,6 +56,7 @@ export type McpAppRendererOptions = {
 
 type LoadedResourceState = {
   resourceUri: string;
+  serverId?: string;
   resource?: McpAppResource;
   error?: Error;
 };
@@ -100,7 +102,11 @@ function InlineRenderer({
   const aui = useAui();
   const app = getMcpAppFromToolPart(part);
   const cachedAppRef = useRef<McpAppMetadata | undefined>(undefined);
-  if (app != null && cachedAppRef.current?.resourceUri !== app.resourceUri) {
+  if (
+    app != null &&
+    (cachedAppRef.current?.resourceUri !== app.resourceUri ||
+      cachedAppRef.current?.serverId !== app.serverId)
+  ) {
     cachedAppRef.current = app;
   }
   const appForRender = app ?? cachedAppRef.current;
@@ -108,21 +114,37 @@ function InlineRenderer({
   const [loadedResource, setLoadedResource] = useState<LoadedResourceState>();
 
   const resourceUri = appForRender?.resourceUri;
+  const serverId = appForRender?.serverId;
+  const serverIdRef = useRef<string | undefined>(undefined);
+  serverIdRef.current = serverId;
   useEffect(() => {
     if (appForRender == null || resourceUri == null) return;
     let cancelled = false;
     const targetUri = resourceUri;
+    const targetServerId = serverId;
 
     internalsRef.current.host
-      .loadResource({ uri: targetUri })
+      .loadResource({
+        uri: targetUri,
+        ...(targetServerId ? { serverId: targetServerId } : {}),
+      })
       .then((res) => {
         if (!cancelled)
-          setLoadedResource({ resourceUri: targetUri, resource: res });
+          setLoadedResource({
+            resourceUri: targetUri,
+            ...(targetServerId !== undefined
+              ? { serverId: targetServerId }
+              : {}),
+            resource: res,
+          });
       })
       .catch((error: unknown) => {
         if (!cancelled) {
           setLoadedResource({
             resourceUri: targetUri,
+            ...(targetServerId !== undefined
+              ? { serverId: targetServerId }
+              : {}),
             error: error instanceof Error ? error : new Error(String(error)),
           });
         }
@@ -131,8 +153,8 @@ function InlineRenderer({
     return () => {
       cancelled = true;
     };
-    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI changes; appForRender identity is unstable and internalsRef is a stable ref
-  }, [resourceUri]);
+    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI or server identity changes; appForRender identity is unstable and internalsRef is a stable ref
+  }, [resourceUri, serverId]);
 
   const bridgeHandlers = useMemo<McpAppBridgeHandlers>(
     () => ({
@@ -143,16 +165,32 @@ function InlineRenderer({
         aui.thread().append({ content: [{ type: "text", text }] });
         return { ok: true };
       },
-      callTool: (params) => internalsRef.current.host.callTool(params),
-      readResource: (params) => internalsRef.current.host.readResource(params),
-      listResources: (params) =>
-        internalsRef.current.host.listResources(params),
+      callTool: (params) =>
+        internalsRef.current.host.callTool({
+          ...params,
+          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+        }),
+      readResource: (params) =>
+        internalsRef.current.host.readResource({
+          ...params,
+          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+        }),
+      listResources: (params) => {
+        if (!serverIdRef.current) {
+          return internalsRef.current.host.listResources(params);
+        }
+        return internalsRef.current.host.listResources({
+          ...(isRecord(params) ? params : {}),
+          serverId: serverIdRef.current,
+        });
+      },
     }),
     [aui, internalsRef],
   );
 
   const loadedResourceForApp =
-    loadedResource?.resourceUri === appForRender?.resourceUri
+    loadedResource?.resourceUri === appForRender?.resourceUri &&
+    loadedResource?.serverId === appForRender?.serverId
       ? loadedResource
       : undefined;
   const appResource = loadedResourceForApp?.resource;