refactor(web_api): fix import paths, modularize routers and decompose agent pipeline

2026-08-15 15:41:37 +03:00
parent c0a5145604
commit 4e3c99b728
12 changed files with 995 additions and 621 deletions
@@ -1,4 +1,19 @@
-// Вспомогательная функция для автоматического изменения высоты текстового поля
+/**
+===============================================================================
+FILE: modules/web_api/static/js/chat.js
+ROLE: Клиентский интерфейс диалога, Drag-and-Drop вложений, генерация динамических
+      кнопок подтверждений и рендеринг Generative UI интерактивного виджета задач.
+
+AI-CONTEXT-ANCHORS:
+  - ANCHOR[FILE_UPLOAD_UTILS]: Выбор, превью и очистка прикрепленных файлов.
+  - ANCHOR[INTERACTIVE_BUTTONS_CORE]: Деактивация и быстрая отправка нажатых кнопок.
+  - ANCHOR[INTERACTIVE_TASK_WIDGET_JS]: Рендерер и REST-обработчики виджета задач.
+  - ANCHOR[CHAT_SEND_PIPELINE]: Главный метод sendMessage и вставка сообщений в DOM.
+  - ANCHOR[DRAG_DROP_HANDLERS]: Обработка перетаскивания файлов в окно чата.
+===============================================================================
+*/
+
+// --- [SECTION 1: FILE UPLOAD HELPERS] --- # ANCHOR[FILE_UPLOAD_UTILS]
 function updateInputHeight(el) {
    if (!el) return;
    el.style.height = "24px";
@@ -36,7 +51,7 @@ function clearAttachedFile() {
    if (previewContainer) previewContainer.classList.add("hidden");
 }

-// Деактивация всех старых кнопок в истории
+// --- [SECTION 2: ACTION BUTTONS CORE] --- # ANCHOR[INTERACTIVE_BUTTONS_CORE]
 function disableAllActionButtons() {
    const allBtnContainers = document.querySelectorAll(".action-buttons-container");
    allBtnContainers.forEach(container => {
@@ -47,7 +62,6 @@ function disableAllActionButtons() {
    });
 }

-// Быстрая отправка текста кнопки
 function handleActionButtonClick(text) {
    disableAllActionButtons();
    const input = document.getElementById("user-input");
@@ -57,6 +71,214 @@ function handleActionButtonClick(text) {
    }
 }

+// --- [SECTION 3: INTERACTIVE TASK WIDGET] --- # ANCHOR[INTERACTIVE_TASK_WIDGET_JS]
+let activeWidgetTasksMap = new Map();
+
+function renderTaskItemsHtml(tasks, filterStatus) {
+    const filtered = tasks.filter(t => {
+        if (filterStatus === "ALL") return true;
+        return t.status === filterStatus;
+    });
+
+    if (filtered.length === 0) {
+        const label = filterStatus === 'BACKLOG' ? 'В планах' : filterStatus === 'IN_PROGRESS' ? 'В работе' : filterStatus === 'COMPLETED' ? 'Завершенные' : 'Все';
+        return `<div class="text-slate-400 text-xs py-4 text-center">Нет задач со статусом «${label}»</div>`;
+    }
+
+    return filtered.map(t => {
+        const isDone = t.status === "COMPLETED";
+        const isProgress = t.status === "IN_PROGRESS";
+        const checkedAttr = isDone ? "checked" : "";
+        const textClass = isDone ? "line-through text-slate-400" : "text-slate-800 font-medium";
+
+        let statusPill = `<span class="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded border border-slate-200">В планах</span>`;
+        if (isDone) {
+            statusPill = `<span class="text-[10px] bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded border border-emerald-300 font-semibold">Завершено</span>`;
+        } else if (isProgress) {
+            statusPill = `<span class="text-[10px] bg-amber-50 text-amber-700 px-2 py-0.5 rounded border border-amber-300 font-semibold">В работе</span>`;
+        }
+
+        let prioPill = "";
+        if (t.priority === "HIGH") {
+            prioPill = `<span class="text-[9px] bg-red-50 text-red-700 font-bold px-1.5 py-0.5 rounded border border-red-200 uppercase">HIGH</span>`;
+        }
+
+        return `
+            <div class="flex items-center justify-between p-2.5 bg-slate-50 hover:bg-slate-100/80 rounded-xl border border-slate-200 transition gap-2" id="widget-task-${t.task_id}">
+                <div class="flex items-center gap-2.5 flex-1 min-w-0">
+                    <input type="checkbox" ${checkedAttr} onchange="toggleTaskStatusInline('${t.task_id}', this.checked)" 
+                        class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 cursor-pointer">
+                    <div class="flex flex-col min-w-0 flex-1">
+                        <div class="flex items-center gap-1.5 mb-0.5">
+                            <span class="font-mono text-[11px] font-bold text-slate-700">${t.task_id}</span>
+                            ${prioPill}
+                            ${statusPill}
+                        </div>
+                        <span class="text-xs ${textClass} truncate leading-tight">${escapeHtml(t.title)}</span>
+                    </div>
+                </div>
+                <button type="button" onclick="deleteTaskInline('${t.task_id}')" class="text-slate-400 hover:text-red-500 p-1.5 transition rounded-lg hover:bg-red-50" title="Удалить задачу">
+                    <i class="fa-solid fa-trash-can text-xs"></i>
+                </button>
+            </div>
+        `;
+    }).join("");
+}
+
+function renderInteractiveTaskCard(tasks) {
+    if (!tasks || !Array.isArray(tasks)) return "";
+    const widgetId = "task_widget_" + Date.now();
+    activeWidgetTasksMap.set(widgetId, { tasks: tasks, filter: "ALL" });
+
+    const itemsHtml = renderTaskItemsHtml(tasks, "ALL");
+
+    return `
+        <div class="task-widget-card mt-3 bg-white border border-slate-200 rounded-2xl p-3.5 shadow-sm space-y-3" id="${widgetId}">
+            <!-- Вкладки фильтров -->
+            <div class="flex items-center gap-1 pb-2 border-b border-slate-100 overflow-x-auto no-scrollbar text-xs font-semibold">
+                <button type="button" onclick="filterTaskWidget('${widgetId}', 'ALL', this)" class="widget-tab-btn px-2.5 py-1 rounded-lg bg-indigo-50 text-indigo-600 font-bold border border-indigo-200">Все</button>
+                <button type="button" onclick="filterTaskWidget('${widgetId}', 'IN_PROGRESS', this)" class="widget-tab-btn px-2.5 py-1 rounded-lg text-slate-500 hover:text-slate-700">В работе</button>
+                <button type="button" onclick="filterTaskWidget('${widgetId}', 'BACKLOG', this)" class="widget-tab-btn px-2.5 py-1 rounded-lg text-slate-500 hover:text-slate-700">В планах</button>
+                <button type="button" onclick="filterTaskWidget('${widgetId}', 'COMPLETED', this)" class="widget-tab-btn px-2.5 py-1 rounded-lg text-slate-500 hover:text-slate-700">Завершенные</button>
+            </div>
+
+            <!-- Список элементов задач -->
+            <div class="widget-items-container space-y-2 max-h-72 overflow-y-auto pr-1">
+                ${itemsHtml}
+            </div>
+
+            <!-- Быстрое создание новой задачи -->
+            <div class="pt-2 border-t border-slate-100 flex items-center gap-2">
+                <input type="text" placeholder="Новая задача..." class="flex-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-1.5 text-xs text-slate-800 focus:outline-none focus:border-indigo-600 focus:bg-white transition" onkeydown="if(event.key==='Enter') addTaskInline('${widgetId}', this)">
+                <button type="button" onclick="addTaskInline('${widgetId}', this.previousElementSibling)" class="bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white px-3 py-1.5 rounded-xl text-xs font-semibold shadow-sm transition flex items-center gap-1">
+                    <i class="fa-solid fa-plus text-[10px]"></i> Добавить
+                </button>
+            </div>
+        </div>
+    `;
+}
+
+function filterTaskWidget(widgetId, status, btnEl) {
+    const state = activeWidgetTasksMap.get(widgetId);
+    if (!state) return;
+    state.filter = status;
+
+    const widgetEl = document.getElementById(widgetId);
+    if (!widgetEl) return;
+
+    widgetEl.querySelectorAll(".widget-tab-btn").forEach(b => {
+        b.className = "widget-tab-btn px-2.5 py-1 rounded-lg text-slate-500 hover:text-slate-700";
+    });
+    btnEl.className = "widget-tab-btn px-2.5 py-1 rounded-lg bg-indigo-50 text-indigo-600 font-bold border border-indigo-200";
+
+    const container = widgetEl.querySelector(".widget-items-container");
+    if (container) {
+        container.innerHTML = renderTaskItemsHtml(state.tasks, status);
+    }
+}
+
+async function toggleTaskStatusInline(taskId, isChecked) {
+    const token = typeof API_TOKEN !== 'undefined' && API_TOKEN ? API_TOKEN : localStorage.getItem("scud_api_auth_token");
+    const newStatus = isChecked ? "COMPLETED" : "BACKLOG";
+
+    try {
+        const res = await fetch(`/api/v1/tasks/${taskId}`, {
+            method: "PATCH",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer " + token
+            },
+            body: JSON.stringify({ status: newStatus })
+        });
+
+        if (res.ok) {
+            // Обновляем статус задачи во всех локальных виджетах
+            for (let [wId, state] of activeWidgetTasksMap.entries()) {
+                const targetTask = state.tasks.find(t => t.task_id === taskId);
+                if (targetTask) {
+                    targetTask.status = newStatus;
+                    const widgetEl = document.getElementById(wId);
+                    const container = widgetEl?.querySelector(".widget-items-container");
+                    if (container) {
+                        container.innerHTML = renderTaskItemsHtml(state.tasks, state.filter);
+                    }
+                }
+            }
+            if (typeof loadTasks === "function") loadTasks();
+        }
+    } catch (err) {
+        console.error("[Task Patch Error]", err);
+    }
+}
+
+async function deleteTaskInline(taskId) {
+    if (!confirm(`Удалить задачу ${taskId}?`)) return;
+    const token = typeof API_TOKEN !== 'undefined' && API_TOKEN ? API_TOKEN : localStorage.getItem("scud_api_auth_token");
+
+    try {
+        const res = await fetch(`/api/v1/tasks/${taskId}`, {
+            method: "DELETE",
+            headers: { "Authorization": "Bearer " + token }
+        });
+
+        if (res.ok) {
+            for (let [wId, state] of activeWidgetTasksMap.entries()) {
+                state.tasks = state.tasks.filter(t => t.task_id !== taskId);
+                const widgetEl = document.getElementById(wId);
+                const container = widgetEl?.querySelector(".widget-items-container");
+                if (container) {
+                    container.innerHTML = renderTaskItemsHtml(state.tasks, state.filter);
+                }
+            }
+            if (typeof loadTasks === "function") loadTasks();
+        }
+    } catch (err) {
+        console.error("[Task Delete Error]", err);
+    }
+}
+
+async function addTaskInline(widgetId, inputEl) {
+    if (!inputEl) return;
+    const title = inputEl.value.trim();
+    if (!title) return;
+
+    const token = typeof API_TOKEN !== 'undefined' && API_TOKEN ? API_TOKEN : localStorage.getItem("scud_api_auth_token");
+
+    try {
+        const res = await fetch("/api/v1/tasks", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer " + token
+            },
+            body: JSON.stringify({ title: title, priority: "MEDIUM", module: "general" })
+        });
+        
+        if (res.ok) {
+            inputEl.value = "";
+            // Мгновенная выгрузка свежего списка без обращения к LLM
+            const tasksRes = await fetch("/api/v1/tasks", {
+                headers: { "Authorization": "Bearer " + token }
+            });
+            const updatedTasks = await tasksRes.json();
+
+            const state = activeWidgetTasksMap.get(widgetId);
+            if (state) {
+                state.tasks = updatedTasks;
+                const widgetEl = document.getElementById(widgetId);
+                const container = widgetEl?.querySelector(".widget-items-container");
+                if (container) {
+                    container.innerHTML = renderTaskItemsHtml(updatedTasks, state.filter);
+                }
+            }
+            if (typeof loadTasks === "function") loadTasks();
+        }
+    } catch (err) {
+        console.error("[Task Add Error]", err);
+    }
+}
+
+// --- [SECTION 4: CHAT SEND PIPELINE] --- # ANCHOR[CHAT_SEND_PIPELINE]
 async function sendMessage(e) {
    if (e && e.preventDefault) e.preventDefault();

@@ -69,7 +291,6 @@ async function sendMessage(e) {

    if (!text && !selectedFile) return;

-    // Деактивируем предыдущие интерактивные кнопки
    disableAllActionButtons();

    let userDisplayHtml = escapeHtml(text);
@@ -131,7 +352,6 @@ async function sendMessage(e) {
        const assistantTitle = isGuest ? "Локальная нейросеть (Гость)" : "ИИ-Ассистент SCUD Orion AI";
        const replyText = data.reply || "Пустой ответ от нейросети";

-        // Генерация блока кнопок подтверждения при необходимости
        let actionButtonsHtml = "";
        const actionData = data.action_type || data.action;

@@ -168,12 +388,18 @@ async function sendMessage(e) {
            `;
        }

+        let interactiveWidgetHtml = "";
+        if (actionData && actionData.type === "TASK_INTERACTIVE_CARD" && Array.isArray(actionData.tasks)) {
+            interactiveWidgetHtml = renderInteractiveTaskCard(actionData.tasks);
+        }
+
        const botMsgHtml = `
            <div class="bg-white border border-slate-200 rounded-2xl p-3.5 shadow-sm max-w-2xl mb-3">
                <p class="text-[11px] font-bold text-indigo-600 uppercase tracking-wider mb-1">
                    <i class="fa-solid fa-robot mr-1"></i> ${assistantTitle}
                </p>
                <p class="text-slate-800 text-xs sm:text-sm whitespace-pre-wrap leading-relaxed">${escapeHtml(replyText)}</p>
+                ${interactiveWidgetHtml}
                ${actionButtonsHtml}
            </div>
        `;
@@ -213,6 +439,7 @@ function escapeHtml(text) {
        .replace(/'/g, "&#039;");
 }

+// --- [SECTION 5: DRAG & DROP AND KEYBOARD LISTENERS] --- # ANCHOR[DRAG_DROP_HANDLERS]
 document.addEventListener("DOMContentLoaded", () => {
    const input = document.getElementById("user-input");
    const dropZone = document.getElementById("chat-window")?.parentElement;
@@ -1,6 +1,20 @@
+/**
+===============================================================================
+FILE: modules/web_api/static/js/tasks.js
+ROLE: Управление боковой панелью задач (Drawer), фильтрация и рендеринг карточек.
+
+AI-CONTEXT-ANCHORS:
+  - ANCHOR[DRAWER_TOGGLE]: Открытие и закрытие выезжающей панели.
+  - ANCHOR[TASKS_FILTER]: Фильтрация списка (ALL, IN_PROGRESS, BACKLOG, COMPLETED).
+  - ANCHOR[TASKS_LOAD_FETCH]: Асинхронная загрузка задач через /api/v1/tasks.
+  - ANCHOR[TASKS_RENDER_DOM]: Генерация HTML-карточек в боковом меню.
+===============================================================================
+*/
+
 let currentFilter = 'ALL';
 let allTasks = [];

+// --- [SECTION 1: DRAWER TOGGLE] --- # ANCHOR[DRAWER_TOGGLE]
 function toggleDrawer() {
    if (typeof IS_GUEST !== 'undefined' && IS_GUEST) return;
    const drawer = document.getElementById("task-drawer");
@@ -18,6 +32,7 @@ function toggleDrawer() {
    }
 }

+// --- [SECTION 2: FILTER CONTROL] --- # ANCHOR[TASKS_FILTER]
 function setFilter(status) {
    currentFilter = status;
    ["ALL", "IN_PROGRESS", "BACKLOG", "COMPLETED"].forEach(f => {
@@ -31,6 +46,7 @@ function setFilter(status) {
    renderTasks();
 }

+// --- [SECTION 3: ASYNC DATA FETCH] --- # ANCHOR[TASKS_LOAD_FETCH]
 async function loadTasks() {
    const badge = document.getElementById("task-count-badge");
    const container = document.getElementById("tasks-container");
@@ -62,7 +78,6 @@ async function loadTasks() {

        const data = await res.json();

-        // Гибкое определение структуры данных (массив или объект с ключом tasks)
        if (Array.isArray(data)) {
            allTasks = data;
        } else if (data && Array.isArray(data.tasks)) {
@@ -88,6 +103,7 @@ async function loadTasks() {
    }
 }

+// --- [SECTION 4: DOM RENDERING] --- # ANCHOR[TASKS_RENDER_DOM]
 function renderTasks() {
    const container = document.getElementById("tasks-container");
    if (!container) return;
@@ -105,13 +121,16 @@ function renderTasks() {

    container.innerHTML = filtered.map(t => {
        let statusBadge = "bg-slate-100 text-slate-600 border-slate-200";
+        let statusLabel = "В планах";
        let cardBg = "bg-white";
        
        if (t.status === "COMPLETED") {
            statusBadge = "bg-emerald-50 text-emerald-700 border-emerald-300 font-semibold";
+            statusLabel = "Завершено";
            cardBg = "bg-emerald-50/20";
        } else if (t.status === "IN_PROGRESS") {
            statusBadge = "bg-amber-50 text-amber-700 border-amber-300 font-bold";
+            statusLabel = "В работе";
            cardBg = "bg-amber-50/20 border-amber-200";
        }

@@ -131,7 +150,7 @@ function renderTasks() {
                        <span class="font-mono text-xs font-bold text-slate-900 bg-slate-100 px-2 py-0.5 rounded border border-slate-200">${t.task_id || t.id || 'TASK'}</span>
                        <span class="text-[10px] uppercase px-1.5 py-0.5 rounded border ${priorityBadge}">${t.priority || 'MEDIUM'}</span>
                    </div>
-                    <span class="text-[10px] uppercase px-2 py-0.5 rounded border ${statusBadge}">${t.status || 'BACKLOG'}</span>
+                    <span class="text-[10px] uppercase px-2 py-0.5 rounded border ${statusBadge}">${statusLabel}</span>
                </div>
                <h3 class="text-xs font-semibold text-slate-800 mb-1 leading-snug">${t.title || t.description || ''}</h3>
                <div class="text-[10px] text-slate-400 font-mono flex items-center gap-1">
@@ -142,4 +161,4 @@ function renderTasks() {
            </div>
        `;
    }).join("");
-}
+}