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-Code

Roo 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 目录）可以看到，历史视图由以下核心组件构成：

每个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 Prompt"（tooltip）向用户给出即时确认。
• 阻止冒泡：点击复制按钮时调用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-testid="copy-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 itemTask="Test 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 留存，避免丢失有价值的指令信息。

操作步骤

1. 打开 Roo Code 面板，进入**历史（History）**视图，浏览或使用模糊搜索定位目标任务（searchPlaceholder: "Fuzzy search history..."）；
2. 将鼠标悬停在该任务所在行，右下角浮现操作按钮组；
3. 点击最左侧的**复制（Copy Prompt）**按钮（此时按钮不会跳转打开任务详情）；
4. 按钮图标短暂变为对勾（check）并显示反馈，剪贴板中即已包含该任务的原始 Prompt；
5. 在新任务或任意编辑器中粘贴使用。

提示：如果开启了任务分组，子任务同样会渲染操作栏（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