commit 0019

app.py

@@ -162,9 +162,9 @@ def chat_stream():
         else:
             reply = generate_full_reply(message, history)
            # print(reply)
-        for char in reply:
-            yield char
-            time.sleep(0.01)  # Smooth typing speed
+        for token in reply.splitlines(keepends=True):
+            yield token 
+            time.sleep(0.05)
 
     return Response(generate(), mimetype='text/plain')
 

templates/index.html

@@ -2,239 +2,75 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Chat Mate</title>
+  <title>Chat Mate with NLUX</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link rel="stylesheet" href="/static/style.css" />
-  <!-- MDC Web & Icons -->
-  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
-  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css">
-<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
-<!-- Prism Core -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
-<!-- Language Components -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-shell-session.min.js"></script> <!-- for 'shell' -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
+  <!-- ✅ NLUX CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nlux@latest/dist/style.css" />
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kotlin.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-swift.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-scala.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-dart.min.js"></script>
-
-<script src="https://unpkg.com/vue@3"></script>
+  <style>
+    body {
+      font-family: 'Segoe UI', sans-serif;
+      margin: 0;
+      background: #f9f9f9;
+    }
+    #nlux-app {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
 </head>
-
 <body>
-  <div id="app" class="chat-container">
-    <h2>💬 Chat Mate</h2>
-
-    <div class="chat-box" ref="chatbox">
-      <div v-for="(msg, i) in history" :key="i" class="message" :class="msg.role">
-        <template v-if="msg.role === 'assistant' && msg.content.includes('```')">
-          <div class="message-content" v-html="renderCode(msg.content)"></div>
-           {% raw %}
-          <div class="timestamp" :class="msg.role">{{ msg.time }}</div>
-          {% endraw %}
-        </template>
-        <template v-else>
-          <div class="text-content" v-html="formatText(msg.content)"></div>
-          {% raw %}
-          <div class="timestamp" :class="msg.role">{{ msg.time }}</div>
-          {% endraw %}
-        </template>
-      </div>
 
-      <div v-if="loading" class="typing-indicator">
-        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
-      </div>
-    </div>
+  <!-- ✅ NLUX Container -->
+  <div id="nlux-app"></div>
 
-    <div class="input-area">
-      <textarea v-model="message" placeholder="Ask something..." rows="2"></textarea>
-      <button @click="sendMessage" :disabled="!message.trim() || loading">Send</button>
-    </div>
-  </div>
+  <!-- ✅ NLUX JavaScript -->
+  <script src="https://cdn.jsdelivr.net/npm/nlux@latest/dist/nlux.umd.min.js"></script>
 
   <script>
-    const { createApp, ref, nextTick } = Vue;
-
-    createApp({
-      setup() {
-        const message = ref('');
-        const history = ref([]);
-        const loading = ref(false);
-        const chatbox = ref(null);
-
-        const scrollToBottom = () => {
-          nextTick(() => {
-            if (chatbox.value) chatbox.value.scrollTop = chatbox.value.scrollHeight;
-          });
+    const app = nlux.createChat({
+      target: '#nlux-app',
+      title: '💬 Chat Mate',
+      placeholder: 'Ask me something...',
+      intro: 'Hi! I\'m Chat Mate. Ask me anything.',
+      theme: 'light',
+      onSend: async (userText, ctx) => {
+        ctx.addMessage({ type: 'user', text: userText });
+
+        const controller = new AbortController();
+        ctx.addMessage({ type: 'loading', id: 'stream' });
+
+        const response = await fetch('/chat-stream', {
+          method: 'POST',
+          signal: controller.signal,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message: userText,
+            history: ctx.getHistory().map(m => ({ role: m.type === 'user' ? 'user' : 'assistant', content: m.text }))
+          })
+        });
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let text = '';
+        const update = (chunk) => {
+          text += chunk;
+          ctx.updateMessage('stream', { type: 'bot', text });
         };
 
-      const language_keywords = {
-  python: ['def ', 'print(', 'import ', 'class '],
-  javascript: ['function ', 'console.log(', 'let ', 'const ', 'document.getElementById'],
-  typescript: ['interface ', 'type ', 'let ', 'const ', ': string', ': number'],
-  java: ['import java.', 'ArrayList<', 'System.out', 'void main(', 'public class', 'new '],
-  c: ['#include <stdio.h>', 'printf(', 'scanf(', 'int main('],
-  cpp: ['#include', 'std::', 'cout <<', 'cin >>'],
-  bash: ['#!/bin/bash', 'echo ', 'cd ', 'ls', 'pwd'],
-  shell: ['#!/bin/sh', 'echo ', 'export ', 'fi'],
-  sql: ['SELECT ', 'INSERT ', 'UPDATE ', 'FROM ', 'WHERE ', 'JOIN ', 'DELETE '],
-  html: ['<!DOCTYPE html>', '<html>', '<div>', '<script>'],
-  css: ['color:', 'font-size:', 'margin:', 'padding:'],
-  go: ['package main', 'fmt.Println', 'func main()'],
-  php: ['<?php', 'echo ', '$_', '->'],
-  ruby: ['def ', 'puts ', 'end', 'class '],
-  kotlin: ['fun main(', 'val ', 'var ', 'println('],
-  swift: ['import SwiftUI', 'struct ', 'var body:', 'Text('],
-  rust: ['fn main()', 'println!', 'let mut'],
-  scala: ['object ', 'def ', 'val ', 'println('],
-  dart: ['void main()', 'print(', 'var ', 'class '],
-};
-
-const detectLanguageByKeywords = (code) => {
-  let bestMatch = 'plaintext';
-  let maxScore = 0;
-
-  for (const [lang, keywords] of Object.entries(language_keywords)) {
-    let score = 0;
-
-    for (const keyword of keywords) {
-      const regex = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
-      const matches = (code.match(regex) || []).length;
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          update(decoder.decode(value));
+        }
 
-      // Boost score by keyword length and frequency
-      score += matches * Math.max(1, keyword.length / 4);
-    }
-
-    if (score > maxScore) {
-      maxScore = score;
-      bestMatch = lang;
-    }
-  }
-
-  return bestMatch;
-};
-
-
-const renderCode = (text) => {
-  const codeBlocks = text.split(/```/);
-  let output = '';
-
-  for (let i = 0; i < codeBlocks.length; i++) {
-    if (i % 2 === 1) {
-      const lines = codeBlocks[i].split('\n');
-      let langGuess = /^[a-zA-Z]+$/.test(lines[0]) ? lines[0].trim().toLowerCase() : '';
-      const codeLines = langGuess ? lines.slice(1) : lines;
-      const rawCode = codeLines.join('\n');
-
-      if (!langGuess) {
-        langGuess = detectLanguageByKeywords(rawCode);
+        ctx.removeMessage('stream');
+        ctx.addMessage({ type: 'bot', text });
       }
-const escapeHTML = (str) =>
-  str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-    
-     const escapedCode = escapeHTML(rawCode);
-
-      output += `
-        <div class="code-block-wrapper">
-          <div class="language-label">${langGuess.toUpperCase() || 'CODE'}</div>
-          <pre class="line-numbers language-${langGuess}"><code class="language-${langGuess}">${escapedCode}</code></pre>
-        </div>
-      `;
-    } else {
-      output += `<div class="text-content">${formatText(codeBlocks[i])}</div>`;
-    }
-  }
-
-  // highlight all new code blocks
- nextTick(() => {
-  setTimeout(() => Prism.highlightAll(), 0); // slight delay ensures DOM is painted
-});
-
-  return output;
-};
-
-
-        const formatText = (text) => {
-          return text
-            .replace(/\n/g, "<br>")
-            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-            .replace(/\*(.*?)\*/g, "<em>$1</em>");
-        };
-
-        const sendMessage = async () => {
-          if (!message.value.trim()) return;
-          history.value.push({
-  role: 'user',
-  content: message.value,
-  time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-});
-          scrollToBottom();
-
-          const assistant = { role: 'assistant', content: '', time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) };
-          history.value.push(assistant);
-          loading.value = true;
-
-          const payload = { message: message.value, history: history.value.slice(0, -1) };
-          message.value = '';
-
-          const response = await fetch("/chat-stream", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(payload)
-          });
-
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let done = false;
-
-          while (!done) {
-            const { value, done: isDone } = await reader.read();
-            if (value) {
-              assistant.content += decoder.decode(value);
-              scrollToBottom();
-            }
-            done = isDone;
-          }
-
-          loading.value = false;
-        };
-
-        return { message, history, sendMessage, renderCode, formatText, loading, chatbox };
-      }
-    }).mount('#app');
-
-    function copyToClipboard(code, btn) {
-      navigator.clipboard.writeText(code.replace(/\\n/g, '\n')).then(() => {
-        btn.textContent = 'Copied!';
-        setTimeout(() => (btn.textContent = 'Copy'), 2000);
-      });
-    }
-
+    });
   </script>
+
 </body>
 </html>