Roo Code 聊天界面完整指南界面布局、输入交互与状态管理【免费下载链接】Roo-CodeRoo Code gives you a whole dev team of AI agents in your code editor.项目地址: https://gitcode.com/GitHub_Trending/ro/Roo-CodeRoo Code 是运行在 VS Code 侧边栏面板中的 AI 编程助手其聊天界面是用户与 AI 编程代理沟通的唯一入口。本文以官方文档 The Chat Interface 为骨架结合仓库源码系统讲解聊天界面的布局要素、输入框的高级交互 提及、/命令、图片粘贴、消息队列、审批按钮机制、状态指示与消息交互技巧帮助你掌握从发起任务到审批工具调用的完整工作流。一、聊天界面的整体布局聊天界面位于 Roo Code 面板中通过点击 VS Code 活动栏Activity Bar中的 Roo Code 图标袋鼠图标即可打开。它主要由以下核心元素构成序号界面元素位置作用1Chat History聊天历史面板主体区域展示你与 Roo Code 的完整对话你的请求、Roo Code 的回复以及它执行的动作文件编辑、命令执行等2Input Field输入框面板底部使用自然语言输入任务与问题3Action Buttons操作按钮输入框上方批准或拒绝 Roo Code 提出的操作按钮随上下文动态变化4Send Button发送按钮输入框最右侧小飞机图标发送已输入的消息5Plus Button加号按钮顶部 Header切换到 Chat 标签页并聚焦输入框用于重置会话、开启新任务或清除当前任务6Settings Button设置按钮顶部 Header齿轮图标打开设置以定制功能或行为7Mode Selector模式选择器输入框左侧下拉框选择 Roo 执行任务时使用的模式其旁的齿轮打开的是 Modes 标签页而非通用设置带编号的界面元素展示 Roo Code 聊天界面的关键组件。从源码看这些元素在 ChatView.tsx 中被统一编排聊天历史列表使用react-virtuoso虚拟化渲染Virtuoso组件即使任务消息量很大也能流畅滚动输入框则封装在独立的 ChatTextArea.tsx 组件中包含模式选择器ModeSelector、API 配置选择器ApiConfigSelector与自动批准下拉菜单AutoApproveDropdown等子组件。小提示输入框的占位符文本会随任务状态变化——没有活动任务时显示 Type a task有任务时显示 Type a message见ChatView.tsx中placeholderText的计算逻辑。二、充分利用 VS Code 辅助侧边栏Secondary Sidebar默认情况下聊天面板占据主侧边栏这会遮挡资源管理器Explorer、搜索Search、源代码管理Source Control等面板。官方推荐把 Roo Code 拖拽到 VS Code 的辅助侧边栏Secondary Sidebar让两个侧边栏同时可见在活动栏中按住并拖拽 Roo Code 图标将其放到编辑器右侧即可创建一个辅助侧边栏之后就可以同时使用两个侧边栏右侧与 Roo Code 对话左侧照常浏览文件、搜索与提交代码。更多生产力技巧可参考 Tips Tricks 指南。三、输入框从自然语言到结构化上下文的完整交互输入框是整个界面的核心操作区。除了输入自然语言它还支持一套丰富的上下文注入语法这些功能全部由 ChatTextArea.tsx 实现。3.1 使用提及注入上下文在输入框中输入会弹出上下文菜单ContextMenu你可以选择文件与文件夹输入后继续键入文件名可进行搜索选择后以/path/to/file形式插入Roo 会读取该文件内容作为上下文已打开的标签页自动列出当前编辑器中打开的文件Git 提交Commit菜单中提供 Git 选项输入十六进制哈希可搜索提交记录选中后以提交哈希形式插入问题Problems插入problems会引入当前工作区的问题面板诊断信息终端输出Terminal插入terminal引入终端最近输出模式Modes选择某个模式直接切换 Roo 的执行模式。源码中handleMentionSelect依据ContextMenuOptionType分别处理上述类型输入并键入字符后会以 200ms 防抖向后端发送searchFiles请求见handleInputChange中的setTimeout逻辑实现即时文件搜索。所有提及与有效命令都会在输入框底层的高亮层highlightLayerRef中被实时标记高亮便于你确认上下文已被正确识别。3.2 使用/调用 Slash 命令输入/会列出可用的 Slash 命令。选中后命令会以/commandName形式插入输入框见handleMentionSelect中Command分支的commandMention处理作为一条可发送的指令。Roo 会在每次打开斜杠菜单时通过requestCommands向后端请求最新命令列表。3.3 粘贴与拖拽图片粘贴图片支持直接Ctrl/Cmd V粘贴剪贴板中的png、jpeg、webp格式图片见handlePaste中acceptedTypes的定义拖拽图片按住Shift键并拖拽文件/图片到输入框即可添加见onDragOver对shiftKey的检查拖拽文件路径时则会自动转换为提及格式数量上限每条消息最多附带 20 张图片MAX_IMAGES_PER_MESSAGE 20对应 Anthropic API 的上限定义于ChatView.tsx粘贴 URL粘贴纯 URL 时会自动在末尾补一个空格方便你按退格键快速移除。如果当前模型不支持图片!model?.supportsImages或图片已达上限图片按钮会自动禁用shouldDisableImages。3.4 回车行为与快捷键输入框的 Enter 行为由设置项enterBehavior控制默认行为Enter发送消息Shift Enter换行newline 模式Enter换行Ctrl/Cmd Enter或Shift Enter发送见handleKeyDown中的分支逻辑发送快捷键会显示在发送按钮的 Tooltip 上。此外输入框支持上下方向键遍历历史消息/历史任务usePromptHistory钩子方便重复使用之前的指令。3.5 消息队列任务繁忙时也能发送消息当任务正在执行isStreaming或后端正在处理 API 请求时输入框的发送会被暂时禁用。此时如果你输入并发送消息Roo 不会丢弃它而是通过queueMessage消息类型将其加入消息队列Message Queue待当前请求结束后按顺序依次处理——详见handleSendMessage中对sendingDisabled || isStreaming || messageQueue.length 0条件的判断。这也意味着你可以在 AI 忙碌时提前排好下一个指令。四、Action Buttons上下文感知的审批机制操作按钮位于输入框上方不是固定不变的而是根据 Roo 当前等待的状态动态呈现。这个状态机逻辑集中在ChatView.tsx的useDeepCompareEffect中当最后一条消息是ask类型时界面进入等待用户回应的状态按钮文本由primaryButtonText/secondaryButtonText决定。常见场景与对应按钮如下等待状态ask 类型主按钮次按钮说明tool文件编辑如 newFileCreated / editedExistingFile / appliedDiffSaveReject批准或拒绝文件修改toolreadFile / listFilesApproveReject批准或拒绝读取文件/列出目录commandRun CommandReject批准执行终端命令command_outputProceed While RunningKill Command命令运行中继续或终止use_mcp_serverApproveReject批准或拒绝调用 MCP 服务器工具api_req_failedRetryStart New TaskAPI 请求失败后的处理mistake_limit_reachedProceed AnywaysStart New Task达到错误次数上限后的处理completion_resultStart New Task—任务完成开始新任务resume_taskResume TaskTerminate恢复或终止任务从源码可以看出更多细节批量审批当 AI 连续发起多个readFile、listFiles或文件编辑请求时界面会自动把它们批量合并batchConsecutivesynthesizeReadFileBatch等逻辑对应按钮文案变为 Approve N Files 之类的批量确认避免逐条点击见groupedMessages的计算跟踪标记点击主按钮后前端通过askResponse: yesButtonClicked回复后端点击次按钮则发送noButtonClicked告诉模型该操作失败请另寻方案错误重试与恢复api_req_failed时主按钮为 Retry任务可恢复时显示 Resume Task子任务已完成时按钮自动变为 Start New Task判断条件是消息流中存在completion_result且任务带parentTaskId取消任务在流式输出过程中发送按钮位置会出现停止按钮Square图标点击会向后端发送cancelTask。这些按钮行为的正确性在 ChatRow.diff-actions.spec.tsx、ChatView.spec.tsx 等测试中均有覆盖。五、与消息进行交互聊天历史中的消息支持多种交互方式可点击链接消息中的文件路径、URL 及其他提及均可点击。点击文件路径会在编辑器中打开对应文件点击 URL 会用默认浏览器打开复制文本选中文本后用标准复制快捷键Ctrl/Cmd C即可复制代码块等元素还提供专门的 Copy 按钮ChatRow渲染时通过showCopyButton开启展开/折叠点击一条消息可以展开或折叠其内容。展开操作会被记录并暂停自动跟随滚动见ChatView.tsx中expandedRows与enterUserBrowsingHistory(row-expansion)的逻辑方便你回看历史而不被打断。六、状态指示器读懂 Roo 的运行状态聊天界面通过多种状态指示帮助你实时感知任务进展加载指示器Loading SpinnerRoo 正在处理请求时显示。在源码层面isStreaming通过检查最后一条消息是否为partial流式输出中、是否存在尚未结束的api_req_started消息来判定并在请求进行中禁用输入框错误消息Error Messages出错时显示红色错误消息ErrorRow组件渲染通常伴随 Retry / Start New Task 等处理按钮成功消息Success Messages绿色消息表示动作成功完成例如 Task Completed 标签更多状态还包括上下文窗口进度指示ContextWindowProgress显示已用上下文占比、API 请求耗时与成本统计、终端输出块TerminalOutput、待处理消息队列提示QueuedMessages以及检查点保存提示等均以独立行组件渲染在消息流中。此外Roo Code 会在以下时机播放提示音notification.wav、celebration.wav、progress_loop.wav定义于 ChatView.tsx 的playSound需要你介入时interactionRequired播放通知音任务成功完成时播放庆祝音仅当无排队消息时。你可以在设置中开关提示音与调节音量soundEnabled/soundVolume。七、写在最后Roo Code 的聊天界面不是简单的对话框而是一套围绕人机协作审批设计的完整交互系统提及与/命令提供了精准的上下文注入上下文感知的 Action Buttons 让你对每一次文件修改、命令执行和工具调用拥有最终决定权而消息队列、状态指示与辅助侧边栏布局则保证了长任务的连续性与多任务处理效率。掌握这些交互细节后你可以在保持充分控制的前提下把繁琐的编码、调试与重构工作交给 Roo Code并随时通过界面状态准确把握它的运行节奏。深入阅读 ChatView.tsx 与 ChatTextArea.tsx 的源码还能进一步理解每个交互背后的实现细节。【免费下载链接】Roo-CodeRoo Code gives you a whole dev team of AI agents in your code editor.项目地址: https://gitcode.com/GitHub_Trending/ro/Roo-Code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Roo Code 聊天界面完整指南：界面布局、输入交互与状态管理
Roo Code 聊天界面完整指南界面布局、输入交互与状态管理【免费下载链接】Roo-CodeRoo Code gives you a whole dev team of AI agents in your code editor.项目地址: https://gitcode.com/GitHub_Trending/ro/Roo-CodeRoo Code 是运行在 VS Code 侧边栏面板中的 AI 编程助手其聊天界面是用户与 AI 编程代理沟通的唯一入口。本文以官方文档 The Chat Interface 为骨架结合仓库源码系统讲解聊天界面的布局要素、输入框的高级交互 提及、/命令、图片粘贴、消息队列、审批按钮机制、状态指示与消息交互技巧帮助你掌握从发起任务到审批工具调用的完整工作流。一、聊天界面的整体布局聊天界面位于 Roo Code 面板中通过点击 VS Code 活动栏Activity Bar中的 Roo Code 图标袋鼠图标即可打开。它主要由以下核心元素构成序号界面元素位置作用1Chat History聊天历史面板主体区域展示你与 Roo Code 的完整对话你的请求、Roo Code 的回复以及它执行的动作文件编辑、命令执行等2Input Field输入框面板底部使用自然语言输入任务与问题3Action Buttons操作按钮输入框上方批准或拒绝 Roo Code 提出的操作按钮随上下文动态变化4Send Button发送按钮输入框最右侧小飞机图标发送已输入的消息5Plus Button加号按钮顶部 Header切换到 Chat 标签页并聚焦输入框用于重置会话、开启新任务或清除当前任务6Settings Button设置按钮顶部 Header齿轮图标打开设置以定制功能或行为7Mode Selector模式选择器输入框左侧下拉框选择 Roo 执行任务时使用的模式其旁的齿轮打开的是 Modes 标签页而非通用设置带编号的界面元素展示 Roo Code 聊天界面的关键组件。从源码看这些元素在 ChatView.tsx 中被统一编排聊天历史列表使用react-virtuoso虚拟化渲染Virtuoso组件即使任务消息量很大也能流畅滚动输入框则封装在独立的 ChatTextArea.tsx 组件中包含模式选择器ModeSelector、API 配置选择器ApiConfigSelector与自动批准下拉菜单AutoApproveDropdown等子组件。小提示输入框的占位符文本会随任务状态变化——没有活动任务时显示 Type a task有任务时显示 Type a message见ChatView.tsx中placeholderText的计算逻辑。二、充分利用 VS Code 辅助侧边栏Secondary Sidebar默认情况下聊天面板占据主侧边栏这会遮挡资源管理器Explorer、搜索Search、源代码管理Source Control等面板。官方推荐把 Roo Code 拖拽到 VS Code 的辅助侧边栏Secondary Sidebar让两个侧边栏同时可见在活动栏中按住并拖拽 Roo Code 图标将其放到编辑器右侧即可创建一个辅助侧边栏之后就可以同时使用两个侧边栏右侧与 Roo Code 对话左侧照常浏览文件、搜索与提交代码。更多生产力技巧可参考 Tips Tricks 指南。三、输入框从自然语言到结构化上下文的完整交互输入框是整个界面的核心操作区。除了输入自然语言它还支持一套丰富的上下文注入语法这些功能全部由 ChatTextArea.tsx 实现。3.1 使用提及注入上下文在输入框中输入会弹出上下文菜单ContextMenu你可以选择文件与文件夹输入后继续键入文件名可进行搜索选择后以/path/to/file形式插入Roo 会读取该文件内容作为上下文已打开的标签页自动列出当前编辑器中打开的文件Git 提交Commit菜单中提供 Git 选项输入十六进制哈希可搜索提交记录选中后以提交哈希形式插入问题Problems插入problems会引入当前工作区的问题面板诊断信息终端输出Terminal插入terminal引入终端最近输出模式Modes选择某个模式直接切换 Roo 的执行模式。源码中handleMentionSelect依据ContextMenuOptionType分别处理上述类型输入并键入字符后会以 200ms 防抖向后端发送searchFiles请求见handleInputChange中的setTimeout逻辑实现即时文件搜索。所有提及与有效命令都会在输入框底层的高亮层highlightLayerRef中被实时标记高亮便于你确认上下文已被正确识别。3.2 使用/调用 Slash 命令输入/会列出可用的 Slash 命令。选中后命令会以/commandName形式插入输入框见handleMentionSelect中Command分支的commandMention处理作为一条可发送的指令。Roo 会在每次打开斜杠菜单时通过requestCommands向后端请求最新命令列表。3.3 粘贴与拖拽图片粘贴图片支持直接Ctrl/Cmd V粘贴剪贴板中的png、jpeg、webp格式图片见handlePaste中acceptedTypes的定义拖拽图片按住Shift键并拖拽文件/图片到输入框即可添加见onDragOver对shiftKey的检查拖拽文件路径时则会自动转换为提及格式数量上限每条消息最多附带 20 张图片MAX_IMAGES_PER_MESSAGE 20对应 Anthropic API 的上限定义于ChatView.tsx粘贴 URL粘贴纯 URL 时会自动在末尾补一个空格方便你按退格键快速移除。如果当前模型不支持图片!model?.supportsImages或图片已达上限图片按钮会自动禁用shouldDisableImages。3.4 回车行为与快捷键输入框的 Enter 行为由设置项enterBehavior控制默认行为Enter发送消息Shift Enter换行newline 模式Enter换行Ctrl/Cmd Enter或Shift Enter发送见handleKeyDown中的分支逻辑发送快捷键会显示在发送按钮的 Tooltip 上。此外输入框支持上下方向键遍历历史消息/历史任务usePromptHistory钩子方便重复使用之前的指令。3.5 消息队列任务繁忙时也能发送消息当任务正在执行isStreaming或后端正在处理 API 请求时输入框的发送会被暂时禁用。此时如果你输入并发送消息Roo 不会丢弃它而是通过queueMessage消息类型将其加入消息队列Message Queue待当前请求结束后按顺序依次处理——详见handleSendMessage中对sendingDisabled || isStreaming || messageQueue.length 0条件的判断。这也意味着你可以在 AI 忙碌时提前排好下一个指令。四、Action Buttons上下文感知的审批机制操作按钮位于输入框上方不是固定不变的而是根据 Roo 当前等待的状态动态呈现。这个状态机逻辑集中在ChatView.tsx的useDeepCompareEffect中当最后一条消息是ask类型时界面进入等待用户回应的状态按钮文本由primaryButtonText/secondaryButtonText决定。常见场景与对应按钮如下等待状态ask 类型主按钮次按钮说明tool文件编辑如 newFileCreated / editedExistingFile / appliedDiffSaveReject批准或拒绝文件修改toolreadFile / listFilesApproveReject批准或拒绝读取文件/列出目录commandRun CommandReject批准执行终端命令command_outputProceed While RunningKill Command命令运行中继续或终止use_mcp_serverApproveReject批准或拒绝调用 MCP 服务器工具api_req_failedRetryStart New TaskAPI 请求失败后的处理mistake_limit_reachedProceed AnywaysStart New Task达到错误次数上限后的处理completion_resultStart New Task—任务完成开始新任务resume_taskResume TaskTerminate恢复或终止任务从源码可以看出更多细节批量审批当 AI 连续发起多个readFile、listFiles或文件编辑请求时界面会自动把它们批量合并batchConsecutivesynthesizeReadFileBatch等逻辑对应按钮文案变为 Approve N Files 之类的批量确认避免逐条点击见groupedMessages的计算跟踪标记点击主按钮后前端通过askResponse: yesButtonClicked回复后端点击次按钮则发送noButtonClicked告诉模型该操作失败请另寻方案错误重试与恢复api_req_failed时主按钮为 Retry任务可恢复时显示 Resume Task子任务已完成时按钮自动变为 Start New Task判断条件是消息流中存在completion_result且任务带parentTaskId取消任务在流式输出过程中发送按钮位置会出现停止按钮Square图标点击会向后端发送cancelTask。这些按钮行为的正确性在 ChatRow.diff-actions.spec.tsx、ChatView.spec.tsx 等测试中均有覆盖。五、与消息进行交互聊天历史中的消息支持多种交互方式可点击链接消息中的文件路径、URL 及其他提及均可点击。点击文件路径会在编辑器中打开对应文件点击 URL 会用默认浏览器打开复制文本选中文本后用标准复制快捷键Ctrl/Cmd C即可复制代码块等元素还提供专门的 Copy 按钮ChatRow渲染时通过showCopyButton开启展开/折叠点击一条消息可以展开或折叠其内容。展开操作会被记录并暂停自动跟随滚动见ChatView.tsx中expandedRows与enterUserBrowsingHistory(row-expansion)的逻辑方便你回看历史而不被打断。六、状态指示器读懂 Roo 的运行状态聊天界面通过多种状态指示帮助你实时感知任务进展加载指示器Loading SpinnerRoo 正在处理请求时显示。在源码层面isStreaming通过检查最后一条消息是否为partial流式输出中、是否存在尚未结束的api_req_started消息来判定并在请求进行中禁用输入框错误消息Error Messages出错时显示红色错误消息ErrorRow组件渲染通常伴随 Retry / Start New Task 等处理按钮成功消息Success Messages绿色消息表示动作成功完成例如 Task Completed 标签更多状态还包括上下文窗口进度指示ContextWindowProgress显示已用上下文占比、API 请求耗时与成本统计、终端输出块TerminalOutput、待处理消息队列提示QueuedMessages以及检查点保存提示等均以独立行组件渲染在消息流中。此外Roo Code 会在以下时机播放提示音notification.wav、celebration.wav、progress_loop.wav定义于 ChatView.tsx 的playSound需要你介入时interactionRequired播放通知音任务成功完成时播放庆祝音仅当无排队消息时。你可以在设置中开关提示音与调节音量soundEnabled/soundVolume。七、写在最后Roo Code 的聊天界面不是简单的对话框而是一套围绕人机协作审批设计的完整交互系统提及与/命令提供了精准的上下文注入上下文感知的 Action Buttons 让你对每一次文件修改、命令执行和工具调用拥有最终决定权而消息队列、状态指示与辅助侧边栏布局则保证了长任务的连续性与多任务处理效率。掌握这些交互细节后你可以在保持充分控制的前提下把繁琐的编码、调试与重构工作交给 Roo Code并随时通过界面状态准确把握它的运行节奏。深入阅读 ChatView.tsx 与 ChatTextArea.tsx 的源码还能进一步理解每个交互背后的实现细节。【免费下载链接】Roo-CodeRoo Code gives you a whole dev team of AI agents in your code editor.项目地址: https://gitcode.com/GitHub_Trending/ro/Roo-Code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考