merged

frontend/components/try/ChatbotPanel.tsx

@@ -2,11 +2,23 @@
 import { useState, useRef, useEffect } from "react";
 import { chatWithCopilot } from "../../lib/api";
 
-const CHAT_ENDPOINT = process.env.NEXT_PUBLIC_CHAT_API_URL || 'https://fc39539f7cb9.ngrok-free.app';
+const CHAT_ENDPOINT =
+  process.env.NEXT_PUBLIC_CHAT_API_URL || "https://fc39539f7cb9.ngrok-free.app";
 
 export function ChatbotPanel() {
-	const [messages, setMessages] = useState<{ role: "user" | "assistant"; content: string; pending?: boolean; error?: boolean }[]>([
+  const [messages, setMessages] = useState<
-		{ role: "assistant", content: "Hi! I'm your Privacy Copilot. Ask me about compliance, GDPR articles, or dataset risks." },
+    {
+      role: "user" | "assistant";
+      content: string;
+      pending?: boolean;
+      error?: boolean;
+    }[]
+  >([
+    {
+      role: "assistant",
+      content:
+        "Hi! I'm GDPR bot. Ask me about compliance, GDPR articles, or dataset risks.",
+    },
   ]);
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -25,16 +37,27 @@ export function ChatbotPanel() {
     if (!prompt || isLoading) return;
     setInput("");
     setDelayedError(null);
-		setMessages(prev => [...prev, { role: "user", content: prompt }, { role: "assistant", content: "Thinking…", pending: true }]);
+    setMessages((prev) => [
+      ...prev,
+      { role: "user", content: prompt },
+      { role: "assistant", content: "Thinking…", pending: true },
+    ]);
     setIsLoading(true);
 
     // Delay window for showing errors (avoid instant flashing if slow model)
     const errorDisplayDelayMs = 4_000;
     let canShowError = false;
-		const delayTimer = setTimeout(() => { canShowError = true; if (delayedError) showErrorBubble(delayedError); }, errorDisplayDelayMs);
+    const delayTimer = setTimeout(() => {
+      canShowError = true;
+      if (delayedError) showErrorBubble(delayedError);
+    }, errorDisplayDelayMs);
 
     function showErrorBubble(msg: string) {
-			setMessages(prev => prev.map(m => m.pending ? { ...m, content: msg, pending: false, error: true } : m));
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.pending ? { ...m, content: msg, pending: false, error: true } : m,
+        ),
+      );
     }
 
     try {
@@ -45,24 +68,39 @@ export function ChatbotPanel() {
       } catch (primaryErr: any) {
         // Fallback: replicate working curl (query param, empty body)
         try {
-						const res = await fetch(`${CHAT_ENDPOINT}/chat?prompt=${encodeURIComponent(prompt)}` , {
+          const res = await fetch(
-							method: 'POST',
+            `${CHAT_ENDPOINT}/chat?prompt=${encodeURIComponent(prompt)}`,
-							headers: { 'accept': 'application/json' },
+            {
-							body: ''
+              method: "POST",
-						});
+              headers: { accept: "application/json" },
+              body: "",
+            },
+          );
           if (res.ok) {
             const j = await res.json();
             responseText = j.response || JSON.stringify(j);
           } else {
             throw primaryErr;
           }
-					} catch { throw primaryErr; }
+        } catch {
+          throw primaryErr;
+        }
       }
       clearTimeout(delayTimer);
-				setMessages(prev => prev.map(m => m.pending ? { ...m, content: responseText || 'No response text', pending: false } : m));
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.pending
+            ? {
+                ...m,
+                content: responseText || "No response text",
+                pending: false,
+              }
+            : m,
+        ),
+      );
     } catch (err: any) {
       clearTimeout(delayTimer);
-				const errMsg = err?.message || 'Unexpected error';
+      const errMsg = err?.message || "Unexpected error";
       if (canShowError) {
         showErrorBubble(errMsg);
       } else {
@@ -76,20 +114,22 @@ export function ChatbotPanel() {
   return (
     <div className="flex flex-col h-full border-l border-slate-200 bg-white/80 overflow-hidden">
       <div className="h-14 flex items-center px-4 border-b border-slate-200">
-				<h2 className="font-semibold text-sm text-brand-700">Privacy Copilot</h2>
+        <h2 className="font-semibold text-sm text-brand-700">GDPR Bot</h2>
       </div>
       <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-3">
         {messages.map((m, i) => (
           <div
             key={i}
-						className={"rounded-md px-3 py-2 text-sm max-w-[80%] whitespace-pre-wrap " +
+            className={
+              "rounded-md px-3 py-2 text-sm max-w-[80%] whitespace-pre-wrap " +
               (m.role === "assistant"
                 ? m.error
                   ? "bg-red-50 text-red-700 border border-red-200"
                   : m.pending
                     ? "bg-brand-600/10 text-brand-700 animate-pulse"
                     : "bg-brand-600/10 text-brand-800"
-								: "bg-brand-600 text-white ml-auto")}
+                : "bg-brand-600 text-white ml-auto")
+            }
           >
             {m.content}
           </div>
@@ -99,7 +139,7 @@ export function ChatbotPanel() {
         <form className="flex gap-2" onSubmit={handleSubmit}>
           <input
             value={input}
-						onChange={e => setInput(e.target.value)}
+            onChange={(e) => setInput(e.target.value)}
             placeholder="Ask about GDPR, compliance, privacy risks..."
             className="flex-1 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 disabled:opacity-60"
             disabled={isLoading}
@@ -109,10 +149,13 @@ export function ChatbotPanel() {
             disabled={!input.trim() || isLoading}
             className="rounded-md bg-brand-600 text-white px-4 py-2 text-sm font-medium disabled:opacity-50"
           >
-						{isLoading ? 'Sending…' : 'Send'}
+            {isLoading ? "Sending…" : "Send"}
           </button>
         </form>
-				<p className="mt-2 text-[11px] text-slate-500">Responses may take up to 1–2 minutes while the local model generates output.</p>
+        <p className="mt-2 text-[11px] text-slate-500">
+          Responses may take up to 1–2 minutes while the local model generates
+          output.
+        </p>
       </div>
     </div>
   );