@assistant-ui/vue 0.0.1 → 0.0.2

package/dist/primitives/ComposerPrimitiveInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerPrimitiveInput.d.ts","sourceRoot":"","sources":["../../src/primitives/ComposerPrimitiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAQrE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;0GA8CjC,CAAC"}
+{"version":3,"file":"ComposerPrimitiveInput.d.ts","sourceRoot":"","sources":["../../src/primitives/ComposerPrimitiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAQrE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;0GAoDjC,CAAC"}

package/dist/primitives/ComposerPrimitiveInput.js

@@ -38,7 +38,7 @@ const ComposerPrimitiveInput = defineComponent({
 		};
 		const onKeydown = (event) => {
 			if (event.defaultPrevented || !props.submitOnEnter) return;
-			if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+			if (event.key !== "Enter" || event.shiftKey || event.isComposing || event.keyCode === 229) return;
 			if (disabled.value || threadDisabled.value || isAttrDisabled(attrs)) return;
 			event.preventDefault();
 			send();

package/dist/primitives/ComposerPrimitiveInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerPrimitiveInput.js","names":[],"sources":["../../src/primitives/ComposerPrimitiveInput.ts"],"sourcesContent":["import { defineComponent, h, mergeProps, type SlotsType } from \"vue\";\nimport { flushTapSync } from \"@assistant-ui/tap\";\nimport { composerInputDisabled } from \"@assistant-ui/core/store/internal\";\nimport { isAttrDisabled } from \"./attrDisabled\";\nimport { useAui } from \"../useAui\";\nimport { useAuiState } from \"../useAuiState\";\nimport { useComposerSendState } from \"./useComposerSendState\";\n\n/**\n * A textarea bound to the composer text, disabled while the thread is\n * disabled. Enter submits (Shift+Enter inserts a newline, IME composition is\n * ignored) unless `submitOnEnter` is false; an Enter that cannot send falls\n * through to a newline, and a fallthrough keydown listener can veto the\n * submit with `preventDefault`. While the composer is not editing (an edit\n * composer before `beginEdit`), the value stays controlled to the empty\n * composer text.\n */\nexport const ComposerPrimitiveInput = defineComponent({\n  name: \"ComposerPrimitiveInput\",\n  inheritAttrs: false,\n  props: {\n    submitOnEnter: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  slots: Object as SlotsType<Record<string, never>>,\n  setup(props, { attrs }) {\n    const aui = useAui();\n    const text = useAuiState((s) =>\n      s.composer.isEditing ? s.composer.text : \"\",\n    );\n    const threadDisabled = useAuiState(composerInputDisabled);\n    const { disabled, send } = useComposerSendState();\n\n    const onInput = (event: Event) => {\n      const target = event.target as HTMLTextAreaElement;\n      if (!aui.composer.getState().isEditing) {\n        target.value = text.value;\n        return;\n      }\n      flushTapSync(() => aui.composer.setText(target.value));\n    };\n    const onKeydown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !props.submitOnEnter) return;\n      if (event.key !== \"Enter\" || event.shiftKey || event.isComposing) return;\n      if (disabled.value || threadDisabled.value || isAttrDisabled(attrs))\n        return;\n      event.preventDefault();\n      send();\n    };\n\n    return () =>\n      h(\n        \"textarea\",\n        mergeProps({ name: \"input\" }, attrs, {\n          value: text.value,\n          disabled: threadDisabled.value || isAttrDisabled(attrs),\n          onInput,\n          onKeydown,\n        }),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,cAAc;CACd,OAAO,EACL,eAAe;EACb,MAAM;EACN,SAAS;CACX,EACF;CACA,OAAO;CACP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,OAAO;EACnB,MAAM,OAAO,aAAa,MACxB,EAAE,SAAS,YAAY,EAAE,SAAS,OAAO,EAC3C;EACA,MAAM,iBAAiB,YAAY,qBAAqB;EACxD,MAAM,EAAE,UAAU,SAAS,qBAAqB;EAEhD,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,WAAW;IACtC,OAAO,QAAQ,KAAK;IACpB;GACF;GACA,mBAAmB,IAAI,SAAS,QAAQ,OAAO,KAAK,CAAC;EACvD;EACA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,oBAAoB,CAAC,MAAM,eAAe;GACpD,IAAI,MAAM,QAAQ,WAAW,MAAM,YAAY,MAAM,aAAa;GAClE,IAAI,SAAS,SAAS,eAAe,SAAS,eAAe,KAAK,GAChE;GACF,MAAM,eAAe;GACrB,KAAK;EACP;EAEA,aACE,EACE,YACA,WAAW,EAAE,MAAM,QAAQ,GAAG,OAAO;GACnC,OAAO,KAAK;GACZ,UAAU,eAAe,SAAS,eAAe,KAAK;GACtD;GACA;EACF,CAAC,CACH;CACJ;AACF,CAAC"}
+{"version":3,"file":"ComposerPrimitiveInput.js","names":[],"sources":["../../src/primitives/ComposerPrimitiveInput.ts"],"sourcesContent":["import { defineComponent, h, mergeProps, type SlotsType } from \"vue\";\nimport { flushTapSync } from \"@assistant-ui/tap\";\nimport { composerInputDisabled } from \"@assistant-ui/core/store/internal\";\nimport { isAttrDisabled } from \"./attrDisabled\";\nimport { useAui } from \"../useAui\";\nimport { useAuiState } from \"../useAuiState\";\nimport { useComposerSendState } from \"./useComposerSendState\";\n\n/**\n * A textarea bound to the composer text, disabled while the thread is\n * disabled. Enter submits (Shift+Enter inserts a newline, IME composition is\n * ignored) unless `submitOnEnter` is false; an Enter that cannot send falls\n * through to a newline, and a fallthrough keydown listener can veto the\n * submit with `preventDefault`. While the composer is not editing (an edit\n * composer before `beginEdit`), the value stays controlled to the empty\n * composer text.\n */\nexport const ComposerPrimitiveInput = defineComponent({\n  name: \"ComposerPrimitiveInput\",\n  inheritAttrs: false,\n  props: {\n    submitOnEnter: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  slots: Object as SlotsType<Record<string, never>>,\n  setup(props, { attrs }) {\n    const aui = useAui();\n    const text = useAuiState((s) =>\n      s.composer.isEditing ? s.composer.text : \"\",\n    );\n    const threadDisabled = useAuiState(composerInputDisabled);\n    const { disabled, send } = useComposerSendState();\n\n    const onInput = (event: Event) => {\n      const target = event.target as HTMLTextAreaElement;\n      if (!aui.composer.getState().isEditing) {\n        target.value = text.value;\n        return;\n      }\n      flushTapSync(() => aui.composer.setText(target.value));\n    };\n    const onKeydown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !props.submitOnEnter) return;\n      if (\n        event.key !== \"Enter\" ||\n        event.shiftKey ||\n        event.isComposing ||\n        event.keyCode === 229\n      )\n        return;\n      if (disabled.value || threadDisabled.value || isAttrDisabled(attrs))\n        return;\n      event.preventDefault();\n      send();\n    };\n\n    return () =>\n      h(\n        \"textarea\",\n        mergeProps({ name: \"input\" }, attrs, {\n          value: text.value,\n          disabled: threadDisabled.value || isAttrDisabled(attrs),\n          onInput,\n          onKeydown,\n        }),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,cAAc;CACd,OAAO,EACL,eAAe;EACb,MAAM;EACN,SAAS;CACX,EACF;CACA,OAAO;CACP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,OAAO;EACnB,MAAM,OAAO,aAAa,MACxB,EAAE,SAAS,YAAY,EAAE,SAAS,OAAO,EAC3C;EACA,MAAM,iBAAiB,YAAY,qBAAqB;EACxD,MAAM,EAAE,UAAU,SAAS,qBAAqB;EAEhD,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,WAAW;IACtC,OAAO,QAAQ,KAAK;IACpB;GACF;GACA,mBAAmB,IAAI,SAAS,QAAQ,OAAO,KAAK,CAAC;EACvD;EACA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,oBAAoB,CAAC,MAAM,eAAe;GACpD,IACE,MAAM,QAAQ,WACd,MAAM,YACN,MAAM,eACN,MAAM,YAAY,KAElB;GACF,IAAI,SAAS,SAAS,eAAe,SAAS,eAAe,KAAK,GAChE;GACF,MAAM,eAAe;GACrB,KAAK;EACP;EAEA,aACE,EACE,YACA,WAAW,EAAE,MAAM,QAAQ,GAAG,OAAO;GACnC,OAAO,KAAK;GACZ,UAAU,eAAe,SAAS,eAAe,KAAK;GACtD;GACA;EACF,CAAC,CACH;CACJ;AACF,CAAC"}

package/dist/primitives/MessagePrimitiveParts.d.ts

@@ -23,6 +23,7 @@ export type ToolUIProps = {
     addResult: PartMethods["addToolResult"];
     resume: PartMethods["resumeToolCall"];
     respondToApproval: PartMethods["respondToToolApproval"];
+    /** @deprecated Experimental since 2026-09-23. Not scheduled for removal; the API may change in any release. */
     unstable_recordInteraction?: PartMethods["unstable_recordInteraction"];
 };
 /** The value of the single `data` prop passed to a Vue data renderer. */

package/dist/primitives/MessagePrimitiveParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagePrimitiveParts.d.ts","sourceRoot":"","sources":["../../src/primitives/MessagePrimitiveParts.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,KAAK,CAAC;AAGb,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAQjE,eAAO,MAAM,2BAA2B,YAA4B,CAAC;AAErE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IAC7D,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACxC,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACtC,iBAAiB,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC;IACxD,0BAA0B,CAAC,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;CACxE,CAAC;AAEF,yEAAyE;AACzE,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI;IACrC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,MAAM,CAAC,GAAG;QACtE,IAAI,EAAE,CAAC,CAAC;KACT,CAAC;CACH,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB;;oMAEiB,UAAU,EAAE,sFAmG7D,CAAC"}
+{"version":3,"file":"MessagePrimitiveParts.d.ts","sourceRoot":"","sources":["../../src/primitives/MessagePrimitiveParts.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,KAAK,CAAC;AAGb,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAQjE,eAAO,MAAM,2BAA2B,YAA4B,CAAC;AAErE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IAC7D,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACxC,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACtC,iBAAiB,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC;IACxD,+GAA+G;IAC/G,0BAA0B,CAAC,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;CACxE,CAAC;AAEF,yEAAyE;AACzE,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI;IACrC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,MAAM,CAAC,GAAG;QACtE,IAAI,EAAE,CAAC,CAAC;KACT,CAAC;CACH,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB;;oMAEiB,UAAU,EAAE,sFAmG7D,CAAC"}

package/dist/primitives/MessagePrimitiveParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagePrimitiveParts.js","names":[],"sources":["../../src/primitives/MessagePrimitiveParts.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  type Component,\n  type SlotsType,\n  type VNodeChild,\n} from \"vue\";\nimport { isMcpAppUri } from \"@assistant-ui/core\";\nimport { getMessagePartKeys } from \"@assistant-ui/core/internal\";\nimport {\n  resolveToolCallText,\n  type PartMethods,\n} from \"@assistant-ui/core/store\";\nimport { isDevelopment } from \"@assistant-ui/core/store/internal\";\nimport type { AssistantState } from \"@assistant-ui/store/client\";\nimport { useAui } from \"../useAui\";\nimport { useAuiState } from \"../useAuiState\";\nimport { PartByIndexProvider } from \"./PartByIndexProvider\";\nimport { useStableKeys } from \"./stableKeys\";\n\nconst warnedTypes = new Set<string>();\n\nexport const clearPartWarningsForTesting = () => warnedTypes.clear();\n\n/**\n * The value of the single `tool` prop passed to a tool UI registered in the\n * `tools` scope. React spreads the part state as individual props; in Vue any\n * prop the component does not declare falls through to `$attrs` and gets\n * stringified onto its root element, so the Vue face passes one `tool` object\n * instead, which a component always declares in full. The tools scope\n * declares renderers as React's `ToolCallMessagePartComponent`, so the Vue\n * face bridges the seam with casts at registration and render; a genuine\n * React renderer arriving through a shared toolkit type-checks at `setToolUI`\n * and then fails when invoked as a Vue component. This type is the Vue-facing\n * contract for custom components. Toolkit `renderText` descriptors resolve\n * through the neutral resolver and render string or number results directly;\n * a react-element-valued descriptor is react-only and renders nothing here.\n */\nexport type ToolUIProps = {\n  part: Extract<AssistantState[\"part\"], { type: \"tool-call\" }>;\n  addResult: PartMethods[\"addToolResult\"];\n  resume: PartMethods[\"resumeToolCall\"];\n  respondToApproval: PartMethods[\"respondToToolApproval\"];\n  unstable_recordInteraction?: PartMethods[\"unstable_recordInteraction\"];\n};\n\n/** The value of the single `data` prop passed to a Vue data renderer. */\nexport type DataUIProps<T = unknown> = {\n  part: Omit<Extract<AssistantState[\"part\"], { type: \"data\" }>, \"data\"> & {\n    data: T;\n  };\n};\n\n/**\n * Renders the current message's content parts in order, each scoped through\n * {@link PartByIndexProvider}. A `tool-call` part first resolves a renderer\n * registered in the `tools` scope by tool name (`aui.tools.setToolUI`, or a\n * `Tools({ toolkit })` config entry) and renders it with a single `tool` prop\n * of type {@link ToolUIProps}.\n * Otherwise a slot named after the part type (`text`, `reasoning`,\n * `tool-call`, ...) renders that part; the `default` slot is the fallback for\n * types without a named slot, except text, which always renders its text\n * unless a `text` slot overrides it.\n */\nexport const MessagePrimitiveParts = defineComponent({\n  name: \"MessagePrimitiveParts\",\n  slots: Object as SlotsType<Record<string, (() => VNodeChild[]) | undefined>>,\n  setup(_, { slots }) {\n    const parts = useAuiState((s) => s.message.parts);\n    const partKeys = useStableKeys(() => getMessagePartKeys(parts.value));\n    const PartView = defineComponent({\n      name: \"MessagePartView\",\n      setup() {\n        const aui = useAui();\n        const type = useAuiState((s) => s.part.type);\n        const text = useAuiState((s) =>\n          s.part.type === \"text\" ? s.part.text : \"\",\n        );\n        const toolUI = useAuiState((s) => {\n          if (s.part.type !== \"tool-call\") return null;\n          return s.optional.tools?.toolUIs[s.part.toolName]?.[0] ?? null;\n        });\n        const mcpAppRender = useAuiState((s) =>\n          s.part.type === \"tool-call\" &&\n          isMcpAppUri(s.part.mcp?.app?.resourceUri)\n            ? (s.optional.tools?.mcpApp?.render ?? null)\n            : null,\n        );\n        const toolPart = useAuiState((s) =>\n          s.part.type === \"tool-call\" ? s.part : null,\n        );\n        const dataRenderer = useAuiState((s) => {\n          if (s.part.type !== \"data\") return null;\n          const named =\n            s.optional.dataRenderers?.renderers[s.part.name]?.[0] ?? null;\n          return named ?? s.optional.dataRenderers?.fallbacks[0] ?? null;\n        });\n        const dataPart = useAuiState((s) =>\n          s.part.type === \"data\" ? s.part : null,\n        );\n        return () => {\n          if (type.value === \"tool-call\") {\n            const registration = toolUI.value;\n            const part = toolPart.value;\n            if (registration?.renderText && part) {\n              const resolved = resolveToolCallText(\n                registration.renderText,\n                part,\n              );\n              if (\n                typeof resolved === \"string\" ||\n                typeof resolved === \"number\"\n              ) {\n                return resolved;\n              }\n              return null;\n            }\n            const Render = registration?.render ?? mcpAppRender.value;\n            if (Render && part) {\n              return h(Render as unknown as Component, {\n                tool: {\n                  part,\n                  addResult: aui.part.addToolResult,\n                  resume: aui.part.resumeToolCall,\n                  respondToApproval: aui.part.respondToToolApproval,\n                  ...(aui.part.unstable_recordInteraction && {\n                    unstable_recordInteraction:\n                      aui.part.unstable_recordInteraction,\n                  }),\n                } satisfies ToolUIProps,\n              });\n            }\n          }\n          if (type.value === \"data\") {\n            const Render = dataRenderer.value;\n            const part = dataPart.value;\n            if (Render && part) {\n              return h(Render as unknown as Component, {\n                data: { part } satisfies DataUIProps,\n              });\n            }\n          }\n          if (type.value === \"text\") {\n            const slot = slots.text;\n            return slot\n              ? slot()\n              : h(\"p\", { style: { whiteSpace: \"pre-line\" } }, text.value);\n          }\n          const slot = slots[type.value] ?? slots.default;\n          if (slot) return slot();\n          if (isDevelopment && !warnedTypes.has(type.value)) {\n            warnedTypes.add(type.value);\n            console.warn(\n              `MessagePrimitiveParts: no slot for part type \"${type.value}\"; the part renders nothing. Add a #${type.value} or #default slot.`,\n            );\n          }\n          return null;\n        };\n      },\n    });\n    return () =>\n      partKeys.value.map((key, index) =>\n        h(PartByIndexProvider, { index, key }, { default: () => h(PartView) }),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,8BAAc,IAAI,IAAY;AAEpC,MAAa,oCAAoC,YAAY,MAAM;;;;;;;;;;;;AA0CnE,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,OAAO;CACP,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,QAAQ,aAAa,MAAM,EAAE,QAAQ,KAAK;EAChD,MAAM,WAAW,oBAAoB,mBAAmB,MAAM,KAAK,CAAC;EACpE,MAAM,WAAW,gBAAgB;GAC/B,MAAM;GACN,QAAQ;IACN,MAAM,MAAM,OAAO;IACnB,MAAM,OAAO,aAAa,MAAM,EAAE,KAAK,IAAI;IAC3C,MAAM,OAAO,aAAa,MACxB,EAAE,KAAK,SAAS,SAAS,EAAE,KAAK,OAAO,EACzC;IACA,MAAM,SAAS,aAAa,MAAM;KAChC,IAAI,EAAE,KAAK,SAAS,aAAa,OAAO;KACxC,OAAO,EAAE,SAAS,OAAO,QAAQ,EAAE,KAAK,SAAS,GAAG,MAAM;IAC5D,CAAC;IACD,MAAM,eAAe,aAAa,MAChC,EAAE,KAAK,SAAS,eAChB,YAAY,EAAE,KAAK,KAAK,KAAK,WAAW,IACnC,EAAE,SAAS,OAAO,QAAQ,UAAU,OACrC,IACN;IACA,MAAM,WAAW,aAAa,MAC5B,EAAE,KAAK,SAAS,cAAc,EAAE,OAAO,IACzC;IACA,MAAM,eAAe,aAAa,MAAM;KACtC,IAAI,EAAE,KAAK,SAAS,QAAQ,OAAO;KAGnC,OADE,EAAE,SAAS,eAAe,UAAU,EAAE,KAAK,KAAK,GAAG,MAAM,QAC3C,EAAE,SAAS,eAAe,UAAU,MAAM;IAC5D,CAAC;IACD,MAAM,WAAW,aAAa,MAC5B,EAAE,KAAK,SAAS,SAAS,EAAE,OAAO,IACpC;IACA,aAAa;KACX,IAAI,KAAK,UAAU,aAAa;MAC9B,MAAM,eAAe,OAAO;MAC5B,MAAM,OAAO,SAAS;MACtB,IAAI,cAAc,cAAc,MAAM;OACpC,MAAM,WAAW,oBACf,aAAa,YACb,IACF;OACA,IACE,OAAO,aAAa,YACpB,OAAO,aAAa,UAEpB,OAAO;OAET,OAAO;MACT;MACA,MAAM,SAAS,cAAc,UAAU,aAAa;MACpD,IAAI,UAAU,MACZ,OAAO,EAAE,QAAgC,EACvC,MAAM;OACJ;OACA,WAAW,IAAI,KAAK;OACpB,QAAQ,IAAI,KAAK;OACjB,mBAAmB,IAAI,KAAK;OAC5B,GAAI,IAAI,KAAK,8BAA8B,EACzC,4BACE,IAAI,KAAK,2BACb;MACF,EACF,CAAC;KAEL;KACA,IAAI,KAAK,UAAU,QAAQ;MACzB,MAAM,SAAS,aAAa;MAC5B,MAAM,OAAO,SAAS;MACtB,IAAI,UAAU,MACZ,OAAO,EAAE,QAAgC,EACvC,MAAM,EAAE,KAAK,EACf,CAAC;KAEL;KACA,IAAI,KAAK,UAAU,QAAQ;MACzB,MAAM,OAAO,MAAM;MACnB,OAAO,OACH,KAAK,IACL,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,WAAW,EAAE,GAAG,KAAK,KAAK;KAC9D;KACA,MAAM,OAAO,MAAM,KAAK,UAAU,MAAM;KACxC,IAAI,MAAM,OAAO,KAAK;KACtB,IAAI,iBAAiB,CAAC,YAAY,IAAI,KAAK,KAAK,GAAG;MACjD,YAAY,IAAI,KAAK,KAAK;MAC1B,QAAQ,KACN,iDAAiD,KAAK,MAAM,sCAAsC,KAAK,MAAM,mBAC/G;KACF;KACA,OAAO;IACT;GACF;EACF,CAAC;EACD,aACE,SAAS,MAAM,KAAK,KAAK,UACvB,EAAE,qBAAqB;GAAE;GAAO;EAAI,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CACvE;CACJ;AACF,CAAC"}
+{"version":3,"file":"MessagePrimitiveParts.js","names":[],"sources":["../../src/primitives/MessagePrimitiveParts.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  type Component,\n  type SlotsType,\n  type VNodeChild,\n} from \"vue\";\nimport { isMcpAppUri } from \"@assistant-ui/core\";\nimport { getMessagePartKeys } from \"@assistant-ui/core/internal\";\nimport {\n  resolveToolCallText,\n  type PartMethods,\n} from \"@assistant-ui/core/store\";\nimport { isDevelopment } from \"@assistant-ui/core/store/internal\";\nimport type { AssistantState } from \"@assistant-ui/store/client\";\nimport { useAui } from \"../useAui\";\nimport { useAuiState } from \"../useAuiState\";\nimport { PartByIndexProvider } from \"./PartByIndexProvider\";\nimport { useStableKeys } from \"./stableKeys\";\n\nconst warnedTypes = new Set<string>();\n\nexport const clearPartWarningsForTesting = () => warnedTypes.clear();\n\n/**\n * The value of the single `tool` prop passed to a tool UI registered in the\n * `tools` scope. React spreads the part state as individual props; in Vue any\n * prop the component does not declare falls through to `$attrs` and gets\n * stringified onto its root element, so the Vue face passes one `tool` object\n * instead, which a component always declares in full. The tools scope\n * declares renderers as React's `ToolCallMessagePartComponent`, so the Vue\n * face bridges the seam with casts at registration and render; a genuine\n * React renderer arriving through a shared toolkit type-checks at `setToolUI`\n * and then fails when invoked as a Vue component. This type is the Vue-facing\n * contract for custom components. Toolkit `renderText` descriptors resolve\n * through the neutral resolver and render string or number results directly;\n * a react-element-valued descriptor is react-only and renders nothing here.\n */\nexport type ToolUIProps = {\n  part: Extract<AssistantState[\"part\"], { type: \"tool-call\" }>;\n  addResult: PartMethods[\"addToolResult\"];\n  resume: PartMethods[\"resumeToolCall\"];\n  respondToApproval: PartMethods[\"respondToToolApproval\"];\n  /** @deprecated Experimental since 2026-09-23. Not scheduled for removal; the API may change in any release. */\n  unstable_recordInteraction?: PartMethods[\"unstable_recordInteraction\"];\n};\n\n/** The value of the single `data` prop passed to a Vue data renderer. */\nexport type DataUIProps<T = unknown> = {\n  part: Omit<Extract<AssistantState[\"part\"], { type: \"data\" }>, \"data\"> & {\n    data: T;\n  };\n};\n\n/**\n * Renders the current message's content parts in order, each scoped through\n * {@link PartByIndexProvider}. A `tool-call` part first resolves a renderer\n * registered in the `tools` scope by tool name (`aui.tools.setToolUI`, or a\n * `Tools({ toolkit })` config entry) and renders it with a single `tool` prop\n * of type {@link ToolUIProps}.\n * Otherwise a slot named after the part type (`text`, `reasoning`,\n * `tool-call`, ...) renders that part; the `default` slot is the fallback for\n * types without a named slot, except text, which always renders its text\n * unless a `text` slot overrides it.\n */\nexport const MessagePrimitiveParts = defineComponent({\n  name: \"MessagePrimitiveParts\",\n  slots: Object as SlotsType<Record<string, (() => VNodeChild[]) | undefined>>,\n  setup(_, { slots }) {\n    const parts = useAuiState((s) => s.message.parts);\n    const partKeys = useStableKeys(() => getMessagePartKeys(parts.value));\n    const PartView = defineComponent({\n      name: \"MessagePartView\",\n      setup() {\n        const aui = useAui();\n        const type = useAuiState((s) => s.part.type);\n        const text = useAuiState((s) =>\n          s.part.type === \"text\" ? s.part.text : \"\",\n        );\n        const toolUI = useAuiState((s) => {\n          if (s.part.type !== \"tool-call\") return null;\n          return s.optional.tools?.toolUIs[s.part.toolName]?.[0] ?? null;\n        });\n        const mcpAppRender = useAuiState((s) =>\n          s.part.type === \"tool-call\" &&\n          isMcpAppUri(s.part.mcp?.app?.resourceUri)\n            ? (s.optional.tools?.mcpApp?.render ?? null)\n            : null,\n        );\n        const toolPart = useAuiState((s) =>\n          s.part.type === \"tool-call\" ? s.part : null,\n        );\n        const dataRenderer = useAuiState((s) => {\n          if (s.part.type !== \"data\") return null;\n          const named =\n            s.optional.dataRenderers?.renderers[s.part.name]?.[0] ?? null;\n          return named ?? s.optional.dataRenderers?.fallbacks[0] ?? null;\n        });\n        const dataPart = useAuiState((s) =>\n          s.part.type === \"data\" ? s.part : null,\n        );\n        return () => {\n          if (type.value === \"tool-call\") {\n            const registration = toolUI.value;\n            const part = toolPart.value;\n            if (registration?.renderText && part) {\n              const resolved = resolveToolCallText(\n                registration.renderText,\n                part,\n              );\n              if (\n                typeof resolved === \"string\" ||\n                typeof resolved === \"number\"\n              ) {\n                return resolved;\n              }\n              return null;\n            }\n            const Render = registration?.render ?? mcpAppRender.value;\n            if (Render && part) {\n              return h(Render as unknown as Component, {\n                tool: {\n                  part,\n                  addResult: aui.part.addToolResult,\n                  resume: aui.part.resumeToolCall,\n                  respondToApproval: aui.part.respondToToolApproval,\n                  ...(aui.part.unstable_recordInteraction && {\n                    unstable_recordInteraction:\n                      aui.part.unstable_recordInteraction,\n                  }),\n                } satisfies ToolUIProps,\n              });\n            }\n          }\n          if (type.value === \"data\") {\n            const Render = dataRenderer.value;\n            const part = dataPart.value;\n            if (Render && part) {\n              return h(Render as unknown as Component, {\n                data: { part } satisfies DataUIProps,\n              });\n            }\n          }\n          if (type.value === \"text\") {\n            const slot = slots.text;\n            return slot\n              ? slot()\n              : h(\"p\", { style: { whiteSpace: \"pre-line\" } }, text.value);\n          }\n          const slot = slots[type.value] ?? slots.default;\n          if (slot) return slot();\n          if (isDevelopment && !warnedTypes.has(type.value)) {\n            warnedTypes.add(type.value);\n            console.warn(\n              `MessagePrimitiveParts: no slot for part type \"${type.value}\"; the part renders nothing. Add a #${type.value} or #default slot.`,\n            );\n          }\n          return null;\n        };\n      },\n    });\n    return () =>\n      partKeys.value.map((key, index) =>\n        h(PartByIndexProvider, { index, key }, { default: () => h(PartView) }),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,8BAAc,IAAI,IAAY;AAEpC,MAAa,oCAAoC,YAAY,MAAM;;;;;;;;;;;;AA2CnE,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,OAAO;CACP,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,QAAQ,aAAa,MAAM,EAAE,QAAQ,KAAK;EAChD,MAAM,WAAW,oBAAoB,mBAAmB,MAAM,KAAK,CAAC;EACpE,MAAM,WAAW,gBAAgB;GAC/B,MAAM;GACN,QAAQ;IACN,MAAM,MAAM,OAAO;IACnB,MAAM,OAAO,aAAa,MAAM,EAAE,KAAK,IAAI;IAC3C,MAAM,OAAO,aAAa,MACxB,EAAE,KAAK,SAAS,SAAS,EAAE,KAAK,OAAO,EACzC;IACA,MAAM,SAAS,aAAa,MAAM;KAChC,IAAI,EAAE,KAAK,SAAS,aAAa,OAAO;KACxC,OAAO,EAAE,SAAS,OAAO,QAAQ,EAAE,KAAK,SAAS,GAAG,MAAM;IAC5D,CAAC;IACD,MAAM,eAAe,aAAa,MAChC,EAAE,KAAK,SAAS,eAChB,YAAY,EAAE,KAAK,KAAK,KAAK,WAAW,IACnC,EAAE,SAAS,OAAO,QAAQ,UAAU,OACrC,IACN;IACA,MAAM,WAAW,aAAa,MAC5B,EAAE,KAAK,SAAS,cAAc,EAAE,OAAO,IACzC;IACA,MAAM,eAAe,aAAa,MAAM;KACtC,IAAI,EAAE,KAAK,SAAS,QAAQ,OAAO;KAGnC,OADE,EAAE,SAAS,eAAe,UAAU,EAAE,KAAK,KAAK,GAAG,MAAM,QAC3C,EAAE,SAAS,eAAe,UAAU,MAAM;IAC5D,CAAC;IACD,MAAM,WAAW,aAAa,MAC5B,EAAE,KAAK,SAAS,SAAS,EAAE,OAAO,IACpC;IACA,aAAa;KACX,IAAI,KAAK,UAAU,aAAa;MAC9B,MAAM,eAAe,OAAO;MAC5B,MAAM,OAAO,SAAS;MACtB,IAAI,cAAc,cAAc,MAAM;OACpC,MAAM,WAAW,oBACf,aAAa,YACb,IACF;OACA,IACE,OAAO,aAAa,YACpB,OAAO,aAAa,UAEpB,OAAO;OAET,OAAO;MACT;MACA,MAAM,SAAS,cAAc,UAAU,aAAa;MACpD,IAAI,UAAU,MACZ,OAAO,EAAE,QAAgC,EACvC,MAAM;OACJ;OACA,WAAW,IAAI,KAAK;OACpB,QAAQ,IAAI,KAAK;OACjB,mBAAmB,IAAI,KAAK;OAC5B,GAAI,IAAI,KAAK,8BAA8B,EACzC,4BACE,IAAI,KAAK,2BACb;MACF,EACF,CAAC;KAEL;KACA,IAAI,KAAK,UAAU,QAAQ;MACzB,MAAM,SAAS,aAAa;MAC5B,MAAM,OAAO,SAAS;MACtB,IAAI,UAAU,MACZ,OAAO,EAAE,QAAgC,EACvC,MAAM,EAAE,KAAK,EACf,CAAC;KAEL;KACA,IAAI,KAAK,UAAU,QAAQ;MACzB,MAAM,OAAO,MAAM;MACnB,OAAO,OACH,KAAK,IACL,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,WAAW,EAAE,GAAG,KAAK,KAAK;KAC9D;KACA,MAAM,OAAO,MAAM,KAAK,UAAU,MAAM;KACxC,IAAI,MAAM,OAAO,KAAK;KACtB,IAAI,iBAAiB,CAAC,YAAY,IAAI,KAAK,KAAK,GAAG;MACjD,YAAY,IAAI,KAAK,KAAK;MAC1B,QAAQ,KACN,iDAAiD,KAAK,MAAM,sCAAsC,KAAK,MAAM,mBAC/G;KACF;KACA,OAAO;IACT;GACF;EACF,CAAC;EACD,aACE,SAAS,MAAM,KAAK,KAAK,UACvB,EAAE,qBAAqB;GAAE;GAAO;EAAI,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CACvE;CACJ;AACF,CAAC"}

package/dist/primitives/ThreadPrimitiveMessages.d.ts

@@ -2,11 +2,9 @@ import { type SlotsType, type VNodeChild } from "vue";
 /**
  * Renders the default slot once per message in the current thread, each
  * instance scoped to its message through {@link MessageByIdProvider} and
- * keyed by the message id: an edit or reload that replaces the occupant of a
- * slot remounts that row, so `<TransitionGroup>` and per-row component state
- * follow message identity. The empty optimistic placeholder that precedes a
- * response is its own identity, so the arrival of the real assistant message
- * remounts that one row (a leave/enter pair under `<TransitionGroup>`).
+ * keyed by the message id. A stable id keeps its row component instance across
+ * updates; a new id remounts the row. Because rows render inside this
+ * component, an outer `<TransitionGroup>` cannot animate individual messages.
  *
  * @example
  * ```html

package/dist/primitives/ThreadPrimitiveMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPrimitiveMessages.d.ts","sourceRoot":"","sources":["../../src/primitives/ThreadPrimitiveMessages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAM1E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,uBAAuB;;;cAEK,MAAM,UAAU,EAAE;yEAezD,CAAC"}
+{"version":3,"file":"ThreadPrimitiveMessages.d.ts","sourceRoot":"","sources":["../../src/primitives/ThreadPrimitiveMessages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAM1E;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,uBAAuB;;;cAEK,MAAM,UAAU,EAAE;yEAezD,CAAC"}

package/dist/primitives/ThreadPrimitiveMessages.js

@@ -6,11 +6,9 @@ import { defineComponent, h } from "vue";
 /**
 * Renders the default slot once per message in the current thread, each
 * instance scoped to its message through {@link MessageByIdProvider} and
-* keyed by the message id: an edit or reload that replaces the occupant of a
-* slot remounts that row, so `<TransitionGroup>` and per-row component state
-* follow message identity. The empty optimistic placeholder that precedes a
-* response is its own identity, so the arrival of the real assistant message
-* remounts that one row (a leave/enter pair under `<TransitionGroup>`).
+* keyed by the message id. A stable id keeps its row component instance across
+* updates; a new id remounts the row. Because rows render inside this
+* component, an outer `<TransitionGroup>` cannot animate individual messages.
 *
 * @example
 * ```html

package/dist/primitives/ThreadPrimitiveMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPrimitiveMessages.js","names":[],"sources":["../../src/primitives/ThreadPrimitiveMessages.ts"],"sourcesContent":["import { defineComponent, h, type SlotsType, type VNodeChild } from \"vue\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { useAuiState } from \"../useAuiState\";\nimport { MessageByIdProvider } from \"./MessageByIdProvider\";\nimport { useStableKeys } from \"./stableKeys\";\n\n/**\n * Renders the default slot once per message in the current thread, each\n * instance scoped to its message through {@link MessageByIdProvider} and\n * keyed by the message id: an edit or reload that replaces the occupant of a\n * slot remounts that row, so `<TransitionGroup>` and per-row component state\n * follow message identity. The empty optimistic placeholder that precedes a\n * response is its own identity, so the arrival of the real assistant message\n * remounts that one row (a leave/enter pair under `<TransitionGroup>`).\n *\n * @example\n * ```html\n * <ThreadPrimitiveMessages>\n *   <ChatMessage />\n * </ThreadPrimitiveMessages>\n * ```\n */\nexport const ThreadPrimitiveMessages = defineComponent({\n  name: \"ThreadPrimitiveMessages\",\n  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,\n  setup(_, { slots }) {\n    const messages = useAuiState((s) => s.thread.messages);\n    const ids = useStableKeys(() =>\n      messages.value.map((message) => message.id),\n    );\n    return () =>\n      ids.value.map((id) =>\n        h(\n          MessageByIdProvider,\n          { id, key: id },\n          { default: () => slots.default?.() },\n        ),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,OAAO;CACP,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,WAAW,aAAa,MAAM,EAAE,OAAO,QAAQ;EACrD,MAAM,MAAM,oBACV,SAAS,MAAM,KAAK,YAAY,QAAQ,EAAE,CAC5C;EACA,aACE,IAAI,MAAM,KAAK,OACb,EACE,qBACA;GAAE;GAAI,KAAK;EAAG,GACd,EAAE,eAAe,MAAM,UAAU,EAAE,CACrC,CACF;CACJ;AACF,CAAC"}
+{"version":3,"file":"ThreadPrimitiveMessages.js","names":[],"sources":["../../src/primitives/ThreadPrimitiveMessages.ts"],"sourcesContent":["import { defineComponent, h, type SlotsType, type VNodeChild } from \"vue\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { useAuiState } from \"../useAuiState\";\nimport { MessageByIdProvider } from \"./MessageByIdProvider\";\nimport { useStableKeys } from \"./stableKeys\";\n\n/**\n * Renders the default slot once per message in the current thread, each\n * instance scoped to its message through {@link MessageByIdProvider} and\n * keyed by the message id. A stable id keeps its row component instance across\n * updates; a new id remounts the row. Because rows render inside this\n * component, an outer `<TransitionGroup>` cannot animate individual messages.\n *\n * @example\n * ```html\n * <ThreadPrimitiveMessages>\n *   <ChatMessage />\n * </ThreadPrimitiveMessages>\n * ```\n */\nexport const ThreadPrimitiveMessages = defineComponent({\n  name: \"ThreadPrimitiveMessages\",\n  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,\n  setup(_, { slots }) {\n    const messages = useAuiState((s) => s.thread.messages);\n    const ids = useStableKeys(() =>\n      messages.value.map((message) => message.id),\n    );\n    return () =>\n      ids.value.map((id) =>\n        h(\n          MessageByIdProvider,\n          { id, key: id },\n          { default: () => slots.default?.() },\n        ),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,OAAO;CACP,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,WAAW,aAAa,MAAM,EAAE,OAAO,QAAQ;EACrD,MAAM,MAAM,oBACV,SAAS,MAAM,KAAK,YAAY,QAAQ,EAAE,CAC5C;EACA,aACE,IAAI,MAAM,KAAK,OACb,EACE,qBACA;GAAE;GAAI,KAAK;EAAG,GACd,EAAE,eAAe,MAAM,UAAU,EAAE,CACrC,CACF;CACJ;AACF,CAAC"}

package/dist/primitives/ThreadPrimitiveViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPrimitiveViewport.d.ts","sourceRoot":"","sources":["../../src/primitives/ThreadPrimitiveViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,KAAK,CAAC;AAYb;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoBK,MAAM,UAAU,EAAE;yEAmLzD,CAAC"}
+{"version":3,"file":"ThreadPrimitiveViewport.d.ts","sourceRoot":"","sources":["../../src/primitives/ThreadPrimitiveViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoBK,MAAM,UAAU,EAAE;yEAuEzD,CAAC"}

package/dist/primitives/ThreadPrimitiveViewport.js

@@ -2,7 +2,7 @@ import { useAuiState } from "../useAuiState.js";
 import { useAuiEvent } from "../useAuiEvent.js";
 import { viewportInjectionKey } from "./viewportContext.js";
 import { defineComponent, h, onMounted, onScopeDispose, provide, shallowRef, watch } from "vue";
-import { isUserScrollUp, isViewportAtBottom, observeContentResize, viewportOverflows } from "@assistant-ui/store/client";
+import { createThreadViewportAutoScroll } from "@assistant-ui/store/client";
 //#region src/primitives/ThreadPrimitiveViewport.ts
 /**
 * A scrollable container that keeps the thread pinned to the bottom: content
@@ -38,60 +38,23 @@ const ThreadPrimitiveViewport = defineComponent({
 	slots: Object,
 	setup(props, { slots }) {
 		const divRef = shallowRef(null);
-		const contentInset = shallowRef(0);
 		const contentInsetEntries = /* @__PURE__ */ new Map();
-		let intent = null;
 		const isAtBottom = shallowRef(true);
-		let lastScrollTop = 0;
-		let lastScrollHeight = 0;
-		let lastObservedScrollHeight = 0;
-		let lastObservedClientHeight = 0;
-		let frame = null;
-		const scrollToBottom = (behavior) => {
-			const div = divRef.value;
-			if (!div) return;
-			intent = behavior;
-			div.scrollTo?.({
-				top: div.scrollHeight,
-				behavior
-			});
-		};
-		const scheduleScrollToBottom = (behavior) => {
-			intent = behavior;
-			if (typeof requestAnimationFrame === "undefined") return;
-			if (frame !== null) cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(() => {
-				frame = null;
-				scrollToBottom(behavior);
-			});
-		};
-		const handleScroll = () => {
-			const div = divRef.value;
-			if (!div) return;
-			const newIsAtBottom = isViewportAtBottom(div, contentInset.value);
-			if (!(!newIsAtBottom && lastScrollTop < div.scrollTop)) {
-				if (newIsAtBottom) {
-					if (viewportOverflows(div, contentInset.value)) intent = null;
-				} else if (isUserScrollUp({
-					scrollTop: lastScrollTop,
-					scrollHeight: lastScrollHeight
-				}, div)) intent = null;
-				if (newIsAtBottom || intent === null) isAtBottom.value = newIsAtBottom;
+		const autoScroll = createThreadViewportAutoScroll({
+			getOptions: () => ({
+				autoScroll: props.autoScroll,
+				scrollToBottomOnInitialize: props.scrollToBottomOnInitialize,
+				scrollToBottomOnRunStart: props.scrollToBottomOnRunStart,
+				scrollToBottomOnThreadSwitch: props.scrollToBottomOnThreadSwitch
+			}),
+			onAtBottomChange: (value) => {
+				isAtBottom.value = value;
 			}
-			lastScrollTop = div.scrollTop;
-			lastScrollHeight = div.scrollHeight;
-		};
+		});
 		const updateContentInset = () => {
 			let total = 0;
 			for (const height of contentInsetEntries.values()) total += height;
-			if (contentInset.value === total) return;
-			const grew = total > contentInset.value;
-			contentInset.value = total;
-			if (grew) {
-				if (intent) scrollToBottom(intent);
-				else if (props.autoScroll && isAtBottom.value) scrollToBottom("instant");
-			}
-			handleScroll();
+			autoScroll.setContentInset(total);
 		};
 		const registerContentInset = () => {
 			const id = Symbol();
@@ -108,64 +71,26 @@ const ThreadPrimitiveViewport = defineComponent({
 				}
 			};
 		};
-		const onContentResize = () => {
-			const div = divRef.value;
-			if (!div) return;
-			const { scrollHeight, clientHeight } = div;
-			if (scrollHeight === lastObservedScrollHeight && clientHeight === lastObservedClientHeight) return;
-			lastObservedScrollHeight = scrollHeight;
-			lastObservedClientHeight = clientHeight;
-			if (intent) scrollToBottom(intent);
-			else if (props.autoScroll && isAtBottom.value) scrollToBottom("instant");
-			handleScroll();
-		};
-		const onPointerdown = () => {
-			intent = null;
-			if (frame !== null) {
-				cancelAnimationFrame(frame);
-				frame = null;
-			}
-		};
-		let disconnect;
+		let detach;
 		onMounted(() => {
 			const div = divRef.value;
 			if (!div) return;
-			disconnect = observeContentResize(div, onContentResize);
+			detach = autoScroll.attach(div);
 		});
 		onScopeDispose(() => {
-			disconnect?.();
-			if (frame !== null) cancelAnimationFrame(frame);
+			detach?.();
+			autoScroll.dispose();
 		});
 		const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
-		let initialized = false;
-		watch([hasMessages, () => props.scrollToBottomOnInitialize], ([has, enabled]) => {
-			if (!has) {
-				initialized = false;
-				return;
-			}
-			if (!enabled || initialized) return;
-			initialized = true;
-			if (intent !== null) return;
-			scheduleScrollToBottom("instant");
-		}, { immediate: true });
-		useAuiEvent("thread.runStart", () => {
-			if (!props.scrollToBottomOnRunStart) return;
-			scheduleScrollToBottom("auto");
-		});
-		useAuiEvent("threads.selectionChanged", () => {
-			if (!props.scrollToBottomOnThreadSwitch) return;
-			scheduleScrollToBottom("instant");
-		});
+		watch([hasMessages, () => props.scrollToBottomOnInitialize], ([has]) => autoScroll.setHasMessages(has), { immediate: true });
+		useAuiEvent("thread.runStart", () => autoScroll.runStarted());
+		useAuiEvent("threads.selectionChanged", () => autoScroll.threadSwitched());
 		provide(viewportInjectionKey, {
 			isAtBottom,
-			scrollToBottom: (behavior = "auto") => scrollToBottom(behavior),
+			scrollToBottom: (behavior = "auto") => autoScroll.scrollToBottom(behavior),
 			registerContentInset
 		});
-		return () => h("div", {
-			ref: divRef,
-			onScroll: handleScroll,
-			onPointerdown
-		}, slots.default?.());
+		return () => h("div", { ref: divRef }, slots.default?.());
 	}
 });
 //#endregion

package/dist/primitives/ThreadPrimitiveViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPrimitiveViewport.js","names":[],"sources":["../../src/primitives/ThreadPrimitiveViewport.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onMounted,\n  onScopeDispose,\n  provide,\n  shallowRef,\n  watch,\n  type SlotsType,\n  type VNodeChild,\n} from \"vue\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { useAuiEvent } from \"../useAuiEvent\";\nimport { useAuiState } from \"../useAuiState\";\nimport {\n  isUserScrollUp,\n  isViewportAtBottom,\n  observeContentResize,\n  viewportOverflows,\n} from \"@assistant-ui/store/client\";\nimport { viewportInjectionKey } from \"./viewportContext\";\n\n/**\n * A scrollable container that keeps the thread pinned to the bottom: content\n * growth scrolls back down while the user sits at the bottom, a run start\n * scrolls down, and scrolling up unpins until the user returns to the bottom.\n * The four options mirror the React hook and are independent: `autoScroll`\n * covers follow-on-content-growth, and the other three gate the\n * first-messages, run-start, and thread-switch scrolls. Provides the\n * scroll-to-bottom channel that {@link ThreadPrimitiveScrollToBottom} drives;\n * the React viewport's top-anchor system stays in the React viewport store\n * and is not ported.\n */\nexport const ThreadPrimitiveViewport = defineComponent({\n  name: \"ThreadPrimitiveViewport\",\n  props: {\n    autoScroll: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnInitialize: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnRunStart: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnThreadSwitch: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,\n  setup(props, { slots }) {\n    const divRef = shallowRef<HTMLElement | null>(null);\n    const contentInset = shallowRef(0);\n    const contentInsetEntries = new Map<symbol, number>();\n    let intent: ScrollBehavior | null = null;\n    const isAtBottom = shallowRef(true);\n    let lastScrollTop = 0;\n    let lastScrollHeight = 0;\n    let lastObservedScrollHeight = 0;\n    let lastObservedClientHeight = 0;\n    let frame: number | null = null;\n\n    const scrollToBottom = (behavior: ScrollBehavior) => {\n      const div = divRef.value;\n      if (!div) return;\n      intent = behavior;\n      div.scrollTo?.({ top: div.scrollHeight, behavior });\n    };\n\n    const scheduleScrollToBottom = (behavior: ScrollBehavior) => {\n      intent = behavior;\n      // The immediate watch below runs synchronously during SSR, where no\n      // frame scheduler exists.\n      if (typeof requestAnimationFrame === \"undefined\") return;\n      if (frame !== null) cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        frame = null;\n        scrollToBottom(behavior);\n      });\n    };\n\n    const handleScroll = () => {\n      const div = divRef.value;\n      if (!div) return;\n\n      const newIsAtBottom = isViewportAtBottom(div, contentInset.value);\n      const inFlightDownward = !newIsAtBottom && lastScrollTop < div.scrollTop;\n      if (!inFlightDownward) {\n        if (newIsAtBottom) {\n          // At-bottom is ambiguous while the viewport does not overflow; keep\n          // the intent alive until content can actually scroll.\n          if (viewportOverflows(div, contentInset.value)) intent = null;\n        } else if (\n          isUserScrollUp(\n            { scrollTop: lastScrollTop, scrollHeight: lastScrollHeight },\n            div,\n          )\n        ) {\n          intent = null;\n        }\n        if (newIsAtBottom || intent === null) isAtBottom.value = newIsAtBottom;\n      }\n\n      lastScrollTop = div.scrollTop;\n      lastScrollHeight = div.scrollHeight;\n    };\n\n    const updateContentInset = () => {\n      let total = 0;\n      for (const height of contentInsetEntries.values()) total += height;\n      if (contentInset.value === total) return;\n      const grew = total > contentInset.value;\n      contentInset.value = total;\n      // A growing inset obscures content a pinned viewport was showing, so it\n      // follows like a content resize; a shrinking inset reveals content and\n      // must not move the viewport.\n      if (grew) {\n        if (intent) {\n          scrollToBottom(intent);\n        } else if (props.autoScroll && isAtBottom.value) {\n          scrollToBottom(\"instant\");\n        }\n      }\n      handleScroll();\n    };\n\n    const registerContentInset = () => {\n      const id = Symbol();\n      contentInsetEntries.set(id, 0);\n\n      return {\n        setHeight: (height: number) => {\n          if (contentInsetEntries.get(id) === height) return;\n          contentInsetEntries.set(id, height);\n          updateContentInset();\n        },\n        unregister: () => {\n          if (!contentInsetEntries.delete(id)) return;\n          updateContentInset();\n        },\n      };\n    };\n\n    const onContentResize = () => {\n      const div = divRef.value;\n      if (!div) return;\n      const { scrollHeight, clientHeight } = div;\n      if (\n        scrollHeight === lastObservedScrollHeight &&\n        clientHeight === lastObservedClientHeight\n      ) {\n        return;\n      }\n      lastObservedScrollHeight = scrollHeight;\n      lastObservedClientHeight = clientHeight;\n\n      if (intent) {\n        scrollToBottom(intent);\n      } else if (props.autoScroll && isAtBottom.value) {\n        scrollToBottom(\"instant\");\n      }\n      handleScroll();\n    };\n\n    // A pointer gesture invalidates pending bottom-scroll intent; otherwise an\n    // intent kept alive by a non-overflowing thread hijacks the next content\n    // growth. Unlike the React hook, an already scheduled frame is cancelled\n    // too, so the gesture also wins the race against a just-planted intent.\n    const onPointerdown = () => {\n      intent = null;\n      if (frame !== null) {\n        cancelAnimationFrame(frame);\n        frame = null;\n      }\n    };\n\n    let disconnect: (() => void) | undefined;\n    onMounted(() => {\n      const div = divRef.value;\n      if (!div) return;\n      disconnect = observeContentResize(div, onContentResize);\n    });\n    onScopeDispose(() => {\n      disconnect?.();\n      if (frame !== null) cancelAnimationFrame(frame);\n    });\n\n    const hasMessages = useAuiState((s) => s.thread.messages.length > 0);\n    let initialized = false;\n    watch(\n      [hasMessages, () => props.scrollToBottomOnInitialize],\n      ([has, enabled]) => {\n        if (!has) {\n          initialized = false;\n          return;\n        }\n        if (!enabled || initialized) return;\n        initialized = true;\n        if (intent !== null) return;\n        scheduleScrollToBottom(\"instant\");\n      },\n      { immediate: true },\n    );\n\n    useAuiEvent(\"thread.runStart\", () => {\n      if (!props.scrollToBottomOnRunStart) return;\n      scheduleScrollToBottom(\"auto\");\n    });\n\n    useAuiEvent(\"threads.selectionChanged\", () => {\n      if (!props.scrollToBottomOnThreadSwitch) return;\n      scheduleScrollToBottom(\"instant\");\n    });\n\n    provide(viewportInjectionKey, {\n      isAtBottom,\n      scrollToBottom: (behavior: ScrollBehavior = \"auto\") =>\n        scrollToBottom(behavior),\n      registerContentInset,\n    });\n\n    return () =>\n      h(\n        \"div\",\n        { ref: divRef, onScroll: handleScroll, onPointerdown },\n        slots.default?.(),\n      );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,OAAO;EACL,YAAY;GACV,MAAM;GACN,SAAS;EACX;EACA,4BAA4B;GAC1B,MAAM;GACN,SAAS;EACX;EACA,0BAA0B;GACxB,MAAM;GACN,SAAS;EACX;EACA,8BAA8B;GAC5B,MAAM;GACN,SAAS;EACX;CACF;CACA,OAAO;CACP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,SAAS,WAA+B,IAAI;EAClD,MAAM,eAAe,WAAW,CAAC;EACjC,MAAM,sCAAsB,IAAI,IAAoB;EACpD,IAAI,SAAgC;EACpC,MAAM,aAAa,WAAW,IAAI;EAClC,IAAI,gBAAgB;EACpB,IAAI,mBAAmB;EACvB,IAAI,2BAA2B;EAC/B,IAAI,2BAA2B;EAC/B,IAAI,QAAuB;EAE3B,MAAM,kBAAkB,aAA6B;GACnD,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;GACV,SAAS;GACT,IAAI,WAAW;IAAE,KAAK,IAAI;IAAc;GAAS,CAAC;EACpD;EAEA,MAAM,0BAA0B,aAA6B;GAC3D,SAAS;GAGT,IAAI,OAAO,0BAA0B,aAAa;GAClD,IAAI,UAAU,MAAM,qBAAqB,KAAK;GAC9C,QAAQ,4BAA4B;IAClC,QAAQ;IACR,eAAe,QAAQ;GACzB,CAAC;EACH;EAEA,MAAM,qBAAqB;GACzB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;GAEV,MAAM,gBAAgB,mBAAmB,KAAK,aAAa,KAAK;GAEhE,IAAI,EADqB,CAAC,iBAAiB,gBAAgB,IAAI,YACxC;IACrB,IAAI,eAGE;SAAA,kBAAkB,KAAK,aAAa,KAAK,GAAG,SAAS;IAAA,OACpD,IACL,eACE;KAAE,WAAW;KAAe,cAAc;IAAiB,GAC3D,GACF,GAEA,SAAS;IAEX,IAAI,iBAAiB,WAAW,MAAM,WAAW,QAAQ;GAC3D;GAEA,gBAAgB,IAAI;GACpB,mBAAmB,IAAI;EACzB;EAEA,MAAM,2BAA2B;GAC/B,IAAI,QAAQ;GACZ,KAAK,MAAM,UAAU,oBAAoB,OAAO,GAAG,SAAS;GAC5D,IAAI,aAAa,UAAU,OAAO;GAClC,MAAM,OAAO,QAAQ,aAAa;GAClC,aAAa,QAAQ;GAIrB,IAAI,MAAM;IACR,IAAI,QACF,eAAe,MAAM;SAChB,IAAI,MAAM,cAAc,WAAW,OACxC,eAAe,SAAS;GAE5B;GACA,aAAa;EACf;EAEA,MAAM,6BAA6B;GACjC,MAAM,KAAK,OAAO;GAClB,oBAAoB,IAAI,IAAI,CAAC;GAE7B,OAAO;IACL,YAAY,WAAmB;KAC7B,IAAI,oBAAoB,IAAI,EAAE,MAAM,QAAQ;KAC5C,oBAAoB,IAAI,IAAI,MAAM;KAClC,mBAAmB;IACrB;IACA,kBAAkB;KAChB,IAAI,CAAC,oBAAoB,OAAO,EAAE,GAAG;KACrC,mBAAmB;IACrB;GACF;EACF;EAEA,MAAM,wBAAwB;GAC5B,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;GACV,MAAM,EAAE,cAAc,iBAAiB;GACvC,IACE,iBAAiB,4BACjB,iBAAiB,0BAEjB;GAEF,2BAA2B;GAC3B,2BAA2B;GAE3B,IAAI,QACF,eAAe,MAAM;QAChB,IAAI,MAAM,cAAc,WAAW,OACxC,eAAe,SAAS;GAE1B,aAAa;EACf;EAMA,MAAM,sBAAsB;GAC1B,SAAS;GACT,IAAI,UAAU,MAAM;IAClB,qBAAqB,KAAK;IAC1B,QAAQ;GACV;EACF;EAEA,IAAI;EACJ,gBAAgB;GACd,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;GACV,aAAa,qBAAqB,KAAK,eAAe;EACxD,CAAC;EACD,qBAAqB;GACnB,aAAa;GACb,IAAI,UAAU,MAAM,qBAAqB,KAAK;EAChD,CAAC;EAED,MAAM,cAAc,aAAa,MAAM,EAAE,OAAO,SAAS,SAAS,CAAC;EACnE,IAAI,cAAc;EAClB,MACE,CAAC,mBAAmB,MAAM,0BAA0B,IACnD,CAAC,KAAK,aAAa;GAClB,IAAI,CAAC,KAAK;IACR,cAAc;IACd;GACF;GACA,IAAI,CAAC,WAAW,aAAa;GAC7B,cAAc;GACd,IAAI,WAAW,MAAM;GACrB,uBAAuB,SAAS;EAClC,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,YAAY,yBAAyB;GACnC,IAAI,CAAC,MAAM,0BAA0B;GACrC,uBAAuB,MAAM;EAC/B,CAAC;EAED,YAAY,kCAAkC;GAC5C,IAAI,CAAC,MAAM,8BAA8B;GACzC,uBAAuB,SAAS;EAClC,CAAC;EAED,QAAQ,sBAAsB;GAC5B;GACA,iBAAiB,WAA2B,WAC1C,eAAe,QAAQ;GACzB;EACF,CAAC;EAED,aACE,EACE,OACA;GAAE,KAAK;GAAQ,UAAU;GAAc;EAAc,GACrD,MAAM,UAAU,CAClB;CACJ;AACF,CAAC"}
+{"version":3,"file":"ThreadPrimitiveViewport.js","names":[],"sources":["../../src/primitives/ThreadPrimitiveViewport.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onMounted,\n  onScopeDispose,\n  provide,\n  shallowRef,\n  watch,\n  type SlotsType,\n  type VNodeChild,\n} from \"vue\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { useAuiEvent } from \"../useAuiEvent\";\nimport { useAuiState } from \"../useAuiState\";\nimport { createThreadViewportAutoScroll } from \"@assistant-ui/store/client\";\nimport { viewportInjectionKey } from \"./viewportContext\";\n\n/**\n * A scrollable container that keeps the thread pinned to the bottom: content\n * growth scrolls back down while the user sits at the bottom, a run start\n * scrolls down, and scrolling up unpins until the user returns to the bottom.\n * The four options mirror the React hook and are independent: `autoScroll`\n * covers follow-on-content-growth, and the other three gate the\n * first-messages, run-start, and thread-switch scrolls. Provides the\n * scroll-to-bottom channel that {@link ThreadPrimitiveScrollToBottom} drives;\n * the React viewport's top-anchor system stays in the React viewport store\n * and is not ported.\n */\nexport const ThreadPrimitiveViewport = defineComponent({\n  name: \"ThreadPrimitiveViewport\",\n  props: {\n    autoScroll: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnInitialize: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnRunStart: {\n      type: Boolean,\n      default: true,\n    },\n    scrollToBottomOnThreadSwitch: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,\n  setup(props, { slots }) {\n    const divRef = shallowRef<HTMLElement | null>(null);\n    const contentInsetEntries = new Map<symbol, number>();\n    const isAtBottom = shallowRef(true);\n    const autoScroll = createThreadViewportAutoScroll({\n      getOptions: () => ({\n        autoScroll: props.autoScroll,\n        scrollToBottomOnInitialize: props.scrollToBottomOnInitialize,\n        scrollToBottomOnRunStart: props.scrollToBottomOnRunStart,\n        scrollToBottomOnThreadSwitch: props.scrollToBottomOnThreadSwitch,\n      }),\n      onAtBottomChange: (value) => {\n        isAtBottom.value = value;\n      },\n    });\n\n    const updateContentInset = () => {\n      let total = 0;\n      for (const height of contentInsetEntries.values()) total += height;\n      autoScroll.setContentInset(total);\n    };\n\n    const registerContentInset = () => {\n      const id = Symbol();\n      contentInsetEntries.set(id, 0);\n\n      return {\n        setHeight: (height: number) => {\n          if (contentInsetEntries.get(id) === height) return;\n          contentInsetEntries.set(id, height);\n          updateContentInset();\n        },\n        unregister: () => {\n          if (!contentInsetEntries.delete(id)) return;\n          updateContentInset();\n        },\n      };\n    };\n\n    let detach: (() => void) | undefined;\n    onMounted(() => {\n      const div = divRef.value;\n      if (!div) return;\n      detach = autoScroll.attach(div);\n    });\n    onScopeDispose(() => {\n      detach?.();\n      autoScroll.dispose();\n    });\n\n    const hasMessages = useAuiState((s) => s.thread.messages.length > 0);\n    watch(\n      [hasMessages, () => props.scrollToBottomOnInitialize],\n      ([has]) => autoScroll.setHasMessages(has),\n      { immediate: true },\n    );\n\n    useAuiEvent(\"thread.runStart\", () => autoScroll.runStarted());\n\n    useAuiEvent(\"threads.selectionChanged\", () => autoScroll.threadSwitched());\n\n    provide(viewportInjectionKey, {\n      isAtBottom,\n      scrollToBottom: (behavior: ScrollBehavior = \"auto\") =>\n        autoScroll.scrollToBottom(behavior),\n      registerContentInset,\n    });\n\n    return () => h(\"div\", { ref: divRef }, slots.default?.());\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,OAAO;EACL,YAAY;GACV,MAAM;GACN,SAAS;EACX;EACA,4BAA4B;GAC1B,MAAM;GACN,SAAS;EACX;EACA,0BAA0B;GACxB,MAAM;GACN,SAAS;EACX;EACA,8BAA8B;GAC5B,MAAM;GACN,SAAS;EACX;CACF;CACA,OAAO;CACP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,SAAS,WAA+B,IAAI;EAClD,MAAM,sCAAsB,IAAI,IAAoB;EACpD,MAAM,aAAa,WAAW,IAAI;EAClC,MAAM,aAAa,+BAA+B;GAChD,mBAAmB;IACjB,YAAY,MAAM;IAClB,4BAA4B,MAAM;IAClC,0BAA0B,MAAM;IAChC,8BAA8B,MAAM;GACtC;GACA,mBAAmB,UAAU;IAC3B,WAAW,QAAQ;GACrB;EACF,CAAC;EAED,MAAM,2BAA2B;GAC/B,IAAI,QAAQ;GACZ,KAAK,MAAM,UAAU,oBAAoB,OAAO,GAAG,SAAS;GAC5D,WAAW,gBAAgB,KAAK;EAClC;EAEA,MAAM,6BAA6B;GACjC,MAAM,KAAK,OAAO;GAClB,oBAAoB,IAAI,IAAI,CAAC;GAE7B,OAAO;IACL,YAAY,WAAmB;KAC7B,IAAI,oBAAoB,IAAI,EAAE,MAAM,QAAQ;KAC5C,oBAAoB,IAAI,IAAI,MAAM;KAClC,mBAAmB;IACrB;IACA,kBAAkB;KAChB,IAAI,CAAC,oBAAoB,OAAO,EAAE,GAAG;KACrC,mBAAmB;IACrB;GACF;EACF;EAEA,IAAI;EACJ,gBAAgB;GACd,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;GACV,SAAS,WAAW,OAAO,GAAG;EAChC,CAAC;EACD,qBAAqB;GACnB,SAAS;GACT,WAAW,QAAQ;EACrB,CAAC;EAED,MAAM,cAAc,aAAa,MAAM,EAAE,OAAO,SAAS,SAAS,CAAC;EACnE,MACE,CAAC,mBAAmB,MAAM,0BAA0B,IACnD,CAAC,SAAS,WAAW,eAAe,GAAG,GACxC,EAAE,WAAW,KAAK,CACpB;EAEA,YAAY,yBAAyB,WAAW,WAAW,CAAC;EAE5D,YAAY,kCAAkC,WAAW,eAAe,CAAC;EAEzE,QAAQ,sBAAsB;GAC5B;GACA,iBAAiB,WAA2B,WAC1C,WAAW,eAAe,QAAQ;GACpC;EACF,CAAC;EAED,aAAa,EAAE,OAAO,EAAE,KAAK,OAAO,GAAG,MAAM,UAAU,CAAC;CAC1D;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/vue",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Vue bindings for assistant-ui",
   "keywords": [
     "assistant",
@@ -27,9 +27,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.24",
-    "@assistant-ui/store": "^0.3.17",
-    "@assistant-ui/tap": "^0.9.21"
+    "@assistant-ui/core": "^0.3.25",
+    "@assistant-ui/store": "^0.3.18",
+    "@assistant-ui/tap": "^0.9.22"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "0.0.30",
-    "@types/node": "^26.6.3",
+    "@types/node": "^26.6.4",
     "@types/react": "^19.3.0",
-    "assistant-cloud": "0.2.5",
-    "jsdom": "^30.0.1",
+    "assistant-cloud": "0.2.6",
+    "jsdom": "^30.1.2",
     "vitest": "^5.0.3",
     "vue": "^3.5.43"
   },

package/src/__tests__/primitives-content.test.ts

@@ -22,6 +22,7 @@ import { useAuiState } from "../useAuiState";
 import { ThreadPrimitiveMessages } from "../primitives/ThreadPrimitiveMessages";
 import { ThreadPrimitiveViewport } from "../primitives/ThreadPrimitiveViewport";
 import { ThreadPrimitiveViewportFooter } from "../primitives/ThreadPrimitiveViewportFooter";
+import { MessagePrimitiveRoot } from "../primitives/message";
 import {
   ThreadPrimitiveScrollToBottom,
   clearScrollToBottomWarningForTesting,
@@ -377,6 +378,85 @@ describe("ThreadPrimitiveViewport", () => {
     unmount();
   });
 
+  it("pauses following when a message disclosure expands", async () => {
+    const { runtime, append } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadPrimitiveViewport,
+          {
+            class: "viewport",
+            scrollToBottomOnInitialize: false,
+          },
+          {
+            default: () =>
+              h(ThreadPrimitiveMessages, null, {
+                default: () =>
+                  h(MessagePrimitiveRoot, null, {
+                    default: () =>
+                      h(
+                        "button",
+                        { class: "disclosure", "aria-expanded": "false" },
+                        "Expand",
+                      ),
+                  }),
+              }),
+          },
+        ),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+    const div = el.querySelector<HTMLElement>("div.viewport")!;
+    let scrollHeight = 500;
+    let scrollTop = 400;
+    Object.defineProperties(div, {
+      scrollHeight: {
+        get: () => scrollHeight,
+        configurable: true,
+      },
+      clientHeight: { value: 100, configurable: true },
+      scrollTop: {
+        get: () => scrollTop,
+        set: (value: number) => {
+          scrollTop = value;
+        },
+        configurable: true,
+      },
+    });
+    const scrollTo = vi.fn(({ top }: { top: number }) => {
+      scrollTop = Math.max(0, Math.min(top, scrollHeight - 100));
+      div.dispatchEvent(new Event("scroll"));
+    });
+    Object.defineProperty(div, "scrollTo", {
+      value: scrollTo,
+      configurable: true,
+    });
+
+    flushTapSync(() =>
+      append({ role: "assistant", content: [{ type: "text", text: "one" }] }),
+    );
+    await vi.waitFor(async () => {
+      await nextTick();
+      expect(el.querySelector("[data-message-id]")).not.toBeNull();
+      expect(scrollTo).toHaveBeenCalled();
+    });
+    scrollTo.mockClear();
+
+    const disclosure =
+      el.querySelector<HTMLButtonElement>("button.disclosure")!;
+    disclosure.addEventListener("click", (event) => {
+      disclosure.setAttribute("aria-expanded", "true");
+      event.stopPropagation();
+    });
+    disclosure.click();
+    scrollHeight = 600;
+    el.querySelector("[data-message-id]")!.append(document.createElement("p"));
+    await new Promise((resolve) => setTimeout(resolve, 30));
+
+    expect(scrollTo).not.toHaveBeenCalled();
+    expect(scrollTop).toBe(400);
+    unmount();
+  });
+
   it("stays put when every scroll option is disabled", async () => {
     const { runtime, append } = createTestRuntime();
     const View = defineComponent({

package/src/__tests__/primitives.test.ts

@@ -166,6 +166,53 @@ describe("vue primitives", () => {
     unmount();
   });
 
+  it("does not submit on Safari's post-compositionend Enter", async () => {
+    const { runtime, onNew } = createTestRuntime();
+    const View = defineComponent({
+      setup: () => () => h(ComposerPrimitiveInput),
+    });
+    const { el, unmount } = mountChat(runtime, View);
+
+    const textarea = el.querySelector("textarea")!;
+    textarea.dispatchEvent(
+      new CompositionEvent("compositionstart", { bubbles: true }),
+    );
+    textarea.value = "hello";
+    textarea.dispatchEvent(
+      new InputEvent("input", { bubbles: true, isComposing: true }),
+    );
+    textarea.dispatchEvent(
+      new CompositionEvent("compositionend", {
+        data: "hello",
+        bubbles: true,
+      }),
+    );
+
+    const composingEnter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      keyCode: 229,
+      isComposing: false,
+      cancelable: true,
+    });
+    expect(textarea.dispatchEvent(composingEnter)).toBe(true);
+    await vi.waitFor(() => {
+      expect(runtime.thread.composer.getState().text).toBe("hello");
+    });
+    expect(onNew).not.toHaveBeenCalled();
+
+    const plainEnter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      keyCode: 13,
+      cancelable: true,
+    });
+    expect(textarea.dispatchEvent(plainEnter)).toBe(false);
+    await vi.waitFor(() => {
+      expect(onNew).toHaveBeenCalledTimes(1);
+    });
+
+    unmount();
+  });
+
   it("does not submit on Enter when submitOnEnter is false", async () => {
     const { runtime, onNew } = createTestRuntime();
     const View = defineComponent({

package/src/primitives/ComposerPrimitiveInput.ts

@@ -43,7 +43,13 @@ export const ComposerPrimitiveInput = defineComponent({
     };
     const onKeydown = (event: KeyboardEvent) => {
       if (event.defaultPrevented || !props.submitOnEnter) return;
-      if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+      if (
+        event.key !== "Enter" ||
+        event.shiftKey ||
+        event.isComposing ||
+        event.keyCode === 229
+      )
+        return;
       if (disabled.value || threadDisabled.value || isAttrDisabled(attrs))
         return;
       event.preventDefault();

package/src/primitives/MessagePrimitiveParts.ts

@@ -41,6 +41,7 @@ export type ToolUIProps = {
   addResult: PartMethods["addToolResult"];
   resume: PartMethods["resumeToolCall"];
   respondToApproval: PartMethods["respondToToolApproval"];
+  /** @deprecated Experimental since 2026-09-23. Not scheduled for removal; the API may change in any release. */
   unstable_recordInteraction?: PartMethods["unstable_recordInteraction"];
 };
 

package/src/primitives/ThreadPrimitiveMessages.ts

@@ -7,11 +7,9 @@ import { useStableKeys } from "./stableKeys";
 /**
  * Renders the default slot once per message in the current thread, each
  * instance scoped to its message through {@link MessageByIdProvider} and
- * keyed by the message id: an edit or reload that replaces the occupant of a
- * slot remounts that row, so `<TransitionGroup>` and per-row component state
- * follow message identity. The empty optimistic placeholder that precedes a
- * response is its own identity, so the arrival of the real assistant message
- * remounts that one row (a leave/enter pair under `<TransitionGroup>`).
+ * keyed by the message id. A stable id keeps its row component instance across
+ * updates; a new id remounts the row. Because rows render inside this
+ * component, an outer `<TransitionGroup>` cannot animate individual messages.
  *
  * @example
  * ```html

package/src/primitives/ThreadPrimitiveViewport.ts

@@ -12,12 +12,7 @@ import {
 import type {} from "@assistant-ui/core/store";
 import { useAuiEvent } from "../useAuiEvent";
 import { useAuiState } from "../useAuiState";
-import {
-  isUserScrollUp,
-  isViewportAtBottom,
-  observeContentResize,
-  viewportOverflows,
-} from "@assistant-ui/store/client";
+import { createThreadViewportAutoScroll } from "@assistant-ui/store/client";
 import { viewportInjectionKey } from "./viewportContext";
 
 /**
@@ -54,78 +49,24 @@ export const ThreadPrimitiveViewport = defineComponent({
   slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
   setup(props, { slots }) {
     const divRef = shallowRef<HTMLElement | null>(null);
-    const contentInset = shallowRef(0);
     const contentInsetEntries = new Map<symbol, number>();
-    let intent: ScrollBehavior | null = null;
     const isAtBottom = shallowRef(true);
-    let lastScrollTop = 0;
-    let lastScrollHeight = 0;
-    let lastObservedScrollHeight = 0;
-    let lastObservedClientHeight = 0;
-    let frame: number | null = null;
-
-    const scrollToBottom = (behavior: ScrollBehavior) => {
-      const div = divRef.value;
-      if (!div) return;
-      intent = behavior;
-      div.scrollTo?.({ top: div.scrollHeight, behavior });
-    };
-
-    const scheduleScrollToBottom = (behavior: ScrollBehavior) => {
-      intent = behavior;
-      // The immediate watch below runs synchronously during SSR, where no
-      // frame scheduler exists.
-      if (typeof requestAnimationFrame === "undefined") return;
-      if (frame !== null) cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        frame = null;
-        scrollToBottom(behavior);
-      });
-    };
-
-    const handleScroll = () => {
-      const div = divRef.value;
-      if (!div) return;
-
-      const newIsAtBottom = isViewportAtBottom(div, contentInset.value);
-      const inFlightDownward = !newIsAtBottom && lastScrollTop < div.scrollTop;
-      if (!inFlightDownward) {
-        if (newIsAtBottom) {
-          // At-bottom is ambiguous while the viewport does not overflow; keep
-          // the intent alive until content can actually scroll.
-          if (viewportOverflows(div, contentInset.value)) intent = null;
-        } else if (
-          isUserScrollUp(
-            { scrollTop: lastScrollTop, scrollHeight: lastScrollHeight },
-            div,
-          )
-        ) {
-          intent = null;
-        }
-        if (newIsAtBottom || intent === null) isAtBottom.value = newIsAtBottom;
-      }
-
-      lastScrollTop = div.scrollTop;
-      lastScrollHeight = div.scrollHeight;
-    };
+    const autoScroll = createThreadViewportAutoScroll({
+      getOptions: () => ({
+        autoScroll: props.autoScroll,
+        scrollToBottomOnInitialize: props.scrollToBottomOnInitialize,
+        scrollToBottomOnRunStart: props.scrollToBottomOnRunStart,
+        scrollToBottomOnThreadSwitch: props.scrollToBottomOnThreadSwitch,
+      }),
+      onAtBottomChange: (value) => {
+        isAtBottom.value = value;
+      },
+    });
 
     const updateContentInset = () => {
       let total = 0;
       for (const height of contentInsetEntries.values()) total += height;
-      if (contentInset.value === total) return;
-      const grew = total > contentInset.value;
-      contentInset.value = total;
-      // A growing inset obscures content a pinned viewport was showing, so it
-      // follows like a content resize; a shrinking inset reveals content and
-      // must not move the viewport.
-      if (grew) {
-        if (intent) {
-          scrollToBottom(intent);
-        } else if (props.autoScroll && isAtBottom.value) {
-          scrollToBottom("instant");
-        }
-      }
-      handleScroll();
+      autoScroll.setContentInset(total);
     };
 
     const registerContentInset = () => {
@@ -145,89 +86,35 @@ export const ThreadPrimitiveViewport = defineComponent({
       };
     };
 
-    const onContentResize = () => {
-      const div = divRef.value;
-      if (!div) return;
-      const { scrollHeight, clientHeight } = div;
-      if (
-        scrollHeight === lastObservedScrollHeight &&
-        clientHeight === lastObservedClientHeight
-      ) {
-        return;
-      }
-      lastObservedScrollHeight = scrollHeight;
-      lastObservedClientHeight = clientHeight;
-
-      if (intent) {
-        scrollToBottom(intent);
-      } else if (props.autoScroll && isAtBottom.value) {
-        scrollToBottom("instant");
-      }
-      handleScroll();
-    };
-
-    // A pointer gesture invalidates pending bottom-scroll intent; otherwise an
-    // intent kept alive by a non-overflowing thread hijacks the next content
-    // growth. Unlike the React hook, an already scheduled frame is cancelled
-    // too, so the gesture also wins the race against a just-planted intent.
-    const onPointerdown = () => {
-      intent = null;
-      if (frame !== null) {
-        cancelAnimationFrame(frame);
-        frame = null;
-      }
-    };
-
-    let disconnect: (() => void) | undefined;
+    let detach: (() => void) | undefined;
     onMounted(() => {
       const div = divRef.value;
       if (!div) return;
-      disconnect = observeContentResize(div, onContentResize);
+      detach = autoScroll.attach(div);
     });
     onScopeDispose(() => {
-      disconnect?.();
-      if (frame !== null) cancelAnimationFrame(frame);
+      detach?.();
+      autoScroll.dispose();
     });
 
     const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
-    let initialized = false;
     watch(
       [hasMessages, () => props.scrollToBottomOnInitialize],
-      ([has, enabled]) => {
-        if (!has) {
-          initialized = false;
-          return;
-        }
-        if (!enabled || initialized) return;
-        initialized = true;
-        if (intent !== null) return;
-        scheduleScrollToBottom("instant");
-      },
+      ([has]) => autoScroll.setHasMessages(has),
       { immediate: true },
     );
 
-    useAuiEvent("thread.runStart", () => {
-      if (!props.scrollToBottomOnRunStart) return;
-      scheduleScrollToBottom("auto");
-    });
+    useAuiEvent("thread.runStart", () => autoScroll.runStarted());
 
-    useAuiEvent("threads.selectionChanged", () => {
-      if (!props.scrollToBottomOnThreadSwitch) return;
-      scheduleScrollToBottom("instant");
-    });
+    useAuiEvent("threads.selectionChanged", () => autoScroll.threadSwitched());
 
     provide(viewportInjectionKey, {
       isAtBottom,
       scrollToBottom: (behavior: ScrollBehavior = "auto") =>
-        scrollToBottom(behavior),
+        autoScroll.scrollToBottom(behavior),
       registerContentInset,
     });
 
-    return () =>
-      h(
-        "div",
-        { ref: divRef, onScroll: handleScroll, onPointerdown },
-        slots.default?.(),
-      );
+    return () => h("div", { ref: divRef }, slots.default?.());
   },
 });

package/src/primitives/ThreadPrimitiveViewportFooter.test.ts

@@ -20,10 +20,17 @@ import { ThreadPrimitiveViewportFooter } from "./ThreadPrimitiveViewportFooter";
 
 const geometryElements = new Set<HTMLElement>();
 
-const createTestRuntime = () =>
+const createTestRuntime = (withHistory = false) =>
   new AssistantRuntimeImpl(
     new ExternalStoreRuntimeCore({
-      messages: [],
+      messages: withHistory
+        ? [
+            {
+              role: "user" as const,
+              content: [{ type: "text" as const, text: "history" }],
+            },
+          ]
+        : [],
       convertMessage: () => ({ role: "user", content: [] }),
       onNew: async () => {},
     }),
@@ -84,10 +91,31 @@ const installViewportGeometry = (div: HTMLElement) => {
   };
 };
 
+const mountChatWithViewportGeometry = (
+  runtime: AssistantRuntimeImpl,
+  view: Component,
+) => {
+  const geometries = new WeakMap<
+    HTMLElement,
+    ReturnType<typeof installViewportGeometry>
+  >();
+  const createElement = document.createElement.bind(document);
+  vi.spyOn(document, "createElement").mockImplementation((tagName: string) => {
+    const element = createElement(tagName);
+    if (tagName === "div") {
+      geometries.set(element, installViewportGeometry(element));
+    }
+    return element;
+  });
+  const mounted = mountChat(runtime, view);
+  const viewport = mounted.el.querySelector<HTMLElement>("div.viewport")!;
+  return { ...mounted, viewport, geometry: geometries.get(viewport)! };
+};
+
 const installResizeObserver = () => {
   const observers = new Set<ResizeObserverMock>();
   class ResizeObserverMock {
-    element: Element | null = null;
+    readonly elements = new Set<Element>();
     readonly callback: ResizeObserverCallback;
 
     constructor(callback: ResizeObserverCallback) {
@@ -96,12 +124,15 @@ const installResizeObserver = () => {
     }
 
     observe(element: Element) {
-      this.element = element;
+      this.elements.add(element);
     }
 
-    unobserve() {}
+    unobserve(element: Element) {
+      this.elements.delete(element);
+    }
 
     disconnect() {
+      this.elements.clear();
       observers.delete(this);
     }
 
@@ -117,7 +148,7 @@ const installResizeObserver = () => {
   return {
     trigger: (element: Element) => {
       for (const observer of observers) {
-        if (observer.element === element) observer.trigger();
+        if (observer.elements.has(element)) observer.trigger();
       }
     },
   };
@@ -135,6 +166,70 @@ afterEach(() => {
   geometryElements.clear();
 });
 
+describe("ThreadPrimitiveViewport initial pinning", () => {
+  it.each(["viewport", "content"])(
+    "follows the first %s resize over overflowing history when initialization scroll is disabled",
+    (target) => {
+      const observers = installResizeObserver();
+      const View = defineComponent({
+        setup: () => () =>
+          h(
+            ThreadPrimitiveViewport,
+            { class: "viewport", scrollToBottomOnInitialize: false },
+            { default: () => h("p", "history") },
+          ),
+      });
+      const { viewport, geometry, unmount } = mountChatWithViewportGeometry(
+        createTestRuntime(true),
+        View,
+      );
+
+      observers.trigger(
+        target === "viewport" ? viewport : viewport.firstElementChild!,
+      );
+      expect(geometry.scrollTo).toHaveBeenCalledWith({
+        top: 500,
+        behavior: "instant",
+      });
+      expect(viewport.scrollTop).toBe(400);
+      unmount();
+    },
+  );
+
+  it("follows a footer height reported before the viewport attaches", () => {
+    installResizeObserver();
+    vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.classList.contains("footer") ? 50 : 0;
+      },
+    );
+    const View = defineComponent({
+      setup: () => () =>
+        h(
+          ThreadPrimitiveViewport,
+          { class: "viewport", scrollToBottomOnInitialize: false },
+          {
+            default: () => [
+              h("p", "history"),
+              h(ThreadPrimitiveViewportFooter, { class: "footer" }),
+            ],
+          },
+        ),
+    });
+    const { viewport, geometry, unmount } = mountChatWithViewportGeometry(
+      createTestRuntime(true),
+      View,
+    );
+
+    expect(geometry.scrollTo).toHaveBeenCalledWith({
+      top: 500,
+      behavior: "instant",
+    });
+    expect(viewport.scrollTop).toBe(400);
+    unmount();
+  });
+});
+
 describe("ThreadPrimitiveViewportFooter", () => {
   it("registers its height and unregisters it when removed", async () => {
     const observers = installResizeObserver();