GuangYu/QuestionProject
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance H5 QA session interactions

Browse Source
This commit is contained in:
Nelson
2026-07-05 18:47:59 +08:00
parent 34aeb22760
commit cd73ed3001
3 changed files with 274 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
hy_qa_asset_backend/frontend/components/h5/ChatBubble.tsx
View File

@@ -1,9 +1,17 @@
"use client";
import { Bot, UserRound } from "lucide-react";
import { Bot, Check, Copy, ThumbsDown, ThumbsUp, UserRound } from "lucide-react";
import type { ChatMessage } from "@/lib/h5MockQa";
export default function ChatBubble({ message }: { message: ChatMessage }) {
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 (
@@ -29,7 +37,38 @@ export default function ChatBubble({ message }: { message: ChatMessage }) {
<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 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">