@next-bricks/ai-portal 0.70.1 → 0.70.3

package/docs/chat-input.md

@@ -1,9 +1,125 @@
-构件 `ai-portal.chat-input`
+---
+tagName: ai-portal.chat-input
+displayName: WrappedAiPortalChatInput
+description: 小型聊天输入框，用于对话等页面，支持命令联想、@提及数字人、文件上传及终止任务等功能。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.chat-input
+
+> 小型聊天输入框，用于对话等页面，支持命令联想、@提及数字人、文件上传及终止任务等功能。
+
+## Props
+
+| 属性                 | 类型                             | 必填 | 默认值     | 说明                                                    |
+| -------------------- | -------------------------------- | ---- | ---------- | ------------------------------------------------------- |
+| placeholder          | `string \| undefined`            | 否   | -          | 输入框占位文字                                          |
+| autoFocus            | `boolean \| undefined`           | 否   | -          | 是否自动聚焦                                            |
+| submitDisabled       | `boolean \| undefined`           | 否   | -          | 是否禁用发送按钮，通常在 AI 正在处理时设为 true         |
+| supportsTerminate    | `boolean \| undefined`           | 否   | -          | 是否显示终止任务按钮，需与 submitDisabled 配合使用      |
+| terminating          | `boolean \| undefined`           | 否   | -          | 是否正在终止任务，为 true 时显示加载状态                |
+| autoFade             | `boolean \| undefined`           | 否   | -          | 是否在输入框为空时自动淡出，通过 CSS 属性选择器控制样式 |
+| uploadOptions        | `UploadOptions \| undefined`     | 否   | -          | 文件上传配置                                            |
+| aiEmployees          | `AIEmployee[] \| undefined`      | 否   | -          | 可 @ 提及的数字人列表                                   |
+| commands             | `Command[] \| undefined`         | 否   | -          | 命令列表，支持通过 / 或搜索触发联想                     |
+| suggestionsPlacement | `"top" \| "bottom" \| undefined` | 否   | `"bottom"` | 命令/提及联想弹出层的显示位置                           |
+
+## Events
+
+| 事件           | detail                                                                                                      | 说明                                                  |
+| -------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| message.submit | `string` — 用户输入的消息文本内容                                                                           | 用户提交消息时触发（已废弃，请使用 chat.submit 事件） |
+| chat.submit    | `ChatPayload` — { content: 消息内容, files: 上传的文件列表, cmd: 命令载荷, aiEmployeeId: @提及的数字人 ID } | 用户提交聊天消息时触发                                |
+| terminate      | `void`                                                                                                      | 点击终止按钮时触发                                    |
+
+## Methods
+
+| 方法     | 参数                      | 返回值 | 说明                 |
+| -------- | ------------------------- | ------ | -------------------- |
+| setValue | `(value: string) => void` | `void` | 设置输入框的值并聚焦 |
 
 ## Examples
 
 ### Basic
 
+展示小型聊天输入框的基本用法。
+
+```yaml preview
+brick: ai-portal.chat-input
+properties:
+  placeholder: 请输入您的问题
+events:
+  chat.submit:
+    action: console.log
+```
+
+### With Terminate Support
+
+配置终止任务按钮，在 AI 处理时显示停止操作。
+
+```yaml preview
+brick: ai-portal.chat-input
+properties:
+  placeholder: 请输入您的问题
+  submitDisabled: true
+  supportsTerminate: true
+  terminating: false
+events:
+  chat.submit:
+    action: console.log
+  terminate:
+    action: console.log
+```
+
+### With File Upload
+
+配置 uploadOptions 属性，启用文件上传功能。
+
+```yaml preview
+brick: ai-portal.chat-input
+properties:
+  placeholder: 请输入您的问题，或拖入文件
+  uploadOptions:
+    enabled: true
+    accept: image/*,.pdf
+    maxFiles: 3
+    readableAccept: 图片或 PDF
+events:
+  chat.submit:
+    action: console.log
+```
+
+### With AI Employees and Commands
+
+同时配置 aiEmployees 和 commands，支持 @ 提及和 / 命令联想。
+
+```yaml preview
+brick: ai-portal.chat-input
+properties:
+  placeholder: 输入 / 或 @ 触发联想
+  suggestionsPlacement: top
+  aiEmployees:
+    - employeeId: emp001
+      name: 运维工程师小李
+  commands:
+    - command: analyze
+      description: 分析数据
+events:
+  chat.submit:
+    action: console.log
+```
+
+### With Auto Fade
+
+启用 autoFade 属性，使输入框在空内容时通过 CSS 淡出。
+
 ```yaml preview
 brick: ai-portal.chat-input
+properties:
+  placeholder: 请输入您的问题
+  autoFade: true
+events:
+  chat.submit:
+    action: console.log
 ```

package/docs/chat-input.react.md

@@ -0,0 +1,117 @@
+---
+tagName: ai-portal.chat-input
+displayName: WrappedAiPortalChatInput
+description: 小型聊天输入框，用于对话等页面，支持命令联想、@提及数字人、文件上传及终止任务等功能。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalChatInput
+
+> 小型聊天输入框，用于对话等页面，支持命令联想、@提及数字人、文件上传及终止任务等功能。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalChatInput } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                 | 类型                             | 必填 | 默认值     | 说明                                                    |
+| -------------------- | -------------------------------- | ---- | ---------- | ------------------------------------------------------- |
+| placeholder          | `string \| undefined`            | 否   | -          | 输入框占位文字                                          |
+| autoFocus            | `boolean \| undefined`           | 否   | -          | 是否自动聚焦                                            |
+| submitDisabled       | `boolean \| undefined`           | 否   | -          | 是否禁用发送按钮，通常在 AI 正在处理时设为 true         |
+| supportsTerminate    | `boolean \| undefined`           | 否   | -          | 是否显示终止任务按钮，需与 submitDisabled 配合使用      |
+| terminating          | `boolean \| undefined`           | 否   | -          | 是否正在终止任务，为 true 时显示加载状态                |
+| autoFade             | `boolean \| undefined`           | 否   | -          | 是否在输入框为空时自动淡出，通过 CSS 属性选择器控制样式 |
+| uploadOptions        | `UploadOptions \| undefined`     | 否   | -          | 文件上传配置                                            |
+| aiEmployees          | `AIEmployee[] \| undefined`      | 否   | -          | 可 @ 提及的数字人列表                                   |
+| commands             | `Command[] \| undefined`         | 否   | -          | 命令列表，支持通过 / 或搜索触发联想                     |
+| suggestionsPlacement | `"top" \| "bottom" \| undefined` | 否   | `"bottom"` | 命令/提及联想弹出层的显示位置                           |
+
+## Events
+
+| 事件            | detail                                                                                                      | 说明                                              |
+| --------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| onMessageSubmit | `string` — 用户输入的消息文本内容                                                                           | 用户提交消息时触发（已废弃，请使用 onChatSubmit） |
+| onChatSubmit    | `ChatPayload` — { content: 消息内容, files: 上传的文件列表, cmd: 命令载荷, aiEmployeeId: @提及的数字人 ID } | 用户提交聊天消息时触发                            |
+| onTerminate     | `void`                                                                                                      | 点击终止按钮时触发                                |
+
+## Methods
+
+| 方法     | 参数                      | 返回值 | 说明                 |
+| -------- | ------------------------- | ------ | -------------------- |
+| setValue | `(value: string) => void` | `void` | 设置输入框的值并聚焦 |
+
+## Examples
+
+### Basic
+
+展示小型聊天输入框的基本用法。
+
+```tsx
+<WrappedAiPortalChatInput
+  placeholder="请输入您的问题"
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### With Terminate Support
+
+配置终止任务按钮，在 AI 处理时显示停止操作。
+
+```tsx
+<WrappedAiPortalChatInput
+  placeholder="请输入您的问题"
+  submitDisabled={true}
+  supportsTerminate={true}
+  terminating={false}
+  onChatSubmit={(e) => console.log(e.detail)}
+  onTerminate={(e) => console.log(e.detail)}
+/>
+```
+
+### With File Upload
+
+配置 uploadOptions 属性，启用文件上传功能。
+
+```tsx
+<WrappedAiPortalChatInput
+  placeholder="请输入您的问题，或拖入文件"
+  uploadOptions={{
+    enabled: true,
+    accept: "image/*,.pdf",
+    maxFiles: 3,
+    readableAccept: "图片或 PDF",
+  }}
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### With AI Employees and Commands
+
+同时配置 aiEmployees 和 commands，支持 @ 提及和 / 命令联想。
+
+```tsx
+<WrappedAiPortalChatInput
+  placeholder="输入 / 或 @ 触发联想"
+  suggestionsPlacement="top"
+  aiEmployees={[{ employeeId: "emp001", name: "运维工程师小李" }]}
+  commands={[{ command: "analyze", description: "分析数据" }]}
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```
+
+### With Auto Fade
+
+启用 autoFade 属性，使输入框在空内容时通过 CSS 淡出。
+
+```tsx
+<WrappedAiPortalChatInput
+  placeholder="请输入您的问题"
+  autoFade={true}
+  onChatSubmit={(e) => console.log(e.detail)}
+/>
+```

package/docs/chat-panel-welcome.md

@@ -0,0 +1,39 @@
+---
+tagName: ai-portal.chat-panel-welcome
+displayName: WrappedAiPortalChatPanelWelcome
+description: 聊天面板欢迎语构件，展示带有 Elevo 头像的欢迎消息。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.chat-panel-welcome
+
+> 聊天面板欢迎语构件，展示带有 Elevo 头像的欢迎消息。
+
+## Props
+
+| 属性 | 类型     | 必填 | 默认值 | 说明           |
+| ---- | -------- | ---- | ------ | -------------- |
+| text | `string` | 否   | -      | 欢迎语文本内容 |
+
+## Examples
+
+### 基础使用
+
+展示带 Elevo 头像和欢迎语文本的欢迎消息。
+
+```yaml preview
+brick: ai-portal.chat-panel-welcome
+properties:
+  text: "你好！我是 Elevo，你的 AI 助手。有什么可以帮助你的吗？"
+```
+
+### 自定义欢迎语
+
+根据业务场景配置个性化的欢迎文案。
+
+```yaml preview
+brick: ai-portal.chat-panel-welcome
+properties:
+  text: "欢迎来到产品设计空间！我可以帮助你进行需求分析、流程设计和问题排查。"
+```

package/docs/chat-panel-welcome.react.md

@@ -0,0 +1,41 @@
+---
+tagName: ai-portal.chat-panel-welcome
+displayName: WrappedAiPortalChatPanelWelcome
+description: 聊天面板欢迎语构件，展示带有 Elevo 头像的欢迎消息。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalChatPanelWelcome
+
+> 聊天面板欢迎语构件，展示带有 Elevo 头像的欢迎消息。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalChatPanelWelcome } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性 | 类型     | 必填 | 默认值 | 说明           |
+| ---- | -------- | ---- | ------ | -------------- |
+| text | `string` | 否   | -      | 欢迎语文本内容 |
+
+## Examples
+
+### 基础使用
+
+展示带 Elevo 头像和欢迎语文本的欢迎消息。
+
+```tsx
+<WrappedAiPortalChatPanelWelcome text="你好！我是 Elevo，你的 AI 助手。有什么可以帮助你的吗？" />
+```
+
+### 自定义欢迎语
+
+根据业务场景配置个性化的欢迎文案。
+
+```tsx
+<WrappedAiPortalChatPanelWelcome text="欢迎来到产品设计空间！我可以帮助你进行需求分析、流程设计和问题排查。" />
+```

package/docs/chat-panel.md

@@ -1,13 +1,45 @@
-构件 `ai-portal.chat-panel`
+---
+tagName: ai-portal.chat-panel
+displayName: WrappedAiPortalChatPanel
+description: 弹出式 AI 对话面板，以模态框形式展示对话界面，支持与 AI 助手进行多轮对话。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
 
-## 介绍
+# ai-portal.chat-panel
 
-弹出式 AI 对话面板，提供一个模态框样式的聊天界面，支持与 AI 助手进行对话交互。
+> 弹出式 AI 对话面板，以模态框形式展示对话界面，支持与 AI 助手进行多轮对话。
+
+## Props
+
+| 属性          | 类型                                      | 必填 | 默认值  | 说明                                 |
+| ------------- | ----------------------------------------- | ---- | ------- | ------------------------------------ |
+| panelTitle    | `string \| undefined`                     | 否   | -       | 面板标题                             |
+| aiEmployeeId  | `string \| undefined`                     | 否   | -       | 预设数字人 ID，对话提交时会携带该 ID |
+| cmd           | `CommandPayload \| undefined`             | 否   | -       | 预设命令载荷，对话提交时会携带该命令 |
+| width         | `string \| number \| undefined`           | 否   | -       | 面板宽度                             |
+| height        | `string \| number \| undefined`           | 否   | -       | 面板高度                             |
+| placeholder   | `string \| undefined`                     | 否   | -       | 输入框占位文字                       |
+| uploadOptions | `UploadOptions \| undefined`              | 否   | -       | 文件上传配置                         |
+| help          | `{ useBrick: UseBrickConf } \| undefined` | 否   | -       | 无对话时显示的帮助内容配置           |
+| maskClosable  | `boolean \| undefined`                    | 否   | `false` | 是否点击遮罩关闭面板                 |
+
+## Methods
+
+| 方法          | 参数                             | 返回值 | 说明                 |
+| ------------- | -------------------------------- | ------ | -------------------- |
+| open          | `() => void`                     | `void` | 打开对话面板         |
+| close         | `() => void`                     | `void` | 关闭对话面板         |
+| setInputValue | `(content: string) => void`      | `void` | 设置输入框的内容     |
+| send          | `(payload: ChatPayload) => void` | `void` | 直接发送一条消息     |
+| showFile      | `(file: FileInfo) => void`       | `void` | 在面板中显示文件预览 |
 
 ## Examples
 
 ### Basic
 
+通过按钮触发打开 AI 对话面板。
+
 ```yaml preview
 - brick: eo-button
   properties:
@@ -25,3 +57,54 @@
     panelTitle: AI 助手
     placeholder: 请输入您的问题...
 ```
+
+### With Upload Options
+
+配置文件上传功能的对话面板。
+
+```yaml preview
+- brick: eo-button
+  properties:
+    themeVariant: elevo
+    textContent: 打开对话面板
+  events:
+    click:
+      target: "#chatPanel"
+      method: open
+- brick: ai-portal.chat-panel
+  properties:
+    id: chatPanel
+    panelTitle: AI 文档助手
+    placeholder: 请上传文件或输入问题
+    maskClosable: true
+    uploadOptions:
+      enabled: true
+      accept: .pdf,.docx
+      maxFiles: 3
+      readableAccept: PDF 或 Word 文档
+```
+
+### Programmatic Send
+
+通过调用 send 方法直接发起对话。
+
+```yaml preview
+- brick: eo-button
+  properties:
+    themeVariant: elevo
+    textContent: 发起分析请求
+  events:
+    click:
+      - target: "#chatPanel"
+        method: open
+      - target: "#chatPanel"
+        method: send
+        args:
+          - content: 请帮我分析当前系统的性能瓶颈
+- brick: ai-portal.chat-panel
+  properties:
+    id: chatPanel
+    panelTitle: AI 分析助手
+    width: 700
+    height: 600
+```

package/docs/chat-panel.react.md

@@ -0,0 +1,109 @@
+---
+tagName: ai-portal.chat-panel
+displayName: WrappedAiPortalChatPanel
+description: 弹出式 AI 对话面板，以模态框形式展示对话界面，支持与 AI 助手进行多轮对话。
+category: ai-portal
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalChatPanel
+
+> 弹出式 AI 对话面板，以模态框形式展示对话界面，支持与 AI 助手进行多轮对话。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalChatPanel } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                                      | 必填 | 默认值  | 说明                                 |
+| ------------- | ----------------------------------------- | ---- | ------- | ------------------------------------ |
+| panelTitle    | `string \| undefined`                     | 否   | -       | 面板标题                             |
+| aiEmployeeId  | `string \| undefined`                     | 否   | -       | 预设数字人 ID，对话提交时会携带该 ID |
+| cmd           | `CommandPayload \| undefined`             | 否   | -       | 预设命令载荷，对话提交时会携带该命令 |
+| width         | `string \| number \| undefined`           | 否   | -       | 面板宽度                             |
+| height        | `string \| number \| undefined`           | 否   | -       | 面板高度                             |
+| placeholder   | `string \| undefined`                     | 否   | -       | 输入框占位文字                       |
+| uploadOptions | `UploadOptions \| undefined`              | 否   | -       | 文件上传配置                         |
+| help          | `{ useBrick: UseBrickConf } \| undefined` | 否   | -       | 无对话时显示的帮助内容配置           |
+| maskClosable  | `boolean \| undefined`                    | 否   | `false` | 是否点击遮罩关闭面板                 |
+
+## Methods
+
+| 方法          | 参数                             | 返回值 | 说明                 |
+| ------------- | -------------------------------- | ------ | -------------------- |
+| open          | `() => void`                     | `void` | 打开对话面板         |
+| close         | `() => void`                     | `void` | 关闭对话面板         |
+| setInputValue | `(content: string) => void`      | `void` | 设置输入框的内容     |
+| send          | `(payload: ChatPayload) => void` | `void` | 直接发送一条消息     |
+| showFile      | `(file: FileInfo) => void`       | `void` | 在面板中显示文件预览 |
+
+## Examples
+
+### Basic
+
+通过按钮触发打开 AI 对话面板。
+
+```tsx
+const ref = useRef<any>();
+
+<>
+  <button onClick={() => ref.current?.open()}>打开对话面板</button>
+  <WrappedAiPortalChatPanel
+    ref={ref}
+    width={600}
+    height={800}
+    panelTitle="AI 助手"
+    placeholder="请输入您的问题..."
+  />
+</>;
+```
+
+### With Upload Options
+
+配置文件上传功能的对话面板。
+
+```tsx
+const ref = useRef<any>();
+
+<>
+  <button onClick={() => ref.current?.open()}>打开对话面板</button>
+  <WrappedAiPortalChatPanel
+    ref={ref}
+    panelTitle="AI 文档助手"
+    placeholder="请上传文件或输入问题"
+    maskClosable={true}
+    uploadOptions={{
+      enabled: true,
+      accept: ".pdf,.docx",
+      maxFiles: 3,
+      readableAccept: "PDF 或 Word 文档",
+    }}
+  />
+</>;
+```
+
+### Programmatic Send
+
+通过调用 send 方法直接发起对话。
+
+```tsx
+const ref = useRef<any>();
+
+const handleAnalyze = () => {
+  ref.current?.open();
+  ref.current?.send({ content: "请帮我分析当前系统的性能瓶颈" });
+};
+
+<>
+  <button onClick={handleAnalyze}>发起分析请求</button>
+  <WrappedAiPortalChatPanel
+    ref={ref}
+    panelTitle="AI 分析助手"
+    width={700}
+    height={600}
+  />
+</>;
+```