@ai-group/chat-sdk 0.2.5 → 0.2.8

package/README.md

@@ -1,239 +1,118 @@
-# X-Group AI SDK
+# XAi Web SDK
 
-面向 AI 中台平台的前端集成 SDK，支持 OAuth2 安全认证、聊天机器人、智能编辑器、多模态对话，适配 SaaS / 私有化双场景。
+一个用于集成 AI 聊天机器人的 Web SDK。
 
 ## 安装
 
 ```bash
-npm install @ai-group/chat-sdk
+npm install @x-group/chat-sdk
 ```
 
 ## 使用方法
 
-### 1. 独立使用 XAiChatbot
-
-XAiChatbot 可以独立使用，不依赖 Provider：
-
-```tsx
-import { XAiChatbot } from '@ai-group/chat-sdk';
-
-function App() {
-  const [messages, setMessages] = useState([]);
-  
-  return (
-    <XAiChatbot
-      messages={messages}
-      onSend={(type, content) => {
-        console.log('发送消息:', type, content);
-        // 处理消息发送
-      }}
-      onClear={() => {
-        console.log('清空消息');
-        setMessages([]);
-      }}
-      onStop={() => {
-        console.log('停止生成');
-      }}
-      navbarShow={true}
-      navbar={{
-        title: '独立聊天机器人',
-        subtitle: '不依赖 Provider',
-        avatar: 'https://example.com/avatar.png',
-      }}
-    />
-  );
-}
+### 方式一：推荐写法（Coze 风格）
+
+```javascript
+import XAiWebSDK from '@x-group/chat-sdk';
+
+// 创建 SDK 实例 - 类似 Coze 的写法
+const chatbot = new XAiWebSDK.initChatbot({
+  url: 'https://your-api-server.com',
+  token: 'your-token',
+  config: {
+    appNo: 'your-app-no',
+    pt: 'platform',
+    tc: 'tenant',
+  },
+  componentProps: {
+    id: 'chatbot-container',
+    width: '400px',
+    height: '600px',
+  },
+  onError: (error) => {
+    console.error('Chatbot init error:', error);
+  },
+  onSuccess: (appInfo) => {
+    console.log('Chatbot init success:', appInfo);
+  },
+});
+
+// 销毁实例
+chatbot.unmount();
 ```
 
-### 2. 使用 XAiProvider 管理消息
-
-XAiProvider 可以全面接管 XAiChatbot 的消息管理、AI 交互等功能：
-
-```tsx
-import { XAiProvider, XAiChatbot } from '@ai-group/chat-sdk';
-
-function App() {
-  return (
-    <XAiProvider
-      url="https://api.example.com/ai"
-      token="your-token-here"
-      providerId="demo-provider"
-    >
-      <XAiChatbot
-        navbarShow={true}
-        navbar={{
-          title: 'Provider 聊天机器人',
-          subtitle: '由 Provider 管理消息',
-          avatar: 'https://example.com/avatar.png',
-        }}
-      />
-    </XAiProvider>
-  );
-}
+### 方式二：兼容写法
+
+```javascript
+// 使用静态方法（不推荐，但保持兼容）
+const chatbot = XAiWebSDK.create({
+  url: 'https://your-api-server.com',
+  token: 'your-token',
+  config: {
+    appNo: 'your-app-no',
+    pt: 'platform',
+    tc: 'tenant',
+  },
+  componentProps: {
+    id: 'chatbot-container',
+  },
+  onError: (error) => {
+    console.error('Chatbot init error:', error);
+  },
+  onSuccess: (appInfo) => {
+    console.log('Chatbot init success:', appInfo);
+  },
+});
 ```
 
-### 3. 多个 Provider 实例
-
-你可以在同一个应用中创建多个 Provider 实例：
-
-```tsx
-import { XAiProvider, XAiChatbot } from '@ai-group/chat-sdk';
-
-function App() {
-  return (
-    <div style={{ display: 'flex', gap: '20px' }}>
-      {/* 第一个聊天机器人 */}
-      <XAiProvider
-        url="https://api.example.com/ai"
-        token="token-1"
-        providerId="provider-1"
-      >
-        <XAiChatbot
-          navbarShow={true}
-          navbar={{
-            title: 'Provider 1',
-            subtitle: '第一个聊天机器人',
-          }}
-        />
-      </XAiProvider>
-      
-      {/* 第二个聊天机器人 */}
-      <XAiProvider
-        url="https://api.example.com/ai"
-        token="token-2"
-        providerId="provider-2"
-      >
-        <XAiChatbot
-          navbarShow={true}
-          navbar={{
-            title: 'Provider 2',
-            subtitle: '第二个聊天机器人',
-          }}
-        />
-      </XAiProvider>
-    </div>
-  );
-}
+### 方式三：直接指定容器
+
+```javascript
+const container = document.getElementById('my-chatbot');
+const chatbot = new XAiWebSDK(container, {
+  url: 'https://your-api-server.com',
+  token: 'your-token',
+  config: {
+    appNo: 'your-app-no',
+    pt: 'platform',
+    tc: 'tenant',
+  },
+  onError: (error) => {
+    console.error('Chatbot init error:', error);
+  },
+  onSuccess: (appInfo) => {
+    console.log('Chatbot init success:', appInfo);
+  },
+});
 ```
 
-### 4. 自定义消息处理
-
-Provider 模式支持自定义消息处理逻辑：
-
-```tsx
-import { XAiProvider, XAiChatbot } from '@ai-group/chat-sdk';
-
-function App() {
-  return (
-    <XAiProvider
-      url="https://api.example.com/ai"
-      token="your-token-here"
-      providerId="custom-provider"
-    >
-      <XAiChatbot
-        navbarShow={true}
-        navbar={{
-          title: '自定义处理',
-          subtitle: '自定义消息处理逻辑',
-        }}
-        messageActions={[
-          {
-            key: 'custom',
-            icon: <span>🔧</span>,
-            tooltip: '自定义操作',
-          },
-        ]}
-        onMessagesActionsCallback={(index, data) => {
-          console.log('自定义操作:', index, data);
-        }}
-      />
-    </XAiProvider>
-  );
-}
-```
-
-## Provider 模式的优势
-
-### 1. 自动消息管理
-- Provider 自动处理消息的发送、接收、状态更新
-- 支持流式响应和实时更新
-- 自动处理错误状态和重试机制
-
-### 2. 统一的状态管理
-- 所有聊天机器人的状态都在 Provider 中统一管理
-- 支持消息历史记录、清空、重新生成等功能
-- 提供 loading 状态和错误处理
-
-### 3. 灵活的配置
-- 支持多个 Provider 实例，每个实例可以有不同的配置
-- 支持 Token 刷新机制
-- 支持自定义 AI 客户端配置
-
-### 4. 向后兼容
-- XAiChatbot 可以独立使用，不依赖 Provider
-- 现有的回调函数（onSend、onClear、onStop）仍然有效
-- 可以平滑迁移到 Provider 模式
+## API 参数
 
-## API 参考
+### XAiSDKProps
 
-### XAiProvider Props
-
-| 属性 | 类型 | 必填 | 说明 |
+| 参数 | 类型 | 必填 | 说明 |
 |------|------|------|------|
 | url | string | 是 | AI 服务地址 |
 | token | string | 是 | 认证 token |
-| providerId | string | 否 | Provider 唯一标识 |
-| onRefreshToken | () => Promise<string> | 否 | Token 刷新回调 |
-| children | ReactNode | 是 | 子组件 |
-
-### XAiChatbot Props
-
-XAiChatbot 支持所有原有的 props，同时在使用 Provider 时会自动使用 Provider 的状态和方法。
-
-## 样式覆盖
-
-### 覆盖 .ant-sender 样式
-
-你可以通过以下方式覆盖 Sender 组件的样式：
-
-```tsx
-// 在 GlobalStyle 中添加
-export const GlobalStyle: React.FC = () => (
-  <Global
-    styles={globalCss`
-      .ant-sender {
-        /* 在这里添加你想要覆盖的样式 */
-        border-radius: 8px !important;
-        background-color: #f5f5f5 !important;
-        border: 1px solid #d9d9d9 !important;
-      }
-      
-      /* 如果需要覆盖 Sender 组件内部的特定元素 */
-      .ant-sender .ant-input {
-        /* 输入框样式覆盖 */
-      }
-      
-      .ant-sender .ant-btn {
-        /* 按钮样式覆盖 */
-      }
-    `}
-  />
-);
-```
+| config | object | 是 | 配置信息，包含 appNo、pt、tc 等 |
+| componentProps | object | 否 | 容器属性，支持 id 和任意 CSS 样式 |
+| onError | function | 否 | 错误回调函数 |
+| onSuccess | function | 否 | 成功回调函数 |
 
-## 开发
+### 回调函数
 
-```bash
-# 安装依赖
-pnpm install
+#### onError(error)
+- `error.code`: 错误代码
+- `error.message`: 错误信息
 
-# 启动开发服务器
-pnpm dev
-
-# 构建
-pnpm build
-```
+#### onSuccess(appInfo)
+- `appInfo`: 应用信息对象，包含应用配置等
 
-## 许可证
+## 错误代码
 
-MIT 
+| 代码 | 说明 |
+|------|------|
+| APP_NOT_ENABLE | 应用未启用 |
+| APP_DELETED | 应用已下架 |
+| APP_NOT_FOUND | 应用未找到 |
+| API_ERROR | API 调用错误 | 

package/dist/cjs/assets/document.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5备份</title>
+    <g id="自主规划智能体25.7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="预览调试" transform="translate(-100, -109)" stroke="#3961F2">
+            <g id="编组" transform="translate(84, 96)">
+                <g id="编组-5备份" transform="translate(16, 13)">
+                    <path d="M9.63770387,0.5 L13.5,4.3563963 L13.5,12 C13.5,12.4142136 13.3321068,12.7892136 13.0606602,13.0606602 C12.7892136,13.3321068 12.4142136,13.5 12,13.5 L2,13.5 C1.58578644,13.5 1.21078644,13.3321068 0.939339828,13.0606602 C0.667893219,12.7892136 0.5,12.4142136 0.5,12 L0.5,2 C0.5,1.58578644 0.667893219,1.21078644 0.939339828,0.939339828 C1.21078644,0.667893219 1.58578644,0.5 2,0.5 L9.63770387,0.5 Z" id="矩形"></path>
+                    <line x1="3.5" y1="5.5" x2="7.5" y2="5.5" id="直线" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <path d="M9.59276104,1.42542483 L9.59276104,3.42542483 C9.59276104,3.97770958 10.0404763,4.42542483 10.592761,4.42542483 L13.0804805,4.42542483 L13.0804805,4.42542483" id="直线备份-2" stroke-linecap="square"></path>
+                    <line x1="3.5" y1="8.5" x2="9.5" y2="8.5" id="直线备份" stroke-linecap="round" stroke-linejoin="round"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/cjs/client/base.d.ts

@@ -0,0 +1,9 @@
+import { BubbleDataType } from '@ant-design/x/es/bubble/BubbleList';
+export interface AiClient {
+    appName: string;
+    icon: string;
+    send(message: string): Promise<any>;
+    stream?(message: string, onMessage: (msg: any) => void): void;
+    close?(): void;
+}
+export type MessageType = BubbleDataType;

package/dist/cjs/client/base.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/client/base.ts
+var base_exports = {};
+module.exports = __toCommonJS(base_exports);
+//# sourceMappingURL=base.js.map

package/dist/cjs/client/base.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/client/base.ts"],
+  "sourcesContent": ["// baseClient.ts\nimport { BubbleDataType } from '@ant-design/x/es/bubble/BubbleList';\n\nexport interface AiClient {\n  appName: string;\n  icon: string;\n  send(message: string): Promise<any>;\n  stream?(message: string, onMessage: (msg: any) => void): void;\n  close?(): void;\n}\n\nexport type MessageType = BubbleDataType;\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/client/restClient.js

@@ -0,0 +1 @@
+//# sourceMappingURL=restClient.js.map

package/dist/cjs/client/restClient.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/cjs/client/wsClient.js

@@ -0,0 +1 @@
+//# sourceMappingURL=wsClient.js.map

package/dist/cjs/client/wsClient.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import XAiChatbot from '.';
+declare const meta: Meta<typeof XAiChatbot>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const 基础用法: Story;
+export declare const 在Provider中使用: Story;
+export declare const 多个Provider实例: Story;
+export declare const 新架构演示: Story;
+export declare const 架构对比演示: Story;