feat: add copy button on hover for user messages in conversation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xintaofei
2026-04-03 15:22:34 +08:00
parent c1158bf669
commit 1282dcee19
11 changed files with 103 additions and 15 deletions

View File

@@ -19,8 +19,19 @@ import {
MessageThread,
MessageThreadScrollButton,
} from "@/components/ai-elements/message-thread"
import { Message, MessageContent } from "@/components/ai-elements/message"
import { ChevronDown, ChevronRight, Info, Loader2 } from "lucide-react"
import {
Message,
MessageContent,
MessageAction,
} from "@/components/ai-elements/message"
import {
CheckIcon,
ChevronDown,
ChevronRight,
CopyIcon,
Info,
Loader2,
} from "lucide-react"
import { useTranslations } from "next-intl"
import {
buildPlanKey,
@@ -103,6 +114,54 @@ const CollapsibleSystemMessage = memo(function CollapsibleSystemMessage({
)
})
function extractTextFromParts(parts: AdaptedContentPart[]): string {
return parts
.filter((p): p is { type: "text"; text: string } => p.type === "text")
.map((p) => p.text)
.join("\n")
}
const UserMessageCopyButton = memo(function UserMessageCopyButton({
parts,
}: {
parts: AdaptedContentPart[]
}) {
const t = useTranslations("Folder.chat.messageList")
const [isCopied, setIsCopied] = useState(false)
const timeoutRef = useRef<number>(0)
const handleCopy = useCallback(async () => {
if (isCopied) return
const text = extractTextFromParts(parts)
if (!text) return
try {
await navigator.clipboard.writeText(text)
setIsCopied(true)
timeoutRef.current = window.setTimeout(() => setIsCopied(false), 2000)
} catch {
// ignore
}
}, [parts, isCopied])
useEffect(
() => () => {
window.clearTimeout(timeoutRef.current)
},
[]
)
return (
<MessageAction
tooltip={isCopied ? t("copied") : t("copyMessage")}
className="opacity-0 group-hover/user-msg:opacity-100 transition-opacity self-end"
onClick={handleCopy}
size="icon-xs"
>
{isCopied ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
</MessageAction>
)
})
const HistoricalMessageGroup = memo(function HistoricalMessageGroup({
group,
dimmed = false,
@@ -122,9 +181,18 @@ const HistoricalMessageGroup = memo(function HistoricalMessageGroup({
{group.role === "user" && group.images.length > 0 ? (
<UserImageAttachments images={group.images} className="self-end" />
) : null}
{group.role === "user" ? (
<div className="group/user-msg flex w-fit ml-auto max-w-full items-start gap-1">
<UserMessageCopyButton parts={group.parts} />
<MessageContent>
<ContentPartsRenderer parts={group.parts} role={group.role} />
</MessageContent>
</div>
) : (
<MessageContent>
<ContentPartsRenderer parts={group.parts} role={group.role} />
</MessageContent>
)}
{group.role === "user" && group.resources.length > 0 ? (
<UserResourceLinks resources={group.resources} className="self-end" />
) : null}

View File

@@ -1467,7 +1467,9 @@
"loading": "جارٍ التحميل...",
"error": "خطأ: {message}",
"emptyConversation": "لا توجد رسائل في هذه المحادثة.",
"systemMessage": "رسالة النظام"
"systemMessage": "رسالة النظام",
"copyMessage": "نسخ",
"copied": "تم النسخ"
},
"liveTurnStats": {
"thinking": "جارٍ التفكير...",

View File

@@ -1467,7 +1467,9 @@
"loading": "Lädt...",
"error": "Fehler: {message}",
"emptyConversation": "Keine Nachrichten in dieser Unterhaltung.",
"systemMessage": "Systemnachricht"
"systemMessage": "Systemnachricht",
"copyMessage": "Kopieren",
"copied": "Kopiert"
},
"liveTurnStats": {
"thinking": "Denkt nach...",

View File

@@ -1467,7 +1467,9 @@
"loading": "Loading...",
"error": "Error: {message}",
"emptyConversation": "No messages in this conversation.",
"systemMessage": "System message"
"systemMessage": "System message",
"copyMessage": "Copy",
"copied": "Copied"
},
"liveTurnStats": {
"thinking": "Thinking...",

View File

@@ -1467,7 +1467,9 @@
"loading": "Cargando...",
"error": "Error del chat: {message}",
"emptyConversation": "No hay mensajes en esta conversación.",
"systemMessage": "Mensaje del sistema"
"systemMessage": "Mensaje del sistema",
"copyMessage": "Copiar",
"copied": "Copiado"
},
"liveTurnStats": {
"thinking": "Pensando...",

View File

@@ -1467,7 +1467,9 @@
"loading": "Chargement...",
"error": "Erreur : {message}",
"emptyConversation": "Aucun message dans cette conversation.",
"systemMessage": "Message système"
"systemMessage": "Message système",
"copyMessage": "Copier",
"copied": "Copié"
},
"liveTurnStats": {
"thinking": "Réflexion...",

View File

@@ -1467,7 +1467,9 @@
"loading": "読み込み中...",
"error": "エラー: {message}",
"emptyConversation": "この会話にはメッセージがありません。",
"systemMessage": "システムメッセージ"
"systemMessage": "システムメッセージ",
"copyMessage": "コピー",
"copied": "コピー済み"
},
"liveTurnStats": {
"thinking": "考え中...",

View File

@@ -1467,7 +1467,9 @@
"loading": "불러오는 중...",
"error": "오류: {message}",
"emptyConversation": "이 대화에는 메시지가 없습니다.",
"systemMessage": "시스템 메시지"
"systemMessage": "시스템 메시지",
"copyMessage": "복사",
"copied": "복사됨"
},
"liveTurnStats": {
"thinking": "생각 중...",

View File

@@ -1467,7 +1467,9 @@
"loading": "Carregando...",
"error": "Erro: {message}",
"emptyConversation": "Nenhuma mensagem nesta conversa.",
"systemMessage": "Mensagem do sistema"
"systemMessage": "Mensagem do sistema",
"copyMessage": "Copiar",
"copied": "Copiado"
},
"liveTurnStats": {
"thinking": "Pensando...",

View File

@@ -1467,7 +1467,9 @@
"loading": "加载中...",
"error": "错误:{message}",
"emptyConversation": "当前会话暂无消息。",
"systemMessage": "系统消息"
"systemMessage": "系统消息",
"copyMessage": "复制",
"copied": "已复制"
},
"liveTurnStats": {
"thinking": "思考中...",

View File

@@ -1467,7 +1467,9 @@
"loading": "載入中...",
"error": "錯誤:{message}",
"emptyConversation": "目前會話暫無訊息。",
"systemMessage": "系統訊息"
"systemMessage": "系統訊息",
"copyMessage": "複製",
"copied": "已複製"
},
"liveTurnStats": {
"thinking": "思考中...",