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

swarm/static/rest_mode/css/messenger.css

@@ -0,0 +1,135 @@
+.container[data-theme-layout="messenger-layout"] {
+    display: flex;
+    height: 100vh;
+}
+
+.chat-history-pane {
+    width: 250px;
+    background: #361A42; /* Slack light sidebar purple */
+    color: #FFFFFF; /* White text */
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-history-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 10px 15px;
+    background: #361A42; /* Match sidebar */
+    border-bottom: 1px solid #4A2A55; /* Subtle purple border */
+}
+
+.chat-history-header > div {
+    display: flex;
+    flex-direction: row; /* Force horizontal */
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.chat-history-header .input-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+.chat-history-header .input-button:hover {
+    background-color: rgba(255, 255, 255, 0.1); /* Light hover */
+    transform: scale(1.05);
+}
+
+.chat-history-header .input-button img {
+    width: 20px;
+    height: 20px;
+    filter: brightness(0) invert(1); /* White icons on purple */
+}
+
+.chat-history-list {
+    list-style: none;
+    padding: 0;
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.chat-history-list li {
+    padding: 10px;
+    cursor: pointer;
+    color: #FFFFFF;
+}
+
+.chat-history-list li:hover {
+    background: #4A2A55; /* Darker purple hover */
+}
+
+.main-pane {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    background: #F5F5F5; /* Slack light main area */
+    color: #2E2E2E;
+}
+
+/* Dark Mode Adjustments */
+[data-theme-dark="true"] .chat-history-pane {
+    background: #2E0F36; /* Slack dark sidebar purple */
+}
+
+[data-theme-dark="true"] .chat-history-header {
+    background: #2E0F36;
+    border-bottom: 1px solid #3F1A48;
+}
+
+[data-theme-dark="true"] .chat-history-header .input-button:hover {
+    background-color: rgba(255, 255, 255, 0.2); /* Light hover in dark mode */
+}
+
+[data-theme-dark="true"] .main-pane {
+    background: #2E2E2E; /* Slack dark main area */
+    color: #E0E0E0;
+}
+
+.message-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+.user-message {
+    background: #DCF8C6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-end;
+    max-width: 70%;
+}
+
+.assistant-message {
+    background: #E6E6E6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-start;
+    max-width: 70%;
+}
+
+.error-message {
+    background: #F8D7DA;
+    color: #721C24;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+}
+
+.send-container {
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}

swarm/static/rest_mode/css/settings.css

@@ -0,0 +1,91 @@
+/* Full-Screen Settings Pane */
+.settings-dialog {
+    position: fixed;
+    top: 10%; /* Leave 10% margin from the top */
+    left: 10%; /* Leave 10% margin from the left */
+    width: 80%; /* Take up 80% of the viewport width */
+    height: 80%; /* Take up 80% of the viewport height */
+    background-color: var(--bg-primary); /* Match app's primary background color */
+    border-radius: 8px; /* Slightly rounded corners */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for pop-out effect */
+    z-index: 1000; /* Higher than other elements */
+    overflow-y: auto; /* Scroll if content overflows */
+    padding: 20px;
+    display: none; /* Initially hidden */
+}
+
+/* Visible settings pane */
+.settings-pane.visible {
+    display: block; /* Make visible when toggled */
+}
+
+/* Overlay to dim the background */
+.settings-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw; /* Full viewport width */
+    height: 100vh; /* Full viewport height */
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
+    z-index: 999; /* Just below the settings pane */
+    display: none; /* Initially hidden */
+}
+
+/* Show overlay when settings are active */
+.settings-overlay.visible {
+    display: block;
+}
+
+/* Shaded Container for Settings Sections */
+.settings-container-section {
+    margin-bottom: 15px;
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid var(--border-primary, #ccc);
+}
+
+/* Collapsible Sections */
+.collapsible-toggle {
+    cursor: pointer;
+    font-weight: bold;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.collapsible-content.hidden {
+    display: none;
+}
+
+/* Inline Toggle Alignment */
+.toggle-title, .nested-toggle {
+    display: flex;
+    align-items: center; /* Align items vertically */
+    justify-content: space-between; /* Push toggle to the right */
+    padding: 5px 0; /* Add vertical spacing */
+}
+
+.toggle-title label, .nested-toggle label {
+    font-weight: bold;
+    color: var(--text-primary, #333); /* Default text color */
+    flex: 1; /* Take up available space */
+    margin-right: 10px; /* Add space between label and toggle */
+}
+
+/* SVG Toggles */
+.svg-toggle {
+    width: 40px; /* Adjust toggle size */
+    height: 20px;
+    cursor: pointer;
+}
+
+.svg-toggle img {
+    width: 100%;
+    height: auto;
+}
+
+.svg-toggle.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}

swarm/static/rest_mode/css/simple.css

@@ -0,0 +1,44 @@
+.container[data-theme-layout="simple-layout"] {
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+}
+.main-pane {
+    width: 80%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+}
+.message-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+.user-message {
+    background: #DCF8C6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-end;
+    max-width: 70%;
+}
+.assistant-message {
+    background: #E6E6E6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-start;
+    max-width: 70%;
+}
+.error-message {
+    background: #F8D7DA;
+    color: #721C24;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+}
+.send-container {
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}

swarm/static/rest_mode/css/slack.css

@@ -0,0 +1,58 @@
+.container[data-theme-layout="slack-layout"] {
+    display: flex;
+    height: 100vh;
+}
+.channel-pane {
+    width: 250px;
+    background: #3F0E40;
+    color: white;
+    padding: 10px;
+}
+.channel-list {
+    list-style: none;
+    padding: 0;
+}
+.channel-list li {
+    padding: 10px;
+    cursor: pointer;
+}
+.channel-list li:hover {
+    background: #522653;
+}
+.main-pane {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+.message-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+.user-message {
+    background: #DCF8C6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-end;
+    max-width: 70%;
+}
+.assistant-message {
+    background: #E6E6E6;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+    align-self: flex-start;
+    max-width: 70%;
+}
+.error-message {
+    background: #F8D7DA;
+    color: #721C24;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 5px;
+}
+.send-container {
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}

swarm/static/rest_mode/css/style.css

@@ -0,0 +1,156 @@
+/* style.css - Shared Styles and Modular Imports */
+
+/* Modular Imports */
+@import './layout.css';
+@import './theme.css';
+@import './toast.css';
+
+/* Base Styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    border-style: solid;
+    border-width: 0 0 0 0;
+    background-color: var(--bg-primary);
+    box-sizing: border-box;
+    margin: 0 0 0 0;
+    color: var(--text-primary);
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    transition: background-color var(--transition-duration), color var(--transition-duration);
+    overflow-x: visible;
+    overflow-y: visible;
+}
+
+/* Sidebar Reveal Buttons */
+.sidebar-reveal-btn {
+    position: absolute;
+    top: 10px; /* Adjusted from 20px */
+    z-index: 1000;
+    background-color: var(--button-primary);
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition: background-color var(--transition-duration) ease;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7; /* Dimmed by default */
+}
+
+.sidebar-reveal-btn:hover {
+    opacity: 1; /* Fully visible on hover */
+}
+
+.sidebar-reveal-btn + .sidebar-reveal-btn {
+    top: 60px; /* Reduced gap between buttons */
+    opacity: 0.7;
+}
+
+.sidebar-reveal-btn:hover + .sidebar-reveal-btn {
+    opacity: 1;
+}
+
+/* Toast Container */
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* Logo Styling */
+.chat-logo {
+    width: 90px;
+    height: 90px;
+    display: block;
+    margin: 0 auto;
+}
+
+.logo-container {
+    text-align: center;
+    margin: 20px auto;
+}
+
+/* Form Container Adjustments */
+.form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 5px;
+    width: 100%;
+    padding: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+}
+
+/* Input and Submit Button Row */
+.send-container {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    margin-bottom: 5px;
+    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    padding: 0; /* Remove extra padding causing gap */
+}
+
+/* Input Field Styling */
+.rounded-input {
+    flex-grow: 1;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    box-sizing: border-box;
+    font-size: 18px;
+    margin: 0;
+    width: 100%;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
+    padding: 10px 15px; /* Ensure padding is consistent */
+}
+
+/* Submit Button Styling */
+.half-cut-button {
+    padding: 0 20px;
+    background-color: #707070;
+    color: white;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    transition: background-color 0.3s ease;
+    margin: 0;
+}
+
+.send-container .rounded-input {
+    border-radius: 20px 0 0 20px;
+}
+
+.send-container .half-cut-button {
+    border-radius: 0 20px 20px 0;
+}
+
+.half-cut-button:hover {
+    background-color: #505050;
+}

swarm/static/rest_mode/css/theme.css

@@ -0,0 +1,30 @@
+/* theme.css - Theme Variables and Colors */
+
+/* Light Mode Variables */
+:root {
+    --bg-primary: #ffffff;
+    --bg-container: #f0f8ff;
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --border-color: #d3d3d3;
+    --button-primary: #87cefa;
+    --button-hover: #00bfff;
+    --bg-hover: #e6f7ff; /* Light hover for messages */
+    --bg-message-other: #f9f9f9; /* Subtle contrast for message toolbars */
+    --transition-duration: 0.3s;
+
+    --icon-size: 1.5rem; /* Shared size for SVG icons */
+}
+
+/* Dark Mode Variables */
+[data-theme-dark="true"] {
+    --bg-primary: #1a1a1a;
+    --bg-container: #2a2a2a;
+    --text-primary: #f0f0f0;
+    --text-secondary: #bbbbbb;
+    --border-color: #555555;
+    --button-primary: #00bfff;
+    --button-hover: #87cefa;
+    --bg-hover: #333333; /* Dark hover for messages */
+    --bg-message-other: #444444; /* Subtle contrast for message toolbars */
+}

swarm/static/rest_mode/css/toast.css

@@ -0,0 +1,40 @@
+#toastContainer {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toast {
+    padding: 10px 15px;
+    border-radius: 5px;
+    color: white;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    opacity: 1;
+    transition: opacity 0.5s ease-out;
+}
+
+.toast.info {
+    background-color: #007bff; /* Blue for info */
+}
+
+.toast.success {
+    background-color: #28a745; /* Green for success */
+}
+
+.toast.error {
+    background-color: #dc3545; /* Red for error */
+}
+
+.toast.warning {
+    background-color: #ffc107; /* Yellow for warning */
+}
+
+/* Fade-out animation */
+.toast.fade-out {
+    opacity: 0;
+}

swarm/static/rest_mode/js/auth.js

@@ -0,0 +1,9 @@
+import { showToast } from './toast.js';
+
+/**
+ * Handles user logout.
+ */
+export function handleLogout() {
+    showToast("🚪 You have been logged out.", "info");
+    window.location.href = "/login";
+}

swarm/static/rest_mode/js/blueprint.js

@@ -0,0 +1,41 @@
+import { showToast } from './toast.js';
+
+const DEBUG_MODE = true;
+
+/**
+ * Logs debug messages if debug mode is enabled.
+ * @param {string} message - The message to log.
+ * @param {any} data - Additional data to include in the log.
+ */
+function debugLog(message, data = null) {
+    if (DEBUG_MODE) {
+        console.log(`[DEBUG] ${message}`, data);
+        showToast(`${message}`, "info");
+    }
+}
+
+/**
+ * Fetches the list of blueprints (models) from the server.
+ * @returns {Promise<Array>} - A promise resolving to the list of blueprints.
+ */
+export async function fetchBlueprints() {
+    debugLog("Fetching blueprints from /v1/models/...");
+    try {
+        const response = await fetch('/v1/models/');
+        if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
+
+        const data = await response.json();
+        debugLog("Blueprints fetched successfully.", data);
+
+        // Show an info notification
+        showToast("Blueprints fetched successfully.", "success", 5000);
+
+        return data.data || [];
+    } catch (error) {
+        console.error("Error fetching blueprints:", error);
+        // Show an error notification
+        showToast("Error fetching blueprints.", "error");
+        throw error;
+    }
+}
+

swarm/static/rest_mode/js/blueprintUtils.js

@@ -0,0 +1,12 @@
+export async function fetchBlueprints() {
+    try {
+        const response = await fetch('/v1/models/');
+        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+        const data = await response.json();
+        console.log('Raw blueprint data:', data);
+        return data.data.filter(model => model.object === 'model');
+    } catch (error) {
+        console.error('Error fetching blueprints:', error);
+        return [];
+    }
+}

swarm/static/rest_mode/js/chatLogic.js

@@ -0,0 +1,79 @@
+async function fetchBlueprints() {
+    const response = await fetch('/v1/models/');
+    const data = await response.json();
+    return data.data.filter(model => model.object === 'model');
+}
+
+function populateBlueprintDropdown(blueprints) {
+    const dropdown = document.getElementById('blueprintDropdown');
+    dropdown.innerHTML = '<option value="">Select a Blueprint</option>';
+    blueprints.forEach(bp => {
+        const option = document.createElement('option');
+        option.value = bp.id;
+        option.textContent = bp.title;
+        dropdown.appendChild(option);
+    });
+}
+
+let currentBlueprint = null;
+let currentMode = 'default';
+function switchBlueprint(blueprintId) {
+    currentBlueprint = blueprintId;
+    document.getElementById('messageHistory').innerHTML = '';
+    document.getElementById('blueprintTitle').textContent = blueprintId || 'No Blueprint Selected';
+    console.log(`Switched to blueprint: ${blueprintId}, mode: ${currentMode}`);
+}
+
+function setMode(mode) {
+    currentMode = mode;
+    console.log(`Mode set to: ${mode}`);
+}
+
+async function handleSubmit(event) {
+    event.preventDefault();
+    const input = document.getElementById('userInput');
+    const message = input.value.trim();
+    if (!message || !currentBlueprint) {
+        console.log('No message or blueprint selected');
+        return;
+    }
+
+    input.value = '';
+    const history = document.getElementById('messageHistory');
+    history.innerHTML += `<div class="user-message">${message} (Mode: ${currentMode})</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 }],
+                context_variables: { mode: currentMode }
+            })
+        });
+        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();
+    populateBlueprintDropdown(blueprints);
+    if (blueprints.length > 0) switchBlueprint(blueprints[0].id);
+
+    document.getElementById('blueprintDropdown').addEventListener('change', (e) => switchBlueprint(e.target.value));
+    document.querySelectorAll('.mode-button').forEach(button => {
+        button.addEventListener('click', () => setMode(button.dataset.mode));
+    });
+    document.getElementById('sendButton')?.addEventListener('click', handleSubmit);
+    document.getElementById('userInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') handleSubmit(e);
+    });
+});