42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { Bot, UserRound } from "lucide-react";
|
||
import type { ChatMessage } from "@/lib/h5MockQa";
|
||
|
||
export default function ChatBubble({ message }: { message: ChatMessage }) {
|
||
const isUser = message.role === "user";
|
||
|
||
return (
|
||
<div className={`flex gap-2 ${isUser ? "justify-end" : "justify-start"}`}>
|
||
{!isUser ? (
|
||
<div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-jade text-white">
|
||
<Bot className="h-4 w-4" aria-hidden />
|
||
</div>
|
||
) : null}
|
||
<div className={`max-w-[82%] ${isUser ? "items-end" : "items-start"}`}>
|
||
<div
|
||
className={`rounded-[14px] px-4 py-3 text-[15px] leading-7 shadow-sm ${
|
||
isUser ? "rounded-tr-md bg-jade text-white" : "rounded-tl-md border border-line bg-white text-ink"
|
||
}`}
|
||
>
|
||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||
{message.source ? (
|
||
<div className={`mt-3 border-t pt-2 text-xs ${isUser ? "border-white/25 text-teal-50" : "border-line text-slate-500"}`}>
|
||
来源：{message.source}
|
||
</div>
|
||
) : null}
|
||
{message.boundary ? (
|
||
<div className="mt-3 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">{message.boundary}</div>
|
||
) : null}
|
||
</div>
|
||
<div className={`mt-1 text-xs text-slate-400 ${isUser ? "text-right" : "text-left"}`}>{message.createdAt}</div>
|
||
</div>
|
||
{isUser ? (
|
||
<div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-200 text-slate-600">
|
||
<UserRound className="h-4 w-4" aria-hidden />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|