static/js/ui/tools.js

// 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');
    }
}