@cloudbase/agent-react-ui 1.0.1-alpha.32

package/README.md

@@ -0,0 +1,123 @@
+# @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>
+  );
+}
+```
+
+## `AgKitUIProps`
+
+`AgKitUI` 提供以下常用属性：
+
+```tsx
+interface AgKitUIProps {
+  className?: string;
+  containerClassName?: string;
+  messagesClassName?: string;
+  inputClassName?: string;
+  emptyTitleClassName?: string;
+  inputPlaceholder?: string;
+  suggestions?: string[];
+  onSuggestionClick?: (suggestion: string) => void;
+  locale?: LocaleCode;
+}
+```
+
+- `className`：聊天主体布局类名
+- `containerClassName`：最外层容器类名
+- `messagesClassName`：消息列表区域类名
+- `inputClassName`：输入区容器类名
+- `emptyTitleClassName`：空状态标题类名
+- `inputPlaceholder`：输入框占位文本
+- `suggestions`：空状态下显示的建议问题
+- `onSuggestionClick`：点击建议问题时触发的回调
+- `locale`：内置文案语言，当前支持 `zh-CN` 和 `en-US`
+
+## 示例：建议问题
+
+```tsx
+<AgKitUI
+  locale="zh-CN"
+  inputPlaceholder="输入你的问题"
+  suggestions={[
+    "帮我总结今天的工作",
+    "生成一份周报模板",
+    "解释这个接口的用途",
+  ]}
+  onSuggestionClick={(value) => {
+    console.log("clicked suggestion:", value);
+  }}
+/>
+```
+
+## 语言支持
+
+内置语言类型通过 `LocaleCode` 导出，可直接用于业务代码中的类型标注：
+
+```tsx
+import { type LocaleCode } from "@cloudbase/agent-react-ui";
+```
+
+默认语言为 `zh-CN`。
+
+## 使用说明
+
+接入时通常由 `@cloudbase/agent-react-core` 提供运行时能力，包括消息状态、发送逻辑、工具注册和传输层；`@cloudbase/agent-react-ui` 负责聊天界面展示。
+
+如果需要快速接入默认聊天窗口，通常只需完成运行时初始化后渲染 `AgKitUI` 即可。
+
+## 参考
+
+仓库内提供了可运行示例：
+
+- [example/App.tsx](/Users/choyjiang/Workspace/AG-Kit/typescript-sdk/packages/ui/react-ui/example/App.tsx)
+
+示例覆盖了以下内容：
+
+- `AgKit` 与 `AgKitUI` 的组合使用
+- `CloudBaseTransport` 初始化
+- `useClientTool` 注册客户端工具
+- `useToolCall` 自定义工具渲染

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"
+}