@next-bricks/ai-portal 0.70.1 → 0.70.3

package/docs/ai-employees.react.md

@@ -0,0 +1,106 @@
+---
+tagName: ai-portal.ai-employees
+displayName: WrappedAiPortalAiEmployees
+description: AI 数字人卡片列表，按行业和角色分组展示，支持 Tab 切换行业和点击跳转。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalAiEmployees
+
+> AI 数字人卡片列表，按行业和角色分组展示，支持 Tab 切换行业和点击跳转。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalAiEmployees } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                      | 必填 | 默认值 | 说明                                                                    |
+| ----------- | ------------------------- | ---- | ------ | ----------------------------------------------------------------------- |
+| list        | `Employee[] \| undefined` | 否   | -      | 数字人列表数据                                                          |
+| industries  | `string[] \| undefined`   | 否   | -      | 行业列表，用于指定 Tab 的顺序，未在此列表中的行业将按出现顺序附加在末尾 |
+| urlTemplate | `string \| undefined`     | 否   | -      | 跳转到数字人详情页的 URL 模板，支持 {name} 等数字人字段插值             |
+| stickyTop   | `number \| undefined`     | 否   | -      | 行业 Tab 栏吸顶时距顶部的距离（px），不设置则不吸顶                     |
+
+## Examples
+
+### Basic
+
+展示 AI 数字人卡片列表，按行业 Tab 分组浏览。
+
+```tsx
+<WrappedAiPortalAiEmployees
+  list={[
+    {
+      name: "运维工程师小李",
+      industry: "IT",
+      role: "运维专家",
+      description: "专注于服务器运维和故障处理。",
+    },
+    {
+      name: "开发工程师小王",
+      industry: "IT",
+      role: "开发专家",
+      description: "擅长全栈开发和架构设计。",
+    },
+    {
+      name: "数据分析师小张",
+      industry: "金融",
+      role: "数据分析",
+      description: "专注于金融数据分析和风险评估。",
+    },
+  ]}
+/>
+```
+
+### With URL Template
+
+配置 urlTemplate 属性，使每个数字人卡片点击后跳转到对应详情页。
+
+```tsx
+<WrappedAiPortalAiEmployees
+  urlTemplate="/employees/{name}"
+  list={[
+    {
+      name: "运维工程师小李",
+      industry: "IT",
+      role: "运维专家",
+      description: "专注于服务器运维和故障处理。",
+    },
+    {
+      name: "开发工程师小王",
+      industry: "IT",
+      role: "开发专家",
+      description: "擅长全栈开发和架构设计。",
+    },
+  ]}
+/>
+```
+
+### With Industries and Sticky Tab
+
+配置 industries 和 stickyTop 属性，控制行业 Tab 顺序及吸顶效果。
+
+```tsx
+<WrappedAiPortalAiEmployees
+  industries={["金融", "IT"]}
+  stickyTop={0}
+  list={[
+    {
+      name: "数据分析师小张",
+      industry: "金融",
+      role: "数据分析",
+      description: "专注于金融数据分析和风险评估。",
+    },
+    {
+      name: "运维工程师小李",
+      industry: "IT",
+      role: "运维专家",
+      description: "专注于服务器运维和故障处理。",
+    },
+  ]}
+/>
+```

package/docs/blank-state.md

@@ -1,12 +1,72 @@
-构件 `ai-portal.blank-state`
+---
+tagName: ai-portal.blank-state
+displayName: WrappedAiPortalBlankState
+description: 空状态展示组件，提供预置插画和描述文字，并支持通过默认插槽插入自定义内容。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.blank-state
+
+> 空状态展示组件，提供预置插画和描述文字，并支持通过默认插槽插入自定义内容。
+
+## Props
+
+| 属性         | 类型                                  | 必填 | 默认值 | 说明                                                                                                   |
+| ------------ | ------------------------------------- | ---- | ------ | ------------------------------------------------------------------------------------------------------ |
+| illustration | `BlankStateIllustration \| undefined` | 否   | -      | 插画类型，可选 "goals"、"activities"、"collaboration-spaces"、"serviceflows"，默认使用 activities 插画 |
+| description  | `string \| undefined`                 | 否   | -      | 描述文字                                                                                               |
+
+## Slots
+
+| 名称      | 说明                                           |
+| --------- | ---------------------------------------------- |
+| (default) | 默认插槽，用于插入自定义内容（如按钮等操作项） |
 
 ## Examples
 
 ### Basic
 
+展示空状态组件的基本用法，使用 goals 插画和描述文字。
+
+```yaml preview
+brick: ai-portal.blank-state
+properties:
+  illustration: goals
+  description: 暂无目标，快来创建第一个吧
+```
+
+### Different Illustrations
+
+展示不同插画类型的空状态效果。
+
+```yaml preview
+- brick: ai-portal.blank-state
+  properties:
+    illustration: activities
+    description: 暂无活动记录
+- brick: ai-portal.blank-state
+  properties:
+    illustration: collaboration-spaces
+    description: 暂无协作空间
+- brick: ai-portal.blank-state
+  properties:
+    illustration: serviceflows
+    description: 暂无服务流
+```
+
+### With Slot Content
+
+通过默认插槽插入操作按钮。
+
 ```yaml preview
 brick: ai-portal.blank-state
 properties:
   illustration: goals
-  description: No goals
+  description: 暂无目标，快来创建第一个吧
+children:
+  - brick: eo-button
+    properties:
+      type: primary
+      textContent: 创建目标
 ```

package/docs/blank-state.react.md

@@ -0,0 +1,77 @@
+---
+tagName: ai-portal.blank-state
+displayName: WrappedAiPortalBlankState
+description: 空状态展示组件，提供预置插画和描述文字，并支持通过默认插槽插入自定义内容。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalBlankState
+
+> 空状态展示组件，提供预置插画和描述文字，并支持通过默认插槽插入自定义内容。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalBlankState } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性         | 类型                                  | 必填 | 默认值 | 说明                                                                                                   |
+| ------------ | ------------------------------------- | ---- | ------ | ------------------------------------------------------------------------------------------------------ |
+| illustration | `BlankStateIllustration \| undefined` | 否   | -      | 插画类型，可选 "goals"、"activities"、"collaboration-spaces"、"serviceflows"，默认使用 activities 插画 |
+| description  | `string \| undefined`                 | 否   | -      | 描述文字                                                                                               |
+
+## Slots
+
+| 名称      | 说明                                           |
+| --------- | ---------------------------------------------- |
+| (default) | 默认插槽，用于插入自定义内容（如按钮等操作项） |
+
+## Examples
+
+### Basic
+
+展示空状态组件的基本用法，使用 goals 插画和描述文字。
+
+```tsx
+<WrappedAiPortalBlankState
+  illustration="goals"
+  description="暂无目标，快来创建第一个吧"
+/>
+```
+
+### Different Illustrations
+
+展示不同插画类型的空状态效果。
+
+```tsx
+<>
+  <WrappedAiPortalBlankState
+    illustration="activities"
+    description="暂无活动记录"
+  />
+  <WrappedAiPortalBlankState
+    illustration="collaboration-spaces"
+    description="暂无协作空间"
+  />
+  <WrappedAiPortalBlankState
+    illustration="serviceflows"
+    description="暂无服务流"
+  />
+</>
+```
+
+### With Slot Content
+
+通过默认插槽插入操作按钮。
+
+```tsx
+<WrappedAiPortalBlankState
+  illustration="goals"
+  description="暂无目标，快来创建第一个吧"
+>
+  <WrappedEoButton type="primary">创建目标</WrappedEoButton>
+</WrappedAiPortalBlankState>
+```

package/docs/chat-box.md

@@ -1,67 +1,149 @@
-构件 `ai-portal.chat-box`
+---
+tagName: ai-portal.chat-box
+displayName: WrappedAiPortalChatBox
+description: 大型聊天输入框，用于首页，支持命令联想、@提及数字人、文件上传等功能。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.chat-box
+
+> 大型聊天输入框，用于首页，支持命令联想、@提及数字人、文件上传等功能。
+
+## Props
+
+| 属性          | 类型                         | 必填 | 默认值 | 说明                                |
+| ------------- | ---------------------------- | ---- | ------ | ----------------------------------- |
+| disabled      | `boolean \| undefined`       | 否   | -      | 是否禁用输入框                      |
+| placeholder   | `string \| undefined`        | 否   | -      | 输入框占位文字                      |
+| autoFocus     | `boolean \| undefined`       | 否   | -      | 是否自动聚焦                        |
+| aiEmployees   | `AIEmployee[] \| undefined`  | 否   | -      | 可 @ 提及的数字人列表               |
+| commands      | `Command[] \| undefined`     | 否   | -      | 命令列表，支持通过 / 或搜索触发联想 |
+| uploadOptions | `UploadOptions \| undefined` | 否   | -      | 文件上传配置                        |
+
+## Events
+
+| 事件           | detail                                                                                                      | 说明                                                  |
+| -------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| message.submit | `string` — 用户输入的消息文本内容                                                                           | 用户提交消息时触发（已废弃，请使用 chat.submit 事件） |
+| chat.submit    | `ChatPayload` — { content: 消息内容, files: 上传的文件列表, cmd: 命令载荷, aiEmployeeId: @提及的数字人 ID } | 用户提交聊天消息时触发                                |
+
+## Methods
+
+| 方法         | 参数                      | 返回值 | 说明               |
+| ------------ | ------------------------- | ------ | ------------------ |
+| setValue     | `(value: string) => void` | `void` | 设置输入框的值     |
+| getValue     | `() => void`              | `void` | 获取输入框当前的值 |
+| focusOnInput | `() => void`              | `void` | 使输入框获得焦点   |
+
+## Slots
+
+| 名称    | 说明                                         |
+| ------- | -------------------------------------------- |
+| actions | 操作栏左侧插槽，用于放置动作按钮等自定义内容 |
 
 ## Examples
 
 ### Basic
 
+展示大型聊天输入框的基本用法，配置占位文字和提交事件监听。
+
 ```yaml preview
 brick: ai-portal.chat-box
 properties:
-  textContent: Hello world
+  placeholder: 请输入您的问题，按 Enter 发送
+events:
+  chat.submit:
+    action: console.log
 ```
 
-### With cruise canvas
+### With Action Buttons
 
-```yaml preview minHeight="600px"
-brick: div
+通过 actions 插槽添加动作按钮，实现深度思考和联网搜索等功能入口。
+
+```yaml preview
+brick: ai-portal.chat-box
 properties:
-  style:
-    width: 100vw
-    height: 100vh
-    position: fixed
-    top: 0
-    left: 0
-context:
-  - name: task
+  placeholder: 请输入您的问题
 children:
-  - brick: ai-portal.chat-box
-    if: <%= !CTX.task %>
-    properties:
-      style:
-        position: absolute
-        width: 500px
-        maxWidth: 90vw
-        maxHeight: 90vh
-        top: 50%
-        left: 50%
-        transform: translate(-50%, -50%)
-    events:
-      message.submit:
-        useProvider: basic.http-request
-        args:
-          - "<% `${BASE_URL}/api/gateway/logic.llm.aiops_service/api/v1/llm/agent/flow/create` %>"
-          # - /api/mocks/task/send
-          # - "http://localhost:8888/.netlify/functions/task-send"
-          # - "https://serverless-mocks.netlify.app/.netlify/functions/task-send"
-          - method: POST
-            body: |
-              <%
-                JSON.stringify({
-                  input: EVENT.detail
-                })
-              %>
-            headers:
-              Content-Type: application/json
-        callback:
-          error:
-            action: handleHttpError
-          success:
-            action: context.replace
-            args:
-              - task
-              - <% EVENT.detail %>
-  - brick: ai-portal.cruise-canvas
-    if: <%= !!CTX.task %>
+  - brick: ai-portal.action-buttons
+    slot: actions
     properties:
-      taskId: <% CTX.task.id %>
+      items:
+        - key: think
+          text: 深度思考
+          icon:
+            lib: antd
+            theme: outlined
+            icon: reddit
+        - key: networking
+          text: 联网搜索
+          icon:
+            lib: antd
+            theme: outlined
+            icon: global
+events:
+  chat.submit:
+    action: console.log
+```
+
+### With File Upload
+
+配置 uploadOptions 属性，启用文件上传功能。
+
+```yaml preview
+brick: ai-portal.chat-box
+properties:
+  placeholder: 请输入您的问题，或拖入文件
+  uploadOptions:
+    enabled: true
+    accept: image/*,.pdf
+    maxFiles: 5
+    maxSize: 10485760
+    readableAccept: 图片或 PDF
+    readableMaxSize: 10MB
+events:
+  chat.submit:
+    action: console.log
+```
+
+### With AI Employees
+
+配置 aiEmployees 属性，支持在输入时 @ 提及数字人。
+
+```yaml preview
+brick: ai-portal.chat-box
+properties:
+  placeholder: 输入 @ 可提及数字人
+  aiEmployees:
+    - employeeId: emp001
+      name: 运维工程师小李
+    - employeeId: emp002
+      name: 数据分析师小张
+events:
+  chat.submit:
+    action: console.log
+```
+
+### Programmatic Control
+
+通过方法调用控制输入框，实现预填内容和焦点管理。
+
+```yaml preview
+- brick: eo-button
+  properties:
+    textContent: 填写示例问题
+  events:
+    click:
+      target: "#chatBox"
+      method: setValue
+      args:
+        - 如何优化服务器性能？
+- brick: ai-portal.chat-box
+  properties:
+    id: chatBox
+    placeholder: 请输入您的问题
+  events:
+    chat.submit:
+      action: console.log
 ```

package/docs/chat-box.react.md

@@ -0,0 +1,142 @@
+---
+tagName: ai-portal.chat-box
+displayName: WrappedAiPortalChatBox
+description: 大型聊天输入框，用于首页，支持命令联想、@提及数字人、文件上传等功能。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalChatBox
+
+> 大型聊天输入框，用于首页，支持命令联想、@提及数字人、文件上传等功能。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalChatBox } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                         | 必填 | 默认值 | 说明                                |
+| ------------- | ---------------------------- | ---- | ------ | ----------------------------------- |
+| disabled      | `boolean \| undefined`       | 否   | -      | 是否禁用输入框                      |
+| placeholder   | `string \| undefined`        | 否   | -      | 输入框占位文字                      |
+| autoFocus     | `boolean \| undefined`       | 否   | -      | 是否自动聚焦                        |
+| aiEmployees   | `AIEmployee[] \| undefined`  | 否   | -      | 可 @ 提及的数字人列表               |
+| commands      | `Command[] \| undefined`     | 否   | -      | 命令列表，支持通过 / 或搜索触发联想 |
+| uploadOptions | `UploadOptions \| undefined` | 否   | -      | 文件上传配置                        |
+
+## Events
+
+| 事件            | detail                                                                                                      | 说明                                              |
+| --------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| onMessageSubmit | `string` — 用户输入的消息文本内容                                                                           | 用户提交消息时触发（已废弃，请使用 onChatSubmit） |
+| onChatSubmit    | `ChatPayload` — { content: 消息内容, files: 上传的文件列表, cmd: 命令载荷, aiEmployeeId: @提及的数字人 ID } | 用户提交聊天消息时触发                            |
+
+## Methods
+
+| 方法         | 参数                      | 返回值 | 说明               |
+| ------------ | ------------------------- | ------ | ------------------ |
+| setValue     | `(value: string) => void` | `void` | 设置输入框的值     |
+| getValue     | `() => void`              | `void` | 获取输入框当前的值 |
+| focusOnInput | `() => void`              | `void` | 使输入框获得焦点   |
+
+## Slots
+
+| 名称    | 说明                                         |
+| ------- | -------------------------------------------- |
+| actions | 操作栏左侧插槽，用于放置动作按钮等自定义内容 |
+
+## Examples
+
+### Basic
+
+展示大型聊天输入框的基本用法，配置占位文字和提交事件监听。
+
+```tsx
+<WrappedAiPortalChatBox
+  placeholder="请输入您的问题，按 Enter 发送"
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### With Action Buttons
+
+通过 actions 插槽添加动作按钮，实现深度思考和联网搜索等功能入口。
+
+```tsx
+<WrappedAiPortalChatBox
+  placeholder="请输入您的问题"
+  onChatSubmit={(e) => console.log(e.detail)}
+>
+  <WrappedAiPortalActionButtons
+    slot="actions"
+    items={[
+      {
+        key: "think",
+        text: "深度思考",
+        icon: { lib: "antd", theme: "outlined", icon: "reddit" },
+      },
+      {
+        key: "networking",
+        text: "联网搜索",
+        icon: { lib: "antd", theme: "outlined", icon: "global" },
+      },
+    ]}
+  />
+</WrappedAiPortalChatBox>
+```
+
+### With File Upload
+
+配置 uploadOptions 属性，启用文件上传功能。
+
+```tsx
+<WrappedAiPortalChatBox
+  placeholder="请输入您的问题，或拖入文件"
+  uploadOptions={{
+    enabled: true,
+    accept: "image/*,.pdf",
+    maxFiles: 5,
+    maxSize: 10485760,
+    readableAccept: "图片或 PDF",
+    readableMaxSize: "10MB",
+  }}
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### With AI Employees
+
+配置 aiEmployees 属性，支持在输入时 @ 提及数字人。
+
+```tsx
+<WrappedAiPortalChatBox
+  placeholder="输入 @ 可提及数字人"
+  aiEmployees={[
+    { employeeId: "emp001", name: "运维工程师小李" },
+    { employeeId: "emp002", name: "数据分析师小张" },
+  ]}
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### Programmatic Control
+
+通过方法调用控制输入框，实现预填内容和焦点管理。
+
+```tsx
+const ref = useRef<any>();
+
+<>
+  <button onClick={() => ref.current?.setValue("如何优化服务器性能？")}>
+    填写示例问题
+  </button>
+  <WrappedAiPortalChatBox
+    ref={ref}
+    placeholder="请输入您的问题"
+    onChatSubmit={(e) => console.log(e.detail)}
+  />
+</>;
+```