PlatypusPus/MushroomEmpire
1
0
Fork 0
mirror of https://github.com/PlatypusPus/MushroomEmpire.git synced 2026-02-07 22:18:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

merged

Browse Source
This commit is contained in:
ShovinDsouza
2025-11-08 04:41:56 +05:30
parent 82527cab81 7830949aa2
commit d989a0e2a3
2 changed files with 3220 additions and 2271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2818
frontend/components/try/CenterPanel.tsx
View File

File diff suppressed because it is too large Load Diff

83
frontend/components/try/ChatbotPanel.tsx
View File

@@ -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 }[]>([
{ role: "assistant", content: "Hi! I'm your Privacy Copilot. Ask me about compliance, GDPR articles, or dataset risks." },
const [messages, setMessages] = useState<
{
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)}` , {
method: 'POST',
headers: { 'accept': 'application/json' },
body: ''
});
const res = await fetch(
`${CHAT_ENDPOINT}/chat?prompt=${encodeURIComponent(prompt)}`,
{
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>
);