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:
@@ -19,8 +19,19 @@ import {
|
|||||||
MessageThread,
|
MessageThread,
|
||||||
MessageThreadScrollButton,
|
MessageThreadScrollButton,
|
||||||
} from "@/components/ai-elements/message-thread"
|
} from "@/components/ai-elements/message-thread"
|
||||||
import { Message, MessageContent } from "@/components/ai-elements/message"
|
import {
|
||||||
import { ChevronDown, ChevronRight, Info, Loader2 } from "lucide-react"
|
Message,
|
||||||
|
MessageContent,
|
||||||
|
MessageAction,
|
||||||
|
} from "@/components/ai-elements/message"
|
||||||
|
import {
|
||||||
|
CheckIcon,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
CopyIcon,
|
||||||
|
Info,
|
||||||
|
Loader2,
|
||||||
|
} from "lucide-react"
|
||||||
import { useTranslations } from "next-intl"
|
import { useTranslations } from "next-intl"
|
||||||
import {
|
import {
|
||||||
buildPlanKey,
|
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({
|
const HistoricalMessageGroup = memo(function HistoricalMessageGroup({
|
||||||
group,
|
group,
|
||||||
dimmed = false,
|
dimmed = false,
|
||||||
@@ -122,9 +181,18 @@ const HistoricalMessageGroup = memo(function HistoricalMessageGroup({
|
|||||||
{group.role === "user" && group.images.length > 0 ? (
|
{group.role === "user" && group.images.length > 0 ? (
|
||||||
<UserImageAttachments images={group.images} className="self-end" />
|
<UserImageAttachments images={group.images} className="self-end" />
|
||||||
) : null}
|
) : null}
|
||||||
<MessageContent>
|
{group.role === "user" ? (
|
||||||
<ContentPartsRenderer parts={group.parts} role={group.role} />
|
<div className="group/user-msg flex w-fit ml-auto max-w-full items-start gap-1">
|
||||||
</MessageContent>
|
<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 ? (
|
{group.role === "user" && group.resources.length > 0 ? (
|
||||||
<UserResourceLinks resources={group.resources} className="self-end" />
|
<UserResourceLinks resources={group.resources} className="self-end" />
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "جارٍ التحميل...",
|
"loading": "جارٍ التحميل...",
|
||||||
"error": "خطأ: {message}",
|
"error": "خطأ: {message}",
|
||||||
"emptyConversation": "لا توجد رسائل في هذه المحادثة.",
|
"emptyConversation": "لا توجد رسائل في هذه المحادثة.",
|
||||||
"systemMessage": "رسالة النظام"
|
"systemMessage": "رسالة النظام",
|
||||||
|
"copyMessage": "نسخ",
|
||||||
|
"copied": "تم النسخ"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "جارٍ التفكير...",
|
"thinking": "جارٍ التفكير...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "Lädt...",
|
"loading": "Lädt...",
|
||||||
"error": "Fehler: {message}",
|
"error": "Fehler: {message}",
|
||||||
"emptyConversation": "Keine Nachrichten in dieser Unterhaltung.",
|
"emptyConversation": "Keine Nachrichten in dieser Unterhaltung.",
|
||||||
"systemMessage": "Systemnachricht"
|
"systemMessage": "Systemnachricht",
|
||||||
|
"copyMessage": "Kopieren",
|
||||||
|
"copied": "Kopiert"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "Denkt nach...",
|
"thinking": "Denkt nach...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
"error": "Error: {message}",
|
"error": "Error: {message}",
|
||||||
"emptyConversation": "No messages in this conversation.",
|
"emptyConversation": "No messages in this conversation.",
|
||||||
"systemMessage": "System message"
|
"systemMessage": "System message",
|
||||||
|
"copyMessage": "Copy",
|
||||||
|
"copied": "Copied"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "Thinking...",
|
"thinking": "Thinking...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "Cargando...",
|
"loading": "Cargando...",
|
||||||
"error": "Error del chat: {message}",
|
"error": "Error del chat: {message}",
|
||||||
"emptyConversation": "No hay mensajes en esta conversación.",
|
"emptyConversation": "No hay mensajes en esta conversación.",
|
||||||
"systemMessage": "Mensaje del sistema"
|
"systemMessage": "Mensaje del sistema",
|
||||||
|
"copyMessage": "Copiar",
|
||||||
|
"copied": "Copiado"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "Pensando...",
|
"thinking": "Pensando...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "Chargement...",
|
"loading": "Chargement...",
|
||||||
"error": "Erreur : {message}",
|
"error": "Erreur : {message}",
|
||||||
"emptyConversation": "Aucun message dans cette conversation.",
|
"emptyConversation": "Aucun message dans cette conversation.",
|
||||||
"systemMessage": "Message système"
|
"systemMessage": "Message système",
|
||||||
|
"copyMessage": "Copier",
|
||||||
|
"copied": "Copié"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "Réflexion...",
|
"thinking": "Réflexion...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "読み込み中...",
|
"loading": "読み込み中...",
|
||||||
"error": "エラー: {message}",
|
"error": "エラー: {message}",
|
||||||
"emptyConversation": "この会話にはメッセージがありません。",
|
"emptyConversation": "この会話にはメッセージがありません。",
|
||||||
"systemMessage": "システムメッセージ"
|
"systemMessage": "システムメッセージ",
|
||||||
|
"copyMessage": "コピー",
|
||||||
|
"copied": "コピー済み"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "考え中...",
|
"thinking": "考え中...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "불러오는 중...",
|
"loading": "불러오는 중...",
|
||||||
"error": "오류: {message}",
|
"error": "오류: {message}",
|
||||||
"emptyConversation": "이 대화에는 메시지가 없습니다.",
|
"emptyConversation": "이 대화에는 메시지가 없습니다.",
|
||||||
"systemMessage": "시스템 메시지"
|
"systemMessage": "시스템 메시지",
|
||||||
|
"copyMessage": "복사",
|
||||||
|
"copied": "복사됨"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "생각 중...",
|
"thinking": "생각 중...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "Carregando...",
|
"loading": "Carregando...",
|
||||||
"error": "Erro: {message}",
|
"error": "Erro: {message}",
|
||||||
"emptyConversation": "Nenhuma mensagem nesta conversa.",
|
"emptyConversation": "Nenhuma mensagem nesta conversa.",
|
||||||
"systemMessage": "Mensagem do sistema"
|
"systemMessage": "Mensagem do sistema",
|
||||||
|
"copyMessage": "Copiar",
|
||||||
|
"copied": "Copiado"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "Pensando...",
|
"thinking": "Pensando...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "加载中...",
|
"loading": "加载中...",
|
||||||
"error": "错误:{message}",
|
"error": "错误:{message}",
|
||||||
"emptyConversation": "当前会话暂无消息。",
|
"emptyConversation": "当前会话暂无消息。",
|
||||||
"systemMessage": "系统消息"
|
"systemMessage": "系统消息",
|
||||||
|
"copyMessage": "复制",
|
||||||
|
"copied": "已复制"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "思考中...",
|
"thinking": "思考中...",
|
||||||
|
|||||||
@@ -1467,7 +1467,9 @@
|
|||||||
"loading": "載入中...",
|
"loading": "載入中...",
|
||||||
"error": "錯誤:{message}",
|
"error": "錯誤:{message}",
|
||||||
"emptyConversation": "目前會話暫無訊息。",
|
"emptyConversation": "目前會話暫無訊息。",
|
||||||
"systemMessage": "系統訊息"
|
"systemMessage": "系統訊息",
|
||||||
|
"copyMessage": "複製",
|
||||||
|
"copied": "已複製"
|
||||||
},
|
},
|
||||||
"liveTurnStats": {
|
"liveTurnStats": {
|
||||||
"thinking": "思考中...",
|
"thinking": "思考中...",
|
||||||
|
|||||||
Reference in New Issue
Block a user