Chat History and multi model

chatsbt/src/lib/chatStore.svelte.js

@@ -1,86 +1,130 @@
-// Pure vanilla JS – no Svelte imports
-const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
+import { createChat, sendUserMessage, openStream } from "./chatApi.svelte.js";
+
+const STORAGE_KEY = "chatHistory";
+
+function loadHistory() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+
+function saveHistory(list) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+}
 
 export const chatStore = (() => {
-  let chatId = $state(null);          // null until first message
+  let chatId = $state(null);
   let messages = $state([]);
-  let input = $state('');
   let loading = $state(false);
+  let input = $state("");
+  let model = $state("qwen/qwen3-235b-a22b-2507");
 
-  /* ── helpers ── */
-  async function createChat() {
-    const res = await fetch(`${BASE}/chats`, { method: 'POST' });
-    const { id } = await res.json();
+  // public helpers
+  const history = $derived(loadHistory());
+
+  function pushHistory(id, title, msgs) {
+    console.log(`push history: ${id} - ${title}`);
+    const h = history.filter((c) => c.id !== id);
+    h.unshift({ id, title, messages: msgs });
+    saveHistory(h.slice(0, 50)); // keep last 50
+  }
+
+  async function selectChat(id) {
+    if (id === chatId) return;
+    chatId = id;
+    const stored = loadHistory().find((c) => c.id === id);
+    messages = stored?.messages || [];
+    loading = true;
+    loading = false;
+    window.history.replaceState({}, "", `/${id}`);
+  }
+
+  async function createAndSelect() {
+    const { id } = await createChat(model);
+    console.log(id);
+    selectChat(id);
     return id;
   }
 
-  async function sendUserMessage(text) {
-    await fetch(`${BASE}/chats/${chatId}/messages`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ message: text })
+  async function send() {
+    if (!input.trim()) return;
+    if (!chatId) await createAndSelect();
+
+    const userMsg = { id: crypto.randomUUID(), role: "user", text: input };
+    messages = [...messages, userMsg];
+
+    pushHistory(chatId, userMsg.text.slice(0, 30), messages);
+
+    loading = true;
+    const { message_id } = await sendUserMessage(chatId, input, model);
+    input = "";
+
+    let assistantMsg = { id: message_id, role: "assistant", text: "" };
+    messages = [...messages, assistantMsg];
+
+    const es = openStream(chatId, message_id);
+    es.onmessage = (e) => {
+      assistantMsg = { ...assistantMsg, text: assistantMsg.text + e.data };
+      messages = [...messages.slice(0, -1), assistantMsg];
+    };
+    es.onerror = () => {
+      es.close();
+      loading = false;
+    };
+    es.addEventListener("done", (e) => {
+      console.log(e);
+      es.close();
+      loading = false;
+      pushHistory(chatId, userMsg.text.slice(0, 30), messages);
     });
   }
 
-  function streamAssistantReply() {
-    const source = new EventSource(`${BASE}/chats/${chatId}/stream`);
-    let botMsg = { id: Date.now(), text: '', me: false, sender: 'bot' };
-    messages = [...messages, botMsg];
-
-    source.onmessage = (ev) => {
-      console.log(ev.data);
-      if (ev.data === '[DONE]') {
-        source.close();
-        loading = false;
-        return;
-      }
-      
-      messages = messages.map((m, i) =>
-        i === messages.length - 1 ? { ...m, text: m.text + ev.data } : m
-      );
-    };
-
-    source.onerror = () => {
-      source.close();
-      loading = false;
-    };
-  }
-
-  async function send() {
-    const text = input.trim();
-    if (!text || loading) return;
-
-    // add user bubble immediately
-    messages = [...messages, { id: Date.now(), text, me: true, sender: 'user' }];
-    input = '';
-    loading = true;
-
-    try {
-      if (!chatId) chatId = await createChat();
-      await sendUserMessage(text);
-      streamAssistantReply();
-    } catch {
-      messages = [
-        ...messages,
-        { id: Date.now(), text: 'Sorry, something went wrong.', me: false, sender: 'bot' }
-      ];
-      loading = false;
-    }
-  }
-
   function handleKey(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       send();
     }
   }
 
+  // initial route handling
+  const path = window.location.pathname.slice(1);
+  const storedHistory = loadHistory();
+  if (path && !storedHistory.find((c) => c.id === path)) {
+    createAndSelect();
+  } else if (path) {
+    selectChat(path);
+  }
+
   return {
-    get messages() { return messages; },
-    get input() { return input; },
-    set input(v) { input = v; },
-    get loading() { return loading; },
+    get chatId() {
+      return chatId;
+    },
+    get messages() {
+      return messages;
+    },
+    get loading() {
+      return loading;
+    },
+    get input() {
+      return input;
+    },
+    set input(v) {
+      input = v;
+    },
+    get model() {
+      return model;
+    },
+    set model(v) {
+      model = v;
+    },
+    get history() {
+      return loadHistory();
+    },
+    selectChat,
     send,
-    handleKey
+    handleKey,
+    createAndSelect,
   };
-})();
+})();