@agentskit/chat-react 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,13 @@
+# @agentskit/chat-react
+
+Accessible React application shell over `@agentskit/react`.
+
+```tsx
+<AgentChat definition={definition} placeholder="Ask a question" />
+```
+
+See the [React quick start](../../docs/getting-started/react.md).
+
+The package also exports the accessible native-web `ChoiceList` renderer.
+
+Use `theme` for semantic tokens and `slots` for native React composition. `toChatCssVariables` exposes the upstream CSS-variable mapping. See [theming and composition](../../docs/theming-and-composition.md).

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.tsx
+var index_exports = {};
+__export(index_exports, {
+  AgentChat: () => AgentChat,
+  ChoiceList: () => ChoiceList,
+  StandardComponent: () => StandardComponent,
+  toChatCssVariables: () => toChatCssVariables
+});
+module.exports = __toCommonJS(index_exports);
+var import_chat = require("@agentskit/chat");
+var import_chat_protocol = require("@agentskit/chat-protocol");
+var import_react = require("@agentskit/react");
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toChatCssVariables = (input) => {
+  const theme = (0, import_chat.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 coalesceTextParts = (parts) => {
+  const result = [];
+  for (const part of parts) {
+    const previous = result.at(-1);
+    if (part.kind === "text" && previous?.kind === "text") result[result.length - 1] = { kind: "text", text: previous.text + part.text };
+    else result.push(part);
+  }
+  return result;
+};
+var StandardForm = ({ frame, manifest, onInteract, disabled }) => {
+  const props = import_chat.FormPropsSchema.parse(frame.props);
+  const [values, setValues] = (0, import_react2.useState)({});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { "aria-label": props.title ?? "Form", "data-ak-component": "form", onSubmit: (event) => {
+    event.preventDefault();
+    onInteract((0, import_chat.createComponentInteraction)(frame, manifest, "submit", values));
+  }, children: [
+    props.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: props.title }) : null,
+    props.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+      field.label,
+      field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { required: field.required, disabled, value: String(values[field.id] ?? ""), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.value })), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Select" }),
+        field.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.id, children: option.label }, option.id))
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: field.type, required: field.required, disabled, placeholder: field.placeholder, ...field.type === "checkbox" ? { checked: Boolean(values[field.id]), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.checked })) } : { value: String(values[field.id] ?? ""), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.value })) } })
+    ] }, field.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled, children: props.submitLabel })
+  ] });
+};
+var StandardComponent = ({ frame, manifest, onInteract, disabled = false }) => {
+  if (!(0, import_chat.resolveComponentFrame)(frame, manifest).ok || frame.componentKey === "choice-list") return null;
+  const emit = (event, value) => onInteract((0, import_chat.createComponentInteraction)(frame, manifest, event, value));
+  switch (frame.componentKey) {
+    case "button-group": {
+      const props = import_chat.ButtonGroupPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { "aria-label": props.label, "data-ak-component": "button-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: props.label }),
+        props.buttons.map((button) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: disabled || button.disabled, onClick: () => emit("select", button.id), children: button.label }, button.id))
+      ] });
+    }
+    case "form":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandardForm, { frame, manifest, onInteract, disabled });
+    case "confirmation": {
+      const props = import_chat.ConfirmationPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-label": props.title, "data-ak-component": "confirmation", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled, onClick: () => emit("confirm"), children: props.confirmLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled, onClick: () => emit("cancel"), children: props.cancelLabel })
+      ] });
+    }
+    case "progress": {
+      const props = import_chat.ProgressPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ak-component": "progress", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+          props.label,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("progress", { max: 100, value: props.value })
+        ] }),
+        props.status ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.status }) : null
+      ] });
+    }
+    case "source-list": {
+      const props = import_chat.SourceListPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "data-ak-component": "source-list", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: props.sources.map((source) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+          source.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: source.url, onClick: (event) => {
+            event.preventDefault();
+            emit("open", source.id);
+          }, children: source.title }) : source.title,
+          source.snippet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: source.snippet }) : null
+        ] }, source.id)) })
+      ] });
+    }
+    case "link-card": {
+      const props = import_chat.LinkCardPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { "data-ak-component": "link-card", href: props.href, onClick: (event) => {
+        event.preventDefault();
+        emit("open", props.href);
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: props.title }),
+        props.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.description }) : null,
+        props.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.label }) : null
+      ] });
+    }
+    case "error-notice": {
+      const props = import_chat.ErrorNoticePropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { role: "alert", "data-ak-component": "error-notice", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.message }),
+        props.code ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: props.code }) : null,
+        props.retryLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled, onClick: () => emit("retry"), children: props.retryLabel }) : null
+      ] });
+    }
+    case "tool-call": {
+      const props = import_chat.ToolCallPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { role: "status", "data-ak-component": "tool-call", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: props.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.status }),
+        props.arguments ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(props.arguments, null, 2) }) : null,
+        props.result === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(props.result, null, 2) })
+      ] });
+    }
+    case "approval-request": {
+      const props = import_chat.ApprovalRequestPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-label": props.title, "data-ak-component": "approval-request", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled, onClick: () => emit("approve"), children: props.approveLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled, onClick: () => emit("deny"), children: props.denyLabel })
+      ] });
+    }
+    case "table": {
+      const props = import_chat.TablePropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { "data-ak-component": "table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { children: props.caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: props.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: column.label }, column.key)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: props.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: props.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: String(row[column.key] ?? "") }, column.key)) }, index)) })
+      ] });
+    }
+    case "file-attachment": {
+      const props = import_chat.FileAttachmentPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-ak-component": "file-attachment", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: props.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.mimeType }),
+        props.sizeBytes === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          props.sizeBytes,
+          " bytes"
+        ] }),
+        props.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: props.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", props.url);
+        }, children: "Open" }) : null
+      ] });
+    }
+    default:
+      return null;
+  }
+};
+var ChoiceList = ({ frame, manifest, onSelect, disabled = false }) => {
+  const resolved = (0, import_chat.resolveChoiceListFrame)(frame, manifest);
+  if (!resolved.ok) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { "aria-label": resolved.props.prompt, "data-ak-component": "choice-list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: resolved.props.prompt }),
+    resolved.props.choices.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", disabled, onClick: () => onSelect((0, import_chat.selectChoice)(resolved.frame, choice.id)), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: choice.label }),
+      choice.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: choice.description })
+    ] }, choice.id))
+  ] });
+};
+var AgentChatSession = ({ definition, placeholder, onComponentSelect = () => void 0, onComponentInteract = () => void 0, actionConfirmationTtlMs, session: preparedSession, theme: themeInput, slots = {} }) => {
+  const theme = (0, import_chat.resolveChatTheme)(themeInput);
+  const ContainerSlot = slots.Container ?? import_react.ChatContainer;
+  const MessageSlot = slots.Message ?? import_react.Message;
+  const InputSlot = slots.Input ?? import_react.InputBar;
+  const ThinkingSlot = slots.Thinking ?? import_react.ThinkingIndicator;
+  const ConfirmationSlot = slots.Confirmation ?? import_react.ToolConfirmation;
+  const ChoiceListSlot = slots.ChoiceList ?? ChoiceList;
+  const StandardComponentSlot = slots.StandardComponent ?? StandardComponent;
+  const [session] = (0, import_react2.useState)(() => (0, import_chat.resolveChatSession)(definition, preparedSession));
+  const sessionId = session.sessionId;
+  const [actionError, setActionError] = (0, import_react2.useState)();
+  const [editDraft, setEditDraft] = (0, import_react2.useState)();
+  const [resolvedInstances, setResolvedInstances] = (0, import_react2.useState)(() => /* @__PURE__ */ new Set());
+  const resolvedInstancesRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const config = (0, import_react2.useMemo)(() => session.updateChat(definition.chat), [definition.chat, session]);
+  const chat = (0, import_react.useChat)(config);
+  const chatRef = (0, import_react2.useRef)(chat);
+  chatRef.current = chat;
+  const [confirmation] = (0, import_react2.useState)(() => session.createConfirmation({ ...actionConfirmationTtlMs === void 0 ? {} : { ttlMs: actionConfirmationTtlMs }, chat: {
+    proposeToolCall: (proposal) => chatRef.current.proposeToolCall(proposal),
+    approve: (id) => chatRef.current.approve(id),
+    deny: (id, reason) => chatRef.current.deny(id, reason)
+  } }));
+  const selectComponent = (event, frame) => {
+    if (resolvedInstancesRef.current.has(event.instanceId)) return;
+    setActionError(void 0);
+    resolvedInstancesRef.current.add(event.instanceId);
+    setResolvedInstances(new Set(resolvedInstancesRef.current));
+    try {
+      onComponentSelect(event);
+    } catch (error) {
+      setActionError(error instanceof Error ? error : new Error("Component selection callback failed."));
+    }
+    const action = (0, import_chat.resolveChoiceAction)(frame, event.choiceId);
+    if (action) void confirmation.propose(action).catch((error) => {
+      resolvedInstancesRef.current.delete(event.instanceId);
+      setResolvedInstances(new Set(resolvedInstancesRef.current));
+      setActionError(error instanceof Error ? error : new Error("Action proposal failed."));
+    });
+    else {
+      let submission;
+      try {
+        submission = definition.choiceSubmission?.(frame, event.choiceId, { sessionId });
+      } catch (error) {
+        resolvedInstancesRef.current.delete(event.instanceId);
+        setResolvedInstances(new Set(resolvedInstancesRef.current));
+        setActionError(error instanceof Error ? error : new Error("Choice submission authorization failed."));
+        return;
+      }
+      if (submission && "unavailable" in submission) {
+        resolvedInstancesRef.current.delete(event.instanceId);
+        setResolvedInstances(new Set(resolvedInstancesRef.current));
+        setActionError(new Error("This deterministic choice expired. Select it again after asking the question once more."));
+        return;
+      }
+      if (submission) void chatRef.current.send(submission.value).then(
+        () => {
+          try {
+            submission.commit();
+          } catch (error) {
+            setActionError(error instanceof Error ? error : new Error("Choice submission settlement failed."));
+          }
+        },
+        (error) => {
+          try {
+            submission.release();
+          } catch {
+          } finally {
+            resolvedInstancesRef.current.delete(event.instanceId);
+            setResolvedInstances(new Set(resolvedInstancesRef.current));
+          }
+          setActionError(error instanceof Error ? error : new Error("Choice submission failed."));
+        }
+      );
+    }
+  };
+  const interactComponent = (event) => {
+    if (resolvedInstancesRef.current.has(event.instanceId)) return;
+    resolvedInstancesRef.current.add(event.instanceId);
+    setResolvedInstances(new Set(resolvedInstancesRef.current));
+    try {
+      onComponentInteract(event);
+    } catch (error) {
+      resolvedInstancesRef.current.delete(event.instanceId);
+      setResolvedInstances(new Set(resolvedInstancesRef.current));
+      setActionError(error instanceof Error ? error : new Error("Component interaction callback failed."));
+    }
+  };
+  const approve = (toolCallId) => {
+    const record = confirmation.getByToolCall(toolCallId);
+    void (record ? confirmation.approve(record.token, sessionId) : chat.approve(toolCallId)).catch((error) => setActionError(error instanceof Error ? error : new Error("Action approval failed.")));
+  };
+  const deny = (toolCallId, reason) => {
+    const record = confirmation.getByToolCall(toolCallId);
+    void (record ? confirmation.reject(record.token, sessionId, reason) : chat.deny(toolCallId, reason)).catch((error) => setActionError(error instanceof Error ? error : new Error("Action rejection failed.")));
+  };
+  const targets = (0, import_chat.getLifecycleTargets)(chat.messages);
+  const runLifecycle = (operation) => {
+    setActionError(void 0);
+    void operation.catch((error) => setActionError(error instanceof Error ? error : new Error("Lifecycle operation failed.")));
+  };
+  const renderFrame = (frame, key) => {
+    const manifest = definition.components;
+    const resolved = manifest === void 0 ? void 0 : (0, import_chat.resolveComponentFrame)(frame, manifest);
+    if (resolved?.ok && slots.StandardComponent === void 0 && !import_chat.STANDARD_COMPONENT_KEYS.includes(frame.componentKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "data-ak-component-fallback": "", children: (0, import_chat.formatSemanticFallback)(frame.fallback) }, key);
+    }
+    if (resolved?.ok) return frame.componentKey === "choice-list" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChoiceListSlot, { frame, manifest, disabled: resolvedInstances.has(frame.instanceId), onSelect: (event) => selectComponent(event, frame) }, key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandardComponentSlot, { frame, manifest, disabled: resolvedInstances.has(frame.instanceId), onInteract: interactComponent }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "data-ak-component-fallback": "", children: (0, import_chat.formatSemanticFallback)(frame.fallback) }, key);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-label": `${definition.id} chat`, "data-ak-app-chat": "", style: themeInput === void 0 ? void 0 : toChatCssVariables(theme), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", "aria-relevant": "additions text", role: "log", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContainerSlot, { children: [
+      chat.messages.map((message) => {
+        const contentCandidate = message.role === "assistant" && (0, import_chat_protocol.isAssistantContentCandidate)(message.content);
+        const content = contentCandidate ? (0, import_chat_protocol.decodeAssistantContent)(message.content) : void 0;
+        if (content?.ok) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ak-assistant-content": "", children: coalesceTextParts(content.parts).map((part, index) => part.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSlot, { message: { ...message, content: part.text } }, `${message.id}:text:${index}`) : renderFrame(part.frame, `${message.id}:component:${index}`)) }, message.id);
+        if (content && !content.ok) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", "data-ak-component-diagnostic": content.diagnostic.code, children: content.diagnostic.message }, message.id);
+        const candidate = message.role === "assistant" && (0, import_chat_protocol.isComponentFrameCandidate)(message.content);
+        const decoded = candidate ? (0, import_chat_protocol.decodeComponentFrame)(message.content) : void 0;
+        if (decoded?.ok) {
+          return renderFrame(decoded.frame, message.id);
+        }
+        if (decoded && !decoded.ok) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", "data-ak-component-diagnostic": decoded.diagnostic.code, children: decoded.diagnostic.message }, message.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSlot, { message }, message.id);
+      }),
+      chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmationSlot, { toolCall, onApprove: approve, onDeny: deny }, toolCall.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThinkingSlot, { visible: chat.status === "streaming" })
+    ] }) }),
+    chat.error || actionError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { color: theme.colors.danger }, children: chat.error?.message ?? actionError?.message }) : null,
+    chat.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: chat.stop, children: "Stop" }) : null,
+    chat.status !== "streaming" && targets.userId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-label": "Response actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": "Retry response", onClick: () => runLifecycle(chat.retry()), children: "Retry" }),
+      targets.assistantId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": "Regenerate response", onClick: () => runLifecycle(chat.regenerate(targets.assistantId)), children: "Regenerate" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setEditDraft({ messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" }), children: "Edit last message" }),
+      editDraft === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: (event) => {
+        event.preventDefault();
+        if (editDraft.content.trim() === "") return;
+        runLifecycle(chat.edit(editDraft.messageId, editDraft.content));
+        setEditDraft(void 0);
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+          "Edit message",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { "aria-label": "Edit message", value: editDraft.content, onChange: (event) => setEditDraft({ ...editDraft, content: event.target.value }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", "aria-label": "Save edit", children: "Save edit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setEditDraft(void 0), children: "Cancel edit" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      InputSlot,
+      {
+        chat,
+        disabled: chat.status === "streaming",
+        ...placeholder === void 0 ? {} : { placeholder }
+      }
+    )
+  ] });
+};
+var AgentChat = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AgentChatSession, { ...props }, `${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? "new"}`);
+// 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,46 @@
+import { ChatDefinition, ChatSession, ChatThemeInput, ComponentManifest } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentSelectionEvent, ComponentInteractionEvent, ComponentRenderFrame } from '@agentskit/chat-protocol';
+import { ChatContainer, Message, InputBar, ThinkingIndicator, ToolConfirmation } from '@agentskit/react';
+import { ComponentType, ComponentProps, ReactElement, CSSProperties } from 'react';
+
+type ChatCssVariables = CSSProperties & {
+    readonly [key: `--ak-${string}`]: string | number;
+};
+declare const toChatCssVariables: (input?: ChatThemeInput) => ChatCssVariables;
+interface AgentChatSlots {
+    readonly Container?: ComponentType<ComponentProps<typeof ChatContainer>>;
+    readonly Message?: ComponentType<ComponentProps<typeof Message>>;
+    readonly Input?: ComponentType<ComponentProps<typeof InputBar>>;
+    readonly Thinking?: ComponentType<ComponentProps<typeof ThinkingIndicator>>;
+    readonly Confirmation?: ComponentType<ComponentProps<typeof ToolConfirmation>>;
+    readonly ChoiceList?: ComponentType<ChoiceListProps>;
+    readonly StandardComponent?: ComponentType<StandardComponentProps>;
+}
+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;
+    readonly slots?: AgentChatSlots;
+}
+interface StandardComponentProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponent: ({ frame, manifest, onInteract, disabled }: StandardComponentProps) => ReactElement | null;
+interface ChoiceListProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const ChoiceList: ({ frame, manifest, onSelect, disabled }: ChoiceListProps) => ReactElement | null;
+declare const AgentChat: (props: AgentChatProps) => ReactElement;
+
+export { AgentChat, type AgentChatProps, type AgentChatSlots, type ChatCssVariables, ChoiceList, type ChoiceListProps, StandardComponent, type StandardComponentProps, toChatCssVariables };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { ChatDefinition, ChatSession, ChatThemeInput, ComponentManifest } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentSelectionEvent, ComponentInteractionEvent, ComponentRenderFrame } from '@agentskit/chat-protocol';
+import { ChatContainer, Message, InputBar, ThinkingIndicator, ToolConfirmation } from '@agentskit/react';
+import { ComponentType, ComponentProps, ReactElement, CSSProperties } from 'react';
+
+type ChatCssVariables = CSSProperties & {
+    readonly [key: `--ak-${string}`]: string | number;
+};
+declare const toChatCssVariables: (input?: ChatThemeInput) => ChatCssVariables;
+interface AgentChatSlots {
+    readonly Container?: ComponentType<ComponentProps<typeof ChatContainer>>;
+    readonly Message?: ComponentType<ComponentProps<typeof Message>>;
+    readonly Input?: ComponentType<ComponentProps<typeof InputBar>>;
+    readonly Thinking?: ComponentType<ComponentProps<typeof ThinkingIndicator>>;
+    readonly Confirmation?: ComponentType<ComponentProps<typeof ToolConfirmation>>;
+    readonly ChoiceList?: ComponentType<ChoiceListProps>;
+    readonly StandardComponent?: ComponentType<StandardComponentProps>;
+}
+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;
+    readonly slots?: AgentChatSlots;
+}
+interface StandardComponentProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponent: ({ frame, manifest, onInteract, disabled }: StandardComponentProps) => ReactElement | null;
+interface ChoiceListProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const ChoiceList: ({ frame, manifest, onSelect, disabled }: ChoiceListProps) => ReactElement | null;
+declare const AgentChat: (props: AgentChatProps) => ReactElement;
+
+export { AgentChat, type AgentChatProps, type AgentChatSlots, type ChatCssVariables, ChoiceList, type ChoiceListProps, StandardComponent, type StandardComponentProps, toChatCssVariables };

package/dist/index.js

@@ -0,0 +1,355 @@
+// src/index.tsx
+import { ApprovalRequestPropsSchema, ButtonGroupPropsSchema, ConfirmationPropsSchema, ErrorNoticePropsSchema, FileAttachmentPropsSchema, FormPropsSchema, LinkCardPropsSchema, ProgressPropsSchema, SourceListPropsSchema, STANDARD_COMPONENT_KEYS, TablePropsSchema, ToolCallPropsSchema, createComponentInteraction, formatSemanticFallback, getLifecycleTargets, resolveChatSession, resolveChatTheme, resolveChoiceAction, resolveChoiceListFrame, resolveComponentFrame, selectChoice } from "@agentskit/chat";
+import { decodeAssistantContent, decodeComponentFrame, isAssistantContentCandidate, isComponentFrameCandidate } from "@agentskit/chat-protocol";
+import {
+  ChatContainer,
+  InputBar,
+  Message,
+  ThinkingIndicator,
+  ToolConfirmation,
+  useChat
+} from "@agentskit/react";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 coalesceTextParts = (parts) => {
+  const result = [];
+  for (const part of parts) {
+    const previous = result.at(-1);
+    if (part.kind === "text" && previous?.kind === "text") result[result.length - 1] = { kind: "text", text: previous.text + part.text };
+    else result.push(part);
+  }
+  return result;
+};
+var StandardForm = ({ frame, manifest, onInteract, disabled }) => {
+  const props = FormPropsSchema.parse(frame.props);
+  const [values, setValues] = useState({});
+  return /* @__PURE__ */ jsxs("form", { "aria-label": props.title ?? "Form", "data-ak-component": "form", onSubmit: (event) => {
+    event.preventDefault();
+    onInteract(createComponentInteraction(frame, manifest, "submit", values));
+  }, children: [
+    props.title ? /* @__PURE__ */ jsx("h3", { children: props.title }) : null,
+    props.fields.map((field) => /* @__PURE__ */ jsxs("label", { children: [
+      field.label,
+      field.type === "select" ? /* @__PURE__ */ jsxs("select", { required: field.required, disabled, value: String(values[field.id] ?? ""), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.value })), children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
+        field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.label }, option.id))
+      ] }) : /* @__PURE__ */ jsx("input", { type: field.type, required: field.required, disabled, placeholder: field.placeholder, ...field.type === "checkbox" ? { checked: Boolean(values[field.id]), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.checked })) } : { value: String(values[field.id] ?? ""), onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.value })) } })
+    ] }, field.id)),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled, children: props.submitLabel })
+  ] });
+};
+var StandardComponent = ({ frame, manifest, onInteract, disabled = false }) => {
+  if (!resolveComponentFrame(frame, manifest).ok || frame.componentKey === "choice-list") return null;
+  const emit = (event, value) => onInteract(createComponentInteraction(frame, manifest, event, value));
+  switch (frame.componentKey) {
+    case "button-group": {
+      const props = ButtonGroupPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("fieldset", { "aria-label": props.label, "data-ak-component": "button-group", children: [
+        /* @__PURE__ */ jsx("legend", { children: props.label }),
+        props.buttons.map((button) => /* @__PURE__ */ jsx("button", { type: "button", disabled: disabled || button.disabled, onClick: () => emit("select", button.id), children: button.label }, button.id))
+      ] });
+    }
+    case "form":
+      return /* @__PURE__ */ jsx(StandardForm, { frame, manifest, onInteract, disabled });
+    case "confirmation": {
+      const props = ConfirmationPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("section", { "aria-label": props.title, "data-ak-component": "confirmation", children: [
+        /* @__PURE__ */ jsx("h3", { children: props.title }),
+        /* @__PURE__ */ jsx("p", { children: props.message }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick: () => emit("confirm"), children: props.confirmLabel }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick: () => emit("cancel"), children: props.cancelLabel })
+      ] });
+    }
+    case "progress": {
+      const props = ProgressPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("div", { "data-ak-component": "progress", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          props.label,
+          /* @__PURE__ */ jsx("progress", { max: 100, value: props.value })
+        ] }),
+        props.status ? /* @__PURE__ */ jsx("p", { children: props.status }) : null
+      ] });
+    }
+    case "source-list": {
+      const props = SourceListPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("section", { "data-ak-component": "source-list", children: [
+        /* @__PURE__ */ jsx("h3", { children: props.label }),
+        /* @__PURE__ */ jsx("ul", { children: props.sources.map((source) => /* @__PURE__ */ jsxs("li", { children: [
+          source.url ? /* @__PURE__ */ jsx("a", { href: source.url, onClick: (event) => {
+            event.preventDefault();
+            emit("open", source.id);
+          }, children: source.title }) : source.title,
+          source.snippet ? /* @__PURE__ */ jsx("p", { children: source.snippet }) : null
+        ] }, source.id)) })
+      ] });
+    }
+    case "link-card": {
+      const props = LinkCardPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("a", { "data-ak-component": "link-card", href: props.href, onClick: (event) => {
+        event.preventDefault();
+        emit("open", props.href);
+      }, children: [
+        /* @__PURE__ */ jsx("strong", { children: props.title }),
+        props.description ? /* @__PURE__ */ jsx("span", { children: props.description }) : null,
+        props.label ? /* @__PURE__ */ jsx("span", { children: props.label }) : null
+      ] });
+    }
+    case "error-notice": {
+      const props = ErrorNoticePropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("section", { role: "alert", "data-ak-component": "error-notice", children: [
+        /* @__PURE__ */ jsx("strong", { children: props.title }),
+        /* @__PURE__ */ jsx("p", { children: props.message }),
+        props.code ? /* @__PURE__ */ jsx("code", { children: props.code }) : null,
+        props.retryLabel ? /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick: () => emit("retry"), children: props.retryLabel }) : null
+      ] });
+    }
+    case "tool-call": {
+      const props = ToolCallPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("section", { role: "status", "data-ak-component": "tool-call", children: [
+        /* @__PURE__ */ jsx("strong", { children: props.name }),
+        /* @__PURE__ */ jsx("span", { children: props.status }),
+        props.arguments ? /* @__PURE__ */ jsx("pre", { children: JSON.stringify(props.arguments, null, 2) }) : null,
+        props.result === void 0 ? null : /* @__PURE__ */ jsx("pre", { children: JSON.stringify(props.result, null, 2) })
+      ] });
+    }
+    case "approval-request": {
+      const props = ApprovalRequestPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("section", { "aria-label": props.title, "data-ak-component": "approval-request", children: [
+        /* @__PURE__ */ jsx("h3", { children: props.title }),
+        /* @__PURE__ */ jsx("p", { children: props.description }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick: () => emit("approve"), children: props.approveLabel }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick: () => emit("deny"), children: props.denyLabel })
+      ] });
+    }
+    case "table": {
+      const props = TablePropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("table", { "data-ak-component": "table", children: [
+        /* @__PURE__ */ jsx("caption", { children: props.caption }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: props.columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column.label }, column.key)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: props.rows.map((row, index) => /* @__PURE__ */ jsx("tr", { children: props.columns.map((column) => /* @__PURE__ */ jsx("td", { children: String(row[column.key] ?? "") }, column.key)) }, index)) })
+      ] });
+    }
+    case "file-attachment": {
+      const props = FileAttachmentPropsSchema.parse(frame.props);
+      return /* @__PURE__ */ jsxs("article", { "data-ak-component": "file-attachment", children: [
+        /* @__PURE__ */ jsx("strong", { children: props.name }),
+        /* @__PURE__ */ jsx("span", { children: props.mimeType }),
+        props.sizeBytes === void 0 ? null : /* @__PURE__ */ jsxs("span", { children: [
+          props.sizeBytes,
+          " bytes"
+        ] }),
+        props.url ? /* @__PURE__ */ jsx("a", { href: props.url, onClick: (event) => {
+          event.preventDefault();
+          emit("open", props.url);
+        }, children: "Open" }) : null
+      ] });
+    }
+    default:
+      return null;
+  }
+};
+var ChoiceList = ({ frame, manifest, onSelect, disabled = false }) => {
+  const resolved = resolveChoiceListFrame(frame, manifest);
+  if (!resolved.ok) return null;
+  return /* @__PURE__ */ jsxs("fieldset", { "aria-label": resolved.props.prompt, "data-ak-component": "choice-list", children: [
+    /* @__PURE__ */ jsx("legend", { children: resolved.props.prompt }),
+    resolved.props.choices.map((choice) => /* @__PURE__ */ jsxs("button", { type: "button", disabled, onClick: () => onSelect(selectChoice(resolved.frame, choice.id)), children: [
+      /* @__PURE__ */ jsx("span", { children: choice.label }),
+      choice.description === void 0 ? null : /* @__PURE__ */ jsx("small", { children: choice.description })
+    ] }, choice.id))
+  ] });
+};
+var AgentChatSession = ({ definition, placeholder, onComponentSelect = () => void 0, onComponentInteract = () => void 0, actionConfirmationTtlMs, session: preparedSession, theme: themeInput, slots = {} }) => {
+  const theme = resolveChatTheme(themeInput);
+  const ContainerSlot = slots.Container ?? ChatContainer;
+  const MessageSlot = slots.Message ?? Message;
+  const InputSlot = slots.Input ?? InputBar;
+  const ThinkingSlot = slots.Thinking ?? ThinkingIndicator;
+  const ConfirmationSlot = slots.Confirmation ?? ToolConfirmation;
+  const ChoiceListSlot = slots.ChoiceList ?? ChoiceList;
+  const StandardComponentSlot = slots.StandardComponent ?? StandardComponent;
+  const [session] = useState(() => resolveChatSession(definition, preparedSession));
+  const sessionId = session.sessionId;
+  const [actionError, setActionError] = useState();
+  const [editDraft, setEditDraft] = useState();
+  const [resolvedInstances, setResolvedInstances] = useState(() => /* @__PURE__ */ new Set());
+  const resolvedInstancesRef = useRef(/* @__PURE__ */ new Set());
+  const config = useMemo(() => session.updateChat(definition.chat), [definition.chat, session]);
+  const chat = useChat(config);
+  const chatRef = useRef(chat);
+  chatRef.current = chat;
+  const [confirmation] = useState(() => session.createConfirmation({ ...actionConfirmationTtlMs === void 0 ? {} : { ttlMs: actionConfirmationTtlMs }, chat: {
+    proposeToolCall: (proposal) => chatRef.current.proposeToolCall(proposal),
+    approve: (id) => chatRef.current.approve(id),
+    deny: (id, reason) => chatRef.current.deny(id, reason)
+  } }));
+  const selectComponent = (event, frame) => {
+    if (resolvedInstancesRef.current.has(event.instanceId)) return;
+    setActionError(void 0);
+    resolvedInstancesRef.current.add(event.instanceId);
+    setResolvedInstances(new Set(resolvedInstancesRef.current));
+    try {
+      onComponentSelect(event);
+    } catch (error) {
+      setActionError(error instanceof Error ? error : new Error("Component selection callback failed."));
+    }
+    const action = resolveChoiceAction(frame, event.choiceId);
+    if (action) void confirmation.propose(action).catch((error) => {
+      resolvedInstancesRef.current.delete(event.instanceId);
+      setResolvedInstances(new Set(resolvedInstancesRef.current));
+      setActionError(error instanceof Error ? error : new Error("Action proposal failed."));
+    });
+    else {
+      let submission;
+      try {
+        submission = definition.choiceSubmission?.(frame, event.choiceId, { sessionId });
+      } catch (error) {
+        resolvedInstancesRef.current.delete(event.instanceId);
+        setResolvedInstances(new Set(resolvedInstancesRef.current));
+        setActionError(error instanceof Error ? error : new Error("Choice submission authorization failed."));
+        return;
+      }
+      if (submission && "unavailable" in submission) {
+        resolvedInstancesRef.current.delete(event.instanceId);
+        setResolvedInstances(new Set(resolvedInstancesRef.current));
+        setActionError(new Error("This deterministic choice expired. Select it again after asking the question once more."));
+        return;
+      }
+      if (submission) void chatRef.current.send(submission.value).then(
+        () => {
+          try {
+            submission.commit();
+          } catch (error) {
+            setActionError(error instanceof Error ? error : new Error("Choice submission settlement failed."));
+          }
+        },
+        (error) => {
+          try {
+            submission.release();
+          } catch {
+          } finally {
+            resolvedInstancesRef.current.delete(event.instanceId);
+            setResolvedInstances(new Set(resolvedInstancesRef.current));
+          }
+          setActionError(error instanceof Error ? error : new Error("Choice submission failed."));
+        }
+      );
+    }
+  };
+  const interactComponent = (event) => {
+    if (resolvedInstancesRef.current.has(event.instanceId)) return;
+    resolvedInstancesRef.current.add(event.instanceId);
+    setResolvedInstances(new Set(resolvedInstancesRef.current));
+    try {
+      onComponentInteract(event);
+    } catch (error) {
+      resolvedInstancesRef.current.delete(event.instanceId);
+      setResolvedInstances(new Set(resolvedInstancesRef.current));
+      setActionError(error instanceof Error ? error : new Error("Component interaction callback failed."));
+    }
+  };
+  const approve = (toolCallId) => {
+    const record = confirmation.getByToolCall(toolCallId);
+    void (record ? confirmation.approve(record.token, sessionId) : chat.approve(toolCallId)).catch((error) => setActionError(error instanceof Error ? error : new Error("Action approval failed.")));
+  };
+  const deny = (toolCallId, reason) => {
+    const record = confirmation.getByToolCall(toolCallId);
+    void (record ? confirmation.reject(record.token, sessionId, reason) : chat.deny(toolCallId, reason)).catch((error) => setActionError(error instanceof Error ? error : new Error("Action rejection failed.")));
+  };
+  const targets = getLifecycleTargets(chat.messages);
+  const runLifecycle = (operation) => {
+    setActionError(void 0);
+    void operation.catch((error) => setActionError(error instanceof Error ? error : new Error("Lifecycle operation failed.")));
+  };
+  const renderFrame = (frame, key) => {
+    const manifest = definition.components;
+    const resolved = manifest === void 0 ? void 0 : resolveComponentFrame(frame, manifest);
+    if (resolved?.ok && slots.StandardComponent === void 0 && !STANDARD_COMPONENT_KEYS.includes(frame.componentKey)) {
+      return /* @__PURE__ */ jsx("p", { "data-ak-component-fallback": "", children: formatSemanticFallback(frame.fallback) }, key);
+    }
+    if (resolved?.ok) return frame.componentKey === "choice-list" ? /* @__PURE__ */ jsx(ChoiceListSlot, { frame, manifest, disabled: resolvedInstances.has(frame.instanceId), onSelect: (event) => selectComponent(event, frame) }, key) : /* @__PURE__ */ jsx(StandardComponentSlot, { frame, manifest, disabled: resolvedInstances.has(frame.instanceId), onInteract: interactComponent }, key);
+    return /* @__PURE__ */ jsx("p", { "data-ak-component-fallback": "", children: formatSemanticFallback(frame.fallback) }, key);
+  };
+  return /* @__PURE__ */ jsxs("section", { "aria-label": `${definition.id} chat`, "data-ak-app-chat": "", style: themeInput === void 0 ? void 0 : toChatCssVariables(theme), children: [
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-relevant": "additions text", role: "log", children: /* @__PURE__ */ jsxs(ContainerSlot, { children: [
+      chat.messages.map((message) => {
+        const contentCandidate = message.role === "assistant" && isAssistantContentCandidate(message.content);
+        const content = contentCandidate ? decodeAssistantContent(message.content) : void 0;
+        if (content?.ok) return /* @__PURE__ */ jsx("div", { "data-ak-assistant-content": "", children: coalesceTextParts(content.parts).map((part, index) => part.kind === "text" ? /* @__PURE__ */ jsx(MessageSlot, { message: { ...message, content: part.text } }, `${message.id}:text:${index}`) : renderFrame(part.frame, `${message.id}:component:${index}`)) }, message.id);
+        if (content && !content.ok) return /* @__PURE__ */ jsx("p", { role: "alert", "data-ak-component-diagnostic": content.diagnostic.code, children: content.diagnostic.message }, message.id);
+        const candidate = message.role === "assistant" && isComponentFrameCandidate(message.content);
+        const decoded = candidate ? decodeComponentFrame(message.content) : void 0;
+        if (decoded?.ok) {
+          return renderFrame(decoded.frame, message.id);
+        }
+        if (decoded && !decoded.ok) return /* @__PURE__ */ jsx("p", { role: "alert", "data-ak-component-diagnostic": decoded.diagnostic.code, children: decoded.diagnostic.message }, message.id);
+        return /* @__PURE__ */ jsx(MessageSlot, { message }, message.id);
+      }),
+      chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => /* @__PURE__ */ jsx(ConfirmationSlot, { toolCall, onApprove: approve, onDeny: deny }, toolCall.id)),
+      /* @__PURE__ */ jsx(ThinkingSlot, { visible: chat.status === "streaming" })
+    ] }) }),
+    chat.error || actionError ? /* @__PURE__ */ jsx("p", { role: "alert", style: { color: theme.colors.danger }, children: chat.error?.message ?? actionError?.message }) : null,
+    chat.status === "streaming" ? /* @__PURE__ */ jsx("button", { type: "button", onClick: chat.stop, children: "Stop" }) : null,
+    chat.status !== "streaming" && targets.userId ? /* @__PURE__ */ jsxs("div", { "aria-label": "Response actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Retry response", onClick: () => runLifecycle(chat.retry()), children: "Retry" }),
+      targets.assistantId ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Regenerate response", onClick: () => runLifecycle(chat.regenerate(targets.assistantId)), children: "Regenerate" }) : null,
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setEditDraft({ messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" }), children: "Edit last message" }),
+      editDraft === void 0 ? null : /* @__PURE__ */ jsxs("form", { onSubmit: (event) => {
+        event.preventDefault();
+        if (editDraft.content.trim() === "") return;
+        runLifecycle(chat.edit(editDraft.messageId, editDraft.content));
+        setEditDraft(void 0);
+      }, children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Edit message",
+          /* @__PURE__ */ jsx("input", { "aria-label": "Edit message", value: editDraft.content, onChange: (event) => setEditDraft({ ...editDraft, content: event.target.value }) })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "submit", "aria-label": "Save edit", children: "Save edit" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setEditDraft(void 0), children: "Cancel edit" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      InputSlot,
+      {
+        chat,
+        disabled: chat.status === "streaming",
+        ...placeholder === void 0 ? {} : { placeholder }
+      }
+    )
+  ] });
+};
+var AgentChat = (props) => /* @__PURE__ */ jsx(AgentChatSession, { ...props }, `${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? "new"}`);
+export {
+  AgentChat,
+  ChoiceList,
+  StandardComponent,
+  toChatCssVariables
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@agentskit/chat-react",
+  "version": "0.1.0",
+  "description": "React application shell for AgentsKit Chat.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgentsKit-io/agentskit-chat.git",
+    "directory": "packages/react"
+  },
+  "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/react": "^0.7.1",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@agentskit/core": "^1.12.2",
+    "@agentskit/react": "^0.7.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "happy-dom": "^20.10.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.5.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external @agentskit/react",
+    "lint": "tsc --noEmit",
+    "test": "pnpm --filter @agentskit/chat-protocol build && pnpm --filter @agentskit/chat build && vitest run --environment happy-dom"
+  }
+}