Update app/page.tsx

app/page.tsx

@@ -1,651 +1,756 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
-type Role = "user" | "ai";
-type ChatMsg = { id: string; role: Role; text: string; ts: number };
-type HistoryMsg = { role: "user" | "assistant"; content: string };
+type Role = "system" | "user" | "assistant";
+type ChatMsg = { id: string; role: Role; content: string; ts: number };
+
+const DEFAULT_MODELS = [
+  { id: "Qwen/Qwen2.5-7B-Instruct", label: "Qwen 2.5 7B (Instruct)" },
+  { id: "Qwen/Qwen2.5-Coder-32B-Instruct", label: "Qwen 2.5 Coder 32B" },
+  { id: "google/gemma-2-2b-it", label: "Gemma 2 2B IT" },
+  { id: "meta-llama/Llama-3.1-8B-Instruct", label: "Llama 3.1 8B Instruct" },
+];
 
 function uid() {
-  return Math.random().toString(36).slice(2) + Date.now().toString(36);
-}
-function formatTime(ts: number) {
-  const d = new Date(ts);
-  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return Math.random().toString(16).slice(2) + "-" + Date.now().toString(16);
 }
 
-const SUGGESTIONS = [
-  "Explain black holes like I'm 10 explaining to a friend.",
-  "Make a 7-day study plan for Java + DSA.",
-  "Write a scary 6-line story with a twist ending.",
-  "Give 5 business ideas for students in India.",
-];
+/** Minimal SSE parser for OpenAI-style streaming */
+async function readSSE(
+  res: Response,
+  onDelta: (text: string) => void,
+  signal?: AbortSignal
+) {
+  if (!res.body) throw new Error("No response body to stream.");
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+
+  let buf = "";
+  while (true) {
+    if (signal?.aborted) throw new Error("aborted");
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+
+    // SSE events are separated by \n\n
+    let idx: number;
+    while ((idx = buf.indexOf("\n\n")) !== -1) {
+      const rawEvent = buf.slice(0, idx);
+      buf = buf.slice(idx + 2);
+
+      const lines = rawEvent.split("\n");
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed.startsWith("data:")) continue;
+
+        const data = trimmed.slice(5).trim();
+        if (!data) continue;
+        if (data === "[DONE]") return;
+
+        let json: any;
+        try {
+          json = JSON.parse(data);
+        } catch {
+          continue;
+        }
+
+        // OpenAI-style: choices[0].delta.content
+        const delta =
+          json?.choices?.[0]?.delta?.content ??
+          json?.choices?.[0]?.message?.content ??
+          "";
 
-const LS_KEY = "hf_chat_state_v4";
+        if (typeof delta === "string" && delta.length) onDelta(delta);
+      }
+    }
+  }
+}
 
-function NewYearSplash({
-  seconds = 5,
-  onDone,
+function PixelFireworks({
+  show,
+  onSkip,
 }: {
-  seconds?: number;
-  onDone: () => void;
+  show: boolean;
+  onSkip: () => void;
 }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const rafRef = useRef<number | null>(null);
-  const doneRef = useRef(false);
-  const [left, setLeft] = useState(seconds);
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      setLeft((v) => {
-        const nv = v - 1;
-        if (nv <= 0) {
-          clearInterval(t);
-          if (!doneRef.current) {
-            doneRef.current = true;
-            onDone();
-          }
-        }
-        return nv;
-      });
-    }, 1000);
-    return () => clearInterval(t);
-  }, [onDone]);
+  const particlesRef = useRef<
+    { x: number; y: number; vx: number; vy: number; life: number; c: string }[]
+  >([]);
+
+  const year = useMemo(() => {
+    const d = new Date();
+    // If it's December, show next year; otherwise current year
+    return d.getMonth() === 11 ? d.getFullYear() + 1 : d.getFullYear();
+  }, []);
 
   useEffect(() => {
-    const c = canvasRef.current!;
-    const ctx = c.getContext("2d")!;
-    let w = 0, h = 0;
+    if (!show) return;
 
-    const DPR = Math.min(2, window.devicePixelRatio || 1);
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext("2d", { alpha: true })!;
+    const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
 
     function resize() {
-      w = window.innerWidth;
-      h = window.innerHeight;
-      c.width = Math.floor(w * DPR);
-      c.height = Math.floor(h * DPR);
-      c.style.width = `${w}px`;
-      c.style.height = `${h}px`;
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      canvas.width = Math.floor(w * DPR);
+      canvas.height = Math.floor(h * DPR);
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
       ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
     }
 
     resize();
     window.addEventListener("resize", resize);
 
-    type P = { x:number; y:number; vx:number; vy:number; life:number; col:string; s:number };
-    const parts: P[] = [];
-
-    function randCol() {
-      const cols = ["#ffcc00", "#ffe985", "#4cff79", "#66a3ff", "#ff4d4d", "#d47cff"];
-      return cols[Math.floor(Math.random() * cols.length)];
-    }
-
-    function burst(x:number, y:number) {
-      const col = randCol();
-      const n = 40 + Math.floor(Math.random() * 18);
-      for (let i=0;i<n;i++){
-        const a = (Math.PI * 2 * i) / n + (Math.random() * 0.25 - 0.125);
-        const sp = 2.0 + Math.random() * 3.6;
-        parts.push({
-          x, y,
-          vx: Math.cos(a) * sp,
-          vy: Math.sin(a) * sp - (1.4 + Math.random()),
-          life: 44 + Math.random() * 34,
-          col,
-          s: 3
+    const colors = ["#ffd300", "#00ff6a", "#57a7ff", "#ff5a5a", "#c35bff"];
+
+    function burst() {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const x = w * (0.2 + Math.random() * 0.6);
+      const y = h * (0.2 + Math.random() * 0.45);
+      const c = colors[(Math.random() * colors.length) | 0];
+
+      const n = 70;
+      for (let i = 0; i < n; i++) {
+        const a = (Math.PI * 2 * i) / n;
+        const s = 1.2 + Math.random() * 2.8;
+        particlesRef.current.push({
+          x,
+          y,
+          vx: Math.cos(a) * s,
+          vy: Math.sin(a) * s,
+          life: 60 + (Math.random() * 35) | 0,
+          c,
         });
       }
     }
 
-    let tickN = 0;
-
-    function tick() {
-      rafRef.current = requestAnimationFrame(tick);
-      tickN++;
+    let t = 0;
+    function frame() {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
 
-      // fade (keeps trails). This is intentional for the splash.
-      ctx.fillStyle = "rgba(0,0,0,0.18)";
+      // fade
+      ctx.fillStyle = "rgba(0,0,0,0.22)";
       ctx.fillRect(0, 0, w, h);
 
-      // sparkles drizzle
-      if (tickN % 2 === 0) {
-        parts.push({
-          x: Math.random() * w,
-          y: Math.random() * h,
-          vx: (Math.random() - 0.5) * 0.5,
-          vy: (Math.random() - 0.5) * 0.5,
-          life: 16 + Math.random() * 10,
-          col: Math.random() < 0.65 ? "#4cff79" : "#ffe985",
-          s: 2
-        });
-      }
-
-      // fireworks bursts
-      if (tickN % 28 === 0) {
-        burst(80 + Math.random() * (w - 160), 80 + Math.random() * (h * 0.35));
-      }
-
-      // update + draw pixels
-      for (let i = parts.length - 1; i >= 0; i--) {
-        const p = parts[i];
-        p.vy += 0.07;
-        p.x += p.vx;
-        p.y += p.vy;
-        p.life -= 1;
-
-        if (p.life <= 0 || p.x < -80 || p.x > w + 80 || p.y > h + 120) {
-          parts.splice(i, 1);
+      // spawn bursts
+      t++;
+      if (t % 18 === 0) burst();
+
+      // draw particles as pixel blocks
+      const p = particlesRef.current;
+      for (let i = p.length - 1; i >= 0; i--) {
+        const q = p[i];
+        q.x += q.vx;
+        q.y += q.vy;
+        q.vy += 0.03; // gravity
+        q.life -= 1;
+
+        if (q.life <= 0 || q.x < -50 || q.y < -50 || q.x > w + 50 || q.y > h + 50) {
+          p.splice(i, 1);
           continue;
         }
 
-        ctx.fillStyle = p.col;
-        ctx.fillRect(Math.round(p.x), Math.round(p.y), p.s, p.s);
+        const size = q.life > 40 ? 3 : 2;
+        ctx.fillStyle = q.c;
+        ctx.fillRect((q.x | 0), (q.y | 0), size, size);
       }
 
-      if (parts.length > 1600) parts.splice(0, parts.length - 1600);
+      rafRef.current = requestAnimationFrame(frame);
     }
 
-    ctx.clearRect(0, 0, w, h); // clears to transparent black :contentReference[oaicite:2]{index=2}
-    rafRef.current = requestAnimationFrame(tick);
+    // initial clear
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
+    rafRef.current = requestAnimationFrame(frame);
 
     return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
       window.removeEventListener("resize", resize);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      particlesRef.current = [];
     };
-  }, []);
-
-  function skip() {
-    if (doneRef.current) return;
-    doneRef.current = true;
-    onDone();
-  }
+  }, [show]);
 
-  const year = new Date().getFullYear();
+  if (!show) return null;
 
   return (
-    <div className="splash" onClick={skip} role="button" aria-label="Skip splash">
-      <canvas className="splashCanvas" ref={canvasRef} />
-      <div className="splashPanelWrap">
-        <div className="splashPanel">
-          <div className="splashTitle">
-            🎆 HAPPY NEW YEAR 🎆
-            <span className="splashYear">{year}</span>
-          </div>
-
-          <div className="splashSub">
-            Pixel fireworks • Sparkles • Loading AI Chat…
-          </div>
-
-          <div className="splashHint">
-            Tap anywhere to skip • {Math.max(0, left)}s
-          </div>
-        </div>
+    <div className="nyOverlay" role="dialog" aria-modal="true">
+      <canvas className="nyCanvas" ref={canvasRef} />
+      <div className="nyPanel">
+        <div className="nyTitle">HAPPY NEW YEAR</div>
+        <div className="nyYear">{year}</div>
+        <div className="nySub">Pixel fireworks • Loading chat…</div>
+        <button className="btn pixelBtn" onClick={onSkip}>
+          SKIP
+        </button>
       </div>
     </div>
   );
 }
 
-export default function Home() {
-  const [showSplash, setShowSplash] = useState(true);
-
+export default function Page() {
+  const [messages, setMessages] = useState<ChatMsg[]>([]);
   const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [streaming, setStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [toast, setToast] = useState<string | null>(null);
-  const [showTimestamps, setShowTimestamps] = useState(true);
-  const [autoSave, setAutoSave] = useState(true);
-
-  // Settings (model dropdown is inside drawer)
-  const [model, setModel] = useState("Qwen/Qwen2.5-7B-Instruct:together");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [model, setModel] = useState(DEFAULT_MODELS[0].id);
+  const [customModel, setCustomModel] = useState("");
   const [temperature, setTemperature] = useState(0.7);
-  const [maxTokens, setMaxTokens] = useState(256);
-  const [system, setSystem] = useState("You are a helpful AI assistant.");
+  const [maxTokens, setMaxTokens] = useState(512);
+  const [systemPrompt, setSystemPrompt] = useState(
+    "You are a helpful assistant. Keep answers clear and practical."
+  );
+  const [useStreaming, setUseStreaming] = useState(true);
 
-  const [messages, setMessages] = useState<ChatMsg[]>([
-    { id: uid(), role: "ai", text: "", ts: Date.now() },
-  ]);
+  const [showPrompts, setShowPrompts] = useState(true);
+  const [showIntro, setShowIntro] = useState(false);
 
-  const chatRef = useRef<HTMLDivElement | null>(null);
   const abortRef = useRef<AbortController | null>(null);
-  const streamingRef = useRef(false);
-  const [showScrollDown, setShowScrollDown] = useState(false);
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const hasUserMessage = useMemo(() => messages.some((m) => m.role === "user"), [messages]);
-  const showOverlay = !hasUserMessage;
+  // Intro once per session
+  useEffect(() => {
+    try {
+      const seen = sessionStorage.getItem("ny_seen");
+      if (seen === "1") return;
+      sessionStorage.setItem("ny_seen", "1");
+      setShowIntro(true);
+      const t = window.setTimeout(() => setShowIntro(false), 5000);
+      return () => window.clearTimeout(t);
+    } catch {
+      // no-op
+    }
+  }, []);
 
-  // Load saved
+  // Load persisted settings
   useEffect(() => {
     try {
-      const raw = localStorage.getItem(LS_KEY);
+      const raw = localStorage.getItem("mc_chat_settings");
       if (!raw) return;
-      const p = JSON.parse(raw);
-      if (p?.messages?.length) setMessages(p.messages);
-      if (p?.model) setModel(p.model);
-      if (typeof p?.temperature === "number") setTemperature(p.temperature);
-      if (typeof p?.maxTokens === "number") setMaxTokens(p.maxTokens);
-      if (typeof p?.system === "string") setSystem(p.system);
-      if (typeof p?.showTimestamps === "boolean") setShowTimestamps(p.showTimestamps);
-      if (typeof p?.autoSave === "boolean") setAutoSave(p.autoSave);
-    } catch {}
+      const s = JSON.parse(raw);
+      if (typeof s.model === "string") setModel(s.model);
+      if (typeof s.customModel === "string") setCustomModel(s.customModel);
+      if (typeof s.temperature === "number") setTemperature(s.temperature);
+      if (typeof s.maxTokens === "number") setMaxTokens(s.maxTokens);
+      if (typeof s.systemPrompt === "string") setSystemPrompt(s.systemPrompt);
+      if (typeof s.useStreaming === "boolean") setUseStreaming(s.useStreaming);
+    } catch {
+      // ignore
+    }
   }, []);
 
-  // Save
+  // Persist settings
   useEffect(() => {
-    if (!autoSave) return;
     try {
       localStorage.setItem(
-        LS_KEY,
-        JSON.stringify({ messages, model, temperature, maxTokens, system, showTimestamps, autoSave })
+        "mc_chat_settings",
+        JSON.stringify({
+          model,
+          customModel,
+          temperature,
+          maxTokens,
+          systemPrompt,
+          useStreaming,
+        })
       );
-    } catch {}
-  }, [messages, model, temperature, maxTokens, system, showTimestamps, autoSave]);
+    } catch {
+      // ignore
+    }
+  }, [model, customModel, temperature, maxTokens, systemPrompt, useStreaming]);
 
   // Auto-scroll
   useEffect(() => {
-    const el = chatRef.current;
+    const el = listRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
-  }, [messages, loading]);
+  }, [messages, streaming]);
 
-  // Scroll-down button
+  // Hide prompt overlay after first user message
   useEffect(() => {
-    const el = chatRef.current;
-    if (!el) return;
-    const onScroll = () => {
-      const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 140;
-      setShowScrollDown(!nearBottom);
-    };
-    el.addEventListener("scroll", onScroll);
-    onScroll();
-    return () => el.removeEventListener("scroll", onScroll);
-  }, []);
+    if (messages.some((m) => m.role === "user")) setShowPrompts(false);
+  }, [messages]);
 
-  const canSend = useMemo(() => input.trim().length > 0 && !loading, [input, loading]);
+  // Keyboard shortcuts
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        if (streaming) stopStreaming();
+        return;
+      }
 
-  function showToast(text: string) {
-    setToast(text);
-    setTimeout(() => setToast(null), 900);
-  }
+      // Ctrl+L -> clear
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "l") {
+        e.preventDefault();
+        doClear();
+      }
+    }
 
-  function copyText(text: string) {
-    navigator.clipboard?.writeText(text);
-    showToast("Copied!");
-  }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [streaming]);
 
-  function stopGeneration() {
-    try {
-      abortRef.current?.abort();
-      abortRef.current = null;
-      streamingRef.current = false;
-      setLoading(false);
-      showToast("Stopped");
-    } catch {}
+  function activeModel() {
+    return (customModel.trim() || model).trim();
   }
 
-  function clearChat() {
-    stopGeneration();
-    setMessages([{ id: uid(), role: "ai", text: "", ts: Date.now() }]);
-    showToast("Cleared");
-    setShowSplash(true);
+  function stopStreaming() {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setStreaming(false);
   }
 
-  function scrollToBottom() {
-    const el = chatRef.current;
-    if (!el) return;
-    el.scrollTop = el.scrollHeight;
+  function doClear() {
+    stopStreaming();
+    setMessages([]);
+    setShowPrompts(true);
+    setError(null);
+    setInput("");
+    inputRef.current?.focus();
   }
 
   function exportChat() {
-    const lines = messages
-      .filter((m) => m.text.trim().length > 0)
-      .map((m) => `${m.role === "user" ? "You" : "AI"}: ${m.text}`);
-    const blob = new Blob([lines.join("\n\n")], { type: "text/plain" });
+    const payload = {
+      model: activeModel(),
+      temperature,
+      max_tokens: maxTokens,
+      created_at: new Date().toISOString(),
+      messages,
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json",
+    });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "chat.txt";
+    a.download = `chat-${Date.now()}.json`;
     a.click();
     URL.revokeObjectURL(url);
   }
 
-  function buildHistoryForAPI(): HistoryMsg[] {
-    return messages
-      .slice(-12)
-      .filter((m) => m.text.trim().length > 0)
-      .map((m) => ({ role: m.role === "user" ? "user" : "assistant", content: m.text }));
-  }
+  async function runChat(userText: string, replaceLastUser?: boolean) {
+    setError(null);
 
-  function lastUserMessage(): string | null {
-    for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].role === "user") return messages[i].text;
+    // Slash commands
+    const t = userText.trim();
+    if (t === "/clear") {
+      doClear();
+      return;
     }
-    return null;
-  }
-
-  async function streamChat(userText: string, mode: "normal" | "regen") {
-    if (streamingRef.current) return;
-    streamingRef.current = true;
-
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    if (mode === "regen") {
-      setMessages((m) => {
-        const copy = [...m];
-        for (let i = copy.length - 1; i >= 0; i--) {
-          if (copy[i].role === "ai") { copy.splice(i, 1); break; }
-        }
-        return copy;
-      });
+    if (t === "/export") {
+      exportChat();
+      return;
+    }
+    if (t === "/help") {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: uid(),
+          role: "assistant",
+          ts: Date.now(),
+          content:
+            "Commands:\n/clear — clear chat\n/export — download JSON\n/help — show this\n\nShortcuts:\nEnter = send • Shift+Enter = new line • Esc = stop • Ctrl+L = clear",
+        },
+      ]);
+      return;
     }
 
-    const aiId = uid();
-    setMessages((m) => [...m, { id: aiId, role: "ai", text: "", ts: Date.now() }]);
-    setLoading(true);
+    const now = Date.now();
+    const userMsg: ChatMsg = { id: uid(), role: "user", ts: now, content: userText };
+
+    setMessages((prev) => {
+      if (replaceLastUser) {
+        const copy = [...prev];
+        // remove trailing assistant message if present
+        if (copy.length && copy[copy.length - 1].role === "assistant") copy.pop();
+        // remove trailing user message if present
+        if (copy.length && copy[copy.length - 1].role === "user") copy.pop();
+        return [...copy, userMsg, { id: uid(), role: "assistant", ts: now, content: "" }];
+      }
+      return [...prev, userMsg, { id: uid(), role: "assistant", ts: now, content: "" }];
+    });
+
+    const ac = new AbortController();
+    abortRef.current = ac;
+
+    const packedMessages = [
+      { role: "system", content: systemPrompt },
+      // include the entire chat so far (excluding the empty assistant placeholder)
+      ...(() => {
+        const base = replaceLastUser
+          ? (() => {
+              // after state update, easiest is to build from current messages but remove last assistant/user as needed
+              const copy = [...messages];
+              if (copy.length && copy[copy.length - 1].role === "assistant") copy.pop();
+              if (copy.length && copy[copy.length - 1].role === "user") copy.pop();
+              return [...copy, userMsg];
+            })()
+          : [...messages, userMsg];
+
+        return base
+          .filter((m) => m.role === "user" || m.role === "assistant")
+          .map((m) => ({ role: m.role, content: m.content }));
+      })(),
+    ];
 
     try {
+      setStreaming(true);
+
       const res = await fetch("/api/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        signal: controller.signal,
+        signal: ac.signal,
         body: JSON.stringify({
-          message: userText,
-          history: buildHistoryForAPI(),
-          model,
+          model: activeModel(),
+          messages: packedMessages,
           temperature,
           max_tokens: maxTokens,
-          system,
-          stream: true,
+          stream: useStreaming,
         }),
       });
 
       if (!res.ok) {
-        const err = await res.json().catch(() => ({}));
-        const msg = err?.error || "Request failed";
-        setMessages((m) => m.map((x) => (x.id === aiId ? { ...x, text: `⚠️ ${msg}` } : x)));
-        return;
+        const text = await res.text();
+        throw new Error(text || `HTTP ${res.status}`);
       }
 
-      const reader = res.body?.getReader();
-      if (!reader) {
-        setMessages((m) => m.map((x) => (x.id === aiId ? { ...x, text: "⚠️ No stream body" } : x)));
+      if (!useStreaming) {
+        const json = await res.json();
+        const out = json?.choices?.[0]?.message?.content ?? "";
+        setMessages((prev) => {
+          const copy = [...prev];
+          const last = copy[copy.length - 1];
+          if (last?.role === "assistant") last.content = String(out);
+          return copy;
+        });
+        setStreaming(false);
+        abortRef.current = null;
         return;
       }
 
-      const decoder = new TextDecoder();
-      let buf = "";
-      let acc = "";
-
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-
-        buf += decoder.decode(value, { stream: true });
-        const parts = buf.split("\n\n");
-        buf = parts.pop() || "";
-
-        for (const part of parts) {
-          for (const line of part.split("\n")) {
-            const t = line.trim();
-            if (!t.startsWith("data:")) continue;
-
-            const payload = t.slice(5).trim();
-            if (payload === "[DONE]") break;
-
-            try {
-              const obj = JSON.parse(payload);
-              const delta = obj?.choices?.[0]?.delta?.content ?? "";
-              if (delta) {
-                acc += delta;
-                setMessages((m) => m.map((x) => (x.id === aiId ? { ...x, text: acc } : x)));
-              }
-            } catch {}
-          }
-        }
-      }
+      await readSSE(
+        res,
+        (delta) => {
+          setMessages((prev) => {
+            const copy = [...prev];
+            const last = copy[copy.length - 1];
+            if (last?.role === "assistant") last.content += delta;
+            return copy;
+          });
+        },
+        ac.signal
+      );
 
-      if (!acc) {
-        setMessages((m) => m.map((x) => (x.id === aiId ? { ...x, text: "⚠️ Empty response" } : x)));
-      }
+      setStreaming(false);
+      abortRef.current = null;
     } catch (e: any) {
-      const msg = controller.signal.aborted ? "Stopped." : "Network error.";
-      setMessages((m) => m.map((x) => (x.id === aiId ? { ...x, text: `⚠️ ${msg}` } : x)));
-    } finally {
-      streamingRef.current = false;
+      const msg = String(e?.message ?? e ?? "Unknown error");
+      if (msg === "aborted") {
+        setStreaming(false);
+        abortRef.current = null;
+        return;
+      }
+      setStreaming(false);
       abortRef.current = null;
-      setLoading(false);
+      setError(msg);
+
+      // put error in assistant bubble
+      setMessages((prev) => {
+        const copy = [...prev];
+        const last = copy[copy.length - 1];
+        if (last?.role === "assistant" && !last.content.trim()) {
+          last.content = `⚠️ ${msg}`;
+        } else {
+          copy.push({ id: uid(), role: "assistant", ts: Date.now(), content: `⚠️ ${msg}` });
+        }
+        return copy;
+      });
     }
   }
 
-  async function sendText(text: string) {
-    if (loading) return;
-    const t = text.trim();
-    if (!t) return;
-
-    if (t === "/clear") { clearChat(); return; }
-
-    setMessages((m) => [...m, { id: uid(), role: "user", text: t, ts: Date.now() }]);
+  function onSend() {
+    if (streaming) return;
+    const text = input.trim();
+    if (!text) return;
     setInput("");
-    await streamChat(t, "normal");
+    runChat(text);
   }
 
-  async function sendMessage() {
-    await sendText(input);
+  function onRegen() {
+    if (streaming) return;
+    // find last user message
+    const lastUser = [...messages].reverse().find((m) => m.role === "user");
+    if (!lastUser) return;
+    runChat(lastUser.content, true);
   }
 
-  async function regenerate() {
-    const last = lastUserMessage();
-    if (!last || loading) return;
-    await streamChat(last, "regen");
-  }
-
-  function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      if (canSend) sendMessage();
-    }
-    if (e.key === "Escape") stopGeneration();
-  }
+  const promptChips = [
+    "Explain black holes like I'm 10 explaining to a friend.",
+    "Make a 7-day study plan for Java + DSA.",
+    "Write a scary 6-line story with a twist ending.",
+    "Give 5 business ideas for students in India.",
+  ];
 
   return (
-    <>
-      <div className="bgfx" />
-
-      {showSplash && (
-        <NewYearSplash seconds={5} onDone={() => setShowSplash(false)} />
-      )}
-
-      <div className="shell">
-        <div className="card">
-          <div className="header">
-            <div className="brand">
-              <div className="logo">🤖</div>
-              <div className="brandText">
-                <b>AI Chat</b>
-                <span>{loading ? "Generating…" : "Ready"}</span>
+    <div className="mcRoot">
+      <PixelFireworks show={showIntro} onSkip={() => setShowIntro(false)} />
+
+      <div className="mcShell">
+        <div className="mcFrame">
+          <div className="mcTop">
+            <div className="mcBrand">
+              <div className="mcIcon" aria-hidden="true">
+                🤖
+              </div>
+              <div className="mcTitleWrap">
+                <div className="mcTitle">AI CHAT</div>
+                <div className="mcSub">
+                  READY • {useStreaming ? "STREAM" : "NO-STREAM"} •{" "}
+                  {(customModel.trim() || model).split("/").pop()}
+                </div>
               </div>
             </div>
 
-            <div className="headerRight">
-              <div className="pill">
-                <span className="dot" />
-                <span>{loading ? "Thinking…" : "Online"}</span>
-              </div>
-              <button className="btnGhost" onClick={() => setDrawerOpen(true)} title="Settings">
+            <div className="mcTopRight">
+              <button
+                className="btn pixelBtn"
+                onClick={() => setSettingsOpen(true)}
+                aria-label="Open settings"
+                title="Settings"
+              >
                 ⚙
               </button>
             </div>
           </div>
 
-          <div className="chat" ref={chatRef}>
-            {showOverlay && (
-              <div className="overlayWrap">
-                <div className="overlayBox">
-                  <div className="overlayTop">
-                    <div className="logo">🧱</div>
-                    <div className="overlayTitle">
-                      <b>AI Chat</b>
-                      <span>Sharp • Streaming • Qwen</span>
+          <div className="mcBody">
+            <div className="mcList" ref={listRef}>
+              {messages.length === 0 && showPrompts && (
+                <div className="mcOverlay">
+                  <div className="mcOverlayBox">
+                    <div className="mcOverlayHead">
+                      <div className="mcOverlayBadge">TIP</div>
+                      <div className="mcOverlayText">
+                        Tap a prompt to start (it disappears after you chat).
+                      </div>
                     </div>
-                  </div>
 
-                  <div style={{ color: "rgba(255,255,255,.78)", fontSize: 9, marginTop: 10 }}>
-                    Tap a prompt to start (they disappear after you chat).
+                    <div className="mcChips">
+                      {promptChips.map((p) => (
+                        <button
+                          key={p}
+                          className="mcChip"
+                          onClick={() => {
+                            setInput(p);
+                            inputRef.current?.focus();
+                          }}
+                        >
+                          {p}
+                        </button>
+                      ))}
+                    </div>
                   </div>
+                </div>
+              )}
 
-                  <div className="chips">
-                    {SUGGESTIONS.map((s) => (
-                      <button key={s} className="chip" onClick={() => sendText(s)}>
-                        {s}
+              {messages.map((m) => (
+                <div
+                  key={m.id}
+                  className={`mcMsg ${m.role === "user" ? "isUser" : m.role === "assistant" ? "isAI" : "isSys"
+                    }`}
+                >
+                  <div className="mcMsgMeta">
+                    <span className="mcWho">{m.role === "user" ? "YOU" : m.role === "assistant" ? "AI" : "SYS"}</span>
+                    <span className="mcDot">•</span>
+                    <span className="mcTime">
+                      {new Date(m.ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                    </span>
+
+                    {m.role === "assistant" && m.content.trim() && (
+                      <button
+                        className="mcMiniBtn"
+                        title="Copy"
+                        onClick={() => navigator.clipboard.writeText(m.content)}
+                      >
+                        COPY
                       </button>
-                    ))}
+                    )}
                   </div>
-                </div>
-              </div>
-            )}
-
-            {messages
-              .filter((m) => m.text.trim().length > 0)
-              .map((m) => (
-                <div key={m.id} className={`row ${m.role === "user" ? "user" : "ai"}`}>
-                  <div className={`bubble ${m.role === "user" ? "user" : ""}`}>
-                    {m.text}
-                    <div className="meta">
-                      <span>
-                        {m.role === "user" ? "You" : "AI"}
-                        {showTimestamps ? ` • ${formatTime(m.ts)}` : ""}
-                      </span>
-                      <span className="actions">
-                        <button className="iconBtn" onClick={() => copyText(m.text)}>COPY</button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))}
 
-            {loading && (
-              <div className="row ai">
-                <div className="bubble">
-                  <span className="dots">
-                    <i /> <i /> <i />
-                  </span>
-                  <div className="meta">
-                    <span>AI {showTimestamps ? ` • ${formatTime(Date.now())}` : ""}</span>
-                    <span />
+                  <div className="mcBubble">
+                    <pre className="mcText">{m.content}</pre>
                   </div>
                 </div>
-              </div>
-            )}
-
-            {showScrollDown && (
-              <div className="scrollDown">
-                <button className="btnGhost" onClick={scrollToBottom}>↓</button>
-              </div>
-            )}
-          </div>
+              ))}
+            </div>
 
-          <div className="composer">
-            <div className="composerInner">
+            <div className="mcComposer">
               <textarea
-                className="textarea"
+                ref={inputRef}
+                className="mcInput"
                 value={input}
+                placeholder="Type… (Enter=send, Shift+Enter=new line, Esc=stop) • /help"
+                maxLength={2000}
                 onChange={(e) => setInput(e.target.value)}
-                onKeyDown={onKeyDown}
-                placeholder="Type… (Enter=send, Shift+Enter=new line, Esc=stop) • /clear"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    onSend();
+                  }
+                }}
               />
-
-              {!loading ? (
-                <button className="btn btnGold" onClick={sendMessage} disabled={!canSend}>
-                  SEND
+              <div className="mcActions">
+                <button className="btn pixelBtn" onClick={onSend} disabled={streaming}>
+                  {streaming ? "..." : "SEND"}
                 </button>
-              ) : (
-                <button className="btn btnDanger" onClick={stopGeneration}>
-                  STOP
+                <button className="btn pixelBtn" onClick={onRegen} disabled={streaming || messages.length === 0}>
+                  REGEN
                 </button>
-              )}
-
-              <button className="btn" onClick={regenerate} disabled={loading}>
-                REGEN
-              </button>
-            </div>
-
-            <div className="hint">
-              <span>Tip: Esc stops streaming • /clear clears chat</span>
-              <span>{input.trim().length}/2000</span>
+                {streaming ? (
+                  <button className="btn pixelBtn danger" onClick={stopStreaming}>
+                    STOP
+                  </button>
+                ) : (
+                  <button className="btn pixelBtn ghost" onClick={doClear}>
+                    CLEAR
+                  </button>
+                )}
+              </div>
+              <div className="mcFooter">
+                <div className="mcHint">
+                  Tip: Esc stops streaming • /export downloads chat
+                </div>
+                <div className="mcCount">{input.length}/2000</div>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      {toast && <div className="toast">{toast}</div>}
-
-      {drawerOpen && (
-        <div className="drawerOverlay" onClick={() => setDrawerOpen(false)}>
-          <div className="drawer" onClick={(e) => e.stopPropagation()}>
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
-              <h3>SETTINGS</h3>
-              <button className="btnGhost" onClick={() => setDrawerOpen(false)}>CLOSE</button>
+      {/* SETTINGS MODAL */}
+      {settingsOpen && (
+        <div className="mcModal" role="dialog" aria-modal="true">
+          <div className="mcModalBox">
+            <div className="mcModalTop">
+              <div className="mcModalTitle">SETTINGS</div>
+              <button className="btn pixelBtn" onClick={() => setSettingsOpen(false)}>
+                ✕
+              </button>
             </div>
 
-            <div className="field">
-              <div className="labelRow">
-                <span>MODEL</span>
-                <span>AI ENGINE</span>
+            <div className="mcGrid">
+              <div className="mcField">
+                <div className="mcLabel">Model</div>
+                <select
+                  className="mcSelect"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                >
+                  {DEFAULT_MODELS.map((m) => (
+                    <option key={m.id} value={m.id}>
+                      {m.label}
+                    </option>
+                  ))}
+                </select>
+                <div className="mcSmall">
+                  Optional: paste a custom model id below (overrides dropdown).
+                </div>
+                <input
+                  className="mcTextIn"
+                  value={customModel}
+                  onChange={(e) => setCustomModel(e.target.value)}
+                  placeholder="Custom model id (optional)"
+                />
               </div>
-              <select className="select" value={model} onChange={(e) => setModel(e.target.value)}>
-                <option value="Qwen/Qwen2.5-7B-Instruct:together">QWEN 2.5 7B</option>
-                <option value="Qwen/Qwen2.5-14B-Instruct:together">QWEN 2.5 14B</option>
-              </select>
-            </div>
 
-            <div className="field">
-              <div className="labelRow">
-                <span>SYSTEM</span>
-                <span>{system.length}/400</span>
+              <div className="mcField">
+                <div className="mcLabel">Temperature (0 → 2)</div>
+                <input
+                  className="mcRange"
+                  type="range"
+                  min={0}
+                  max={2}
+                  step={0.05}
+                  value={temperature}
+                  onChange={(e) => setTemperature(Number(e.target.value))}
+                />
+                <div className="mcRow">
+                  <div className="mcPill">{temperature.toFixed(2)}</div>
+                  <label className="mcCheck">
+                    <input
+                      type="checkbox"
+                      checked={useStreaming}
+                      onChange={(e) => setUseStreaming(e.target.checked)}
+                    />
+                    <span>Streaming</span>
+                  </label>
+                </div>
               </div>
-              <textarea className="input" value={system} onChange={(e) => setSystem(e.target.value.slice(0, 400))} />
-            </div>
 
-            <div className="field">
-              <div className="labelRow">
-                <span>TEMP</span>
-                <span>{temperature.toFixed(2)}</span>
+              <div className="mcField">
+                <div className="mcLabel">Max Tokens</div>
+                <input
+                  className="mcTextIn"
+                  type="number"
+                  min={16}
+                  max={4096}
+                  value={maxTokens}
+                  onChange={(e) => setMaxTokens(Number(e.target.value))}
+                />
+                <div className="mcSmall">
+                  (2 is a common max temperature; tokens depends on model.)
+                </div>
               </div>
-              <input
-                className="range"
-                type="range"
-                min={0}
-                max={2}
-                step={0.05}
-                value={temperature}
-                onChange={(e) => setTemperature(Number(e.target.value))}
-              />
-            </div>
 
-            <div className="field">
-              <div className="labelRow">
-                <span>MAX TOKENS</span>
-                <span>{maxTokens}</span>
+              <div className="mcField mcWide">
+                <div className="mcLabel">System Prompt</div>
+                <textarea
+                  className="mcTextArea"
+                  value={systemPrompt}
+                  onChange={(e) => setSystemPrompt(e.target.value)}
+                />
+              </div>
+
+              <div className="mcField mcWide">
+                <div className="mcRow">
+                  <button className="btn pixelBtn" onClick={exportChat}>
+                    EXPORT CHAT
+                  </button>
+                  <button
+                    className="btn pixelBtn ghost"
+                    onClick={() => {
+                      setModel(DEFAULT_MODELS[0].id);
+                      setCustomModel("");
+                      setTemperature(0.7);
+                      setMaxTokens(512);
+                      setSystemPrompt(
+                        "You are a helpful assistant. Keep answers clear and practical."
+                      );
+                      setUseStreaming(true);
+                    }}
+                  >
+                    RESET DEFAULTS
+                  </button>
+                </div>
+                {error && <div className="mcError">Last error: {error}</div>}
               </div>
-              <input
-                className="num"
-                type="number"
-                min={64}
-                max={1024}
-                step={32}
-                value={maxTokens}
-                onChange={(e) => setMaxTokens(Number(e.target.value))}
-              />
             </div>
 
-            <div className="field" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
-              <button className="btn" onClick={exportChat}>EXPORT</button>
-              <button className="btn btnDanger" onClick={clearChat}>CLEAR</button>
+            <div className="mcModalHint">
+              Note: don’t paste any “citation text” into your code (it can break TypeScript).
             </div>
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }