@ai-group/chat-sdk 0.2.5

package/README.md

@@ -0,0 +1,239 @@
+# X-Group AI SDK
+
+面向 AI 中台平台的前端集成 SDK，支持 OAuth2 安全认证、聊天机器人、智能编辑器、多模态对话，适配 SaaS / 私有化双场景。
+
+## 安装
+
+```bash
+npm install @ai-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',
+      }}
+    />
+  );
+}
+```
+
+### 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>
+  );
+}
+```
+
+### 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>
+  );
+}
+```
+
+### 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 参考
+
+### 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 {
+        /* 按钮样式覆盖 */
+      }
+    `}
+  />
+);
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建
+pnpm build
+```
+
+## 许可证
+
+MIT 

package/dist/esm/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/esm/client/base.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"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":""}

package/dist/esm/client/restClient.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/client/restClient.ts"],"sourcesContent":[""],"mappings":""}

package/dist/esm/client/wsClient.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/client/wsClient.ts"],"sourcesContent":[""],"mappings":""}