Update index.html

index.html

@@ -18,6 +18,9 @@
             line-height: 1.6;
             letter-spacing: -0.01em;
             transition: background-color 0.3s, color 0.3s;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
         
         body.light-mode {
@@ -35,11 +38,6 @@
             border-color: #404040;
         }
         
-        .dark-mode footer {
-            background-color: #2d2d2d;
-            border-color: #404040;
-        }
-        
         .dark-mode .message-input {
             background-color: #363636;
             border-color: #404040;
@@ -82,6 +80,25 @@
             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);
@@ -142,11 +159,25 @@
             font-size: 0.9em;
         }
 
-        .thinking-steps div {
-            margin: 5px 0;
-            color: #666;
+        .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;
         }
 
+        /* Modal styles */
         .modal {
             display: none;
             position: fixed;
@@ -155,45 +186,26 @@
             right: 0;
             bottom: 0;
             background-color: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
+            z-index: 1000;
         }
 
         .modal-content {
             background-color: white;
             padding: 2rem;
             border-radius: 0.5rem;
-            max-width: 600px;
             width: 90%;
-            max-height: 80vh;
-            overflow-y: auto;
+            max-width: 500px;
         }
 
-        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;
+        .modal textarea {
+            width: 100%;
+            min-height: 200px;
+            padding: 0.5rem;
+            margin: 1rem 0;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.375rem;
         }
     </style>
 </head>
@@ -209,11 +221,6 @@
                         <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>
@@ -228,17 +235,69 @@
         </div>
     </header>
 
-    <main class="pt-24 pb-24">
-        <div class="max-w-3xl mx-auto px-4">
+    <main>
+        <div class="max-w-3xl mx-auto px-4 w-full flex flex-col flex-1">
             <div class="welcome-text">سبيدي هنا لمساعدتك</div>
-            <div id="messagesContainer" class="space-y-4"></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 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="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>
         </div>
     </main>
 
+    <!-- Edit Modal -->
     <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>
+            <h2 class="text-lg font-bold mb-2">تعديل الرسالة</h2>
+            <textarea id="editText"></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>
@@ -246,59 +305,6 @@
         </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">
-                <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-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="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>
-    </footer>
-
     <script>
         const API_URL = 'https://975yry7ibyersz-7777.proxy.runpod.net/proxy/8000/chat';
         const messagesContainer = document.getElementById('messagesContainer');
@@ -308,6 +314,7 @@
         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');
@@ -319,6 +326,25 @@
         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;
@@ -465,15 +491,21 @@
                 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({
-                        message: actualMessage,
-                        history: chatHistory,
-                        advanced: aiToggle.classList.contains('active'),
-                        search: isSearchEnabled
-                    }),
+                    body: JSON.stringify(requestData),
                     signal: currentController.signal
                 });
 
@@ -490,6 +522,8 @@
                     human: actualMessage,
                     assistant: data.response
                 });
+
+                uploadedFiles = [];
             } catch (error) {
                 if (error.name === 'AbortError') {
                     document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
@@ -550,6 +584,23 @@
             }
         });
 
+        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) => {
@@ -593,6 +644,7 @@
         clearButton.addEventListener('click', () => {
             messagesContainer.innerHTML = '';
             chatHistory = [];
+            uploadedFiles = [];
         });
 
         // Initial welcome message
@@ -600,10 +652,51 @@
         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>