open-swarm 0.1.1743070217__py3-none-any.whl → 0.1.1743364176__py3-none-any.whl

swarm/static/rest_mode/js/sidebar.js

@@ -0,0 +1,94 @@
+// src/swarm/static/rest_mode/js/sidebar.js
+
+import { showToast } from './toast.js';
+
+/* Existing toggleSidebar function */
+export function toggleSidebar(sidebar) {
+    if (sidebar === 'left') {
+        const chatHistoryPane = document.getElementById('chatHistoryPane');
+        const chatHistoryToggleButton = document.getElementById('chatHistoryToggleButton');
+
+        if (!chatHistoryPane || !chatHistoryToggleButton) {
+            console.warn('Chat History Pane or Toggle Button is missing.');
+            return;
+        }
+
+        // Toggle the 'hidden' class
+        const isHidden = chatHistoryPane.classList.toggle('hidden');
+
+
+    } 
+}
+
+/**
+ * Sets up resizable sidebars with draggable dividers.
+ */
+function setupResizableSidebars() {
+    const leftDivider = document.getElementById("divider-left");
+    const rightDivider = document.getElementById("divider-right");
+
+    if (!leftDivider || !chatHistoryPane) {
+        console.warn('One or more elements for resizable sidebars are missing.');
+        return;
+    }
+
+    const handleMouseMove = (e, targetPane, isLeft) => {
+        const newWidth = isLeft
+            ? e.clientX 
+            : window.innerWidth - e.clientX;
+        // if (newWidth > 100 && newWidth < 750) {
+        //     targetPane.style.width = `${newWidth}px`;
+        // }
+    };
+
+    const setupResizer = (divider, targetPane, isLeft) => {
+        divider.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            const onMouseMove = (event) =>
+                handleMouseMove(event, targetPane, isLeft);
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", () => {
+                document.removeEventListener("mousemove", onMouseMove);
+            });
+        });
+    };
+
+    setupResizer(leftDivider, chatHistoryPane, true);
+}
+
+/**
+ * Initializes the sidebar logic.
+ */
+export function initializeSidebar() {
+    // Attach event listeners to toggle buttons
+    const chatHistoryToggleButton = document.getElementById('chatHistoryToggleButton');
+    const optionsToggleButton = document.getElementById('optionsSidebarToggleButton'); // Ensure an ID exists
+
+    if (chatHistoryToggleButton) {
+        chatHistoryToggleButton.addEventListener('click', () => toggleSidebar('left'));
+    } else {
+        console.warn('Chat History Toggle Button is missing.');
+    }
+
+    if (optionsToggleButton) {
+// Add event listener for closing the dialog when clicking outside
+document.addEventListener('click', function(event) {
+    if (event.target === settingsDialog) {
+        settingsDialog.classList.add('hidden');
+    }
+});
+
+// Add event listener for closing the dialog when pressing Escape
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && !settingsDialog.classList.contains('hidden')) {
+        settingsDialog.classList.add('hidden');
+    }
+});
+        optionsToggleButton.addEventListener('click', () => toggleSidebar('options'));
+    } else {
+        console.warn('Options Toggle Button is missing.');
+    }
+
+    // Setup resizable sidebars
+    setupResizableSidebars();
+}

swarm/static/rest_mode/js/simpleLogic.js

@@ -0,0 +1,37 @@
+async function handleSubmit(event) {
+    event.preventDefault();
+    const input = document.getElementById('userInput');
+    const message = input.value.trim();
+    const blueprintName = document.getElementById('blueprintTitle').textContent;
+    if (!message) return;
+
+    input.value = '';
+    const history = document.getElementById('messageHistory');
+    history.innerHTML += `<div class="user-message">${message}</div>`;
+
+    try {
+        const response = await fetch('/v1/chat/completions/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
+            },
+            body: JSON.stringify({
+                model: blueprintName,
+                messages: [{ role: 'user', content: message }]
+            })
+        });
+        const data = await response.json();
+        history.innerHTML += `<div class="assistant-message">${data.choices[0].message.content}</div>`;
+        history.scrollTop = history.scrollHeight;
+    } catch (error) {
+        history.innerHTML += `<div class="error-message">Error: ${error.message}</div>`;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('sendButton').addEventListener('click', handleSubmit);
+    document.getElementById('userInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') handleSubmit(e);
+    });
+});

swarm/static/rest_mode/js/slackLogic.js

@@ -0,0 +1,66 @@
+async function fetchBlueprints() {
+    const response = await fetch('/v1/models/');
+    const data = await response.json();
+    return data.data.filter(model => model.object === 'model');
+}
+
+function populateChannelList(blueprints) {
+    const list = document.getElementById('channelList');
+    list.innerHTML = '';
+    blueprints.forEach(bp => {
+        const li = document.createElement('li');
+        li.textContent = `# ${bp.title}`;
+        li.dataset.blueprintId = bp.id;
+        li.addEventListener('click', () => switchChannel(bp.id));
+        list.appendChild(li);
+    });
+}
+
+let currentBlueprint = null;
+function switchChannel(blueprintId) {
+    currentBlueprint = blueprintId;
+    document.getElementById('messageHistory').innerHTML = '';
+    document.getElementById('blueprintTitle').textContent = blueprintId;
+    console.log(`Switched to channel: ${blueprintId}`);
+}
+
+async function handleSubmit(event) {
+    event.preventDefault();
+    const input = document.getElementById('userInput');
+    const message = input.value.trim();
+    if (!message || !currentBlueprint) return;
+
+    input.value = '';
+    const history = document.getElementById('messageHistory');
+    history.innerHTML += `<div class="user-message">${message}</div>`;
+
+    try {
+        const response = await fetch('/v1/chat/completions/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
+            },
+            body: JSON.stringify({
+                model: currentBlueprint,
+                messages: [{ role: 'user', content: message }]
+            })
+        });
+        const data = await response.json();
+        history.innerHTML += `<div class="assistant-message">${data.choices[0].message.content}</div>`;
+        history.scrollTop = history.scrollHeight;
+    } catch (error) {
+        history.innerHTML += `<div class="error-message">Error: ${error.message}</div>`;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const blueprints = await fetchBlueprints();
+    populateChannelList(blueprints);
+    if (blueprints.length > 0) switchChannel(blueprints[0].id);
+
+    document.getElementById('sendButton').addEventListener('click', handleSubmit);
+    document.getElementById('userInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') handleSubmit(e);
+    });
+});

swarm/static/rest_mode/js/splash.js

@@ -0,0 +1,76 @@
+// splash.js - Manages the Splash Screen
+
+/**
+ * Initializes the splash screen. Fades out after loading finishes and removes it from the DOM.
+ */
+export function initializeSplashScreen() {
+    console.log("[DEBUG] Initializing splash screen.");
+
+    window.addEventListener('load', () => {
+        const splashScreen = document.getElementById('splashScreen');
+        const splashText = document.getElementById('splashText');
+
+        // List of possible splash texts
+        const splashTexts = [
+            "Welcome to Open-Swarm Chat!",
+            "Connecting to the AI...",
+            "Preparing your AI experience...",
+            "Loading AI capabilities..."
+        ];
+
+        // Set a random splash text
+        if (splashTexts.length > 0 && splashText) {
+            const randomIndex = Math.floor(Math.random() * splashTexts.length);
+            splashText.textContent = splashTexts[randomIndex];
+            console.log(`[DEBUG] Set splash text: ${splashText.textContent}`);
+        }
+
+        // Simulate AI connection establishment
+        simulateAIConnection()
+            .then(() => {
+                // After AI is connected, fade out the splash screen
+                if (splashScreen) {
+                    console.log("[DEBUG] AI connection established. Fading out splash screen.");
+                    splashScreen.classList.add('fade-out');
+                }
+            })
+            .catch(() => {
+                // Handle connection errors
+                if (splashText) {
+                    splashText.textContent = "Failed to connect to the AI.";
+                    console.warn("[DEBUG] AI connection failed. Displaying error message.");
+                }
+                // Fade out after showing error
+                setTimeout(() => {
+                    if (splashScreen) {
+                        splashScreen.classList.add('fade-out');
+                    }
+                }, 3000);
+            });
+
+        // Remove the splash screen from the DOM after the fade-out transition
+        if (splashScreen) {
+            splashScreen.addEventListener('transitionend', () => {
+                if (splashScreen && splashScreen.parentNode) {
+                    splashScreen.parentNode.removeChild(splashScreen);
+                    console.log("[DEBUG] Splash screen removed from the DOM.");
+                }
+            });
+        }
+    });
+}
+
+/**
+ * Simulates AI connection establishment.
+ * Replace this function with actual connection logic.
+ */
+function simulateAIConnection() {
+    console.log("[DEBUG] Simulating AI connection...");
+    return new Promise((resolve, reject) => {
+        // Simulate a successful connection after 2 seconds
+        setTimeout(() => {
+            resolve();
+            console.log("[DEBUG] AI connection simulation resolved.");
+        }, 2000);
+    });
+}

swarm/static/rest_mode/js/theme.js

@@ -0,0 +1,111 @@
+/** 
+ * theme.js - Handles theme switching (style, layout, dark/light mode)
+ */
+
+import { showToast } from './toast.js';
+
+/**
+ * Initializes theme settings based on user preferences or defaults.
+ */
+export function initializeTheme() {
+    const colorSelect = document.getElementById('colorSelect');
+    const layoutSelect = document.getElementById('layoutSelect');
+    const darkModeToggle = document.getElementById('darkModeToggle');
+
+    // Default values
+    const defaultSettings = {
+        colorTheme: 'corporate',
+        layoutTheme: 'messenger-layout',
+        darkMode: true,
+    };
+
+    // Load saved preferences from localStorage or use defaults
+    const savedColor = localStorage.getItem('selectedColor') || defaultSettings.colorTheme;
+    const savedLayout = localStorage.getItem('selectedLayout') || defaultSettings.layoutTheme;
+    const savedDarkMode = localStorage.getItem('darkMode') === 'true' || defaultSettings.darkMode;
+
+    // Apply preferences
+    applyColorTheme(savedColor);
+    applyLayoutTheme(savedLayout);
+    setDarkMode(savedDarkMode);
+
+    // Sync UI elements with preferences
+    if (colorSelect) colorSelect.value = savedColor;
+    if (layoutSelect) layoutSelect.value = savedLayout;
+    if (darkModeToggle) darkModeToggle.checked = savedDarkMode;
+
+    // Attach event listeners
+    if (colorSelect) {
+        colorSelect.addEventListener('change', (e) => {
+            applyColorTheme(e.target.value);
+            localStorage.setItem('selectedColor', e.target.value);
+        });
+    }
+
+    if (layoutSelect) {
+        layoutSelect.addEventListener('change', (e) => {
+            applyLayoutTheme(e.target.value);
+            localStorage.setItem('selectedLayout', e.target.value);
+        });
+    }
+
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('change', (e) => {
+            const isDarkMode = e.target.checked;
+            setDarkMode(isDarkMode);
+            localStorage.setItem('darkMode', isDarkMode);
+        });
+    }
+}
+
+/**
+ * Applies the selected color theme by adding a data attribute and ensuring all theme-related styles are updated.
+ * @param {string} theme - The selected style theme ('pastel', 'tropical', 'corporate').
+ */
+function applyColorTheme(theme) {
+    const rootElement = document.documentElement; // Use <html> element
+    rootElement.setAttribute('data-theme', theme);
+
+    // Apply variables for custom elements and dynamic parts of the UI
+    document.querySelectorAll('.dynamic-theme-element').forEach((element) => {
+        const bgColor = getComputedStyle(rootElement).getPropertyValue('--bg-container').trim();
+        const textColor = getComputedStyle(rootElement).getPropertyValue('--text-primary').trim();
+
+        element.style.backgroundColor = bgColor;
+        element.style.color = textColor;
+    });
+
+    // Update SVG icon colors dynamically
+    document.querySelectorAll('.icon-svg').forEach((icon) => {
+        icon.style.fill = getComputedStyle(rootElement).getPropertyValue('--icon-color');
+    });
+
+    showToast(`Theme applied: ${theme.charAt(0).toUpperCase() + theme.slice(1)}`);
+}
+
+/**
+ * Applies the selected layout theme by adding a data attribute.
+ * @param {string} layout - The selected layout theme ('messenger-layout', 'mobile-layout', 'minimalist-layout').
+ */
+function applyLayoutTheme(layout) {
+    const rootElement = document.documentElement; // Use <html> element
+    rootElement.setAttribute('data-theme-layout', layout);
+}
+
+/**
+ * Sets the dark mode by adding a data attribute and ensuring global variables are updated.
+ * @param {boolean} isDarkMode - Whether dark mode is enabled.
+ */
+function setDarkMode(isDarkMode) {
+    const rootElement = document.documentElement; // Use <html> element
+    rootElement.setAttribute('data-theme-dark', isDarkMode ? 'true' : 'false');
+
+    // Optionally, adjust custom styles for dark mode
+    document.querySelectorAll('.dynamic-theme-element').forEach((element) => {
+        const bgColor = getComputedStyle(rootElement).getPropertyValue('--bg-container').trim();
+        const textColor = getComputedStyle(rootElement).getPropertyValue('--text-primary').trim();
+
+        element.style.backgroundColor = bgColor;
+        element.style.color = textColor;
+    });
+}

swarm/static/rest_mode/js/toast.js

@@ -0,0 +1,36 @@
+/**
+ * toast.js - Handles toast notifications
+ */
+
+/**
+ * Displays a toast notification.
+ * @param {string} message - The message to display.
+ * @param {string} type - The type of toast ('info', 'success', 'error', 'warning').
+ */
+export function showToast(message, type = 'info') {
+    const toastContainer = document.getElementById('toastContainer');
+    if (!toastContainer) return;
+
+    // Create toast element
+    const toast = document.createElement('div');
+    toast.classList.add('toast', type);
+    toast.innerHTML = `
+        <span>${message}</span>
+        <button class="close-btn" aria-label="Close">&times;</button>
+    `;
+
+    // Append to container
+    toastContainer.appendChild(toast);
+
+    // Auto-remove after 5 seconds (handled by CSS animation)
+    setTimeout(() => {
+        toast.classList.add('fade-out');
+        toast.addEventListener('transitionend', () => toast.remove());
+    }, 5000);
+
+    // Remove toast on close button click
+    toast.querySelector('.close-btn').addEventListener('click', () => {
+        toast.classList.add('fade-out');
+        toast.addEventListener('transitionend', () => toast.remove());
+    });
+}

swarm/static/rest_mode/js/ui.js

@@ -0,0 +1,265 @@
+import { initializeSidebar } from './sidebar.js';
+import { initializeApplication } from './events.js';
+import { initializeChatLogic } from './chatLogic.js';
+import { initializeTheme } from './theme.js';
+import { renderQuickPrompts } from './messages.js';
+import { showToast } from './toast.js';
+
+/**
+ * Shows the splash page during initialization.
+ */
+function showSplashPage() {
+    const splashScreen = document.getElementById('splashScreen');
+    const appContainer = document.getElementById('appContainer');
+
+    if (splashScreen) {
+        splashScreen.style.display = 'flex';
+        appContainer.style.display = 'none';
+    }
+}
+
+/**
+ * Hides the splash page and reveals the app.
+ */
+function hideSplashPage() {
+    const splashScreen = document.getElementById('splashScreen');
+    const appContainer = document.getElementById('appContainer');
+
+    if (splashScreen) {
+        splashScreen.style.display = 'none';
+        appContainer.style.display = 'flex';
+    }
+}
+/**
+ * Sets up the chat history pane, including toggle visibility.
+ */
+function setupChatHistoryPane() {
+    const chatHistoryPane = document.getElementById('chatHistoryPane');
+    const chatHistoryToggleButton = document.getElementById('chatHistoryToggleButton');
+    const buttonsToToggle = [
+        'settingsButton-main',
+        'searchButton-main',
+        'newChatButton-main',
+    ].map(id => document.getElementById(id));
+
+    if (!chatHistoryPane || !chatHistoryToggleButton) {
+        console.warn("Missing elements for chat history pane.");
+        return;
+    }
+
+    // Toggle visibility on button clicks
+    const chatHistoryToggleButtonVisible = document.getElementById('chatHistoryToggleButtonVisible');
+    
+    // Toggle button in sidebar
+    chatHistoryToggleButton.addEventListener('click', () => {
+        chatHistoryPane.classList.add('hidden');
+        chatHistoryToggleButtonVisible.style.display = 'block';
+
+        buttonsToToggle.forEach(button => {
+            if (button) {
+                button.style.display = 'block';
+            }
+        });
+
+        showToast("Chat history minimized.", "info");
+ 
+    });
+
+    // New toggle button in main pane
+    if (chatHistoryToggleButtonVisible) {
+        chatHistoryToggleButtonVisible.addEventListener('click', () => {
+            chatHistoryPane.classList.remove('hidden');
+            chatHistoryToggleButtonVisible.style.display = 'none';
+            showToast("Chat history expanded.", "info");
+
+            buttonsToToggle.forEach(button => {
+                if (button) {
+                    button.style.display = 'none';
+                }
+            });
+        });
+    }
+
+}
+
+/**
+ * Sets up the settings toggle button functionality.
+ */
+import { toggleSidebar } from './sidebar.js';
+
+function setupSettingsToggleButton() {
+    const settingsToggleButton = document.getElementById('settingsToggleButton');
+    const settingsButtonMain = document.getElementById('settingsButton-main');
+
+    if (settingsToggleButton) {
+        settingsToggleButton.addEventListener('click', () => {
+            toggleSidebar('options');
+        });
+    } else {
+        console.warn('Warning: Settings toggle button not found.');
+    }
+
+    if (settingsButtonMain) {
+        settingsButtonMain.addEventListener('click', () => {
+            toggleSidebar('options');
+        });
+    } else {
+         console.warn('Warning: Settings button main not found.');
+    }
+}
+
+/**
+ * Sets up resizable sidebars.
+ */
+function setupResizableSidebars() {
+    const leftDivider = document.getElementById("divider-left");
+    const rightDivider = document.getElementById("divider-right");
+    const chatHistoryPane = document.getElementById("chatHistoryPane");
+    const optionsPane = document.getElementById("optionsPane");
+
+    const resize = (divider, targetPane, isLeft) => {
+        divider.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+
+            const handleMouseMove = (event) => {
+                const newWidth = isLeft
+                    ? event.clientX - chatHistoryPane.getBoundingClientRect().left
+                    : optionsPane.getBoundingClientRect().right - event.clientX;
+
+                // Apply constraints
+                if (newWidth >= 150 && newWidth <= 500) {
+                    targetPane.style.width = `${newWidth}px`;
+                }
+            };
+
+            const stopResize = () => {
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", stopResize);
+            };
+
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", stopResize);
+        });
+    };
+
+    if (leftDivider) resize(leftDivider, chatHistoryPane, true);
+    if (rightDivider) resize(rightDivider, optionsPane, false);
+}
+
+/**
+ * Displays the loading indicator.
+ */
+export function showLoadingIndicator() {
+    const loadingIndicator = document.getElementById("loadingIndicator");
+    if (loadingIndicator) {
+        loadingIndicator.style.display = 'flex';
+    }
+}
+
+/**
+ * Hides the loading indicator.
+ */
+export function hideLoadingIndicator() {
+    const loadingIndicator = document.getElementById("loadingIndicator");
+    if (loadingIndicator) {
+        loadingIndicator.style.display = 'none';
+        loadingIndicator.innerHTML = '';
+    }
+}
+
+
+/**
+ * Attaches sliding toolbar behavior to messages and adjusts container height.
+ * @param {HTMLElement} messageElement - The message element to attach the toolbar logic.
+ * @param {Object} options - Configuration for the toolbar behavior.
+ * @param {number} options.toolbarHeight - The height of the toolbar when visible (default: 50).
+ */
+export function enableSlidingToolbar(
+    messageElement,
+    { toolbarHeight = 50 } = {}
+) {
+    const toolbar = messageElement.querySelector('.message-toolbar');
+    if (!toolbar) return;
+
+    // Apply initial styles
+    toolbar.style.height = '0px';
+    toolbar.style.opacity = '0';
+    toolbar.style.transition = 'height 0.3s ease, opacity 0.3s ease';
+
+    messageElement.style.transition = 'height 0.3s ease';
+
+    messageElement.addEventListener('mouseenter', () => {
+        toolbar.style.height = `${toolbarHeight}px`;
+        toolbar.style.opacity = '1';
+
+        // Adjust message height to accommodate the toolbar
+        messageElement.style.height = `${messageElement.scrollHeight + toolbarHeight}px`;
+    });
+
+    messageElement.addEventListener('mouseleave', () => {
+        toolbar.style.height = '0px';
+        toolbar.style.opacity = '0';
+
+        // Reset message height when toolbar is hidden
+        messageElement.style.height = '';
+    });
+}
+
+// TODO find home for this dropdown black text workaround...
+document.addEventListener('DOMContentLoaded', function() {
+    const blueprintDropdown = document.getElementById('blueprintDropdown');
+
+    // Function to style all options
+    function styleOptions() {
+        const options = blueprintDropdown?.options;
+        if (options) {
+            for (let i = 0; i < options.length; i++) {
+                options[i].style.color = 'black';
+            }
+        }
+    }
+
+    // Style options initially
+    styleOptions();
+
+    if (blueprintDropdown) {
+        // Style options whenever the dropdown is opened
+        blueprintDropdown.addEventListener('mousedown', function() {
+            styleOptions();
+        });
+    
+        // Style options whenever the dropdown is changed
+        blueprintDropdown.addEventListener('change', function() {
+            styleOptions();
+        });
+    }
+});
+
+
+/**
+ * Initializes all UI components and event listeners.
+ */
+export function initializeUI() {
+    if (window.isUIInitialized) {
+        console.warn("UI is already initialized.");
+        return;
+    }
+
+    showSplashPage(); // Show the splash page on load
+    renderQuickPrompts(); // Render quick prompts on load
+
+    // Integrate other initialization logic
+    initializeSidebar();
+    setupChatHistoryPane();
+    initializeChatLogic();
+    // setupSettingsToggleButton();
+    setupResizableSidebars();
+    initializeTheme();
+
+    // Hide the splash screen after initialization
+    setTimeout(hideSplashPage, 2000); // Example delay for effect
+
+    window.isUIInitialized = true;
+}
+
+