Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

2026-08-06 17:21:21 +07:00
parent 1e8cbdb586
commit a4b8e1c4db
78 changed files with 6761 additions and 654 deletions
@@ -0,0 +1,215 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Send, Square, Sparkles, Pill, Search, Command } from "lucide-react";
+import { cn } from "@duoc-thu/ui";
+
+interface ComposerProps {
+  onSubmit: (query: string) => void;
+  isLoading?: boolean;
+  onStop?: () => void;
+  initialValue?: string;
+  className?: string;
+}
+
+const SAMPLE_SUGGESTIONS = [
+  "Liều dùng Paracetamol người lớn và trẻ em theo cân nặng",
+  "Chống chỉ định và tác dụng không mong muốn của Amoxicillin",
+  "Tương tác thuốc giữa Metformin và thuốc cản quang",
+  "Thận trọng khi dùng Aspirin cho bệnh nhân loét dạ dày",
+  "Hướng dẫn liều dùng Ibuprofen và giới hạn tối đa ngày",
+];
+
+export function Composer({
+  onSubmit,
+  isLoading = false,
+  onStop,
+  initialValue = "",
+  className,
+}: ComposerProps) {
+  const [value, setValue] = useState(initialValue);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (initialValue) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+
+  // Fetch suggestions from API route when query length > 1
+  useEffect(() => {
+    const term = value.trim();
+    if (term.length < 2) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/suggest?q=${encodeURIComponent(term)}`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data?.suggestions && Array.isArray(data.suggestions) && data.suggestions.length > 0) {
+            setSuggestions(data.suggestions);
+            setShowSuggestions(true);
+            return;
+          }
+        }
+        // Fallback filter local suggestions
+        const filtered = SAMPLE_SUGGESTIONS.filter((s) =>
+          s.toLowerCase().includes(term.toLowerCase())
+        );
+        setSuggestions(filtered);
+        setShowSuggestions(filtered.length > 0);
+      } catch {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [value]);
+
+  // Close suggestions on outside click
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node)
+      ) {
+        setShowSuggestions(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed || isLoading) return;
+    onSubmit(trimmed);
+    setValue("");
+    setSuggestions([]);
+    setShowSuggestions(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (showSuggestions && suggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : 0));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : suggestions.length - 1));
+        return;
+      }
+      if (e.key === "Enter" && selectedIndex >= 0) {
+        e.preventDefault();
+        setValue(suggestions[selectedIndex]);
+        setShowSuggestions(false);
+        setSelectedIndex(-1);
+        return;
+      }
+    }
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className={cn("relative w-full max-w-4xl mx-auto", className)}>
+      {/* Autocomplete Suggestions Dropdown */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div
+          ref={dropdownRef}
+          className="absolute bottom-full mb-2 left-0 right-0 rounded-2xl border border-border-subtle bg-surface p-2 shadow-elevated backdrop-blur-xl z-40 animate-slide-up"
+        >
+          <div className="px-3 py-1 mb-1 text-[0.68rem] font-bold tracking-wider text-txt-muted uppercase flex items-center gap-1">
+            <Search className="w-3 h-3 text-accent-primary" />
+            <span>Gợi ý tra cứu Dược thư</span>
+          </div>
+          <div className="space-y-1 max-h-48 overflow-y-auto">
+            {suggestions.map((item, idx) => (
+              <button
+                key={idx}
+                onClick={() => {
+                  setValue(item);
+                  setShowSuggestions(false);
+                  inputRef.current?.focus();
+                }}
+                className={cn(
+                  "w-full text-left px-3 py-2 rounded-xl text-xs flex items-center justify-between transition-colors",
+                  selectedIndex === idx
+                    ? "bg-accent-soft text-accent-primary font-semibold"
+                    : "text-txt-secondary hover:bg-surface-hover hover:text-txt-primary"
+                )}
+              >
+                <span className="truncate pr-2">{item}</span>
+                <Pill className="w-3.5 h-3.5 text-accent-primary shrink-0 opacity-70" />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Main Composer Box */}
+      <div className="relative flex flex-col rounded-3xl border border-border-subtle bg-surface p-2 shadow-surface transition-all focus-within:border-border-accent focus-within:shadow-elevated glass-panel">
+        <textarea
+          ref={inputRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Nhập tên thuốc hoặc thuộc tính cần tra (Ví dụ: Liều dùng Paracetamol, Chống chỉ định Amoxicillin...)"
+          rows={2}
+          className="w-full resize-none bg-transparent px-3 py-2 text-sm text-txt-primary placeholder:text-txt-muted focus:outline-none"
+        />
+
+        <div className="flex items-center justify-between gap-2 pt-2 px-2 border-t border-border-subtle/50">
+          <div className="flex items-center gap-1.5 text-[0.7rem] text-txt-muted">
+            <Command className="w-3 h-3" />
+            <span className="hidden sm:inline">Nhấn Enter để gửi • Shift+Enter để xuống dòng</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {isLoading ? (
+              <button
+                onClick={onStop}
+                type="button"
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-status-danger text-txt-inverse text-xs font-bold shadow-sm hover:opacity-90 transition-opacity"
+              >
+                <Square className="w-3.5 h-3.5 fill-current" />
+                <span>Dừng</span>
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={!value.trim()}
+                type="button"
+                className={cn(
+                  "flex items-center gap-1.5 px-4 py-1.5 rounded-xl text-xs font-bold transition-all shadow-sm",
+                  value.trim()
+                    ? "bg-accent-primary text-txt-inverse hover:bg-accent-hover"
+                    : "bg-surface-elevated text-txt-muted cursor-not-allowed"
+                )}
+              >
+                <span>Gửi tra cứu</span>
+                <Send className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}