imcp 0.1.7 → 0.1.8-dev

package/dist/web/public/js/modal/loadingUI.js

@@ -1,74 +0,0 @@
-import { queueMessage } from './messageQueue.js';
-
-/**
- * Display the installation loading modal and prepare it for messages
- * @param {string} operation Operation name to display
- */
-export function showLoadingModal(operation = 'Installing') {
-    const elements = getLoadingElements();
-    if (!elements) {
-        console.error('[LoadingModal] Required elements not found');
-        return;
-    }
-
-    elements.modal.style.display = 'block';
-    elements.messageContainer.innerHTML = '';
-    elements.title.textContent = `${operation}...`;
-}
-
-/**
- * Hide the installation loading modal
- */
-export function hideLoadingModal() {
-    const modal = document.getElementById('installLoadingModal');
-    if (!modal) {
-        console.error('[LoadingModal] Loading modal not found');
-        return;
-    }
-
-    modal.style.display = 'none';
-    refreshPageWithCategory();
-}
-
-/**
- * Append a message to the loading modal
- * @param {string} message Message to display
- * @param {boolean} isCompletion Whether this is a completion message
- */
-export function appendLoadingMessage(message, isCompletion = false) {
-    queueMessage(message, isCompletion);
-}
-
-/**
- * Get the loading modal elements
- * @private
- * @returns {Object|null} Object containing modal elements or null if not found
- */
-function getLoadingElements() {
-    const modal = document.getElementById('installLoadingModal');
-    const messageContainer = document.getElementById('installLoadingMessage');
-    const title = document.querySelector('.loading-title');
-
-    if (!modal || !messageContainer || !title) {
-        return null;
-    }
-
-    return { modal, messageContainer, title };
-}
-
-/**
- * Refresh the page maintaining category selection
- * @private
- */
-function refreshPageWithCategory() {
-    const lastSelected = localStorage.getItem('lastSelectedCategory');
-
-    setTimeout(() => {
-        if (lastSelected) {
-            window.location.href = window.location.pathname +
-                '?category=' + encodeURIComponent(lastSelected);
-        } else {
-            location.reload();
-        }
-    }, 100);
-}

package/dist/web/public/js/modal/messageQueue.js

@@ -1,112 +0,0 @@
-/** @type {boolean} Flag indicating if a message is currently being appended */
-let isAppending = false;
-
-/** @type {boolean} Flag indicating if completion UI update is pending */
-let completionPending = false;
-
-/**
- * Message queue for delayed loading modal updates.
- * @type {Array<{msg: string, isCompletion: boolean}>}
- */
-let messageQueue = [];
-
-/**
- * Process messages in the queue with a delay between each message.
- * When the queue is empty and completion is pending, triggers the completion UI.
- * @private
- */
-function processMessageQueue() {
-    if (isAppending || messageQueue.length === 0) {
-        // Only update completion UI if all messages have been displayed
-        if (messageQueue.length === 0 && completionPending) {
-            // Add small delay before showing completion to ensure last message is visible
-            setTimeout(() => {
-                updateCompletionUI();
-                completionPending = false;
-            }, 500);
-        }
-        return;
-    }
-
-    isAppending = true;
-    const { msg, isCompletion } = messageQueue.shift();
-
-    if (isCompletion) {
-        completionPending = true;
-    }
-
-    appendInstallLoadingMessage(msg);
-
-    setTimeout(() => {
-        isAppending = false;
-        processMessageQueue();
-    }, 1000);
-}
-
-/**
- * Queue a message to be displayed with a delay.
- * Messages are displayed sequentially with a 1-second delay between each.
- * @param {string} msg The message to display
- * @param {boolean} [isCompletion=false] If true, triggers completion UI after message display
- */
-export function delayedAppendInstallLoadingMessage(msg, isCompletion = false) {
-    messageQueue.push({ msg, isCompletion });
-    processMessageQueue();
-}
-
-function updateCompletionUI() {
-    const loadingTitle = document.querySelector('.loading-title');
-    const loadingIcon = document.querySelector('.loading-icon');
-
-    if (loadingTitle) {
-        loadingTitle.textContent = 'Completed';
-        loadingTitle.classList.add('completed');
-    }
-
-    if (loadingIcon) {
-        loadingIcon.innerHTML = `
-            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                <circle cx="24" cy="24" r="20" stroke="#059669" stroke-width="4"/>
-                <path d="M16 24l6 6 12-12" stroke="#059669" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        `;
-        loadingIcon.classList.add('completed');
-    }
-}
-
-/**
- * Internal function to append a message to the loading modal with formatting.
- * @private
- * @param {string} message - The message to append
- */
-function appendInstallLoadingMessage(message) {
-    const loadingMsg = document.getElementById('installLoadingMessage');
-    if (loadingMsg) {
-        // Split message on newlines
-        const lines = message.split('\n');
-
-        lines.forEach(line => {
-            // Check if line contains an error
-            const isError = line.toLowerCase().includes('error') ||
-                line.toLowerCase().includes('failed') ||
-                line.toLowerCase().includes('timeout');
-
-            const formattedMessage = line;
-
-            // Create message container
-            const messageDiv = document.createElement('div');
-            messageDiv.className = 'message-line';
-
-            // Apply yellow color for error messages
-            if (isError) {
-                messageDiv.style.color = '#f59e0b';
-            }
-            messageDiv.innerHTML = formattedMessage;
-
-            loadingMsg.appendChild(messageDiv);
-            loadingMsg.scrollTop = loadingMsg.scrollHeight;
-        });
-    } else {
-        console.error('[LoadingModal] Element not found: installLoadingMessage');
-    }
-}

package/dist/web/public/js/modal/modalUI.js

@@ -1,214 +0,0 @@
-import { showConfirm } from '../notifications.js';
-import { handleInstallation, handleUninstallation } from './installHandler.js';
-import { showLoadingModal } from './loadingUI.js';
-import { compareVersions } from './version.js';
-
-/**
- * Show installation modal for MCP tools
- * @param {string} categoryName Category name
- * @param {string} serverName Server name
- */
-export async function showInstallModal(categoryName, serverName) {
-    console.log("Showing install modal for:", serverName);
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    const elements = getModalElements();
-    if (!elements) return;
-
-    initializeModal(elements, serverName);
-
-    try {
-        const { targetData, serverData } = await fetchModalData(categoryName);
-        const mcpServer = findMcpServer(serverData, serverName);
-
-        renderModalContent(elements, {
-            targetData,
-            serverData,
-            mcpServer,
-            categoryName,
-            serverName
-        });
-
-        setupFormHandler(elements, categoryName, serverName, serverData);
-        elements.modal.style.display = "block";
-    } catch (error) {
-        handleModalError(error, elements.targetDiv);
-    }
-}
-
-/**
- * Close modal and refresh with selected category
- */
-export function closeModal() {
-    const modal = document.getElementById('installModal');
-    if (modal) {
-        modal.style.display = "none";
-        refreshWithCategory();
-    }
-}
-
-/**
- * Setup click outside modal handler
- */
-export function setupModalOutsideClick() {
-    window.onclick = function (event) {
-        const modal = document.getElementById('installModal');
-        if (event.target === modal) {
-            closeModal();
-        }
-    };
-}
-
-// Private helper functions
-
-function getModalElements() {
-    const modal = document.getElementById('installModal');
-    if (!modal) {
-        console.error('Modal container not found');
-        return null;
-    }
-
-    const elements = {
-        modal,
-        title: modal.querySelector('#modalTitle'),
-        envInputs: modal.querySelector('#modalEnvInputs'),
-        targetDiv: modal.querySelector('#modalTargets'),
-        requirements: modal.querySelector('#modalRequirements'),
-        arguments: modal.querySelector('#modalArguments')
-    };
-
-    if (!Object.values(elements).every(Boolean)) {
-        console.error('Required modal elements not found');
-        return null;
-    }
-
-    return elements;
-}
-
-function initializeModal(elements, serverName) {
-    window.selectedClients = [];
-    elements.title.textContent = `Install ${serverName}`;
-    clearModalSections(elements);
-}
-
-function clearModalSections(elements) {
-    ['envInputs', 'targetDiv', 'requirements', 'arguments'].forEach(section => {
-        elements[section].innerHTML = '';
-    });
-}
-
-async function fetchModalData(categoryName) {
-    const [targetResponse, serverResponse] = await Promise.all([
-        fetch('/api/targets'),
-        fetch(`/api/categories/${categoryName}`)
-    ]);
-
-    if (!targetResponse.ok || !serverResponse.ok) {
-        throw new Error('Failed to fetch required data');
-    }
-
-    const [targetData, serverData] = await Promise.all([
-        targetResponse.json(),
-        serverResponse.json()
-    ]);
-
-    if (!targetData.success || !serverData.success) {
-        throw new Error('Invalid data received');
-    }
-
-    return { targetData, serverData };
-}
-
-function findMcpServer(serverData, serverName) {
-    const mcpServer = serverData.data.feedConfiguration.mcpServers
-        .find(server => server.name === serverName);
-
-    if (!mcpServer) {
-        throw new Error('Server configuration not found');
-    }
-
-    return mcpServer;
-}
-
-function renderModalContent(elements, data) {
-    const { targetData, serverData, mcpServer, categoryName, serverName } = data;
-    const installationStatus = serverData.data.installationStatus || {};
-    const serverStatuses = installationStatus.serversStatus || {};
-    const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-
-    renderClientSection(elements.targetDiv, targetData.data, serverStatus, serverName, categoryName);
-    renderEnvironmentSection(elements.envInputs, mcpServer, targetData.clientMcpSettings, serverName);
-    renderArgumentsSection(elements.arguments, mcpServer);
-    renderRequirementsSection(elements.requirements, mcpServer, serverData, categoryName, serverName);
-}
-
-function setupFormHandler(elements, categoryName, serverName, serverData) {
-    const form = document.getElementById('installForm');
-    form.onsubmit = (e) => handleFormSubmit(e, {
-        elements,
-        categoryName,
-        serverName,
-        serverData
-    });
-}
-
-function handleFormSubmit(event, options) {
-    event.preventDefault();
-    const { elements, categoryName, serverName, serverData } = options;
-
-    const formData = collectFormData(elements);
-    if (!validateFormData(formData)) return;
-
-    const installOptions = buildInstallOptions(formData, serverData, serverName);
-    handleInstallation(categoryName, serverName, formData.targets, installOptions);
-}
-
-function collectFormData(elements) {
-    return {
-        envVars: getEnvironmentVariables(elements.envInputs),
-        args: getArguments(elements.arguments),
-        pythonEnv: getPythonEnvironment(),
-        targets: getSelectedTargets(),
-        requirements: getSelectedRequirements()
-    };
-}
-
-function validateFormData(formData) {
-    const { targets, requirements } = formData;
-    if (targets.length === 0 && requirements.length === 0) {
-        showError('Please select at least one client or requirement to update.');
-        return false;
-    }
-    return true;
-}
-
-function handleModalError(error, targetDiv) {
-    console.error("Error loading data:", error);
-    targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
-}
-
-function refreshWithCategory() {
-    const lastSelected = localStorage.getItem('lastSelectedCategory');
-    setTimeout(() => {
-        if (lastSelected) {
-            window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
-        } else {
-            location.reload();
-        }
-    }, 100);
-}
-
-// Add CSS styles for the toggle switch
-const styleElement = document.createElement('style');
-styleElement.textContent = `
-    .toggle-bg.bg-blue-500 {
-        background-color: #3b82f6;
-    }
-    .toggle-bg {
-        transition: background-color 0.3s;
-    }
-    .toggle-bg div {
-        transition: transform 0.3s;
-    }
-`;
-document.head.appendChild(styleElement);

package/dist/web/public/js/modal/version.js

@@ -1,20 +0,0 @@
-/**
- * Simple version comparison function
- * @param {string} v1 First version
- * @param {string} v2 Second version
- * @returns {number} 1 if v1 > v2, -1 if v1 < v2, 0 if equal
- */
-export function compareVersions(v1, v2) {
-    const v1Parts = v1.split('.').map(Number);
-    const v2Parts = v2.split('.').map(Number);
-
-    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
-        const v1Part = v1Parts[i] || 0;
-        const v2Part = v2Parts[i] || 0;
-
-        if (v1Part > v2Part) return 1;
-        if (v1Part < v2Part) return -1;
-    }
-
-    return 0;
-}