Update sss.html

sss.html

@@ -67,6 +67,42 @@
             background-color: #404040;
         }
 
+        /* Typing Indicator Styles */
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 1rem;
+        }
+
+        .typing-indicator span {
+            height: 8px;
+            width: 8px;
+            margin: 0 1px;
+            background-color: #6366f1;
+            display: inline-block;
+            border-radius: 50%;
+            opacity: 0.4;
+            animation: typing 1s infinite ease-in-out;
+        }
+
+        .typing-indicator span:nth-child(1) {
+            animation-delay: 200ms;
+        }
+
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 300ms;
+        }
+
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 400ms;
+        }
+
+        @keyframes typing {
+            0% { transform: translateY(0px); opacity: 0.4; }
+            50% { transform: translateY(-5px); opacity: 0.8; }
+            100% { transform: translateY(0px); opacity: 0.4; }
+        }
+
         /* Code Block Styles */
         pre[class*="language-"] {
             direction: ltr;
@@ -246,7 +282,7 @@
     </footer>
 
     <script>
-        const API_URL = 'https://nvgsxt9jqx730v-7777.proxy.runpod.net/proxy/8000/chat ';
+        const API_URL = 'https://nvgsxt9jqx730v-7777.proxy.runpod.net/proxy/8000/chat';
         const messagesContainer = document.getElementById('messagesContainer');
         const messageInput = document.getElementById('messageInput');
         const sendButton = document.getElementById('sendMessage');
@@ -257,15 +293,15 @@
         let currentStyle = 'normal';
         let currentController = null;
 
-        // Dark mode toggle
-        darkModeToggle.addEventListener('click', () => {
-            document.body.classList.toggle('dark-mode');
-            document.body.classList.toggle('light-mode');
-        });
-
-        styleSelect.addEventListener('change', (e) => {
-            currentStyle = e.target.value;
-        });
+        function createTypingIndicator() {
+            return `
+                <div class="typing-indicator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            `;
+        }
 
         function createUserMessage(text) {
             return `
@@ -331,33 +367,32 @@
 
         async function typeText(elementId, text) {
             const element = document.getElementById(elementId);
+            const typingIndicator = element.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
             element.innerHTML = '';
 
-            // Check if text contains code blocks
             const codeBlockRegex = /```(\w+)\n([\s\S]+?)```/g;
             let lastIndex = 0;
             let match;
 
             while ((match = codeBlockRegex.exec(text)) !== null) {
-                // Add text before code block
                 const beforeText = text.slice(lastIndex, match.index);
                 if (beforeText) {
                     await addTextWithEditor(element, beforeText);
                 }
 
-                // Add code block
                 const [, language, code] = match;
                 element.innerHTML += formatCodeBlock(code.trim(), language);
                 lastIndex = match.index + match[0].length;
             }
 
-            // Add remaining text
             const remainingText = text.slice(lastIndex);
             if (remainingText) {
                 await addTextWithEditor(element, remainingText);
             }
 
-            // Initialize Prism.js
             Prism.highlightAllUnder(element);
         }
 
@@ -379,7 +414,6 @@
             element.appendChild(textWrapper);
             element.appendChild(editorWrapper);
 
-            // Initialize TinyMCE for this textarea
             tinymce.init({
                 selector: '.tinymce-editor:last',
                 directionality: 'rtl',
@@ -421,6 +455,11 @@
 
             messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
             messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
+            
+            // Add typing indicator
+            const messageElement = document.getElementById(messageId);
+            messageElement.innerHTML = createTypingIndicator();
+            
             scrollToBottom();
 
             try {