Add mobile H5 QA experience

hy_qa_asset_backend/frontend/components/h5/ChatBubble.tsx

@@ -0,0 +1,41 @@
+"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>
+  );
+}