@cloudbase/agent-react-ui 0.0.23

package/README.md

@@ -0,0 +1,135 @@
+# @cloudbase/agent-react-ui
+
+`@cloudbase/agent-react-ui` 提供可直接接入项目的 React 聊天界面组件，适用于希望快速完成 AG-Kit 聊天窗口搭建的场景。
+
+## 安装
+
+```bash
+npm install @cloudbase/agent-react-core @cloudbase/agent-react-ui
+```
+
+## 样式引入
+
+包入口已经包含样式导入：
+
+```ts
+import "./css/index.css";
+```
+
+在常规的 React 构建环境中，直接使用组件即可。如果需要手动引入构建后的样式文件，可以使用：
+
+```ts
+import "@cloudbase/agent-react-ui/styles.css";
+```
+
+## 快速开始
+
+`AgKitUI` 依赖 `@cloudbase/agent-react-core` 提供的运行时上下文，因此需要与 `AgKit` 一起使用。
+
+```tsx
+import cloudbase from "@cloudbase/js-sdk";
+import { AgKit, CloudBaseTransport } from "@cloudbase/agent-react-core";
+import { AgKitUI } from "@cloudbase/agent-react-ui";
+
+const app = cloudbase.init({ env: "your-env-id" });
+const transport = new CloudBaseTransport({
+  app,
+  agentId: "your-agent-id",
+});
+
+export function App() {
+  return (
+    <AgKit transport={transport}>
+      <div style={{ height: "600px" }}>
+        <AgKitUI />
+      </div>
+    </AgKit>
+  );
+}
+```
+
+---
+
+## API 参考
+
+### `AgKitUI`
+
+核心聊天界面组件，内置了完整的消息渲染、工具调用展示、输入框和国际化支持。
+
+#### `AgKitUIProps`
+
+| 选项 | 必填 | 类型 | 说明 |
+| --- | --- | --- | --- |
+| `className` | 否 | `string` | 聊天主体布局类名 |
+| `containerClassName` | 否 | `string` | 最外层根容器类名 |
+| `messagesClassName` | 否 | `string` | 消息列表区域类名 |
+| `inputClassName` | 否 | `string` | 输入框包裹层类名 |
+| `emptyTitleClassName` | 否 | `string` | 空状态标题类名 |
+| `inputPlaceholder` | 否 | `string` | 输入框占位文本，未提供时使用 locale 默认值 |
+| `suggestions` | 否 | `string[]` | 聊天为空时显示的建议问题列表 |
+| `locale` | 否 | `LocaleCode` | 内置 UI 文案语言，默认 `"zh-CN"` |
+| `onSuggestionClick` | 否 | `(suggestion: string) => void` | 点击建议问题时触发的回调 |
+
+#### 示例：基础用法
+
+```tsx
+<AgKitUI />
+```
+
+#### 示例：自定义建议与语言
+
+```tsx
+<AgKitUI
+  locale="zh-CN"
+  inputPlaceholder="输入你的问题"
+  suggestions={[
+    "帮我总结今天的工作",
+    "生成一份周报模板",
+    "解释这个接口的用途",
+  ]}
+  onSuggestionClick={(value) => {
+    console.log("clicked suggestion:", value);
+  }}
+/>
+```
+
+#### 示例：自定义样式
+
+```tsx
+<AgKitUI
+  containerClassName="my-chat-container"
+  messagesClassName="my-messages"
+  inputClassName="my-input"
+  emptyTitleClassName="my-empty-title"
+/>
+```
+
+---
+
+### `LocaleCode`
+
+内置语言类型，用于指定 `AgKitUI` 的 UI 文案语言。
+
+```ts
+type LocaleCode = "zh-CN" | "en-US";
+```
+
+| 值 | 说明 |
+| --- | --- |
+| `"zh-CN"` | 简体中文（默认） |
+| `"en-US"` | 英语 |
+
+可直接用于业务代码中的类型标注：
+
+```tsx
+import { type LocaleCode } from "@cloudbase/agent-react-ui";
+```
+
+---
+
+## 使用说明
+
+接入时通常由 `@cloudbase/agent-react-core` 提供运行时能力，包括消息状态、发送逻辑、工具注册和传输层；`@cloudbase/agent-react-ui` 负责聊天界面展示。
+
+如果需要快速接入默认聊天窗口，通常只需完成运行时初始化后渲染 `AgKitUI` 即可。
+

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}