mindroot 9.2.0__py3-none-any.whl → 9.5.0__py3-none-any.whl

mindroot/coreplugins/admin/static/js/api-key-script.js

@@ -0,0 +1,307 @@
+import { LitElement, html, css } from './lit-core.min.js';
+import { BaseEl } from './base.js';
+import showNotification from './notification.js';
+
+class ApiKeyScript extends BaseEl {
+  static properties = {
+    agents: { type: Array },
+    apiKeys: { type: Array },
+    selectedAgent: { type: String },
+    domainName: { type: String },
+    apiKey: { type: String },
+    scriptContent: { type: String },
+    showPreview: { type: Boolean }
+  };
+
+  static styles = css`
+    /* This component's styles are mostly for the form, not the global preview */
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .api-key-script {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+      gap: 20px;
+    }
+    .section {
+      background: rgb(10, 10, 25);
+      border-radius: 8px;
+      padding: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .form-group {
+      margin-bottom: 15px;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 5px;
+      color: #f0f0f0;
+      font-weight: 500;
+    }
+    input[type="text"],
+    select {
+      width: 100%;
+      padding: 8px 12px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: #f0f0f0;
+      font-size: 0.95rem;
+    }
+    button {
+      background: #2196F3;
+      color: #fff;
+      border: none;
+      padding: 0.75rem 1.5rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+      margin-right: 10px;
+    }
+    button:hover {
+      background: #1976D2;
+    }
+    button.secondary {
+      background: #2a2a40;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .script-preview {
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      padding: 1rem;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 0.9rem;
+      color: #f0f0f0;
+      white-space: pre-wrap;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+    .button-group {
+      display: flex;
+      gap: 10px;
+      margin-top: 15px;
+    }
+    .error {
+      color: #e57373;
+      font-size: 0.9rem;
+      margin-top: 5px;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.agents = [];
+    this.apiKeys = [];
+    this.selectedAgent = '';
+    this.domainName = window.location.origin;
+    this.apiKey = '';
+    this.scriptContent = '';
+    this.showPreview = false;
+    
+    this.fetchApiKeys();
+    this.fetchAgents();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Ensure preview elements are removed if the component is destroyed
+    this._removeGlobalPreview();
+  }
+
+  async fetchAgents() {
+    try {
+      const response = await fetch('/agents/local');
+      if (!response.ok) throw new Error('Failed to fetch agents');
+      this.agents = await response.json();
+    } catch (error) {
+      showNotification('error', `Error loading agents: ${error.message}`);
+    }
+  }
+
+  async fetchApiKeys() {
+    try {
+      const response = await fetch('/api_keys/list');
+      if (!response.ok) throw new Error('Failed to fetch API keys');
+      const result = await response.json();
+      this.apiKeys = result.data || [];
+    } catch (error) {
+      showNotification('error', `Error loading API keys: ${error.message}`);
+    }
+  }
+
+  handleInputChange(event) {
+    const { name, value } = event.target;
+    this[name] = value;
+    if (name === 'selectedAgent' || name === 'domainName' || name === 'apiKey') {
+      this.generateScript();
+    }
+  }
+
+  generateScript() {
+    if (!this.selectedAgent || !this.domainName || !this.apiKey) {
+      this.scriptContent = '';
+      return;
+    }
+    const config = {
+        agentName: this.selectedAgent,
+        apiKey: this.apiKey,
+        domain: this.domainName,
+        position: 'bottom-right'
+    };
+    const scriptBody = [
+        '(function() {',
+        '  const config = ' + JSON.stringify(config) + ';',
+        '  let iframeLoaded = false;',
+        '  function createChatIcon() {',
+        '    const icon = document.createElement("div");',
+        '    icon.id = "mindroot-chat-icon";',
+        '    icon.innerHTML = "💬";',
+        '    icon.style.cssText = "position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #2196F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10000; font-size: 24px; color: white; transition: all 0.3s ease;";',
+        '    icon.addEventListener("click", toggleChat);',
+        '    document.body.appendChild(icon);',
+        '  }',
+        '  function createChatIframe() {',
+        '    const container = document.createElement("div");',
+        '    container.id = "mindroot-chat-container";',
+        '    container.style.cssText = "position: fixed; bottom: 90px; right: 20px; width: 400px; height: 600px; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); z-index: 10001; display: none; overflow: hidden;";',
+        '    const iframe = document.createElement("iframe");',
+        '    iframe.style.cssText = "width: 100%; height: 100%; border: none; border-radius: 12px;";',
+        '    container.appendChild(iframe);',
+        '    document.body.appendChild(container);',
+        '  }',
+        '  function toggleChat() {',
+        '    const container = document.getElementById("mindroot-chat-container");',
+        '    const iframe = container.querySelector("iframe");',
+        '    if (!iframeLoaded) {',
+        '      iframe.src = `${config.domain}/agent/${config.agentName}?api_key=${config.apiKey}&embed=true`;',
+        '      iframeLoaded = true;',
+        '    }',
+        '    container.style.display = (container.style.display === "none" || !container.style.display) ? "block" : "none";',
+        '  }',
+        '  function init() {',
+        '    if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", function() { createChatIcon(); createChatIframe(); }); }',
+        '    else { createChatIcon(); createChatIframe(); }',
+        '  }',
+        '  init();',
+        '})();'
+    ].join('\n');
+    this.scriptContent = [
+        '<!-- MindRoot AI Chat Widget -->',
+        '<div id="mindroot-chat-widget"></div>',
+        '<script>',
+        scriptBody,
+        '</script>',
+        '<!-- End MindRoot AI Chat Widget -->'
+    ].join('\n');
+  }
+
+  togglePreview() {
+    this.showPreview = !this.showPreview;
+    if (this.showPreview) {
+      this._createGlobalPreview();
+    } else {
+      this._removeGlobalPreview();
+    }
+  }
+
+  _createGlobalPreview() {
+    this._removeGlobalPreview(); // Clean up any previous instances
+
+    const chatIcon = document.createElement('div');
+    chatIcon.id = 'mindroot-preview-chat-icon';
+    chatIcon.innerHTML = '<span class="material-icons">chat</span>';
+    chatIcon.style.cssText = 'position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #2196F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10000; color: white; font-size: 24px;';
+    chatIcon.addEventListener('click', () => this._togglePreviewChatWindow());
+    document.body.appendChild(chatIcon);
+  }
+
+  _togglePreviewChatWindow() {
+    let chatContainer = document.getElementById('mindroot-preview-chat-container');
+    if (!chatContainer) {
+      chatContainer = document.createElement('div');
+      chatContainer.id = 'mindroot-preview-chat-container';
+      chatContainer.style.cssText = 'position: fixed; bottom: 90px; right: 20px; width: 400px; height: 600px; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); z-index: 10001; display: block; overflow: hidden;';
+      
+      const iframe = document.createElement('iframe');
+      iframe.style.cssText = 'width: 100%; height: 100%; border: none; border-radius: 12px;';
+      iframe.src = `${this.domainName}/agent/${this.selectedAgent}?api_key=${this.apiKey}&embed=true`;
+      chatContainer.appendChild(iframe);
+      document.body.appendChild(chatContainer);
+    } else {
+      chatContainer.style.display = chatContainer.style.display === 'none' ? 'block' : 'none';
+    }
+  }
+
+  _removeGlobalPreview() {
+    const chatIcon = document.getElementById('mindroot-preview-chat-icon');
+    if (chatIcon) chatIcon.remove();
+    const chatContainer = document.getElementById('mindroot-preview-chat-container');
+    if (chatContainer) chatContainer.remove();
+  }
+
+  _render() {
+    return html`
+      <div class="api-key-script">
+        <div class="section">
+          <h3>Chat Widget Generator</h3>
+          <p>Generate an embeddable chat widget script for your website.</p>
+          
+          <div class="form-group">
+            <label for="selectedAgent">Select Agent:</label>
+            <select name="selectedAgent" @change=${this.handleInputChange} .value=${this.selectedAgent}>
+              <option value="">Choose an agent...</option>
+              ${this.agents.map(agent => html`<option value="${agent.name}">${agent.name}</option>`)}
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="domainName">Domain Name:</label>
+            <input type="text" name="domainName" .value=${this.domainName} @input=${this.handleInputChange} placeholder="https://your-domain.com">
+          </div>
+
+          <div class="form-group">
+            <label for="apiKey">Select API Key:</label>
+            <select name="apiKey" @change=${this.handleInputChange} .value=${this.apiKey}>
+              <option value="">Choose an API key...</option>
+              ${this.apiKeys.map(key => html`<option value="${key.key}">${key.description || key.key.substring(0, 8)}...</option>`)}
+            </select>
+            ${!this.apiKey ? html`<div class="error">An API key is required.</div>` : ''}
+          </div>
+
+          <div class="button-group">
+            <button @click=${this.generateScript}>Generate Script</button>
+            <button class="secondary" @click=${this.togglePreview} ?disabled=${!this.scriptContent}>
+              ${this.showPreview ? 'Hide Preview' : 'Show Preview'}
+            </button>
+          </div>
+        </div>
+
+        ${this.scriptContent ? html`
+          <div class="section">
+            <h3>Generated Script</h3>
+            <div class="script-preview">${this.scriptContent}</div>
+            <div class="button-group">
+              <button @click=${() => this.copyScript()}>Copy Script</button>
+              <button class="secondary" @click=${() => this.saveScript()}>Download Script</button>
+            </div>
+          </div>
+        ` : ''}
+
+        ${this.showPreview ? html`
+          <div class="section">
+            <h3>Live Preview</h3>
+            <p>A live preview of the chat widget is now active on this page in the bottom-right corner. Click 'Hide Preview' to remove it.</p>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('api-key-script', ApiKeyScript);

mindroot/coreplugins/admin/static/js/mcp-manager.js

@@ -0,0 +1,348 @@
+import { BaseEl } from '/admin/static/js/base.js';
+import { html, css } from '/admin/static/js/lit-core.min.js';
+
+class McpManager extends BaseEl {
+  static properties = {
+    servers: { type: Array },
+    catalog: { type: Object },
+    loading: { type: Boolean },
+    selectedTab: { type: String }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .mcp-manager {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+      gap: 20px;
+    }
+
+    .section {
+      background: rgb(10, 10, 25);
+      border-radius: 8px;
+      padding: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .tab {
+      padding: 0.5rem 1rem;
+      background: rgba(0, 0, 0, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+      color: #ccc;
+    }
+
+    .tab.active {
+      background: #4a9eff;
+      color: #fff;
+    }
+
+    .tab:hover {
+      background: rgba(74, 158, 255, 0.3);
+    }
+
+    .server-list {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .server-item {
+      background: rgba(0, 0, 0, 0.2);
+      padding: 1rem;
+      border-radius: 4px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .server-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    .server-name {
+      font-weight: bold;
+      color: #4a9eff;
+    }
+
+    .status-badge {
+      padding: 0.2rem 0.5rem;
+      border-radius: 3px;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+    }
+
+    .status-badge.connected {
+      background: rgba(40, 167, 69, 0.2);
+      color: #28a745;
+    }
+
+    .status-badge.disconnected {
+      background: rgba(108, 117, 125, 0.2);
+      color: #6c757d;
+    }
+
+    .status-badge.error {
+      background: rgba(220, 53, 69, 0.2);
+      color: #dc3545;
+    }
+
+    .server-actions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    button {
+      background: #2a2a40;
+      color: #fff;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    button:hover {
+      background: #3a3a50;
+    }
+
+    button.success {
+      background: #28a745;
+    }
+
+    button.success:hover {
+      background: #218838;
+    }
+
+    button.warning {
+      background: #ffc107;
+      color: #000;
+    }
+
+    button.warning:hover {
+      background: #e0a800;
+    }
+
+    button.danger {
+      background: #dc3545;
+    }
+
+    button.danger:hover {
+      background: #c82333;
+    }
+
+    .loading {
+      text-align: center;
+      color: #ccc;
+      padding: 2rem;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.servers = [];
+    this.catalog = {};
+    this.loading = false;
+    this.selectedTab = 'servers';
+    this.loadServers();
+  }
+
+  async loadServers() {
+    this.loading = true;
+    try {
+      const response = await fetch('/admin/mcp/list');
+      if (response.ok) {
+        const data = await response.json();
+        this.servers = data.data || [];
+      }
+    } catch (error) {
+      console.error('Error loading MCP servers:', error);
+    }
+    this.loading = false;
+  }
+
+  async loadCatalog() {
+    this.loading = true;
+    try {
+      const response = await fetch('/admin/mcp/catalog');
+      if (response.ok) {
+        const data = await response.json();
+        this.catalog = data.data || {};
+      }
+    } catch (error) {
+      console.error('Error loading MCP catalog:', error);
+    }
+    this.loading = false;
+  }
+
+  async connectServer(serverName) {
+    try {
+      const response = await fetch('/admin/mcp/connect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ server_name: serverName })
+      });
+      if (response.ok) {
+        await this.loadServers();
+      }
+    } catch (error) {
+      console.error('Error connecting server:', error);
+    }
+  }
+
+  async disconnectServer(serverName) {
+    try {
+      const response = await fetch('/admin/mcp/disconnect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ server_name: serverName })
+      });
+      if (response.ok) {
+        await this.loadServers();
+      }
+    } catch (error) {
+      console.error('Error disconnecting server:', error);
+    }
+  }
+
+  async removeServer(serverName) {
+    if (!confirm(`Are you sure you want to remove the MCP server '${serverName}'?`)) return;
+    
+    try {
+      const response = await fetch('/admin/mcp/remove', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ server_name: serverName })
+      });
+      if (response.ok) {
+        await this.loadServers();
+      }
+    } catch (error) {
+      console.error('Error removing server:', error);
+    }
+  }
+
+  selectTab(tab) {
+    this.selectedTab = tab;
+    if (tab === 'catalog' && Object.keys(this.catalog).length === 0) {
+      this.loadCatalog();
+    }
+  }
+
+  _render() {
+    return html`
+      <div class="mcp-manager">
+        <div class="section">
+          <h3>MCP Server Management</h3>
+          
+          <div class="tabs">
+            <div class="tab ${this.selectedTab === 'servers' ? 'active' : ''}" 
+                 @click=${() => this.selectTab('servers')}>Local Servers</div>
+            <div class="tab ${this.selectedTab === 'catalog' ? 'active' : ''}" 
+                 @click=${() => this.selectTab('catalog')}>Server Catalog</div>
+          </div>
+
+          ${this.loading ? html`<div class="loading">Loading...</div>` : ''}
+          
+          ${this.selectedTab === 'servers' ? this.renderServers() : this.renderCatalog()}
+        </div>
+      </div>
+    `;
+  }
+
+  renderServers() {
+    if (this.servers.length === 0) {
+      return html`<p>No MCP servers configured. Use the catalog to install some.</p>`;
+    }
+
+    return html`
+      <div class="server-list">
+        ${this.servers.map(server => html`
+          <div class="server-item">
+            <div class="server-header">
+              <div class="server-name">${server.name}</div>
+              <div class="status-badge ${server.status}">${server.status}</div>
+            </div>
+            <div class="server-description">${server.description}</div>
+            <div class="server-meta">
+              <small>Transport: ${server.transport} | Command: ${server.command}</small>
+            </div>
+            <div class="server-actions">
+              ${server.status === 'connected' 
+                ? html`<button class="warning" @click=${() => this.disconnectServer(server.name)}>Disconnect</button>`
+                : html`<button class="success" @click=${() => this.connectServer(server.name)}>Connect</button>`
+              }
+              <button class="danger" @click=${() => this.removeServer(server.name)}>Remove</button>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  renderCatalog() {
+    const servers = this.catalog.servers || {};
+    const serverList = Object.entries(servers);
+
+    if (serverList.length === 0) {
+      return html`<p>No servers in catalog. Loading...</p>`;
+    }
+
+    return html`
+      <div class="server-list">
+        ${serverList.map(([name, server]) => html`
+          <div class="server-item">
+            <div class="server-header">
+              <div class="server-name">${server.display_name || name}</div>
+              <div class="status-badge ${server.installed ? 'connected' : 'disconnected'}">
+                ${server.installed ? 'Installed' : 'Available'}
+              </div>
+            </div>
+            <div class="server-description">${server.description}</div>
+            <div class="server-actions">
+              ${server.installed 
+                ? html`<button disabled>Already Installed</button>`
+                : html`<button class="success" @click=${() => this.installFromCatalog(name)}>Install</button>`
+              }
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  async installFromCatalog(serverName) {
+    try {
+      const response = await fetch('/admin/mcp/catalog/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ server_name: serverName })
+      });
+      if (response.ok) {
+        await this.loadServers();
+        await this.loadCatalog();
+      }
+    } catch (error) {
+      console.error('Error installing from catalog:', error);
+    }
+  }
+}
+
+customElements.define('mcp-manager', McpManager);