Spaces:

joermd
/

test22

Running

App Files Files Community

joermd commited on Jan 6

Commit

6746921

verified ·

1 Parent(s): bbf482a

Update index.html

Browse files

Files changed (1) hide show

index.html +310 -237

index.html CHANGED Viewed

@@ -53,6 +53,10 @@
             color: #e5e5e5;
         }
         .dark-mode .action-button {
             color: #e5e5e5;
             background-color: #404040;
@@ -152,6 +156,10 @@
                 transform: translateY(0);
             }
         }
     </style>
 </head>
 <body class="text-lg light-mode">
@@ -160,6 +168,21 @@
             <div class="flex items-center flex-1">
                 <span class="text-2xl font-bold text-indigo-600">Speedy</span>
             </div>
             <button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
                 <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>
@@ -200,6 +223,12 @@
                             <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">
                         <option value="short">⚡ ردود قصيرة</option>
                         <option value="normal" selected>◯ عادي</option>
@@ -209,249 +238,293 @@
             </div>
         </div>
     </footer>
-  <script>
-const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/8000/chat';
-const messagesContainer = document.getElementById('messagesContainer');
-const messageInput = document.getElementById('messageInput');
-const sendButton = document.getElementById('sendMessage');
-const clearButton = document.getElementById('clearChat');
-const styleSelect = document.getElementById('styleSelect');
-const darkModeToggle = document.getElementById('darkModeToggle');
-let chatHistory = [];
-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) {
-    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%]">
-                <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm">
-                    <p class="text-lg">${text}</p>
                 </div>
-            </div>
-        </div>
-    `;
-}
-function createBotMessage(text, messageId) {
-    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">
-            </div>
-            <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>
-                            </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">
-                                <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}">
-                            <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="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>
-                            </svg>
-                            أعجبني
-                        </button>
-                        <button class="action-button dislike-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="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>
-                            </svg>
-                            لم يعجبني
-                        </button>
                     </div>
                 </div>
-            </div>
-        </div>
-    `;
-}
-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));
-    }
-}
-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>
-        `;
-    } 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>
-            </svg>
-        `;
-    }
-}
-async function sendMessage() {
-    const message = messageInput.value.trim();
-    if (!message) return;
-    if (currentController) {
-        currentController.abort();
-        currentController = null;
-        toggleSendButton(false);
-        return;
-    }
-    messageInput.value = '';
-    adjustTextareaHeight();
-    const messageId = 'msg-' + Date.now();
-    let actualMessage = message;
-    if (currentStyle === 'short') {
-        actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
-    } else if (currentStyle === 'long') {
-        actualMessage = 'اعطني رد مفصل وموسع: ' + message;
-    }
-    messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
-    messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
-    scrollToBottom();
-    try {
-        currentController = new AbortController();
-        toggleSendButton(true);
-        const response = await fetch(API_URL, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                message: actualMessage,
-                history: chatHistory
-            }),
-            signal: currentController.signal
-        });
-        const data = await response.json();
-        await typeText(messageId, data.response);
-        chatHistory.push({
-            human: actualMessage,
-            assistant: data.response
         });
-    } catch (error) {
-        if (error.name === 'AbortError') {
-            document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
-        } else {
-            document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
         }
-    } finally {
-        currentController = null;
-        toggleSendButton(false);
-    }
-    scrollToBottom();
-}
-// Event Listeners for Message Actions
-document.addEventListener('click', async (e) => {
-    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);
-        e.target.closest('.copy-button').textContent = 'تم النسخ!';
-        setTimeout(() => {
-            e.target.closest('.copy-button').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 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
-                </svg>
-                نسخ
-            `;
-        }, 2000);
-    }
-    if (e.target.closest('.regenerate-button')) {
-        const messageId = e.target.closest('.regenerate-button').dataset.messageId;
-        // إعادة إرسال آخر رسالة في المحادثة
-        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('.dislike-button')) {
-        const button = e.target.closest('.dislike-button');
-        button.classList.toggle('text-red-500');
-    }
-});
-function scrollToBottom() {
-    window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
-    });
-}
-function adjustTextareaHeight() {
-    messageInput.style.height = 'auto';
-    messageInput.style.height = messageInput.scrollHeight + 'px';
-}
-sendButton.addEventListener('click', sendMessage);
-messageInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-    }
-});
-messageInput.addEventListener('input', adjustTextareaHeight);
-clearButton.addEventListener('click', () => {
-    messagesContainer.innerHTML = '';
-    chatHistory = [];
-});
-// Initial welcome message
-const initialMessageId = 'msg-initial';
-messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
-typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
-</script>
 </body>
 </html>

             color: #e5e5e5;
         }
+        .dark-mode .bot-message p {
+            color: #ffffff !important;
+        }
         .dark-mode .action-button {
             color: #e5e5e5;
             background-color: #404040;
                 transform: translateY(0);
             }
         }
+        #fileInput {
+            display: none;
+        }
     </style>
 </head>
 <body class="text-lg light-mode">
             <div class="flex items-center flex-1">
                 <span class="text-2xl font-bold text-indigo-600">Speedy</span>
             </div>
+            <a href="ufastpro.com" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
+                <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="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="/profile" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
+                <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>
+            <a href="https://joermd-mostasharak.static.hf.space" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
+                <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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2M6 7l-3-1m3 1l3 9a5.002 5.002 0 006.001 0M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9"></path>
+                </svg>
+            </a>
             <button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
                 <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>
                             <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>
+                    <input type="file" id="fileInput" multiple />
+                    <button id="fileButton" class="bg-blue-500 hover:bg-blue-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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
+                        </svg>
+                    </button>
                     <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">
                         <option value="short">⚡ ردود قصيرة</option>
                         <option value="normal" selected>◯ عادي</option>
             </div>
         </div>
     </footer>
+    <script>
+        // Previous JavaScript code remains the same until the file handling section
+        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/8000/chat';
+        const messagesContainer = document.getElementById('messagesContainer');
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendMessage');
+        const clearButton = document.getElementById('clearChat');
+        const styleSelect = document.getElementById('styleSelect');
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const fileInput = document.getElementById('fileInput');
+        const fileButton = document.getElementById('fileButton');
+        let chatHistory = [];
+        let currentStyle = 'normal';
+        let currentController = null;
+        // File handling
+        fileButton.addEventListener('click', () => {
+            fileInput.click();
+        });
+        // ... (previous code remains the same until the file handling event listener)
+        fileInput.addEventListener('change', async (e) => {
+            const files = Array.from(e.target.files);
+            const formData = new FormData();
+            files.forEach(file => {
+                formData.append('files', file);
+            });
+            try {
+                const response = await fetch(`${API_URL}/upload`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    throw new Error('File upload failed');
+                }
+                const data = await response.json();
+                // Create a message showing the uploaded files
+                const fileNames = files.map(file => file.name).join(', ');
+                messageInput.value = `تم رفع الملفات: ${fileNames}`;
+                sendMessage();
+                // Clear the file input
+                fileInput.value = '';
+            } catch (error) {
+                console.error('Error uploading files:', error);
+                messageInput.value = 'عذراً، حدث خطأ أثناء رفع الملفات.';
+                sendMessage();
+            }
+        });
+        // 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) {
+            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%]">
+                        <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm">
+                            <p class="text-lg">${text}</p>
+                        </div>
+                    </div>
                 </div>
+            `;
+        }
+        function createBotMessage(text, messageId) {
+            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">
+                    </div>
+                    <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>
+                                    </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">
+                                        <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}">
+                                    <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="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>
+                                    </svg>
+                                    أعجبني
+                                </button>
+                                <button class="action-button dislike-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="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>
+                                    </svg>
+                                    لم يعجبني
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
+            `;
+        }
+        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));
+            }
+        }
+        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>
+                `;
+            } 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>
+                    </svg>
+                `;
+            }
+        }
+        async function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+            if (currentController) {
+                currentController.abort();
+                currentController = null;
+                toggleSendButton(false);
+                return;
+            }
+            messageInput.value = '';
+            adjustTextareaHeight();
+            const messageId = 'msg-' + Date.now();
+            let actualMessage = message;
+            if (currentStyle === 'short') {
+                actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
+            } else if (currentStyle === 'long') {
+                actualMessage = 'اعطني رد مفصل وموسع: ' + message;
+            }
+            messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
+            messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
+            scrollToBottom();
+            try {
+                currentController = new AbortController();
+                toggleSendButton(true);
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        message: actualMessage,
+                        history: chatHistory
+                    }),
+                    signal: currentController.signal
+                });
+                const data = await response.json();
+                await typeText(messageId, data.response);
+                chatHistory.push({
+                    human: actualMessage,
+                    assistant: data.response
+                });
+            } catch (error) {
+                if (error.name === 'AbortError') {
+                    document.getElementById(messageId).textContent = 'تم إيقاف التوليد.';
+                } else {
+                    document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
+                }
+            } finally {
+                currentController = null;
+                toggleSendButton(false);
+            }
+            scrollToBottom();
+        }
+        // Event Listeners for Message Actions
+        document.addEventListener('click', async (e) => {
+            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);
+                e.target.closest('.copy-button').textContent = 'تم النسخ!';
+                setTimeout(() => {
+                    e.target.closest('.copy-button').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 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+                        </svg>
+                        نسخ
+                    `;
+                }, 2000);
+            }
+            if (e.target.closest('.regenerate-button')) {
+                const messageId = e.target.closest('.regenerate-button').dataset.messageId;
+                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('.dislike-button')) {
+                const button = e.target.closest('.dislike-button');
+                button.classList.toggle('text-red-500');
+            }
         });
+        function scrollToBottom() {
+            window.scrollTo({
+                top: document.documentElement.scrollHeight,
+                behavior: 'smooth'
+            });
         }
+        function adjustTextareaHeight() {
+            messageInput.style.height = 'auto';
+            messageInput.style.height = messageInput.scrollHeight + 'px';
         }
+        sendButton.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        messageInput.addEventListener('input', adjustTextareaHeight);
+        clearButton.addEventListener('click', () => {
+            messagesContainer.innerHTML = '';
+            chatHistory = [];
+        });
+        // Initial welcome message
+        const initialMessageId = 'msg-initial';
+        messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
+        typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
+    </script>
 </body>
 </html>