@trustquery/browser 0.1.0

package/src/BubbleManager.js

@@ -0,0 +1,219 @@
+// BubbleManager - Handles hover bubble tooltips for matched words
+
+export default class BubbleManager {
+  /**
+   * Create bubble manager
+   * @param {Object} options - Configuration
+   */
+  constructor(options = {}) {
+    this.options = {
+      bubbleDelay: options.bubbleDelay || 200,
+      styleManager: options.styleManager || null,
+      commandHandlers: options.commandHandlers || null,
+      ...options
+    };
+
+    this.currentBubble = null;
+    this.hoverTimeout = null;
+
+    console.log('[BubbleManager] Initialized');
+  }
+
+  /**
+   * Show bubble for a match element
+   * @param {HTMLElement} matchEl - Match element
+   * @param {Object} matchData - Match data
+   */
+  showBubble(matchEl, matchData) {
+    // Remove any existing bubble
+    this.hideBubble();
+
+    // Get bubble content
+    const content = this.getBubbleContent(matchData);
+
+    if (!content) {
+      return; // No content to show
+    }
+
+    // Create bubble
+    const bubble = document.createElement('div');
+    bubble.className = 'tq-bubble';
+
+    // Add header container based on message-state
+    const messageState = matchData.intent?.handler?.['message-state'] || 'info';
+    this.createBubbleHeader(bubble, messageState);
+
+    // Add content container
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'tq-bubble-content';
+    contentContainer.innerHTML = content;
+    bubble.appendChild(contentContainer);
+
+    // Apply inline styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyBubbleStyles(bubble);
+    }
+
+    // Add to document
+    document.body.appendChild(bubble);
+    this.currentBubble = bubble;
+
+    // Position bubble relative to match element
+    this.positionBubble(bubble, matchEl);
+
+    // Auto-hide when mouse leaves bubble
+    bubble.addEventListener('mouseleave', () => {
+      this.hideBubble();
+    });
+
+    console.log('[BubbleManager] Bubble shown for:', matchData.text);
+  }
+
+  /**
+   * Create header container for bubble
+   * @param {HTMLElement} bubble - Bubble element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  createBubbleHeader(bubble, messageState) {
+    const headerContainer = document.createElement('div');
+    headerContainer.className = 'bubble-header-container';
+    headerContainer.setAttribute('data-type', messageState);
+
+    // Create image
+    const img = document.createElement('img');
+    img.src = `./assets/trustquery-${messageState}.svg`;
+    img.style.height = '24px';
+    img.style.width = 'auto';
+
+    // Create text span
+    const span = document.createElement('span');
+    const textMap = {
+      'error': 'TrustQuery Stop',
+      'warning': 'TrustQuery Clarify',
+      'info': 'TrustQuery Quick Link'
+    };
+    span.textContent = textMap[messageState] || 'TrustQuery';
+
+    // Append to header
+    headerContainer.appendChild(img);
+    headerContainer.appendChild(span);
+
+    // Apply styles to header via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyBubbleHeaderStyles(headerContainer, messageState);
+    }
+
+    bubble.appendChild(headerContainer);
+  }
+
+  /**
+   * Hide current bubble
+   */
+  hideBubble() {
+    if (this.currentBubble) {
+      this.currentBubble.remove();
+      this.currentBubble = null;
+    }
+  }
+
+  /**
+   * Get bubble content using command handler
+   * @param {Object} matchData - Match data including command and intent
+   * @returns {string|null} HTML content or null
+   */
+  getBubbleContent(matchData) {
+    // Check for new simplified format first (intent.handler.message)
+    if (matchData.intent && matchData.intent.handler) {
+      const handler = matchData.intent.handler;
+      const message = handler.message || handler['message-content'] || matchData.intent.description;
+
+      if (message) {
+        // Return just the message text - header is added separately
+        return this.escapeHtml(message);
+      }
+    }
+
+    // Use command handler if available (legacy support)
+    if (this.options.commandHandlers && matchData.commandType) {
+      const content = this.options.commandHandlers.getBubbleContent(matchData.commandType, matchData);
+      if (content) {
+        return content;
+      }
+    }
+
+    // Fallback to legacy method
+    const command = matchData.command || {};
+
+    if (command.content) {
+      return command.content;
+    }
+
+    if (command.bubbleContent) {
+      return command.bubbleContent;
+    }
+
+    if (command.description) {
+      return `<div class="tq-bubble-description">${this.escapeHtml(command.description)}</div>`;
+    }
+
+    return null;
+  }
+
+  /**
+   * Position bubble relative to match element
+   * @param {HTMLElement} bubble - Bubble element
+   * @param {HTMLElement} matchEl - Match element
+   */
+  positionBubble(bubble, matchEl) {
+    const rect = matchEl.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+
+    // Position above match by default (since input is at bottom)
+    let top = rect.top + window.scrollY - bubbleRect.height - 8;
+    let left = rect.left + window.scrollX;
+
+    // If bubble goes off top edge, position below instead
+    if (top < window.scrollY) {
+      top = rect.bottom + window.scrollY + 8;
+    }
+
+    // Check if bubble goes off right edge
+    if (left + bubbleRect.width > window.innerWidth) {
+      left = window.innerWidth - bubbleRect.width - 10;
+    }
+
+    bubble.style.top = `${top}px`;
+    bubble.style.left = `${left}px`;
+  }
+
+  /**
+   * Escape HTML
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Cleanup
+   */
+  cleanup() {
+    this.hideBubble();
+
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+
+  /**
+   * Destroy
+   */
+  destroy() {
+    this.cleanup();
+    console.log('[BubbleManager] Destroyed');
+  }
+}

package/src/CommandHandlers.js

@@ -0,0 +1,350 @@
+// CommandHandlers - Handler registry for different command types
+// Each command type has specific styling and behavior
+
+export class CommandHandlerRegistry {
+  constructor() {
+    this.handlers = new Map();
+    this.registerDefaultHandlers();
+  }
+
+  /**
+   * Register default handlers
+   */
+  registerDefaultHandlers() {
+    this.register('not-allowed', new NotAllowedHandler());
+    this.register('show-warning', new ShowWarningHandler());
+    this.register('user-select-oneOf-and-warn', new UserSelectWithWarningHandler());
+    this.register('user-select-oneOf', new UserSelectHandler());
+    this.register('api-json-table', new ApiJsonTableHandler());
+    this.register('api-md-table', new ApiMdTableHandler());
+  }
+
+  /**
+   * Register a handler
+   * @param {string} commandType - Command type (e.g., 'not-allowed', 'show-warning')
+   * @param {CommandHandler} handler - Handler instance
+   */
+  register(commandType, handler) {
+    this.handlers.set(commandType, handler);
+    console.log(`[CommandHandlerRegistry] Registered handler: ${commandType}`);
+  }
+
+  /**
+   * Get handler for a command type
+   * @param {string} commandType - Command type
+   * @returns {CommandHandler|null} Handler or null
+   */
+  getHandler(commandType) {
+    return this.handlers.get(commandType) || null;
+  }
+
+  /**
+   * Get styles for a command type (or based on message-state)
+   * @param {string} commandType - Command type
+   * @param {Object} matchData - Match data including intent/handler
+   * @returns {Object} Style configuration
+   */
+  getStyles(commandType, matchData = null) {
+    // If matchData is provided, check message-state first
+    if (matchData && matchData.intent && matchData.intent.handler) {
+      const messageState = matchData.intent.handler['message-state'];
+      if (messageState) {
+        return this.getStylesForMessageState(messageState);
+      }
+    }
+
+    // Fall back to command type handler
+    const handler = this.getHandler(commandType);
+    return handler ? handler.getStyles() : this.getDefaultStyles();
+  }
+
+  /**
+   * Get styles based on message-state
+   * @param {string} messageState - Message state (error, warning, info)
+   * @returns {Object} Style configuration
+   */
+  getStylesForMessageState(messageState) {
+    const stateStyles = {
+      'error': {
+        backgroundColor: 'rgba(220, 38, 38, 0.15)', // Red
+        color: '#991b1b',
+        textDecoration: 'none',
+        borderBottom: '2px solid #dc2626',
+        borderRadius: '0',
+        cursor: 'not-allowed'
+      },
+      'warning': {
+        backgroundColor: 'rgba(245, 158, 11, 0.15)', // Orange
+        color: '#92400e',
+        textDecoration: 'none',
+        borderBottom: '2px solid #f59e0b',
+        borderRadius: '0',
+        cursor: 'help'
+      },
+      'info': {
+        backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green
+        color: '#065f46',
+        textDecoration: 'none',
+        borderBottom: '2px solid #10b981',
+        borderRadius: '0',
+        cursor: 'pointer'
+      }
+    };
+
+    return stateStyles[messageState] || this.getDefaultStyles();
+  }
+
+  /**
+   * Get bubble content for a match
+   * @param {string} commandType - Command type
+   * @param {Object} matchData - Match data including intent info
+   * @returns {string} HTML content for bubble
+   */
+  getBubbleContent(commandType, matchData) {
+    const handler = this.getHandler(commandType);
+    return handler ? handler.getBubbleContent(matchData) : null;
+  }
+
+  /**
+   * Get default styles (fallback)
+   */
+  getDefaultStyles() {
+    return {
+      backgroundColor: 'rgba(74, 144, 226, 0.15)',
+      color: '#2b6cb0',
+      textDecoration: 'none',
+      borderBottom: 'none'
+    };
+  }
+}
+
+/**
+ * Base handler class
+ */
+class CommandHandler {
+  getStyles() {
+    return {};
+  }
+
+  getBubbleContent(matchData) {
+    return null;
+  }
+
+  shouldBlockSubmit(matchData) {
+    return false;
+  }
+}
+
+/**
+ * Handler for not-allowed commands (errors/forbidden)
+ * Red background, red underline
+ */
+class NotAllowedHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(220, 38, 38, 0.15)', // Red background
+      color: '#991b1b', // Dark red text
+      textDecoration: 'none',
+      borderBottom: '2px solid #dc2626', // Red underline
+      borderRadius: '0', // No radius to avoid curved bottom border
+      cursor: 'not-allowed'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const handler = intent.handler || {};
+
+    const description = intent.description || 'Not allowed';
+    const message = handler['message-content'] || description;
+
+    return `
+      <div style="color: #991b1b;">
+        <div style="font-weight: 600; margin-bottom: 4px; display: flex; align-items: center;">
+          <span style="margin-right: 6px;">⛔</span>
+          Not Allowed
+        </div>
+        <div style="font-size: 12px; line-height: 1.4;">
+          ${this.escapeHtml(message)}
+        </div>
+      </div>
+    `;
+  }
+
+  shouldBlockSubmit(matchData) {
+    const handler = matchData.intent?.handler || {};
+    return handler['block-submit'] === true;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for show-warning commands
+ * Yellow/orange background, orange underline
+ */
+class ShowWarningHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(245, 158, 11, 0.15)', // Amber/orange background
+      color: '#92400e', // Dark amber text
+      textDecoration: 'none',
+      borderBottom: '2px solid #f59e0b', // Orange underline
+      borderRadius: '0', // No radius to avoid curved bottom border
+      cursor: 'help'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const handler = intent.handler || {};
+
+    const description = intent.description || 'Warning';
+    const message = handler['message-content'] || description;
+
+    return `
+      <div style="color: #92400e;">
+        <div style="font-weight: 600; margin-bottom: 4px; display: flex; align-items: center;">
+          <span style="margin-right: 6px;">⚠️</span>
+          Warning
+        </div>
+        <div style="font-size: 12px; line-height: 1.4;">
+          ${this.escapeHtml(message)}
+        </div>
+      </div>
+    `;
+  }
+
+  shouldBlockSubmit(matchData) {
+    const handler = matchData.intent?.handler || {};
+    return handler['block-submit'] === true;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for user-select-oneOf-and-warn commands
+ * Shows warning + dropdown
+ */
+class UserSelectWithWarningHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(245, 158, 11, 0.15)',
+      color: '#92400e',
+      textDecoration: 'none',
+      borderBottom: '2px solid #f59e0b',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Will show dropdown on click instead of bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for user-select-oneOf commands
+ * Shows dropdown without warning
+ */
+class UserSelectHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(59, 130, 246, 0.15)', // Blue background
+      color: '#1e40af', // Dark blue text
+      textDecoration: 'none',
+      borderBottom: '2px solid #3b82f6', // Blue underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Will show dropdown on click instead of bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for api-json-table commands
+ */
+class ApiJsonTableHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const description = intent.description || 'Click to view data';
+
+    return `
+      <div style="color: #065f46;">
+        <div style="font-weight: 600; margin-bottom: 4px;">
+          📊 Data Table
+        </div>
+        <div style="font-size: 12px;">
+          ${this.escapeHtml(description)}
+        </div>
+      </div>
+    `;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for api-md-table commands
+ */
+class ApiMdTableHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)',
+      color: '#065f46',
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const description = intent.description || 'Click to view data';
+
+    return `
+      <div style="color: #065f46;">
+        <div style="font-weight: 600; margin-bottom: 4px;">
+          📊 Data Table
+        </div>
+        <div style="font-size: 12px;">
+          ${this.escapeHtml(description)}
+        </div>
+      </div>
+    `;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+export default CommandHandlerRegistry;