Update index.html

index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Speedy Chat</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.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/components/prism-python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.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');
@@ -58,6 +62,17 @@
             background-color: #404040;
         }
 
+        .dark-mode .modal-content {
+            background-color: #2d2d2d;
+            color: #e5e5e5;
+        }
+
+        .dark-mode .modal-content textarea {
+            background-color: #363636;
+            color: #e5e5e5;
+            border-color: #404040;
+        }
+
         .welcome-text {
             font-family: 'Noto Kufi Arabic', sans-serif;
             font-size: 2rem;
@@ -110,7 +125,7 @@
             display: inline-flex;
             align-items: center;
             gap: 0.25rem;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             color: #6B7280;
             background-color: #F3F4F6;
         }
@@ -119,45 +134,48 @@
             background-color: #E5E7EB;
         }
 
-        .header-button {
-            color: #6B7280;
-            padding: 0.5rem;
-            border-radius: 9999px;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
+        .thinking-steps {
+            margin: 10px 0;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            font-size: 0.9em;
+        }
+
+        .thinking-steps div {
+            margin: 5px 0;
+            color: #666;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
             justify-content: center;
-        }
-        
-        .header-button:hover {
-            background-color: #F3F4F6;
-        }
-
-        .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;
-        }
-
-        .stop-generation {
-            background-color: #EF4444 !important;
-            color: white !important;
+            align-items: center;
         }
 
-        .search-toggle.active {
-            background-color: #3b82f6;
-            color: white;
+        .modal-content {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 0.5rem;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
         }
 
-        .thinking-steps {
-            background-color: #f8fafc;
+        pre[class*="language-"] {
+            direction: ltr;
+            text-align: left;
+            margin: 1em 0;
             border-radius: 0.5rem;
-            padding: 1rem;
-            margin: 0.5rem 0;
-            font-size: 0.9rem;
-            color: #64748b;
+            padding: 1em;
         }
 
         .chat-input {
@@ -172,46 +190,14 @@
             }
         }
 
-        .message p {
-            font-size: 0.875rem;
-            line-height: 1.5;
-        }
-
-        .bot-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            object-fit: cover;
-        }
-
-        .message-input-container {
-            padding: 0.5rem !important;
-        }
-
-        .input-actions {
-            padding-top: 0.25rem !important;
-        }
-
-        /* Remove footer border */
-        footer {
-            border-top: none !important;
-        }
-
-        /* Reduce message container padding */
-        .bot-message {
-            padding: 0.75rem !important;
-        }
-
-        /* Adjust message actions spacing */
         .message-actions {
-            margin-top: 0.25rem;
+            margin-top: 0.5rem;
             display: flex;
-            gap: 0.25rem;
+            gap: 0.5rem;
         }
     </style>
 </head>
 <body class="text-lg light-mode">
-    <!-- Rest of the HTML remains exactly the same -->
     <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">
@@ -228,11 +214,6 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                     </svg>
                 </a>
-                <a href="/account" class="header-button">
-                    <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
-                    </svg>
-                </a>
                 <button id="darkModeToggle" class="header-button">
                     <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="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"></path>
@@ -254,9 +235,20 @@
         </div>
     </main>
 
+    <div id="editModal" class="modal">
+        <div class="modal-content">
+            <h2 class="text-xl font-bold mb-4">تعديل النص</h2>
+            <textarea id="editText" class="w-full h-40 p-2 border rounded-lg mb-4"></textarea>
+            <div class="flex justify-end gap-2">
+                <button id="cancelEdit" class="px-4 py-2 bg-gray-200 rounded-lg">إلغاء</button>
+                <button id="saveEdit" class="px-4 py-2 bg-black text-white rounded-lg">حفظ</button>
+            </div>
+        </div>
+    </div>
+
     <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-sm">
         <div class="max-w-3xl mx-auto px-4 py-3">
-            <div class="relative bg-white rounded-xl border border-gray-200 p-2 message-input-container">
+            <div class="relative bg-white rounded-xl border border-gray-200 p-2">
                 <textarea 
                     id="messageInput"
                     class="chat-input w-full text-gray-600 text-lg p-2 rounded-lg resize-none border-none"
@@ -264,7 +256,7 @@
                     rows="1"
                 ></textarea>
                 
-                <div class="flex items-center justify-between mt-2 input-actions">
+                <div class="flex items-center justify-between mt-2">
                     <div class="flex gap-3">
                         <button class="text-gray-400 hover:text-gray-600" id="attachButton">
                             <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -276,7 +268,7 @@
                                 <path 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"/>
                             </svg>
                         </a>
-                        <button id="searchButton" class="text-gray-400 hover:text-gray-600 search-toggle">
+                        <button id="searchButton" class="text-gray-400 hover:text-gray-600">
                             <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                             </svg>
@@ -284,7 +276,7 @@
                     </div>
 
                     <div class="flex items-center gap-3">
-                        <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="style-select bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2">
                             <option value="short">⚡ ردود قصيرة</option>
                             <option value="normal" selected>◯ عادي</option>
                             <option value="long">↔ ردود مفصلة</option>
@@ -308,7 +300,7 @@
     </footer>
 
     <script>
-        const API_URL = 'https://975yry7ibyersz-7777.proxy.runpod.net/proxy/6000/chat';
+        const API_URL = 'https://975yry7ibyersz-7777.proxy.runpod.net/proxy/8000/chat';
         const messagesContainer = document.getElementById('messagesContainer');
         const messageInput = document.getElementById('messageInput');
         const sendButton = document.getElementById('sendMessage');
@@ -317,31 +309,24 @@
         const darkModeToggle = document.getElementById('darkModeToggle');
         const aiToggle = document.getElementById('aiToggle');
         const searchButton = document.getElementById('searchButton');
+        const editModal = document.getElementById('editModal');
+        const editText = document.getElementById('editText');
+        const saveEdit = document.getElementById('saveEdit');
+        const cancelEdit = document.getElementById('cancelEdit');
+        
         let chatHistory = [];
         let currentStyle = 'normal';
         let currentController = null;
         let isSearchEnabled = false;
+        let currentEditMessageId = null;
 
-        // Search button toggle
-        searchButton.addEventListener('click', () => {
-            isSearchEnabled = !isSearchEnabled;
-            searchButton.classList.toggle('active');
-            messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا...";
-        });
-
-        // Dark mode toggle
-        darkModeToggle.addEventListener('click', () => {
-            document.body.classList.toggle('dark-mode');
-            document.body.classList.toggle('light-mode');
-        });
-
-        aiToggle.addEventListener('click', function() {
-            this.classList.toggle('active');
-        });
-
-        styleSelect.addEventListener('change', (e) => {
-            currentStyle = e.target.value;
-        });
+        function formatCode(text) {
+            const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+            return text.replace(codeBlockRegex, (match, lang, code) => {
+                const language = lang || 'plaintext';
+                return `<pre><code class="language-${language}">${code.trim()}</code></pre>`;
+            });
+        }
 
         function createThinkingSteps(messageId) {
             return `
@@ -354,13 +339,6 @@
         }
 
         function createUserMessage(text) {
-            let prefix = '';
-            if (currentStyle === 'short') {
-                prefix = 'اعطني رد باختصار وسرعة: ';
-            } else if (currentStyle === 'long') {
-                prefix = 'اعطني رد مفصل وموسع: ';
-            }
-            
             return `
                 <div class="message flex justify-end mb-4">
                     <div class="max-w-[80%]">
@@ -376,7 +354,7 @@
             return `
                 <div class="message flex justify-start mb-4">
                     <div class="flex-shrink-0 mt-1">
-                        <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="bot-avatar">
+                        <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="w-8 h-8 rounded-full">
                     </div>
                     <div class="max-w-[80%] mr-3">
                         <div class="bot-message bg-white rounded-lg p-3 shadow-sm">
@@ -384,27 +362,21 @@
                             <div class="message-actions">
                                 <button class="action-button copy-button" data-message-id="${messageId}">
                                     <svg class="w-3 h-3" 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>
+                                        <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-3 h-3" 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 like-button" data-message-id="${messageId}">
+                                <button class="action-button speak-button" data-message-id="${messageId}">
                                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
+                                        <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>
-                                    أعجبني
+                                    قراءة
                                 </button>
-                                <button class="action-button dislike-button" data-message-id="${messageId}">
+                                <button class="action-button edit-button" data-message-id="${messageId}">
                                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v5a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5 0v2a2 2 0 01-2 2h-2.5"></path>
+                                        <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>
@@ -415,16 +387,26 @@
 
         async function typeText(elementId, text) {
             const element = document.getElementById(elementId);
-            element.innerHTML = '';
-            const words = text.split(' ');
-            
-            for (let i = 0; i < words.length; i++) {
-                const span = document.createElement('span');
-                span.textContent = words[i] + ' ';
-                span.className = 'typing-animation';
-                element.appendChild(span);
-                await new Promise(resolve => setTimeout(resolve, 50));
-            }
+            element.innerHTML = formatCode(text);
+            Prism.highlightAllUnder(element);
+        }
+
+        function speakText(text) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang = 'ar';
+            speechSynthesis.speak(utterance);
+        }
+
+        function openEditModal(messageId) {
+            const messageElement = document.getElementById(messageId);
+            editText.value = messageElement.textContent;
+            editModal.style.display = 'flex';
+            currentEditMessageId = messageId;
+        }
+
+        function closeEditModal() {
+            editModal.style.display = 'none';
+            currentEditMessageId = null;
         }
 
         function toggleSendButton(isGenerating) {
@@ -549,32 +531,26 @@
                 setTimeout(() => {
                     button.innerHTML = `
                         <svg class="w-3 h-3" 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>
+                            <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);
             }
             
-            if (e.target.closest('.regenerate-button')) {
-                if (chatHistory.length > 0) {
-                    const lastMessage = chatHistory[chatHistory.length - 1].human;
-                    messageInput.value = lastMessage;
-                    sendMessage();
-                }
-            }
-            
-            if (e.target.closest('.like-button')) {
-                const button = e.target.closest('.like-button');
-                button.classList.toggle('text-green-500');
+            if (e.target.closest('.speak-button')) {
+                const messageId = e.target.closest('.speak-button').dataset.messageId;
+                const text = document.getElementById(messageId).textContent;
+                speakText(text);
             }
             
-            if (e.target.closest('.dislike-button')) {
-                const button = e.target.closest('.dislike-button');
-                button.classList.toggle('text-red-500');
+            if (e.target.closest('.edit-button')) {
+                const messageId = e.target.closest('.edit-button').dataset.messageId;
+                openEditModal(messageId);
             }
         });
 
+        // Event listeners for buttons and inputs
         sendButton.addEventListener('click', sendMessage);
         messageInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
@@ -583,6 +559,37 @@
             }
         });
         messageInput.addEventListener('input', adjustTextareaHeight);
+        
+        saveEdit.addEventListener('click', () => {
+            if (currentEditMessageId) {
+                const messageElement = document.getElementById(currentEditMessageId);
+                messageElement.innerHTML = formatCode(editText.value);
+                Prism.highlightAllUnder(messageElement);
+            }
+            closeEditModal();
+        });
+
+        cancelEdit.addEventListener('click', closeEditModal);
+
+        searchButton.addEventListener('click', () => {
+            isSearchEnabled = !isSearchEnabled;
+            searchButton.classList.toggle('active');
+            messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا...";
+        });
+
+        darkModeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-mode');
+            document.body.classList.toggle('light-mode');
+        });
+
+        aiToggle.addEventListener('click', function() {
+            this.classList.toggle('active');
+        });
+
+        styleSelect.addEventListener('change', (e) => {
+            currentStyle = e.target.value;
+        });
+
         clearButton.addEventListener('click', () => {
             messagesContainer.innerHTML = '';
             chatHistory = [];
@@ -592,6 +599,11 @@
         const initialMessageId = 'msg-initial';
         messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
         typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
+
+        // Initialize Prism.js
+        document.addEventListener('DOMContentLoaded', () => {
+            Prism.highlightAll();
+        });
     </script>
 </body>
 </html>