OpenClaw WebChat 体验升级：对话界面终于像「真正的聊天」了

你有没有觉得，和 AI 聊天时，最出戏的往往不是回答内容，而是回复的「呈现方式」？

一段长长的代码被挤成普通文字；一张图片发过来没有预览，只有一串冰冷的 URL；语音回复播完就消失，想再听一遍却找不到记录；你想边看之前的对话边问新问题，屏幕却只能上下 frantic 滚动……

这些细节不致命，但累积起来，会让每一次人机交互都带着一股「工具感」。

这一次，OpenClaw 对 Control UI / WebChat 进行了全面升级。从结构化气泡到 TTS 持久化，从富输出标签到边问边答的弹窗卡片——我们要做的，就是让 WebChat 的对话体验，无限接近你日常使用的那些顶级通讯应用。

一、结构化气泡：让不同类型的回复「各就其位」

人类在聊天时，会通过不同的消息形态传递信息：文字、图片、语音、链接、代码块……一个好的聊天界面，应该让每种内容都以最自然的方式呈现。

OpenClaw 现在将助手媒体、回复内容、语音指令统一渲染为结构化气泡。

1.1 媒体内容：图片、视频、音频都有「专属容器」

当 Agent 返回一张图片时，它不再是一串干巴巴的 URL，而是一个可直接预览的缩略图，点击即可放大查看。

当 Agent 生成一段视频或音频，气泡内会嵌入对应的播放器控件——播放、暂停、进度条、音量调节，一应俱全。

这不仅让界面更美观，也大大降低了你的操作成本。不用再复制链接、新开标签页、粘贴到浏览器里查看。一切内容，所见即所得。

1.2 代码与指令：从「文字墙」到「可读卡片」

Agent 最擅长的就是生成代码、命令、配置项。但把这些内容以普通文本形式堆在对话框里，阅读体验极差。

结构化气泡会智能识别代码块和指令内容，并用以下方式优化呈现：

• 语法高亮
  ：Python、JavaScript、YAML、SQL……不同语言的代码会带上对应的颜色标识；
• 等宽字体
  ：让代码的缩进和对齐一目了然；
• 一键复制
  ：每个代码气泡右上角都有复制按钮，点击即可把完整内容贴到剪贴板；
• 行号显示
  ：长代码自动带上行号，方便你快速定位 Agent 提到的「第 23 行」。

简单说：Agent 写的代码，终于看起来像「给人看」的了。

1.3 语音指令：听见，也能「看见」

当 Agent 通过语音指令（TTS）回复时，结构化气泡会显示一个语音播放器卡片。你可以：

• 点击播放，收听 Agent 的语音回复；
• 查看音频时长，预估需要多少时间；
• 调节播放速度，1x、1.5x、2x 随心切换；
• 配合语音转文字的摘要，快速了解内容梗概。

语音不再是一条转瞬即逝的声波，而是一个可以反复查看、操作的多媒体对象。

二、TTS 音频持久化：语音回复不再「过耳即忘」

TTS（文本转语音）是很多用户的最爱。把一段长文章交给 Agent，让它读给你听；或者在做饭、开车时，用耳朵「阅读」Agent 的回复——这些都是 TTS 的高光时刻。

但之前有一个明显的遗憾：TTS 音频播完就消失了。如果你当时没听清，或者几天后想重温某段语音回复，根本无处可寻。

2.1 音频进历史：每一条语音都有「存档」

这次更新后，OpenClaw 的 TTS 音频回复会被持久化保存进历史记录。这意味着：

• 你随时可以回到某一次对话，重新播放当时的语音；
• 语音和文字回复一样，成为对话历史的一部分；
• 在多设备使用时，登录同一账号即可同步听到之前的 TTS 内容。

2.2 场景价值：从「即时消费」到「长期资产」

这个功能看起来只是「保存了个音频文件」，但它实际上改变了很多使用场景的边界：

• 学习场景
  ：Agent 帮你讲解了一篇技术论文，语音解释被保存下来，一周后复习还能重听；
• 创作场景
  ：Agent 为你朗读了一个故事灵感，你可以反复播放，捕捉每一个语气停顿里的情绪；
• 工作场景
  ：Agent 在会议前帮你总结了项目进度，语音摘要存入历史，会上可以随时回溯。

语音回复从「过耳即忘」变成了「可追溯、可复用的数字资产」。

三、[embed ...] 富输出标签：Agent 也能发「小程序卡片」了

在微信公众号、飞书、钉钉等现代通讯工具里，你经常会看到各种富媒体卡片：一条带有封面图、标题、简介、来源的链接卡片；一张可以交互的投票卡片；一个带有进度条的任务状态卡片……

这些「卡片」比纯文字更直观、更高效。现在，OpenClaw 的 Agent 也具备了同样的能力。

3.1 什么是 [embed ...] 标签？

`[embed ...]` 是 OpenClaw 新增的富输出标签。Agent 在生成回复时，可以通过这个标签输出结构化的卡片内容，WebChat 会自动将其渲染为精美的 UI 组件。

比如，Agent 想推荐一篇技术文章，它可以直接输出：

> [embed type="link" title="2024 年 AI 视频生成技术全景" url="https://example.com/article" image="https://example.com/cover.jpg" description="从 Seedance 到 Sora，盘点今年最值得关注的 6 大技术路线。"]

WebChat 会把它渲染成一张带有封面图、标题、描述的链接预览卡片。用户不需要点开链接，就能对内容价值有初步判断。

3.2 支持多种卡片类型

除了链接卡片，`[embed ...]` 还支持多种富输出形态：

• 数据卡片
  ：用进度条、数值、图标展示任务状态或统计数据；
• 列表卡片
  ：把多条信息以结构化列表的形式呈现，适合待办事项、推荐清单；
• 对比卡片
  ：左右分栏展示两个选项的优劣对比，适合决策辅助；
• 图片画廊
  ：多张图片以网格或轮播形式展示，适合设计稿、商品图、旅行照片。

这让 Agent 的输出从「一维文字」进化到了「多维信息面板」。

3.3 对开发者的意义

如果你是开发者，`[embed ...]` 标签为你提供了一个强大的扩展点。你可以：

• 自定义新的 embed 类型和对应的渲染组件；
• 把企业内部的业务数据封装成专属卡片；
• 让 Agent 的输出风格和你们的产品设计体系保持一致。

OpenClaw 的 WebChat 正在从一个「对话窗口」，变成一个可扩展的富交互界面。

四、/btw 边问边答：WebChat 支持弹窗卡片

在和 Agent 的长时间对话中，最常见的一个痛点是：上下文被频繁打断。

你正在和 Agent 讨论一份产品方案，突然想到一个关于代码的问题。如果你直接在当前的对话窗口里提问，Agent 可能会因为上下文混杂而给出不够精准的回答；如果你新开一个窗口，又得重新介绍一遍背景。

`/btw`（by the way）边问边答功能，就是为了解决这个问题而生。

4.1 什么是 /btw 边问边答？

`/btw` 是 OpenClaw 推出的一项上下文隔离式提问能力。当你在主对话中输入 `/btw` 并跟上一个新问题时，WebChat 会弹出一个独立的侧边卡片/弹窗，在这个隔离空间里让 Agent 专门回答你的新问题。

这意味着：

• 主对话的上下文不会被污染
  ：你关于产品方案的讨论原封不动地保留在主窗口；
• 新问题获得更精准的回答
  ：Agent 在弹窗卡片里只关注你的 `/btw` 问题，不受主对话干扰；
• 回答完成后可一键归档
  ：弹窗卡片的结果可以选择「插入主对话」「另存为笔记」或「直接关闭」。

4.2 WebChat 弹窗卡片：更优雅的交互形态

之前 `/btw` 已经存在于部分渠道中，但这次更新让它在 WebChat 里首次以弹窗卡片的形式呈现。

这个弹窗卡片不是简单的 alert 弹框，而是一个功能完整的微型对话窗口：

• 支持多轮追问，你可以和 Agent 在弹窗里继续深入讨论；
• 支持 Markdown 渲染、代码高亮、图片预览——和主窗口体验一致；
• 支持拖拽调整大小、最小化到角落、全屏展开，灵活适配你的工作流；
• 支持同时打开多个 `/btw` 弹窗，处理多个并行任务。

想象一下这样的场景：

> 你正在主窗口和 Agent 一起写一份年终总结。写到一半，你突然想查一下上季度的销售额数据。你输入 `/btw 帮我查一下 Q3 销售额`，一个弹窗卡片在右侧滑出。Agent 在弹窗里查询数据、生成图表、给出分析。你看完后，点击「插入主对话」，相关数据和分析瞬间回到了年终总结的上下文中。

这种主任务 + 支线任务的并行处理方式，正是高效知识工作者的核心需求。

写在最后：界面是 Agent 能力的「放大器」

Agent 的智能程度取决于模型，但它的实际可用性很大程度上取决于界面。

再聪明的回答，如果以糟糕的方式呈现，用户的获得感也会大打折扣。OpenClaw 这次对 WebChat 的升级，不是在做「锦上添花」的装饰，而是在夯实一个核心命题：

让 Agent 的输出，真正服务于人类的认知习惯。

结构化气泡让信息更易读，TTS 持久化让语音成为资产，`[embed ...]` 让 Agent 能够表达更复杂的信息，`/btw` 弹窗则让多任务处理成为可能。

🎛️ 更新已推送，打开 OpenClaw WebChat，和 Agent 来一场更「像聊天」的对话吧。