Atualizar web/chat.js

web/chat.js

@@ -1,39 +1,111 @@
 // All comments are in English.
 
 let conversationId = null;
+let conversations = [];
 
-function login() {
+async function login() {
   window.location = "/login";
 }
 
+function toggleTheme() {
+  document.body.classList.toggle("dark");
+}
+
+async function loadConversations() {
+  const r = await fetch("/api/conversations");
+  conversations = await r.json();
+  renderTabs();
+}
+
+function renderTabs() {
+  const tabs = document.getElementById("tabs");
+  tabs.innerHTML = "";
+  conversations.forEach(c => {
+    const btn = document.createElement("button");
+    btn.textContent = c.title;
+    btn.onclick = () => selectConversation(c.id);
+    tabs.appendChild(btn);
+  });
+}
+
 async function newConversation() {
-    const r = await fetch("/api/new_conversation");
+  const title = prompt("Conversation title:");
+  const r = await fetch("/api/new_conversation", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({title})
+  });
   const data = await r.json();
   conversationId = data.conversation_id;
-    document.getElementById("chat").innerHTML = "";
+  await loadConversations();
+  await loadHistory();
+}
+
+async function selectConversation(id) {
+  conversationId = id;
+  await loadHistory();
+}
+
+async function loadHistory() {
+  const r = await fetch(`/api/history/${conversationId}`);
+  const msgs = await r.json();
+  const chat = document.getElementById("chat");
+  chat.innerHTML = "";
+  msgs.forEach(m => {
+    const div = document.createElement("div");
+    div.className = "msg " + m.role;
+    div.innerHTML = `<div class="avatar">${m.role === "user" ? "🧑" : "🤖"}</div>
+                     <div class="bubble">${m.content}</div>`;
+    chat.appendChild(div);
+  });
 }
 
 async function sendMessage() {
-    const prompt = document.getElementById("prompt").value;
-    const model = "llama3.2";
+  const promptText = document.getElementById("prompt").value;
+  const file = document.getElementById("attachment").files[0];
 
-    const chatBox = document.getElementById("chat");
-    chatBox.innerHTML += `<div class="user">${prompt}</div>`;
+  if (!conversationId) {
+    await newConversation();
+  }
 
-    const url = `/api/stream?conversation_id=${conversationId}&model=${model}&prompt=${encodeURIComponent(prompt)}`;
+  if (file) {
+    const form = new FormData();
+    form.append("file", file);
+    await fetch(`/api/attachment/${conversationId}`, {
+      method: "POST",
+      body: form
+    });
+  }
+
+  const chat = document.getElementById("chat");
+  const userDiv = document.createElement("div");
+  userDiv.className = "msg user";
+  userDiv.innerHTML = `<div class="avatar">🧑</div>
+                       <div class="bubble">${marked.parse(promptText)}</div>`;
+  chat.appendChild(userDiv);
+
+  const assistantDiv = document.createElement("div");
+  assistantDiv.className = "msg assistant streaming";
+  assistantDiv.innerHTML = `<div class="avatar">🤖</div>
+                            <div class="bubble"><span id="stream-text"></span><span class="cursor">▌</span></div>`;
+  chat.appendChild(assistantDiv);
+
+  const url = `/api/stream?conversation_id=${conversationId}&model=llama3.2&prompt=${encodeURIComponent(promptText)}`;
   const evtSource = new EventSource(url);
 
   let buffer = "";
+  const streamSpan = document.getElementById("stream-text");
 
-    evtSource.onmessage = function(event) {
+  evtSource.onmessage = (event) => {
     const data = JSON.parse(event.data);
     buffer += data.token;
-
-        document.getElementById("chat").innerHTML +=
-            `<div class="assistant">${buffer}</div>`;
+    streamSpan.innerHTML = marked.parse(buffer);
   };
 
-    evtSource.onerror = function() {
+  evtSource.onerror = () => {
     evtSource.close();
+    assistantDiv.classList.remove("streaming");
   };
 }
+
+window.onload = loadConversations;