61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import type { ChatMessage } from "@/lib/hooks/use-chat";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface MessageBubbleProps {
|
|
message: ChatMessage;
|
|
isOwn: boolean;
|
|
}
|
|
|
|
function formatTime(date: string): string {
|
|
const d = new Date(date);
|
|
return d.toLocaleTimeString("pt-BR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
|
|
export function MessageBubble({ message, isOwn }: MessageBubbleProps) {
|
|
if (message.message_type === "system") {
|
|
return (
|
|
<div className="flex justify-center my-2">
|
|
<span className="text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full">
|
|
{message.content}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-full mb-2",
|
|
isOwn ? "justify-end" : "justify-start",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"max-w-[70%] rounded-lg px-4 py-2",
|
|
isOwn
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-muted text-foreground",
|
|
)}
|
|
>
|
|
<p className="text-sm whitespace-pre-wrap break-words">
|
|
{message.content}
|
|
</p>
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-1 mt-1 text-xs",
|
|
isOwn ? "text-primary-foreground/70" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<span>{formatTime(message.created_at)}</span>
|
|
{isOwn && message.read_at && <span className="opacity-70">✓✓</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|