Persist chat history locally

app.js

@@ -3,7 +3,10 @@ const promptInput = document.querySelector("#prompt");
 const messagesEl = document.querySelector("#messages");
 const sendButton = document.querySelector("#sendButton");
 const newChatButton = document.querySelector("#newChat");
+const historyEl = document.querySelector("#history");
+const chatTitleEl = document.querySelector("#chatTitle");
 
+let activeChatId = null;
 let messages = [];
 
 function addMessage(role, content) {
@@ -24,10 +27,53 @@ function addMessage(role, content) {
   return bubble;
 }
 
-function resetChat() {
-  messages = [];
+function renderMessages() {
   messagesEl.innerHTML = "";
-  addMessage("assistant", "새 대화를 시작합니다.");
+
+  if (!messages.length) {
+    addMessage("assistant", "안녕하세요. 이 노트북에서 실행되는 로컬 LLM입니다.");
+    return;
+  }
+
+  messages.forEach((message) => addMessage(message.role, message.content));
+}
+
+function setTitle(title) {
+  chatTitleEl.textContent = title || "Local LLM";
+}
+
+async function loadHistory() {
+  const response = await fetch("/api/chats");
+  const data = await response.json();
+  historyEl.innerHTML = "";
+
+  data.chats.forEach((chat) => {
+    const item = document.createElement("button");
+    item.className = `history-item ${chat.id === activeChatId ? "active" : ""}`;
+    item.type = "button";
+    item.textContent = chat.title;
+    item.addEventListener("click", () => loadChat(chat.id));
+    historyEl.append(item);
+  });
+}
+
+async function loadChat(chatId) {
+  const response = await fetch(`/api/chats/${chatId}`);
+  const data = await response.json();
+  activeChatId = data.chat.id;
+  messages = data.chat.messages || [];
+  setTitle(data.chat.title);
+  renderMessages();
+  await loadHistory();
+  promptInput.focus();
+}
+
+function resetChat() {
+  activeChatId = null;
+  messages = [];
+  setTitle("Local LLM");
+  renderMessages();
+  loadHistory();
   promptInput.focus();
 }
 
@@ -65,7 +111,7 @@ form.addEventListener("submit", async (event) => {
     const response = await fetch("/api/chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ messages }),
+      body: JSON.stringify({ chatId: activeChatId, messages }),
     });
 
     const data = await response.json();
@@ -74,7 +120,10 @@ form.addEventListener("submit", async (event) => {
     }
 
     pending.textContent = data.reply;
-    messages.push({ role: "assistant", content: data.reply });
+    activeChatId = data.chatId;
+    messages = data.chat.messages || [...messages, { role: "assistant", content: data.reply }];
+    setTitle(data.chat.title);
+    await loadHistory();
   } catch (error) {
     pending.textContent = `오류: ${error.message}`;
   } finally {
@@ -82,3 +131,6 @@ form.addEventListener("submit", async (event) => {
     promptInput.focus();
   }
 });
+
+renderMessages();
+loadHistory();