Create static/js/ui/tools.js

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