mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-03 06:42:27 +08:00
feat: add copy button to user messages in chat sidebar
- Add copy-to-clipboard functionality for user messages - Support non-HTTPS environments with execCommand fallback - Add visual feedback with check icon on successful copy
This commit is contained in:
5
.gitignore
vendored
5
.gitignore
vendored
@@ -41,3 +41,8 @@ yarn-error.log*
|
|||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
push-via-ec2.sh
|
push-via-ec2.sh
|
||||||
.claude/settings.local.json
|
.claude/settings.local.json
|
||||||
|
|
||||||
|
next
|
||||||
|
next-ai-draw-io@0.2.0
|
||||||
|
object
|
||||||
|
starting
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
|
|||||||
import ExamplePanel from "./chat-example-panel";
|
import ExamplePanel from "./chat-example-panel";
|
||||||
import { UIMessage } from "ai";
|
import { UIMessage } from "ai";
|
||||||
import { convertToLegalXml, replaceNodes } from "@/lib/utils";
|
import { convertToLegalXml, replaceNodes } from "@/lib/utils";
|
||||||
|
import { Copy, Check } from "lucide-react";
|
||||||
|
|
||||||
import { useDiagram } from "@/contexts/diagram-context";
|
import { useDiagram } from "@/contexts/diagram-context";
|
||||||
|
|
||||||
@@ -30,6 +31,50 @@ export function ChatMessageDisplay({
|
|||||||
const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
|
const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// 复制消息到剪贴板,支持非 HTTPS 环境的降级处理
|
||||||
|
const copyMessageToClipboard = async (messageId: string, text: string) => {
|
||||||
|
try {
|
||||||
|
// 优先使用 Clipboard API(需要 HTTPS 或 localhost)
|
||||||
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
} else {
|
||||||
|
// 降级方案:使用传统的 execCommand 方法(兼容 HTTP 环境)
|
||||||
|
const textArea = document.createElement("textarea");
|
||||||
|
textArea.value = text;
|
||||||
|
// 设置样式避免影响页面布局
|
||||||
|
textArea.style.position = "fixed";
|
||||||
|
textArea.style.left = "-9999px";
|
||||||
|
textArea.style.top = "-9999px";
|
||||||
|
textArea.style.opacity = "0";
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.focus();
|
||||||
|
textArea.select();
|
||||||
|
|
||||||
|
const successful = document.execCommand("copy");
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
|
||||||
|
if (!successful) {
|
||||||
|
throw new Error("execCommand copy failed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setCopiedMessageId(messageId);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCopiedMessageId(null);
|
||||||
|
}, 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to copy message:", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMessageTextContent = (message: UIMessage): string => {
|
||||||
|
if (!message.parts) return "";
|
||||||
|
return message.parts
|
||||||
|
.filter((part: any) => part.type === "text")
|
||||||
|
.map((part: any) => part.text)
|
||||||
|
.join("\n");
|
||||||
|
};
|
||||||
const handleDisplayChart = useCallback(
|
const handleDisplayChart = useCallback(
|
||||||
(xml: string) => {
|
(xml: string) => {
|
||||||
const currentXml = xml || "";
|
const currentXml = xml || "";
|
||||||
@@ -160,16 +205,16 @@ export function ChatMessageDisplay({
|
|||||||
{messages.length === 0 ? (
|
{messages.length === 0 ? (
|
||||||
<ExamplePanel setInput={setInput} setFiles={setFiles} />
|
<ExamplePanel setInput={setInput} setFiles={setFiles} />
|
||||||
) : (
|
) : (
|
||||||
messages.map((message) => (
|
messages.map((message) => {
|
||||||
|
const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={message.id}
|
key={message.id}
|
||||||
className={`mb-4 ${
|
className={`mb-4 ${message.role === "user" ? "text-right" : "text-left"
|
||||||
message.role === "user" ? "text-right" : "text-left"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
|
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user"
|
||||||
message.role === "user"
|
|
||||||
? "bg-primary text-primary-foreground"
|
? "bg-primary text-primary-foreground"
|
||||||
: "bg-muted text-muted-foreground"
|
: "bg-muted text-muted-foreground"
|
||||||
}`}
|
}`}
|
||||||
@@ -203,8 +248,24 @@ export function ChatMessageDisplay({
|
|||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
{userMessageText && (
|
||||||
|
<div className="flex justify-start mt-1">
|
||||||
|
<button
|
||||||
|
onClick={() => copyMessageToClipboard(message.id, userMessageText)}
|
||||||
|
className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
|
||||||
|
title={copiedMessageId === message.id ? "Copied!" : "Copy message"}
|
||||||
|
>
|
||||||
|
{copiedMessageId === message.id ? (
|
||||||
|
<Check className="h-3.5 w-3.5 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
)}
|
)}
|
||||||
{error && (
|
{error && (
|
||||||
<div className="text-red-500 text-sm mt-2">
|
<div className="text-red-500 text-sm mt-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user