@cloudbase/agent-react-ui 1.0.1-alpha.32 → 1.0.1-alpha.33
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 +51 -39
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -48,35 +48,35 @@ export function App() {
|
|
|
48
48
|
}
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
---
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
## API 参考
|
|
54
|
+
|
|
55
|
+
### `AgKitUI`
|
|
56
|
+
|
|
57
|
+
核心聊天界面组件，内置了完整的消息渲染、工具调用展示、输入框和国际化支持。
|
|
58
|
+
|
|
59
|
+
#### `AgKitUIProps`
|
|
60
|
+
|
|
61
|
+
| 选项 | 必填 | 类型 | 说明 |
|
|
62
|
+
| --- | --- | --- | --- |
|
|
63
|
+
| `className` | 否 | `string` | 聊天主体布局类名 |
|
|
64
|
+
| `containerClassName` | 否 | `string` | 最外层根容器类名 |
|
|
65
|
+
| `messagesClassName` | 否 | `string` | 消息列表区域类名 |
|
|
66
|
+
| `inputClassName` | 否 | `string` | 输入框包裹层类名 |
|
|
67
|
+
| `emptyTitleClassName` | 否 | `string` | 空状态标题类名 |
|
|
68
|
+
| `inputPlaceholder` | 否 | `string` | 输入框占位文本，未提供时使用 locale 默认值 |
|
|
69
|
+
| `suggestions` | 否 | `string[]` | 聊天为空时显示的建议问题列表 |
|
|
70
|
+
| `onSuggestionClick` | 否 | `(suggestion: string) => void` | 点击建议问题时触发的回调 |
|
|
71
|
+
| `locale` | 否 | `LocaleCode` | 内置 UI 文案语言，默认 `"zh-CN"` |
|
|
72
|
+
|
|
73
|
+
#### 示例：基础用法
|
|
54
74
|
|
|
55
75
|
```tsx
|
|
56
|
-
|
|
57
|
-
className?: string;
|
|
58
|
-
containerClassName?: string;
|
|
59
|
-
messagesClassName?: string;
|
|
60
|
-
inputClassName?: string;
|
|
61
|
-
emptyTitleClassName?: string;
|
|
62
|
-
inputPlaceholder?: string;
|
|
63
|
-
suggestions?: string[];
|
|
64
|
-
onSuggestionClick?: (suggestion: string) => void;
|
|
65
|
-
locale?: LocaleCode;
|
|
66
|
-
}
|
|
76
|
+
<AgKitUI />
|
|
67
77
|
```
|
|
68
78
|
|
|
69
|
-
|
|
70
|
-
- `containerClassName`：最外层容器类名
|
|
71
|
-
- `messagesClassName`：消息列表区域类名
|
|
72
|
-
- `inputClassName`：输入区容器类名
|
|
73
|
-
- `emptyTitleClassName`：空状态标题类名
|
|
74
|
-
- `inputPlaceholder`：输入框占位文本
|
|
75
|
-
- `suggestions`：空状态下显示的建议问题
|
|
76
|
-
- `onSuggestionClick`：点击建议问题时触发的回调
|
|
77
|
-
- `locale`：内置文案语言，当前支持 `zh-CN` 和 `en-US`
|
|
78
|
-
|
|
79
|
-
## 示例：建议问题
|
|
79
|
+
#### 示例：自定义建议与语言
|
|
80
80
|
|
|
81
81
|
```tsx
|
|
82
82
|
<AgKitUI
|
|
@@ -93,15 +93,39 @@ interface AgKitUIProps {
|
|
|
93
93
|
/>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
#### 示例：自定义样式
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<AgKitUI
|
|
100
|
+
containerClassName="my-chat-container"
|
|
101
|
+
messagesClassName="my-messages"
|
|
102
|
+
inputClassName="my-input"
|
|
103
|
+
emptyTitleClassName="my-empty-title"
|
|
104
|
+
/>
|
|
105
|
+
```
|
|
97
106
|
|
|
98
|
-
|
|
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
|
+
可直接用于业务代码中的类型标注：
|
|
99
123
|
|
|
100
124
|
```tsx
|
|
101
125
|
import { type LocaleCode } from "@cloudbase/agent-react-ui";
|
|
102
126
|
```
|
|
103
127
|
|
|
104
|
-
|
|
128
|
+
---
|
|
105
129
|
|
|
106
130
|
## 使用说明
|
|
107
131
|
|
|
@@ -109,15 +133,3 @@ import { type LocaleCode } from "@cloudbase/agent-react-ui";
|
|
|
109
133
|
|
|
110
134
|
如果需要快速接入默认聊天窗口，通常只需完成运行时初始化后渲染 `AgKitUI` 即可。
|
|
111
135
|
|
|
112
|
-
## 参考
|
|
113
|
-
|
|
114
|
-
仓库内提供了可运行示例：
|
|
115
|
-
|
|
116
|
-
- [example/App.tsx](/Users/choyjiang/Workspace/AG-Kit/typescript-sdk/packages/ui/react-ui/example/App.tsx)
|
|
117
|
-
|
|
118
|
-
示例覆盖了以下内容：
|
|
119
|
-
|
|
120
|
-
- `AgKit` 与 `AgKitUI` 的组合使用
|
|
121
|
-
- `CloudBaseTransport` 初始化
|
|
122
|
-
- `useClientTool` 注册客户端工具
|
|
123
|
-
- `useToolCall` 自定义工具渲染
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudbase/agent-react-ui",
|
|
3
|
-
"version": "1.0.1-alpha.
|
|
3
|
+
"version": "1.0.1-alpha.33",
|
|
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": "^1.0.1-alpha.
|
|
49
|
+
"@cloudbase/agent-react-core": "^1.0.1-alpha.33"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@cloudbase/js-sdk": "^2.25.4",
|