---
url: /chat/chat-widget.md
---
# EbChatWidget 浮动挂件

网页右下角常驻的助手入口：收起时只有一颗悬浮球，点开是面板。**窄屏自动换成底部抽屉**（`EbDrawer direction="btt"`），桌面端是自持的浮层（自带焦点圈闭与滚动锁）。

> 本页组件在独立包 `@wil-works/evoke-chat` 里，安装与注册见 [Chatbot 对话窗口](/chat/chatbot)顶部说明。

窗体形态的另外四种不需要新组件——全屏页、侧边抽屉、对话框内嵌、移动端抽屉，用 `EbAiConsole` 配 `EbDrawer` / `EbDialog` 组合即可，见下方「组合配方」。

## 用法

导出名为 `EbChatWidget`。`v-model` 管开合；内容完全由你放——常见就是一颗 `EbChatbot` 或 `EbAiConsole`：

```vue
<eb-chat-widget v-model="open" title="智能助手" :badge="unread" disclaimer="…">
  <eb-chatbot v-model="messages" height="100%" @send="onSend" />
</eb-chat-widget>
```

## 合规声明门

给了 `disclaimer` 就先显示同意页，同意后才渲染内容，并抛 `consent`（让你持久化）。`default-consented` 可直接跳过（比如已存过同意记录）。同意按钮可用 `#disclaimer-actions` 替换——**动作要自己接**，组件把 `accept` 作为 slot prop 交出：

```vue
<eb-chat-widget :disclaimer="text">
  <template #disclaimer-actions="{ accept }">
    <a href="/terms" target="_blank">查看条款</a>
    <eb-button type="primary" @click="accept">同意并开始</eb-button>
  </template>
</eb-chat-widget>
```

## 组合配方（其余窗体形态）

| 形态 | 怎么拼 |
|---|---|
| 全屏页 | 路由页直接放 `EbAiConsole` |
| 侧边抽屉 | `EbDrawer` + `EbAiConsole`（`direction="rtl"`） |
| 移动端抽屉 | `EbDrawer direction="btt"` + `EbAiConsole` |
| 对话框内嵌 | `EbDialog`（`fullscreen` 可全屏） + `EbAiConsole` |
| 右下角挂件 | 本组件 |

## API

## 两处刻意的取舍

* **点击面板外部不关闭**。聊天面板里常有需要选中复制的内容，误触关闭的代价比多按一次 Esc 大；Esc 与关闭钮都能关。
* **`open` / `close` 表示状态迁移而非意图**。受控方不接 `update:modelValue` 时面板不会展开——要「点了就开」就接 v-model。