@cloudbase/agent-react-ui 0.0.23 → 0.0.24
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.
- package/README.md +14 -45
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,30 +1,22 @@
|
|
|
1
1
|
# @cloudbase/agent-react-ui
|
|
2
2
|
|
|
3
|
-
`@cloudbase/agent-react-ui`
|
|
3
|
+
`@cloudbase/agent-react-ui` 提供可直接接入 React 项目的聊天界面组件，可用于快速对接**符合 AG-UI 协议的 AI Agent**。当前组件仅作参考，推荐使用 [@cloudbase/agent-react-core](https://www.npmjs.com/package/@cloudbase/agent-react-core) 自定义 UI。
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @cloudbase/agent-react-core @cloudbase/agent-react-ui
|
|
8
|
+
npm install @cloudbase/agent-react-core @cloudbase/agent-react-ui @cloudbase/js-sdk
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
包入口已经包含样式导入：
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
import "./css/index.css";
|
|
17
|
-
```
|
|
11
|
+
## 快速开始
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
导入样式：
|
|
20
14
|
|
|
21
15
|
```ts
|
|
22
16
|
import "@cloudbase/agent-react-ui/styles.css";
|
|
23
17
|
```
|
|
24
18
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
`AgKitUI` 依赖 `@cloudbase/agent-react-core` 提供的运行时上下文，因此需要与 `AgKit` 一起使用。
|
|
19
|
+
引用：
|
|
28
20
|
|
|
29
21
|
```tsx
|
|
30
22
|
import cloudbase from "@cloudbase/js-sdk";
|
|
@@ -32,6 +24,9 @@ import { AgKit, CloudBaseTransport } from "@cloudbase/agent-react-core";
|
|
|
32
24
|
import { AgKitUI } from "@cloudbase/agent-react-ui";
|
|
33
25
|
|
|
34
26
|
const app = cloudbase.init({ env: "your-env-id" });
|
|
27
|
+
|
|
28
|
+
app.auth.signInAnonymously();
|
|
29
|
+
|
|
35
30
|
const transport = new CloudBaseTransport({
|
|
36
31
|
app,
|
|
37
32
|
agentId: "your-agent-id",
|
|
@@ -40,7 +35,8 @@ const transport = new CloudBaseTransport({
|
|
|
40
35
|
export function App() {
|
|
41
36
|
return (
|
|
42
37
|
<AgKit transport={transport}>
|
|
43
|
-
|
|
38
|
+
{/* AgKitUI 默认继承父元素宽高 */}
|
|
39
|
+
<div style={{ height: "600px", width: "800px" }}>
|
|
44
40
|
<AgKitUI />
|
|
45
41
|
</div>
|
|
46
42
|
</AgKit>
|
|
@@ -48,6 +44,9 @@ export function App() {
|
|
|
48
44
|
}
|
|
49
45
|
```
|
|
50
46
|
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
51
50
|
---
|
|
52
51
|
|
|
53
52
|
## API 参考
|
|
@@ -67,7 +66,7 @@ export function App() {
|
|
|
67
66
|
| `emptyTitleClassName` | 否 | `string` | 空状态标题类名 |
|
|
68
67
|
| `inputPlaceholder` | 否 | `string` | 输入框占位文本，未提供时使用 locale 默认值 |
|
|
69
68
|
| `suggestions` | 否 | `string[]` | 聊天为空时显示的建议问题列表 |
|
|
70
|
-
| `locale` | 否 | `
|
|
69
|
+
| `locale` | 否 | `zh-CN/en` | 内置 UI 文案语言，默认 `"zh-CN"` |
|
|
71
70
|
| `onSuggestionClick` | 否 | `(suggestion: string) => void` | 点击建议问题时触发的回调 |
|
|
72
71
|
|
|
73
72
|
#### 示例：基础用法
|
|
@@ -103,33 +102,3 @@ export function App() {
|
|
|
103
102
|
emptyTitleClassName="my-empty-title"
|
|
104
103
|
/>
|
|
105
104
|
```
|
|
106
|
-
|
|
107
|
-
---
|
|
108
|
-
|
|
109
|
-
### `LocaleCode`
|
|
110
|
-
|
|
111
|
-
内置语言类型，用于指定 `AgKitUI` 的 UI 文案语言。
|
|
112
|
-
|
|
113
|
-
```ts
|
|
114
|
-
type LocaleCode = "zh-CN" | "en-US";
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
| 值 | 说明 |
|
|
118
|
-
| --- | --- |
|
|
119
|
-
| `"zh-CN"` | 简体中文（默认） |
|
|
120
|
-
| `"en-US"` | 英语 |
|
|
121
|
-
|
|
122
|
-
可直接用于业务代码中的类型标注：
|
|
123
|
-
|
|
124
|
-
```tsx
|
|
125
|
-
import { type LocaleCode } from "@cloudbase/agent-react-ui";
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
---
|
|
129
|
-
|
|
130
|
-
## 使用说明
|
|
131
|
-
|
|
132
|
-
接入时通常由 `@cloudbase/agent-react-core` 提供运行时能力，包括消息状态、发送逻辑、工具注册和传输层；`@cloudbase/agent-react-ui` 负责聊天界面展示。
|
|
133
|
-
|
|
134
|
-
如果需要快速接入默认聊天窗口，通常只需完成运行时初始化后渲染 `AgKitUI` 即可。
|
|
135
|
-
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudbase/agent-react-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"uuid": "^13.0.0",
|
|
47
47
|
"vite": "^7.3.1",
|
|
48
48
|
"zod": "^4.3.6",
|
|
49
|
-
"@cloudbase/agent-react-core": "^0.0.
|
|
49
|
+
"@cloudbase/agent-react-core": "^0.0.24"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@cloudbase/js-sdk": "^2.25.4",
|