Update sss.html

sss.html

@@ -4,27 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Speedy Chat</title>
-    <!-- Tailwind CSS -->
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <!-- Prism.js for code highlighting -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
-    <!-- TinyMCE for rich text editing -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.7/tinymce.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
         
         body {
             font-family: 'IBM Plex Sans Arabic', sans-serif;
             line-height: 1.6;
-            letter-spacing: -0.01em;
             transition: background-color 0.3s, color 0.3s;
         }
         
-        /* Light/Dark Mode Styles */
         body.light-mode {
             background-color: #fafafa;
             color: #374151;
@@ -51,145 +42,53 @@
             color: #e5e5e5;
         }
         
-        .dark-mode .style-select {
-            background-color: #363636;
-            border-color: #404040;
-            color: #e5e5e5;
-        }
-        
         .dark-mode .bot-message {
             background-color: #363636;
             color: #e5e5e5;
         }
-
-        .dark-mode .action-button {
-            color: #e5e5e5;
-            background-color: #404040;
-        }
-
-        /* Code Block Styles */
-        pre[class*="language-"] {
-            direction: ltr;
-            text-align: left;
-            border-radius: 0.5rem;
-            margin: 1rem 0;
-            padding: 1rem;
-            font-size: 0.9rem;
-            line-height: 1.5;
-        }
-
-        .code-block-wrapper {
-            position: relative;
-            margin: 1rem 0;
-            border-radius: 0.5rem;
-            overflow: hidden;
-        }
-
-        .code-block-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: #2d2d2d;
-            color: white;
-            padding: 0.5rem 1rem;
-        }
-
-        /* Long Text Styles */
-        .long-text-wrapper {
-            max-height: 300px;
-            overflow-y: auto;
-            padding: 1rem;
-            background: #f8f9fa;
-            border-radius: 0.5rem;
-            margin: 1rem 0;
-        }
-
-        /* Rich Text Editor Styles */
-        .editor-wrapper {
-            display: none;
-            background: white;
-            border-radius: 0.5rem;
-            margin: 1rem 0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .editor-toolbar {
-            display: flex;
-            gap: 0.5rem;
-            padding: 0.5rem;
-            border-bottom: 1px solid #e5e7eb;
-        }
-
-        /* Message Input Styles */
+        
         .message-input {
             resize: none;
             min-height: 50px;
             max-height: 200px;
         }
-
-        .message-input:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-        }
-
-        /* Welcome Text Style */
-        .welcome-text {
-            font-family: 'Noto Kufi Arabic', sans-serif;
-            font-size: 2rem;
-            font-weight: 700;
-            text-align: center;
-            margin: 1.5rem 0;
-            letter-spacing: -0.02em;
-        }
-
-        /* Message Animation */
+        
         .message {
             opacity: 0;
             transform: translateY(20px);
             animation: fadeIn 0.3s ease forwards;
         }
-
+        
         @keyframes fadeIn {
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-
-        /* Utility Classes */
+        
         .bot-avatar {
             width: 40px;
             height: 40px;
             border-radius: 50%;
             object-fit: cover;
         }
-
-        .action-button {
-            padding: 0.5rem;
-            border-radius: 0.375rem;
-            transition: all 0.2s;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.875rem;
-            color: #6B7280;
-            background-color: #F3F4F6;
-        }
-
-        .action-button:hover {
-            background-color: #E5E7EB;
+        
+        .code-block {
+            direction: ltr;
+            text-align: left;
+            background: #2d2d2d;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin: 1rem 0;
         }
-
-        .style-select {
-            appearance: none;
-            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-            background-repeat: no-repeat;
-            background-position: left 0.5rem center;
-            background-size: 1em;
+        
+        pre[class*="language-"] {
+            margin: 0;
+            padding: 0;
         }
     </style>
 </head>
-<body class="text-lg light-mode">
+<body class="light-mode">
     <header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm">
         <div class="flex items-center px-4 py-2">
             <div class="flex items-center flex-1">
@@ -210,7 +109,6 @@
 
     <main class="pt-24 pb-24">
         <div class="max-w-3xl mx-auto px-4">
-            <div class="welcome-text">سبيدي هنا لمساعدتك</div>
             <div id="messagesContainer" class="space-y-4"></div>
         </div>
     </main>
@@ -230,12 +128,7 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                         </svg>
                     </button>
-                    <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-2 transition-colors">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
-                        </svg>
-                    </a>
-                    <select id="styleSelect" class="style-select bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200">
+                    <select id="styleSelect" class="bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200">
                         <option value="short">⚡ ردود قصيرة</option>
                         <option value="normal" selected>◯ عادي</option>
                         <option value="long">↔ ردود مفصلة</option>
@@ -245,8 +138,11 @@
         </div>
     </footer>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
+    
     <script>
-        const API_URL = 'https://nvgsxt9jqx730v-7777.proxy.runpod.net/proxy/8000/chat/stream ';
+        const API_URL = 'https://nvgsxt9jqx730v-7777.proxy.runpod.net/proxy/8000/chat/stream';
         const messagesContainer = document.getElementById('messagesContainer');
         const messageInput = document.getElementById('messageInput');
         const sendButton = document.getElementById('sendMessage');
@@ -257,16 +153,6 @@
         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 createUserMessage(text) {
             return `
                 <div class="message flex justify-end mb-4">
@@ -288,25 +174,19 @@
                     <div class="max-w-[80%] mr-3">
                         <div class="bot-message bg-white rounded-lg p-4 shadow-sm">
                             <p id="${messageId}" class="text-gray-700"></p>
-                            <div class="message-actions">
-                                <button class="action-button copy-button" data-message-id="${messageId}">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+                            <div class="message-actions mt-2">
+                                <button class="copy-button text-sm text-gray-500 hover:text-gray-700 mr-2">
+                                    <svg class="w-4 h-4 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                     </svg>
                                     نسخ
                                 </button>
-                                <button class="action-button regenerate-button" data-message-id="${messageId}">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <button class="regenerate-button text-sm text-gray-500 hover:text-gray-700">
+                                    <svg class="w-4 h-4 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                     </svg>
                                     إعادة التوليد
                                 </button>
-                                <button class="action-button edit-text-btn">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                                    </svg>
-                                    تحرير كمستند
-                                </button>
                             </div>
                         </div>
                     </div>
@@ -316,86 +196,33 @@
 
         function formatCodeBlock(code, language) {
             return `
-                <div class="code-block-wrapper">
-                    <div class="code-block-header">
-                        <span>${language}</span>
-                        <button class="copy-code-btn">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                            </svg>
-                        </button>
-                    </div>
+                <div class="code-block">
                     <pre class="line-numbers"><code class="language-${language}">${code}</code></pre>
-                </div>`;
+                </div>
+            `;
         }
 
         async function typeText(elementId, text) {
             const element = document.getElementById(elementId);
-            element.innerHTML = '';
+            if (!element) return;
 
-            // Check if text contains code blocks
             const codeBlockRegex = /```(\w+)\n([\s\S]+?)```/g;
             let lastIndex = 0;
             let match;
+            let formattedText = '';
 
             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
+                formattedText += text.slice(lastIndex, match.index);
                 const [, language, code] = match;
-                element.innerHTML += formatCodeBlock(code.trim(), language);
+                formattedText += 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
+            formattedText += text.slice(lastIndex);
+            element.innerHTML = formattedText;
             Prism.highlightAllUnder(element);
         }
 
-        async function addTextWithEditor(element, text) {
-            const textWrapper = document.createElement('div');
-            textWrapper.className = 'long-text-wrapper';
-            textWrapper.innerHTML = text;
-            
-            const editorWrapper = document.createElement('div');
-            editorWrapper.className = 'editor-wrapper';
-            editorWrapper.innerHTML = `
-                <div class="editor-toolbar">
-                    <button class="save-btn action-button">حفظ</button>
-                    <button class="cancel-btn action-button">إلغاء</button>
-                </div>
-                <textarea class="tinymce-editor"></textarea>
-            `;
-            
-            element.appendChild(textWrapper);
-            element.appendChild(editorWrapper);
-
-            // Initialize TinyMCE for this textarea
-            tinymce.init({
-                selector: '.tinymce-editor:last',
-                directionality: 'rtl',
-                height: 400,
-                menubar: false,
-                plugins: 'lists link table',
-                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link table',
-                content_style: 'body { font-family: "IBM Plex Sans Arabic", sans-serif; }',
-                setup: function(editor) {
-                    editor.on('init', function() {
-                        editor.setContent(text);
-                    });
-                }
-            });
-        }
-
         async function sendMessage() {
             const message = messageInput.value.trim();
             if (!message) return;
@@ -429,7 +256,10 @@
 
                 const response = await fetch(API_URL, {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        'Accept': 'text/event-stream'
+                    },
                     body: JSON.stringify({
                         message: actualMessage,
                         history: chatHistory
@@ -437,17 +267,37 @@
                     signal: currentController.signal
                 });
 
-                const data = await response.json();
-                await typeText(messageId, data.response);
-                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let fullResponse = '';
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    fullResponse += chunk;
+
+                    const messageElement = document.getElementById(messageId);
+                    if (messageElement) {
+                        await typeText(messageId, fullResponse);
+                    }
+                }
+
                 chatHistory.push({
                     human: actualMessage,
-                    assistant: data.response
+                    assistant: fullResponse
                 });
+
             } catch (error) {
                 if (error.name === 'AbortError') {
                     document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
                 } else {
+                    console.error('Error:', error);
                     document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
                 }
             } finally {
@@ -458,16 +308,12 @@
         }
 
         function toggleSendButton(isGenerating) {
-            const sendButton = document.getElementById('sendMessage');
             if (isGenerating) {
-                sendButton.classList.add('stop-generation');
                 sendButton.innerHTML = `
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
+                        </svg>
                 `;
             } else {
-                sendButton.classList.remove('stop-generation');
                 sendButton.innerHTML = `
                     <svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
@@ -478,7 +324,7 @@
 
         function adjustTextareaHeight() {
             messageInput.style.height = 'auto';
-            messageInput.style.height = messageInput.scrollHeight + 'px';
+            messageInput.style.height = Math.min(messageInput.scrollHeight, 200) + 'px';
         }
 
         function scrollToBottom() {
@@ -490,70 +336,22 @@
 
         // Event Listeners
         document.addEventListener('click', async (e) => {
-            if (e.target.closest('.copy-code-btn')) {
-                const codeBlock = e.target.closest('.code-block-wrapper').querySelector('code');
-                await navigator.clipboard.writeText(codeBlock.textContent);
-                const btn = e.target.closest('.copy-code-btn');
-                btn.innerHTML = 'تم النسخ!';
-                setTimeout(() => {
-                    btn.innerHTML = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                    </svg>`;
-                }, 2000);
-            }
+            const target = e.target.closest('button');
+            if (!target) return;
 
-            if (e.target.closest('.copy-button')) {
-                const messageId = e.target.closest('.copy-button').dataset.messageId;
-                const text = document.getElementById(messageId).textContent;
-                await navigator.clipboard.writeText(text);
-                const btn = e.target.closest('.copy-button');
-                btn.textContent = 'تم النسخ!';
+            if (target.classList.contains('copy-button')) {
+                const messageWrapper = target.closest('.bot-message');
+                const textContent = messageWrapper.querySelector('p').textContent;
+                await navigator.clipboard.writeText(textContent);
+                
+                const originalHTML = target.innerHTML;
+                target.textContent = 'تم النسخ!';
                 setTimeout(() => {
-                    btn.innerHTML = `
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                        </svg>
-                        نسخ
-                    `;
+                    target.innerHTML = originalHTML;
                 }, 2000);
             }
 
-            if (e.target.closest('.edit-text-btn')) {
-                const messageWrapper = e.target.closest('.bot-message');
-                const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
-                const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
-                
-                if (textWrapper && editorWrapper) {
-                    textWrapper.style.display = 'none';
-                    editorWrapper.style.display = 'block';
-                }
-            }
-
-            if (e.target.closest('.save-btn')) {
-                const messageWrapper = e.target.closest('.bot-message');
-                const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
-                const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
-                const editor = tinymce.get(editorWrapper.querySelector('.tinymce-editor').id);
-                
-                if (textWrapper && editor) {
-                    textWrapper.innerHTML = editor.getContent();
-                    textWrapper.style.display = 'block';
-                    editorWrapper.style.display = 'none';
-                }
-            }
-
-            if (e.target.closest('.cancel-btn')) {
-                const messageWrapper = e.target.closest('.bot-message');
-                const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
-                const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
-                
-                if (textWrapper && editorWrapper) {
-                    textWrapper.style.display = 'block';
-                    editorWrapper.style.display = 'none';
-                }
-            }
-
-            if (e.target.closest('.regenerate-button')) {
+            if (target.classList.contains('regenerate-button')) {
                 if (chatHistory.length > 0) {
                     const lastMessage = chatHistory[chatHistory.length - 1].human;
                     messageInput.value = lastMessage;
@@ -562,6 +360,24 @@
             }
         });
 
+        // Style Toggle
+        styleSelect.addEventListener('change', (e) => {
+            currentStyle = e.target.value;
+        });
+
+        // Dark Mode Toggle
+        darkModeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-mode');
+            document.body.classList.toggle('light-mode');
+        });
+
+        // Clear Chat
+        clearButton.addEventListener('click', () => {
+            messagesContainer.innerHTML = '';
+            chatHistory = [];
+        });
+
+        // Send Message Events
         sendButton.addEventListener('click', sendMessage);
         messageInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
@@ -570,15 +386,13 @@
             }
         });
         messageInput.addEventListener('input', adjustTextareaHeight);
-        clearButton.addEventListener('click', () => {
-            messagesContainer.innerHTML = '';
-            chatHistory = [];
-        });
 
-        // Initial welcome message
-        const initialMessageId = 'msg-initial';
-        messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
-        typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
+        // Initial Welcome Message
+        window.addEventListener('load', () => {
+            const initialMessageId = 'msg-initial';
+            messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
+            typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
+        });
     </script>
 </body>
 </html>