@trustquery/browser 0.1.0

package/src/InteractionHandler.js

@@ -0,0 +1,225 @@
+// InteractionHandler - Orchestrates hover bubbles and click interactions on matched words
+// Delegates to BubbleManager and DropdownManager for specific functionality
+
+import BubbleManager from './BubbleManager.js';
+import DropdownManager from './DropdownManager.js';
+
+export default class InteractionHandler {
+  /**
+   * Create interaction handler
+   * @param {HTMLElement} overlay - Overlay element containing matches
+   * @param {Object} options - Configuration
+   */
+  constructor(overlay, options = {}) {
+    this.overlay = overlay;
+    this.options = {
+      bubbleDelay: options.bubbleDelay || 200,
+      onWordClick: options.onWordClick || null,
+      onWordHover: options.onWordHover || null,
+      styleManager: options.styleManager || null,
+      commandHandlers: options.commandHandlers || null,
+      textarea: options.textarea || null,
+      ...options
+    };
+
+    this.hoverTimeout = null;
+
+    // Create manager instances
+    this.bubbleManager = new BubbleManager({
+      bubbleDelay: this.options.bubbleDelay,
+      styleManager: this.options.styleManager,
+      commandHandlers: this.options.commandHandlers
+    });
+
+    this.dropdownManager = new DropdownManager({
+      styleManager: this.options.styleManager,
+      textarea: this.options.textarea,
+      onWordClick: this.options.onWordClick,
+      dropdownOffset: this.options.dropdownOffset
+    });
+
+    console.log('[InteractionHandler] Initialized');
+  }
+
+  /**
+   * Update handlers after overlay re-render
+   * Attach event listeners to all .tq-match elements
+   */
+  update() {
+    // Remove old handlers (if any)
+    this.cleanup();
+
+    // Find all match elements
+    const matches = this.overlay.querySelectorAll('.tq-match');
+
+    matches.forEach(matchEl => {
+      const behavior = matchEl.getAttribute('data-behavior');
+
+      // Hover events for bubbles
+      matchEl.addEventListener('mouseenter', (e) => this.handleMouseEnter(e, matchEl));
+      matchEl.addEventListener('mouseleave', (e) => this.handleMouseLeave(e, matchEl));
+
+      // Click events for dropdowns/actions
+      matchEl.addEventListener('click', (e) => this.handleClick(e, matchEl));
+
+      // Add hover class for CSS styling
+      matchEl.classList.add('tq-hoverable');
+
+      // Auto-show dropdown for dropdown-behavior matches
+      if (behavior === 'dropdown') {
+        const matchData = this.getMatchData(matchEl);
+        // Only show if this isn't the currently active dropdown match
+        if (!this.dropdownManager.activeDropdownMatch ||
+            this.dropdownManager.activeDropdownMatch.textContent !== matchEl.textContent) {
+          this.dropdownManager.showDropdown(matchEl, matchData);
+        }
+      }
+    });
+
+    console.log('[InteractionHandler] Updated with', matches.length, 'interactive elements');
+  }
+
+  /**
+   * Handle mouse enter on a match
+   * @param {Event} e - Mouse event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleMouseEnter(e, matchEl) {
+    const behavior = matchEl.getAttribute('data-behavior');
+
+    // Only show bubble if behavior is 'bubble' or 'hover'
+    if (behavior === 'bubble' || behavior === 'hover') {
+      // Clear any existing timeout
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout);
+      }
+
+      // Delay bubble appearance
+      this.hoverTimeout = setTimeout(() => {
+        const matchData = this.getMatchData(matchEl);
+        this.bubbleManager.showBubble(matchEl, matchData);
+      }, this.options.bubbleDelay);
+    }
+
+    // Callback
+    if (this.options.onWordHover) {
+      const matchData = this.getMatchData(matchEl);
+      this.options.onWordHover(matchData);
+    }
+  }
+
+  /**
+   * Handle mouse leave from a match
+   * @param {Event} e - Mouse event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleMouseLeave(e, matchEl) {
+    // Clear hover timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+
+    // Don't immediately hide bubble - let user hover over it
+    // Bubble will auto-hide when mouse leaves bubble area
+  }
+
+  /**
+   * Handle click on a match
+   * @param {Event} e - Click event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleClick(e, matchEl) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const behavior = matchEl.getAttribute('data-behavior');
+    const matchData = this.getMatchData(matchEl);
+
+    console.log('[InteractionHandler] Match clicked:', matchData);
+
+    // Handle different behaviors
+    if (behavior === 'dropdown') {
+      // Toggle dropdown - close if already open for this match, otherwise show
+      if (this.dropdownManager.activeDropdownMatch === matchEl) {
+        this.dropdownManager.hideDropdown();
+      } else {
+        this.dropdownManager.showDropdown(matchEl, matchData);
+      }
+    } else if (behavior === 'action') {
+      // Custom action callback
+      if (this.options.onWordClick) {
+        this.options.onWordClick(matchData);
+      }
+    }
+
+    // Always trigger callback (unless it's a dropdown toggle to close)
+    if (this.options.onWordClick && !(behavior === 'dropdown' && this.dropdownManager.activeDropdownMatch === matchEl)) {
+      this.options.onWordClick(matchData);
+    }
+  }
+
+  /**
+   * Hide dropdown (exposed for external use, e.g., when textarea loses focus)
+   */
+  hideDropdown() {
+    this.dropdownManager.hideDropdown();
+  }
+
+  /**
+   * Extract match data from element
+   * @param {HTMLElement} matchEl - Match element
+   * @returns {Object} Match data
+   */
+  getMatchData(matchEl) {
+    // Parse intent JSON if available
+    let intent = null;
+    const intentStr = matchEl.getAttribute('data-intent');
+    if (intentStr) {
+      try {
+        intent = JSON.parse(intentStr);
+      } catch (e) {
+        console.warn('[InteractionHandler] Failed to parse intent JSON:', e);
+      }
+    }
+
+    return {
+      text: matchEl.getAttribute('data-match-text'),
+      line: parseInt(matchEl.getAttribute('data-line')),
+      col: parseInt(matchEl.getAttribute('data-col')),
+      commandType: matchEl.getAttribute('data-command-type'),
+      commandPath: matchEl.getAttribute('data-command-path'),
+      intentPath: matchEl.getAttribute('data-intent-path'),
+      intent: intent,
+      command: {
+        id: matchEl.getAttribute('data-command-id'),
+        type: matchEl.getAttribute('data-command-type'),
+        behavior: matchEl.getAttribute('data-behavior')
+      },
+      element: matchEl
+    };
+  }
+
+  /**
+   * Cleanup event listeners
+   */
+  cleanup() {
+    this.bubbleManager.cleanup();
+    this.dropdownManager.cleanup();
+
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+
+  /**
+   * Destroy handler
+   */
+  destroy() {
+    this.cleanup();
+    this.bubbleManager.destroy();
+    this.dropdownManager.destroy();
+    console.log('[InteractionHandler] Destroyed');
+  }
+}

package/src/OverlayRenderer.js

@@ -0,0 +1,241 @@
+// OverlayRenderer - Renders text with styled matches in a line-based overlay
+// Much simpler than grid approach - each line is a div, matches are spans
+
+export default class OverlayRenderer {
+  /**
+   * Create a renderer
+   * @param {HTMLElement} overlay - Overlay container element
+   * @param {Object} options - Rendering options
+   */
+  constructor(overlay, options = {}) {
+    this.overlay = overlay;
+    this.options = {
+      theme: options.theme || 'light',
+      commandHandlers: options.commandHandlers || null,
+      ...options
+    };
+
+    console.log('[OverlayRenderer] Initialized');
+  }
+
+  /**
+   * Render text with matches
+   * @param {string} text - Text content
+   * @param {Array} matches - Array of match objects from CommandScanner
+   */
+  render(text, matches = []) {
+    // Split text into lines
+    const lines = text.split('\n');
+
+    // Build HTML for each line
+    const linesHTML = lines.map((line, lineIndex) => {
+      return this.renderLine(line, lineIndex, matches);
+    }).join('');
+
+    // Update overlay
+    this.overlay.innerHTML = linesHTML;
+
+    console.log('[OverlayRenderer] Rendered', lines.length, 'lines with', matches.length, 'matches');
+  }
+
+  /**
+   * Render a single line with matches
+   * @param {string} line - Line text
+   * @param {number} lineIndex - Line number (0-indexed)
+   * @param {Array} matches - All matches from scanner
+   * @returns {string} HTML for line
+   */
+  renderLine(line, lineIndex, matches) {
+    // Find matches on this line
+    const lineMatches = this.getMatchesForLine(line, lineIndex, matches);
+
+    if (lineMatches.length === 0) {
+      // No matches - render plain line
+      return `<div class="tq-line">${this.escapeHtml(line) || '&nbsp;'}</div>`;
+    }
+
+    // Sort matches by start position
+    lineMatches.sort((a, b) => a.start - b.start);
+
+    // Build HTML with matches as spans
+    let html = '<div class="tq-line">';
+    let lastIndex = 0;
+
+    for (const match of lineMatches) {
+      // Add text before match
+      if (match.start > lastIndex) {
+        html += this.escapeHtml(line.substring(lastIndex, match.start));
+      }
+
+      // Add match as styled span
+      const matchText = line.substring(match.start, match.end);
+      const classes = this.getMatchClasses(match);
+      const dataAttrs = this.getMatchDataAttributes(match);
+      const inlineStyles = this.getMatchInlineStyles(match);
+
+      html += `<span class="${classes}" ${dataAttrs} style="${inlineStyles}">${this.escapeHtml(matchText)}</span>`;
+
+      lastIndex = match.end;
+    }
+
+    // Add remaining text after last match
+    if (lastIndex < line.length) {
+      html += this.escapeHtml(line.substring(lastIndex));
+    }
+
+    // Handle empty lines
+    if (line.length === 0) {
+      html += '&nbsp;';
+    }
+
+    html += '</div>';
+
+    return html;
+  }
+
+  /**
+   * Get matches that apply to a specific line
+   * @param {string} line - Line text
+   * @param {number} lineIndex - Line number
+   * @param {Array} matches - All matches
+   * @returns {Array} Matches for this line with adjusted positions
+   */
+  getMatchesForLine(line, lineIndex, matches) {
+    const lineMatches = [];
+
+    // Calculate absolute position of this line in the full text
+    // (we'll need to know line starts to filter matches)
+    // For now, matches already have line info from scanner
+
+    for (const match of matches) {
+      if (match.line === lineIndex) {
+        lineMatches.push({
+          ...match,
+          start: match.col, // Column position on this line
+          end: match.col + match.length
+        });
+      }
+    }
+
+    return lineMatches;
+  }
+
+  /**
+   * Get CSS classes for a match
+   * @param {Object} match - Match object
+   * @returns {string} Space-separated class names
+   */
+  getMatchClasses(match) {
+    const classes = ['tq-match'];
+
+    // Add command type as class
+    if (match.command && match.command.type) {
+      classes.push(`tq-match-${match.command.type}`);
+    }
+
+    // Add behavior as class (bubble, dropdown, etc.)
+    if (match.command && match.command.behavior) {
+      classes.push(`tq-behavior-${match.command.behavior}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Get data attributes for a match
+   * @param {Object} match - Match object
+   * @returns {string} Data attributes string
+   */
+  getMatchDataAttributes(match) {
+    const attrs = [];
+
+    // Store match text
+    attrs.push(`data-match-text="${this.escapeAttr(match.text)}"`);
+
+    // Store command info
+    if (match.command) {
+      attrs.push(`data-command-id="${this.escapeAttr(match.command.id || '')}"`);
+      attrs.push(`data-command-type="${this.escapeAttr(match.command.commandType || '')}"`);
+      attrs.push(`data-command-path="${this.escapeAttr(match.command.commandPath || '')}"`);
+      attrs.push(`data-intent-path="${this.escapeAttr(match.command.intentPath || '')}"`);
+
+      // Store intent info as JSON for InteractionHandler
+      if (match.command.intent) {
+        attrs.push(`data-intent='${this.escapeAttr(JSON.stringify(match.command.intent))}'`);
+      }
+
+      // Determine behavior based on handler properties
+      if (match.command.intent && match.command.intent.handler) {
+        const handler = match.command.intent.handler;
+        if (handler.options && Array.isArray(handler.options) && handler.options.length > 0) {
+          attrs.push(`data-behavior="dropdown"`);
+        } else if (handler.message || handler['message-content'] || match.command.intent.description) {
+          attrs.push(`data-behavior="bubble"`);
+        }
+      }
+    }
+
+    // Store position info
+    attrs.push(`data-line="${match.line}"`);
+    attrs.push(`data-col="${match.col}"`);
+
+    return attrs.join(' ');
+  }
+
+  /**
+   * Get inline styles for a match based on command type or message-state
+   * @param {Object} match - Match object
+   * @returns {string} Inline style string
+   */
+  getMatchInlineStyles(match) {
+    if (!this.options.commandHandlers || !match.command) {
+      return 'pointer-events: auto; cursor: pointer;';
+    }
+
+    const commandType = match.command.commandType;
+
+    // Create matchData with intent info for message-state lookup
+    const matchData = {
+      intent: match.command.intent,
+      commandType: commandType
+    };
+
+    const styles = this.options.commandHandlers.getStyles(commandType, matchData);
+
+    // Convert style object to CSS string
+    const styleStr = Object.entries(styles)
+      .map(([key, value]) => {
+        // Convert camelCase to kebab-case
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        return `${cssKey}: ${value}`;
+      })
+      .join('; ');
+
+    return styleStr + '; pointer-events: auto;';
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Escape attribute value
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeAttr(text) {
+    return String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+}