Update index.html

index.html

@@ -5,7 +5,6 @@
     <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/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <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');
@@ -51,52 +50,128 @@
         
         .dark-mode .bot-message {
             background-color: #363636;
+            color: #e5e5e5;
         }
 
-        .message-actions {
-            display: flex;
-            gap: 0.5rem;
-            margin-top: 0.5rem;
+        .dark-mode .action-button {
+            color: #e5e5e5;
+            background-color: #404040;
+        }
+        
+        .message-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
         }
 
-        .message-action-button {
-            padding: 0.25rem 0.75rem;
+        .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 {
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeIn 0.3s ease forwards;
+        }
+
+        .message p {
+            font-size: 1.05rem;
+            line-height: 1.7;
+        }
+
+        .bot-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        .action-button {
+            padding: 0.5rem;
             border-radius: 0.375rem;
-            font-size: 0.875rem;
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
             transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
             color: #6B7280;
+            background-color: #F3F4F6;
         }
 
-        .message-action-button:hover {
-            background-color: #F3F4F6;
+        .action-button:hover {
+            background-color: #E5E7EB;
         }
 
-        .dark-mode .message-action-button:hover {
-            background-color: #404040;
+        .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-generating {
-            display: none;
-            background-color: #EF4444;
-            color: white;
-            padding: 0.5rem 1rem;
-            border-radius: 0.375rem;
-            font-weight: 500;
-            transition: all 0.2s;
+        .stop-generation {
+            background-color: #EF4444 !important;
+            color: white !important;
         }
 
-        .stop-generating:hover {
-            background-color: #DC2626;
+        .message-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
         }
 
-        /* ... (باقي الأنماط كما هي) ... */
+        @media (max-width: 640px) {
+            .style-select {
+                width: 40px;
+                overflow: hidden;
+                white-space: nowrap;
+                padding-right: 0;
+                background-position: center;
+            }
+
+            .style-select option {
+                padding: 8px;
+            }
+        }
+
+        @keyframes typeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
     </style>
 </head>
 <body class="text-lg 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">
+                <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>
+                </svg>
+            </button>
+            <button id="clearChat" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full 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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                </svg>
+            </button>
+        </div>
+    </header>
 
     <main class="pt-24 pb-24">
         <div class="max-w-3xl mx-auto px-4">
@@ -120,179 +195,263 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                         </svg>
                     </button>
-                    <button id="stopGenerating" class="stop-generating">
-                        إيقاف التوليد
-                    </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">
+                        <option value="short">⚡ ردود قصيرة</option>
+                        <option value="normal" selected>◯ عادي</option>
+                        <option value="long">↔ ردود مفصلة</option>
+                    </select>
                 </div>
             </div>
         </div>
     </footer>
+  <script>
+const API_URL = 'https://xdran65ok359ef-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;
 
-    <script>
-        // ... (التعريفات الأساسية كما هي) ...
+// Dark mode toggle
+darkModeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    document.body.classList.toggle('light-mode');
+});
 
-        function createUserMessage(text) {
-            let prefix = '';
-            if (currentStyle === 'short') {
-                prefix = 'اعطني رد باختصار وسرعة: ';
-            } else if (currentStyle === 'long') {
-                prefix = 'اعطني رد مفصل وموسع: ';
-            }
-            
-            return `
-                <div class="message flex flex-col">
-                    <div class="flex justify-end">
-                        <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>
-                    <div class="message-actions justify-end">
-                        <button class="message-action-button">
-                            <i class="far fa-thumbs-up"></i>
-                            أعجبني
-                        </button>
-                        <button class="message-action-button">
-                            <i class="far fa-thumbs-down"></i>
-                            لم يعجبني
-                        </button>
-                    </div>
+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 flex-col">
-                    <div class="flex justify-start">
-                        <div class="flex-shrink-0 w-10 h-10 rounded-full overflow-hidden shadow-sm mt-1">
-                            <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="w-full h-full object-cover">
-                        </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>
-                        </div>
-                    </div>
-                    <div class="message-actions mr-13">
-                        <button class="message-action-button copy-message">
-                            <i class="far fa-copy"></i>
+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="message-action-button regenerate">
-                            <i class="fas fa-redo"></i>
+                        <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>
+    `;
+}
 
-        let isGenerating = false;
-        const stopGenerating = document.getElementById('stopGenerating');
-
-        async function sendMessage() {
-            const message = messageInput.value.trim();
-            if (!message || isGenerating) return;
-
-            messageInput.value = '';
-            adjustTextareaHeight();
-            isGenerating = true;
-            stopGenerating.style.display = 'block';
-
-            const messageId = 'msg-' + Date.now();
-            let actualMessage = message;
-            
-            if (currentStyle === 'short') {
-                actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
-            } else if (currentStyle === 'long') {
-                actualMessage = 'اعطني رد مفصل وموسع: ' + message;
-            }
+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));
+    }
+}
 
-            messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
-            messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
-            scrollToBottom();
-
-            try {
-                const response = await fetch(API_URL, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        message: actualMessage,
-                        history: chatHistory
-                    })
-                });
-
-                const data = await response.json();
-                await typeText(messageId, data.response);
-                
-                chatHistory.push({
-                    human: actualMessage,
-                    assistant: data.response
-                });
-            } catch (error) {
-                document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
-            } finally {
-                isGenerating = false;
-                stopGenerating.style.display = 'none';
-            }
-            scrollToBottom();
-        }
+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>
+        `;
+    }
+}
 
-        // إضافة مستمعي الأحداث للأزرار الجديدة
-        document.addEventListener('click', function(e) {
-            if (e.target.closest('.copy-message')) {
-                const messageText = e.target.closest('.message').querySelector('.bot-message p').textContent;
-                navigator.clipboard.writeText(messageText);
-                // يمكن إضافة إشعار هنا للتأكيد على النسخ
-            }
-            
-            if (e.target.closest('.regenerate')) {
-                const message = chatHistory[chatHistory.length - 1].human;
-                messageInput.value = message;
-                sendMessage();
-            }
+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
         });
 
-        stopGenerating.addEventListener('click', () => {
-            isGenerating = false;
-            stopGenerating.style.display = 'none';
-            // هنا يمكن إضافة منطق لإيقاف التوليد الفعلي
+        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);
+    }
     
-        function scrollToBottom() {
-            window.scrollTo({
-                top: document.documentElement.scrollHeight,
-                behavior: 'smooth'
-            });
+    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 adjustTextareaHeight() {
-            messageInput.style.height = 'auto';
-            messageInput.style.height = messageInput.scrollHeight + 'px';
-        }
+function scrollToBottom() {
+    window.scrollTo({
+        top: document.documentElement.scrollHeight,
+        behavior: 'smooth'
+    });
+}
 
-        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 = [];
-        });
+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>
+// Initial welcome message
+const initialMessageId = 'msg-initial';
+messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
+typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
+</script>
 </body>
 </html>