@agentskit/chat-vue 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 AgentsKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,9 @@
+# @agentskit/chat-vue
+
+Native Vue 3 application shell for AgentsKit Chat. It composes `useChat`, `ChatRoot`, and the headless components published by `@agentskit/vue`; chat state and lifecycle remain upstream.
+
+```ts
+import { AgentChat } from '@agentskit/chat-vue'
+```
+
+Use the named scoped slots `container`, `message`, `input`, `thinking`, `confirmation`, and `choiceList` for Vue-native customization.

package/dist/index.cjs

@@ -0,0 +1,376 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgentChat: () => AgentChat,
+  ChoiceList: () => ChoiceList,
+  StandardComponent: () => StandardComponent,
+  toChatCssVariables: () => toChatCssVariables
+});
+module.exports = __toCommonJS(index_exports);
+var import_chat2 = require("@agentskit/chat");
+var import_vue2 = require("@agentskit/vue");
+var import_vue3 = require("vue");
+
+// src/StandardComponent.ts
+var import_chat = require("@agentskit/chat");
+var import_vue = require("vue");
+var StandardComponent = (0, import_vue.defineComponent)({
+  name: "AgentsKitStandardComponent",
+  props: { frame: { type: Object, required: true }, manifest: { type: Object, required: true }, onInteract: { type: Function, required: true }, disabled: Boolean },
+  setup(props) {
+    const values = (0, import_vue.reactive)({});
+    const emit = (event, value) => props.onInteract((0, import_chat.createComponentInteraction)(props.frame, props.manifest, event, value));
+    return () => {
+      if (!(0, import_chat.resolveComponentFrame)(props.frame, props.manifest).ok || props.frame.componentKey === "choice-list") return null;
+      const key = props.frame.componentKey;
+      if (key === "button-group") {
+        const item = import_chat.ButtonGroupPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("fieldset", { "aria-label": item.label, "data-ak-component": key }, [(0, import_vue.h)("legend", item.label), ...item.buttons.map((button) => (0, import_vue.h)("button", { type: "button", disabled: props.disabled || button.disabled, onClick: () => emit("select", button.id) }, button.label))]);
+      }
+      if (key === "form") {
+        const item = import_chat.FormPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("form", { "aria-label": item.title ?? "Form", "data-ak-component": key, onSubmit: (event) => {
+          event.preventDefault();
+          emit("submit", { ...values });
+        } }, [...item.title ? [(0, import_vue.h)("h3", item.title)] : [], ...item.fields.map((field) => (0, import_vue.h)("label", [field.label, field.type === "select" ? (0, import_vue.h)("select", { required: field.required, disabled: props.disabled, value: values[field.id] ?? "", onInput: (event) => {
+          if (event.target instanceof HTMLSelectElement) values[field.id] = event.target.value;
+        } }, [(0, import_vue.h)("option", { value: "", disabled: true }, "Select\u2026"), ...field.options?.map((option) => (0, import_vue.h)("option", { value: option.id }, option.label)) ?? []]) : (0, import_vue.h)("input", { type: field.type, required: field.required, disabled: props.disabled, placeholder: field.placeholder, onInput: (event) => {
+          if (event.target instanceof HTMLInputElement) values[field.id] = field.type === "checkbox" ? event.target.checked : event.target.value;
+        } })])), (0, import_vue.h)("button", { type: "submit", disabled: props.disabled }, item.submitLabel)]);
+      }
+      if (key === "confirmation") {
+        const item = import_chat.ConfirmationPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("section", { "aria-label": item.title, "data-ak-component": key }, [(0, import_vue.h)("h3", item.title), (0, import_vue.h)("p", item.message), (0, import_vue.h)("button", { disabled: props.disabled, onClick: () => emit("confirm") }, item.confirmLabel), (0, import_vue.h)("button", { disabled: props.disabled, onClick: () => emit("cancel") }, item.cancelLabel)]);
+      }
+      if (key === "progress") {
+        const item = import_chat.ProgressPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("div", { "data-ak-component": key }, [(0, import_vue.h)("label", [item.label, (0, import_vue.h)("progress", { max: 100, value: item.value })]), item.status ? (0, import_vue.h)("p", item.status) : null]);
+      }
+      if (key === "source-list") {
+        const item = import_chat.SourceListPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("section", { "data-ak-component": key }, [(0, import_vue.h)("h3", item.label), (0, import_vue.h)("ul", item.sources.map((source) => (0, import_vue.h)("li", [source.url ? (0, import_vue.h)("a", { href: source.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", source.id);
+        } }, source.title) : source.title, source.snippet ? (0, import_vue.h)("p", source.snippet) : null])))]);
+      }
+      if (key === "link-card") {
+        const item = import_chat.LinkCardPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("a", { href: item.href, "data-ak-component": key, onClick: (event) => {
+          event.preventDefault();
+          emit("open", item.href);
+        } }, [(0, import_vue.h)("strong", item.title), item.description, item.label]);
+      }
+      if (key === "error-notice") {
+        const item = import_chat.ErrorNoticePropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("section", { role: "alert", "data-ak-component": key }, [(0, import_vue.h)("strong", item.title), (0, import_vue.h)("p", item.message), item.code ? (0, import_vue.h)("code", item.code) : null, item.retryLabel ? (0, import_vue.h)("button", { disabled: props.disabled, onClick: () => emit("retry") }, item.retryLabel) : null]);
+      }
+      if (key === "tool-call") {
+        const item = import_chat.ToolCallPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("section", { role: "status", "data-ak-component": key }, [(0, import_vue.h)("strong", item.name), (0, import_vue.h)("span", item.status), item.arguments ? (0, import_vue.h)("pre", JSON.stringify(item.arguments, null, 2)) : null, item.result === void 0 ? null : (0, import_vue.h)("pre", JSON.stringify(item.result, null, 2))]);
+      }
+      if (key === "approval-request") {
+        const item = import_chat.ApprovalRequestPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("section", { "aria-label": item.title, "data-ak-component": key }, [(0, import_vue.h)("h3", item.title), (0, import_vue.h)("p", item.description), (0, import_vue.h)("button", { disabled: props.disabled, onClick: () => emit("approve") }, item.approveLabel), (0, import_vue.h)("button", { disabled: props.disabled, onClick: () => emit("deny") }, item.denyLabel)]);
+      }
+      if (key === "table") {
+        const item = import_chat.TablePropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("table", { "data-ak-component": key }, [(0, import_vue.h)("caption", item.caption), (0, import_vue.h)("thead", (0, import_vue.h)("tr", item.columns.map((column) => (0, import_vue.h)("th", { scope: "col" }, column.label)))), (0, import_vue.h)("tbody", item.rows.map((row) => (0, import_vue.h)("tr", item.columns.map((column) => (0, import_vue.h)("td", String(row[column.key] ?? ""))))))]);
+      }
+      if (key === "file-attachment") {
+        const item = import_chat.FileAttachmentPropsSchema.parse(props.frame.props);
+        return (0, import_vue.h)("article", { "data-ak-component": key }, [(0, import_vue.h)("strong", item.name), (0, import_vue.h)("span", item.mimeType), item.sizeBytes === void 0 ? null : (0, import_vue.h)("span", `${item.sizeBytes} bytes`), item.url ? (0, import_vue.h)("a", { href: item.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", item.url);
+        } }, "Open") : null]);
+      }
+      return (0, import_vue.h)("p", { "data-ak-component-fallback": "" }, (0, import_chat.resolveComponentFallback)(props.frame, props.manifest) ?? "");
+    };
+  }
+});
+
+// src/index.ts
+var toChatCssVariables = (input) => {
+  const theme = (0, import_chat2.resolveChatTheme)(input);
+  return {
+    "--ak-color-bg": theme.colors.background,
+    "--ak-color-surface": theme.colors.surface,
+    "--ak-color-border": theme.colors.border,
+    "--ak-color-text": theme.colors.text,
+    "--ak-color-text-muted": theme.colors.muted,
+    "--ak-color-bubble-user": theme.colors.accent,
+    "--ak-color-bubble-user-text": theme.colors.onAccent,
+    "--ak-color-bubble-assistant": theme.colors.surface,
+    "--ak-color-bubble-assistant-text": theme.colors.text,
+    "--ak-color-input-bg": theme.colors.background,
+    "--ak-color-input-border": theme.colors.border,
+    "--ak-color-input-focus": theme.colors.accent,
+    "--ak-color-button": theme.colors.accent,
+    "--ak-color-button-text": theme.colors.onAccent,
+    "--ak-color-tool-bg": theme.colors.surface,
+    "--ak-color-tool-border": theme.colors.border,
+    "--ak-app-color-danger": theme.colors.danger,
+    "--ak-font-family": theme.fontFamily === "system" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : theme.fontFamily,
+    "--ak-radius": `${theme.radius.medium}px`,
+    "--ak-radius-lg": `${theme.radius.large}px`,
+    "--ak-spacing-sm": `${theme.spacing.small}px`,
+    "--ak-spacing-md": `${theme.spacing.medium}px`,
+    "--ak-spacing-lg": `${theme.spacing.large}px`
+  };
+};
+var ChoiceList = (0, import_vue3.defineComponent)({
+  name: "AgentsKitChoiceList",
+  props: {
+    frame: { type: null, required: true },
+    manifest: { type: Object, required: true },
+    onSelect: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(props) {
+    return () => {
+      const resolved = (0, import_chat2.resolveChoiceListFrame)(props.frame, props.manifest);
+      if (!resolved.ok) return null;
+      return (0, import_vue3.h)("fieldset", { "aria-label": resolved.props.prompt, "data-ak-component": "choice-list" }, [
+        (0, import_vue3.h)("legend", resolved.props.prompt),
+        ...resolved.props.choices.map((choice) => (0, import_vue3.h)("button", {
+          key: choice.id,
+          type: "button",
+          disabled: props.disabled,
+          onClick: () => props.onSelect((0, import_chat2.selectChoice)(resolved.frame, choice.id))
+        }, [(0, import_vue3.h)("span", choice.label), choice.description === void 0 ? null : (0, import_vue3.h)("small", choice.description)]))
+      ]);
+    };
+  }
+});
+var slot = (slots, name, props, fallback) => slots[name]?.(props) ?? fallback();
+var agentChatProps = {
+  definition: { type: Object, required: true },
+  placeholder: { type: String, default: void 0 },
+  onComponentSelect: { type: Function, default: void 0 },
+  onComponentInteract: { type: Function, default: void 0 },
+  actionConfirmationTtlMs: { type: Number, default: void 0 },
+  session: { type: Object, default: void 0 },
+  theme: { type: Object, default: void 0 }
+};
+var ChatBinding = (0, import_vue3.defineComponent)({
+  name: "AgentsKitChatBinding",
+  props: {
+    config: { type: Object, required: true },
+    onState: { type: Function, required: true }
+  },
+  setup(props, { slots }) {
+    const chat = (0, import_vue2.useChat)(props.config);
+    (0, import_vue3.watchEffect)(() => {
+      void chat.status;
+      void chat.messages;
+      props.onState(chat);
+    });
+    return () => slots.default?.({ chat });
+  }
+});
+var AgentChatSession = (0, import_vue3.defineComponent)({
+  name: "AgentsKitChatSession",
+  props: agentChatProps,
+  slots: Object,
+  setup(props, { slots }) {
+    const session = (0, import_chat2.resolveChatSession)(props.definition, props.session);
+    const sessionId = session.sessionId;
+    let activeChat = props.definition.chat;
+    let pendingChat = activeChat;
+    let messages = activeChat.initialMessages;
+    let status = "idle";
+    let currentChat;
+    const bindingRevision = (0, import_vue3.ref)(0);
+    const actionError = (0, import_vue3.ref)();
+    const editDraft = (0, import_vue3.ref)();
+    const resolvedInstances = (0, import_vue3.ref)(/* @__PURE__ */ new Set());
+    const confirmation = session.createConfirmation({
+      ...props.actionConfirmationTtlMs === void 0 ? {} : { ttlMs: props.actionConfirmationTtlMs },
+      chat: {
+        proposeToolCall: (proposal) => currentChat.proposeToolCall(proposal),
+        approve: (id) => currentChat.approve(id),
+        deny: (id, reason) => currentChat.deny(id, reason)
+      }
+    });
+    const fail = (error, fallback) => {
+      actionError.value = error instanceof Error ? error : new Error(fallback);
+    };
+    const selectComponent = (event, frame) => {
+      if (resolvedInstances.value.has(event.instanceId)) return;
+      actionError.value = void 0;
+      resolvedInstances.value.add(event.instanceId);
+      try {
+        props.onComponentSelect?.(event);
+      } catch (error) {
+        fail(error, "Component selection callback failed.");
+      }
+      const action = (0, import_chat2.resolveChoiceAction)(frame, event.choiceId);
+      if (action) void confirmation.propose(action).catch((error) => {
+        resolvedInstances.value.delete(event.instanceId);
+        fail(error, "Action proposal failed.");
+      });
+      else {
+        let submission;
+        try {
+          submission = props.definition.choiceSubmission?.(frame, event.choiceId, { sessionId });
+        } catch (error) {
+          resolvedInstances.value.delete(event.instanceId);
+          fail(error, "Choice submission authorization failed.");
+          return;
+        }
+        if (submission && "unavailable" in submission) {
+          resolvedInstances.value.delete(event.instanceId);
+          fail(new Error("This deterministic choice expired. Ask the question again."), "Choice unavailable.");
+          return;
+        }
+        if (submission) void currentChat.send(submission.value).then(
+          () => {
+            try {
+              submission.commit();
+            } catch (error) {
+              fail(error, "Choice submission settlement failed.");
+            }
+          },
+          (error) => {
+            try {
+              submission.release();
+            } catch {
+            } finally {
+              resolvedInstances.value.delete(event.instanceId);
+            }
+            fail(error, "Choice submission failed.");
+          }
+        );
+      }
+    };
+    const approve = (toolCallId) => {
+      const record = confirmation.getByToolCall(toolCallId);
+      void (record ? confirmation.approve(record.token, sessionId) : currentChat.approve(toolCallId)).catch((error) => fail(error, "Action approval failed."));
+    };
+    const deny = (toolCallId, reason) => {
+      const record = confirmation.getByToolCall(toolCallId);
+      void (record ? confirmation.reject(record.token, sessionId, reason) : currentChat.deny(toolCallId, reason)).catch((error) => fail(error, "Action rejection failed."));
+    };
+    const runLifecycle = (operation) => {
+      actionError.value = void 0;
+      void operation.catch((error) => fail(error, "Lifecycle operation failed."));
+    };
+    const interactComponent = (event) => {
+      if (resolvedInstances.value.has(event.instanceId)) return;
+      resolvedInstances.value.add(event.instanceId);
+      try {
+        props.onComponentInteract?.(event);
+      } catch (error) {
+        resolvedInstances.value.delete(event.instanceId);
+        fail(error, "Component interaction callback failed.");
+      }
+    };
+    const renderChat = (chat) => {
+      currentChat = chat;
+      const nativeSlots = slots;
+      const targets = (0, import_chat2.getLifecycleTargets)(chat.messages);
+      const messages2 = chat.messages.flatMap((message) => (0, import_chat2.presentChatMessage)(message).map((presentation, index) => {
+        if (presentation.kind === "component") {
+          const manifest = props.definition.components;
+          const resolved = manifest === void 0 ? void 0 : (0, import_chat2.resolveComponentFrame)(presentation.frame, manifest);
+          const rendered2 = resolved?.ok ? presentation.frame.componentKey === "choice-list" ? slot(nativeSlots, "choiceList", { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame) }, () => (0, import_vue3.h)(ChoiceList, { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame) })) : slot(nativeSlots, "standardComponent", { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onInteract: interactComponent }, () => (0, import_vue3.h)(StandardComponent, { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onInteract: interactComponent })) : (0, import_vue3.h)("p", { "data-ak-component-fallback": "" }, (0, import_chat2.formatSemanticFallback)(presentation.frame.fallback));
+          return (0, import_vue3.h)(import_vue3.Fragment, { key: `${message.id}:${index}` }, [rendered2]);
+        }
+        const rendered = presentation.kind === "diagnostic" ? (0, import_vue3.h)("p", { role: "alert", "data-ak-component-diagnostic": presentation.code }, presentation.message) : slot(nativeSlots, "message", { message: presentation.message }, () => (0, import_vue3.h)(import_vue2.Message, { message: presentation.message }));
+        return (0, import_vue3.h)(import_vue3.Fragment, { key: `${message.id}:${index}` }, [rendered]);
+      }));
+      const confirmations = chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => (0, import_vue3.h)(import_vue3.Fragment, { key: toolCall.id }, [slot(nativeSlots, "confirmation", { toolCall, onApprove: approve, onDeny: deny }, () => (0, import_vue3.h)(import_vue2.ToolConfirmation, { toolCall, onApprove: approve, onDeny: deny }))]));
+      const content = [...messages2, ...confirmations, slot(nativeSlots, "thinking", { visible: chat.status === "streaming" }, () => (0, import_vue3.h)(import_vue2.ThinkingIndicator, { visible: chat.status === "streaming" }))];
+      const container = slot(nativeSlots, "container", { children: content }, () => (0, import_vue3.h)(import_vue2.ChatRoot, {}, { default: () => content }));
+      const error = chat.error ?? actionError.value;
+      return (0, import_vue3.h)("section", {
+        "aria-label": `${props.definition.id} chat`,
+        "data-ak-app-chat": "",
+        style: props.theme === void 0 ? void 0 : toChatCssVariables(props.theme)
+      }, [
+        (0, import_vue3.h)("div", { "aria-live": "polite", "aria-relevant": "additions text", role: "log" }, [container]),
+        error ? (0, import_vue3.h)("p", { role: "alert", style: { color: (0, import_chat2.resolveChatTheme)(props.theme).colors.danger } }, error.message) : null,
+        chat.status === "streaming" ? (0, import_vue3.h)("button", { type: "button", onClick: chat.stop }, "Stop") : null,
+        chat.status !== "streaming" && targets.userId ? (0, import_vue3.h)("div", { "aria-label": "Response actions" }, [
+          (0, import_vue3.h)("button", { type: "button", "aria-label": "Retry response", onClick: () => runLifecycle(chat.retry()) }, "Retry"),
+          targets.assistantId ? (0, import_vue3.h)("button", { type: "button", "aria-label": "Regenerate response", onClick: () => runLifecycle(chat.regenerate(targets.assistantId)) }, "Regenerate") : null,
+          (0, import_vue3.h)("button", { type: "button", onClick: () => {
+            editDraft.value = { messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" };
+          } }, "Edit last message"),
+          editDraft.value === void 0 ? null : (0, import_vue3.h)("form", { onSubmit: (event) => {
+            event.preventDefault();
+            if (!editDraft.value?.content.trim()) return;
+            runLifecycle(chat.edit(editDraft.value.messageId, editDraft.value.content));
+            editDraft.value = void 0;
+          } }, [
+            (0, import_vue3.h)("label", ["Edit message", (0, import_vue3.h)("input", { "aria-label": "Edit message", value: editDraft.value.content, onInput: (event) => {
+              editDraft.value = { ...editDraft.value, content: event.target.value };
+            } })]),
+            (0, import_vue3.h)("button", { type: "submit", "aria-label": "Save edit" }, "Save edit"),
+            (0, import_vue3.h)("button", { type: "button", onClick: () => {
+              editDraft.value = void 0;
+            } }, "Cancel edit")
+          ])
+        ]) : null,
+        slot(nativeSlots, "input", { chat, disabled: chat.status === "streaming", placeholder: props.placeholder }, () => (0, import_vue3.h)(import_vue2.InputBar, { chat, disabled: chat.status === "streaming", ...props.placeholder === void 0 ? {} : { placeholder: props.placeholder } }))
+      ]);
+    };
+    return () => {
+      pendingChat = props.definition.chat;
+      if (activeChat !== pendingChat && status !== "streaming") {
+        activeChat = pendingChat;
+        bindingRevision.value += 1;
+      }
+      const config = session.updateChat({ ...activeChat, ...messages === void 0 ? {} : { initialMessages: messages } });
+      return (0, import_vue3.h)(ChatBinding, {
+        key: bindingRevision.value,
+        config,
+        onState: (chat) => {
+          currentChat = chat;
+          messages = chat.messages;
+          status = chat.status;
+          if (activeChat !== pendingChat && status !== "streaming") {
+            activeChat = pendingChat;
+            bindingRevision.value += 1;
+          }
+        }
+      }, { default: ({ chat }) => renderChat(chat) });
+    };
+  }
+});
+var AgentChat = (0, import_vue3.defineComponent)({
+  name: "AgentsKitChat",
+  props: agentChatProps,
+  slots: Object,
+  setup(props, { slots }) {
+    return () => (0, import_vue3.h)(AgentChatSession, {
+      ...props,
+      key: `${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? "new"}`
+    }, slots);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentChat,
+  ChoiceList,
+  StandardComponent,
+  toChatCssVariables
+});

package/dist/index.d.cts

@@ -0,0 +1,196 @@
+import * as vue from 'vue';
+import { PropType, VNode, SlotsType, VNodeChild, CSSProperties } from 'vue';
+import { ComponentManifest, ChatDefinition, ChatSession, ChatThemeInput } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentRenderFrame, ComponentInteractionEvent, ComponentSelectionEvent } from '@agentskit/chat-protocol';
+import { Message, ChatReturn, ToolCall } from '@agentskit/core';
+
+interface StandardComponentProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponent: vue.DefineComponent<vue.ExtractPropTypes<{
+    frame: {
+        type: PropType<ComponentRenderFrame>;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onInteract: {
+        type: PropType<(event: ComponentInteractionEvent) => void>;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+}>, () => VNode | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    frame: {
+        type: PropType<ComponentRenderFrame>;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onInteract: {
+        type: PropType<(event: ComponentInteractionEvent) => void>;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type ChatCssVariables = CSSProperties & {
+    readonly [key: `--ak-${string}`]: string | number;
+};
+declare const toChatCssVariables: (input?: ChatThemeInput) => ChatCssVariables;
+interface ChoiceListProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const ChoiceList: vue.DefineComponent<vue.ExtractPropTypes<{
+    frame: {
+        type: null;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onSelect: {
+        type: PropType<(event: ComponentSelectionEvent) => void>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    frame: {
+        type: null;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onSelect: {
+        type: PropType<(event: ComponentSelectionEvent) => void>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface AgentChatProps {
+    readonly definition: ChatDefinition;
+    readonly placeholder?: string;
+    readonly onComponentSelect?: (event: ComponentSelectionEvent) => void;
+    readonly onComponentInteract?: (event: ComponentInteractionEvent) => void;
+    readonly actionConfirmationTtlMs?: number;
+    readonly session?: ChatSession;
+    readonly theme?: ChatThemeInput;
+}
+interface AgentChatSlots {
+    readonly container?: (props: {
+        readonly children: VNodeChild;
+    }) => VNode[];
+    readonly message?: (props: {
+        readonly message: Message;
+    }) => VNode[];
+    readonly input?: (props: {
+        readonly chat: ChatReturn;
+        readonly disabled: boolean;
+        readonly placeholder?: string;
+    }) => VNode[];
+    readonly thinking?: (props: {
+        readonly visible: boolean;
+    }) => VNode[];
+    readonly confirmation?: (props: {
+        readonly toolCall: ToolCall;
+        readonly onApprove: (id: string) => void;
+        readonly onDeny: (id: string, reason?: string) => void;
+    }) => VNode[];
+    readonly choiceList?: (props: ChoiceListProps) => VNode[];
+    readonly standardComponent?: (props: StandardComponentProps) => VNode[];
+}
+declare const AgentChat: vue.DefineComponent<vue.ExtractPropTypes<{
+    readonly definition: {
+        readonly type: PropType<ChatDefinition>;
+        readonly required: true;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly onComponentSelect: {
+        readonly type: PropType<(event: ComponentSelectionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly onComponentInteract: {
+        readonly type: PropType<(event: ComponentInteractionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly actionConfirmationTtlMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly session: {
+        readonly type: PropType<ChatSession>;
+        readonly default: undefined;
+    };
+    readonly theme: {
+        readonly type: PropType<ChatThemeInput>;
+        readonly default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly definition: {
+        readonly type: PropType<ChatDefinition>;
+        readonly required: true;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly onComponentSelect: {
+        readonly type: PropType<(event: ComponentSelectionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly onComponentInteract: {
+        readonly type: PropType<(event: ComponentInteractionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly actionConfirmationTtlMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly session: {
+        readonly type: PropType<ChatSession>;
+        readonly default: undefined;
+    };
+    readonly theme: {
+        readonly type: PropType<ChatThemeInput>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly placeholder: string;
+    readonly onComponentSelect: (event: ComponentSelectionEvent) => void;
+    readonly onComponentInteract: (event: ComponentInteractionEvent) => void;
+    readonly actionConfirmationTtlMs: number;
+    readonly session: ChatSession;
+    readonly theme: ChatThemeInput;
+}, SlotsType<AgentChatSlots>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AgentChat, type AgentChatProps, type AgentChatSlots, type ChatCssVariables, ChoiceList, type ChoiceListProps, StandardComponent, type StandardComponentProps, toChatCssVariables };

package/dist/index.d.ts

@@ -0,0 +1,196 @@
+import * as vue from 'vue';
+import { PropType, VNode, SlotsType, VNodeChild, CSSProperties } from 'vue';
+import { ComponentManifest, ChatDefinition, ChatSession, ChatThemeInput } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentRenderFrame, ComponentInteractionEvent, ComponentSelectionEvent } from '@agentskit/chat-protocol';
+import { Message, ChatReturn, ToolCall } from '@agentskit/core';
+
+interface StandardComponentProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponent: vue.DefineComponent<vue.ExtractPropTypes<{
+    frame: {
+        type: PropType<ComponentRenderFrame>;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onInteract: {
+        type: PropType<(event: ComponentInteractionEvent) => void>;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+}>, () => VNode | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    frame: {
+        type: PropType<ComponentRenderFrame>;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onInteract: {
+        type: PropType<(event: ComponentInteractionEvent) => void>;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type ChatCssVariables = CSSProperties & {
+    readonly [key: `--ak-${string}`]: string | number;
+};
+declare const toChatCssVariables: (input?: ChatThemeInput) => ChatCssVariables;
+interface ChoiceListProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const ChoiceList: vue.DefineComponent<vue.ExtractPropTypes<{
+    frame: {
+        type: null;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onSelect: {
+        type: PropType<(event: ComponentSelectionEvent) => void>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    frame: {
+        type: null;
+        required: true;
+    };
+    manifest: {
+        type: PropType<ComponentManifest>;
+        required: true;
+    };
+    onSelect: {
+        type: PropType<(event: ComponentSelectionEvent) => void>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface AgentChatProps {
+    readonly definition: ChatDefinition;
+    readonly placeholder?: string;
+    readonly onComponentSelect?: (event: ComponentSelectionEvent) => void;
+    readonly onComponentInteract?: (event: ComponentInteractionEvent) => void;
+    readonly actionConfirmationTtlMs?: number;
+    readonly session?: ChatSession;
+    readonly theme?: ChatThemeInput;
+}
+interface AgentChatSlots {
+    readonly container?: (props: {
+        readonly children: VNodeChild;
+    }) => VNode[];
+    readonly message?: (props: {
+        readonly message: Message;
+    }) => VNode[];
+    readonly input?: (props: {
+        readonly chat: ChatReturn;
+        readonly disabled: boolean;
+        readonly placeholder?: string;
+    }) => VNode[];
+    readonly thinking?: (props: {
+        readonly visible: boolean;
+    }) => VNode[];
+    readonly confirmation?: (props: {
+        readonly toolCall: ToolCall;
+        readonly onApprove: (id: string) => void;
+        readonly onDeny: (id: string, reason?: string) => void;
+    }) => VNode[];
+    readonly choiceList?: (props: ChoiceListProps) => VNode[];
+    readonly standardComponent?: (props: StandardComponentProps) => VNode[];
+}
+declare const AgentChat: vue.DefineComponent<vue.ExtractPropTypes<{
+    readonly definition: {
+        readonly type: PropType<ChatDefinition>;
+        readonly required: true;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly onComponentSelect: {
+        readonly type: PropType<(event: ComponentSelectionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly onComponentInteract: {
+        readonly type: PropType<(event: ComponentInteractionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly actionConfirmationTtlMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly session: {
+        readonly type: PropType<ChatSession>;
+        readonly default: undefined;
+    };
+    readonly theme: {
+        readonly type: PropType<ChatThemeInput>;
+        readonly default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly definition: {
+        readonly type: PropType<ChatDefinition>;
+        readonly required: true;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly onComponentSelect: {
+        readonly type: PropType<(event: ComponentSelectionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly onComponentInteract: {
+        readonly type: PropType<(event: ComponentInteractionEvent) => void>;
+        readonly default: undefined;
+    };
+    readonly actionConfirmationTtlMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly session: {
+        readonly type: PropType<ChatSession>;
+        readonly default: undefined;
+    };
+    readonly theme: {
+        readonly type: PropType<ChatThemeInput>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly placeholder: string;
+    readonly onComponentSelect: (event: ComponentSelectionEvent) => void;
+    readonly onComponentInteract: (event: ComponentInteractionEvent) => void;
+    readonly actionConfirmationTtlMs: number;
+    readonly session: ChatSession;
+    readonly theme: ChatThemeInput;
+}, SlotsType<AgentChatSlots>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AgentChat, type AgentChatProps, type AgentChatSlots, type ChatCssVariables, ChoiceList, type ChoiceListProps, StandardComponent, type StandardComponentProps, toChatCssVariables };

package/dist/index.js

@@ -0,0 +1,348 @@
+// src/index.ts
+import { formatSemanticFallback, getLifecycleTargets, presentChatMessage, resolveChatSession, resolveChatTheme, resolveChoiceAction, resolveChoiceListFrame, resolveComponentFrame as resolveComponentFrame2, selectChoice } from "@agentskit/chat";
+import { ChatRoot, InputBar, Message, ThinkingIndicator, ToolConfirmation, useChat } from "@agentskit/vue";
+import { defineComponent as defineComponent2, Fragment, h as h2, ref, watchEffect } from "vue";
+
+// src/StandardComponent.ts
+import { ApprovalRequestPropsSchema, ButtonGroupPropsSchema, ConfirmationPropsSchema, ErrorNoticePropsSchema, FileAttachmentPropsSchema, FormPropsSchema, LinkCardPropsSchema, ProgressPropsSchema, SourceListPropsSchema, TablePropsSchema, ToolCallPropsSchema, createComponentInteraction, resolveComponentFallback, resolveComponentFrame } from "@agentskit/chat";
+import { defineComponent, h, reactive } from "vue";
+var StandardComponent = defineComponent({
+  name: "AgentsKitStandardComponent",
+  props: { frame: { type: Object, required: true }, manifest: { type: Object, required: true }, onInteract: { type: Function, required: true }, disabled: Boolean },
+  setup(props) {
+    const values = reactive({});
+    const emit = (event, value) => props.onInteract(createComponentInteraction(props.frame, props.manifest, event, value));
+    return () => {
+      if (!resolveComponentFrame(props.frame, props.manifest).ok || props.frame.componentKey === "choice-list") return null;
+      const key = props.frame.componentKey;
+      if (key === "button-group") {
+        const item = ButtonGroupPropsSchema.parse(props.frame.props);
+        return h("fieldset", { "aria-label": item.label, "data-ak-component": key }, [h("legend", item.label), ...item.buttons.map((button) => h("button", { type: "button", disabled: props.disabled || button.disabled, onClick: () => emit("select", button.id) }, button.label))]);
+      }
+      if (key === "form") {
+        const item = FormPropsSchema.parse(props.frame.props);
+        return h("form", { "aria-label": item.title ?? "Form", "data-ak-component": key, onSubmit: (event) => {
+          event.preventDefault();
+          emit("submit", { ...values });
+        } }, [...item.title ? [h("h3", item.title)] : [], ...item.fields.map((field) => h("label", [field.label, field.type === "select" ? h("select", { required: field.required, disabled: props.disabled, value: values[field.id] ?? "", onInput: (event) => {
+          if (event.target instanceof HTMLSelectElement) values[field.id] = event.target.value;
+        } }, [h("option", { value: "", disabled: true }, "Select\u2026"), ...field.options?.map((option) => h("option", { value: option.id }, option.label)) ?? []]) : h("input", { type: field.type, required: field.required, disabled: props.disabled, placeholder: field.placeholder, onInput: (event) => {
+          if (event.target instanceof HTMLInputElement) values[field.id] = field.type === "checkbox" ? event.target.checked : event.target.value;
+        } })])), h("button", { type: "submit", disabled: props.disabled }, item.submitLabel)]);
+      }
+      if (key === "confirmation") {
+        const item = ConfirmationPropsSchema.parse(props.frame.props);
+        return h("section", { "aria-label": item.title, "data-ak-component": key }, [h("h3", item.title), h("p", item.message), h("button", { disabled: props.disabled, onClick: () => emit("confirm") }, item.confirmLabel), h("button", { disabled: props.disabled, onClick: () => emit("cancel") }, item.cancelLabel)]);
+      }
+      if (key === "progress") {
+        const item = ProgressPropsSchema.parse(props.frame.props);
+        return h("div", { "data-ak-component": key }, [h("label", [item.label, h("progress", { max: 100, value: item.value })]), item.status ? h("p", item.status) : null]);
+      }
+      if (key === "source-list") {
+        const item = SourceListPropsSchema.parse(props.frame.props);
+        return h("section", { "data-ak-component": key }, [h("h3", item.label), h("ul", item.sources.map((source) => h("li", [source.url ? h("a", { href: source.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", source.id);
+        } }, source.title) : source.title, source.snippet ? h("p", source.snippet) : null])))]);
+      }
+      if (key === "link-card") {
+        const item = LinkCardPropsSchema.parse(props.frame.props);
+        return h("a", { href: item.href, "data-ak-component": key, onClick: (event) => {
+          event.preventDefault();
+          emit("open", item.href);
+        } }, [h("strong", item.title), item.description, item.label]);
+      }
+      if (key === "error-notice") {
+        const item = ErrorNoticePropsSchema.parse(props.frame.props);
+        return h("section", { role: "alert", "data-ak-component": key }, [h("strong", item.title), h("p", item.message), item.code ? h("code", item.code) : null, item.retryLabel ? h("button", { disabled: props.disabled, onClick: () => emit("retry") }, item.retryLabel) : null]);
+      }
+      if (key === "tool-call") {
+        const item = ToolCallPropsSchema.parse(props.frame.props);
+        return h("section", { role: "status", "data-ak-component": key }, [h("strong", item.name), h("span", item.status), item.arguments ? h("pre", JSON.stringify(item.arguments, null, 2)) : null, item.result === void 0 ? null : h("pre", JSON.stringify(item.result, null, 2))]);
+      }
+      if (key === "approval-request") {
+        const item = ApprovalRequestPropsSchema.parse(props.frame.props);
+        return h("section", { "aria-label": item.title, "data-ak-component": key }, [h("h3", item.title), h("p", item.description), h("button", { disabled: props.disabled, onClick: () => emit("approve") }, item.approveLabel), h("button", { disabled: props.disabled, onClick: () => emit("deny") }, item.denyLabel)]);
+      }
+      if (key === "table") {
+        const item = TablePropsSchema.parse(props.frame.props);
+        return h("table", { "data-ak-component": key }, [h("caption", item.caption), h("thead", h("tr", item.columns.map((column) => h("th", { scope: "col" }, column.label)))), h("tbody", item.rows.map((row) => h("tr", item.columns.map((column) => h("td", String(row[column.key] ?? ""))))))]);
+      }
+      if (key === "file-attachment") {
+        const item = FileAttachmentPropsSchema.parse(props.frame.props);
+        return h("article", { "data-ak-component": key }, [h("strong", item.name), h("span", item.mimeType), item.sizeBytes === void 0 ? null : h("span", `${item.sizeBytes} bytes`), item.url ? h("a", { href: item.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", item.url);
+        } }, "Open") : null]);
+      }
+      return h("p", { "data-ak-component-fallback": "" }, resolveComponentFallback(props.frame, props.manifest) ?? "");
+    };
+  }
+});
+
+// src/index.ts
+var toChatCssVariables = (input) => {
+  const theme = resolveChatTheme(input);
+  return {
+    "--ak-color-bg": theme.colors.background,
+    "--ak-color-surface": theme.colors.surface,
+    "--ak-color-border": theme.colors.border,
+    "--ak-color-text": theme.colors.text,
+    "--ak-color-text-muted": theme.colors.muted,
+    "--ak-color-bubble-user": theme.colors.accent,
+    "--ak-color-bubble-user-text": theme.colors.onAccent,
+    "--ak-color-bubble-assistant": theme.colors.surface,
+    "--ak-color-bubble-assistant-text": theme.colors.text,
+    "--ak-color-input-bg": theme.colors.background,
+    "--ak-color-input-border": theme.colors.border,
+    "--ak-color-input-focus": theme.colors.accent,
+    "--ak-color-button": theme.colors.accent,
+    "--ak-color-button-text": theme.colors.onAccent,
+    "--ak-color-tool-bg": theme.colors.surface,
+    "--ak-color-tool-border": theme.colors.border,
+    "--ak-app-color-danger": theme.colors.danger,
+    "--ak-font-family": theme.fontFamily === "system" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : theme.fontFamily,
+    "--ak-radius": `${theme.radius.medium}px`,
+    "--ak-radius-lg": `${theme.radius.large}px`,
+    "--ak-spacing-sm": `${theme.spacing.small}px`,
+    "--ak-spacing-md": `${theme.spacing.medium}px`,
+    "--ak-spacing-lg": `${theme.spacing.large}px`
+  };
+};
+var ChoiceList = defineComponent2({
+  name: "AgentsKitChoiceList",
+  props: {
+    frame: { type: null, required: true },
+    manifest: { type: Object, required: true },
+    onSelect: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(props) {
+    return () => {
+      const resolved = resolveChoiceListFrame(props.frame, props.manifest);
+      if (!resolved.ok) return null;
+      return h2("fieldset", { "aria-label": resolved.props.prompt, "data-ak-component": "choice-list" }, [
+        h2("legend", resolved.props.prompt),
+        ...resolved.props.choices.map((choice) => h2("button", {
+          key: choice.id,
+          type: "button",
+          disabled: props.disabled,
+          onClick: () => props.onSelect(selectChoice(resolved.frame, choice.id))
+        }, [h2("span", choice.label), choice.description === void 0 ? null : h2("small", choice.description)]))
+      ]);
+    };
+  }
+});
+var slot = (slots, name, props, fallback) => slots[name]?.(props) ?? fallback();
+var agentChatProps = {
+  definition: { type: Object, required: true },
+  placeholder: { type: String, default: void 0 },
+  onComponentSelect: { type: Function, default: void 0 },
+  onComponentInteract: { type: Function, default: void 0 },
+  actionConfirmationTtlMs: { type: Number, default: void 0 },
+  session: { type: Object, default: void 0 },
+  theme: { type: Object, default: void 0 }
+};
+var ChatBinding = defineComponent2({
+  name: "AgentsKitChatBinding",
+  props: {
+    config: { type: Object, required: true },
+    onState: { type: Function, required: true }
+  },
+  setup(props, { slots }) {
+    const chat = useChat(props.config);
+    watchEffect(() => {
+      void chat.status;
+      void chat.messages;
+      props.onState(chat);
+    });
+    return () => slots.default?.({ chat });
+  }
+});
+var AgentChatSession = defineComponent2({
+  name: "AgentsKitChatSession",
+  props: agentChatProps,
+  slots: Object,
+  setup(props, { slots }) {
+    const session = resolveChatSession(props.definition, props.session);
+    const sessionId = session.sessionId;
+    let activeChat = props.definition.chat;
+    let pendingChat = activeChat;
+    let messages = activeChat.initialMessages;
+    let status = "idle";
+    let currentChat;
+    const bindingRevision = ref(0);
+    const actionError = ref();
+    const editDraft = ref();
+    const resolvedInstances = ref(/* @__PURE__ */ new Set());
+    const confirmation = session.createConfirmation({
+      ...props.actionConfirmationTtlMs === void 0 ? {} : { ttlMs: props.actionConfirmationTtlMs },
+      chat: {
+        proposeToolCall: (proposal) => currentChat.proposeToolCall(proposal),
+        approve: (id) => currentChat.approve(id),
+        deny: (id, reason) => currentChat.deny(id, reason)
+      }
+    });
+    const fail = (error, fallback) => {
+      actionError.value = error instanceof Error ? error : new Error(fallback);
+    };
+    const selectComponent = (event, frame) => {
+      if (resolvedInstances.value.has(event.instanceId)) return;
+      actionError.value = void 0;
+      resolvedInstances.value.add(event.instanceId);
+      try {
+        props.onComponentSelect?.(event);
+      } catch (error) {
+        fail(error, "Component selection callback failed.");
+      }
+      const action = resolveChoiceAction(frame, event.choiceId);
+      if (action) void confirmation.propose(action).catch((error) => {
+        resolvedInstances.value.delete(event.instanceId);
+        fail(error, "Action proposal failed.");
+      });
+      else {
+        let submission;
+        try {
+          submission = props.definition.choiceSubmission?.(frame, event.choiceId, { sessionId });
+        } catch (error) {
+          resolvedInstances.value.delete(event.instanceId);
+          fail(error, "Choice submission authorization failed.");
+          return;
+        }
+        if (submission && "unavailable" in submission) {
+          resolvedInstances.value.delete(event.instanceId);
+          fail(new Error("This deterministic choice expired. Ask the question again."), "Choice unavailable.");
+          return;
+        }
+        if (submission) void currentChat.send(submission.value).then(
+          () => {
+            try {
+              submission.commit();
+            } catch (error) {
+              fail(error, "Choice submission settlement failed.");
+            }
+          },
+          (error) => {
+            try {
+              submission.release();
+            } catch {
+            } finally {
+              resolvedInstances.value.delete(event.instanceId);
+            }
+            fail(error, "Choice submission failed.");
+          }
+        );
+      }
+    };
+    const approve = (toolCallId) => {
+      const record = confirmation.getByToolCall(toolCallId);
+      void (record ? confirmation.approve(record.token, sessionId) : currentChat.approve(toolCallId)).catch((error) => fail(error, "Action approval failed."));
+    };
+    const deny = (toolCallId, reason) => {
+      const record = confirmation.getByToolCall(toolCallId);
+      void (record ? confirmation.reject(record.token, sessionId, reason) : currentChat.deny(toolCallId, reason)).catch((error) => fail(error, "Action rejection failed."));
+    };
+    const runLifecycle = (operation) => {
+      actionError.value = void 0;
+      void operation.catch((error) => fail(error, "Lifecycle operation failed."));
+    };
+    const interactComponent = (event) => {
+      if (resolvedInstances.value.has(event.instanceId)) return;
+      resolvedInstances.value.add(event.instanceId);
+      try {
+        props.onComponentInteract?.(event);
+      } catch (error) {
+        resolvedInstances.value.delete(event.instanceId);
+        fail(error, "Component interaction callback failed.");
+      }
+    };
+    const renderChat = (chat) => {
+      currentChat = chat;
+      const nativeSlots = slots;
+      const targets = getLifecycleTargets(chat.messages);
+      const messages2 = chat.messages.flatMap((message) => presentChatMessage(message).map((presentation, index) => {
+        if (presentation.kind === "component") {
+          const manifest = props.definition.components;
+          const resolved = manifest === void 0 ? void 0 : resolveComponentFrame2(presentation.frame, manifest);
+          const rendered2 = resolved?.ok ? presentation.frame.componentKey === "choice-list" ? slot(nativeSlots, "choiceList", { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame) }, () => h2(ChoiceList, { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame) })) : slot(nativeSlots, "standardComponent", { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onInteract: interactComponent }, () => h2(StandardComponent, { frame: presentation.frame, manifest, disabled: resolvedInstances.value.has(presentation.frame.instanceId), onInteract: interactComponent })) : h2("p", { "data-ak-component-fallback": "" }, formatSemanticFallback(presentation.frame.fallback));
+          return h2(Fragment, { key: `${message.id}:${index}` }, [rendered2]);
+        }
+        const rendered = presentation.kind === "diagnostic" ? h2("p", { role: "alert", "data-ak-component-diagnostic": presentation.code }, presentation.message) : slot(nativeSlots, "message", { message: presentation.message }, () => h2(Message, { message: presentation.message }));
+        return h2(Fragment, { key: `${message.id}:${index}` }, [rendered]);
+      }));
+      const confirmations = chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => h2(Fragment, { key: toolCall.id }, [slot(nativeSlots, "confirmation", { toolCall, onApprove: approve, onDeny: deny }, () => h2(ToolConfirmation, { toolCall, onApprove: approve, onDeny: deny }))]));
+      const content = [...messages2, ...confirmations, slot(nativeSlots, "thinking", { visible: chat.status === "streaming" }, () => h2(ThinkingIndicator, { visible: chat.status === "streaming" }))];
+      const container = slot(nativeSlots, "container", { children: content }, () => h2(ChatRoot, {}, { default: () => content }));
+      const error = chat.error ?? actionError.value;
+      return h2("section", {
+        "aria-label": `${props.definition.id} chat`,
+        "data-ak-app-chat": "",
+        style: props.theme === void 0 ? void 0 : toChatCssVariables(props.theme)
+      }, [
+        h2("div", { "aria-live": "polite", "aria-relevant": "additions text", role: "log" }, [container]),
+        error ? h2("p", { role: "alert", style: { color: resolveChatTheme(props.theme).colors.danger } }, error.message) : null,
+        chat.status === "streaming" ? h2("button", { type: "button", onClick: chat.stop }, "Stop") : null,
+        chat.status !== "streaming" && targets.userId ? h2("div", { "aria-label": "Response actions" }, [
+          h2("button", { type: "button", "aria-label": "Retry response", onClick: () => runLifecycle(chat.retry()) }, "Retry"),
+          targets.assistantId ? h2("button", { type: "button", "aria-label": "Regenerate response", onClick: () => runLifecycle(chat.regenerate(targets.assistantId)) }, "Regenerate") : null,
+          h2("button", { type: "button", onClick: () => {
+            editDraft.value = { messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" };
+          } }, "Edit last message"),
+          editDraft.value === void 0 ? null : h2("form", { onSubmit: (event) => {
+            event.preventDefault();
+            if (!editDraft.value?.content.trim()) return;
+            runLifecycle(chat.edit(editDraft.value.messageId, editDraft.value.content));
+            editDraft.value = void 0;
+          } }, [
+            h2("label", ["Edit message", h2("input", { "aria-label": "Edit message", value: editDraft.value.content, onInput: (event) => {
+              editDraft.value = { ...editDraft.value, content: event.target.value };
+            } })]),
+            h2("button", { type: "submit", "aria-label": "Save edit" }, "Save edit"),
+            h2("button", { type: "button", onClick: () => {
+              editDraft.value = void 0;
+            } }, "Cancel edit")
+          ])
+        ]) : null,
+        slot(nativeSlots, "input", { chat, disabled: chat.status === "streaming", placeholder: props.placeholder }, () => h2(InputBar, { chat, disabled: chat.status === "streaming", ...props.placeholder === void 0 ? {} : { placeholder: props.placeholder } }))
+      ]);
+    };
+    return () => {
+      pendingChat = props.definition.chat;
+      if (activeChat !== pendingChat && status !== "streaming") {
+        activeChat = pendingChat;
+        bindingRevision.value += 1;
+      }
+      const config = session.updateChat({ ...activeChat, ...messages === void 0 ? {} : { initialMessages: messages } });
+      return h2(ChatBinding, {
+        key: bindingRevision.value,
+        config,
+        onState: (chat) => {
+          currentChat = chat;
+          messages = chat.messages;
+          status = chat.status;
+          if (activeChat !== pendingChat && status !== "streaming") {
+            activeChat = pendingChat;
+            bindingRevision.value += 1;
+          }
+        }
+      }, { default: ({ chat }) => renderChat(chat) });
+    };
+  }
+});
+var AgentChat = defineComponent2({
+  name: "AgentsKitChat",
+  props: agentChatProps,
+  slots: Object,
+  setup(props, { slots }) {
+    return () => h2(AgentChatSession, {
+      ...props,
+      key: `${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? "new"}`
+    }, slots);
+  }
+});
+export {
+  AgentChat,
+  ChoiceList,
+  StandardComponent,
+  toChatCssVariables
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@agentskit/chat-vue",
+  "version": "0.1.0",
+  "description": "Vue application shell for AgentsKit Chat.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgentsKit-io/agentskit-chat.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/AgentsKit-io/agentskit-chat#readme",
+  "bugs": {
+    "url": "https://github.com/AgentsKit-io/agentskit-chat/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@agentskit/chat": "0.1.0",
+    "@agentskit/chat-protocol": "0.1.0"
+  },
+  "peerDependencies": {
+    "@agentskit/vue": "^0.4.4",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@agentskit/core": "^1.12.2",
+    "@agentskit/vue": "^0.4.4",
+    "happy-dom": "^20.10.3",
+    "tsup": "^8.5.1",
+    "vue": "^3.5.38"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external vue --external @agentskit/vue",
+    "lint": "tsc --noEmit",
+    "test": "pnpm --filter @agentskit/chat build && vitest run --environment happy-dom --coverage"
+  }
+}