mirror of
https://github.com/PlatypusPus/MushroomEmpire.git
synced 2026-02-07 22:18:59 +00:00
ref: cleanup
This commit is contained in:
nearlynithin
@@ -2,118 +2,161 @@
|
|||||||
import { useState, useRef, useEffect } from "react";
|
import { useState, useRef, useEffect } from "react";
|
||||||
import { chatWithCopilot } from "../../lib/api";
|
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() {
|
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";
|
||||||
const [input, setInput] = useState("");
|
content: string;
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
pending?: boolean;
|
||||||
const [delayedError, setDelayedError] = useState<string | null>(null);
|
error?: boolean;
|
||||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
}[]
|
||||||
|
>([
|
||||||
|
{
|
||||||
|
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);
|
||||||
|
const [delayedError, setDelayedError] = useState<string | null>(null);
|
||||||
|
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (scrollRef.current) {
|
if (scrollRef.current) {
|
||||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||||
}
|
}
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
async function handleSubmit(e: React.FormEvent) {
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const prompt = input.trim();
|
const prompt = input.trim();
|
||||||
if (!prompt || isLoading) return;
|
if (!prompt || isLoading) return;
|
||||||
setInput("");
|
setInput("");
|
||||||
setDelayedError(null);
|
setDelayedError(null);
|
||||||
setMessages(prev => [...prev, { role: "user", content: prompt }, { role: "assistant", content: "Thinking…", pending: true }]);
|
setMessages((prev) => [
|
||||||
setIsLoading(true);
|
...prev,
|
||||||
|
{ role: "user", content: prompt },
|
||||||
|
{ role: "assistant", content: "Thinking…", pending: true },
|
||||||
|
]);
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
// Delay window for showing errors (avoid instant flashing if slow model)
|
// Delay window for showing errors (avoid instant flashing if slow model)
|
||||||
const errorDisplayDelayMs = 4_000;
|
const errorDisplayDelayMs = 4_000;
|
||||||
let canShowError = false;
|
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) {
|
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 {
|
try {
|
||||||
let responseText: string | null = null;
|
let responseText: string | null = null;
|
||||||
// Primary attempt via shared client
|
// Primary attempt via shared client
|
||||||
try {
|
try {
|
||||||
responseText = await chatWithCopilot(prompt);
|
responseText = await chatWithCopilot(prompt);
|
||||||
} catch (primaryErr: any) {
|
} catch (primaryErr: any) {
|
||||||
// Fallback: replicate working curl (query param, empty body)
|
// Fallback: replicate working curl (query param, empty body)
|
||||||
try {
|
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" },
|
||||||
if (res.ok) {
|
body: "",
|
||||||
const j = await res.json();
|
},
|
||||||
responseText = j.response || JSON.stringify(j);
|
);
|
||||||
} else {
|
if (res.ok) {
|
||||||
throw primaryErr;
|
const j = await res.json();
|
||||||
}
|
responseText = j.response || JSON.stringify(j);
|
||||||
} catch { throw primaryErr; }
|
} else {
|
||||||
}
|
throw primaryErr;
|
||||||
clearTimeout(delayTimer);
|
}
|
||||||
setMessages(prev => prev.map(m => m.pending ? { ...m, content: responseText || 'No response text', pending: false } : m));
|
} catch {
|
||||||
} catch (err: any) {
|
throw primaryErr;
|
||||||
clearTimeout(delayTimer);
|
}
|
||||||
const errMsg = err?.message || 'Unexpected error';
|
}
|
||||||
if (canShowError) {
|
clearTimeout(delayTimer);
|
||||||
showErrorBubble(errMsg);
|
setMessages((prev) =>
|
||||||
} else {
|
prev.map((m) =>
|
||||||
setDelayedError(errMsg);
|
m.pending
|
||||||
}
|
? {
|
||||||
} finally {
|
...m,
|
||||||
setIsLoading(false);
|
content: responseText || "No response text",
|
||||||
}
|
pending: false,
|
||||||
}
|
}
|
||||||
|
: m,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
} catch (err: any) {
|
||||||
|
clearTimeout(delayTimer);
|
||||||
|
const errMsg = err?.message || "Unexpected error";
|
||||||
|
if (canShowError) {
|
||||||
|
showErrorBubble(errMsg);
|
||||||
|
} else {
|
||||||
|
setDelayedError(errMsg);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full border-l border-slate-200 bg-white/80 overflow-hidden">
|
<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">
|
<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>
|
||||||
<div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-3">
|
<div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||||
{messages.map((m, i) => (
|
{messages.map((m, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className={"rounded-md px-3 py-2 text-sm max-w-[80%] whitespace-pre-wrap " +
|
className={
|
||||||
(m.role === "assistant"
|
"rounded-md px-3 py-2 text-sm max-w-[80%] whitespace-pre-wrap " +
|
||||||
? m.error
|
(m.role === "assistant"
|
||||||
? "bg-red-50 text-red-700 border border-red-200"
|
? m.error
|
||||||
: m.pending
|
? "bg-red-50 text-red-700 border border-red-200"
|
||||||
? "bg-brand-600/10 text-brand-700 animate-pulse"
|
: m.pending
|
||||||
: "bg-brand-600/10 text-brand-800"
|
? "bg-brand-600/10 text-brand-700 animate-pulse"
|
||||||
: "bg-brand-600 text-white ml-auto")}
|
: "bg-brand-600/10 text-brand-800"
|
||||||
>
|
: "bg-brand-600 text-white ml-auto")
|
||||||
{m.content}
|
}
|
||||||
</div>
|
>
|
||||||
))}
|
{m.content}
|
||||||
</div>
|
</div>
|
||||||
<div className="p-3 border-t border-slate-200">
|
))}
|
||||||
<form className="flex gap-2" onSubmit={handleSubmit}>
|
</div>
|
||||||
<input
|
<div className="p-3 border-t border-slate-200">
|
||||||
value={input}
|
<form className="flex gap-2" onSubmit={handleSubmit}>
|
||||||
onChange={e => setInput(e.target.value)}
|
<input
|
||||||
placeholder="Ask about GDPR, compliance, privacy risks..."
|
value={input}
|
||||||
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"
|
onChange={(e) => setInput(e.target.value)}
|
||||||
disabled={isLoading}
|
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"
|
||||||
<button
|
disabled={isLoading}
|
||||||
type="submit"
|
/>
|
||||||
disabled={!input.trim() || isLoading}
|
<button
|
||||||
className="rounded-md bg-brand-600 text-white px-4 py-2 text-sm font-medium disabled:opacity-50"
|
type="submit"
|
||||||
>
|
disabled={!input.trim() || isLoading}
|
||||||
{isLoading ? 'Sending…' : 'Send'}
|
className="rounded-md bg-brand-600 text-white px-4 py-2 text-sm font-medium disabled:opacity-50"
|
||||||
</button>
|
>
|
||||||
</form>
|
{isLoading ? "Sending…" : "Send"}
|
||||||
<p className="mt-2 text-[11px] text-slate-500">Responses may take up to 1–2 minutes while the local model generates output.</p>
|
</button>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
<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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user