10.2 · 聊天接口与消息交互（Chat Interface and Message Interactions）

应用编排与外部知识接入 · 聚焦本章的模块关系、源码依据与实现要点。

项目Dify 章节10.2 状态全文译文模块界面与交互、系统架构、评测、反馈与人工复核、测试、发布与运维

项目要点页2.5 参考项目项目章节目录Dify DeepWiki 原始章节Chat Interface and Message Interactions 上一章10.1 下一章10.3

源码线索

web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
web/app/components/app/log/list.tsx
web/app/components/base/chat/__tests__/__snapshots__/utils.spec.ts.snap
web/app/components/base/chat/__tests__/branchedTestMessages.json
web/app/components/base/chat/__tests__/legacyTestMessages.json
web/app/components/base/chat/__tests__/mixedTestMessages.json
web/app/components/base/chat/__tests__/multiRootNodesMessages.json
web/app/components/base/chat/__tests__/multiRootNodesWithLegacyTestMessages.json
web/app/components/base/chat/__tests__/partialMessages.json

模块标签

界面与交互
系统架构
评测、反馈与人工复核
测试、发布与运维
记忆与上下文

章节正文

聊天接口与消息交互

原始 DeepWiki 页面https://deepwiki.com/langgenius/dify/10.2-chat-interface-and-message-interactions

聊天界面与消息交互

操作栏组件架构

Operation 组件是消息交互的核心，它为每条聊天消息渲染一个操作栏。该组件根据配置和消息上下文，控制多个交互式 UI 元素的可见性、位置和内部状态。

Dify · 操作栏组件架构 · 图 1

属性与状态管理

Operation 组件接收以下属性来定义其渲染上下文：

属性	类型	描述
`item`	`ChatItem`	聊天消息数据，包含反馈信息
`question`	`string`	用于标注的用户问题文本
`index`	`number`	消息在对话中的索引
`showPromptLog`	`boolean`	控制提示日志按钮的可见性
`maxSize`	`number`	操作栏的最大宽度约束
`contentWidth`	`number`	用于定位的消息内容宽度
`hasWorkflowProcess`	`boolean`	是否显示工作流处理 UI
`noChatInput`	`boolean`	禁用只读模式下的重新生成按钮

内部状态包括：

const [userLocalFeedback, setUserLocalFeedback] = useState(feedback)
const [adminLocalFeedback, setAdminLocalFeedback] = useState(adminFeedback)
const [feedbackTarget, setFeedbackTarget] = useState<'user' | 'admin'>('user')
const [isShowFeedbackModal, setIsShowFeedbackModal] = useState(false)
const [feedbackContent, setFeedbackContent] = useState('')

这些状态用于管理反馈 UI 和用于收集用户/管理员反馈的模态框。

来源： web/app/components/base/chat/chat/answer/operation.tsx:1-374

反馈系统架构

Dify 提供了两种独立的反馈机制，附加在聊天消息上：

用户反馈： 从与聊天交互的用户处收集。
管理员反馈： 由管理员收集，用于内部质量控制。

两种机制共存并影响 UI 渲染。

Dify · 反馈系统架构 · 图 2

用户反馈流程

当标注功能禁用但反馈功能启用时，用户会看到一个简单的赞/踩反馈栏：

赞：点击后立即发送正面反馈。
踩：点击后会打开一个模态框，用于输入详细的负面反馈。
反馈后： 显示一个反映已提交评分的按钮；点击该按钮会清除反馈。

反馈栏使用 CSS 类在悬停时或存在反馈时显示/隐藏。

管理员反馈流程

当标注功能启用时，用户反馈和管理员反馈会并排显示：

用户反馈以只读方式显示，并带有工具提示显示任何评论。
管理员反馈显示交互式的赞/踩按钮，供管理员对消息质量进行评分。
两个反馈部分之间有一个分隔符进行视觉分隔。

工具提示文本使用 buildFeedbackTooltip 辅助函数构建，用于格式化评分和评论。

来源： web/app/components/base/chat/chat/answer/operation.tsx:87-286

文本转语音（TTS）音频播放

音频播放功能允许用户通过 TTS 收听生成的回答。它通过集成到操作栏中的 NewAudioButton 组件实现，在启用时显示。

Dify · 文本转语音（TTS）音频播放 · 图 3

音频按钮状态机

音频按钮维护五种状态，驱动 UI 和行为：

状态	视觉	用户操作	行为
initial	播放图标	点击播放	转换为 loading，开始获取
loading	旋转加载器	禁用	等待音频生成
playing	暂停图标	点击暂停	暂停音频播放
paused	播放图标	点击恢复	恢复音频播放
ended	播放图标	点击重播	播放完成或出错；重新开始音频

audio_finished_call 回调处理来自 AudioPlayerManager 的事件，以相应地更新状态。

音频 URL 端点选择

获取 TTS 音频的 URL 根据使用场景构建：

公开分享： 如果存在 params.token，则使用 /text-to-audio API。
已安装应用： 使用 /installed-apps/${appId}/text-to-audio。
工作室应用： 使用 /apps/${appId}/text-to-audio。

播放/暂停切换通过音频管理器执行开始或暂停操作，并更新状态。

来源： web/app/components/base/chat/chat/answer/operation.tsx:294-300，web/app/components/base/audio-btn/index.tsx:1-112

消息操作按钮

操作栏的操作按钮分为三个核心功能：复制、重新生成和标注。

Dify · 消息操作按钮 · 图 4

复制按钮

对要复制的内容进行记忆化处理，如果处于代理模式，则包含代理思考内容。
使用 copy-to-clipboard 库执行复制操作。
复制成功时显示成功提示通知。

重新生成按钮

仅在聊天输入可用时渲染（!noChatInput）。
调用 onRegenerate(item) 回调以重试生成。
显示图标 "i-ri-reset-left-line"。

标注按钮

仅在标注支持和标注回复功能启用且不存在人工输入表单数据时渲染。
使用 AnnotationCtrlButton 组件。
接受 onAdded、onEdit 和 onRemove 回调，用于标注生命周期管理。
传递 appId、messageId、query（问题）和 answer（内容）属性。

来源： web/app/components/base/chat/chat/answer/operation.tsx:292-343

操作栏定位逻辑

为了适应可变的消息宽度和工作流可视化，操作栏会动态定位，要么在消息内容上方右对齐，要么在下方。

Dify · 操作栏定位逻辑 · 图 5

宽度计算算法

操作栏的宽度是可见图标/元素的总和：

如果不是开场白，则 +26px（复制和重新生成）
如果提示日志按钮可见，则 +28px + 8px 间距
如果文本转语音启用，则 +26px
如果标注按钮启用，则 +26px
用户/管理员反馈按钮增加 +28px（存在反馈：单个图标）或 +60px（无反馈：赞 + 踩按钮）加上间距

如果此组合宽度小于可用的 maxSize，则操作栏定位在右上侧；否则，它会以固定偏移量显示在下方。如果存在工作流处理栏，则操作栏始终定位在下方以避免重叠。

来源： web/app/components/base/chat/chat/answer/operation.tsx:143-173

模态框交互

反馈模态框

当用户点击踩按钮时，会弹出一个反馈模态框以收集详细的文本反馈：

用户输入评论并提交。
调用 onFeedback 回调，传入评分和内容。
更新本地反馈状态并在提交后隐藏模态框。

标注编辑模态框

EditReplyModal 允许编辑用于标注的问题-答案对：

支持编辑现有标注或添加新标注。
提供删除功能。
相应地触发回调：onAnnotationEdited、onAnnotationAdded、onAnnotationRemoved。

来源： web/app/components/base/chat/chat/answer/operation.tsx:331-369

聊天上下文集成

Operation 组件通过 useChatContext 与聊天上下文集成，以获取配置和交互回调。

Dify · 聊天上下文集成 · 图 6

这种抽象方式将操作栏的交互处理器和配置与组件实现清晰地解耦。

总结

聊天界面消息交互利用 Operation 组件作为编排器，实现以下功能：

反馈收集，支持用户/管理员双模式。
文本转语音音频播放，具有健壮的状态管理。
消息操作，如复制内容、重新生成响应和管理标注。
基于内容和上下文的动态 UI 定位。

这些交互高度依赖于 React 状态、从聊天上下文传递的回调，以及与底层服务 API 的集成，以实现数据持久化和播放。

来源：

web/app/components/base/chat/chat/answer/operation.tsx:1-374
web/app/components/base/audio-btn/index.tsx:1-112
web/app/components/base/audio-btn/audio.player.manager.ts:1-100