AiConsole AI 工作台
完整的大模型对话工作台编排:欢迎标题(高亮词渐变)+ 示例问题 + AI 输入台 + 会话流。首次发送后欢迎区自动收起、会话区展开;模型调用通过 transport 注入(transport(content, attachments, context)),流式回写直接驱动 useChatEngine 暴露的方法,组件内部不发起任何请求。
本页组件在独立包
@wil-works/evoke-chat里,安装与注册见 Chatbot 对话窗口顶部说明。
界面文案(底部提示、默认显示名、输入台占位等)取自语言包 eb.chat,随 EbConfigProvider 的 locale 走——机制见 Chatbot · 多语言。
基础用法
engine 缺省时组件内部自建引擎;transport 里模拟流式打字即可看到完整会话流。点击示例问题直接发送:
高度约定:父容器给了确定高度时 Console 撑满它——会话区吃掉剩余空间、输入区贴底(
chat-height只是会话区上限);父容器高度 auto 时按内容收缩,行为与从前一致。文档示例因此统一包一层定高容器(560px)。
欢迎体验文本生成,今天你想创造什么?
内容由 AI 生成,仅供参考
插槽
| 插槽 | 位置 | 用途 |
|---|---|---|
input-prepend | 输入区顶部(状态条之上) | 待发送队列(EbChatQueue)、附件条这类贴着输入台的内容 |
toolbar-extra / toolbar-meta | 透传给输入台工具栏左侧 / 右侧 | 额外工具与读数(上下文占用由组件内部经 #toolbar-meta 传入) |
empty | 消息列表空态 | 自定义欢迎区 |
实例方法(ref 调用)
| 方法 | 说明 |
|---|---|
setDraft(text) | 回填输入台草稿(队列「取回编辑」、外部按钮用) |
send(text, attachments?) | 程序化发送,与输入台同一条路径(队列「立即发送」用) |
focus() | 聚焦输入框 |
clear() | 清空会话回欢迎页 |
engine / listRef | 引擎与消息列表 ref 透出,供宿主自行编排 |
受控引擎
传 engine(useChatEngine 返回值)即完全受控:消息列表、loading、会话历史归使用方所有,Console 只负责编排与交互;clear() 一键清空回欢迎页。
API
AiConsole Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| engine | 外部 useChatEngine 实例(受控);缺省内部创建。注意:传外部 engine 时本组件的 transport 不参与调用,模型入口即引擎自身的 onSend | object | null |
| transport | 模型调用入口:流式回写经引擎方法驱动(仅内部自建引擎时生效) | (content, attachments, context) => void | Promise | null |
| welcome | 欢迎区:title / highlight(title 中的渐变高亮词)/ subtitle | object | null |
| examples | 示例问题:string 或 { text, prompt? } | array | [] |
| exampleAction | 示例点击行为:send 直发 / fill 仅填充 | send | fill | send |
| placeholder | 输入台占位文本;不传时取当前语言包(`eb.chat.promptBox.placeholder`) | string | — |
| disabled | 禁用输入台 | boolean | false |
| loading | 强制 loading(与引擎态取或) | boolean | false |
| scenes / capabilities / models / quota / showSettings | 输入台配置面,同 AiPromptBox 同名参数 | — | — |
| allowAttachments / maxAttachments / maxLength / sendOnEnter / stoppable | 输入台行为,同 AiPromptBox | — | — |
| approval | 待审批请求 { id, toolName, reason?, detail?, status? };非空时审批面板接管输入台(Enter 允许一次 / Esc 拒绝) | object | null | null |
| question | 待回答请求 { id, items: [...] };审批缺席时提问面板接管输入台(Enter 前进 / Esc 取消),审批优先 | object | null | null |
| status | 状态条 { phase, label?, tool?, elapsed?, hint?, queue? };phase 为 idle/缺省时不渲染 | object | null | null |
| statusStoppable | 当前阶段能否中断(决定状态条是否给「停止」钮) | boolean | false |
| status-queue | 状态条上的排队计数被点击 | () => void | — |
| context | 上下文占用 { used, capacity, breakdown? };给了就在输入台工具栏右侧显示占用环(经 #toolbar-meta) | object | null | null |
| showThinking | 会话消息展示思考过程 | boolean | true |
| renderMode | 消息渲染模式 | markdown | text | markdown |
| userName / assistantName | 会话区双方显示名(同时决定默认头像首字);不传时取当前语言包 | string | 我 / AI助手(随语言包) |
| avatarUser / avatarAssistant | 会话区双方头像图片地址 | string | |
| actions | 消息动作条自定义动作 { key, label, icon? } | array | [] |
| autoScroll | 新消息自动滚动到底部 | boolean | true |
| chatHeight | 会话区最大高度 | number | string | 420 |
| showTip | 展示「内容由 AI 生成」提示 | boolean | true |
AiConsole Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| send | 发送(载荷同 AiPromptBox) | (payload) => void | — |
| stop | 停止生成 | () => void | — |
| approval-respond | 审批结论,两参 (outcome, request);outcome 取 allowed-once / rejected | (outcome, request) => void | — |
| question-respond | 提问结论,两参 (answer, request);answer.status 取 answered / cancelled | (answer, request) => void | — |
| example-click | 点击示例问题 | (example) => void | — |
| copy / regenerate / action | 消息复制 / 重新生成(内部已驱动引擎重发,此处仅供埋点)/ 自定义动作,均由会话区转发 | (message) => void / (key, message) => void | — |
| quota-click / settings-click | 额度 / 设置点击 | () => void | — |
AiConsole Methods(defineExpose)
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| engine | 当前引擎实例(messages / loading / appendContent / completeMessage 等) | object | — |
| clear | 清空会话,回到欢迎区 | () => void | — |