blob: 8e5d8c5b4c566e3bed9beb4c48d87d3bdd3a5a40 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
"use client"
import { Copy, Check } from "lucide-react"
import type { UIMessage } from "@ai-sdk/react"
interface UserMessageProps {
message: UIMessage
copiedMessageId: string | null
onCopy: (messageId: string, text: string) => void
}
export function UserMessage({
message,
copiedMessageId,
onCopy,
}: UserMessageProps) {
const text = message.parts
.filter((part) => part.type === "text")
.map((part) => part.text)
.join(" ")
return (
<div className="flex flex-col items-end w-full">
<div className="bg-[#1B1F24] rounded-[12px] p-3 px-[14px] max-w-[80%]">
<p className="text-sm text-white">{text}</p>
</div>
<button
type="button"
onClick={() => onCopy(message.id, text)}
className="p-1.5 hover:bg-[#293952]/40 rounded transition-colors mt-1"
title="Copy message"
>
{copiedMessageId === message.id ? (
<Check className="size-3.5 text-green-400" />
) : (
<Copy className="size-3.5 text-white/50" />
)}
</button>
</div>
)
}
|