Update index.html

index.html

@@ -114,6 +114,14 @@
         .message-content {
             padding: 10px 15px; border-radius: 20px;
         }
+        .message-content a {
+            color: var(--eye-color);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .message-content a:hover {
+            text-decoration: underline;
+        }
 
         @keyframes popIn { to { opacity: 1; transform: translateY(0); } }
 
@@ -223,12 +231,43 @@
             width: 50px; height: 90px; background-color: #111;
             border-radius: 25px; margin-left: 10px; position: relative;
             overflow: hidden; display: flex; justify-content: center;
-            align-items: center; cursor: grab;
+            align-items: flex-start;
+            cursor: grab;
+        }
+        
+        /* --- انیمیشن جدید راهنما --- */
+        #send-button-container::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 70%;
+            height: 4px;
+            background: var(--eye-color);
+            border-radius: 4px;
+            box-shadow: 0 0 8px var(--eye-color), 0 0 16px var(--eye-color);
+            top: -20px;
+            opacity: 0;
+            animation: swipe-glow 2.5s ease-in-out infinite;
+            animation-delay: 1s;
+        }
+
+        #input-area.typing #send-button-container::after {
+            animation: none;
+            display: none;
         }
 
+        @keyframes swipe-glow {
+            0% { top: 10px; opacity: 0; }
+            40% { opacity: 0.7; }
+            80% { top: 70px; opacity: 0; }
+            100% { top: 70px; opacity: 0; }
+        }
+
+
         #send-button {
             width: 40px; height: 40px; background-color: var(--eye-color);
-            border-radius: 50%; position: absolute; top: 25px;
+            border-radius: 50%; position: absolute; top: 10px;
             display: flex; justify-content: center; align-items: center;
             transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
@@ -279,7 +318,7 @@
             <div id="input-area">
                 <div id="send-button-container">
                     <div id="send-button">
-                        <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M19 12l-7-7-7 7"/></svg>
+                        <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m7-7l-7 7-7-7"/></svg>
                     </div>
                 </div>
                 <textarea id="message-input" placeholder="بگو ببینم دیگه چی میخوای !؟" rows="1"></textarea>
@@ -396,9 +435,10 @@ class ChatInterface {
         this.robotFace = robotFace;
         this.chatContainer = document.getElementById('chat-container');
         this.input = document.getElementById('message-input');
+        this.inputArea = document.getElementById('input-area');
         this.sendButtonContainer = document.getElementById('send-button-container');
         this.sendButton = document.getElementById('send-button');
-        this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30;
+        this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 50;
         this.API_URL = 'https://text.pollinations.ai/openai';
 
         const SYSTEM_PROMPT = `
@@ -433,7 +473,15 @@ class ChatInterface {
     }
 
     initListeners() {
-        this.input.addEventListener('input', () => { this.input.style.height = 'auto'; this.input.style.height = (this.input.scrollHeight) + 'px'; });
+        this.input.addEventListener('input', () => { 
+            this.input.style.height = 'auto'; 
+            this.input.style.height = (this.input.scrollHeight) + 'px'; 
+            if (this.input.value.trim() !== '') {
+                this.inputArea.classList.add('typing');
+            } else {
+                this.inputArea.classList.remove('typing');
+            }
+        });
         this.input.addEventListener('focus', () => {
             this.robotFace.isWatchingInput = true; this.robotFace.wakeUp();
             setTimeout(() => { document.getElementById('input-area').scrollIntoView({ behavior: 'smooth', block: 'end' }); }, 300);
@@ -456,16 +504,17 @@ class ChatInterface {
         if (!this.isDragging) return; e.preventDefault();
         const y = e.pageY || e.touches?.[0]?.pageY;
         let diff = y - this.startY; if (diff < 0) diff = 0;
-        const maxDrag = this.sendButtonContainer.offsetHeight - this.sendButton.offsetHeight - 10;
+        const maxDrag = this.sendButtonContainer.offsetHeight - this.sendButton.offsetHeight - 5;
         if (diff > maxDrag) diff = maxDrag;
-        this.currentY = diff; this.sendButton.style.top = `${25 + this.currentY}px`;
+        this.currentY = diff;
+        this.sendButton.style.top = `${10 + this.currentY}px`;
     }
     dragEnd() {
         if (!this.isDragging) return;
         this.isDragging = false; this.sendButton.classList.remove('dragging');
         this.sendButtonContainer.style.cursor = 'grab';
         if (this.currentY > this.dragThreshold) { this.sendMessage(this.input.value); }
-        this.sendButton.style.top = '25px'; this.currentY = 0;
+        this.sendButton.style.top = '10px'; this.currentY = 0;
     }
     
     async sendMessage(messageText) {
@@ -475,6 +524,7 @@ class ChatInterface {
         this.addMessage(text, 'user');
         this.conversationHistory.push({ role: 'user', content: text });
         this.input.value = ''; this.input.style.height = 'auto';
+        this.inputArea.classList.remove('typing');
         
         this.robotFace.startThinking();
         const thinkingBubble = this.addMessage('...', 'bot', true);
@@ -517,25 +567,36 @@ class ChatInterface {
         
         const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
         const buttonRegex = /\[button:(.*?)\]/g;
+        const markdownLinkRegex = /\[(.*?)\]\((.*?)\)/g;
         let buttonsHtml = '';
 
-        const processedText = text.replace(buttonRegex, (match, buttonText) => {
+        let processedText = text.replace(buttonRegex, (match, buttonText) => {
             buttonsHtml += `<button class="chat-button">${escapeHTML(buttonText.trim())}</button>`;
             return '';
         });
 
-        let contentHtml = processedText.replace(codeBlockRegex, (match, lang, code) => {
+        let contentHtml = '';
+        let lastIndex = 0;
+
+        // Create a temporary container to parse the text and handle nested elements
+        const tempDiv = document.createElement('div');
+        tempDiv.innerText = processedText; // Safely set text content first
+        
+        // Now process for links and code blocks
+        let processedHtml = tempDiv.innerHTML.replace(markdownLinkRegex, '<a href="$2" target="_blank">$1</a>');
+
+        processedHtml = processedHtml.replace(codeBlockRegex, (match, lang, code) => {
             const uniqueId = `code-${Date.now()}-${Math.random()}`;
-            return `<div class="code-block-wrapper">
+            return `</div><div class="code-block-wrapper">
                         <div class="code-block-header">
                             <button class="copy-code-btn" data-target="${uniqueId}">کپی</button>
                         </div>
                         <pre><code id="${uniqueId}">${escapeHTML(code.trim())}</code></pre>
-                    </div>`;
+                    </div><div class="message-content">`;
         });
         
         bubble.innerHTML = `
-            <div class="message-content">${contentHtml.trim()}</div>
+            <div class="message-content">${processedHtml.trim()}</div>
             ${buttonsHtml ? `<div class="interactive-buttons">${buttonsHtml}</div>` : ''}
         `;