Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

packages/ui/src/DisclaimerBanner.tsx

@@ -1,28 +1,59 @@
-import { TriangleAlert } from "lucide-react";
-import { Alert, AlertDescription } from "./primitives/alert";
+"use client";
+
+import React, { useState } from "react";
+import { ShieldAlert, Info, X } from "lucide-react";
 import { cn } from "./lib/utils";
 
-const DEFAULT_TEXT =
-  "Nội dung trả lời được tổng hợp từ Dược thư quốc gia Việt Nam và chỉ mang tính tham khảo, " +
-  "không thay thế chỉ định của bác sĩ hoặc dược sĩ.";
-
-export interface DisclaimerBannerProps {
-  text?: string;
+interface DisclaimerBannerProps {
   className?: string;
+  collapsible?: boolean;
 }
 
-export function DisclaimerBanner({ text = DEFAULT_TEXT, className }: DisclaimerBannerProps) {
+export function DisclaimerBanner({ className, collapsible = true }: DisclaimerBannerProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (collapsed) {
+    return (
+      <div className={cn("bg-surface border-b border-border-subtle px-4 py-1 flex items-center justify-between text-xs text-txt-muted", className)}>
+        <div className="flex items-center gap-1.5">
+          <ShieldAlert className="w-3.5 h-3.5 text-status-warning shrink-0" />
+          <span>Thông tin trích từ Dược thư Quốc gia Việt Nam 2018 (Không thay thế chỉ định y khoa).</span>
+        </div>
+        <button
+          onClick={() => setCollapsed(false)}
+          className="text-accent-primary hover:underline text-[0.7rem] font-medium"
+        >
+          Hiện chi tiết
+        </button>
+      </div>
+    );
+  }
+
   return (
-    <Alert
-      variant="warning"
+    <div
       className={cn(
-        "flex items-center justify-center gap-2 rounded-none border-x-0 border-t-0 py-2.5 text-center",
-        "[&>svg]:static [&>svg]:left-auto [&>svg]:top-auto [&>svg~*]:pl-0",
+        "relative flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-elevated/90 px-4 py-2 text-xs text-txt-secondary backdrop-blur-md transition-all shadow-sm",
         className
       )}
     >
-      <TriangleAlert className="h-4 w-4 shrink-0" aria-hidden="true" />
-      <AlertDescription>{text}</AlertDescription>
-    </Alert>
+      <div className="flex items-center gap-2.5 min-w-0">
+        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-status-warning-bg text-status-warning">
+          <ShieldAlert className="h-3.5 w-3.5" />
+        </div>
+        <p className="m-0 truncate text-[0.78rem] leading-tight">
+          <strong className="font-semibold text-txt-primary">Cảnh báo lâm sàng:</strong> Nội dung câu trả lời được truy xuất trực tiếp từ Dược thư Quốc gia Việt Nam 2018, chỉ mang tính chất tra cứu chuyên môn và không thay thế chỉ định điều trị của bác sĩ hoặc dược sĩ lâm sàng.
+        </p>
+      </div>
+
+      {collapsible && (
+        <button
+          onClick={() => setCollapsed(true)}
+          aria-label="Thu gọn cảnh báo"
+          className="rounded-lg p-1 text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors shrink-0"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
   );
 }