imcp 0.1.7 → 0.1.8-dev

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

@@ -1,595 +1,2 @@
-import { showToast, showConfirm } from '../notifications.js';
-import { showInstallLoadingModal, updateOverallInstallStatus } from './loadingModal.js';
-// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer used
-import { uninstallTools } from './installation.js';
-import { handleBulkClientInstall } from './installation.js';
-import { compareVersions } from './versionUtils.js';
-
-/**
- * Set up client items in the modal
- */
-export function setupClientItems(targets, serverStatus, categoryName, serverName, targetDiv) {
-    targets.forEach(target => {
-        const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };
-
-        // Determine client status
-        let statusText = '';
-        let statusClass = '';
-
-        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
-            statusText = 'Installed';
-            statusClass = 'installed';
-        } else if (operationStatus.status === 'pending') {
-            statusText = 'Pending Requirements';
-            statusClass = 'pending';
-        } else if (operationStatus.status === 'in-progress') {
-            statusText = 'In Progress';
-            statusClass = 'pending';
-        } else if (operationStatus.status === 'failed') {
-            statusText = 'Failed';
-            statusClass = 'not-installed';
-        }
-
-        const isConfigured = operationStatus.status === 'completed' && operationStatus.type === 'install';
-        const isInProgress = operationStatus.status === 'in-progress';
-        const isSelectable = !isConfigured && !isInProgress;
-
-        const clientItem = createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress);
-        setupClientItemListeners(clientItem, target, isSelectable);
-        setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass);
-        targetDiv.appendChild(clientItem);
-    });
-
-    addSectionTitle(targetDiv);
-}
-
-/**
- * Set up environment variables section in the modal
- */
-export function setupEnvironmentVariables(mcpServer, envInputsDiv, targetData) {
-    // For SSE mode, don't show env section at all
-    if (mcpServer.mode === 'sse') {
-        envInputsDiv.style.display = 'none';
-        return;
-    }
-
-    const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};
-    addEnvironmentTitle(envInputsDiv);
-
-    // Fetch system settings to get userConfigurations for env defaults
-    fetch('/api/settings')
-        .then(response => response.json())
-        .then(data => {
-            const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};
-            if (Object.keys(envRequirements).length === 0) {
-                addNoEnvMessage(envInputsDiv);
-            } else {
-                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, userConfigurations);
-            }
-        })
-        .catch(() => {
-            // fallback to old logic if fetch fails
-            if (Object.keys(envRequirements).length === 0) {
-                addNoEnvMessage(envInputsDiv);
-            } else {
-                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, {});
-            }
-        });
-}
-
-/**
- * Set up installation arguments section in the modal
- */
-export function setupInstallationArguments(installation, modalArguments, categoryName, mcpServer) {
-    // For SSE mode, don't show arguments section at all
-    if (mcpServer?.mode === 'sse') {
-        modalArguments.style.display = 'none';
-        return;
-    }
-
-    if (!installation) return;
-
-    addArgumentsTitle(modalArguments);
-    const container = createArgumentsContainer();
-    modalArguments.appendChild(container);
-
-    if (installation.args && Array.isArray(installation.args)) {
-        installation.args.forEach(arg => {
-            container.appendChild(createArgumentInput(arg));
-        });
-    } else {
-        container.appendChild(createArgumentInput());
-    }
-
-    if (installation.command === 'python' || installation.command.includes('python')) {
-        addPythonEnvironmentInput(categoryName, mcpServer.name, modalArguments);
-    }
-}
-
-/**
- * Set up server requirements section in the modal
- */
-export function setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements) {
-    // For SSE mode, don't show requirements section at all
-    if (mcpServer.mode === 'sse') {
-        modalRequirements.style.display = 'none';
-        return;
-    }
-
-    const serverRequirements = mcpServer.dependencies?.requirements || [];
-    const requirements = serverData.data.installationStatus?.requirementsStatus || {};
-
-    if (serverRequirements.length > 0) {
-        const reqHtml = renderRequirements(serverRequirements, requirements, categoryName, serverName);
-        modalRequirements.innerHTML = `
-            <h3 class="text-lg font-semibold text-gray-700 mb-3">Dependencies</h3>
-            <p class="text-sm text-gray-600 mb-4">These dependencies will be automatically installed when installing the server</p>
-            ${reqHtml}
-        `;
-
-        setupUpdateToggles(modalRequirements);
-    } else {
-        modalRequirements.innerHTML = '<p class="text-gray-600">No additional dependencies required.</p>';
-    }
-}
-
-/**
- * Set up the form submit handler
- */
-export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modalRequirements, categoryName, serverName, serverStatuses, serverData, mcpServer) {
-    form.onsubmit = (e) => {
-        e.preventDefault();
-
-        const envVars = {};
-        const args = [];
-        const requirementsToUpdate = [];
-        let pythonEnv = undefined;
-
-        // Only collect env, args and requirements if not in SSE mode
-        if (mcpServer?.mode !== 'sse') {
-            const inputs = envInputsDiv.querySelectorAll('input');
-            inputs.forEach(input => {
-                if (input.name && input.value) {
-                    envVars[input.name] = input.value;
-                }
-            });
-
-            const argInputs = modalArguments.querySelectorAll('.arg-input');
-            args.push(...Array.from(argInputs)
-                .map(input => input.value.trim())
-                .filter(val => val !== ''));
-
-            const pythonEnvInput = document.getElementById('python_env');
-            pythonEnv = pythonEnvInput?.value?.trim();
-
-            const updateToggles = modalRequirements.querySelectorAll('.toggle-update:checked');
-            updateToggles.forEach(toggle => {
-                requirementsToUpdate.push({
-                    name: toggle.dataset.name,
-                    version: toggle.dataset.version
-                });
-            });
-        }
-
-        // Only POST userConfigurations and/or pythonEnvs if there is a difference, then proceed with install
-        fetch('/api/settings')
-            .then(response => response.json())
-            .then(data => {
-                const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};
-                const pythonEnvs = (data && data.data && data.data.pythonEnvs) ? data.data.pythonEnvs : {};
-                const updatedUserConfigurations = { ...userConfigurations };
-                const updatedPythonEnvs = { ...pythonEnvs };
-
-                Object.keys(envVars).forEach(key => {
-                    updatedUserConfigurations[key] = envVars[key];
-                });
-
-                // Check for userConfigurations difference
-                let needsUserConfigUpdate = false;
-                const allUserConfigKeys = new Set([...Object.keys(userConfigurations), ...Object.keys(envVars)]);
-                for (const key of allUserConfigKeys) {
-                    if (userConfigurations[key] !== updatedUserConfigurations[key]) {
-                        needsUserConfigUpdate = true;
-                        break;
-                    }
-                }
-
-                // Check for pythonEnvs difference
-                let needsPythonEnvUpdate = false;
-                if (pythonEnv !== undefined && pythonEnv !== pythonEnvs[`${categoryName}:${serverName}`]) {
-                    updatedPythonEnvs[`${categoryName}:${serverName}`] = pythonEnv;
-                    needsPythonEnvUpdate = true;
-                }
-
-                // If either needs update, POST the merged object
-                if (needsUserConfigUpdate || needsPythonEnvUpdate) {
-                    const postBody = {};
-                    if (needsUserConfigUpdate) postBody.userConfigurations = updatedUserConfigurations;
-                    if (needsPythonEnvUpdate) postBody.pythonEnvs = updatedPythonEnvs;
-                    fetch('/api/settings', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(postBody)
-                    }).then(() => {
-                        proceedInstall();
-                    }).catch(() => {
-                        proceedInstall();
-                    });
-                } else {
-                    proceedInstall();
-                }
-            })
-            .catch(() => {
-                proceedInstall();
-            });
-
-        function proceedInstall() {
-            const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
-
-            const uninstallBtn = document.querySelector('.uninstall-btn');
-            if (!uninstallBtn || !uninstallBtn.matches(':active')) {
-                const selectedTargets = window.selectedClients;
-                if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
-                    showToast('Please select at least one client to configure.', 'error');
-                    return;
-                }
-
-                let installingMessage = "Starting installation...";
-                const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-                if (selectedTargets.length > 0) {
-                    const target = selectedTargets[0];
-                    const msg = serverStatus.installedStatus?.[target]?.message;
-                    if (msg) installingMessage = msg;
-                }
-
-                const serverInstallOptions = {
-                    targetClients: selectedTargets,
-                    env: envVars,
-                    args: args,
-                    settings: pythonEnv ? { pythonEnv: pythonEnv } : {}
-                };
-
-                if (requirementsToUpdate.length > 0) {
-                    serverInstallOptions.requirements = requirementsToUpdate;
-                }
-
-                handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
-            }
-        }
-    };
-}
-
-// Helper functions
-function createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress) {
-    const clientItem = document.createElement('div');
-    clientItem.className = 'client-item';
-    clientItem.dataset.target = target;
-    clientItem.dataset.selected = 'false';
-
-    // Create client info (name)
-    const clientInfo = document.createElement('div');
-    clientInfo.className = 'client-info';
-
-    // Client name label
-    const clientName = document.createElement('span');
-    clientName.className = 'text-sm font-medium text-gray-900';
-    clientName.textContent = target;
-
-    // Add elements to client info
-    clientInfo.appendChild(clientName);
-
-    // Add client info to client item
-    clientItem.appendChild(clientInfo);
-
-    if (!isSelectable) {
-        clientItem.classList.add('non-selectable');
-        if (isConfigured) {
-            clientItem.classList.add('installed-item');
-            clientItem.title = 'Already installed';
-        } else if (isInProgress) {
-            clientItem.classList.add('in-progress-item');
-            clientItem.title = 'Installation in progress';
-        }
-    }
-
-    return clientItem;
-}
-
-function setupClientItemListeners(clientItem, target, isSelectable) {
-    if (isSelectable) {
-        clientItem.addEventListener('click', () => {
-            const isSelected = clientItem.dataset.selected === 'true';
-            clientItem.dataset.selected = isSelected ? 'false' : 'true';
-
-            if (isSelected) {
-                clientItem.classList.remove('selected');
-                window.selectedClients = window.selectedClients.filter(c => c !== target);
-            } else {
-                clientItem.classList.add('selected');
-                if (!window.selectedClients.includes(target)) {
-                    window.selectedClients.push(target);
-                }
-            }
-        });
-    }
-}
-
-function setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass) {
-    if (statusText) {
-        const statusContainer = document.createElement('div');
-        statusContainer.className = 'status-container';
-
-        const statusBadge = document.createElement('span');
-        statusBadge.className = `status-badge ${statusClass}`;
-        statusBadge.textContent = statusText;
-        statusContainer.appendChild(statusBadge);
-
-        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
-            const uninstallBtn = createUninstallButton(target, categoryName, serverName);
-            statusContainer.appendChild(uninstallBtn);
-        }
-
-        clientItem.appendChild(statusContainer);
-    }
-}
-
-function createUninstallButton(target, categoryName, serverName) {
-    const uninstallBtn = document.createElement('button');
-    uninstallBtn.className = 'uninstall-btn text-red-600 hover:text-red-800 ml-2';
-    uninstallBtn.innerHTML = '<i class="bx bx-trash"></i>';
-    uninstallBtn.title = 'Uninstall from this client';
-
-    uninstallBtn.onclick = async (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-
-        const confirmed = await showConfirm('Uninstall Confirmation',
-            `Are you sure you want to uninstall ${serverName} from ${target}?`);
-
-        if (confirmed) {
-            window.selectedClients = [target];
-            showInstallLoadingModal('Uninstalling');
-            const serverList = {
-                [serverName]: {
-                    removeData: true
-                }
-            };
-
-            try {
-                updateOverallInstallStatus('in-progress', `Uninstalling ${serverName} from ${target}...`);
-                await uninstallTools(categoryName, serverList, [target]);
-                // uninstallTools will now handle its own final status update via updateOverallInstallStatus
-            } catch (error) {
-                updateOverallInstallStatus('failed', `Error during uninstall: ${error.message}`);
-                // No need to throw here if uninstallTools handles its errors by updating status
-            }
-        }
-        return false;
-    };
-
-    return uninstallBtn;
-}
-
-function addSectionTitle(targetDiv) {
-    if (!targetDiv.querySelector('.section-title')) {
-        const titleElement = document.createElement('h3');
-        titleElement.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-        titleElement.textContent = 'Client Status';
-        targetDiv.insertBefore(titleElement, targetDiv.firstChild);
-    }
-}
-
-function addEnvironmentTitle(envInputsDiv) {
-    if (!envInputsDiv.querySelector('.section-title')) {
-        const envTitle = document.createElement('h3');
-        envTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-        envTitle.textContent = 'Environment Variables';
-        envInputsDiv.insertBefore(envTitle, envInputsDiv.firstChild);
-    }
-}
-
-function addNoEnvMessage(envInputsDiv) {
-    const noEnvMessage = document.createElement('p');
-    noEnvMessage.className = 'text-gray-600';
-    noEnvMessage.textContent = 'No environment variables required for this MCP server.';
-    envInputsDiv.appendChild(noEnvMessage);
-}
-
-function createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings, serverName, userConfigurations = {}) {
-    Object.keys(envRequirements).forEach(key => {
-        const req = envRequirements[key];
-        const inputId = `env_${key}`;
-        const inputWrapper = document.createElement('div');
-        inputWrapper.className = 'mb-3';
-
-        const label = document.createElement('label');
-        label.htmlFor = inputId;
-        label.className = 'block text-sm font-medium text-gray-700 mb-1';
-        label.innerHTML = `${key} ${req.Required ? '<span class="text-red-500">*</span>' : ''}`;
-
-        const input = document.createElement('input');
-        input.type = req.isSecret ? 'password' : 'text';
-        input.id = inputId;
-        input.name = key;
-        input.placeholder = req.Description || key;
-        input.required = req.Required;
-        input.className = 'input-field';
-
-        // For default value, first check userConfigurations, then client settings, then provided default
-        let defaultValue = req.Default || '';
-
-        // Use userConfigurations if present
-        if (userConfigurations && userConfigurations[key]) {
-            defaultValue = userConfigurations[key];
-        } else if (clientSettings && clientSettings.MSRooCode &&
-            clientSettings.MSRooCode.mcpServers &&
-            clientSettings.MSRooCode.mcpServers[serverName] &&
-            clientSettings.MSRooCode.mcpServers[serverName].env &&
-            clientSettings.MSRooCode.mcpServers[serverName].env[key]) {
-            defaultValue = clientSettings.MSRooCode.mcpServers[serverName].env[key];
-        }
-
-        input.value = defaultValue;
-
-        inputWrapper.appendChild(label);
-        inputWrapper.appendChild(input);
-
-        if (req.Description) {
-            const description = document.createElement('p');
-            description.className = 'text-xs text-gray-500 mt-1';
-            description.textContent = req.Description;
-            inputWrapper.appendChild(description);
-        }
-
-        envInputsDiv.appendChild(inputWrapper);
-    });
-}
-
-function addArgumentsTitle(modalArguments) {
-    const argsTitle = document.createElement('h3');
-    argsTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-    argsTitle.textContent = 'Arguments';
-    modalArguments.appendChild(argsTitle);
-}
-
-function createArgumentsContainer() {
-    const container = document.createElement('div');
-    container.className = 'args-container mb-3';
-
-    const addButton = document.createElement('button');
-    addButton.type = 'button';
-    addButton.className = 'add-arg-button px-3 py-1 text-sm text-blue-600 hover:text-blue-800 border border-blue-600 hover:border-blue-800 rounded-md mb-2';
-    addButton.innerHTML = '<i class="bx bx-plus"></i> Add Argument';
-    addButton.onclick = () => container.appendChild(createArgumentInput());
-
-    container.appendChild(addButton);
-    return container;
-}
-
-function createArgumentInput(value = '') {
-    const argWrapper = document.createElement('div');
-    argWrapper.className = 'arg-wrapper flex items-center gap-2 mb-2';
-
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.className = 'arg-input flex-grow';
-    input.value = value;
-    input.placeholder = 'Enter argument value';
-
-    const removeButton = document.createElement('button');
-    removeButton.type = 'button';
-    removeButton.className = 'remove-arg-button text-red-600 hover:text-red-800';
-    removeButton.innerHTML = '<i class="bx bx-trash"></i>';
-    removeButton.onclick = () => argWrapper.remove();
-
-    argWrapper.appendChild(input);
-    argWrapper.appendChild(removeButton);
-    return argWrapper;
-}
-
-function addPythonEnvironmentInput(categoryName, serverName, modalArguments) {
-    const pythonEnvWrapper = document.createElement('div');
-    pythonEnvWrapper.className = 'mt-4';
-
-    const pythonEnvLabel = document.createElement('label');
-    pythonEnvLabel.htmlFor = 'python_env';
-    pythonEnvLabel.className = 'block text-sm font-medium text-gray-700 mb-1';
-    pythonEnvLabel.textContent = 'Python Environment';
-
-    const pythonEnvInput = document.createElement('input');
-    pythonEnvInput.type = 'text';
-    pythonEnvInput.id = 'python_env';
-    pythonEnvInput.className = 'input-field';
-    pythonEnvInput.placeholder = 'Enter Python environment path (optional)';
-
-    const envDescription = document.createElement('p');
-    envDescription.className = 'text-xs text-gray-500 mt-1';
-    envDescription.textContent = 'Specify the Python exectable file(e.g. C:/python312/python) to use for installation. Leave empty to use system default. You can specify value in Settings page';
-
-    pythonEnvWrapper.appendChild(pythonEnvLabel);
-    pythonEnvWrapper.appendChild(pythonEnvInput);
-    pythonEnvWrapper.appendChild(envDescription);
-    modalArguments.appendChild(pythonEnvWrapper);
-    // Fetch system settings and set default value for python_env
-    fetch('/api/settings')
-        .then(response => response.json())
-        .then(data => {
-            if (data && data.data && data.data.pythonEnvs) {
-                pythonEnvInput.value = data.data.pythonEnvs[`${categoryName}:${serverName}`] || data.data.pythonEnvs['system'] || '';
-            }
-        })
-        .catch(() => {
-            // Ignore errors, leave input empty
-        });
-}
-
-function renderRequirements(serverRequirements, requirements, categoryName, serverName) {
-    return serverRequirements.map(req => {
-        const status = requirements[req.name] || {};
-        let statusClass = status.installed
-            ? 'text-green-600 bg-green-50'
-            : 'text-yellow-600 bg-yellow-50';
-        let statusText = status.installed ? 'Installed' : 'Required';
-        let versionDisplay = status.version ? ` • <span class="font-medium">${status.version}</span>` : '';
-        let updateToggle = '';
-
-        // Check if there's an available update
-        if (status.installed && status.availableUpdate && status.availableUpdate.version) {
-            if (status.version && compareVersions(status.availableUpdate.version, status.version) > 0) {
-                // Show version update information with yellow color and icon
-                statusClass = 'text-yellow-600 bg-yellow-50';
-                statusText = `<span style="color: #f59e0b; font-weight: bold; margin-right: 5px;">↑</span>${status.availableUpdate.version}`;
-
-                // Create a toggle switch for update
-                updateToggle = `
-                    <label class="inline-flex items-center cursor-pointer ml-2">
-                        <input type="checkbox" class="toggle-update sr-only"
-                            data-name="${req.name}"
-                            data-version="${status.availableUpdate.version}"
-                            data-category="${categoryName}"
-                            data-server="${serverName}">
-                        <div class="relative w-10 h-5 bg-gray-200 rounded-full toggle-bg">
-                            <div class="absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full transition-transform duration-300 transform"></div>
-                        </div>
-                        <span class="ml-2 text-sm text-gray-700">Update</span>
-                    </label>
-                `;
-            }
-        }
-
-        return `
-            <div class="border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50">
-                <div class="flex justify-between items-center">
-                    <div>
-                        <div class="font-semibold text-gray-800">${req.name}</div>
-                        <div class="text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50">
-                            <span class="font-medium">${status.type || 'package'}</span>${versionDisplay}
-                        </div>
-                    </div>
-                    <div class="flex items-center">
-                        <span class="${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm">
-                            ${statusText}
-                        </span>
-                        ${updateToggle}
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function setupUpdateToggles(modalRequirements) {
-    const updateToggles = modalRequirements.querySelectorAll('.toggle-update');
-    updateToggles.forEach(toggle => {
-        toggle.addEventListener('change', function () {
-            const toggleBg = this.parentElement.querySelector('.toggle-bg');
-            if (this.checked) {
-                toggleBg.classList.add('bg-blue-500');
-                toggleBg.querySelector('div').classList.add('translate-x-5');
-            } else {
-                toggleBg.classList.remove('bg-blue-500');
-                toggleBg.querySelector('div').classList.remove('translate-x-5');
-            }
-        });
-    });
-}
+import{showToast,showConfirm}from"../notifications.js";import{showInstallLoadingModal,updateOverallInstallStatus}from"./loadingModal.js";import{uninstallTools}from"./installation.js";import{handleBulkClientInstall}from"./installation.js";import{compareVersions}from"./versionUtils.js";export function setupClientItems(e,t,n,s,a){e.forEach((e=>{const l=t.installedStatus[e]||{status:"not-installed",type:"check",target:"server"};let i="",o="";"completed"===l.status&&"install"===l.type?(i="Installed",o="installed"):"pending"===l.status?(i="Pending Requirements",o="pending"):"in-progress"===l.status?(i="In Progress",o="pending"):"failed"===l.status&&(i="Failed",o="not-installed");const r="completed"===l.status&&"install"===l.type,d="in-progress"===l.status,c=!r&&!d,m=createClientItem(e,i,o,c,r,d);setupClientItemListeners(m,e,c),setupUninstallButton(m,i,l,e,n,s,o),a.appendChild(m)})),addSectionTitle(a)}export function setupEnvironmentVariables(e,t,n){if("sse"===e.mode)return void(t.style.display="none");const s=e.installation?.env||e.installation?.env||{};addEnvironmentTitle(t),fetch("/api/settings").then((e=>e.json())).then((a=>{const l=a&&a.data&&a.data.userConfigurations?a.data.userConfigurations:{};0===Object.keys(s).length?addNoEnvMessage(t):createEnvironmentInputs(s,t,n.clientMcpSettings,e.name,l)})).catch((()=>{0===Object.keys(s).length?addNoEnvMessage(t):createEnvironmentInputs(s,t,n.clientMcpSettings,e.name,{})}))}export function setupInstallationArguments(e,t,n,s){if("sse"===s?.mode)return void(t.style.display="none");if(!e)return;addArgumentsTitle(t);const a=createArgumentsContainer();t.appendChild(a),e.args&&Array.isArray(e.args)?e.args.forEach((e=>{a.appendChild(createArgumentInput(e))})):a.appendChild(createArgumentInput()),("python"===e.command||e.command.includes("python"))&&addPythonEnvironmentInput(n,s.name,t)}export function setupServerRequirements(e,t,n,s,a){if("sse"===e.mode)return void(a.style.display="none");const l=e.dependencies?.requirements||[],i=t.data.installationStatus?.requirementsStatus||{};if(l.length>0){const e=renderRequirements(l,i,n,s);a.innerHTML=`\n            <h3 class="text-lg font-semibold text-gray-700 mb-3">Dependencies</h3>\n            <p class="text-sm text-gray-600 mb-4">These dependencies will be automatically installed when installing the server</p>\n            ${e}\n        `,setupUpdateToggles(a)}else a.innerHTML='<p class="text-gray-600">No additional dependencies required.</p>'}export function setupFormSubmitHandler(e,t,n,s,a,l,i,o,r){e.onsubmit=e=>{e.preventDefault();const d={},c=[],m=[];let u;if("sse"!==r?.mode){t.querySelectorAll("input").forEach((e=>{e.name&&e.value&&(d[e.name]=e.value)}));const e=n.querySelectorAll(".arg-input");c.push(...Array.from(e).map((e=>e.value.trim())).filter((e=>""!==e)));const a=document.getElementById("python_env");u=a?.value?.trim(),s.querySelectorAll(".toggle-update:checked").forEach((e=>{m.push({name:e.dataset.name,version:e.dataset.version})}))}function p(){const e=m.length>0,t=document.querySelector(".uninstall-btn");if(!t||!t.matches(":active")){const t=window.selectedClients;if(0===t.length&&!e)return void showToast("Please select at least one client to configure.","error");let n="Starting installation...";const s=i[l]||{installedStatus:{}};if(t.length>0){const e=t[0],a=s.installedStatus?.[e]?.message;a&&(n=a)}const r={targetClients:t,env:d,args:c,settings:u?{pythonEnv:u}:{}};m.length>0&&(r.requirements=m),handleBulkClientInstall(a,l,t,d,n,o,r)}}fetch("/api/settings").then((e=>e.json())).then((e=>{const t=e&&e.data&&e.data.userConfigurations?e.data.userConfigurations:{},n=e&&e.data&&e.data.pythonEnvs?e.data.pythonEnvs:{},s={...t},i={...n};Object.keys(d).forEach((e=>{s[e]=d[e]}));let o=!1;const r=new Set([...Object.keys(t),...Object.keys(d)]);for(const e of r)if(t[e]!==s[e]){o=!0;break}let c=!1;if(void 0!==u&&u!==n[`${a}:${l}`]&&(i[`${a}:${l}`]=u,c=!0),o||c){const e={};o&&(e.userConfigurations=s),c&&(e.pythonEnvs=i),fetch("/api/settings",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}).then((()=>{p()})).catch((()=>{p()}))}else p()})).catch((()=>{p()}))}}function createClientItem(e,t,n,s,a,l){const i=document.createElement("div");i.className="client-item",i.dataset.target=e,i.dataset.selected="false";const o=document.createElement("div");o.className="client-info";const r=document.createElement("span");return r.className="text-sm font-medium text-gray-900",r.textContent=e,o.appendChild(r),i.appendChild(o),s||(i.classList.add("non-selectable"),a?(i.classList.add("installed-item"),i.title="Already installed"):l&&(i.classList.add("in-progress-item"),i.title="Installation in progress")),i}function setupClientItemListeners(e,t,n){n&&e.addEventListener("click",(()=>{const n="true"===e.dataset.selected;e.dataset.selected=n?"false":"true",n?(e.classList.remove("selected"),window.selectedClients=window.selectedClients.filter((e=>e!==t))):(e.classList.add("selected"),window.selectedClients.includes(t)||window.selectedClients.push(t))}))}function setupUninstallButton(e,t,n,s,a,l,i){if(t){const o=document.createElement("div");o.className="status-container";const r=document.createElement("span");if(r.className=`status-badge ${i}`,r.textContent=t,o.appendChild(r),"completed"===n.status&&"install"===n.type){const e=createUninstallButton(s,a,l);o.appendChild(e)}e.appendChild(o)}}function createUninstallButton(e,t,n){const s=document.createElement("button");return s.className="uninstall-btn text-red-600 hover:text-red-800 ml-2",s.innerHTML='<i class="bx bx-trash"></i>',s.title="Uninstall from this client",s.onclick=async s=>{if(s.stopPropagation(),s.preventDefault(),await showConfirm("Uninstall Confirmation",`Are you sure you want to uninstall ${n} from ${e}?`)){window.selectedClients=[e],showInstallLoadingModal("Uninstalling");const s={[n]:{removeData:!0}};try{updateOverallInstallStatus("in-progress",`Uninstalling ${n} from ${e}...`),await uninstallTools(t,s,[e])}catch(e){updateOverallInstallStatus("failed",`Error during uninstall: ${e.message}`)}}return!1},s}function addSectionTitle(e){if(!e.querySelector(".section-title")){const t=document.createElement("h3");t.className="section-title text-lg font-semibold text-gray-700 mb-3",t.textContent="Client Status",e.insertBefore(t,e.firstChild)}}function addEnvironmentTitle(e){if(!e.querySelector(".section-title")){const t=document.createElement("h3");t.className="section-title text-lg font-semibold text-gray-700 mb-3",t.textContent="Environment Variables",e.insertBefore(t,e.firstChild)}}function addNoEnvMessage(e){const t=document.createElement("p");t.className="text-gray-600",t.textContent="No environment variables required for this MCP server.",e.appendChild(t)}function createEnvironmentInputs(e,t,n,s,a={}){Object.keys(e).forEach((l=>{const i=e[l],o=`env_${l}`,r=document.createElement("div");r.className="mb-3";const d=document.createElement("label");d.htmlFor=o,d.className="block text-sm font-medium text-gray-700 mb-1",d.innerHTML=`${l} ${i.Required?'<span class="text-red-500">*</span>':""}`;const c=document.createElement("input");c.type=i.isSecret?"password":"text",c.id=o,c.name=l,c.placeholder=i.Description||l,c.required=i.Required,c.className="input-field";let m=i.Default||"";if(a&&a[l]?m=a[l]:n&&n.MSRooCode&&n.MSRooCode.mcpServers&&n.MSRooCode.mcpServers[s]&&n.MSRooCode.mcpServers[s].env&&n.MSRooCode.mcpServers[s].env[l]&&(m=n.MSRooCode.mcpServers[s].env[l]),c.value=m,r.appendChild(d),r.appendChild(c),i.Description){const e=document.createElement("p");e.className="text-xs text-gray-500 mt-1",e.textContent=i.Description,r.appendChild(e)}t.appendChild(r)}))}function addArgumentsTitle(e){const t=document.createElement("h3");t.className="section-title text-lg font-semibold text-gray-700 mb-3",t.textContent="Arguments",e.appendChild(t)}function createArgumentsContainer(){const e=document.createElement("div");e.className="args-container mb-3";const t=document.createElement("button");return t.type="button",t.className="add-arg-button px-3 py-1 text-sm text-blue-600 hover:text-blue-800 border border-blue-600 hover:border-blue-800 rounded-md mb-2",t.innerHTML='<i class="bx bx-plus"></i> Add Argument',t.onclick=()=>e.appendChild(createArgumentInput()),e.appendChild(t),e}function createArgumentInput(e=""){const t=document.createElement("div");t.className="arg-wrapper flex items-center gap-2 mb-2";const n=document.createElement("input");n.type="text",n.className="arg-input flex-grow",n.value=e,n.placeholder="Enter argument value";const s=document.createElement("button");return s.type="button",s.className="remove-arg-button text-red-600 hover:text-red-800",s.innerHTML='<i class="bx bx-trash"></i>',s.onclick=()=>t.remove(),t.appendChild(n),t.appendChild(s),t}function addPythonEnvironmentInput(e,t,n){const s=document.createElement("div");s.className="mt-4";const a=document.createElement("label");a.htmlFor="python_env",a.className="block text-sm font-medium text-gray-700 mb-1",a.textContent="Python Environment";const l=document.createElement("input");l.type="text",l.id="python_env",l.className="input-field",l.placeholder="Enter Python environment path (optional)";const i=document.createElement("p");i.className="text-xs text-gray-500 mt-1",i.textContent="Specify the Python exectable file(e.g. C:/python312/python) to use for installation. Leave empty to use system default. You can specify value in Settings page",s.appendChild(a),s.appendChild(l),s.appendChild(i),n.appendChild(s),fetch("/api/settings").then((e=>e.json())).then((n=>{n&&n.data&&n.data.pythonEnvs&&(l.value=n.data.pythonEnvs[`${e}:${t}`]||n.data.pythonEnvs.system||"")})).catch((()=>{}))}function renderRequirements(e,t,n,s){return e.map((e=>{const a=t[e.name]||{};let l=a.installed?"text-green-600 bg-green-50":"text-yellow-600 bg-yellow-50",i=a.installed?"Installed":"Required",o=a.version?` • <span class="font-medium">${a.version}</span>`:"",r="";return a.installed&&a.availableUpdate&&a.availableUpdate.version&&a.version&&compareVersions(a.availableUpdate.version,a.version)>0&&(l="text-yellow-600 bg-yellow-50",i=`<span style="color: #f59e0b; font-weight: bold; margin-right: 5px;">↑</span>${a.availableUpdate.version}`,r=`\n                    <label class="inline-flex items-center cursor-pointer ml-2">\n                        <input type="checkbox" class="toggle-update sr-only"\n                            data-name="${e.name}"\n                            data-version="${a.availableUpdate.version}"\n                            data-category="${n}"\n                            data-server="${s}">\n                        <div class="relative w-10 h-5 bg-gray-200 rounded-full toggle-bg">\n                            <div class="absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full transition-transform duration-300 transform"></div>\n                        </div>\n                        <span class="ml-2 text-sm text-gray-700">Update</span>\n                    </label>\n                `),`\n            <div class="border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50">\n                <div class="flex justify-between items-center">\n                    <div>\n                        <div class="font-semibold text-gray-800">${e.name}</div>\n                        <div class="text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50">\n                            <span class="font-medium">${a.type||"package"}</span>${o}\n                        </div>\n                    </div>\n                    <div class="flex items-center">\n                        <span class="${l} inline-flex items-center px-3 py-1 rounded-full text-sm">\n                            ${i}\n                        </span>\n                        ${r}\n                    </div>\n                </div>\n            </div>\n        `})).join("")}function setupUpdateToggles(e){e.querySelectorAll(".toggle-update").forEach((e=>{e.addEventListener("change",(function(){const e=this.parentElement.querySelector(".toggle-bg");this.checked?(e.classList.add("bg-blue-500"),e.querySelector("div").classList.add("translate-x-5")):(e.classList.remove("bg-blue-500"),e.querySelector("div").classList.remove("translate-x-5"))}))}))}
+//# sourceMappingURL=modalSetup.js.map