@finogeeks2026/chatkit-web 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +9 -135
  2. package/dist/index.js +5188 -4252
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # ChatKit Web SDK
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/@finogeeks2026/chatkit-web.svg)](https://www.npmjs.com/package/@finogeeks2026/chatkit-web)
4
-
5
- 面向 Web / H5 的 AI 对话 UI SDK，支持流式对话、多会话管理、主题定制、MCP-UI 渲染、Tool Call 展示等能力。基于 React 18，适用于 PC 与移动端 H5。
3
+ 面向 Web / H5 的 AI 对话 UI SDK，支持流式对话、多会话管理、主题定制、MCP-UI 渲染、Tool Call 展示等能力。
6
4
 
7
5
  ## 特性
8
6
 
@@ -17,7 +15,6 @@
17
15
 
18
16
  - React 18+
19
17
  - 现代浏览器（Chrome、Edge、Safari、Firefox）
20
- - 后端需实现 AG-UI 协议（SSE 流式、TEXT_MESSAGE_CHUNK 等事件）
21
18
 
22
19
  ## 安装
23
20
 
@@ -36,7 +33,7 @@ yarn add @finogeeks2026/chatkit-web
36
33
  最简接入方式，适合完整聊天界面场景。
37
34
 
38
35
  ```tsx
39
- import React, { useState } from 'react'
36
+ import React from 'react'
40
37
  import {
41
38
  useChat,
42
39
  ChatView,
@@ -148,8 +145,8 @@ import '@finogeeks2026/chatkit-web/dist/index.css'
148
145
 
149
146
  ### 组件
150
147
 
151
- - `ChatView`：聊天主视图（消息列表 + 输入框 + 推荐问题），支持 `emptyText`、`promptStarters` 等
152
- - `ChatHeader`：顶部栏，支持 `title`、`onMenuClick`、`onAddClick`、`showOnlineStatus`
148
+ - `ChatView`：聊天主视图（消息列表 + 输入框 + 推荐问题）
149
+ - `ChatHeader`：顶部栏
153
150
  - `HistoryPanel`：历史会话侧边栏
154
151
  - `MessageList` / `MessageBubble`：消息展示
155
152
  - `Composer`：输入框
@@ -170,120 +167,19 @@ import '@finogeeks2026/chatkit-web/dist/index.css'
170
167
 
171
168
  ## 主题定制
172
169
 
173
- 通过 CSS 变量覆盖默认主题，主要变量如下：
170
+ 通过 CSS 变量覆盖默认主题：
174
171
 
175
172
  ```css
176
173
  :root {
177
- /* 背景 */
178
174
  --chatkit-bg-primary: #ffffff;
179
175
  --chatkit-bg-secondary: #f5f5f5;
180
-
181
- /* 文字 */
182
- --chatkit-text-primary: #333333;
183
- --chatkit-text-secondary: #666666;
184
-
185
- /* 边框 */
186
- --chatkit-border: #e0e0e0;
187
-
188
- /* 用户消息气泡 */
189
- --chatkit-user-bubble-bg: #007aff;
190
- --chatkit-user-bubble-text: #ffffff;
191
-
192
- /* 输入框 */
193
- --chatkit-input-bg: #ffffff;
194
- --chatkit-input-border: #d1d5db;
195
- --chatkit-input-focus-border: #007aff;
176
+ --chatkit-text-primary: #111111;
177
+ --chatkit-border: #e5e5e5;
178
+ /* 更多变量见 SDK 源码 theme/variables.css */
196
179
  }
197
180
  ```
198
181
 
199
- 使用 `ThemeProvider` 可切换浅色 / 深色模式。完整变量列表见 `theme/variables.css`。
200
-
201
- ## 在纯 HTML 中使用
202
-
203
- 通过 CDN 与 Import Map，可在无构建工具的 HTML 页面中直接使用：
204
-
205
- ```html
206
- <!DOCTYPE html>
207
- <html lang="zh-CN">
208
- <head>
209
- <meta charset="UTF-8" />
210
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
211
- <title>ChatKit 示例</title>
212
- <link rel="stylesheet" href="https://unpkg.com/@finogeeks2026/chatkit-web@0.0.1/dist/index.css" />
213
- </head>
214
- <body>
215
- <div id="root"></div>
216
- <script type="importmap">
217
- {
218
- "imports": {
219
- "react": "https://esm.sh/react@18.2.0",
220
- "react-dom": "https://esm.sh/react-dom@18.2.0",
221
- "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
222
- "@finogeeks2026/chatkit-web": "https://unpkg.com/@finogeeks2026/chatkit-web@0.0.1/dist/index.js"
223
- }
224
- }
225
- </script>
226
- <script type="module">
227
- import React, { useState } from 'react'
228
- import { createRoot } from 'react-dom/client'
229
- import { useChat, ChatView, ChatHeader, HistoryPanel, ThemeProvider } from '@finogeeks2026/chatkit-web'
230
-
231
- function App() {
232
- const [historyOpen, setHistoryOpen] = useState(false)
233
- const {
234
- messages,
235
- sendMessage,
236
- isLoading,
237
- runtime,
238
- sessions,
239
- currentSessionId,
240
- switchSession,
241
- deleteSession,
242
- pinSession,
243
- createSession,
244
- } = useChat({
245
- apiUrl: 'https://your-api.example.com/agent',
246
- getBearerToken: () => '',
247
- persist: true,
248
- })
249
-
250
- return React.createElement(ThemeProvider, { defaultMode: 'light' },
251
- React.createElement('div', { style: { height: '100vh', display: 'flex', flexDirection: 'column' } },
252
- React.createElement(ChatHeader, {
253
- title: 'AI Assistant',
254
- onMenuClick: () => setHistoryOpen(true),
255
- onAddClick: () => createSession(),
256
- }),
257
- React.createElement(ChatView, {
258
- messages,
259
- onSend: sendMessage,
260
- isLoading,
261
- promptStarters: ['推荐相关资源', '帮我分析'],
262
- runtime,
263
- }),
264
- React.createElement(HistoryPanel, {
265
- open: historyOpen,
266
- onClose: () => setHistoryOpen(false),
267
- sessions,
268
- currentSessionId,
269
- onSelect: switchSession,
270
- onDelete: deleteSession,
271
- onPin: pinSession,
272
- title: '历史对话',
273
- })
274
- )
275
- )
276
- }
277
-
278
- createRoot(document.getElementById('root')).render(React.createElement(App))
279
- </script>
280
- </body>
281
- </html>
282
- ```
283
-
284
- **说明**：
285
- - 将 `apiUrl`、`getBearerToken` 替换为实际配置
286
- - 需通过 HTTP 服务访问（不能直接 `file://` 打开），可用 `npx serve .` 或 `python -m http.server` 本地起服务
182
+ 使用 `ThemeProvider` 可切换浅色 / 深色模式。
287
183
 
288
184
  ## 在 WebView 中使用
289
185
 
@@ -293,28 +189,6 @@ SDK 支持在 App 内 WebView 中加载的 H5 页面使用。需确保：
293
189
  - WebView 已授予麦克风权限（若使用后续语音功能）
294
190
  - `apiUrl` 与鉴权配置正确
295
191
 
296
- ## TypeScript
297
-
298
- SDK 提供完整 TypeScript 类型定义，`main`、`module`、`types` 已在 `package.json` 中配置，开箱即用。
299
-
300
- ## 框架兼容性
301
-
302
- | 框架 | 支持 |
303
- |------|------|
304
- | React 18+ | ✅ 原生支持 |
305
- | Vue / Angular / 其他 | ❌ 需通过 iframe 嵌入，或等待 Web Component 版本 |
306
-
307
- ## 常见问题
308
-
309
- **Q: 消息不流式更新？**
310
- A: 确认后端按 AG-UI 协议返回 `TEXT_MESSAGE_CHUNK` 等 SSE 事件。
311
-
312
- **Q: 样式错乱或缺失？**
313
- A: 务必引入 `import '@finogeeks2026/chatkit-web/dist/index.css'`。
314
-
315
- **Q: 会话不持久化？**
316
- A: 在 `useChat` 中设置 `persist: true`，并确保浏览器支持 IndexedDB。
317
-
318
192
  ## License
319
193
 
320
194
  MIT