81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import { Bot, Check, Copy, ThumbsDown, ThumbsUp, UserRound } from "lucide-react";
|
||
import type { ChatMessage } from "@/lib/h5MockQa";
|
||
|
||
export default function ChatBubble({
|
||
message,
|
||
onCopy,
|
||
onFeedback
|
||
}: {
|
||
message: ChatMessage;
|
||
onCopy?: (message: ChatMessage) => void;
|
||
onFeedback?: (messageId: string, feedback: "liked" | "disliked") => void;
|
||
}) {
|
||
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 flex items-center gap-2 text-xs text-slate-400 ${isUser ? "justify-end" : "justify-start"}`}>
|
||
<span>{message.createdAt}</span>
|
||
{!isUser ? (
|
||
<span className="flex items-center gap-1">
|
||
<button
|
||
onClick={() => onCopy?.(message)}
|
||
className="flex h-7 w-7 items-center justify-center rounded-md hover:bg-slate-100 hover:text-jade"
|
||
aria-label="复制回答"
|
||
>
|
||
<Copy className="h-3.5 w-3.5" aria-hidden />
|
||
</button>
|
||
<button
|
||
onClick={() => onFeedback?.(message.id, "liked")}
|
||
className={`flex h-7 w-7 items-center justify-center rounded-md hover:bg-teal-50 hover:text-jade ${
|
||
message.feedback === "liked" ? "bg-teal-50 text-jade" : ""
|
||
}`}
|
||
aria-label="回答有帮助"
|
||
>
|
||
{message.feedback === "liked" ? <Check className="h-3.5 w-3.5" aria-hidden /> : <ThumbsUp className="h-3.5 w-3.5" aria-hidden />}
|
||
</button>
|
||
<button
|
||
onClick={() => onFeedback?.(message.id, "disliked")}
|
||
className={`flex h-7 w-7 items-center justify-center rounded-md hover:bg-rose-50 hover:text-rose-600 ${
|
||
message.feedback === "disliked" ? "bg-rose-50 text-rose-600" : ""
|
||
}`}
|
||
aria-label="回答没解决"
|
||
>
|
||
<ThumbsDown className="h-3.5 w-3.5" aria-hidden />
|
||
</button>
|
||
</span>
|
||
) : null}
|
||
</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>
|
||
);
|
||
}
|