Add files via upload

static/js/ui/dom.js

@@ -0,0 +1,92 @@
+// static/js/ui/dom.js
+
+export const dom = {
+    appContainer: document.getElementById('app-container'),
+    chatWindow: document.getElementById('chat-window'),
+    mainHeader: document.getElementById('main-header'),
+    mainFooter: document.getElementById('main-footer'),
+    messageForm: document.getElementById('message-form'),
+    messageInput: document.getElementById('message-input'),
+    submitButton: document.getElementById('submit-button'),
+    sendIcon: document.getElementById('send-icon'),
+    stopIcon: document.getElementById('stop-icon'),
+    menuButton: document.getElementById('menu-button'),
+    newChatButton: document.getElementById('new-chat-button'),
+    historySidebar: document.getElementById('history-sidebar'),
+    sidebarOverlay: document.getElementById('sidebar-overlay'),
+    historyList: document.getElementById('history-list'),
+    deleteAllChatsButton: document.getElementById('delete-all-chats'),
+    attachFileButton: document.getElementById('attach-file-button'),
+    imageFileInput: document.getElementById('image-file-input'),
+    generalFileInput: document.getElementById('general-file-input'),
+    imagePreviewContainer: document.getElementById('image-preview-container'),
+    imagePreview: document.getElementById('image-preview'),
+    removeImageButton: document.getElementById('remove-image-button'),
+    fileInfoText: document.getElementById('file-info-text'),
+    historyItemMenu: document.getElementById('history-item-menu'),
+    messageItemMenu: document.getElementById('message-item-menu'),
+    messageItemMenuOverlay: document.getElementById('message-item-menu-overlay'),
+    messageItemMenuContent: document.getElementById('message-item-menu-content'),
+    confirmModal: document.getElementById('confirm-modal'),
+    confirmModalOverlay: document.getElementById('confirm-modal-overlay'),
+    confirmModalContent: document.getElementById('confirm-modal-content'),
+    confirmModalMessage: document.getElementById('confirm-modal-message'),
+    confirmModalConfirmBtn: document.getElementById('confirm-modal-confirm-btn'),
+    confirmModalCancelBtn: document.getElementById('confirm-modal-cancel-btn'),
+    renameModal: document.getElementById('rename-modal'),
+    renameModalOverlay: document.getElementById('rename-modal-overlay'),
+    renameModalContent: document.getElementById('rename-modal-content'),
+    renameInput: document.getElementById('rename-input'),
+    renameModalConfirmBtn: document.getElementById('rename-modal-confirm-btn'),
+    renameModalCancelBtn: document.getElementById('rename-modal-cancel-btn'),
+    editModal: document.getElementById('edit-modal'),
+    editModalOverlay: document.getElementById('edit-modal-overlay'),
+    editModalContent: document.getElementById('edit-modal-content'),
+    editInput: document.getElementById('edit-input'),
+    editModalConfirmBtn: document.getElementById('edit-modal-confirm-btn'),
+    editModalCancelBtn: document.getElementById('edit-modal-cancel-btn'),
+    htmlPreviewModal: document.getElementById('html-preview-modal'),
+    htmlPreviewOverlay: document.getElementById('html-preview-overlay'),
+    htmlPreviewContent: document.getElementById('html-preview-content'),
+    htmlPreviewIframe: document.getElementById('html-preview-iframe'),
+    htmlPreviewCloseBtn: document.getElementById('html-preview-close-btn'),
+    selectImageOption: document.getElementById('select-image-option'),
+    selectFileOption: document.getElementById('select-file-option'),
+    imageGalleryModal: document.getElementById('image-gallery-modal'),
+    imageGalleryContent: document.getElementById('image-gallery-content'),
+    galleryCloseBtn: document.getElementById('gallery-close-btn'),
+    galleryMainImage: document.getElementById('gallery-main-image'),
+    galleryPrevBtn: document.getElementById('gallery-prev-btn'),
+    galleryNextBtn: document.getElementById('gallery-next-btn'),
+    galleryThumbnails: document.getElementById('gallery-thumbnails'),
+    galleryDownloadBtn: document.getElementById('gallery-download-btn'),
+    settingsButton: document.getElementById('settings-button'),
+    settingsModal: document.getElementById('settings-modal'),
+    settingsModalContent: document.getElementById('settings-modal-content'),
+    themeToggle: document.getElementById('theme-toggle'),
+    settingsUserTier: document.getElementById('settings-user-tier'),
+    premiumFeatureModal: document.getElementById('premium-feature-modal'),
+    premiumModalIconContainer: document.getElementById('premium-modal-icon-container'),
+    premiumModalCloseBtn: document.getElementById('premium-modal-close-btn'),
+    premiumModalUpgradeBtn: document.getElementById('premium-modal-upgrade-btn'),
+    plusRequiredModal: document.getElementById('plus-required-modal'),
+    plusModalIconContainer: document.getElementById('plus-modal-icon-container'),
+    plusModalCloseBtn: document.getElementById('plus-modal-close-btn'),
+    toolsButton: document.getElementById('tools-button'),
+    toolsMenu: document.getElementById('tools-menu'),
+    filePopupMenu: document.getElementById('file-popup-menu'),
+    toolsButtonText: document.getElementById('tools-button-text'),
+    toolsDefaultIcon: document.getElementById('tools-default-icon'),
+    clearToolSelection: document.getElementById('clear-tool-selection'),
+    globalAudioPlayer: document.getElementById('global-audio-player'),
+    globalAudioElement: document.getElementById('global-audio-element'),
+    globalPlayerPlayPause: document.getElementById('global-player-play-pause'),
+    globalPlayerPlayIcon: document.getElementById('global-player-play-icon'),
+    globalPlayerPauseIcon: document.getElementById('global-player-pause-icon'),
+    globalPlayerText: document.getElementById('global-player-text'),
+    globalPlayerCurrentTime: document.getElementById('global-player-current-time'),
+    globalPlayerTotalTime: document.getElementById('global-player-total-time'),
+    waveformCanvas: document.getElementById('waveform-canvas'),
+    globalPlayerLoading: document.getElementById('global-player-loading'),
+    globalPlayerClose: document.getElementById('global-player-close'),
+};

static/js/ui/modals.js

@@ -0,0 +1,379 @@
+// static/js/ui/modals.js
+
+import { dom } from './dom.js';
+
+let currentGalleryImages = [];
+let currentGalleryIndex = 0;
+
+const createMenuItem = (options) => {
+    const { action, format = '', text, icon, isDanger = false, type = 'button' } = options;
+    const element = document.createElement(type);
+    element.className = `menu-item ${isDanger ? 'danger' : ''}`;
+    element.dataset.action = action;
+    if (format) element.dataset.format = format;
+    element.innerHTML = `${icon}<span>${text}</span><div class="hidden w-4 h-4 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin ml-auto"></div>`;
+    return element;
+};
+
+const getConversionMenuItems = (action) => `
+    ${createMenuItem({ action, format: 'pdf', text: 'تبدیل به PDF', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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>` }).outerHTML}
+    ${createMenuItem({ action, format: 'docx', text: 'تبدیل به Word', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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.25m2.25 0H15M2.25 3h1.5M2.25 6h1.5M2.25 9h1.5M2.25 12h1.5M2.25 15h1.5M2.25 18h1.5M4.5 21h15a2.25 2.25 0 002.25-2.25V5.25A2.25 2.25 0 0019.5 3h-15A2.25 2.25 0 002.25 5.25v13.5A2.25 2.25 0 004.5 21z" /></svg>` }).outerHTML}
+    ${createMenuItem({ action, format: 'txt', text: 'تبدیل به Text', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg>` }).outerHTML}
+    ${createMenuItem({ action, format: 'html', text: 'تبدیل به HTML', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>` }).outerHTML}
+`;
+
+function showImageInGallery(index) {
+    if (index < 0 || index >= currentGalleryImages.length) return;
+    currentGalleryIndex = index;
+    const newImageUrl = currentGalleryImages[index];
+
+    dom.galleryMainImage.style.opacity = '0';
+    setTimeout(() => {
+        dom.galleryMainImage.src = newImageUrl;
+        dom.galleryMainImage.style.opacity = '1';
+    }, 150);
+
+    const thumbnails = dom.galleryThumbnails.querySelectorAll('.gallery-thumb');
+    thumbnails.forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === index);
+        if (i === index) {
+            thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+        }
+    });
+}
+
+const handleGalleryKeyDown = (e) => {
+    if (e.key === 'ArrowRight') showImageInGallery((currentGalleryIndex + 1) % currentGalleryImages.length);
+    else if (e.key === 'ArrowLeft') showImageInGallery((currentGalleryIndex - 1 + currentGalleryImages.length) % currentGalleryImages.length);
+    else if (e.key === 'Escape') closeImageGallery();
+};
+
+export function openImageGallery(imageUrlsString, startIndex) {
+    try {
+        currentGalleryImages = JSON.parse(imageUrlsString);
+    } catch (e) {
+        console.error("Failed to parse image URLs for gallery:", e);
+        return;
+    }
+
+    if (!currentGalleryImages || currentGalleryImages.length === 0) return;
+    
+    dom.galleryThumbnails.innerHTML = '';
+    currentGalleryImages.forEach((url, index) => {
+        const thumb = document.createElement('img');
+        thumb.src = url;
+        thumb.className = 'gallery-thumb';
+        thumb.onclick = () => showImageInGallery(index);
+        dom.galleryThumbnails.appendChild(thumb);
+    });
+
+    showImageInGallery(startIndex);
+    
+    dom.imageGalleryModal.classList.remove('hidden');
+    requestAnimationFrame(() => {
+        dom.imageGalleryModal.classList.add('visible');
+    });
+
+    dom.galleryCloseBtn.onclick = closeImageGallery;
+    dom.imageGalleryModal.onclick = (e) => { if (e.target === dom.imageGalleryModal) closeImageGallery(); };
+    dom.galleryNextBtn.onclick = () => showImageInGallery((currentGalleryIndex + 1) % currentGalleryImages.length);
+    dom.galleryPrevBtn.onclick = () => showImageInGallery((currentGalleryIndex - 1 + currentGalleryImages.length) % currentGalleryImages.length);
+    window.addEventListener('keydown', handleGalleryKeyDown);
+}
+
+function closeImageGallery() {
+    dom.imageGalleryModal.classList.remove('visible');
+    setTimeout(() => {
+        dom.imageGalleryModal.classList.add('hidden');
+        dom.galleryMainImage.src = '';
+    }, 300);
+    window.removeEventListener('keydown', handleGalleryKeyDown);
+}
+
+export function toggleSidebar(show) {
+    if (show) {
+        dom.sidebarOverlay.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            dom.sidebarOverlay.style.opacity = '1';
+            dom.historySidebar.style.transform = 'translateX(0)';
+        });
+    } else {
+        dom.sidebarOverlay.style.opacity = '0';
+        dom.historySidebar.style.transform = 'translateX(100%)';
+        setTimeout(() => dom.sidebarOverlay.classList.add('hidden'), 300);
+    }
+}
+
+export function toggleEditModal(show) {
+    if (show) {
+        dom.editModal.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            dom.editModalOverlay.style.opacity = '1';
+            dom.editModalContent.style.opacity = '1';
+            dom.editModalContent.style.transform = 'scale(1)';
+            dom.editInput.focus();
+        });
+    } else {
+        dom.editModalOverlay.style.opacity = '0';
+        dom.editModalContent.style.opacity = '0';
+        dom.editModalContent.style.transform = 'scale(0.95)';
+        setTimeout(() => dom.editModal.classList.add('hidden'), 300);
+    }
+}
+
+export function toggleHtmlPreviewModal(show, htmlContent = '') {
+    if (show) {
+        dom.htmlPreviewIframe.srcdoc = htmlContent;
+        dom.htmlPreviewModal.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            dom.htmlPreviewOverlay.style.opacity = '1';
+            dom.htmlPreviewContent.style.opacity = '1';
+            dom.htmlPreviewContent.style.transform = 'scale(1)';
+        });
+    } else {
+        dom.htmlPreviewOverlay.style.opacity = '0';
+        dom.htmlPreviewContent.style.opacity = '0';
+        dom.htmlPreviewContent.style.transform = 'scale(0.95)';
+        setTimeout(() => {
+            dom.htmlPreviewModal.classList.add('hidden');
+            dom.htmlPreviewIframe.srcdoc = ''; 
+        }, 300);
+    }
+}
+
+export function showHistoryMenu(event, sessionId) {
+    event.stopPropagation();
+    const menu = dom.historyItemMenu;
+
+    menu.innerHTML = `
+        ${createMenuItem({ action: 'rename', text: 'تغییر نام گفتگو', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125" /></svg>` }).outerHTML}
+        <div class="menu-divider"></div>
+        ${getConversionMenuItems('convert-chat')}
+        <div class="menu-divider"></div>
+        ${createMenuItem({ action: 'delete', text: 'حذف گفتگو', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`, isDanger: true }).outerHTML}
+    `;
+
+    menu.dataset.sessionId = sessionId;
+
+    const buttonRect = event.currentTarget.getBoundingClientRect();
+    const menuHeight = 220;
+    const margin = 8;
+    
+    let top = buttonRect.bottom + margin;
+    let right = window.innerWidth - buttonRect.right;
+    
+    if (top + menuHeight > window.innerHeight) {
+        top = buttonRect.top - menuHeight - margin;
+    }
+    
+    menu.style.top = `${top}px`;
+    menu.style.right = `${right}px`;
+    menu.style.left = 'auto';
+    menu.style.transformOrigin = (top > buttonRect.top) ? 'bottom right' : 'top right';
+
+    menu.classList.add('visible');
+    const closeMenu = () => {
+        menu.classList.remove('visible');
+        window.removeEventListener('click', closeMenu);
+    };
+    window.addEventListener('click', closeMenu, { once: true });
+}
+
+export function showMessageMenu(event, messageIndex, activeChat, escapeHTML) {
+    event.stopPropagation();
+    const menu = dom.messageItemMenu;
+    const menuContent = dom.messageItemMenuContent;
+    const message = activeChat.messages[messageIndex];
+    if (!message) return;
+
+    const textPart = message.parts.find(p => p.text);
+    const textContent = textPart ? textPart.text : '[محتوای غیر متنی]';
+
+    let menuItemsHtml = '';
+    if (message.role === 'assistant' && textPart) {
+        menuItemsHtml += getConversionMenuItems('convert-message');
+        menuItemsHtml += '<div class="menu-divider"></div>';
+    }
+    
+    menuItemsHtml += createMenuItem({ 
+        action: 'delete-message', 
+        text: 'حذف پیام', 
+        icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`, 
+        isDanger: true 
+    }).outerHTML;
+    
+    const escapedContent = escapeHTML(textContent);
+
+    menuContent.innerHTML = `
+        <div class="message-preview-container">
+            <p class="message-preview-text">${escapedContent}</p>
+        </div>
+        ${menuItemsHtml}
+    `;
+
+    menu.dataset.messageIndex = messageIndex;
+
+    menu.classList.remove('hidden');
+    requestAnimationFrame(() => {
+        menu.classList.add('visible');
+    });
+}
+
+
+export function showConfirmModal(message, onConfirm) {
+    dom.confirmModalMessage.textContent = message;
+    dom.confirmModal.classList.remove('hidden');
+    requestAnimationFrame(() => {
+        dom.confirmModalOverlay.style.opacity = '1';
+        dom.confirmModalContent.style.opacity = '1';
+        dom.confirmModalContent.style.transform = 'scale(1)';
+    });
+    const hide = () => {
+        dom.confirmModalOverlay.style.opacity = '0';
+        dom.confirmModalContent.style.opacity = '0';
+        dom.confirmModalContent.style.transform = 'scale(0.95)';
+        setTimeout(() => dom.confirmModal.classList.add('hidden'), 300);
+    };
+    dom.confirmModalConfirmBtn.onclick = () => { onConfirm(); hide(); };
+    dom.confirmModalCancelBtn.onclick = hide;
+    dom.confirmModalOverlay.onclick = hide;
+}
+
+export function showRenameModal(currentTitle, onConfirm) {
+    dom.renameInput.value = currentTitle;
+    dom.renameModal.classList.remove('hidden');
+    requestAnimationFrame(() => {
+        dom.renameModalOverlay.style.opacity = '1';
+        dom.renameModalContent.style.opacity = '1';
+        dom.renameModalContent.style.transform = 'scale(1)';
+        dom.renameInput.focus();
+        dom.renameInput.select();
+    });
+    const hide = () => {
+        dom.renameModalOverlay.style.opacity = '0';
+        dom.renameModalContent.style.opacity = '0';
+        dom.renameModalContent.style.transform = 'scale(0.95)';
+        setTimeout(() => dom.renameModal.classList.add('hidden'), 300);
+    };
+    dom.renameModalContent.onsubmit = (e) => {
+        e.preventDefault();
+        const newTitle = dom.renameInput.value.trim();
+        if (newTitle) { onConfirm(newTitle); }
+        hide();
+    };
+    dom.renameModalCancelBtn.onclick = hide;
+    dom.renameModalOverlay.onclick = hide;
+}
+
+export function showEditModal(currentText, onConfirm) {
+    dom.editInput.value = currentText;
+    toggleEditModal(true); 
+    dom.editModalContent.onsubmit = (e) => {
+        e.preventDefault();
+        const newText = dom.editInput.value.trim();
+        if (newText === '') { 
+             showConfirmModal('متن پیام شما خالی است. آیا مایل به حذف پیام هستید؟', () => { onConfirm(''); });
+        } else if (newText !== currentText) {
+            onConfirm(newText);
+        }
+        toggleEditModal(false);
+    };
+    dom.editModalCancelBtn.onclick = () => toggleEditModal(false);
+    dom.editModalOverlay.onclick = () => toggleEditModal(false);
+}
+
+export function toggleSettingsModal(show) {
+    const modal = dom.settingsModal;
+    const content = dom.settingsModalContent;
+    if (show) {
+        modal.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            modal.style.opacity = '1';
+            content.style.opacity = '1';
+            content.style.transform = 'scale(1)';
+        });
+    } else {
+        modal.style.opacity = '0';
+        content.style.opacity = '0';
+        content.style.transform = 'scale(0.95)';
+        setTimeout(() => modal.classList.add('hidden'), 200);
+    }
+}
+
+export function updateSettingsUI(isPremium) {
+    if (!dom.settingsUserTier) return;
+    
+    let content = '';
+    if (isPremium) {
+        const premiumIcon = `<svg class="settings-tier-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="premium-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#818cf8"/><stop offset="100%" stop-color="#c084fc"/></linearGradient></defs><path fill="url(#premium-gradient)" d="M50,5 C74.85,5 95,25.15 95,50 C95,74.85 74.85,95 50,95 C25.15,95 5,74.85 5,50 C5,25.15 25.15,5 50,5 Z M50,15 C30.67,15 15,30.67 15,50 C15,69.33 30.67,85 50,85 C69.33,85 85,69.33 85,50 C85,30.67 69.33,15 50,15 Z" /><text x="50" y="62" font-family="Arial" font-size="30" fill="white" text-anchor="middle" font-weight="bold">∞</text></svg>`;
+        content = `
+            <div class="settings-tier-container">
+                ${premiumIcon}
+                <div class="settings-tier-text text-slate-800 dark:text-slate-200">
+                    نسخه: <span class="tier-name-premium">نامحدود</span>
+                </div>
+            </div>`;
+    } else {
+        const freeIcon = `<svg class="settings-tier-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17" stroke="#64748b" stroke-width="2" stroke-linecap="round"/><path d="M19 9L12 16L9.5 13.5" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+        content = `
+             <div class="settings-tier-container">
+                ${freeIcon}
+                <div class="settings-tier-text">
+                    نسخه: <span class="tier-name-free">رایگان</span>
+                </div>
+            </div>`;
+    }
+    dom.settingsUserTier.innerHTML = content;
+}
+
+export function togglePremiumFeatureModal(show) {
+    if (show) {
+        const icon = `<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="icon-gradient" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0%" stop-color="#818cf8" />
+                    <stop offset="100%" stop-color="#c084fc" />
+                </linearGradient>
+            </defs>
+            <path d="M12 2.5C12.41 2.5 12.75 2.84 12.75 3.25V4.44C15.96 4.97 18.5 7.79 18.5 11.06V17L20 18.5V19.5H4V18.5L5.5 17V11.06C5.5 7.79 8.04 4.97 11.25 4.44V3.25C11.25 2.84 11.59 2.5 12 2.5ZM12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22Z" fill="url(#icon-gradient)"/>
+        </svg>`;
+        dom.premiumModalIconContainer.innerHTML = icon;
+        dom.premiumFeatureModal.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            dom.premiumFeatureModal.classList.add('visible');
+        });
+    } else {
+        dom.premiumFeatureModal.classList.remove('visible');
+        setTimeout(() => {
+            dom.premiumFeatureModal.classList.add('hidden');
+        }, 300);
+    }
+}
+
+export function togglePlusRequiredModal(show) {
+    const modal = dom.plusRequiredModal;
+    if (!modal) return;
+    
+    if (show) {
+        const icon = `<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="plus-icon-gradient" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0%" stop-color="#3b82f6" />
+                    <stop offset="100%" stop-color="#14b8a6" />
+                </linearGradient>
+            </defs>
+            <path d="M11 11V3H13V11H21V13H13V21H11V13H3V11H11Z" fill="url(#plus-icon-gradient)"/>
+            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="url(#plus-icon-gradient)" fill-opacity="0.6"/>
+        </svg>`;
+        dom.plusModalIconContainer.innerHTML = icon;
+        modal.classList.remove('hidden');
+        requestAnimationFrame(() => {
+            modal.classList.add('visible');
+        });
+    } else {
+        modal.classList.remove('visible');
+        setTimeout(() => {
+            modal.classList.add('hidden');
+        }, 300);
+    }
+}

static/js/ui/tools.js

@@ -0,0 +1,181 @@
+// static/js/ui/tools.js
+
+import { dom } from './dom.js';
+import { escapeHTML } from './chat.js';
+
+export function toggleFilePopupMenu(show) {
+    dom.toolsMenu.classList.remove('active');
+    if (show) {
+        dom.filePopupMenu.classList.add('active');
+    } else {
+        dom.filePopupMenu.classList.remove('active');
+    }
+}
+
+export function toggleToolsMenu(show) {
+    dom.filePopupMenu.classList.remove('active');
+    if (show) {
+        dom.toolsMenu.classList.add('active');
+    } else {
+        dom.toolsMenu.classList.remove('active');
+    }
+}
+
+export function updateToolsButton(toolName) {
+    if (toolName) {
+        dom.toolsButtonText.textContent = toolName;
+        dom.toolsDefaultIcon.style.display = 'none';
+        dom.clearToolSelection.style.display = 'flex';
+        dom.toolsButton.classList.add('tool-selected');
+    } else {
+        dom.toolsButtonText.textContent = 'ابزارها';
+        dom.toolsDefaultIcon.style.display = 'flex';
+        dom.clearToolSelection.style.display = 'none';
+        dom.toolsButton.classList.remove('tool-selected');
+        dom.messageInput.placeholder = 'هر چی میخوای بپرس';
+    }
+}
+
+function getDeepThinkTVHTML() {
+    return `
+    <div class="deep-think-tv-container">
+        <section class="deep-think-tv">
+            <div class="screen scanlines gloss">
+                <div class="ui">
+                    <div class="header">
+                        <div class="topbar">
+                            <div class="badge"><span class="dot"></span>تفکر عمیق چت بات‌آلفا</div>
+                        </div>
+                        <div class="topic"><span>موضوع:</span><strong id="tv-topic">...</strong></div>
+                    </div>
+                    <div class="steps">
+                        <div class="step active" data-step="analyzing"><span class="mini"></span>تحقیق و بررسی</div>
+                    </div>
+                    <div class="progress"><div class="bar" id="tv-bar" style="width:0%"></div></div>
+                    <div id="tv-log" class="log custom-scrollbar"></div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <div class="final-answer-wrapper"></div>
+    `;
+}
+
+export function createDeepThinkPanel(modelBubbleOuterDivElement) {
+    const contentArea = modelBubbleOuterDivElement.querySelector('.message-content');
+    if (!contentArea || contentArea.querySelector('.deep-think-tv')) return;
+    contentArea.innerHTML = getDeepThinkTVHTML();
+    const tv = contentArea.querySelector('.deep-think-tv');
+    if (document.documentElement.classList.contains('dark')) {
+        tv.classList.add('dark');
+    }
+}
+
+export function updateDeepThinkPanel(data, modelBubbleOuterDivElement) {
+    const tv = modelBubbleOuterDivElement.querySelector('.deep-think-tv');
+    if (!tv) return;
+    
+    if (data.topic) {
+        const topicEl = tv.querySelector('#tv-topic');
+        if (topicEl) topicEl.textContent = data.topic;
+    }
+    if (data.log) {
+        const logEl = tv.querySelector('#tv-log');
+        if (logEl) {
+            const row = document.createElement('div');
+            row.className = 'row';
+            row.innerHTML = `<div class="icon">✓</div><div>${escapeHTML(data.log)}</div>`;
+            logEl.appendChild(row);
+            logEl.scrollTop = logEl.scrollHeight;
+        }
+    }
+    if (data.progress) {
+        const barEl = tv.querySelector('#tv-bar');
+        if (barEl) barEl.style.width = `${data.progress}%`;
+    }
+}
+
+export function hideDeepThinkPanel(modelBubbleOuterDivElement) {
+    const tvContainer = modelBubbleOuterDivElement.querySelector('.deep-think-tv-container');
+    const finalAnswerWrapper = modelBubbleOuterDivElement.querySelector('.final-answer-wrapper');
+    if (tvContainer) {
+        tvContainer.style.transition = 'opacity 0.5s, max-height 0.5s, padding 0.5s, margin 0.5s';
+        tvContainer.style.opacity = '0';
+        tvContainer.style.maxHeight = '0';
+        tvContainer.style.padding = '0';
+        tvContainer.style.margin = '0';
+        tvContainer.style.overflow = 'hidden';
+    }
+    if(finalAnswerWrapper) {
+        finalAnswerWrapper.classList.add('visible');
+    }
+}
+
+function getReasoningHUDHTML() {
+    return `
+    <div class="reasoning-hud-container">
+        <section class="reasoning-hud">
+            <div class="grid-bg"></div>
+            <div class="ui-content">
+                <div class="header">
+                    <div class="badge"><span class="dot"></span>استدلال منطقی</div>
+                    <div class="topic"><span>موضوع:</span><strong id="reasoning-topic">...</strong></div>
+                </div>
+                <div class="progress"><div class="bar" id="reasoning-bar" style="width:0%"></div></div>
+                <div id="reasoning-log" class="log custom-scrollbar"></div>
+            </div>
+        </section>
+    </div>
+    <div class="final-answer-wrapper"></div>
+    `;
+}
+
+export function createReasoningPanel(modelBubbleOuterDivElement) {
+    const contentArea = modelBubbleOuterDivElement.querySelector('.message-content');
+    if (!contentArea || contentArea.querySelector('.reasoning-hud')) return;
+    contentArea.innerHTML = getReasoningHUDHTML();
+    const hud = contentArea.querySelector('.reasoning-hud');
+    if (document.documentElement.classList.contains('dark')) {
+        hud.classList.add('dark');
+    }
+}
+
+export function updateReasoningPanel(data, modelBubbleOuterDivElement) {
+    const hud = modelBubbleOuterDivElement.querySelector('.reasoning-hud');
+    if (!hud) return;
+    
+    if (data.topic) {
+        const topicEl = hud.querySelector('#reasoning-topic');
+        if (topicEl) topicEl.textContent = data.topic;
+    }
+    if (data.log) {
+        const logEl = hud.querySelector('#reasoning-log');
+        if (logEl) {
+            const row = document.createElement('div');
+            row.className = 'row';
+            row.innerHTML = `<div class="icon"><svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg></div><div>${escapeHTML(data.log)}</div>`;
+            logEl.appendChild(row);
+            logEl.scrollTop = logEl.scrollHeight;
+        }
+    }
+    if (data.progress) {
+        const barEl = hud.querySelector('#reasoning-bar');
+        if (barEl) barEl.style.width = `${data.progress}%`;
+    }
+}
+
+export function hideReasoningPanel(modelBubbleOuterDivElement) {
+    const hudContainer = modelBubbleOuterDivElement.querySelector('.reasoning-hud-container');
+    const finalAnswerWrapper = modelBubbleOuterDivElement.querySelector('.final-answer-wrapper');
+    if (hudContainer) {
+        hudContainer.style.transition = 'opacity 0.5s, max-height 0.5s, padding 0.5s, margin 0.5s';
+        hudContainer.style.opacity = '0';
+        hudContainer.style.maxHeight = '0';
+        hudContainer.style.padding = '0';
+        hudContainer.style.margin = '0';
+        hudContainer.style.overflow = 'hidden';
+    }
+    if(finalAnswerWrapper) {
+        finalAnswerWrapper.classList.add('visible');
+    }
+}

static/js/ui/tts.js

@@ -0,0 +1,162 @@
+// static/js/ui/tts.js
+
+import { dom } from './dom.js';
+
+const ttsCache = new Map();
+
+const ttsState = {
+    currentMessageIndex: null,
+    animationFrameId: null,
+    activeButton: null,
+};
+
+const ttsStreamManager = {
+    HF_WEBSOCKET_URL: "wss://ezmary-ttslive.hf.space/ws",
+    socket: null,
+    activeStreamController: null,
+    pendingRequest: null, // برای نگهداری درخواست در زمان اتصال مجدد
+
+    connectWebSocket() {
+        // فقط اگر اتصالی وجود ندارد یا قطع شده، اتصال جدید بساز
+        if (this.socket && this.socket.readyState !== WebSocket.CLOSED) {
+            return;
+        }
+
+        this.socket = new WebSocket(this.HF_WEBSOCKET_URL);
+
+        this.socket.onopen = () => {
+            console.log("اتصال WebSocket به سرور TTS برقرار شد.");
+            // اگر درخواستی در صف انتظار بود، آن را ارسال کن
+            if (this.pendingRequest) {
+                const { messageIndex, text, button } = this.pendingRequest;
+                this.pendingRequest = null;
+                this.stream(messageIndex, text, button, true); // ارسال مجدد درخواست
+            }
+        };
+        
+        this.socket.onmessage = (event) => {
+            if (this.activeStreamController && this.activeStreamController.handleMessage) {
+                this.activeStreamController.handleMessage(event);
+            }
+        };
+
+        this.socket.onclose = () => {
+            console.warn("اتصال WebSocket قطع شد.");
+            this.socket = null; // سوکت را null کن تا اتصال بعدی دوباره برقرار شود
+            if (this.activeStreamController) {
+                this.activeStreamController.stop();
+            }
+        };
+
+        this.socket.onerror = (error) => {
+            console.error("خطای WebSocket:", error);
+            if (this.socket) this.socket.close();
+        };
+    },
+    
+    _createStreamController(messageIndex, button) {
+        // ... (این تابع داخلی بدون تغییر باقی می‌ماند)
+        const controller = {
+            messageIndex: messageIndex, button: button, audioContext: null, audioQueue: [], receivedPcmChunks: [], sourceNodes: [], isStopped: false, isPlaying: false, nextStartTime: 0, timerInterval: null, startTime: 0, elapsedTime: 0,
+            _initializeAudio() { if (!this.audioContext || this.audioContext.state === 'closed') { this.audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 }); } if(this.audioContext.state === 'suspended') { this.audioContext.resume(); } this.nextStartTime = this.audioContext.currentTime; },
+            async handleMessage(event) { if (this.isStopped) return; if (typeof event.data === 'string') { const message = JSON.parse(event.data); if (message.event === "STREAM_ENDED") this._handleStreamEnd(); else if (message.event === "ERROR") { console.error(`خطا از سرور TTS: ${message.message}`); this.stop(); } } else { const arrayBuffer = await event.data.arrayBuffer(); const pcmData = new Int16Array(arrayBuffer); this.audioQueue.push(pcmData); this.receivedPcmChunks.push(pcmData); if (!this.isPlaying) this._playFromQueue(); } },
+            async _playFromQueue() { if (this.audioQueue.length === 0 || this.isStopped) { this.isPlaying = false; return; } this.isPlaying = true; if (!dom.globalAudioPlayer.classList.contains('visible')) { showGlobalPlayer(false, true); this.startTime = Date.now(); this.timerInterval = setInterval(() => updateGlobalPlayerUI(this), 250); ttsState.animationFrameId = requestAnimationFrame(drawWaveform); if(this.button) { this.button.classList.remove('loading'); this.button.classList.add('playing'); } } while (this.audioQueue.length > 0) { if (this.isStopped) break; const pcmData = this.audioQueue.shift(); const float32Data = new Float32Array(pcmData.length); for (let i = 0; i < pcmData.length; i++) float32Data[i] = pcmData[i] / 32768.0; if (this.audioContext.state === 'closed') return; const audioBuffer = this.audioContext.createBuffer(1, float32Data.length, this.audioContext.sampleRate); audioBuffer.getChannelData(0).set(float32Data); const source = this.audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(this.audioContext.destination); const currentTime = this.audioContext.currentTime; this.nextStartTime = Math.max(this.nextStartTime, currentTime); source.start(this.nextStartTime); this.sourceNodes.push(source); this.nextStartTime += audioBuffer.duration; } this.isPlaying = false; },
+            _handleStreamEnd() { this._finalizeAndCacheAudio(); const checkPlaybackEnd = setInterval(() => { if (this.audioQueue.length === 0 && this.audioContext && this.audioContext.currentTime > this.nextStartTime - 0.1) { if(!this.isStopped) this.stop(); clearInterval(checkPlaybackEnd); } }, 100); },
+            _finalizeAndCacheAudio() { if (this.receivedPcmChunks.length === 0) return; const totalLength = this.receivedPcmChunks.reduce((acc, val) => acc + val.length, 0); const concatenatedPcm = new Int16Array(totalLength); let offset = 0; for (const chunk of this.receivedPcmChunks) { concatenatedPcm.set(chunk, offset); offset += chunk.length; } const wavBlob = this._createWavBlob(concatenatedPcm, this.audioContext.sampleRate); ttsCache.set(this.messageIndex, wavBlob); this.receivedPcmChunks = []; },
+            _createWavBlob(pcmData, sampleRate) { const numChannels = 1, bitsPerSample = 16; const blockAlign = (numChannels * bitsPerSample) / 8; const byteRate = sampleRate * blockAlign; const dataSize = pcmData.length * (bitsPerSample / 8); const buffer = new ArrayBuffer(44 + dataSize); const view = new DataView(buffer); function writeString(view, offset, string) { for (let i = 0; i < string.length; i++) view.setUint8(offset + i, string.charCodeAt(i)); } writeString(view, 0, 'RIFF'); view.setUint32(4, 36 + dataSize, true); writeString(view, 8, 'WAVE'); writeString(view, 12, 'fmt '); view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, numChannels, true); view.setUint32(24, sampleRate, true); view.setUint32(28, byteRate, true); view.setUint16(32, blockAlign, true); view.setUint16(34, bitsPerSample, true); writeString(view, 36, 'data'); view.setUint32(40, dataSize, true); for (let i = 0; i < pcmData.length; i++) view.setInt16(44 + i * 2, pcmData[i], true); return new Blob([view], { type: 'audio/wav' }); },
+            stop() { this.isStopped = true; if (this.timerInterval) clearInterval(this.timerInterval); this.timerInterval = null; this.sourceNodes.forEach(source => { try { source.stop(); } catch(e) {} }); if (this.audioContext && this.audioContext.state !== 'closed') { this.audioContext.close(); } if (ttsStreamManager.activeStreamController === this) { ttsStreamManager.activeStreamController = null; hideGlobalPlayer(); if (this.button) this.button.classList.remove('playing', 'loading'); ttsState.activeButton = null; } },
+            pause() { if (!this.audioContext || this.audioContext.state !== 'running') return; this.audioContext.suspend().then(() => { clearInterval(this.timerInterval); this.timerInterval = null; this.elapsedTime += (Date.now() - this.startTime) / 1000; showGlobalPlayer(false, false); if(this.button) this.button.classList.remove('playing'); }); },
+            resume() { if (!this.audioContext || this.audioContext.state !== 'suspended') return; this.audioContext.resume().then(() => { this.startTime = Date.now(); this.timerInterval = setInterval(() => updateGlobalPlayerUI(this), 250); showGlobalPlayer(false, true); if(this.button) this.button.classList.add('playing'); }); }
+        };
+        controller._initializeAudio();
+        return controller;
+    },
+
+    stopCurrentStream() {
+        if (this.activeStreamController) {
+            this.activeStreamController.stop();
+            this.activeStreamController = null;
+        }
+        // *** مهم: اتصال وب‌سوکت را قطع کن ***
+        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+            this.socket.close();
+            console.log("اتصال WebSocket به دلیل توقف توسط کاربر، عمداً قطع شد.");
+        }
+        this.pendingRequest = null; // هر درخواست در حال انتظاری را لغو کن
+    },
+
+    stream(messageIndex, text, button, isRetrying = false) {
+        if (!isRetrying) {
+            this.stopCurrentStream(); // همیشه پخش قبلی را کاملا متوقف کن
+        }
+        
+        // اگر اتصال برقرار نیست، برقرار کن و درخواست را در صف بگذار
+        if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+            this.pendingRequest = { messageIndex, text, button };
+            setSpeakButtonLoading(button, true);
+            this.connectWebSocket(); // این تابع اتصال جدید را شروع می‌کند
+            return;
+        }
+
+        this.activeStreamController = this._createStreamController(messageIndex, button);
+        ttsState.currentMessageIndex = messageIndex;
+        ttsState.activeButton = button;
+        
+        this.socket.send(text);
+        setSpeakButtonLoading(button, true);
+    },
+    
+    async playFromCache(messageIndex, button) {
+        const audioBlob = ttsCache.get(messageIndex);
+        if (!audioBlob) return;
+        
+        this.stopCurrentStream();
+        this.activeStreamController = this._createStreamController(messageIndex, button);
+        ttsState.currentMessageIndex = messageIndex;
+        ttsState.activeButton = button;
+        
+        try {
+            const controller = this.activeStreamController;
+            const arrayBuffer = await audioBlob.arrayBuffer();
+            if (controller.audioContext.state === 'closed') return;
+            const decodedBuffer = await controller.audioContext.decodeAudioData(arrayBuffer);
+            const source = controller.audioContext.createBufferSource();
+            source.buffer = decodedBuffer;
+            source.connect(controller.audioContext.destination);
+            
+            showGlobalPlayer(false, true);
+            button.classList.add('playing');
+            
+            controller.startTime = Date.now();
+            controller.timerInterval = setInterval(() => updateGlobalPlayerUI(controller), 250);
+            ttsState.animationFrameId = requestAnimationFrame(drawWaveform);
+
+            source.start(0);
+            source.onended = () => {
+                if (controller.audioContext && controller.audioContext.state !== 'closed') {
+                   controller.stop();
+                }
+            };
+            controller.sourceNodes.push(source);
+        } catch (error) {
+            console.error("خطا در پخش از کش:", error);
+            this.stopCurrentStream();
+        }
+    }
+};
+
+export function clearCacheForMessage(messageIndex) { ttsCache.delete(messageIndex); }
+export function clearAllCache() { ttsCache.clear(); }
+export function hasCacheForMessage(messageIndex) { return ttsCache.has(messageIndex); }
+export function getAudioState() { const controller = ttsStreamManager.activeStreamController; if (!controller || !controller.audioContext) return { status: 'idle', messageIndex: null }; return { status: controller.audioContext.state, messageIndex: controller.messageIndex }; }
+export function togglePauseResumeAudio() { const controller = ttsStreamManager.activeStreamController; if (!controller) return; if (controller.audioContext.state === 'running') controller.pause(); else if (controller.audioContext.state === 'suspended') controller.resume(); }
+export function stopAudio() { ttsStreamManager.stopCurrentStream(); }
+export function stream(messageIndex, text, button) { ttsStreamManager.stream(messageIndex, text, button); }
+export function playFromCache(messageIndex, button) { ttsStreamManager.playFromCache(messageIndex, button); }
+export function initTtsPlayer() { dom.globalPlayerPlayPause.addEventListener('click', togglePauseResumeAudio); dom.globalPlayerClose.addEventListener('click', stopAudio); }
+function formatTime(s) { if (isNaN(s) || s < 0) return '0:00'; const minutes = Math.floor(s / 60); const seconds = Math.floor(s % 60).toString().padStart(2, '0'); return `${minutes}:${seconds}`; }
+function drawWaveform() { if (!dom.waveformCanvas || !ttsStreamManager.activeStreamController) { if (ttsState.animationFrameId) { cancelAnimationFrame(ttsState.animationFrameId); ttsState.animationFrameId = null; } return; } const canvas = dom.waveformCanvas; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) { canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); } const width = canvas.width / dpr, height = canvas.height / dpr; ctx.clearRect(0, 0, width, height); const barWidth = 2, barGap = 1.5, totalBarWidth = barWidth + barGap; const numBars = Math.floor(width / totalBarWidth); const offset = (width - numBars * totalBarWidth) / 2; const inactiveColor = getComputedStyle(document.documentElement).classList.contains('dark') ? '#4b5563' : '#d1d5db'; const controller = ttsStreamManager.activeStreamController; for (let i = 0; i < numBars; i++) { let barHeight = height * 0.1; if(controller && controller.audioContext && controller.audioContext.state === 'running') { barHeight = (Math.sin((i + Date.now() / 200) * 0.2) + 1) / 2 * height * 0.7 + height * 0.1; } const x = offset + i * totalBarWidth, y = (height - barHeight) / 2; ctx.fillStyle = inactiveColor; ctx.fillRect(x, y, barWidth, barHeight); } ttsState.animationFrameId = requestAnimationFrame(drawWaveform); }
+function updateGlobalPlayerUI(controller) { if (!controller || !controller.audioContext || controller.audioContext.state !== 'running') return; const currentTime = controller.elapsedTime + (Date.now() - controller.startTime) / 1000; dom.globalPlayerCurrentTime.textContent = formatTime(currentTime); }
+function showGlobalPlayer(isLoading = false, isPlaying = false) { dom.globalAudioPlayer.classList.add('visible'); dom.globalPlayerText.classList.add('hidden'); dom.globalPlayerTotalTime.classList.add('hidden'); dom.globalPlayerPlayPause.style.display = isLoading ? 'none' : 'flex'; dom.globalPlayerLoading.classList.toggle('hidden', !isLoading); dom.globalPlayerPlayIcon.classList.toggle('hidden', isPlaying); dom.globalPlayerPauseIcon.classList.toggle('hidden', !isPlaying); }
+export function hideGlobalPlayer() { dom.globalAudioPlayer.classList.remove('visible'); ttsState.currentMessageIndex = null; if (ttsState.animationFrameId) { cancelAnimationFrame(ttsState.animationFrameId); ttsState.animationFrameId = null; } }
+export function setSpeakButtonLoading(button, isLoading) { if (button) { button.classList.toggle('loading', isLoading); if(isLoading) button.classList.remove('playing'); } }