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），僅供參考