Roo Code 2.1.16 版本解析：任务历史视图中的 Prompt 复制功能实现与使用指南

Roo Code 2.1.16 版本解析任务历史视图中的 Prompt 复制功能实现与使用指南【免费下载链接】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 2.1.16 版本引入了一项高频实用的交互改进用户可以直接从任务历史Task History视图中复制任意历史任务的 Prompt从而轻松复用、归档或分享之前发给 AI Agent 的指令。本文以该版本的更新说明为主体结合仓库内 CopyButton 组件、TaskItemFooter 组件 及配套单元测试等源码实现深入讲解该功能的位置、交互细节、底层复制逻辑与可验证依据帮助读者快速掌握这一工作流改进。2.1.16 更新要点2.1.16 是 Roo Code 的一个小版本增量发布官方 Release Notes 全文apps/docs/docs/update-notes/v2.1.16.md如下新增功能允许从任务历史视图task history view中复制 Prompt。该版本没有引入新的模型、新的工具或重大架构变更核心改进集中在通用与体验优化General and QOL Improvements一条把复制历史 Prompt这个此前需要手动回看会话才能完成的操作下沉为历史列表中的一键动作。对经常需要在多个任务之间复用相似指令、或需要把历史对话片段整理进文档与代码注释的开发者来说这是直接提升工作效率的改动。功能入口任务历史视图复制 Prompt按钮位于 Roo Code 的任务历史History视图中。历史视图用于展示过往会话的列表每条记录包含任务标题、相对时间如 2 hours ago、子任务标签、Token 消耗与费用信息等并支持搜索、排序、多选删除与导出等操作对应文案定义见 en/history.json。从源码结构webview-ui/src/components/history 目录可以看到历史视图由以下核心组件构成组件文件职责HistoryView.tsx历史视图主容器负责列表渲染、搜索与排序TaskItem.tsx单条历史任务的展示行TaskItemFooter.tsx任务行底部的操作栏承载复制、导出、删除按钮CopyButton.tsx本次版本新增的复制 Prompt按钮组件ExportButton.tsx导出任务完整视图下出现DeleteButton.tsx删除单个任务useGroupedTasks.ts/useTaskSearch.ts任务分组与模糊搜索逻辑每个TaskItem底部都渲染一个TaskItemFooter其中在非选择模式下、鼠标悬停该行时显示操作按钮组CopyButton位于按钮组的最左侧TaskItemFooter ... // webview-ui/src/components/history/TaskItemFooter.tsx#L56-L62 CopyButton itemTask{item.task} / {variant full ExportButton itemId{item.id} /} {onDelete DeleteButton itemId{item.id} onDelete{onDelete} /} /TaskItemFooter交互细节悬停显现操作按钮组默认opacity-0当鼠标悬停group-hover:opacity-100时浮现避免干扰列表浏览。图标反馈按钮使用 Codicon 图标未复制时显示codicon-copy复制成功后短暂切换为codicon-check配合气泡提示 Copy Prompttooltip向用户给出即时确认。阻止冒泡点击复制按钮时调用e.stopPropagation()不会触发行本身的打开该任务事件showTaskWithId避免误跳转。仅复制 Prompt 本体复制内容是item.task即该历史任务最初的用户指令文本而非完整的对话记录、工具调用结果或会话元数据。底层实现从点击到剪贴板复制功能由两个关键实现协作完成面向业务的CopyButton组件与可复用的useClipboardHook。CopyButton 组件CopyButton.tsx 接收一个itemTask: string属性内部通过useClipboard()取得isCopied状态与copy方法// webview-ui/src/components/history/CopyButton.tsx const onCopy useCallback( (e: React.MouseEvent) { e.stopPropagation() if (!isCopied) { copy(itemTask) } }, [isCopied, copy, itemTask], )值得注意的细节是if (!isCopied)守卫当上一次复制反馈2 秒尚未结束时重复点击不会重复写入剪贴板从而避免高频点击导致的状态抖动。按钮同时带有data-testidcopy-prompt-button供单元测试与端到端测试精确定位。useClipboard 复制 Hook实际写入剪贴板的逻辑在通用 Hook useClipboard.ts 中export function useClipboard({ timeout 2000 }: UseClipboardProps {}) { const [isCopied, setIsCopied] useState(false) const copy (value: string) { if (typeof window undefined || !navigator.clipboard?.writeText || !value) { return } navigator.clipboard.writeText(value).then(() { setIsCopied(true) setTimeout(() setIsCopied(false), timeout) }) } return { isCopied, copy } }其关键行为可归纳为API 选择使用 Web 标准的navigator.clipboard.writeText无需浏览器插件或权限弹窗之外的额外依赖健壮性保护在非浏览器环境如 SSR 或测试的 Node 环境或剪贴板 API 不可用时静默返回不抛出异常状态复位写入成功后isCopied置为true并在默认 2000ms 后自动复位驱动按钮图标从对勾check回到复制copy状态同时允许下一次复制。该 Hook 同样被会话视图中的其他复制入口复用见 TaskActions.tsx 中基于useCopyToClipboard的复制动作说明它是一套统一的剪贴板交互基础设施。复制内容的来源itemTask最终来自历史任务数据模型。HistoryItem类型定义于 roo-code/types 类型包webview-ui/src/components/history/TaskItemFooter.tsx#L2直接引用了该类型其中task字段即用户发起该任务时输入的首条 Prompt 文本。因此该功能复制的是发起任务的那句原始指令与任务后续演化出的多轮上下文无关——这正是复用 Prompt语义最精确的落点。测试验证仓库为该功能提供了完整的单元测试保障可作为行为契约的权威参照。CopyButton.spec.tsx 覆盖了核心交互渲染按钮后模拟点击断言copy被以任务的 Prompt 文本调用// webview-ui/src/components/history/__tests__/CopyButton.spec.tsx it(copies task content when clicked, () { render(CopyButton itemTaskTest task content /) const copyButton screen.getByRole(button) fireEvent.click(copyButton) expect(mockCopy).toHaveBeenCalledWith(Test task content) })此外TaskItem.spec.tsx 与 TaskItemFooter.spec.tsx 分别验证了任务行中确实渲染了copy-prompt-button选择模式selection mode下隐藏该按钮避免与批量操作冲突非选择模式下按钮正常出现。这些测试从行为层面锁定了悬停可见、选择模式隐藏、点击即复制原始 Prompt的产品语义。使用场景与操作步骤典型使用场景Prompt 模板复用把一份精心调校过的指令如代码评审、测试生成、文档撰写模板复制到新任务中保持输出风格与要求一致跨任务分享将历史任务的 Prompt 粘贴到团队协作文档、Issue 或 PR 描述中便于他人复现同样的执行过程Prompt 版本管理对比不同任务中的指令差异迭代出更稳定的高质量指令归档备份在删除历史任务前先复制其 Prompt 留存避免丢失有价值的指令信息。操作步骤打开 Roo Code 面板进入**历史History**视图浏览或使用模糊搜索定位目标任务searchPlaceholder: Fuzzy search history...将鼠标悬停在该任务所在行右下角浮现操作按钮组点击最左侧的**复制Copy Prompt**按钮此时按钮不会跳转打开任务详情按钮图标短暂变为对勾check并显示反馈剪贴板中即已包含该任务的原始 Prompt在新任务或任意编辑器中粘贴使用。提示如果开启了任务分组子任务同样会渲染操作栏isSubtask时显示Subtask标签因此子任务的 Prompt 也可直接复制TaskItemFooter.tsx。注意事项复制的是初始 Prompt 文本不含上下文文件、历史对话或工具调用记录按钮在**选择模式批量操作**下被隐藏需要先退出选择模式剪贴板写入依赖浏览器 WebView 环境的navigator.clipboard在不受支持的环境中该操作会被安全跳过。小结Roo Code 2.1.16 的从任务历史复制 Prompt功能表面上是历史视图中的一个悬停按钮底层则由CopyButton组件、useClipboard剪贴板 Hook、历史任务数据模型与一整套单元测试共同支撑。它把翻回旧会话找指令这一低效操作压缩为一次点击是典型的体验类QOL改进。对于希望通过稳定、可复现的指令体系提升 AI 编码 Agent 使用效率的开发者这是一个低成本、高收益的日常工作流优化点。相关实现与测试均可在当前仓库中直接查阅CopyButton.tsx、TaskItemFooter.tsx、useClipboard.ts 及 CopyButton.spec.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），仅供参考