Update playground.html

playground.html

@@ -4,26 +4,39 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LOKI.AI Playground</title>
+    <!-- DM Sans font -->
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- JetBrains Mono for code blocks -->
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Anime.js for animations -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <!-- Marked.js for Markdown support -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+    <!-- Highlight.js for code syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script>
         tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
                     fontFamily: {
+                        sans: ['"DM Sans"', 'sans-serif'],
                         mono: ['"JetBrains Mono"', 'monospace'],
                     },
                     colors: {
                         primary: {
                             DEFAULT: '#10B981',
                             dark: '#059669',
+                            light: '#6EE7B7',
                         },
                         dark: {
-                            DEFAULT: '#111827',
-                            lighter: '#1F2937',
-                            card: '#1E293B',
+                            DEFAULT: '#0F172A', // Darker blue-black
+                            lighter: '#1E293B', // Slate 800
+                            card: '#1E293B',    // Slate 800
+                            input: '#334155',   // Slate 700
                         },
                     },
                     animation: {
@@ -40,12 +53,162 @@
             }
         }
     </script>
+    <style>
+        /* Custom scrollbar for dark theme */
+        .dark ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        
+        .dark ::-webkit-scrollbar-track {
+            background: #1E293B;
+        }
+        
+        .dark ::-webkit-scrollbar-thumb {
+            background: #475569;
+            border-radius: 4px;
+        }
+        
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: #64748B;
+        }
+        
+        /* Markdown styles */
+        .markdown-content h1 {
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-top: 1.5rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid #334155;
+            padding-bottom: 0.5rem;
+        }
+        
+        .markdown-content h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-top: 1.2rem;
+            margin-bottom: 0.8rem;
+        }
+        
+        .markdown-content h3 {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-top: 1rem;
+            margin-bottom: 0.7rem;
+        }
+        
+        .markdown-content p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+        }
+        
+        .markdown-content ul, .markdown-content ol {
+            margin-top: 0.5rem;
+            margin-bottom: 1rem;
+            padding-left: 1.5rem;
+        }
+        
+        .markdown-content ul {
+            list-style-type: disc;
+        }
+        
+        .markdown-content ol {
+            list-style-type: decimal;
+        }
+        
+        .markdown-content li {
+            margin-bottom: 0.5rem;
+        }
+        
+        .markdown-content blockquote {
+            border-left: 4px solid #6EE7B7;
+            padding-left: 1rem;
+            margin-left: 0;
+            margin-right: 0;
+            font-style: italic;
+            background-color: rgba(30, 41, 59, 0.5);
+            padding: 0.5rem 1rem;
+            border-radius: 0 4px 4px 0;
+        }
+        
+        .markdown-content img {
+            max-width: 100%;
+            margin: 1rem 0;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        
+        .markdown-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1rem 0;
+        }
+        
+        .markdown-content table th,
+        .markdown-content table td {
+            padding: 0.5rem;
+            border: 1px solid #334155;
+        }
+        
+        .markdown-content table th {
+            background-color: #1E293B;
+            font-weight: 600;
+        }
+        
+        .markdown-content table tr:nth-child(even) {
+            background-color: rgba(30, 41, 59, 0.5);
+        }
+        
+        .markdown-content pre {
+            margin: 1rem 0;
+            padding: 1rem;
+            border-radius: 8px;
+            background-color: #1E293B !important;
+            overflow-x: auto;
+        }
+        
+        .markdown-content code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            background-color: #334155;
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+        }
+        
+        .markdown-content pre code {
+            background-color: transparent;
+            padding: 0;
+            border-radius: 0;
+        }
+        
+        .typing-indicator span {
+            animation: typing 1s infinite;
+            animation-delay: calc(var(--dot-index) * 0.3s);
+        }
+        
+        /* Message bubbles with improved styling */
+        .message-bubble {
+            border-radius: 1rem;
+            max-width: 90%;
+        }
+        
+        .user-message {
+            background-color: #334155;
+            margin-left: auto;
+            border-top-right-radius: 0.25rem;
+        }
+        
+        .assistant-message {
+            background-color: #0F172A;
+            border-top-left-radius: 0.25rem;
+        }
+    </style>
 </head>
 
-<body class="dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300">
+<body class="dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300 font-sans">
     <!-- GitHub Link -->
     <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer" 
-       class="fixed top-4 right-4 text-gray-500 hover:text-primary transition-colors duration-300 z-10" 
+       class="fixed top-4 right-4 text-gray-500 hover:text-primary-light transition-colors duration-300 z-10" 
        aria-label="Visit Parth Sadaria's GitHub profile">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 
              class="w-6 h-6" stroke-linecap="round" stroke-linejoin="round">
@@ -55,33 +218,36 @@
 
     <!-- Chat Container -->
     <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4" id="chatWrapper">
-        <!-- Header -->
-        <div class="flex justify-between items-center mb-6 p-4 bg-gray-100 dark:bg-dark-lighter rounded-lg shadow-md">
-            <h2 class="text-xl font-mono font-bold text-gray-800 dark:text-gray-100">LOKI.AI Playground</h2>
+        <!-- Header with Logo -->
+        <div class="flex justify-between items-center mb-6 p-4 bg-dark-lighter rounded-xl shadow-lg border border-dark-input">
+            <div class="flex items-center">
+                <span class="text-xl font-mono font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">LOKI.AI</span>
+                <span class="ml-2 text-sm bg-dark-input px-2 py-0.5 rounded-full text-gray-300">Playground</span>
+            </div>
             <div class="flex space-x-2">
                 <!-- Model Selector -->
                 <div class="relative" id="modelSelector">
-                    <button class="px-3 py-2 bg-gray-200 dark:bg-dark-card rounded-md text-sm flex items-center space-x-1 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" id="modelSelectButton">
+                    <button class="px-3 py-2 bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-700 transition-colors shadow-sm" id="modelSelectButton">
                         <span id="modelSelectDisplay">Select Model</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                         </svg>
                     </button>
-                    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-white dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20" id="modelOptions">
+                    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20" id="modelOptions">
                         <div class="py-2 px-3 text-sm text-gray-400" id="modelLoader">Loading models...</div>
                     </div>
                 </div>
                 
                 <!-- Clear Chat Button -->
-                <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-700 transition-colors bg-dark-input shadow-sm group">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                     </svg>
                 </button>
                 
                 <!-- Theme Toggle Button -->
-                <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-700 transition-colors bg-dark-input shadow-sm group">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                     </svg>
                 </button>
@@ -90,12 +256,12 @@
 
         <!-- Initial Input -->
         <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
-            <h2 class="text-2xl font-mono font-semibold">Welcome to LOKI.AI</h2>
+            <h2 class="text-2xl font-semibold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
             <div class="w-full max-w-2xl relative">
                 <input type="text" id="initialChatInput" 
-                       class="w-full p-4 pr-12 rounded-lg border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card focus:outline-none focus:ring-2 focus:ring-primary dark:text-white shadow-md transition-all"
+                       class="w-full p-4 pr-12 rounded-xl border-2 border-dark-input bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white shadow-lg transition-all"
                        placeholder="What can I help you with today?">
-                <button id="initialSendIcon" class="absolute right-3 top-3 text-gray-400 hover:text-primary transition-colors">
+                <button id="initialSendIcon" class="absolute right-4 top-4 text-gray-400 hover:text-primary-light transition-colors">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                     </svg>
@@ -104,33 +270,33 @@
         </div>
 
         <!-- Chat Area -->
-        <div class="hidden flex-col h-[70vh] bg-white dark:bg-dark-card rounded-lg shadow-lg overflow-hidden" id="chatContainer">
+        <div class="hidden flex-col h-[70vh] bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-dark-input" id="chatContainer">
             <!-- Messages Area -->
-            <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chatMessages"></div>
+            <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
             
             <!-- Input Area -->
-            <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+            <div class="border-t border-dark-input p-4">
                 <div class="relative">
                     <input type="text" id="chatInput" 
-                           class="w-full p-3 pr-12 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card focus:outline-none focus:ring-2 focus:ring-primary dark:text-white transition-all"
+                           class="w-full p-3 pr-12 rounded-xl border border-dark-input bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white transition-all shadow-inner"
                            placeholder="Type your message...">
-                    <button id="sendButton" class="absolute right-3 top-3 text-gray-400 hover:text-primary transition-colors">
+                    <button id="sendButton" class="absolute right-3 top-3 text-gray-400 hover:text-primary-light transition-colors">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" id="sendIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                         </svg>
                         <div id="sendLoader" class="hidden">
-                            <div class="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
+                            <div class="w-5 h-5 border-2 border-primary-light border-t-transparent rounded-full animate-spin"></div>
                         </div>
                     </button>
                 </div>
-                <p class="text-center text-gray-500 text-xs mt-2">Models can make mistakes. Check important info.</p>
+                <p class="text-center text-gray-500 text-xs mt-2">Models can make mistakes. Check important information.</p>
             </div>
         </div>
     </div>
 
     <!-- Watermark -->
     <div class="fixed bottom-2 right-4 text-xs text-gray-500 font-mono">
-        Made with ❤️ by Parth Sadaria
+        Made with <span class="text-primary-light">❤️</span> by Parth Sadaria
     </div>
 
     <script>
@@ -294,22 +460,41 @@ document.addEventListener('DOMContentLoaded', function() {
     function scrollToBottom() {
         chatMessages.scrollTop = chatMessages.scrollHeight;
     }
-
-    function createMessageElement(type) {
-        const messageBox = document.createElement('div');
-        messageBox.className = `p-3 rounded-lg ${type === 'user' ? 'bg-primary bg-opacity-10 ml-8' : 'bg-gray-100 dark:bg-gray-800 mr-8'}`;
-        
-        // Add animation
-        anime({
-            targets: messageBox,
-            opacity: [0, 1],
-            translateY: [10, 0],
-            easing: 'easeOutExpo',
-            duration: 400
+  marked.setOptions({
+            highlight: function(code, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    return hljs.highlight(code, { language: lang }).value;
+                }
+                return hljs.highlightAuto(code).value;
+            },
+            breaks: true,
+            gfm: true
         });
-        
-        return messageBox;
-    }
+
+    function createMessageElement(message, sender) {
+            const messageEl = document.createElement('div');
+            messageEl.className = `message-bubble p-4 ${sender === 'user' ? 'user-message' : 'assistant-message'}`;
+            
+            if (sender === 'assistant') {
+                // Use markdown parsing for assistant messages
+                messageEl.classList.add('markdown-content');
+                messageEl.innerHTML = marked.parse(message);
+                
+                // Apply syntax highlighting to code blocks
+                messageEl.querySelectorAll('pre code').forEach((block) => {
+                    hljs.highlightElement(block);
+                });
+            } else {
+                // For user messages, just use the plain text
+                messageEl.textContent = message;
+            }
+            
+            const wrapperEl = document.createElement('div');
+            wrapperEl.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
+            wrapperEl.appendChild(messageEl);
+            
+            return wrapperEl;
+        }
 
     function appendMessage(content, type = 'bot', isStreaming = false) {
         if (type === 'bot' && isStreaming) {
@@ -659,7 +844,32 @@ document.addEventListener('DOMContentLoaded', function() {
             chatContainer.style.height = '70vh';
         }
     }
-    
+      function showTypingIndicator() {
+            const typingEl = document.createElement('div');
+            typingEl.className = 'message-bubble assistant-message p-3 typing-indicator flex';
+            typingEl.innerHTML = `
+                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 0"></span>
+                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 1"></span>
+                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 2"></span>
+            `;
+            
+            const wrapperEl = document.createElement('div');
+            wrapperEl.className = 'flex justify-start typing-wrapper';
+            wrapperEl.appendChild(typingEl);
+            
+            document.getElementById('chatMessages').appendChild(wrapperEl);
+            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
+            
+            return wrapperEl;
+        }
+        
+        // Function to remove typing indicator
+        function removeTypingIndicator() {
+            const typingWrapper = document.querySelector('.typing-wrapper');
+            if (typingWrapper) {
+                typingWrapper.remove();
+            }
+        }
     window.addEventListener('resize', resizeChat);
     resizeChat();