Create chat.js

static/js/ui/chat.js

@@ -0,0 +1,752 @@
+// static/js/ui/chat.js
+
+import * as state from '../state.js';
+import * as db from '../db.js';
+import { dom } from './dom.js';
+import { toggleHtmlPreviewModal, toggleSidebar } from './modals.js';
+import { createDeepThinkPanel, createReasoningPanel, hideDeepThinkPanel, hideReasoningPanel, updateDeepThinkPanel, updateReasoningPanel } from './tools.js';
+
+export const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTc1NDIyNGVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991';
+
+const MAX_TEXTAREA_HEIGHT = 150;
+export let minTextareaHeight = 0;
+
+const atomIconSVG = `<svg class="thinking-atom-icon w-5 h-5" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="chatbot-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#3b82f6;" /><stop offset="100%" style="stop-color:#8b5cf6;" /></linearGradient></defs><g><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="8s" repeatCount="indefinite"/><g stroke-width="8" stroke-linecap="round"><circle cx="50" cy="50" r="10" fill="url(#chatbot-gradient)" stroke="none"/><g fill="none" stroke="url(#chatbot-gradient)"><ellipse cx="50" cy="50" rx="22" ry="45"/><ellipse cx="50" cy="50" rx="45" ry="22"/></g></g></g></svg>`;
+const robotIconInBubbleSVG = `<div class="model-icon-in-bubble"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.5 14.5L2 12l7.5-2.5L12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5z"></path></svg></div>`;
+
+window.toggleThinkingPanel = function(headElement) {
+    const wrapper = headElement.closest('.thinking-panel-wrapper');
+    const body = wrapper.querySelector('.thinking-body');
+    const chevron = headElement.querySelector('.thinking-chevron');
+    if (body && chevron) {
+        body.classList.toggle('collapsed');
+        chevron.classList.toggle('collapsed');
+    }
+};
+
+export function startThinking(modelBubbleOuterDivElement) {
+    const contentArea = modelBubbleOuterDivElement?.querySelector('.message-content');
+    if (!contentArea) return;
+
+    const modelContent = `
+        <div class="thinking-header-area">
+            ${robotIconInBubbleSVG}
+            <div class="thinking-panel-wrapper">
+                <div class="thinking-head" onclick="toggleThinkingPanel(this)">
+                    ${atomIconSVG}
+                    <span class="thinking-label">افکار</span>
+                    <svg class="thinking-chevron collapsed w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
+                </div>
+                <div class="thinking-body collapsed custom-scrollbar whitespace-pre-wrap"></div>
+            </div>
+        </div>
+        <div class="final-answer-wrapper"></div>
+    `;
+    contentArea.innerHTML = modelContent;
+}
+
+export function streamThought(text, modelBubbleOuterDivElement) {
+    const thinkingBody = modelBubbleOuterDivElement.querySelector('.thinking-body');
+    if (!thinkingBody) return;
+    
+    const existingContent = thinkingBody.innerHTML;
+    const newContent = DOMPurify.sanitize(marked.parse(thinkingBody.textContent + text, { breaks: true, gfm: true }));
+    thinkingBody.innerHTML = newContent;
+    
+    thinkingBody.scrollTop = thinkingBody.scrollHeight;
+}
+
+function isScrolledToBottom() {
+    const { chatWindow } = dom;
+    const scrollThreshold = 15;
+    return chatWindow.scrollHeight - chatWindow.clientHeight <= chatWindow.scrollTop + scrollThreshold;
+}
+
+export function escapeHTML(str) {
+    const p = document.createElement("p");
+    p.textContent = str;
+    return p.innerHTML;
+}
+
+function getFileIcon(mimeType) {
+    if (mimeType.startsWith('image/')) return '🖼️';
+    if (mimeType.startsWith('video/')) return '🎬';
+    if (mimeType.startsWith('audio/')) return '🎵';
+    if (mimeType.startsWith('application/pdf')) return '📄';
+    if (mimeType.startsWith('text/')) return '📝';
+    return '📁';
+}
+
+export function hideFilePreview() {
+    dom.imagePreviewContainer.classList.add('hidden');
+    dom.imagePreview.src = '';
+    dom.fileInfoText.innerHTML = '';
+    dom.imageFileInput.value = '';
+    dom.generalFileInput.value = '';
+}
+
+export function showFileUploading(fileName) {
+    dom.imagePreview.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='animate-spin' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707'/%3E%3C/svg%3E`;
+    dom.fileInfoText.innerHTML = `<div class='flex flex-col'><span class='font-semibold'>${escapeHTML(fileName)}</span><div class='text-xs text-slate-500 dark:text-slate-400'>در حال آپلود... <span class='upload-progress'>0%</span></div></div>`;
+    dom.imagePreviewContainer.classList.remove('hidden');
+}
+
+export function showFileReady(fileName, mimeType, url) {
+    const icon = getFileIcon(mimeType);
+    if(mimeType.startsWith('image/')) {
+        dom.imagePreview.src = url;
+    } else {
+        dom.imagePreview.src = `data:image/svg+xml,%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%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'%3E%3C/path%3E%3Cpolyline points='13 2 13 9 20 9'%3E%3C/polyline%3E%3C/svg%3E`;
+    }
+    dom.fileInfoText.innerHTML = `<div class='flex flex-col'><span class='font-semibold'>${icon} ${escapeHTML(fileName)}</span><span class='text-xs text-green-600 dark:text-green-500'>فایل برای ارسال آماده است.</span></div>`;
+    dom.imagePreviewContainer.classList.remove('hidden');
+}
+
+export function showFileError(errorMessage) {
+    dom.imagePreview.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E`;
+    dom.fileInfoText.innerHTML = `<div class='flex flex-col'><span class='font-semibold text-red-600'>خطا در آپلود</span><span class='text-xs text-red-500'>${escapeHTML(errorMessage)}</span></div>`;
+    dom.imagePreviewContainer.classList.remove('hidden');
+    setTimeout(hideFilePreview, 5000);
+}
+
+export function handleSuggestionClick(text) {
+    dom.messageInput.value = text;
+    dom.messageInput.dispatchEvent(new Event('input', { bubbles: true }));
+    dom.messageInput.focus();
+}
+
+export function runWelcomeAnimation() {
+    const chatbotNameContainer = document.querySelector('.chatbot-name');
+    const mainTitle = document.querySelector('.main-title');
+    const suggestionsContainer = document.querySelector('.suggestions-container');
+    if (!chatbotNameContainer || !mainTitle || !suggestionsContainer) return;
+    
+    const textToType = "چت بات آلفا";
+    let charIndex = 0;
+    const typingSpeed = 90;
+
+    function typeChatbotName() {
+        if (charIndex < textToType.length) {
+            chatbotNameContainer.textContent += textToType.charAt(charIndex);
+            charIndex++;
+            setTimeout(typeChatbotName, typingSpeed);
+        } else {
+            chatbotNameContainer.style.opacity = '1';
+            setTimeout(() => { mainTitle.style.opacity = '1'; }, 300);
+            setTimeout(() => { suggestionsContainer.style.opacity = '1'; suggestionsContainer.style.transform = 'translateY(0)'; }, 600);
+        }
+    }
+    chatbotNameContainer.textContent = '';
+    typeChatbotName();
+}
+
+export function setupCodeBlockActions(container) {
+    container.querySelectorAll('pre').forEach(preElement => {
+        preElement.setAttribute('dir', 'ltr');
+
+        if (preElement.querySelector('.code-button-container')) return;
+        const codeElement = preElement.querySelector('code');
+        if (!codeElement) return;
+
+        hljs.highlightElement(codeElement);
+        
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'code-button-container';
+
+        const copyButton = document.createElement('button');
+        copyButton.className = 'code-button';
+        copyButton.innerHTML = `<span class="copy-text">کپی</span>`;
+        const copyTextSpan = copyButton.querySelector('.copy-text');
+
+        copyButton.onclick = () => {
+            navigator.clipboard.writeText(codeElement.innerText).then(() => {
+                copyTextSpan.textContent = 'کپی شد!';
+                copyButton.style.backgroundColor = '#4CAF50';
+                setTimeout(() => {
+                    copyTextSpan.textContent = 'کپی';
+                    copyButton.style.backgroundColor = '';
+                }, 2000);
+            });
+        };
+        buttonContainer.appendChild(copyButton);
+
+        const languageClass = Array.from(codeElement.classList).find(cls => cls.startsWith('language-'));
+        if (languageClass === 'language-html') {
+            const runButton = document.createElement('button');
+            runButton.className = 'code-button';
+            runButton.innerHTML = `<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg><span>اجرا</span>`;
+            runButton.onclick = () => { toggleHtmlPreviewModal(true, codeElement.innerText); };
+            buttonContainer.appendChild(runButton);
+        }
+        
+        preElement.appendChild(buttonContainer);
+    });
+}
+
+export function renderHistoryList() {
+    dom.historyList.innerHTML = '';
+    const chatsToDisplay = state.chatSessions.filter(session => session.messages.length > 0 || session.id === state.activeChatId);
+    if (chatsToDisplay.length > 0) {
+        chatsToDisplay.forEach((session) => {
+            const itemContainer = document.createElement('div');
+            itemContainer.className = 'history-item flex items-center justify-between rounded-lg';
+            const itemLink = document.createElement('a');
+            itemLink.href = '#';
+            itemLink.className = `flex-grow p-3 truncate transition-colors rounded-lg ${session.id === state.activeChatId ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold' : 'hover:bg-slate-200/60 dark:hover:bg-slate-700/60 text-slate-700 dark:text-slate-300'}`;
+            itemLink.textContent = session.title;
+            itemLink.onclick = (e) => { e.preventDefault(); state.setActiveChatId(session.id); renderActiveChat(); renderHistoryList(); toggleSidebar(false); };
+            const menuButton = document.createElement('button');
+            menuButton.className = 'history-item-button p-2 ml-1 text-slate-500 dark:text-slate-400 hover:bg-slate-200/80 dark:hover:bg-slate-700/80 rounded-full flex-shrink-0';
+            menuButton.innerHTML = '<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg>';
+            menuButton.onclick = (e) => {
+                import('./modals.js').then(modals => modals.showHistoryMenu(e, session.id));
+            };
+            itemContainer.appendChild(itemLink);
+            itemContainer.appendChild(menuButton);
+            dom.historyList.appendChild(itemContainer);
+        });
+    }
+}
+
+export async function renderActiveChat() {
+    dom.chatWindow.innerHTML = '';
+    const activeChat = state.getActiveChat();
+
+    if (activeChat && activeChat.messages.length === 0) {
+        dom.chatWindow.innerHTML = `
+        <div class="welcome-screen">
+            <div class="welcome-container">
+                <div class="chatbot-name"></div>
+                <h1 class="main-title">چطور می‌توانم به شما کمک کنم؟</h1>
+                
+                <div class="suggestions-container">
+                    <button class="suggestion-button" onclick="handleSuggestionClick('یک برنامه بنویس برای ')">
+                        <span>برنامه بچین</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2196F3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('بهم مشاوره بده در مورد ')">
+                        <span>مشاوره بده</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2v-5"></path></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('این تصویر رو آنالیز کن')">
+                        <span>آنالیز تصاویر</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#673AB7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('سورپرایزم کن')">
+                        <span>سورپرایزم کن</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#009688" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('تحلیل کن ')">
+                        <span>تحلیل کن</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#009688" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"></path><path d="M18 20V4"></path><path d="M6 20V16"></path></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('کمک کن بنویسم در مورد ')">
+                        <span>کمک کن بنویسم</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#E91E63" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"></path><path d="m19 12-7-7"></path></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('خلاصه متن ')">
+                        <span>خلاصه کن</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF9800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h13"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M3 6h.01"></path><path d="M3 12h.01"></path><path d="M3 18h.01"></path></svg>
+                    </button>
+                    <button class="suggestion-button" onclick="handleSuggestionClick('ایده بده در مورد ')">
+                        <span>ایده بده</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><line x1="9.7" y1="17" x2="14.3" y2="17" /></svg>
+                    </button>
+                </div>
+            </div>
+        </div>`;
+        runWelcomeAnimation();
+    } else if (activeChat && activeChat.messages.length > 0) {
+        const lastMessageIndex = activeChat.messages.length - 1;
+        const lastUserMessageIndex = state.findLastIndex(activeChat.messages, msg => msg.role === 'user');
+        
+        for (const [index, msg] of activeChat.messages.entries()) {
+            if (msg.isTemporary) continue;
+            const isLastUser = (index === lastUserMessageIndex);
+            const isLastModel = (index === lastMessageIndex && msg.role === 'assistant');
+            await addMessageToUI(msg, index, { isLastUser, isLastModel, animate: false });
+        }
+    }
+
+    requestAnimationFrame(() => { dom.chatWindow.scrollTop = dom.chatWindow.scrollHeight; });
+}
+
+export function createMessageActionsHtml(options) {
+    const { role, isLastUser, isLastModel, messageObject } = options;
+    let buttonsHtml = '';
+    const textContent = messageObject?.parts.find(p => p.text)?.text;
+    const copyButtonHtml = `<button data-action="copy" title="کپی" class="action-button relative"><svg class="w-4 h-4 copy-icon" fill="currentColor" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/></svg><svg class="w-4 h-4 check-icon hidden text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg><span class="copy-feedback">کپی شد!</span></button>`;
+    const menuButtonHtml = `<button data-action="show-message-menu" title="گزینه‌های بیشتر" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></button>`;
+
+    if (role === 'user') {
+        if (textContent) {
+            buttonsHtml += copyButtonHtml;
+        }
+        if (isLastUser && textContent) {
+            buttonsHtml += `<button data-action="edit" title="ویرایش" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>`;
+        }
+        buttonsHtml += menuButtonHtml;
+    }
+
+    if (role === 'assistant') {
+        const hasTextContent = messageObject?.parts.some(p => p.text);
+        const isClarification = !!messageObject?.clarification;
+        const isGpuGuide = !!messageObject?.isGpuGuide;
+        
+        if (hasTextContent) {
+            buttonsHtml += `<button data-action="speak" title="پخش صدا" class="action-button">
+                <svg class="w-4 h-4 speak-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M8.25 3.75a.75.75 0 00-1.5 0v12.5a.75.75 0 001.5 0V3.75zM11.75 3.75a.75.75 0 00-1.5 0v12.5a.75.75 0 001.5 0V3.75zM4 6a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0V6.75A.75.75 0 014 6zM16 6a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0V6.75A.75.75 0 0116 6z"></path></svg>
+                <svg class="w-4 h-4 pause-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M5.75 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75zM14.25 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75z"></path></svg>
+                <div class="loading-spinner"></div>
+            </button>`;
+            buttonsHtml += copyButtonHtml;
+        }
+        
+        if (isLastModel && !isClarification && !isGpuGuide) {
+            buttonsHtml += `<button data-action="regenerate" title="تولید مجدد" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg></button>`;
+        }
+        
+        if (hasTextContent && !isClarification && !isGpuGuide) {
+             buttonsHtml += `<button data-action="like" title="پسندیدم" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></button><button data-action="dislike" title="نپسندیدم" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14-.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41-.17-.79-.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg></button>`;
+        }
+        buttonsHtml += menuButtonHtml;
+    }
+    return buttonsHtml ? `<div class="message-actions"><div class="flex items-center gap-1.5">${buttonsHtml}</div></div>` : '';
+}
+
+
+function createFileContentHtml(filePart) {
+    const { fileUrl, mimeType, name } = filePart;
+    let fileHtml = '';
+
+    if (!fileUrl) {
+        return `<div class="p-3 text-red-500">خطا: فایل برای نمایش یافت نشد.</div>`;
+    }
+
+    if (mimeType.startsWith('image/')) {
+        fileHtml = `<img src="${fileUrl}" alt="${escapeHTML(name) || 'Uploaded image'}">`;
+    } else if (mimeType.startsWith('video/')) {
+        fileHtml = `<video controls src="${fileUrl}"></video>`;
+    } else if (mimeType.startsWith('audio/')) {
+        fileHtml = `<audio controls src="${fileUrl}" class="w-full"></audio>`;
+    } else {
+        fileHtml = `<div class="flex items-center gap-3 p-3 bg-slate-100 dark:bg-slate-700/50 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-200 text-sm">
+                        <svg class="w-8 h-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
+                        <div class="flex flex-col overflow-hidden">
+                            <span class="font-semibold truncate">${escapeHTML(name)}</span>
+                            <a href="${fileUrl}" target="_blank" rel="noopener noreferrer" class="text-xs text-blue-600 hover:underline">دانلود فایل</a>
+                        </div>
+                    </div>`;
+    }
+    return fileHtml;
+}
+
+export async function addMessageToUI(message, index, options = {}, existingElement = null) {
+    const { role, parts } = message;
+    const { isLastUser = false, isLastModel = false, animate = true } = options;
+    const isUser = role === 'user';
+
+    let finalElement = existingElement;
+
+    if (!finalElement) {
+        finalElement = document.createElement('div');
+        const roleClass = isUser ? 'user' : 'model';
+        finalElement.className = `message-entry ${roleClass} mb-6 flex items-end gap-3 ${isUser ? 'justify-end' : 'justify-start'}`;
+        finalElement.dataset.index = index;
+        if (animate) finalElement.classList.add('message-entry');
+
+        const userIcon = `<div class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 bg-blue-600 text-white"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></div>`;
+        
+        const bubbleClasses = isUser 
+            ? 'bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-br-none' 
+            : 'bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 rounded-bl-none';
+            
+        const messageBubbleHTML = `<div class="message-content p-4 rounded-2xl shadow-md ${bubbleClasses}"></div>`;
+        
+        finalElement.innerHTML = `
+            <div class="relative group w-full">
+                ${messageBubbleHTML}
+            </div>
+            ${isUser ? userIcon : ''}
+        `;
+        dom.chatWindow.appendChild(finalElement);
+    }
+    
+    const contentArea = finalElement.querySelector('.message-content');
+    
+    if (!isUser) {
+        contentArea.classList.add('model-bubble');
+        contentArea.style.padding = '0';
+    } else {
+        contentArea.innerHTML = '';
+        contentArea.style.padding = '1rem';
+    }
+
+    if (isUser) {
+        const textParts = parts.filter(p => p.text);
+        const fileParts = parts.filter(p => p.id);
+        
+        // *** START: MODIFIED - منطق جدید و اصلاح شده برای نمایش فایل ***
+        const processedFileParts = await Promise.all(
+            fileParts.map(async (part) => {
+                // همیشه فایل را از IndexedDB بر اساس ID می‌خوانیم تا URL تازه بسازیم
+                if (part.id) {
+                    try {
+                        const file = await db.getFile(part.id);
+                        if (file) {
+                            const newBlobUrl = URL.createObjectURL(file);
+                            // یک آبجکت جدید با URL تازه برای رندر برمی‌گردانیم
+                            return { ...part, fileUrl: newBlobUrl, mimeType: file.type, name: file.name };
+                        }
+                    } catch (error) {
+                        console.error(`Error retrieving file ${part.id} from DB:`, error);
+                    }
+                }
+                // در صورت خطا یا نبودن ID، پارت اصلی را برمی‌گردانیم تا پیام خطا نمایش داده شود
+                return { ...part, fileUrl: null };
+            })
+        );
+        // *** END: MODIFIED ***
+        
+        const fileHtml = processedFileParts.map(p => createFileContentHtml(p)).join('');
+        const textHtml = textParts.map(p => `<div class="whitespace-pre-wrap">${escapeHTML(p.text)}</div>`).join('');
+
+        if (processedFileParts.length > 0 && textParts.length > 0) {
+            contentArea.classList.add('user-bubble-multipart');
+            contentArea.innerHTML = `<div class="user-file-part">${fileHtml}</div><div class="user-text-part">${textHtml}</div>`;
+        } else {
+            contentArea.classList.remove('user-bubble-multipart');
+            contentArea.innerHTML = fileHtml + textHtml;
+             if (processedFileParts.length === 1 && (processedFileParts[0].mimeType?.startsWith('image/') || processedFileParts[0].mimeType?.startsWith('video/'))) {
+                contentArea.style.padding = '0';
+                const filePartElement = contentArea.querySelector('.user-file-part');
+                if (filePartElement) filePartElement.classList.add('single');
+            }
+        }
+
+    } else if (message.isTemporary) {
+        const activeTool = state.getActiveTool();
+        
+        if (activeTool === 'deep-think') {
+            createDeepThinkPanel(finalElement);
+        } else if (activeTool === 'reasoning') {
+            createReasoningPanel(finalElement);
+        } else {
+            const activeChat = state.getActiveChat();
+            if (activeChat && activeChat.showThoughts) {
+                startThinking(finalElement);
+            } else {
+                showFreeWsLoadingIndicator(finalElement);
+            }
+        }
+    } else {
+        const allContent = parts?.filter(p => p.text).map(p => p.text).join('') || '';
+        
+        if (message.toolUsed === 'deep-think') {
+            createDeepThinkPanel(finalElement);
+            hideDeepThinkPanel(finalElement);
+            finalizeFinalText(finalElement, allContent);
+        } else if (message.toolUsed === 'reasoning') {
+            createReasoningPanel(finalElement);
+            hideReasoningPanel(finalElement);
+            finalizeFinalText(finalElement, allContent);
+        } else if (message.wasGeneratedWithThoughts) {
+            startThinking(finalElement);
+            finalizeFinalText(finalElement, allContent);
+        } else {
+            finalizeFreeWsMessage(finalElement, allContent);
+        }
+    }
+    
+    updateMessageActions(finalElement, message, isLastUser, isLastModel);
+    
+    if (!existingElement && animate) {
+        finalElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+    return finalElement;
+}
+
+export function showLimitReachedUpgrade() {
+    const message = "محدودیت پیام‌های روزانه شما به پایان رسیده است.";
+    const modelBubbleOuterDivElement = document.createElement('div');
+    modelBubbleOuterDivElement.className = 'message-entry model mb-6 flex items-end gap-3 justify-start';
+    modelBubbleOuterDivElement.style.animation = 'fade-slide-in 300ms ease-out forwards';
+
+    const limitReachedHTML = `
+        <div class="relative group w-full">
+            <div class="message-content w-full rounded-2xl shadow-md bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
+                <div class="p-4 flex flex-col items-center text-center">
+                    <svg class="w-12 h-12 text-orange-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                    </svg>
+                    <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">محدودیت استفاده رایگان</h3>
+                    <p class="text-slate-600 dark:text-slate-300 mb-6 text-sm">${message} برای ادامه استفاده نامحدود، حساب خود را ارتقا دهید.</p>
+                    <button id="limit-upgrade-btn" class="beautiful-upgrade-btn">
+                        ✨ ارتقا به نسخه کامل
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    modelBubbleOuterDivElement.innerHTML = limitReachedHTML;
+    dom.chatWindow.appendChild(modelBubbleOuterDivElement);
+    const upgradeButton = modelBubbleOuterDivElement.querySelector('#limit-upgrade-btn');
+    if (upgradeButton) {
+        upgradeButton.addEventListener('click', () => {
+            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*');
+        });
+    }
+    modelBubbleOuterDivElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
+}
+
+export function streamFinalText(text, modelBubbleOuterDivElement) {
+    const finalAnswerWrapper = modelBubbleOuterDivElement.querySelector('.final-answer-wrapper');
+    if (!finalAnswerWrapper) return;
+
+    if (!finalAnswerWrapper.classList.contains('visible')) {
+        finalAnswerWrapper.classList.add('visible');
+    }
+
+    const shouldScroll = isScrolledToBottom();
+
+    if (finalAnswerWrapper.innerHTML.trim() === '') {
+        finalAnswerWrapper.innerHTML = `<div class="border-t border-slate-200 dark:border-slate-700 mt-4 p-4 prose dark:prose-invert max-w-none"></div>`;
+    }
+
+    const contentContainer = finalAnswerWrapper.querySelector('.p-4');
+    if (!contentContainer) return;
+    
+    const content = DOMPurify.sanitize(marked.parse(text + '▍' || " ", { breaks: true, gfm: true }));
+    contentContainer.innerHTML = content;
+
+    contentContainer.querySelectorAll('pre code').forEach(block => {
+        hljs.highlightElement(block);
+    });
+
+    if (shouldScroll) {
+        requestAnimationFrame(() => {
+            dom.chatWindow.scrollTop = dom.chatWindow.scrollHeight;
+        });
+    }
+}
+
+export function finalizeFinalText(modelBubbleOuterDivElement, fullText) {
+    const finalAnswerWrapper = modelBubbleOuterDivElement.querySelector('.final-answer-wrapper');
+    if (!finalAnswerWrapper) return;
+    
+    const shouldScroll = isScrolledToBottom();
+    
+    if (!finalAnswerWrapper.classList.contains('visible')) {
+        finalAnswerWrapper.classList.add('visible');
+    }
+    
+    if (finalAnswerWrapper.innerHTML.trim() === '') {
+        finalAnswerWrapper.innerHTML = `<div class="p-4 prose dark:prose-invert max-w-none"></div>`;
+    }
+    const contentContainer = finalAnswerWrapper.querySelector('.p-4');
+
+    const content = DOMPurify.sanitize(marked.parse(fullText || " ", { breaks: true, gfm: true }));
+    contentContainer.innerHTML = content;
+    
+    setupCodeBlockActions(finalAnswerWrapper);
+    
+    if (shouldScroll) {
+        requestAnimationFrame(() => {
+            dom.chatWindow.scrollTop = dom.chatWindow.scrollHeight;
+        });
+    }
+}
+
+export function updateMessageActions(messageOuterDivElement, messageObject, isLastUser, isLastModel) {
+    const messageWrapper = messageOuterDivElement.querySelector('.group');
+    if (!messageWrapper) return;
+    let oldActionsContainer = messageWrapper.querySelector('.message-actions');
+    if (oldActionsContainer) { oldActionsContainer.remove(); }
+    const newActionsHtml = createMessageActionsHtml({ role: messageObject.role, isLastUser: isLastUser, isLastModel: isLastModel, messageObject: messageObject });
+    if (newActionsHtml) { messageWrapper.insertAdjacentHTML('beforeend', newActionsHtml); }
+}
+
+export function adjustTextareaHeight(el) {
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+}
+
+export function showCopyFeedback(button) {
+    const copyIcon = button.querySelector('.copy-icon');
+    const checkIcon = button.querySelector('.check-icon');
+    const feedback = button.querySelector('.copy-feedback');
+    if (copyIcon && checkIcon && feedback) {
+        copyIcon.classList.add('hidden');
+        checkIcon.classList.remove('hidden');
+        feedback.classList.add('visible');
+        setTimeout(() => {
+           copyIcon.classList.remove('hidden');
+           checkIcon.classList.add('hidden');
+           feedback.classList.remove('visible');
+        }, 2000);
+    }
+}
+
+export function handleLikeDislike(button, messageEntry) {
+    const isActive = button.classList.toggle('active');
+    if (isActive) {
+        button.classList.add('like-animation');
+        button.addEventListener('animationend', () => button.classList.remove('like-animation'), { once: true });
+        const action = button.dataset.action;
+        const siblingAction = action === 'like' ? 'dislike' : 'like';
+        const siblingButton = messageEntry.querySelector(`[data-action="${siblingAction}"]`); 
+        if (siblingButton) siblingButton.classList.remove('active');
+    }
+}
+
+export function resetState() {
+    state.setGenerating(false);
+    dom.submitButton.classList.remove('is-loading');
+    dom.sendIcon.classList.remove('hidden');
+    dom.stopIcon.classList.add('hidden');
+    dom.submitButton.title = 'ارسال';
+    dom.submitButton.disabled = false;
+    dom.messageInput.disabled = false;
+    dom.attachFileButton.disabled = false;
+    state.setGlobalAbortController(null);
+}
+
+export function setGeneratingState(generating) {
+    state.setGenerating(generating);
+    dom.submitButton.disabled = !generating;
+    if (generating) {
+        state.setGlobalAbortController(new AbortController());
+        dom.submitButton.classList.add('is-loading');
+        dom.sendIcon.classList.add('hidden');
+        dom.stopIcon.classList.remove('hidden');
+        dom.submitButton.title = 'توقف تولید';
+        dom.messageInput.disabled = true;
+        dom.attachFileButton.disabled = true;
+    } else {
+        resetState();
+    }
+}
+
+export function displayError(modelBubbleOuterDivElement, errorMessage) {
+    const messageBubbleContentDiv = modelBubbleOuterDivElement.querySelector('.message-content');
+    const messageWrapper = modelBubbleOuterDivElement.querySelector('.group');
+    
+    let oldActionsContainer = messageWrapper.querySelector('.message-actions');
+    if (oldActionsContainer) { oldActionsContainer.remove(); }
+    
+    const errorIcon = `<svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>`;
+    messageBubbleContentDiv.innerHTML = `<div class="p-4 flex items-center">${errorIcon}<p class="whitespace-pre-wrap">${escapeHTML(errorMessage)}</p></div>`;
+
+    messageBubbleContentDiv.className = 'message-content model-bubble rounded-2xl shadow-sm relative bg-red-100 dark:bg-red-800/20 border border-red-200 dark:border-red-600/30 text-red-800 dark:text-red-300';
+    
+    const regenerateButtonHtml = `<button data-action="regenerate" title="تلاش مجدد" class="action-button"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></path></svg></button>`;
+    const newActionsHtml = `<div class="message-actions"><div class="flex items-center gap-1.5">${regenerateButtonHtml}</div></div>`;
+    if (messageWrapper) {
+        messageWrapper.insertAdjacentHTML('beforeend', newActionsHtml);
+    }
+    
+    resetState();
+}
+
+
+export function setupMobileKeyboardFix() {
+    if ('visualViewport' in window) {
+        const handleViewportResize = () => {
+            const vp = window.visualViewport;
+            document.body.style.height = `${vp.height}px`;
+            document.body.style.top = `${vp.offsetTop}px`;
+            dom.mainFooter.scrollIntoView({ behavior: "instant", block: "end" });
+        };
+        window.visualViewport.addEventListener('resize', handleViewportResize);
+        handleViewportResize();
+    }
+}
+
+export function showLoadingOnButton(button, isLoading) {
+    const spinner = button.querySelector('.animate-spin');
+    const textSpan = button.querySelector('span');
+    if (isLoading) {
+        button.disabled = true;
+        if(textSpan) textSpan.style.opacity = '0.5';
+        if(spinner) spinner.classList.remove('hidden');
+    } else {
+        button.disabled = false;
+        if(textSpan) textSpan.style.opacity = '1';
+        if(spinner) spinner.classList.add('hidden');
+    }
+}
+
+export function applyTheme(theme) {
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+        dom.themeToggle.checked = true;
+    } else {
+        document.documentElement.classList.remove('dark');
+        dom.themeToggle.checked = false;
+    }
+}
+
+export function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        applyTheme(savedTheme);
+    } else {
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        applyTheme(systemPrefersDark ? 'dark' : 'light');
+    }
+}
+
+export function showFreeWsLoadingIndicator(modelBubbleOuterDivElement) {
+    const contentArea = modelBubbleOuterDivElement.querySelector('.message-content');
+    if (!contentArea) return;
+    contentArea.style.padding = '1rem';
+    contentArea.innerHTML = `<div class="ws-loading-container">
+        <div class="dots">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>
+    </div>`;
+}
+
+export function streamFreeWsChunk(modelBubbleOuterDivElement, fullText) {
+    const contentArea = modelBubbleOuterDivElement.querySelector('.message-content');
+    if (!contentArea) return;
+
+    const shouldScroll = isScrolledToBottom();
+
+    const loadingIndicator = contentArea.querySelector('.ws-loading-container');
+    if (loadingIndicator) {
+        contentArea.innerHTML = '';
+        contentArea.classList.add('prose', 'dark:prose-invert', 'max-w-none');
+    }
+
+    contentArea.innerHTML = DOMPurify.sanitize(marked.parse(fullText + '▍', { breaks: true, gfm: true }));
+    
+    contentArea.querySelectorAll('pre code').forEach(block => {
+        hljs.highlightElement(block);
+    });
+
+    if (shouldScroll) {
+        requestAnimationFrame(() => {
+            dom.chatWindow.scrollTop = dom.chatWindow.scrollHeight;
+        });
+    }
+}
+
+export function finalizeFreeWsMessage(modelBubbleOuterDivElement, fullText) {
+    const contentArea = modelBubbleOuterDivElement.querySelector('.message-content');
+    if (!contentArea) return;
+    
+    const shouldScroll = isScrolledToBottom();
+    contentArea.classList.add('prose', 'dark:prose-invert', 'max-w-none');
+    contentArea.style.padding = '1rem';
+    contentArea.innerHTML = DOMPurify.sanitize(marked.parse(fullText || " ", { breaks: true, gfm: true }));
+    setupCodeBlockActions(modelBubbleOuterDivElement);
+    
+    if (shouldScroll) {
+        requestAnimationFrame(() => {
+            dom.chatWindow.scrollTop = dom.chatWindow.scrollHeight;
+        });
+    }
+}