| | <!DOCTYPE html> |
| | <html lang="ar" dir="rtl"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Speedy Chat</title> |
| | <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
| | <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet"> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap'); |
| | @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
| | |
| | body { |
| | font-family: 'IBM Plex Sans Arabic', sans-serif; |
| | 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 { |
| | background-color: #fafafa; |
| | color: #374151; |
| | } |
| | |
| | body.dark-mode { |
| | background-color: #1a1a1a; |
| | color: #e5e5e5; |
| | } |
| | |
| | .dark-mode header { |
| | background-color: #2d2d2d; |
| | border-color: #404040; |
| | } |
| | |
| | .dark-mode footer { |
| | background-color: #2d2d2d; |
| | border-color: #404040; |
| | } |
| | |
| | .dark-mode .message-input { |
| | background-color: #363636; |
| | border-color: #404040; |
| | color: #e5e5e5; |
| | } |
| | |
| | .dark-mode .style-select { |
| | background-color: #363636; |
| | border-color: #404040; |
| | color: #e5e5e5; |
| | } |
| | |
| | .dark-mode .bot-message { |
| | background-color: #363636; |
| | color: #e5e5e5; |
| | } |
| | |
| | .dark-mode .action-button { |
| | color: #e5e5e5; |
| | background-color: #404040; |
| | } |
| | |
| | .dark-mode .modal-content { |
| | background-color: #2d2d2d; |
| | color: #e5e5e5; |
| | } |
| | |
| | .dark-mode .modal-content textarea { |
| | background-color: #363636; |
| | color: #e5e5e5; |
| | border-color: #404040; |
| | } |
| | |
| | .welcome-text { |
| | font-family: 'Noto Kufi Arabic', sans-serif; |
| | font-size: 2rem; |
| | 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; |
| | } |
| | |
| | .toggle-switch { |
| | width: 32px; |
| | height: 16px; |
| | background-color: #e5e7eb; |
| | border-radius: 999px; |
| | position: relative; |
| | cursor: pointer; |
| | transition: background-color 0.3s; |
| | } |
| | |
| | .toggle-switch::after { |
| | content: ''; |
| | position: absolute; |
| | top: 2px; |
| | right: 2px; |
| | width: 12px; |
| | height: 12px; |
| | background-color: white; |
| | border-radius: 50%; |
| | transition: transform 0.3s; |
| | } |
| | |
| | .toggle-switch.active { |
| | background-color: #3b82f6; |
| | } |
| | |
| | .toggle-switch.active::after { |
| | transform: translateX(-16px); |
| | } |
| | |
| | .action-button { |
| | padding: 0.25rem 0.5rem; |
| | border-radius: 0.375rem; |
| | transition: all 0.2s; |
| | display: inline-flex; |
| | align-items: center; |
| | gap: 0.25rem; |
| | font-size: 0.7rem; |
| | color: #6B7280; |
| | background-color: #F3F4F6; |
| | } |
| | |
| | .action-button:hover { |
| | background-color: #E5E7EB; |
| | } |
| | |
| | .thinking-steps { |
| | margin: 10px 0; |
| | padding: 10px; |
| | background-color: #f8f9fa; |
| | border-radius: 8px; |
| | font-size: 0.9em; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .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 shine { |
| | to { |
| | left: 100%; |
| | } |
| | } |
| | |
| | .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 { |
| | display: none; |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background-color: rgba(0, 0, 0, 0.5); |
| | z-index: 1000; |
| | justify-content: center; |
| | align-items: center; |
| | } |
| | |
| | .modal-content { |
| | background-color: white; |
| | padding: 2rem; |
| | border-radius: 0.5rem; |
| | max-width: 600px; |
| | width: 90%; |
| | max-height: 80vh; |
| | overflow-y: auto; |
| | } |
| | |
| | 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; |
| | } |
| | |
| | .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> |
| | <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> |
| | <div class="flex items-center gap-2"> |
| | <a href="/home" 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="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> |
| | </svg> |
| | </button> |
| | <button id="clearChat" 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="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> |
| | </div> |
| | </header> |
| |
|
| | <main class="pt-24"> |
| | <div class="max-w-3xl mx-auto px-4"> |
| | <div class="welcome-text">سبيدي هنا لمساعدتك</div> |
| | <div id="messagesContainer" class="space-y-4"></div> |
| | </div> |
| | </main> |
| |
|
| | <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-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> |
| |
|
| | <div id="editModal" class="modal"> |
| | <div class="modal-content"> |
| | <h2 class="text-xl font-bold mb-4">تعديل النص</h2> |
| | <textarea id="editText" class="w-full h-40 p-2 border rounded-lg mb-4"></textarea> |
| | <div class="flex justify-end gap-2"> |
| | <button id="cancelEdit" class="px-4 py-2 bg-gray-200 rounded-lg">إلغاء</button> |
| | <button id="saveEdit" class="px-4 py-2 bg-black text-white rounded-lg">حفظ</button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | 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'); |
| | const clearButton = document.getElementById('clearChat'); |
| | const styleSelect = document.getElementById('styleSelect'); |
| | const darkModeToggle = document.getElementById('darkModeToggle'); |
| | const aiToggle = document.getElementById('aiToggle'); |
| | const searchButton = document.getElementById('searchButton'); |
| | const editModal = document.getElementById('editModal'); |
| | const editText = document.getElementById('editText'); |
| | const saveEdit = document.getElementById('saveEdit'); |
| | const cancelEdit = document.getElementById('cancelEdit'); |
| | |
| | let chatHistory = []; |
| | let currentStyle = 'normal'; |
| | let currentController = null; |
| | let isSearchEnabled = false; |
| | let currentEditMessageId = null; |
| | |
| | function formatCode(text) { |
| | const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g; |
| | return text.replace(codeBlockRegex, (match, lang, code) => { |
| | const language = lang || 'plaintext'; |
| | return `<pre><code class="language-${language}">${code.trim()}</code></pre>`; |
| | }); |
| | } |
| | |
| | function createThinkingSteps(messageId) { |
| | return ` |
| | <div id="${messageId}-thinking" class="thinking-steps"> |
| | <div>جاري التفكير وتحليل السؤال...</div> |
| | <div>معالجة المعلومات وتجهيز الإجابة...</div> |
| | <div class="loading-indicator"> |
| | <div></div> |
| | <div></div> |
| | <div></div> |
| | <div></div> |
| | </div> |
| | </div> |
| | `; |
| | } |
| | |
| | function createUserMessage(text) { |
| | return ` |
| | <div class="message flex justify-end mb-4"> |
| | <div class="max-w-[80%]"> |
| | <div class="bg-black text-white rounded-lg p-3 shadow-sm"> |
| | <p class="text-sm">${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="w-8 h-8 rounded-full"> |
| | </div> |
| | <div class="max-w-[80%] mr-3"> |
| | <div class="bot-message bg-white rounded-lg p-3 shadow-sm"> |
| | <p id="${messageId}" class="text-sm"></p> |
| | <div class="message-actions"> |
| | <button class="action-button copy-button" data-message-id="${messageId}"> |
| | <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path> |
| | </svg> |
| | نسخ |
| | </button> |
| | <button class="action-button speak-button" data-message-id="${messageId}"> |
| | <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path> |
| | </svg> |
| | قراءة |
| | </button> |
| | <button class="action-button edit-button" data-message-id="${messageId}"> |
| | <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path> |
| | </svg> |
| | تعديل |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | } |
| | |
| | async function typeText(elementId, text) { |
| | const element = document.getElementById(elementId); |
| | element.innerHTML = formatCode(text); |
| | Prism.highlightAllUnder(element); |
| | } |
| | |
| | function speakText(text) { |
| | const utterance = new SpeechSynthesisUtterance(text); |
| | utterance.lang = 'ar'; |
| | speechSynthesis.speak(utterance); |
| | } |
| | |
| | function openEditModal(messageId) { |
| | const messageElement = document.getElementById(messageId); |
| | editText.value = messageElement.textContent; |
| | editModal.style.display = 'flex'; |
| | currentEditMessageId = messageId; |
| | } |
| | |
| | function closeEditModal() { |
| | editModal.style.display = 'none'; |
| | currentEditMessageId = null; |
| | } |
| | |
| | function toggleSendButton(isGenerating) { |
| | if (isGenerating) { |
| | sendButton.classList.add('stop-generation'); |
| | sendButton.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="M6 18L18 6M6 6l12 12"></path> |
| | </svg> |
| | إيقاف |
| | `; |
| | } else { |
| | sendButton.classList.remove('stop-generation'); |
| | sendButton.innerHTML = ` |
| | إرسال |
| | <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> |
| | `; |
| | } |
| | } |
| | |
| | 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)); |
| | |
| | if (aiToggle.classList.contains('active')) { |
| | document.getElementById(messageId).insertAdjacentHTML('beforebegin', createThinkingSteps(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, |
| | advanced: aiToggle.classList.contains('active'), |
| | search: isSearchEnabled |
| | }), |
| | signal: currentController.signal |
| | }); |
| | |
| | const data = await response.json(); |
| | |
| | const thinkingSteps = document.getElementById(`${messageId}-thinking`); |
| | if (thinkingSteps) { |
| | thinkingSteps.remove(); |
| | } |
| | |
| | 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(); |
| | } |
| | |
| | function adjustTextareaHeight() { |
| | messageInput.style.height = 'auto'; |
| | messageInput.style.height = Math.min(messageInput.scrollHeight, 60) + 'px'; |
| | } |
| | |
| | function scrollToBottom() { |
| | window.scrollTo({ |
| | top: document.documentElement.scrollHeight, |
| | behavior: 'smooth' |
| | }); |
| | } |
| | |
| | |
| | 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); |
| | const button = e.target.closest('.copy-button'); |
| | button.innerHTML = ` |
| | <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | تم النسخ! |
| | `; |
| | setTimeout(() => { |
| | button.innerHTML = ` |
| | <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"></path> |
| | </svg> |
| | نسخ |
| | `; |
| | }, 2000); |
| | } |
| | |
| | if (e.target.closest('.speak-button')) { |
| | const messageId = e.target.closest('.speak-button').dataset.messageId; |
| | const text = document.getElementById(messageId).textContent; |
| | speakText(text); |
| | } |
| | |
| | if (e.target.closest('.edit-button')) { |
| | const messageId = e.target.closest('.edit-button').dataset.messageId; |
| | openEditModal(messageId); |
| | } |
| | }); |
| | |
| | |
| | sendButton.addEventListener('click', sendMessage); |
| | messageInput.addEventListener('keypress', (e) => { |
| | if (e.key === 'Enter' && !e.shiftKey) { |
| | e.preventDefault(); |
| | sendMessage(); |
| | } |
| | }); |
| | messageInput.addEventListener('input', adjustTextareaHeight); |
| | |
| | saveEdit.addEventListener('click', () => { |
| | if (currentEditMessageId) { |
| | const messageElement = document.getElementById(currentEditMessageId); |
| | messageElement.innerHTML = formatCode(editText.value); |
| | Prism.highlightAllUnder(messageElement); |
| | } |
| | closeEditModal(); |
| | }); |
| | |
| | cancelEdit.addEventListener('click', closeEditModal); |
| | |
| | searchButton.addEventListener('click', () => { |
| | isSearchEnabled = !isSearchEnabled; |
| | searchButton.classList.toggle('active'); |
| | messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا..."; |
| | }); |
| | |
| | darkModeToggle.addEventListener('click', () => { |
| | document.body.classList.toggle('dark-mode'); |
| | document.body.classList.toggle('light-mode'); |
| | }); |
| | |
| | aiToggle.addEventListener('click', function() { |
| | this.classList.toggle('active'); |
| | }); |
| | |
| | styleSelect.addEventListener('change', (e) => { |
| | currentStyle = e.target.value; |
| | }); |
| | |
| | clearButton.addEventListener('click', () => { |
| | messagesContainer.innerHTML = ''; |
| | chatHistory = []; |
| | }); |
| | |
| | |
| | const initialMessageId = 'msg-initial'; |
| | messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId)); |
| | typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟'); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | Prism.highlightAll(); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
