项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

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 不参与调用,模型入口即引擎自身的 onSendobjectnull
transport模型调用入口:流式回写经引擎方法驱动(仅内部自建引擎时生效)(content, attachments, context) => void | Promisenull
welcome欢迎区:title / highlight(title 中的渐变高亮词)/ subtitleobjectnull
examples示例问题:string 或 { text, prompt? }array[]
exampleAction示例点击行为:send 直发 / fill 仅填充send | fillsend
placeholder输入台占位文本;不传时取当前语言包(`eb.chat.promptBox.placeholder`)string—
disabled禁用输入台booleanfalse
loading强制 loading(与引擎态取或)booleanfalse
scenes / capabilities / models / quota / showSettings输入台配置面,同 AiPromptBox 同名参数——
allowAttachments / maxAttachments / maxLength / sendOnEnter / stoppable输入台行为,同 AiPromptBox——
approval待审批请求 { id, toolName, reason?, detail?, status? };非空时审批面板接管输入台(Enter 允许一次 / Esc 拒绝)object | nullnull
question待回答请求 { id, items: [...] };审批缺席时提问面板接管输入台(Enter 前进 / Esc 取消),审批优先object | nullnull
status状态条 { phase, label?, tool?, elapsed?, hint?, queue? };phase 为 idle/缺省时不渲染object | nullnull
statusStoppable当前阶段能否中断(决定状态条是否给「停止」钮)booleanfalse
status-queue状态条上的排队计数被点击() => void—
context上下文占用 { used, capacity, breakdown? };给了就在输入台工具栏右侧显示占用环(经 #toolbar-meta)object | nullnull
showThinking会话消息展示思考过程booleantrue
renderMode消息渲染模式markdown | textmarkdown
userName / assistantName会话区双方显示名(同时决定默认头像首字);不传时取当前语言包string我 / AI助手(随语言包)
avatarUser / avatarAssistant会话区双方头像图片地址string
actions消息动作条自定义动作 { key, label, icon? }array[]
autoScroll新消息自动滚动到底部booleantrue
chatHeight会话区最大高度number | string420
showTip展示「内容由 AI 生成」提示booleantrue

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—