Langflow 中的聊天和消息界面包含前端 UI 组件、模态框和类型定义，使用户能够通过对话界面与 AI 流进行交互。该系统处理消息显示、输入收集、内容渲染以及用于聊天工作流的模态框交互。
该界面支持包括文本、媒体、JSON、代码块和错误消息在内的丰富内容类型，在流编辑器环境中提供全面的聊天体验。
聊天和消息界面由 TypeScript 类型定义、模态框组件和 UI 元素组成，用于处理聊天上下文中的用户交互。
聊天界面架构
来源
前端定义了用于表示聊天消息及其相关数据结构的全面的 TypeScript 接口。
前端消息类型层次结构
来源
该界面支持具有不同内容类型的结构化内容块，用于丰富的消息显示。
内容类型系统
来源
内容类型支持丰富的消息渲染。
| 内容类型 | 目的 | 关键属性 |
|---|---|---|
TextContent | 纯文本或 markdown 文本 | text: string |
MediaContent | 图像，视频 | urls: string[], caption?: string |
JSONContent | 结构化数据显示 | data: Record<string, any> |
CodeContent | 代码片段高亮 | code: string, language: string, title?: string |
ErrorContent | 错误信息显示 | component?: string, reason?: string, solution?: string, traceback?: string |
ToolContent | 工具执行详情 | name?: string, tool_input: Record<string, any>, output?: any |
`PlaygroundEvent` 接口处理实时聊天事件。
| 事件类型 | 描述 |
|---|---|
message | 标准聊天消息 |
error | 错误通知 |
warning | 警告消息 |
info | 信息消息 |
token | 流式 token 更新 |
聊天界面包含用于文本输入和提示编辑的专用模态框组件。
`PromptModal` 组件提供了一个交互式界面，用于编辑具有变量高亮和验证功能的 AI 提示。
PromptModal 组件结构
来源
`PromptModal` 的主要功能
| 功能 | 实现 |
|---|---|
| 变量检测 | `checkVariables()` 解析 `{variable_name}` 模式 |
| 语法高亮 | `coloredContent` 结合 `regexHighlight` 和 `varHighlightHTML` |
| 验证 | `usePostValidatePrompt` hook 验证提示结构 |
| 编辑/预览切换 | `isEdit` 状态在 `Textarea` 和预览之间切换 |
| 变量显示 | `Badge` 组件显示提取的变量 |
`ComponentTextModal` 提供了一个简单的文本编辑界面，用于组件输入。
TextAreaModal 组件结构
来源
两个模态框都继承了 `BaseModal`，它提供了统一的模态框行为。
| Modal Component (模态框组件) | 目的 | 主要属性 |
|---|---|---|
PromptModal | AI 提示编辑，支持变量检测 | field_name, value, setValue, nodeClass, setNodeClass |
ComponentTextModal | 简单的文本输入编辑 | value, setValue, password, readonly, changeVisibility |
BaseModal | 通用模态框功能 | open, setOpen, size, children |
该界面利用了几个 UI 组件来创建统一的聊天体验。
`Accordion` 组件提供可折叠的区域，用于组织聊天相关内容。
Accordion 组件架构
来源
手风琴支持
聊天模态框使用标准的表单组件。
| 组件 | 在聊天界面中的使用 |
|---|---|
文本区域 | 消息和提示的文本输入 |
按钮 | 操作触发器（保存、提交等） |
徽章 | 提示编辑器中的变量显示 |
IconComponent | 视觉指示器和控件 |
模态框组件管理用户交互的本地状态。
来源
聊天界面提供了多种交互功能来增强用户体验。
`PromptModal` 包含复杂的变量检测和高亮显示功能。
变量检测过程
来源
变量检测系统
提示编辑器支持在编辑和预览模式之间无缝切换。
来源
两个模态框都支持通过 `handleKeyDown` 工具函数进行键盘快捷操作。
来源
前端接口的结构旨在处理不同的消息场景。
模态框组件通常由父组件触发。
`PlaygroundEvent` 接口支持实时聊天交互。
Langflow 中的聊天和消息系统提供了一个全面的框架来处理用户和 AI 模型之间的消息。它提供：
该系统构成了 Langflow 平台中交互式通信的基础，实现了具有结构化消息功能的复杂 AI 应用程序。