Merge pull request #861 from 2379278408/fix/852-copy-user-input

fix(frontend): add copy action to user messages

Author: safe1ine

frontend/src/components/console/task/message-userinput.tsx

@@ -2,13 +2,19 @@ import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import "@/utils/plain-text-markdown.css"
 import type { MessageType } from "./message"
-import { IconFile } from "@tabler/icons-react"
+import { IconCopy, IconFile } from "@tabler/icons-react"
 import { isTaskImageAttachment, type TaskUserInputAttachment } from "./task-shared"
 import React from "react"
 import { TaskAttachmentPreviewDialog, type TaskAttachmentPreviewFile } from "./task-attachment-preview-dialog"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { toast } from "sonner"
+import { useTranslation } from "react-i18next"
 
 export const UserInputMessageItem = ({ message }: { message: MessageType }) => {
+  const { t } = useTranslation()
   const [previewFile, setPreviewFile] = React.useState<TaskAttachmentPreviewFile | null>(null)
+  const content = typeof message.data.content === "string" ? message.data.content : ""
   const attachments = Array.isArray(message.data.attachments)
     ? message.data.attachments.filter((attachment): attachment is TaskUserInputAttachment => (
       !!attachment
@@ -19,47 +25,80 @@ export const UserInputMessageItem = ({ message }: { message: MessageType }) => {
     ))
     : []
 
+  const handleCopy = async () => {
+    if (!content) return
+
+    try {
+      await navigator.clipboard.writeText(content)
+      toast.success(t("taskDetail.messages.copyUserInputSuccess"))
+    } catch (error) {
+      toast.error(t("taskDetail.messages.copyUserInputFailed"))
+      console.error("Copy user input failed:", error)
+    }
+  }
+
   return (
-    <div className="flex flex-col w-fit rounded-md bg-accent/50 px-4 py-3 max-w-[80%] break-all">
-      {message.data.content && (
-        <div className="user-message-markdown break-all">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              p({children, ...props}) {
-                if (typeof children === 'string') {
-                  return (children as string).split('\n').map((line: string, index: number) => (
-                    <p key={index} {...props}>{line}</p>
-                  ))
-                } else {
-                  return <p {...props}>{children}</p>
+    <div className="group/user-input relative inline-flex w-fit max-w-[80%] flex-col pb-7">
+      <div className="flex flex-col rounded-md bg-accent/50 px-4 py-3 break-all">
+        {content && (
+          <div className="user-message-markdown break-all">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                p({children, ...props}) {
+                  if (typeof children === 'string') {
+                    return (children as string).split('\n').map((line: string, index: number) => (
+                      <p key={index} {...props}>{line}</p>
+                    ))
+                  } else {
+                    return <p {...props}>{children}</p>
+                  }
                 }
-              }
-            }}>
-            {message.data.content}
-          </ReactMarkdown>
-        </div>
-      )}
-      {attachments.length > 0 && (
-        <div className="mt-2 flex flex-col gap-1.5">
-          {attachments.map((attachment, index) => (
-            <button
-              type="button"
-              key={`${attachment.url}-${index}`}
-              className="group/attachment flex max-w-full cursor-pointer items-center gap-2 rounded-md border bg-background/70 px-2 py-1.5 text-left text-xs text-foreground hover:bg-background"
-              onClick={() => setPreviewFile({
-                name: attachment.filename,
-                accessUrl: attachment.url,
-              })}
-            >
-              {isTaskImageAttachment(attachment.filename) ? (
-                <img src={attachment.url} alt={attachment.filename} className="size-4 shrink-0 rounded object-cover" />
-              ) : (
-                <IconFile className="size-4 shrink-0 text-muted-foreground" />
-              )}
-              <span className="min-w-0 flex-1 truncate group-hover/attachment:text-primary">{attachment.filename}</span>
-            </button>
-          ))}
+              }}>
+              {content}
+            </ReactMarkdown>
+          </div>
+        )}
+        {attachments.length > 0 && (
+          <div className="mt-2 flex flex-col gap-1.5">
+            {attachments.map((attachment, index) => (
+              <button
+                type="button"
+                key={`${attachment.url}-${index}`}
+                className="group/attachment flex max-w-full cursor-pointer items-center gap-2 rounded-md border bg-background/70 px-2 py-1.5 text-left text-xs text-foreground hover:bg-background"
+                onClick={() => setPreviewFile({
+                  name: attachment.filename,
+                  accessUrl: attachment.url,
+                })}
+              >
+                {isTaskImageAttachment(attachment.filename) ? (
+                  <img src={attachment.url} alt={attachment.filename} className="size-4 shrink-0 rounded object-cover" />
+                ) : (
+                  <IconFile className="size-4 shrink-0 text-muted-foreground" />
+                )}
+                <span className="min-w-0 flex-1 truncate group-hover/attachment:text-primary">{attachment.filename}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      {content && (
+        <div className="absolute bottom-0 right-0 flex justify-end opacity-0 transition-opacity group-hover/user-input:opacity-100 group-focus-within/user-input:opacity-100">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                className="size-6 text-muted-foreground hover:text-foreground"
+                aria-label={t("taskDetail.messages.copyUserInput")}
+                onClick={handleCopy}
+              >
+                <IconCopy className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("taskDetail.messages.copyUserInput")}</TooltipContent>
+          </Tooltip>
         </div>
       )}
       <TaskAttachmentPreviewDialog

frontend/src/i18n/resources/cn.ts

@@ -4073,6 +4073,9 @@ const cn = {
       loadingHistory: "正在加载",
       loadMore: "加载更多",
       loadHistory: "加载历史消息",
+      copyUserInput: "复制用户输入",
+      copyUserInputSuccess: "用户输入已复制到剪贴板",
+      copyUserInputFailed: "复制用户输入失败",
     },
     plan: {
       title: "执行步骤 ({{completed}}/{{total}})",

frontend/src/i18n/resources/en.ts

@@ -4073,6 +4073,9 @@ const en = {
       loadingHistory: "Loading",
       loadMore: "Load more",
       loadHistory: "Load history",
+      copyUserInput: "Copy user input",
+      copyUserInputSuccess: "User input copied to clipboard",
+      copyUserInputFailed: "Failed to copy user input",
     },
     plan: {
       title: "Steps ({{completed}}/{{total}})",