@agentskit/chat-react-native 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,8 @@
+# @agentskit/chat-react-native
+
+React Native application shell for an AgentsKit Chat definition. It delegates chat state,
+streaming, cancellation, and native headless components to `@agentskit/react-native`.
+
+`ChoiceListNative` renders a validated shared frame with native accessibility roles and labels.
+
+Use `theme` for semantic tokens and `slots` for native React Native composition. `toChatNativeStyles` exposes the capability-aware style mapping. See [theming and composition](../../docs/theming-and-composition.md).

package/dist/index.cjs

@@ -0,0 +1,365 @@
+"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, {
+  AgentChatNative: () => AgentChatNative,
+  ChoiceListNative: () => ChoiceListNative,
+  StandardComponentNative: () => StandardComponentNative,
+  toChatNativeStyles: () => toChatNativeStyles
+});
+module.exports = __toCommonJS(index_exports);
+var import_chat2 = require("@agentskit/chat");
+var import_react_native2 = require("@agentskit/react-native");
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+
+// src/StandardComponent.tsx
+var import_chat = require("@agentskit/chat");
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = ({ label, onPress, disabled = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: label }) });
+var StandardFormNative = (props) => {
+  const item = import_chat.FormPropsSchema.parse(props.frame.props);
+  const [values, setValues] = (0, import_react.useState)({});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "none", accessibilityLabel: item.title ?? "Form", testID: "ak-form", children: [
+    item.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { accessibilityRole: "header", children: item.title }) : null,
+    item.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: field.label }),
+      field.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: `${field.label}: ${values[field.id] ? "checked" : "unchecked"}`, disabled: props.disabled, onPress: () => setValues((current) => ({ ...current, [field.id]: !current[field.id] })) }) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { accessibilityRole: "radiogroup", accessibilityLabel: field.label, children: field.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { accessibilityRole: "radio", accessibilityState: { checked: values[field.id] === option.id }, disabled: props.disabled, onPress: () => setValues((current) => ({ ...current, [field.id]: option.id })), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.Text, { children: [
+        values[field.id] === option.id ? "\u25CF" : "\u25CB",
+        " ",
+        option.label
+      ] }) }, option.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.TextInput, { accessibilityLabel: field.label, editable: !props.disabled, placeholder: field.placeholder, inputMode: field.type === "email" ? "email" : field.type === "number" ? "numeric" : "text", value: String(values[field.id] ?? ""), onChangeText: (value) => setValues((current) => ({ ...current, [field.id]: value })) })
+    ] }, field.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.submitLabel, disabled: props.disabled || !(0, import_chat.validateStandardComponentInteraction)("form", item, "submit", values), onPress: () => props.onInteract((0, import_chat.createComponentInteraction)(props.frame, props.manifest, "submit", values)) })
+  ] });
+};
+var StandardComponentNative = (props) => {
+  if (!(0, import_chat.resolveComponentFrame)(props.frame, props.manifest).ok || props.frame.componentKey === "choice-list") return null;
+  const emit = (event, value) => props.onInteract((0, import_chat.createComponentInteraction)(props.frame, props.manifest, event, value));
+  const key = props.frame.componentKey;
+  if (key === "button-group") {
+    const item = import_chat.ButtonGroupPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "none", accessibilityLabel: item.label, testID: "ak-button-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.label }),
+      item.buttons.map((button) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: button.label, disabled: props.disabled || button.disabled, onPress: () => emit("select", button.id) }, button.id))
+    ] });
+  }
+  if (key === "form") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandardFormNative, { ...props });
+  if (key === "confirmation") {
+    const item = import_chat.ConfirmationPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityLabel: item.title, testID: "ak-confirmation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.confirmLabel, disabled: props.disabled, onPress: () => emit("confirm") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.cancelLabel, disabled: props.disabled, onPress: () => emit("cancel") })
+    ] });
+  }
+  if (key === "progress") {
+    const item = import_chat.ProgressPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "progressbar", accessibilityLabel: item.label, accessibilityValue: { min: 0, max: 100, now: item.value }, testID: "ak-progress", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.Text, { children: [
+        item.label,
+        ": ",
+        item.value,
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.status })
+    ] });
+  }
+  if (key === "source-list") {
+    const item = import_chat.SourceListPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "list", accessibilityLabel: item.label, testID: "ak-source-list", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.label }),
+      item.sources.map((source) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: source.title, disabled: !source.url || props.disabled, onPress: () => emit("open", source.id) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: source.snippet })
+      ] }, source.id))
+    ] });
+  }
+  if (key === "link-card") {
+    const item = import_chat.LinkCardPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.Pressable, { accessibilityRole: "link", accessibilityLabel: item.label ?? item.title, disabled: props.disabled, onPress: () => emit("open", item.href), testID: "ak-link-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.description })
+    ] });
+  }
+  if (key === "error-notice") {
+    const item = import_chat.ErrorNoticePropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "alert", testID: "ak-error-notice", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.code }),
+      item.retryLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.retryLabel, disabled: props.disabled, onPress: () => emit("retry") }) : null
+    ] });
+  }
+  if (key === "tool-call") {
+    const item = import_chat.ToolCallPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "summary", accessibilityLabel: `${item.name}: ${item.status}`, testID: "ak-tool-call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.status }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.arguments ? JSON.stringify(item.arguments) : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.result === void 0 ? "" : JSON.stringify(item.result) })
+    ] });
+  }
+  if (key === "approval-request") {
+    const item = import_chat.ApprovalRequestPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityLabel: item.title, testID: "ak-approval-request", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.approveLabel, disabled: props.disabled, onPress: () => emit("approve") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: item.denyLabel, disabled: props.disabled, onPress: () => emit("deny") })
+    ] });
+  }
+  if (key === "table") {
+    const item = import_chat.TablePropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityRole: "summary", accessibilityLabel: item.caption, testID: "ak-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.columns.map((column) => column.label).join(" | ") }),
+      item.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.columns.map((column) => String(row[column.key] ?? "")).join(" | ") }, index))
+    ] });
+  }
+  if (key === "file-attachment") {
+    const item = import_chat.FileAttachmentPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessibilityLabel: `${item.name}, ${item.mimeType}`, testID: "ak-file-attachment", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.mimeType }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: item.sizeBytes === void 0 ? "" : `${item.sizeBytes} bytes` }),
+      item.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { label: "Open", disabled: props.disabled, onPress: () => emit("open", item.url) }) : null
+    ] });
+  }
+  return null;
+};
+
+// src/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var toChatNativeStyles = (input) => {
+  const theme = (0, import_chat2.resolveChatTheme)(input);
+  const font = theme.fontFamily === "system" ? {} : { fontFamily: theme.fontFamily };
+  return {
+    root: { flex: 1, backgroundColor: theme.colors.background, padding: theme.spacing.large },
+    container: { backgroundColor: theme.colors.background },
+    userMessage: { alignSelf: "flex-end", backgroundColor: theme.colors.accent, borderRadius: theme.radius.large, padding: theme.spacing.medium },
+    userMessageText: { color: theme.colors.onAccent, ...font },
+    assistantMessage: { alignSelf: "flex-start", backgroundColor: theme.colors.surface, borderRadius: theme.radius.large, padding: theme.spacing.medium },
+    assistantMessageText: { color: theme.colors.text, ...font },
+    choiceList: { gap: theme.spacing.small, padding: theme.spacing.medium },
+    choice: { borderColor: theme.colors.border, borderRadius: theme.radius.medium, borderWidth: 1, padding: theme.spacing.medium },
+    choiceText: { color: theme.colors.text, ...font },
+    mutedText: { color: theme.colors.muted, ...font },
+    input: { backgroundColor: theme.colors.surface, borderColor: theme.colors.border, borderTopWidth: 1, padding: theme.spacing.medium },
+    inputText: { color: theme.colors.text, ...font },
+    dangerText: { color: theme.colors.danger, ...font }
+  };
+};
+var ChoiceListNative = ({ frame, manifest, onSelect, disabled = false, styles = toChatNativeStyles() }) => {
+  const resolved = (0, import_chat2.resolveChoiceListFrame)(frame, manifest);
+  if (!resolved.ok) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { testID: "ak-choice-list", style: styles.choiceList, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: resolved.props.prompt }),
+    resolved.props.choices.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native3.Pressable,
+      {
+        accessibilityRole: "button",
+        disabled,
+        accessibilityLabel: choice.description === void 0 ? choice.label : `${choice.label}. ${choice.description}`,
+        onPress: () => onSelect((0, import_chat2.selectChoice)(resolved.frame, choice.id)),
+        testID: `ak-choice-${choice.id}`,
+        style: styles.choice,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: choice.label }),
+          choice.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.mutedText, children: choice.description })
+        ]
+      },
+      choice.id
+    ))
+  ] });
+};
+var AgentChatNativeSession = ({ definition, placeholder, onComponentSelect = () => void 0, onComponentInteract = () => void 0, actionConfirmationTtlMs, session: preparedSession, theme, slots = {} }) => {
+  const styles = toChatNativeStyles(theme);
+  const ContainerSlot = slots.Container ?? import_react_native2.ChatContainer;
+  const MessageSlot = slots.Message ?? import_react_native2.Message;
+  const InputSlot = slots.Input ?? import_react_native2.InputBar;
+  const ThinkingSlot = slots.Thinking ?? import_react_native2.ThinkingIndicator;
+  const ConfirmationSlot = slots.Confirmation ?? import_react_native2.ToolConfirmation;
+  const ChoiceListSlot = slots.ChoiceList ?? ChoiceListNative;
+  const StandardComponentSlot = slots.StandardComponent ?? StandardComponentNative;
+  const [session] = (0, import_react2.useState)(() => (0, import_chat2.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_native2.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;
+    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_chat2.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. Ask the question again."));
+        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_chat2.getLifecycleTargets)(chat.messages);
+  const runLifecycle = (operation) => {
+    setActionError(void 0);
+    void operation.catch((error) => setActionError(error instanceof Error ? error : new Error("Lifecycle operation failed.")));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { testID: "ak-app-chat", accessibilityLabel: `${definition.id} chat`, style: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { accessibilityLiveRegion: "polite", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ContainerSlot, { style: styles.container, children: [
+      chat.messages.flatMap((message) => (0, import_chat2.presentChatMessage)(message).map((presentation, index) => {
+        const key = `${message.id}:${index}`;
+        if (presentation.kind === "component") {
+          const manifest = definition.components;
+          const resolved = manifest === void 0 ? void 0 : (0, import_chat2.resolveComponentFrame)(presentation.frame, manifest);
+          if (resolved?.ok && slots.StandardComponent === void 0 && !import_chat2.STANDARD_COMPONENT_KEYS.includes(presentation.frame.componentKey)) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { children: (0, import_chat2.formatSemanticFallback)(presentation.frame.fallback) }, key);
+          if (resolved?.ok) return presentation.frame.componentKey === "choice-list" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChoiceListSlot, { frame: presentation.frame, manifest, disabled: resolvedInstances.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame), styles }, key) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StandardComponentSlot, { frame: presentation.frame, manifest, disabled: resolvedInstances.has(presentation.frame.instanceId), onInteract: interactComponent }, key);
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.assistantMessageText, children: (0, import_chat2.formatSemanticFallback)(presentation.frame.fallback) }, key);
+        }
+        if (presentation.kind === "diagnostic") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { accessibilityRole: "alert", style: styles.dangerText, children: presentation.message }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          MessageSlot,
+          {
+            message: presentation.message,
+            style: presentation.message.role === "user" ? styles.userMessage : styles.assistantMessage,
+            contentStyle: presentation.message.role === "user" ? styles.userMessageText : styles.assistantMessageText
+          },
+          key
+        );
+      })),
+      chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfirmationSlot, { toolCall, onApprove: approve, onDeny: deny }, toolCall.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThinkingSlot, { visible: chat.status === "streaming" })
+    ] }) }),
+    chat.error || actionError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { accessibilityRole: "alert", style: styles.dangerText, children: chat.error?.message ?? actionError?.message }) : null,
+    chat.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native3.Pressable,
+      {
+        testID: "ak-stop",
+        accessibilityRole: "button",
+        accessibilityLabel: "Stop response",
+        onPress: chat.stop,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: "Stop" })
+      }
+    ) : null,
+    chat.status !== "streaming" && targets.userId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { accessibilityLabel: "Response actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Pressable, { accessibilityRole: "button", accessibilityLabel: "Retry response", testID: "ak-retry", onPress: () => runLifecycle(chat.retry()), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: "Retry" }) }),
+      targets.assistantId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Pressable, { accessibilityRole: "button", accessibilityLabel: "Regenerate response", testID: "ak-regenerate", onPress: () => runLifecycle(chat.regenerate(targets.assistantId)), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: "Regenerate" }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Pressable, { accessibilityRole: "button", accessibilityLabel: "Edit last message", testID: "ak-edit", onPress: () => setEditDraft({ messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: "Edit" }) }),
+      editDraft === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.TextInput, { accessibilityLabel: "Edit message", testID: "ak-edit-input", value: editDraft.content, style: styles.inputText, onChangeText: (content) => setEditDraft({ ...editDraft, content }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Pressable, { accessibilityRole: "button", accessibilityLabel: "Save edit", testID: "ak-edit-save", disabled: editDraft.content.trim() === "", onPress: () => {
+          runLifecycle(chat.edit(editDraft.messageId, editDraft.content));
+          setEditDraft(void 0);
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.choiceText, children: "Save" }) })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      InputSlot,
+      {
+        chat,
+        disabled: chat.status === "streaming",
+        style: styles.input,
+        inputStyle: styles.inputText,
+        ...placeholder === void 0 ? {} : { placeholder }
+      }
+    )
+  ] });
+};
+var AgentChatNative = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AgentChatNativeSession, { ...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 = {
+  AgentChatNative,
+  ChoiceListNative,
+  StandardComponentNative,
+  toChatNativeStyles
+});

package/dist/index.d.cts

@@ -0,0 +1,63 @@
+import { ComponentManifest, ChatDefinition, ChatSession, ChatThemeInput } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentRenderFrame, ComponentInteractionEvent, ComponentSelectionEvent } from '@agentskit/chat-protocol';
+import { ChatContainer, Message, InputBar, ThinkingIndicator, ToolConfirmation } from '@agentskit/react-native';
+import { ReactElement, ComponentType, ComponentProps } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+interface StandardComponentNativeProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponentNative: (props: StandardComponentNativeProps) => ReactElement | null;
+
+type NativeViewStyle = ViewStyle & Readonly<Record<string, unknown>>;
+type NativeTextStyle = TextStyle & Readonly<Record<string, unknown>>;
+interface ChatNativeStyles {
+    readonly root: NativeViewStyle;
+    readonly container: NativeViewStyle;
+    readonly userMessage: NativeViewStyle;
+    readonly userMessageText: NativeTextStyle;
+    readonly assistantMessage: NativeViewStyle;
+    readonly assistantMessageText: NativeTextStyle;
+    readonly choiceList: NativeViewStyle;
+    readonly choice: NativeViewStyle;
+    readonly choiceText: NativeTextStyle;
+    readonly mutedText: NativeTextStyle;
+    readonly input: NativeViewStyle;
+    readonly inputText: NativeTextStyle;
+    readonly dangerText: NativeTextStyle;
+}
+declare const toChatNativeStyles: (input?: ChatThemeInput) => ChatNativeStyles;
+interface AgentChatNativeSlots {
+    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<ChoiceListNativeProps>;
+    readonly StandardComponent?: ComponentType<StandardComponentNativeProps>;
+}
+interface AgentChatNativeProps {
+    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?: AgentChatNativeSlots;
+}
+interface ChoiceListNativeProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+    readonly styles?: ChatNativeStyles;
+}
+declare const ChoiceListNative: ({ frame, manifest, onSelect, disabled, styles }: ChoiceListNativeProps) => ReactElement | null;
+declare const AgentChatNative: (props: AgentChatNativeProps) => ReactElement;
+
+export { AgentChatNative, type AgentChatNativeProps, type AgentChatNativeSlots, type ChatNativeStyles, ChoiceListNative, type ChoiceListNativeProps, StandardComponentNative, type StandardComponentNativeProps, toChatNativeStyles };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import { ComponentManifest, ChatDefinition, ChatSession, ChatThemeInput } from '@agentskit/chat';
+export { ChatDefinition } from '@agentskit/chat';
+import { ComponentRenderFrame, ComponentInteractionEvent, ComponentSelectionEvent } from '@agentskit/chat-protocol';
+import { ChatContainer, Message, InputBar, ThinkingIndicator, ToolConfirmation } from '@agentskit/react-native';
+import { ReactElement, ComponentType, ComponentProps } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+interface StandardComponentNativeProps {
+    readonly frame: ComponentRenderFrame;
+    readonly manifest: ComponentManifest;
+    readonly onInteract: (event: ComponentInteractionEvent) => void;
+    readonly disabled?: boolean;
+}
+declare const StandardComponentNative: (props: StandardComponentNativeProps) => ReactElement | null;
+
+type NativeViewStyle = ViewStyle & Readonly<Record<string, unknown>>;
+type NativeTextStyle = TextStyle & Readonly<Record<string, unknown>>;
+interface ChatNativeStyles {
+    readonly root: NativeViewStyle;
+    readonly container: NativeViewStyle;
+    readonly userMessage: NativeViewStyle;
+    readonly userMessageText: NativeTextStyle;
+    readonly assistantMessage: NativeViewStyle;
+    readonly assistantMessageText: NativeTextStyle;
+    readonly choiceList: NativeViewStyle;
+    readonly choice: NativeViewStyle;
+    readonly choiceText: NativeTextStyle;
+    readonly mutedText: NativeTextStyle;
+    readonly input: NativeViewStyle;
+    readonly inputText: NativeTextStyle;
+    readonly dangerText: NativeTextStyle;
+}
+declare const toChatNativeStyles: (input?: ChatThemeInput) => ChatNativeStyles;
+interface AgentChatNativeSlots {
+    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<ChoiceListNativeProps>;
+    readonly StandardComponent?: ComponentType<StandardComponentNativeProps>;
+}
+interface AgentChatNativeProps {
+    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?: AgentChatNativeSlots;
+}
+interface ChoiceListNativeProps {
+    readonly frame: unknown;
+    readonly manifest: ComponentManifest;
+    readonly onSelect: (event: ComponentSelectionEvent) => void;
+    readonly disabled?: boolean;
+    readonly styles?: ChatNativeStyles;
+}
+declare const ChoiceListNative: ({ frame, manifest, onSelect, disabled, styles }: ChoiceListNativeProps) => ReactElement | null;
+declare const AgentChatNative: (props: AgentChatNativeProps) => ReactElement;
+
+export { AgentChatNative, type AgentChatNativeProps, type AgentChatNativeSlots, type ChatNativeStyles, ChoiceListNative, type ChoiceListNativeProps, StandardComponentNative, type StandardComponentNativeProps, toChatNativeStyles };

package/dist/index.js

@@ -0,0 +1,344 @@
+// src/index.tsx
+import { STANDARD_COMPONENT_KEYS, formatSemanticFallback, getLifecycleTargets, presentChatMessage, resolveChatSession, resolveChatTheme, resolveChoiceAction, resolveChoiceListFrame, resolveComponentFrame as resolveComponentFrame2, selectChoice } from "@agentskit/chat";
+import {
+  ChatContainer,
+  InputBar,
+  Message,
+  ThinkingIndicator,
+  ToolConfirmation,
+  useChat
+} from "@agentskit/react-native";
+import { useMemo, useRef, useState as useState2 } from "react";
+import { Pressable as Pressable2, Text as Text2, TextInput as TextInput2, View as View2 } from "react-native";
+
+// src/StandardComponent.tsx
+import { ApprovalRequestPropsSchema, ButtonGroupPropsSchema, ConfirmationPropsSchema, ErrorNoticePropsSchema, FileAttachmentPropsSchema, FormPropsSchema, LinkCardPropsSchema, ProgressPropsSchema, SourceListPropsSchema, TablePropsSchema, ToolCallPropsSchema, createComponentInteraction, resolveComponentFrame, validateStandardComponentInteraction } from "@agentskit/chat";
+import { useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = ({ label, onPress, disabled = false }) => /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled, onPress, children: /* @__PURE__ */ jsx(Text, { children: label }) });
+var StandardFormNative = (props) => {
+  const item = FormPropsSchema.parse(props.frame.props);
+  const [values, setValues] = useState({});
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "none", accessibilityLabel: item.title ?? "Form", testID: "ak-form", children: [
+    item.title ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", children: item.title }) : null,
+    item.fields.map((field) => /* @__PURE__ */ jsxs(View, { children: [
+      /* @__PURE__ */ jsx(Text, { children: field.label }),
+      field.type === "checkbox" ? /* @__PURE__ */ jsx(Button, { label: `${field.label}: ${values[field.id] ? "checked" : "unchecked"}`, disabled: props.disabled, onPress: () => setValues((current) => ({ ...current, [field.id]: !current[field.id] })) }) : field.type === "select" ? /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: field.label, children: field.options?.map((option) => /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: values[field.id] === option.id }, disabled: props.disabled, onPress: () => setValues((current) => ({ ...current, [field.id]: option.id })), children: /* @__PURE__ */ jsxs(Text, { children: [
+        values[field.id] === option.id ? "\u25CF" : "\u25CB",
+        " ",
+        option.label
+      ] }) }, option.id)) }) : /* @__PURE__ */ jsx(TextInput, { accessibilityLabel: field.label, editable: !props.disabled, placeholder: field.placeholder, inputMode: field.type === "email" ? "email" : field.type === "number" ? "numeric" : "text", value: String(values[field.id] ?? ""), onChangeText: (value) => setValues((current) => ({ ...current, [field.id]: value })) })
+    ] }, field.id)),
+    /* @__PURE__ */ jsx(Button, { label: item.submitLabel, disabled: props.disabled || !validateStandardComponentInteraction("form", item, "submit", values), onPress: () => props.onInteract(createComponentInteraction(props.frame, props.manifest, "submit", values)) })
+  ] });
+};
+var StandardComponentNative = (props) => {
+  if (!resolveComponentFrame(props.frame, props.manifest).ok || props.frame.componentKey === "choice-list") return null;
+  const emit = (event, value) => props.onInteract(createComponentInteraction(props.frame, props.manifest, event, value));
+  const key = props.frame.componentKey;
+  if (key === "button-group") {
+    const item = ButtonGroupPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "none", accessibilityLabel: item.label, testID: "ak-button-group", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.label }),
+      item.buttons.map((button) => /* @__PURE__ */ jsx(Button, { label: button.label, disabled: props.disabled || button.disabled, onPress: () => emit("select", button.id) }, button.id))
+    ] });
+  }
+  if (key === "form") return /* @__PURE__ */ jsx(StandardFormNative, { ...props });
+  if (key === "confirmation") {
+    const item = ConfirmationPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityLabel: item.title, testID: "ak-confirmation", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.title }),
+      /* @__PURE__ */ jsx(Text, { children: item.message }),
+      /* @__PURE__ */ jsx(Button, { label: item.confirmLabel, disabled: props.disabled, onPress: () => emit("confirm") }),
+      /* @__PURE__ */ jsx(Button, { label: item.cancelLabel, disabled: props.disabled, onPress: () => emit("cancel") })
+    ] });
+  }
+  if (key === "progress") {
+    const item = ProgressPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "progressbar", accessibilityLabel: item.label, accessibilityValue: { min: 0, max: 100, now: item.value }, testID: "ak-progress", children: [
+      /* @__PURE__ */ jsxs(Text, { children: [
+        item.label,
+        ": ",
+        item.value,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(Text, { children: item.status })
+    ] });
+  }
+  if (key === "source-list") {
+    const item = SourceListPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "list", accessibilityLabel: item.label, testID: "ak-source-list", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.label }),
+      item.sources.map((source) => /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsx(Button, { label: source.title, disabled: !source.url || props.disabled, onPress: () => emit("open", source.id) }),
+        /* @__PURE__ */ jsx(Text, { children: source.snippet })
+      ] }, source.id))
+    ] });
+  }
+  if (key === "link-card") {
+    const item = LinkCardPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", accessibilityLabel: item.label ?? item.title, disabled: props.disabled, onPress: () => emit("open", item.href), testID: "ak-link-card", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.title }),
+      /* @__PURE__ */ jsx(Text, { children: item.description })
+    ] });
+  }
+  if (key === "error-notice") {
+    const item = ErrorNoticePropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", testID: "ak-error-notice", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.title }),
+      /* @__PURE__ */ jsx(Text, { children: item.message }),
+      /* @__PURE__ */ jsx(Text, { children: item.code }),
+      item.retryLabel ? /* @__PURE__ */ jsx(Button, { label: item.retryLabel, disabled: props.disabled, onPress: () => emit("retry") }) : null
+    ] });
+  }
+  if (key === "tool-call") {
+    const item = ToolCallPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "summary", accessibilityLabel: `${item.name}: ${item.status}`, testID: "ak-tool-call", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.name }),
+      /* @__PURE__ */ jsx(Text, { children: item.status }),
+      /* @__PURE__ */ jsx(Text, { children: item.arguments ? JSON.stringify(item.arguments) : "" }),
+      /* @__PURE__ */ jsx(Text, { children: item.result === void 0 ? "" : JSON.stringify(item.result) })
+    ] });
+  }
+  if (key === "approval-request") {
+    const item = ApprovalRequestPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityLabel: item.title, testID: "ak-approval-request", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.title }),
+      /* @__PURE__ */ jsx(Text, { children: item.description }),
+      /* @__PURE__ */ jsx(Button, { label: item.approveLabel, disabled: props.disabled, onPress: () => emit("approve") }),
+      /* @__PURE__ */ jsx(Button, { label: item.denyLabel, disabled: props.disabled, onPress: () => emit("deny") })
+    ] });
+  }
+  if (key === "table") {
+    const item = TablePropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityRole: "summary", accessibilityLabel: item.caption, testID: "ak-table", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.caption }),
+      /* @__PURE__ */ jsx(Text, { children: item.columns.map((column) => column.label).join(" | ") }),
+      item.rows.map((row, index) => /* @__PURE__ */ jsx(Text, { children: item.columns.map((column) => String(row[column.key] ?? "")).join(" | ") }, index))
+    ] });
+  }
+  if (key === "file-attachment") {
+    const item = FileAttachmentPropsSchema.parse(props.frame.props);
+    return /* @__PURE__ */ jsxs(View, { accessibilityLabel: `${item.name}, ${item.mimeType}`, testID: "ak-file-attachment", children: [
+      /* @__PURE__ */ jsx(Text, { children: item.name }),
+      /* @__PURE__ */ jsx(Text, { children: item.mimeType }),
+      /* @__PURE__ */ jsx(Text, { children: item.sizeBytes === void 0 ? "" : `${item.sizeBytes} bytes` }),
+      item.url ? /* @__PURE__ */ jsx(Button, { label: "Open", disabled: props.disabled, onPress: () => emit("open", item.url) }) : null
+    ] });
+  }
+  return null;
+};
+
+// src/index.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var toChatNativeStyles = (input) => {
+  const theme = resolveChatTheme(input);
+  const font = theme.fontFamily === "system" ? {} : { fontFamily: theme.fontFamily };
+  return {
+    root: { flex: 1, backgroundColor: theme.colors.background, padding: theme.spacing.large },
+    container: { backgroundColor: theme.colors.background },
+    userMessage: { alignSelf: "flex-end", backgroundColor: theme.colors.accent, borderRadius: theme.radius.large, padding: theme.spacing.medium },
+    userMessageText: { color: theme.colors.onAccent, ...font },
+    assistantMessage: { alignSelf: "flex-start", backgroundColor: theme.colors.surface, borderRadius: theme.radius.large, padding: theme.spacing.medium },
+    assistantMessageText: { color: theme.colors.text, ...font },
+    choiceList: { gap: theme.spacing.small, padding: theme.spacing.medium },
+    choice: { borderColor: theme.colors.border, borderRadius: theme.radius.medium, borderWidth: 1, padding: theme.spacing.medium },
+    choiceText: { color: theme.colors.text, ...font },
+    mutedText: { color: theme.colors.muted, ...font },
+    input: { backgroundColor: theme.colors.surface, borderColor: theme.colors.border, borderTopWidth: 1, padding: theme.spacing.medium },
+    inputText: { color: theme.colors.text, ...font },
+    dangerText: { color: theme.colors.danger, ...font }
+  };
+};
+var ChoiceListNative = ({ frame, manifest, onSelect, disabled = false, styles = toChatNativeStyles() }) => {
+  const resolved = resolveChoiceListFrame(frame, manifest);
+  if (!resolved.ok) return null;
+  return /* @__PURE__ */ jsxs2(View2, { testID: "ak-choice-list", style: styles.choiceList, children: [
+    /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: resolved.props.prompt }),
+    resolved.props.choices.map((choice) => /* @__PURE__ */ jsxs2(
+      Pressable2,
+      {
+        accessibilityRole: "button",
+        disabled,
+        accessibilityLabel: choice.description === void 0 ? choice.label : `${choice.label}. ${choice.description}`,
+        onPress: () => onSelect(selectChoice(resolved.frame, choice.id)),
+        testID: `ak-choice-${choice.id}`,
+        style: styles.choice,
+        children: [
+          /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: choice.label }),
+          choice.description === void 0 ? null : /* @__PURE__ */ jsx2(Text2, { style: styles.mutedText, children: choice.description })
+        ]
+      },
+      choice.id
+    ))
+  ] });
+};
+var AgentChatNativeSession = ({ definition, placeholder, onComponentSelect = () => void 0, onComponentInteract = () => void 0, actionConfirmationTtlMs, session: preparedSession, theme, slots = {} }) => {
+  const styles = toChatNativeStyles(theme);
+  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 ?? ChoiceListNative;
+  const StandardComponentSlot = slots.StandardComponent ?? StandardComponentNative;
+  const [session] = useState2(() => resolveChatSession(definition, preparedSession));
+  const sessionId = session.sessionId;
+  const [actionError, setActionError] = useState2();
+  const [editDraft, setEditDraft] = useState2();
+  const [resolvedInstances, setResolvedInstances] = useState2(() => /* @__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] = useState2(() => 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;
+    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. Ask the question again."));
+        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.")));
+  };
+  return /* @__PURE__ */ jsxs2(View2, { testID: "ak-app-chat", accessibilityLabel: `${definition.id} chat`, style: styles.root, children: [
+    /* @__PURE__ */ jsx2(View2, { accessibilityLiveRegion: "polite", children: /* @__PURE__ */ jsxs2(ContainerSlot, { style: styles.container, children: [
+      chat.messages.flatMap((message) => presentChatMessage(message).map((presentation, index) => {
+        const key = `${message.id}:${index}`;
+        if (presentation.kind === "component") {
+          const manifest = definition.components;
+          const resolved = manifest === void 0 ? void 0 : resolveComponentFrame2(presentation.frame, manifest);
+          if (resolved?.ok && slots.StandardComponent === void 0 && !STANDARD_COMPONENT_KEYS.includes(presentation.frame.componentKey)) return /* @__PURE__ */ jsx2(Text2, { children: formatSemanticFallback(presentation.frame.fallback) }, key);
+          if (resolved?.ok) return presentation.frame.componentKey === "choice-list" ? /* @__PURE__ */ jsx2(ChoiceListSlot, { frame: presentation.frame, manifest, disabled: resolvedInstances.has(presentation.frame.instanceId), onSelect: (event) => selectComponent(event, presentation.frame), styles }, key) : /* @__PURE__ */ jsx2(StandardComponentSlot, { frame: presentation.frame, manifest, disabled: resolvedInstances.has(presentation.frame.instanceId), onInteract: interactComponent }, key);
+          return /* @__PURE__ */ jsx2(Text2, { style: styles.assistantMessageText, children: formatSemanticFallback(presentation.frame.fallback) }, key);
+        }
+        if (presentation.kind === "diagnostic") return /* @__PURE__ */ jsx2(Text2, { accessibilityRole: "alert", style: styles.dangerText, children: presentation.message }, key);
+        return /* @__PURE__ */ jsx2(
+          MessageSlot,
+          {
+            message: presentation.message,
+            style: presentation.message.role === "user" ? styles.userMessage : styles.assistantMessage,
+            contentStyle: presentation.message.role === "user" ? styles.userMessageText : styles.assistantMessageText
+          },
+          key
+        );
+      })),
+      chat.messages.flatMap((message) => message.toolCalls ?? []).map((toolCall) => /* @__PURE__ */ jsx2(ConfirmationSlot, { toolCall, onApprove: approve, onDeny: deny }, toolCall.id)),
+      /* @__PURE__ */ jsx2(ThinkingSlot, { visible: chat.status === "streaming" })
+    ] }) }),
+    chat.error || actionError ? /* @__PURE__ */ jsx2(Text2, { accessibilityRole: "alert", style: styles.dangerText, children: chat.error?.message ?? actionError?.message }) : null,
+    chat.status === "streaming" ? /* @__PURE__ */ jsx2(
+      Pressable2,
+      {
+        testID: "ak-stop",
+        accessibilityRole: "button",
+        accessibilityLabel: "Stop response",
+        onPress: chat.stop,
+        children: /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: "Stop" })
+      }
+    ) : null,
+    chat.status !== "streaming" && targets.userId ? /* @__PURE__ */ jsxs2(View2, { accessibilityLabel: "Response actions", children: [
+      /* @__PURE__ */ jsx2(Pressable2, { accessibilityRole: "button", accessibilityLabel: "Retry response", testID: "ak-retry", onPress: () => runLifecycle(chat.retry()), children: /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: "Retry" }) }),
+      targets.assistantId ? /* @__PURE__ */ jsx2(Pressable2, { accessibilityRole: "button", accessibilityLabel: "Regenerate response", testID: "ak-regenerate", onPress: () => runLifecycle(chat.regenerate(targets.assistantId)), children: /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: "Regenerate" }) }) : null,
+      /* @__PURE__ */ jsx2(Pressable2, { accessibilityRole: "button", accessibilityLabel: "Edit last message", testID: "ak-edit", onPress: () => setEditDraft({ messageId: targets.userId, content: chat.messages.find((message) => message.id === targets.userId)?.content ?? "" }), children: /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: "Edit" }) }),
+      editDraft === void 0 ? null : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(TextInput2, { accessibilityLabel: "Edit message", testID: "ak-edit-input", value: editDraft.content, style: styles.inputText, onChangeText: (content) => setEditDraft({ ...editDraft, content }) }),
+        /* @__PURE__ */ jsx2(Pressable2, { accessibilityRole: "button", accessibilityLabel: "Save edit", testID: "ak-edit-save", disabled: editDraft.content.trim() === "", onPress: () => {
+          runLifecycle(chat.edit(editDraft.messageId, editDraft.content));
+          setEditDraft(void 0);
+        }, children: /* @__PURE__ */ jsx2(Text2, { style: styles.choiceText, children: "Save" }) })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx2(
+      InputSlot,
+      {
+        chat,
+        disabled: chat.status === "streaming",
+        style: styles.input,
+        inputStyle: styles.inputText,
+        ...placeholder === void 0 ? {} : { placeholder }
+      }
+    )
+  ] });
+};
+var AgentChatNative = (props) => /* @__PURE__ */ jsx2(AgentChatNativeSession, { ...props }, `${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? "new"}`);
+export {
+  AgentChatNative,
+  ChoiceListNative,
+  StandardComponentNative,
+  toChatNativeStyles
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@agentskit/chat-react-native",
+  "version": "0.1.0",
+  "description": "React Native renderer for AgentsKit Chat.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgentsKit-io/agentskit-chat.git",
+    "directory": "packages/react-native"
+  },
+  "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"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@agentskit/chat": "0.1.0",
+    "@agentskit/chat-protocol": "0.1.0"
+  },
+  "peerDependencies": {
+    "@agentskit/react-native": "^0.4.4",
+    "react": ">=18",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@agentskit/core": "^1.12.2",
+    "@agentskit/react-native": "^0.4.4",
+    "@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",
+    "react-native": "^0.86.0",
+    "tsup": "^8.5.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external react-native --external @agentskit/react-native",
+    "lint": "tsc --noEmit",
+    "test": "pnpm --filter @agentskit/chat build && vitest run --environment happy-dom"
+  }
+}