agentgui 1.0.820 → 1.0.822

package/static/js/ui-components.js

@@ -1,187 +1,88 @@
-
-class UIComponents {
-  static createModal(config = {}) {
-    const {
-      title = 'Dialog',
-      content = '',
-      buttons = [],
-      onClose = null,
-      size = 'medium'
-    } = config;
-
-    const modal = document.createElement('div');
-    modal.className = 'modal-overlay';
-    modal.dataset.modal = 'true';
-
-    const sizeClasses = {
-      'small': 'max-w-sm',
-      'medium': 'max-w-md',
-      'large': 'max-w-2xl'
-    };
-
-    modal.innerHTML = `
-      <div class="modal-content card ${sizeClasses[size] || sizeClasses['medium']}">
-        <div class="card-header flex justify-between items-center">
-          <h2 class="text-xl font-bold">${UIComponents.escapeHtml(title)}</h2>
-          <button class="btn btn-ghost btn-sm modal-close">&times;</button>
-        </div>
-        <div class="card-body modal-body">
-          ${typeof content === 'string' ? UIComponents.escapeHtml(content) : ''}
-        </div>
-        <div class="card-footer flex gap-2 justify-end">
-          ${buttons.map(btn => `
-            <button class="btn btn-${btn.variant || 'secondary'}" data-action="${btn.action || 'close'}">
-              ${UIComponents.escapeHtml(btn.label)}
-            </button>
-          `).join('')}
-        </div>
-      </div>
-    `;
-
-    const closeBtn = modal.querySelector('.modal-close');
-    closeBtn.addEventListener('click', () => {
-      modal.remove();
-      if (onClose) onClose();
-    });
-
-    modal.querySelectorAll('[data-action]').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        const action = e.target.dataset.action;
-        if (action === 'close') {
-          modal.remove();
-          if (onClose) onClose();
-        }
-      });
-    });
-
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        modal.remove();
-        if (onClose) onClose();
-      }
-    });
-
-    return modal;
-  }
-
-  static createTabs(config = {}) {
-    const {
-      tabs = [],
-      activeTab = 0,
-      onChange = null
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'tabs';
-
-    const tabButtons = document.createElement('div');
-    tabButtons.className = 'tab-buttons flex border-b';
-
-    tabs.forEach((tab, index) => {
-      const btn = document.createElement('button');
-      btn.className = `tab tab-underline tab-button ${index === activeTab ? 'tab-active' : ''}`;
-      btn.textContent = tab.label;
-      btn.dataset.tabIndex = index;
-
-      btn.addEventListener('click', () => {
-        tabButtons.querySelectorAll('.tab-button').forEach((b, i) => {
-          if (i === index) {
-            b.classList.add('tab-active');
-          } else {
-            b.classList.remove('tab-active');
-          }
-        });
-
-        tabContent.querySelectorAll('.tab-pane').forEach((pane, i) => {
-          pane.style.display = i === index ? 'block' : 'none';
-        });
-
-        if (onChange) onChange(index);
-      });
-
-      tabButtons.appendChild(btn);
-    });
-
-    container.appendChild(tabButtons);
-
-    const tabContent = document.createElement('div');
-    tabContent.className = 'tab-content mt-4';
-
-    tabs.forEach((tab, index) => {
-      const pane = document.createElement('div');
-      pane.className = 'tab-pane';
-      pane.style.display = index === activeTab ? 'block' : 'none';
-      pane.innerHTML = typeof tab.content === 'string' ? tab.content : '';
-      tabContent.appendChild(pane);
-    });
-
-    container.appendChild(tabContent);
-    return container;
-  }
-
-  static createAlert(config = {}) {
-    const {
-      message = '',
-      type = 'info',
-      duration = 5000,
-      dismissible = true
-    } = config;
-
-    const alert = document.createElement('div');
-    const typeClasses = {
-      'info': 'alert-info',
-      'success': 'alert-success',
-      'warning': 'alert-warning',
-      'error': 'alert-error'
-    };
-
-    alert.className = `alert ${typeClasses[type] || typeClasses['info']}`;
-    alert.innerHTML = `
-      <div class="flex justify-between items-center">
-        <span>${UIComponents.escapeHtml(message)}</span>
-        ${dismissible ? '<button class="text-current hover:opacity-75">&times;</button>' : ''}
-      </div>
-    `;
-
-    if (dismissible) {
-      const closeBtn = alert.querySelector('button');
-      closeBtn.addEventListener('click', () => alert.remove());
-    }
-
-    if (duration > 0) {
-      setTimeout(() => alert.remove(), duration);
-    }
-
-    return alert;
-  }
-
-  static createSpinner(config = {}) {
-    const {
-      size = 'medium',
-      text = 'Loading...'
-    } = config;
-
-    const sizeClasses = {
-      'small': 'spinner-xs',
-      'medium': 'spinner-sm',
-      'large': 'spinner-md'
-    };
-
-    const container = document.createElement('div');
-    container.className = 'flex items-center gap-3 justify-center p-4';
-    container.innerHTML = `
-      <div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div>
-      <span class="text-base-content">${UIComponents.escapeHtml(text)}</span>
-    `;
-    return container;
-  }
-
-  static escapeHtml(text) {
-    return window._escHtml(text);
-  }
-
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = UIComponents;
-}
+class UIComponents {
+  static createModal(config = {}) {
+    const { title = 'Dialog', content = '', buttons = [], onClose = null, size = 'medium' } = config;
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.dataset.modal = 'true';
+    const sizeClasses = { 'small': 'max-w-sm', 'medium': 'max-w-md', 'large': 'max-w-2xl' };
+    modal.innerHTML = `<div class="modal-content card ${sizeClasses[size] || sizeClasses['medium']}"><div class="card-header flex justify-between items-center"><h2 class="text-xl font-bold">${UIComponents.escapeHtml(title)}</h2><button class="btn btn-ghost btn-sm modal-close">&times;</button></div><div class="card-body modal-body">${typeof content === 'string' ? UIComponents.escapeHtml(content) : ''}</div><div class="card-footer flex gap-2 justify-end">${buttons.map(btn => `<button class="btn btn-${btn.variant || 'secondary'}" data-action="${btn.action || 'close'}">${UIComponents.escapeHtml(btn.label)}</button>`).join('')}</div></div>`;
+    const closeBtn = modal.querySelector('.modal-close');
+    closeBtn.addEventListener('click', () => { modal.remove(); if (onClose) onClose(); });
+    modal.querySelectorAll('[data-action]').forEach(btn => {
+      btn.addEventListener('click', (e) => { const action = e.target.dataset.action; if (action === 'close') { modal.remove(); if (onClose) onClose(); } });
+    });
+    modal.addEventListener('click', (e) => { if (e.target === modal) { modal.remove(); if (onClose) onClose(); } });
+    return modal;
+  }
+
+  static createTabs(config = {}) {
+    const { tabs = [], activeTab = 0, onChange = null } = config;
+    const container = document.createElement('div');
+    container.className = 'tabs';
+    const tabButtons = document.createElement('div');
+    tabButtons.className = 'tab-buttons flex border-b';
+    const tabContent = document.createElement('div');
+    tabContent.className = 'tab-content mt-4';
+    tabs.forEach((tab, index) => {
+      const btn = document.createElement('button');
+      btn.className = `tab tab-underline tab-button ${index === activeTab ? 'tab-active' : ''}`;
+      btn.textContent = tab.label;
+      btn.dataset.tabIndex = index;
+      btn.addEventListener('click', () => {
+        tabButtons.querySelectorAll('.tab-button').forEach((b, i) => b.classList.toggle('tab-active', i === index));
+        tabContent.querySelectorAll('.tab-pane').forEach((pane, i) => { pane.style.display = i === index ? 'block' : 'none'; });
+        if (onChange) onChange(index);
+      });
+      tabButtons.appendChild(btn);
+      const pane = document.createElement('div');
+      pane.className = 'tab-pane';
+      pane.style.display = index === activeTab ? 'block' : 'none';
+      pane.innerHTML = typeof tab.content === 'string' ? tab.content : '';
+      tabContent.appendChild(pane);
+    });
+    container.appendChild(tabButtons);
+    container.appendChild(tabContent);
+    return container;
+  }
+
+  static createAlert(config = {}) {
+    const { message = '', type = 'info', duration = 5000, dismissible = true } = config;
+    const alert = document.createElement('div');
+    const typeClasses = { 'info': 'alert-info', 'success': 'alert-success', 'warning': 'alert-warning', 'error': 'alert-error' };
+    alert.className = `alert ${typeClasses[type] || typeClasses['info']}`;
+    alert.innerHTML = `<div class="flex justify-between items-center"><span>${UIComponents.escapeHtml(message)}</span>${dismissible ? '<button class="text-current hover:opacity-75">&times;</button>' : ''}</div>`;
+    if (dismissible) alert.querySelector('button').addEventListener('click', () => alert.remove());
+    if (duration > 0) setTimeout(() => alert.remove(), duration);
+    return alert;
+  }
+
+  static createSpinner(config = {}) {
+    const { size = 'medium', text = 'Loading...' } = config;
+    const sizeClasses = { 'small': 'spinner-xs', 'medium': 'spinner-sm', 'large': 'spinner-md' };
+    const container = document.createElement('div');
+    container.className = 'flex items-center gap-3 justify-center p-4';
+    container.innerHTML = `<div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div><span class="text-base-content">${UIComponents.escapeHtml(text)}</span>`;
+    return container;
+  }
+
+  static createProgressBar(config = {}) {
+    const { percentage = 0, label = '', showLabel = true } = config;
+    const container = document.createElement('div');
+    container.className = 'progress-container';
+    let html = '';
+    if (label && showLabel) html += `<div class="flex justify-between mb-2 text-sm"><span>${UIComponents.escapeHtml(label)}</span><span>${Math.round(percentage)}%</span></div>`;
+    html += `<progress class="progress progress-primary progress-xs w-full" value="${Math.min(100, Math.max(0, percentage))}" max="100"></progress>`;
+    container.innerHTML = html;
+    return container;
+  }
+
+  static createCollapsible(config = {}) {
+    const { title = 'Details', content = '', isOpen = false } = config;
+    const container = document.createElement('div');
+    container.className = 'collapsible';
+    container.innerHTML = `<details ${isOpen ? 'open' : ''}><summary class="cursor-pointer font-semibold hover:bg-base-200 px-2 py-1 rounded transition-colors">${UIComponents.escapeHtml(title)}</summary><div class="content mt-2 ml-4">${typeof content === 'string' ? content : ''}</div></details>`;
+    return container;
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) module.exports = UIComponents;