@sophonsai/agent-embed-vue 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,330 @@
-# Temporary Holding Version
+# @sophonsai/agent-embed-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## 应用接入
+
+传入 SAAP 服务地址 `endpoint` 和智能体的应用接入凭证 `token`。
+
+```vue
+<AgentEmbed endpoint="https://agent.example.com" token="应用接入Token" style="height:600px" />
+```
+
+## 安装
+
+```bash
+# npm
+npm install @sophonsai/agent-embed-vue vue@^3.3
+
+# pnpm
+pnpm add @sophonsai/agent-embed-vue vue@^3.3
+
+# yarn
+yarn add @sophonsai/agent-embed-vue vue@^3.3
+
+# bun
+bun add @sophonsai/agent-embed-vue vue@^3.3
+```
+
+## 快速开始
+
+```vue
+<script setup lang="ts">
+import { reactive, shallowRef } from 'vue'
+import {
+  AgentEmbed,
+  type AgentAppearance,
+  type AgentEmbedInstance,
+  type AgentEmbedTheme,
+} from '@sophonsai/agent-embed-vue'
+
+const endpoint = 'https://agent.example.com'
+const token = '应用接入Token'
+
+const appearance = reactive<AgentAppearance>({
+  theme: { preset: 'glacier-blue' },
+  fontSize: 16,
+  header: {
+    historyButton: true,
+    newConversationButton: true,
+    themeSettingButton: false,
+  },
+})
+
+const agent = shallowRef<AgentEmbedInstance | null>(null)
+
+const handleThemeChange = (theme: AgentEmbedTheme) => {
+  appearance.theme = theme
+}
+
+const handleFontSizeChange = (fontSize: number) => {
+  appearance.fontSize = fontSize
+}
+</script>
+
+<template>
+  <div class="page">
+    <AgentEmbed
+      class="agent-embed"
+      :endpoint="endpoint"
+      :token="token"
+      :appearance="appearance"
+      @theme-change="handleThemeChange"
+      @font-size-change="handleFontSizeChange"
+      @init-error="({ code, message }) => console.error('初始化失败', code, message)"
+      @settled="(result) => console.log('会话结束', result)"
+      @ready="(instance) => (agent = instance)"
+    />
+
+    <button :disabled="!agent" @click="agent?.sendMessage({ text: '你好' })">发送消息</button>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  height: 640px;
+}
+
+.agent-embed {
+  min-height: 480px;
+}
+</style>
+```
+
+## 组件 Props
+
+| Prop                | 类型                    | 必填 | 说明                                  |
+| ------------------- | ----------------------- | ---- | ------------------------------------- |
+| `endpoint`          | `string`                | 是   | 服务地址                              |
+| `token`             | `string`                | 是   | Agent 应用接入凭证                    |
+| `threadId`          | `string`                | 否   | 初始会话 ID                           |
+| `runtime_variables` | `AgentRuntimeVariables` | 否   | 新会话绑定的运行时变量，值必须为 JSON |
+| `appearance`        | `AgentAppearance`       | 否   | 主题、字号和头部按钮配置              |
+
+## 组件事件
+
+组件使用标准 Vue 事件，不接受 `onXxx` 回调 Props。
+
+| 事件                | 参数       | 说明             |
+| ------------------- | ---------- | ---------------- |
+| `@ready`            | `instance` | 面板初始化完成   |
+| `@theme-change`     | `theme`    | 面板内部主题变化 |
+| `@font-size-change` | `fontSize` | 面板内部字号变化 |
+| `@init-error`       | `failure`  | 初始化失败       |
+
+全部运行事件见“会话事件”章节。
+
+## 初始化配置
+
+```vue
+<AgentEmbed
+  endpoint="https://agent.example.com"
+  token="应用接入Token"
+  thread-id="可选初始会话ID"
+/>
+```
+
+接入配置只在挂载时读取；需要切换服务、token 或会话时，修改组件 `key` 重新挂载。
+`appearance` 会随外观配置更新。
+
+## 外观与受控状态
+
+```ts
+const appearance = reactive<AgentAppearance>({
+  theme: { preset: 'studio-white' },
+  fontSize: 16,
+  header: {
+    historyButton: true,
+    newConversationButton: true,
+    themeSettingButton: true,
+  },
+})
+```
+
+`header.themeSettingButton` 默认值为 `true`，显式设置为 `false` 时隐藏主题设置按钮。
+
+可用主题：
+
+可以使用 `AgentEmbedThemePreset` 枚举式常量设置主题：
+
+```ts
+import { AgentEmbedThemePreset } from '@sophonsai/agent-embed-vue'
+
+const appearance = {
+  theme: { preset: AgentEmbedThemePreset.GlacierBlue },
+}
+```
+
+| 主题名 | preset            | 类型     |
+| ------ | ----------------- | -------- |
+| 曜石紫 | `obsidian-violet` | 深色主题 |
+| 石墨青 | `graphite-cyan`   | 深色主题 |
+| 午夜靛 | `midnight-indigo` | 深色主题 |
+| 深海蓝 | `deep-ocean`      | 深色主题 |
+| 森野绿 | `forest-emerald`  | 深色主题 |
+| 影棚白 | `studio-white`    | 浅色主题 |
+| 珍珠紫 | `pearl-violet`    | 浅色主题 |
+| 冰川蓝 | `glacier-blue`    | 浅色主题 |
+| 暖杏色 | `warm-cream`      | 浅色主题 |
+| 薰衣草 | `lavender-mist`   | 浅色主题 |
+
+Vue 3 适配器会分别监听：
+
+- `appearance.theme`，深度监听；
+- `appearance.fontSize`；
+- `appearance.header`，深度监听。
+
+因此下面的修改会自动同步到面板：
+
+```ts
+appearance.theme = { preset: 'warm-cream' }
+appearance.fontSize = 18
+appearance.header!.themeSettingButton = false
+```
+
+当主题或字号作为受控状态传入时，应在 `@theme-change` / `@font-size-change` 中更新响应式状态，否则外部状态仍会保留旧值。
+
+将 `theme`、`fontSize` 或 `header` 改为 `undefined` 会撤销对应的宿主控制，让面板恢复内部默认值。
+
+## 获取和使用实例
+
+面板初始化完成后，`ready` 事件会返回 `AgentEmbedInstance`。在此之前，获取不到 `AgentEmbedInstance` 实例对象，无法操作面板执行行为。
+
+推荐使用 `shallowRef` 保存实例：
+
+```ts
+const agent = shallowRef<AgentEmbedInstance | null>(null)
+
+const handleReady = (instance: AgentEmbedInstance) => {
+  agent.value = instance
+  instance.focusInput()
+}
+```
+
+`AgentEmbedInstance` 方法：
+
+| 方法                                | 说明                                        |
+| ----------------------------------- | ------------------------------------------- |
+| `sendMessage({ text })`             | 立即提交消息；生成期间调用会使用 steer 行为 |
+| `addInputQuery({ text, context? })` | 写入输入框和可选上下文，不立即提交          |
+| `abortResponse()`                   | 终止当前回复                                |
+| `openHistoryPanel()`                | 打开历史会话面板                            |
+| `openThemeSettingsPanel()`          | 打开主题设置面板                            |
+| `newConversation()`                 | 新建会话                                    |
+| `focusInput()`                      | 聚焦输入框                                  |
+| `scrollToBottom()`                  | 滚动到底部                                  |
+
+```ts
+agent.value?.addInputQuery({
+  text: '请解释这段内容',
+  context: selectedText.value,
+})
+agent.value?.focusInput()
+```
+
+组件卸载时会销毁 client，之前保存的 instance 随之失效。父组件应在切换实例时同步清理引用。
+
+## 错误处理
+
+```vue
+<AgentEmbed :endpoint="endpoint" :token="token" @init-error="handleInitError" />
+```
+
+初始化失败码：
+
+- `missing_token`：缺少 token；
+- `invalid_token`：token 无效或过期；
+- `forbidden`：无访问权限；
+- `request_failed`：鉴权请求失败。
+
+智能体加载失败码：
+
+- `not_found`：未找到智能体；
+- `forbidden`：无权访问智能体；
+- `request_failed`：智能体请求失败。
+
+失败对象还包含可读的 `message`。上述失败发生时不会触发 `ready`。
+
+## 会话事件
+
+```vue
+<AgentEmbed
+  :endpoint="endpoint"
+  :token="token"
+  @session-context-ready="handleContextReady"
+  @tool-call-failed="handleToolFailed"
+  @settled="handleSettled"
+/>
+```
+
+全部运行事件如下：
+
+| 事件                          | 参数                                                            | 说明                                        |
+| ----------------------------- | --------------------------------------------------------------- | ------------------------------------------- |
+| `@concurrent-send`            | 无                                                              | 回复生成期间再次发送消息                    |
+| `@event`                      | `AgentServerEvent`                                              | 接收原始服务端事件                          |
+| `@session-context-ready`      | `AgentSessionContext`                                           | 会话上下文可用，包含 `threadId` 和 `turnId` |
+| `@tool-call-created`          | `AgentToolCallReadyEvent`, `AgentSessionEventContext`         | 创建一个工具调用                            |
+| `@tool-approval-requested`    | `AgentToolApprovalRequestedEvent`, `AgentSessionEventContext`   | 一组工具调用需要确认                        |
+| `@tool-call-started`          | `AgentToolCallStartedEvent`, `AgentSessionEventContext`         | 工具调用开始                                |
+| `@tool-call-progress-updated` | `AgentToolCallProgressUpdatedEvent`, `AgentSessionEventContext` | 工具调用进度更新                            |
+| `@tool-call-backgrounded`     | `AgentToolCallBackgroundedEvent`, `AgentSessionEventContext`    | 工具调用转为后台执行                        |
+| `@tool-call-succeeded`        | `AgentToolCallSucceededEvent`, `AgentSessionEventContext`       | 工具调用成功                                |
+| `@tool-call-failed`           | `AgentToolCallFailedEvent`, `AgentSessionEventContext`          | 工具调用失败                                |
+| `@tool-call-cancelled`        | `AgentToolCallCancelledEvent`, `AgentSessionEventContext`       | 工具调用取消                                |
+| `@client-tool-request` | `AgentToolCallStartedEvent`, `AgentSessionEventContext` | 客户端工具执行请求；可通过 `clientTools` prop 注册自动执行函数 |
+| `@client-action-request`      | `AgentClientActionRequestEvent`, `AgentSessionEventContext`     | 智能体请求宿主执行客户端动作                |
+| `@user-feedback-consumed`     | `AgentUserFeedbackConsumedEvent`, `AgentSessionEventContext`    | 用户反馈已被处理                            |
+| `@user-steer-consumed`        | `AgentUserSteerConsumedEvent`, `AgentSessionEventContext`       | 用户 steer 指令已被处理                     |
+| `@user-steer-cancelled`       | `AgentUserSteerCancelledEvent`, `AgentSessionRunEventContext`   | 用户 steer 指令已取消                       |
+| `@user-input-submitted`       | `AgentUserInputSubmittedEvent`, `AgentSessionEventContext`      | 用户输入已提交                              |
+| `@session-turn-started`       | `AgentSessionTurnStartedEvent`, `AgentSessionEventContext`      | Turn 开始执行                               |
+| `@session-turn-succeeded`     | `AgentSessionTurnSucceededEvent`, `AgentSessionEventContext`    | Turn 执行成功                               |
+| `@session-turn-failed`        | `AgentSessionTurnFailedEvent`, `AgentSessionEventContext`       | Turn 执行失败                               |
+| `@session-turn-cancelled`     | `AgentSessionTurnCancelledEvent`, `AgentSessionEventContext`    | Turn 已取消                                 |
+| `@session-run-started`        | `AgentSessionRunStartedEvent`, `AgentSessionRunEventContext`    | Run 已开始                                  |
+| `@session-run-idled`          | `AgentSessionRunIdledEvent`, `AgentSessionRunEventContext`      | Run 已空闲                                  |
+| `@session-run-ended`          | `AgentSessionRunEndedEvent`, `AgentSessionRunEventContext`      | Run 已结束                                  |
+| `@system-message-consumed`    | `AgentSystemMessageConsumedEvent`, `AgentSessionEventContext`   | 系统消息已被处理                            |
+| `@success`                    | `AgentSessionSuccess`                                           | 本轮会话成功结束                            |
+| `@error`                      | `AgentSessionFailure`                                           | 本轮会话失败                                |
+| `@cancelled`                  | `AgentSessionCancelled`                                         | 本轮会话取消                                |
+| `@settled`                    | `AgentSessionSettlement`                                        | 本轮会话以任意状态结束                      |
+
+事件 payload、会话上下文和工具调用类型均由本包重导出。
+
+## 布局说明
+
+组件根节点默认样式为：
+
+```css
+width: 100%;
+height: 100%;
+min-height: 0;
+```
+
+父容器需要设置明确高度：
+
+```vue
+<template>
+  <main class="agent-page">
+    <AgentEmbed :endpoint="endpoint" :token="token" />
+  </main>
+</template>
+
+<style>
+.agent-page {
+  height: calc(100vh - 64px);
+}
+</style>
+```
+
+模板中传入的 `class` 和 `style` 会作用于根元素。
+
+### 运行时变量
+
+`runtime_variables` 是可选的 JSON 对象，名称须与智能体声明的运行时变量一致。仅创建新会话时发送，已有会话沿用已绑定的变量；同一面板新建会话时复用初始化值。参数在初始化时生成快照，改变值需要重建面板。数据通过 iframe 消息传递，不写入接入 URL。
+
+```vue
+<AgentEmbed :endpoint="endpoint" :token="token" :runtime_variables="{ customer_id: 'customer-1' }" />
+```
+
+初始化错误使用 `onInitError`（Vue: `@init-error`），包含 `code` 和 `message`，同次初始化只触发一次。失败时 `whenReady()` reject，聊天运行错误继续通过 `onError`（Vue: `@error`）报告。

package/dist/index.d.mts

@@ -0,0 +1,230 @@
+import { PropType } from "vue";
+import { AgentAppearance, AgentClientToolHandler, AgentEmbedInitError, AgentEmbedInstance, AgentEmbedTheme, AgentEvents, AgentRuntimeVariables } from "@sophonsai/agent-embed-sdk";
+export * from "@sophonsai/agent-embed-sdk";
+//#region ../core/dist/index.d.mts
+interface AgentSessionContext {
+  threadId: string;
+  turnId: string;
+}
+interface AgentTextPayload {
+  version: 1;
+  range_unit: 'utf16';
+  references: Array<{
+    id: string;
+    type: 'resource';
+    provider: string;
+    resource_id: string;
+    label: string;
+    value: string;
+    range: {
+      start: number;
+      end: number;
+    };
+  }>;
+}
+interface AgentSessionRunEventContext {
+  runId: string;
+  threadId: string | null;
+  step: number;
+  parentToolCallId: string | null;
+}
+type AgentSessionEventContext = AgentSessionRunEventContext & AgentSessionContext;
+interface AgentToolCallStartedEvent {
+  toolCallId: string;
+  toolName: string;
+  toolNameEn?: string;
+  actionDescription?: string;
+  arguments: Record<string, unknown>;
+}
+interface AgentToolCallSucceededEvent extends AgentToolCallStartedEvent {
+  result: string;
+}
+interface AgentToolCallProgressUpdatedEvent extends AgentToolCallStartedEvent {
+  sequence: number;
+  progress: {
+    type: string;
+    phase: string;
+    data: Record<string, unknown>;
+  };
+}
+interface AgentToolCallFailedEvent extends AgentToolCallStartedEvent {
+  error: string;
+}
+interface AgentToolCallBackgroundedEvent {
+  toolCallId: string;
+  toolName: string;
+  toolNameEn?: string;
+  content?: string;
+}
+interface AgentToolCallCancelledEvent {
+  toolCallId: string;
+  toolName: string;
+  toolNameEn?: string;
+  reason?: 'user_terminated' | 'session_disconnected' | 'background_cancelled' | 'unknown';
+}
+type AgentToolCall = AgentToolCallStartedEvent & ({
+  kind: 'tool';
+  executor: 'server' | 'client';
+} | {
+  kind: 'action';
+  executor: 'client';
+});
+interface AgentToolCallCreatedEvent {
+  toolCallId: string;
+  toolName: string;
+  icon?: string;
+}
+interface AgentToolCallReadyEvent {
+  toolCall: AgentToolCall;
+  dependsOn?: {
+    toolCallId: string;
+    reason: string;
+  };
+}
+interface AgentToolApprovalRequestedEvent {
+  toolCallIds: string[];
+}
+interface AgentClientActionRequestEvent {
+  actionId: string;
+  actionName: string;
+  actionNameEn?: string;
+  arguments: Record<string, unknown>;
+  actionDescription?: string;
+}
+interface AgentUserFeedbackConsumedEvent {
+  content: string;
+  payload?: AgentTextPayload | null;
+}
+interface AgentUserSteerConsumedEvent {
+  steerId: string;
+  content: string;
+  payload?: AgentTextPayload;
+}
+interface AgentUserSteerCancelledEvent {
+  steerId: string;
+}
+interface AgentUserInputSubmittedEvent {
+  content: string;
+  payload?: AgentTextPayload | null;
+}
+type AgentSessionTurnStartedEvent = Record<string, never>;
+type AgentSessionTurnSucceededEvent = Record<string, never>;
+type AgentSessionRunStartedEvent = Record<string, never>;
+type AgentSessionRunIdledEvent = Record<string, never>;
+type AgentSessionRunEndedEvent = Record<string, never>;
+interface AgentSessionTurnFailedEvent {
+  code: number;
+  error: string;
+}
+interface AgentSessionTurnCancelledEvent {
+  reason: 'user_graceful_termination' | 'user_forced_termination' | 'hitl_user_termination' | 'hitl_timeout' | 'session_orphaned' | 'runtime_lost' | 'unknown';
+}
+interface AgentSystemMessageConsumedEvent {
+  messageId: string;
+  messageType: string;
+  content: string;
+  modelContent: string;
+  data?: unknown;
+}
+interface AgentSessionSuccess {
+  status: 'success';
+  context: AgentSessionContext | null;
+}
+interface AgentSessionFailure {
+  status: 'failure';
+  context: AgentSessionContext | null;
+  error: unknown;
+}
+interface AgentSessionCancelled {
+  status: 'cancelled';
+  context: AgentSessionContext | null;
+}
+type AgentSessionSettlement = AgentSessionSuccess | AgentSessionFailure | AgentSessionCancelled;
+type AgentServerEvent = Record<string, unknown>;
+//#endregion
+//#region src/index.d.ts
+type KebabCase<Value extends string> = Value extends `${infer First}${infer Rest}` ? Rest extends Uncapitalize<Rest> ? `${Lowercase<First>}${KebabCase<Rest>}` : `${Lowercase<First>}-${KebabCase<Rest>}` : Value;
+type CallbackEventName<Name extends string> = Name extends `on${infer EventName}` ? KebabCase<EventName> : never;
+type AgentEventEmits = { [Name in keyof AgentEvents as CallbackEventName<Name & string>]-?: (...args: Parameters<NonNullable<AgentEvents[Name]>>) => boolean; };
+declare const AgentEmbed: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  endpoint: {
+    type: StringConstructor;
+    required: true;
+  };
+  token: {
+    type: StringConstructor;
+    required: true;
+  };
+  baseUrl: {
+    type: StringConstructor;
+    default: string;
+  };
+  threadId: StringConstructor;
+  runtime_variables: PropType<AgentRuntimeVariables>;
+  clientTools: PropType<Record<string, AgentClientToolHandler>>;
+  appearance: PropType<AgentAppearance>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, AgentEventEmits & {
+  ready: (instance: AgentEmbedInstance) => boolean;
+  'theme-change': (theme: AgentEmbedTheme) => boolean;
+  'font-size-change': (fontSize: number) => boolean;
+  'init-error': (error: AgentEmbedInitError) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  endpoint: {
+    type: StringConstructor;
+    required: true;
+  };
+  token: {
+    type: StringConstructor;
+    required: true;
+  };
+  baseUrl: {
+    type: StringConstructor;
+    default: string;
+  };
+  threadId: StringConstructor;
+  runtime_variables: PropType<AgentRuntimeVariables>;
+  clientTools: PropType<Record<string, AgentClientToolHandler>>;
+  appearance: PropType<AgentAppearance>;
+}>> & Readonly<{
+  "onConcurrent-send"?: (() => any) | undefined;
+  onEvent?: ((event: AgentServerEvent) => any) | undefined;
+  onReady?: ((instance: AgentEmbedInstance) => any) | undefined;
+  "onSession-context-ready"?: ((context: AgentSessionContext) => any) | undefined;
+  "onTool-call-created"?: ((event: AgentToolCallCreatedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-ready"?: ((event: AgentToolCallReadyEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-approval-requested"?: ((event: AgentToolApprovalRequestedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-started"?: ((event: AgentToolCallStartedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-progress-updated"?: ((event: AgentToolCallProgressUpdatedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-backgrounded"?: ((event: AgentToolCallBackgroundedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-succeeded"?: ((event: AgentToolCallSucceededEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onTool-call-failed"?: ((event: AgentToolCallFailedEvent, context: AgentSessionEventContext) => any) | undefined;
+  onCancelled?: ((result: AgentSessionCancelled) => any) | undefined;
+  "onTool-call-cancelled"?: ((event: AgentToolCallCancelledEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onClient-tool-request"?: ((event: AgentToolCallStartedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onClient-action-request"?: ((event: AgentClientActionRequestEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onUser-feedback-consumed"?: ((event: AgentUserFeedbackConsumedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onUser-steer-consumed"?: ((event: AgentUserSteerConsumedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onUser-steer-cancelled"?: ((event: AgentUserSteerCancelledEvent, context: AgentSessionRunEventContext) => any) | undefined;
+  "onUser-input-submitted"?: ((event: AgentUserInputSubmittedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onSession-turn-started"?: ((event: AgentSessionTurnStartedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onSession-turn-succeeded"?: ((event: AgentSessionTurnSucceededEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onSession-turn-failed"?: ((event: AgentSessionTurnFailedEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onSession-turn-cancelled"?: ((event: AgentSessionTurnCancelledEvent, context: AgentSessionEventContext) => any) | undefined;
+  "onSession-run-started"?: ((event: AgentSessionRunStartedEvent, context: AgentSessionRunEventContext) => any) | undefined;
+  "onSession-run-idled"?: ((event: AgentSessionRunIdledEvent, context: AgentSessionRunEventContext) => any) | undefined;
+  "onSession-run-ended"?: ((event: AgentSessionRunEndedEvent, context: AgentSessionRunEventContext) => any) | undefined;
+  "onSystem-message-consumed"?: ((event: AgentSystemMessageConsumedEvent, context: AgentSessionEventContext) => any) | undefined;
+  onSuccess?: ((result: AgentSessionSuccess) => any) | undefined;
+  onError?: ((result: AgentSessionFailure) => any) | undefined;
+  onSettled?: ((result: AgentSessionSettlement) => any) | undefined;
+  "onTheme-change"?: ((theme: AgentEmbedTheme) => any) | undefined;
+  "onFont-size-change"?: ((fontSize: number) => any) | undefined;
+  "onInit-error"?: ((error: AgentEmbedInitError) => any) | undefined;
+}>, {
+  baseUrl: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { AgentEmbed, AgentEmbed as default };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../core/dist/index.d.mts","../src/index.ts"],"mappings":";;;;UAsBU;EACR;EACA;;UAEQ;EACR;EACA;EACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;MACE;MACA;;;;UAII;EACR;EACA;EACA;EACA;;KAEG,2BAA2B,8BAA8B;UACpD;EACR;EACA;EACA;EACA;EACA,WAAW;;UAEH,oCAAoC;EAC5C;;UAEQ,0CAA0C;EAClD;EACA;IACE;IACA;IACA,MAAM;;;UAGA,iCAAiC;EACzC;;UAEQ;EACR;EACA;EACA;EACA;;UAEQ;EACR;EACA;EACA;EACA;;KAEG,gBAAgB;EACnB;EACA;;EAEA;EACA;;UAEQ;EACR;EACA;EACA;;UAEQ;EACR,UAAU;EACV;IACE;IACA;;;UAGM;EACR;;UAEQ;EACR;EACA;EACA;EACA,WAAW;EACX;;UAEQ;EACR;EACA,UAAU;;UAEF;EACR;EACA;EACA,UAAU;;UAEF;EACR;;UAEQ;EACR;EACA,UAAU;;KAEP,+BAA+B;KAC/B,iCAAiC;KACjC,8BAA8B;KAC9B,4BAA4B;KAC5B,4BAA4B;UACvB;EACR;EACA;;UAEQ;EACR;;UAEQ;EACR;EACA;EACA;EACA;EACA;;UAEQ;EACR;EACA,SAAS;;UAED;EACR;EACA,SAAS;EACT;;UAEQ;EACR;EACA,SAAS;;KAEN,yBAAyB,sBAAsB,sBAAsB;KACrE,mBAAmB;;;KCzInB,UAAU,wBAAwB,uBAAuB,cAAc,SACxE,aAAa,aAAa,WACrB,UAAU,SAAS,UAAU,aAC7B,UAAU,UAAU,UAAU,UACnC;KACC,kBAAkB,uBAAuB,wBAAwB,cAAc,UAAU;KACzF,qBACF,cAAc,eAAe,kBAAkB,uBAC3C,MAAM,WAAW,YAAY,YAAY;cAyBnC,0BAAU,8BAAA;;;;;;;;;;;;;;EAOU,mBAAA,SAAS;EACf,aAAA,SAAS,eAAe;EACzB,YAAA,SAAS;;;;EA9B1B,QAAC,UAAU;EACF,iBAAC,OAAO;EACJ,qBAAC;EACP,eAAC,OAAO;;;;;;;;;;;;;;;EAyBS,mBAAA,SAAS;EACf,aAAA,SAAS,eAAe;EACzB,YAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA8CjC"}

package/dist/index.mjs

@@ -0,0 +1,77 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { AGENT_EVENT_NAMES, DEFAULT_AGENT_EMBED_BASE_URL, createAgentEmbed } from "@sophonsai/agent-embed-sdk";
+export * from "@sophonsai/agent-embed-sdk";
+//#region src/index.ts
+const callbackNameToEventName = (name) => name.replace(/^on/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const agentEventNames = AGENT_EVENT_NAMES.map(callbackNameToEventName);
+const agentEmbedEmits = {
+	...Object.fromEntries(agentEventNames.map((name) => [name, () => true])),
+	ready: (_instance) => true,
+	"theme-change": (_theme) => true,
+	"font-size-change": (_fontSize) => true,
+	"init-error": (_error) => true
+};
+const createAgentEventForwarders = (emit) => Object.fromEntries(AGENT_EVENT_NAMES.map((callbackName) => [callbackName, (...args) => emit(callbackNameToEventName(callbackName), ...args)]));
+const AgentEmbed = defineComponent({
+	name: "AgentEmbed",
+	props: {
+		endpoint: {
+			type: String,
+			required: true
+		},
+		token: {
+			type: String,
+			required: true
+		},
+		baseUrl: {
+			type: String,
+			default: DEFAULT_AGENT_EMBED_BASE_URL
+		},
+		threadId: String,
+		runtime_variables: Object,
+		clientTools: Object,
+		appearance: Object
+	},
+	emits: agentEmbedEmits,
+	setup(props, { emit }) {
+		const host = ref();
+		let client;
+		const createOptions = () => ({
+			endpoint: props.endpoint,
+			token: props.token,
+			baseUrl: props.baseUrl,
+			threadId: props.threadId,
+			runtime_variables: props.runtime_variables,
+			clientTools: props.clientTools,
+			appearance: props.appearance,
+			...createAgentEventForwarders(emit),
+			onReady: (instance) => emit("ready", instance),
+			onThemeChange: (theme) => emit("theme-change", theme),
+			onFontSizeChange: (fontSize) => emit("font-size-change", fontSize),
+			onInitError: (error) => emit("init-error", error)
+		});
+		onMounted(() => {
+			client = createAgentEmbed(createOptions());
+			if (host.value) client.mount(host.value).catch(() => void 0);
+		});
+		watch(() => props.appearance?.theme, (theme) => client?.updateTheme(theme), { deep: true });
+		watch(() => props.appearance?.fontSize, (fontSize) => client?.updateFontSize(fontSize));
+		watch(() => props.appearance?.header, (header) => client?.updateHeader(header), { deep: true });
+		onBeforeUnmount(() => {
+			client?.destroy();
+			client = void 0;
+		});
+		return () => h("div", {
+			ref: host,
+			style: {
+				width: "100%",
+				height: "100%",
+				minHeight: 0
+			}
+		});
+	}
+});
+//#endregion
+export { AgentEmbed, AgentEmbed as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import { defineComponent, h, onBeforeUnmount, onMounted as onVueMounted, ref, watch, type PropType } from 'vue'\nimport {\n  AGENT_EVENT_NAMES,\n  createAgentEmbed,\n  DEFAULT_AGENT_EMBED_BASE_URL,\n  type AgentAppearance,\n  type AgentClientToolHandler,\n  type AgentRuntimeVariables,\n  type AgentEvents,\n  type AgentEmbedClient,\n  type AgentEmbedInstance,\n  type AgentEmbedInitError,\n  type AgentEmbedTheme,\n} from '@sophonsai/agent-embed-sdk'\n\nexport * from '@sophonsai/agent-embed-sdk'\n\nconst callbackNameToEventName = (name: string) =>\n  name\n    .replace(/^on/, '')\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .toLowerCase()\nconst agentEventNames = AGENT_EVENT_NAMES.map(callbackNameToEventName)\ntype KebabCase<Value extends string> = Value extends `${infer First}${infer Rest}`\n  ? Rest extends Uncapitalize<Rest>\n    ? `${Lowercase<First>}${KebabCase<Rest>}`\n    : `${Lowercase<First>}-${KebabCase<Rest>}`\n  : Value\ntype CallbackEventName<Name extends string> = Name extends `on${infer EventName}` ? KebabCase<EventName> : never\ntype AgentEventEmits = {\n  [Name in keyof AgentEvents as CallbackEventName<Name & string>]-?: (\n    ...args: Parameters<NonNullable<AgentEvents[Name]>>\n  ) => boolean\n}\ntype AgentEmbedEmits = AgentEventEmits & {\n  ready: (instance: AgentEmbedInstance) => boolean\n  'theme-change': (theme: AgentEmbedTheme) => boolean\n  'font-size-change': (fontSize: number) => boolean\n  'init-error': (error: AgentEmbedInitError) => boolean\n}\nconst agentEmbedEmits = {\n  ...Object.fromEntries(agentEventNames.map((name) => [name, () => true])),\n  ready: (_instance: AgentEmbedInstance) => true,\n  'theme-change': (_theme: AgentEmbedTheme) => true,\n  'font-size-change': (_fontSize: number) => true,\n  'init-error': (_error: AgentEmbedInitError) => true,\n} as AgentEmbedEmits\ntype Emit = (event: string, ...args: unknown[]) => void\nconst createAgentEventForwarders = (emit: Emit): AgentEvents =>\n  Object.fromEntries(\n    AGENT_EVENT_NAMES.map((callbackName) => [\n      callbackName,\n      (...args: unknown[]) => emit(callbackNameToEventName(callbackName), ...args),\n    ]),\n  ) as AgentEvents\n\nexport const AgentEmbed = defineComponent({\n  name: 'AgentEmbed',\n  props: {\n    endpoint: { type: String, required: true },\n    token: { type: String, required: true },\n    baseUrl: { type: String, default: DEFAULT_AGENT_EMBED_BASE_URL },\n    threadId: String,\n    runtime_variables: Object as PropType<AgentRuntimeVariables>,\n    clientTools: Object as PropType<Record<string, AgentClientToolHandler>>,\n    appearance: Object as PropType<AgentAppearance>,\n  },\n  emits: agentEmbedEmits,\n  setup(props, { emit }) {\n    const host = ref<HTMLElement>()\n    let client: AgentEmbedClient | undefined\n    const createOptions = () => ({\n      endpoint: props.endpoint,\n      token: props.token,\n      baseUrl: props.baseUrl,\n      threadId: props.threadId,\n      runtime_variables: props.runtime_variables,\n      clientTools: props.clientTools,\n      appearance: props.appearance,\n      ...createAgentEventForwarders(emit as Emit),\n      onReady: (instance: AgentEmbedInstance) => emit('ready', instance),\n      onThemeChange: (theme: AgentEmbedTheme) => emit('theme-change', theme),\n      onFontSizeChange: (fontSize: number) => emit('font-size-change', fontSize),\n      onInitError: (error: AgentEmbedInitError) => emit('init-error', error),\n    })\n    onVueMounted(() => {\n      client = createAgentEmbed(createOptions())\n      if (host.value) {\n        void client.mount(host.value).catch(() => undefined)\n      }\n    })\n    watch(\n      () => props.appearance?.theme,\n      (theme) => client?.updateTheme(theme),\n      { deep: true },\n    )\n    watch(\n      () => props.appearance?.fontSize,\n      (fontSize) => client?.updateFontSize(fontSize),\n    )\n    watch(\n      () => props.appearance?.header,\n      (header) => client?.updateHeader(header),\n      { deep: true },\n    )\n    onBeforeUnmount(() => {\n      client?.destroy()\n      client = undefined\n    })\n    return () => h('div', { ref: host, style: { width: '100%', height: '100%', minHeight: 0 } })\n  },\n})\n\nexport default AgentEmbed\n"],"mappings":";;;;AAiBA,MAAM,2BAA2B,SAC/B,KACG,QAAQ,OAAO,EAAE,CAAC,CAClB,QAAQ,sBAAsB,OAAO,CAAC,CACtC,YAAY;AACjB,MAAM,kBAAkB,kBAAkB,IAAI,uBAAuB;AAkBrE,MAAM,kBAAkB;CACtB,GAAG,OAAO,YAAY,gBAAgB,KAAK,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC;CACvE,QAAQ,cAAkC;CAC1C,iBAAiB,WAA4B;CAC7C,qBAAqB,cAAsB;CAC3C,eAAe,WAAgC;AACjD;AAEA,MAAM,8BAA8B,SAClC,OAAO,YACL,kBAAkB,KAAK,iBAAiB,CACtC,eACC,GAAG,SAAoB,KAAK,wBAAwB,YAAY,GAAG,GAAG,IAAI,CAC7E,CAAC,CACH;AAEF,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAQ,UAAU;EAAK;EACzC,OAAO;GAAE,MAAM;GAAQ,UAAU;EAAK;EACtC,SAAS;GAAE,MAAM;GAAQ,SAAS;EAA6B;EAC/D,UAAU;EACV,mBAAmB;EACnB,aAAa;EACb,YAAY;CACd;CACA,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,OAAO,IAAiB;EAC9B,IAAI;EACJ,MAAM,uBAAuB;GAC3B,UAAU,MAAM;GAChB,OAAO,MAAM;GACb,SAAS,MAAM;GACf,UAAU,MAAM;GAChB,mBAAmB,MAAM;GACzB,aAAa,MAAM;GACnB,YAAY,MAAM;GAClB,GAAG,2BAA2B,IAAY;GAC1C,UAAU,aAAiC,KAAK,SAAS,QAAQ;GACjE,gBAAgB,UAA2B,KAAK,gBAAgB,KAAK;GACrE,mBAAmB,aAAqB,KAAK,oBAAoB,QAAQ;GACzE,cAAc,UAA+B,KAAK,cAAc,KAAK;EACvE;EACA,gBAAmB;GACjB,SAAS,iBAAiB,cAAc,CAAC;GACzC,IAAI,KAAK,OACP,OAAY,MAAM,KAAK,KAAK,CAAC,CAAC,YAAY,KAAA,CAAS;EAEvD,CAAC;EACD,YACQ,MAAM,YAAY,QACvB,UAAU,QAAQ,YAAY,KAAK,GACpC,EAAE,MAAM,KAAK,CACf;EACA,YACQ,MAAM,YAAY,WACvB,aAAa,QAAQ,eAAe,QAAQ,CAC/C;EACA,YACQ,MAAM,YAAY,SACvB,WAAW,QAAQ,aAAa,MAAM,GACvC,EAAE,MAAM,KAAK,CACf;EACA,sBAAsB;GACpB,QAAQ,QAAQ;GAChB,SAAS,KAAA;EACX,CAAC;EACD,aAAa,EAAE,OAAO;GAAE,KAAK;GAAM,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ,WAAW;GAAE;EAAE,CAAC;CAC7F;AACF,CAAC"}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@sophonsai/agent-embed-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Vue 3 adapter for Sophon Agent Embed.",
+  "type": "module",
+  "keywords": [
+    "sophonsai",
+    "agent",
+    "agent-embed",
+    "vue3"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "types": "./dist/index.d.mts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@sophonsai/agent-embed-sdk": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "jsdom": "^27.4.0",
+    "tsdown": "^0.22.14",
+    "vue": "^3.5.24"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --dts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config vitest.config.ts",
+    "example": "vite --config example/vite.config.ts"
+  }
 }