Update index.html

index.html

@@ -38,6 +38,11 @@
             border-color: #404040;
         }
         
+        .dark-mode footer {
+            background-color: #2d2d2d;
+            border-color: #404040;
+        }
+        
         .dark-mode .message-input {
             background-color: #363636;
             border-color: #404040;
@@ -80,25 +85,6 @@
             letter-spacing: -0.02em;
         }
 
-        main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding-top: 4rem;
-        }
-
-        .messages-container {
-            flex: 1;
-            overflow-y: auto;
-            padding: 1rem;
-        }
-
-        .input-container {
-            margin-top: auto;
-            padding: 1rem;
-            background-color: transparent;
-        }
-
         .message {
             opacity: 0;
             transform: translateY(20px);
@@ -157,27 +143,96 @@
             background-color: #f8f9fa;
             border-radius: 8px;
             font-size: 0.9em;
+            position: relative;
+            overflow: hidden;
         }
 
-        .chat-input {
-            max-height: 60px;
-            min-height: 32px;
+        .thinking-steps::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            animation: shine 1.5s infinite;
         }
 
-        @keyframes fadeIn {
+        @keyframes shine {
             to {
-                opacity: 1;
-                transform: translateY(0);
+                left: 100%;
             }
         }
 
-        .message-actions {
-            margin-top: 0.5rem;
-            display: flex;
-            gap: 0.5rem;
+        .thinking-steps div {
+            margin: 5px 0;
+            color: #666;
+        }
+
+        .loading-indicator {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 13px;
+        }
+
+        .loading-indicator div {
+            position: absolute;
+            top: 0;
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            background: #3b82f6;
+            animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        }
+
+        .loading-indicator div:nth-child(1) {
+            left: 8px;
+            animation: loading1 0.6s infinite;
+        }
+
+        .loading-indicator div:nth-child(2) {
+            left: 8px;
+            animation: loading2 0.6s infinite;
+        }
+
+        .loading-indicator div:nth-child(3) {
+            left: 32px;
+            animation: loading2 0.6s infinite;
+        }
+
+        .loading-indicator div:nth-child(4) {
+            left: 56px;
+            animation: loading3 0.6s infinite;
+        }
+
+        @keyframes loading1 {
+            0% {
+                transform: scale(0);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes loading3 {
+            0% {
+                transform: scale(1);
+            }
+            100% {
+                transform: scale(0);
+            }
+        }
+
+        @keyframes loading2 {
+            0% {
+                transform: translate(0, 0);
+            }
+            100% {
+                transform: translate(24px, 0);
+            }
         }
 
-        /* Modal styles */
         .modal {
             display: none;
             position: fixed;
@@ -186,26 +241,75 @@
             right: 0;
             bottom: 0;
             background-color: rgba(0, 0, 0, 0.5);
-            align-items: center;
-            justify-content: center;
             z-index: 1000;
+            justify-content: center;
+            align-items: center;
         }
 
         .modal-content {
             background-color: white;
             padding: 2rem;
             border-radius: 0.5rem;
+            max-width: 600px;
             width: 90%;
-            max-width: 500px;
+            max-height: 80vh;
+            overflow-y: auto;
         }
 
-        .modal textarea {
-            width: 100%;
-            min-height: 200px;
-            padding: 0.5rem;
-            margin: 1rem 0;
-            border: 1px solid #e5e7eb;
-            border-radius: 0.375rem;
+        pre[class*="language-"] {
+            direction: ltr;
+            text-align: left;
+            margin: 1em 0;
+            border-radius: 0.5rem;
+            padding: 1em;
+        }
+
+        .chat-input {
+            max-height: 60px;
+            min-height: 32px;
+        }
+
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message-actions {
+            margin-top: 0.5rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        main {
+            flex: 1;
+            padding-bottom: 180px; /* Increased padding to accommodate the input area */
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            padding: 1rem;
+            border-top: 1px solid #e5e7eb;
+            z-index: 50;
+        }
+
+        @media (max-width: 640px) {
+            .welcome-text {
+                font-size: 1.5rem;
+            }
+
+            .input-container {
+                padding: 0.5rem;
+            }
+
+            .style-select, .toggle-switch-container {
+                font-size: 0.8rem;
+            }
         }
     </style>
 </head>
@@ -221,6 +325,11 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                     </svg>
                 </a>
+                <a href="/chats" 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="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>
                 <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>
@@ -235,69 +344,70 @@
         </div>
     </header>
 
-    <main>
-        <div class="max-w-3xl mx-auto px-4 w-full flex flex-col flex-1">
+    <main class="pt-24">
+        <div class="max-w-3xl mx-auto px-4">
             <div class="welcome-text">سبيدي هنا لمساعدتك</div>
-            <div id="messagesContainer" class="messages-container space-y-4 flex-1"></div>
-            
-            <div class="input-container">
-                <div class="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"
-                        placeholder="اكتب رسالتك هنا..."
-                        rows="1"
-                    ></textarea>
-                    
-                    <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">
-                                    <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
-                                </svg>
-                            </button>
-                            <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="text-gray-400 hover:text-gray-600">
-                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                    <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">
-                                <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>
-                            </button>
-                        </div>
+            <div id="messagesContainer" class="space-y-4"></div>
+        </div>
+    </main>
 
-                        <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">
-                                <option value="short">⚡ ردود قصيرة</option>
-                                <option value="normal" selected>◯ عادي</option>
-                                <option value="long">↔ ردود مفصلة</option>
-                            </select>
+    <div class="input-container">
+        <div class="max-w-3xl mx-auto">
+            <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"
+                    placeholder="اك��ب رسالتك هنا..."
+                    rows="1"
+                ></textarea>
+                
+                <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">
+                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
+                            </svg>
+                        </button>
+                        <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="text-gray-400 hover:text-gray-600">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                                <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">
+                            <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>
+                        </button>
+                    </div>
 
-                            <div class="flex items-center gap-2 bg-gray-50 px-2 py-1 rounded-lg">
-                                <span class="text-gray-600">ذكاء متقدم</span>
-                                <div class="toggle-switch" id="aiToggle"></div>
-                            </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">
+                            <option value="short">⚡ ردود قصيرة</option>
+                            <option value="normal" selected>◯ عادي</option>
+                            <option value="long">↔ ردود مفصلة</option>
+                        </select>
 
-                            <button id="sendMessage" class="bg-black text-white px-3 py-1.5 rounded-lg flex items-center gap-2">
-                                إرسال
-                                <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                    <path d="M12 19V5M5 12l7-7 7 7"/>
-                                </svg>
-                            </button>
+                        <div class="flex items-center gap-2 bg-gray-50 px-2 py-1 rounded-lg">
+                            <span class="text-gray-600">ذكاء متقدم</span>
+                            <div class="toggle-switch" id="aiToggle"></div>
                         </div>
+
+                        <button id="sendMessage" class="bg-black text-white px-3 py-1.5 rounded-lg flex items-center gap-2">
+                            إرسال
+                            <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                                <path d="M12 19V5M5 12l7-7 7 7"/>
+                            </svg>
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
-    </main>
+    </div>
 
-    <!-- Edit Modal -->
     <div id="editModal" class="modal">
         <div class="modal-content">
-            <h2 class="text-lg font-bold mb-2">تعديل الرسالة</h2>
-            <textarea id="editText"></textarea>
+            <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>
@@ -306,7 +416,7 @@
     </div>
 
     <script>
-        const API_URL = 'https://rcqajr8r0ybgeb-7777.proxy.runpod.net/proxy/8000/chat';
+        const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
         const messagesContainer = document.getElementById('messagesContainer');
         const messageInput = document.getElementById('messageInput');
         const sendButton = document.getElementById('sendMessage');
@@ -314,7 +424,6 @@
         const styleSelect = document.getElementById('styleSelect');
         const darkModeToggle = document.getElementById('darkModeToggle');
         const aiToggle = document.getElementById('aiToggle');
-        const attachButton = document.getElementById('attachButton');
         const searchButton = document.getElementById('searchButton');
         const editModal = document.getElementById('editModal');
         const editText = document.getElementById('editText');
@@ -326,25 +435,6 @@
         let currentController = null;
         let isSearchEnabled = false;
         let currentEditMessageId = null;
-        let uploadedFiles = [];
-
-        async function handleFileUpload(file) {
-            const formData = new FormData();
-            formData.append('file', file);
-            
-            try {
-                const response = await fetch(`${API_URL}/upload`, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                uploadedFiles.push(data.filename);
-                return data.filename;
-            } catch (error) {
-                console.error('Error uploading file:', error);
-                return null;
-            }
-        }
 
         function formatCode(text) {
             const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
@@ -357,9 +447,14 @@
         function createThinkingSteps(messageId) {
             return `
                 <div id="${messageId}-thinking" class="thinking-steps">
-                    <div>1. تحليل السؤال وفهم المطلوب...</div>
-                    <div>2. جمع المعلومات ذات الصلة...</div>
-                    <div>3. صياغة إجابة شاملة ودقيقة...</div>
+                    <div>جاري التفكير وتحليل السؤال...</div>
+                    <div>معالجة المعلومات وتجهيز الإجابة...</div>
+                    <div class="loading-indicator">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
                 </div>
             `;
         }
@@ -491,21 +586,15 @@
                 currentController = new AbortController();
                 toggleSendButton(true);
 
-                const requestData = {
-                    message: actualMessage,
-                    history: chatHistory,
-                    advanced: aiToggle.classList.contains('active'),
-                    search: isSearchEnabled
-                };
-
-                if (uploadedFiles.length > 0) {
-                    requestData.files = uploadedFiles;
-                }
-
                 const response = await fetch(API_URL, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(requestData),
+                    body: JSON.stringify({
+                        message: actualMessage,
+                        history: chatHistory,
+                        advanced: aiToggle.classList.contains('active'),
+                        search: isSearchEnabled
+                    }),
                     signal: currentController.signal
                 });
 
@@ -522,8 +611,6 @@
                     human: actualMessage,
                     assistant: data.response
                 });
-
-                uploadedFiles = [];
             } catch (error) {
                 if (error.name === 'AbortError') {
                     document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
@@ -584,23 +671,6 @@
             }
         });
 
-        attachButton.addEventListener('click', () => {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = '*/*';
-            input.onchange = async (e) => {
-                const file = e.target.files[0];
-                if (file) {
-                    const filename = await handleFileUpload(file);
-                    if (filename) {
-                        messageInput.value += `\nملف مرفق: ${filename}`;
-                        adjustTextareaHeight();
-                    }
-                }
-            };
-            input.click();
-        });
-
         // Event listeners for buttons and inputs
         sendButton.addEventListener('click', sendMessage);
         messageInput.addEventListener('keypress', (e) => {
@@ -644,7 +714,6 @@
         clearButton.addEventListener('click', () => {
             messagesContainer.innerHTML = '';
             chatHistory = [];
-            uploadedFiles = [];
         });
 
         // Initial welcome message
@@ -652,51 +721,10 @@
         messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
         typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
 
-       // Initialize Prism.js
-       document.addEventListener('DOMContentLoaded', () => {
+        // Initialize Prism.js
+        document.addEventListener('DOMContentLoaded', () => {
             Prism.highlightAll();
         });
-
-        // Support for paste events
-        messageInput.addEventListener('paste', (e) => {
-            const files = e.clipboardData.files;
-            if (files.length > 0) {
-                e.preventDefault();
-                handleFileUpload(files[0]).then(filename => {
-                    if (filename) {
-                        messageInput.value += `\nملف مرفق: ${filename}`;
-                        adjustTextareaHeight();
-                    }
-                });
-            }
-        });
-
-        // Support for drag and drop
-        messageInput.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            messageInput.classList.add('dragover');
-        });
-
-        messageInput.addEventListener('dragleave', () => {
-            messageInput.classList.remove('dragover');
-        });
-
-        messageInput.addEventListener('drop', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            messageInput.classList.remove('dragover');
-            
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                handleFileUpload(files[0]).then(filename => {
-                    if (filename) {
-                        messageInput.value += `\nملف مرفق: ${filename}`;
-                        adjustTextareaHeight();
-                    }
-                });
-            }
-        });
     </script>
 </body>
 </html>