Upload 2 files

static/script.js

@@ -0,0 +1,146 @@
+/* static/script.js */
+function chatApp() {
+  return {
+    // ------------------------------
+    // State
+    // ------------------------------
+    messages: [],               // {id, role, content}
+    userInput: '',
+    loading: false,
+    dark: false,                // dark‑mode flag
+
+    // ------------------------------
+    // Init – runs once when component mounts
+    // ------------------------------
+    init() {
+      // Detect system dark‑mode preference
+      this.dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.applyDarkMode();
+
+      // Listen for changes (e.g., user switches OS theme)
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        this.dark = e.matches;
+        this.applyDarkMode();
+      });
+    },
+
+    // ------------------------------
+    // Dark‑mode helper
+    // ------------------------------
+    toggleDark() {
+      this.dark = !this.dark;
+      this.applyDarkMode();
+    },
+    applyDarkMode() {
+      if (this.dark) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    },
+
+    // ------------------------------
+    // Auto‑grow textarea
+    // ------------------------------
+    autoResize(event) {
+      const el = event.target;
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
+    },
+
+    // ------------------------------
+    // Send a message to the back‑end
+    // ------------------------------
+    async sendMessage() {
+      const content = this.userInput.trim();
+      if (!content) return;
+
+      // 1️⃣  Add user bubble
+      const userMsg = {
+        id: Date.now(),
+        role: 'user',
+        content: this.escapeHtml(content).replace(/\n/g, '<br>')
+      };
+      this.messages.push(userMsg);
+      this.userInput = '';
+      this.scrollToBottom();
+
+      // 2️⃣  Show loading indicator
+      this.loading = true;
+
+      // 3️⃣  Call the OpenAI‑compatible endpoint
+      try {
+        const response = await fetch('/v1/chat/completions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            model: 'qwen2.5-1.5b-instruct',
+            messages: [
+              // Keep the whole conversation – the model can handle a few turns
+              ...this.messages.map(m => ({
+                role: m.role,
+                content: this.stripHtml(m.content)   // plain text for the model
+              }))
+            ],
+            temperature: 0.7,
+            max_tokens: 512,
+            top_p: 0.9,
+            stream: false   // set true later if you implement SSE streaming
+          })
+        });
+
+        if (!response.ok) {
+          const err = await response.json();
+          throw new Error(err.detail || 'API error');
+        }
+
+        const data = await response.json();
+        const assistant = data.choices[0].message.content;
+
+        // 4️⃣  Add assistant bubble
+        const assistantMsg = {
+          id: Date.now() + 1,
+          role: 'assistant',
+          content: this.escapeHtml(assistant).replace(/\n/g, '<br>')
+        };
+        this.messages.push(assistantMsg);
+        this.scrollToBottom();
+      } catch (e) {
+        console.error(e);
+        const errMsg = {
+          id: Date.now() + 1,
+          role: 'assistant',
+          content: `<span class="text-red-500">⚠️ ${this.escapeHtml(e.message)}</span>`
+        };
+        this.messages.push(errMsg);
+        this.scrollToBottom();
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // ------------------------------
+    // Helpers
+    // ------------------------------
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const chat = document.getElementById('chat-window');
+        chat.scrollTop = chat.scrollHeight;
+      });
+    },
+
+    // Escape HTML to avoid XSS when we later render raw strings
+    escapeHtml(str) {
+      const div = document.createElement('div');
+      div.appendChild(document.createTextNode(str));
+      return div.innerHTML;
+    },
+
+    // Strip HTML tags – used when sending the prompt to the model
+    stripHtml(html) {
+      const div = document.createElement('div');
+      div.innerHTML = html;
+      return div.textContent || div.innerText || '';
+    }
+  };
+}

static/style.css

@@ -0,0 +1,25 @@
+/* static/style.css */
+
+/* Smooth scrolling for the chat window */
+#chat-window {
+  scroll-behavior: smooth;
+}
+
+/* Hide the default scrollbar on macOS while keeping it usable */
+#chat-window::-webkit-scrollbar {
+  width: 6px;
+}
+#chat-window::-webkit-scrollbar-thumb {
+  background-color: rgba(100, 100, 100, 0.4);
+  border-radius: 3px;
+}
+
+/* Auto‑resize textarea – hide the native resize handle */
+textarea {
+  overflow-y: hidden;
+}
+
+/* Dark‑mode transition (nice fade) */
+html {
+  transition: background-color 0.2s, color 0.2s;
+}