bloby-bot 0.22.2 → 0.22.6

package/workspace/skills/chrome-extension/content-script.js

@@ -1,309 +0,0 @@
-/**
- * Bloby Chrome Extension — Content Script
- *
- * Injected into every page. Responsibilities:
- * - Renders the Bloby bubble (bottom-right corner)
- * - Opens/closes the chat panel (iframe to extension's panel.html)
- * - Extracts page context (URL, title, selection, structured data)
- * - Handles ExtensionAction commands from the agent (screenshot, fill form, type)
- * - Bridges messages between the panel iframe and the background worker
- */
-
-(function () {
-  // Guard: don't inject on extension pages or Bloby's own domain
-  if (document.getElementById('bloby-ext-bubble')) return;
-  if (location.hostname.endsWith('bloby.bot')) return;
-
-  let panelOpen = false;
-  let paired = false;
-
-  // ── Check if paired ────────────────────────────────────────────────────────
-
-  chrome.runtime.sendMessage({ type: 'bloby:get-state' }, (state) => {
-    if (chrome.runtime.lastError) return;
-    if (state?.paired) {
-      paired = true;
-      createBubble();
-    }
-  });
-
-  // Listen for pairing from background worker
-  chrome.runtime.onMessage.addListener((msg) => {
-    if (msg.type === 'bloby:paired') {
-      console.log('[bloby-ext] Paired! Showing bubble.');
-      paired = true;
-      if (!document.getElementById('bloby-ext-bubble')) createBubble();
-    }
-    if (msg.type === 'bloby:unpaired') {
-      paired = false;
-      removeBubble();
-    }
-  });
-
-  // Listen for pairing changes via storage
-  chrome.storage.onChanged.addListener((changes) => {
-    if (changes.serverUrl) {
-      if (changes.serverUrl.newValue) {
-        paired = true;
-        if (!document.getElementById('bloby-ext-bubble')) createBubble();
-      } else {
-        paired = false;
-        removeBubble();
-      }
-    }
-  });
-
-  // ── Bubble ─────────────────────────────────────────────────────────────────
-
-  function createBubble() {
-    const bubble = document.createElement('div');
-    bubble.id = 'bloby-ext-bubble';
-    bubble.title = 'Chat with Bloby';
-    bubble.addEventListener('click', togglePanel);
-    document.body.appendChild(bubble);
-
-    const dot = document.createElement('div');
-    dot.className = 'bloby-ext-bubble-dot';
-    bubble.appendChild(dot);
-  }
-
-  function removeBubble() {
-    document.getElementById('bloby-ext-bubble')?.remove();
-    document.getElementById('bloby-ext-panel')?.remove();
-    document.getElementById('bloby-ext-backdrop')?.remove();
-    panelOpen = false;
-  }
-
-  // ── Panel ──────────────────────────────────────────────────────────────────
-
-  function togglePanel() {
-    panelOpen ? closePanel() : openPanel();
-  }
-
-  function openPanel() {
-    if (document.getElementById('bloby-ext-panel')) {
-      document.getElementById('bloby-ext-panel').classList.add('bloby-ext-panel-open');
-      panelOpen = true;
-      showBackdrop();
-      return;
-    }
-
-    showBackdrop();
-
-    const panel = document.createElement('div');
-    panel.id = 'bloby-ext-panel';
-
-    const iframe = document.createElement('iframe');
-    iframe.id = 'bloby-ext-iframe';
-    iframe.src = chrome.runtime.getURL('panel/panel.html');
-    iframe.allow = 'microphone';
-    panel.appendChild(iframe);
-
-    document.body.appendChild(panel);
-
-    requestAnimationFrame(() => {
-      panel.classList.add('bloby-ext-panel-open');
-      panelOpen = true;
-    });
-
-    window.addEventListener('message', handlePanelMessage);
-  }
-
-  function closePanel() {
-    const panel = document.getElementById('bloby-ext-panel');
-    if (panel) {
-      panel.classList.remove('bloby-ext-panel-open');
-      panelOpen = false;
-      hideBackdrop();
-    }
-  }
-
-  function showBackdrop() {
-    let backdrop = document.getElementById('bloby-ext-backdrop');
-    if (!backdrop) {
-      backdrop = document.createElement('div');
-      backdrop.id = 'bloby-ext-backdrop';
-      backdrop.addEventListener('click', closePanel);
-      document.body.appendChild(backdrop);
-    }
-    requestAnimationFrame(() => backdrop.classList.add('bloby-ext-backdrop-visible'));
-  }
-
-  function hideBackdrop() {
-    const backdrop = document.getElementById('bloby-ext-backdrop');
-    if (backdrop) backdrop.classList.remove('bloby-ext-backdrop-visible');
-  }
-
-  // ── Message Bridge (panel ↔ content script) ────────────────────────────────
-
-  function handlePanelMessage(event) {
-    const iframe = document.getElementById('bloby-ext-iframe');
-    if (!iframe || event.source !== iframe.contentWindow) return;
-
-    const msg = event.data;
-    if (!msg?.type) return;
-
-    if (msg.type === 'bloby:close') {
-      closePanel();
-      return;
-    }
-
-    // Panel requests page context
-    if (msg.type === 'bloby:get-page-context') {
-      const context = getPageContext();
-      iframe.contentWindow.postMessage({ type: 'bloby:page-context', context }, '*');
-      return;
-    }
-
-    // Agent requests an action on the page
-    if (msg.type === 'bloby:extension-action') {
-      handleExtensionAction(msg.action, msg.data);
-      return;
-    }
-  }
-
-  // ── Page Context Extraction ────────────────────────────────────────────────
-
-  function getPageContext() {
-    const context = {
-      url: location.href,
-      title: document.title,
-      selection: window.getSelection()?.toString()?.slice(0, 2000) || '',
-    };
-
-    // Extract structured data (JSON-LD) — product info, articles, etc.
-    try {
-      const scripts = document.querySelectorAll('script[type="application/ld+json"]');
-      for (const script of scripts) {
-        const data = JSON.parse(script.textContent);
-        // Handle arrays (some sites wrap in array)
-        const items = Array.isArray(data) ? data : [data];
-        for (const item of items) {
-          if (item.name && !context.productName) context.productName = item.name;
-          if (item.offers?.price) context.price = item.offers.price;
-          if (item.offers?.priceCurrency) context.currency = item.offers.priceCurrency;
-          if (item.description && !context.description) context.description = item.description?.slice(0, 500);
-          if (item['@type'] === 'VideoObject' && item.name) context.videoTitle = item.name;
-        }
-      }
-    } catch { /* ignore */ }
-
-    // Meta description fallback
-    if (!context.description) {
-      const meta = document.querySelector('meta[name="description"]');
-      if (meta) context.description = meta.content?.slice(0, 500);
-    }
-
-    // Detect forms on the page
-    const forms = document.querySelectorAll('form');
-    if (forms.length > 0) {
-      context.hasForms = true;
-      context.formCount = forms.length;
-      // Extract visible form field labels/names
-      const fields = [];
-      forms.forEach((form) => {
-        form.querySelectorAll('input, select, textarea').forEach((el) => {
-          const name = el.getAttribute('name') || el.getAttribute('id') || el.getAttribute('placeholder') || '';
-          const type = el.getAttribute('type') || el.tagName.toLowerCase();
-          if (name && type !== 'hidden' && type !== 'submit') {
-            fields.push({ name, type });
-          }
-        });
-      });
-      if (fields.length > 0) context.formFields = fields.slice(0, 20); // cap at 20
-    }
-
-    console.log('[bloby-ext] Page context:', context);
-    return context;
-  }
-
-  // ── Extension Actions (agent → page) ───────────────────────────────────────
-
-  function handleExtensionAction(action, data) {
-    console.log(`[bloby-ext] Action: ${action}`, data);
-    const iframe = document.getElementById('bloby-ext-iframe');
-
-    switch (action) {
-      case 'screenshot': {
-        // Request screenshot via background worker (needs chrome.tabs API)
-        chrome.runtime.sendMessage({ type: 'bloby:screenshot' }, (response) => {
-          if (response?.dataUrl && iframe?.contentWindow) {
-            iframe.contentWindow.postMessage({
-              type: 'bloby:action-result',
-              action: 'screenshot',
-              result: response.dataUrl,
-            }, '*');
-          }
-        });
-        break;
-      }
-
-      case 'read-page': {
-        // Extract main text content from the page
-        const text = document.body.innerText?.slice(0, 10000) || '';
-        if (iframe?.contentWindow) {
-          iframe.contentWindow.postMessage({
-            type: 'bloby:action-result',
-            action: 'read-page',
-            result: text,
-          }, '*');
-        }
-        break;
-      }
-
-      case 'fill-form': {
-        // Fill form fields from agent-provided data
-        if (data?.fields && typeof data.fields === 'object') {
-          for (const [selector, value] of Object.entries(data.fields)) {
-            const el = document.querySelector(selector) ||
-                       document.querySelector(`[name="${selector}"]`) ||
-                       document.querySelector(`[id="${selector}"]`);
-            if (el) {
-              el.value = value;
-              el.dispatchEvent(new Event('input', { bubbles: true }));
-              el.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-          }
-          if (iframe?.contentWindow) {
-            iframe.contentWindow.postMessage({
-              type: 'bloby:action-result',
-              action: 'fill-form',
-              result: 'done',
-            }, '*');
-          }
-        }
-        break;
-      }
-
-      case 'click': {
-        // Click an element by selector
-        if (data?.selector) {
-          const el = document.querySelector(data.selector);
-          if (el) el.click();
-        }
-        break;
-      }
-
-      case 'type': {
-        // Type into the currently focused input or a targeted selector
-        const target = data?.selector
-          ? document.querySelector(data.selector)
-          : document.activeElement;
-        if (target && data?.text) {
-          target.value = data.text;
-          target.dispatchEvent(new Event('input', { bubbles: true }));
-        }
-        break;
-      }
-
-      default:
-        console.warn(`[bloby-ext] Unknown action: ${action}`);
-    }
-  }
-
-  // ── Keyboard shortcut ──────────────────────────────────────────────────────
-
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && panelOpen) closePanel();
-  });
-})();

package/workspace/skills/chrome-extension/content-style.css

@@ -1,86 +0,0 @@
-/* Bloby Chrome Extension — Bubble & Panel Styles */
-
-#bloby-ext-bubble {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
-  cursor: pointer;
-  z-index: 2147483646;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-#bloby-ext-bubble:hover {
-  transform: scale(1.08);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
-}
-
-#bloby-ext-bubble:active {
-  transform: scale(0.95);
-}
-
-.bloby-ext-bubble-dot {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.9);
-}
-
-/* Panel */
-#bloby-ext-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 420px;
-  z-index: 2147483647;
-  transform: translateX(100%);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
-  border-left: 1px solid #3a3a3a;
-  background: #212121;
-}
-
-#bloby-ext-panel.bloby-ext-panel-open {
-  transform: translateX(0);
-}
-
-/* Mobile: full width */
-@media (max-width: 480px) {
-  #bloby-ext-panel {
-    width: 100vw;
-  }
-}
-
-#bloby-ext-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: #212121;
-}
-
-/* Backdrop */
-#bloby-ext-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 2147483645;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.25s ease;
-}
-
-#bloby-ext-backdrop.bloby-ext-backdrop-visible {
-  opacity: 1;
-  pointer-events: auto;
-}

package/workspace/skills/chrome-extension/manifest.json

@@ -1,47 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "Bloby",
-  "version": "0.1.0",
-  "description": "Your AI agent, on every page. Chat with Bloby from anywhere.",
-  "permissions": [
-    "storage",
-    "activeTab",
-    "declarativeNetRequest"
-  ],
-  "host_permissions": [
-    "https://*.bloby.bot/*",
-    "https://*.my.bloby.bot/*",
-    "https://*.trycloudflare.com/*"
-  ],
-  "action": {
-    "default_popup": "popup/popup.html",
-    "default_icon": {
-      "16": "icons/icon-16.png",
-      "48": "icons/icon-48.png",
-      "128": "icons/icon-128.png"
-    }
-  },
-  "background": {
-    "service_worker": "background.js",
-    "type": "module"
-  },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
-      "css": ["content-style.css"],
-      "run_at": "document_idle"
-    }
-  ],
-  "web_accessible_resources": [
-    {
-      "resources": ["panel/panel.html", "panel/panel.js", "assets/*", "icons/*"],
-      "matches": ["<all_urls>"]
-    }
-  ],
-  "icons": {
-    "16": "icons/icon-16.png",
-    "48": "icons/icon-48.png",
-    "128": "icons/icon-128.png"
-  }
-}

package/workspace/skills/chrome-extension/panel/panel.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>Bloby</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { background: #212121; width: 100%; height: 100vh; overflow: hidden; }
-    iframe { width: 100%; height: 100%; border: none; }
-    .loading {
-      display: flex; align-items: center; justify-content: center;
-      height: 100vh; color: #a1a1aa; font-family: system-ui, sans-serif;
-      font-size: 14px; flex-direction: column; gap: 8px;
-    }
-    .loading .dots span {
-      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
-      background: #a1a1aa; margin: 0 3px; animation: bounce 1s infinite;
-    }
-    .loading .dots span:nth-child(2) { animation-delay: 0.15s; }
-    .loading .dots span:nth-child(3) { animation-delay: 0.3s; }
-    @keyframes bounce {
-      0%, 80%, 100% { transform: scale(0); }
-      40% { transform: scale(1); }
-    }
-    .debug { font-size: 11px; color: #52525b; max-width: 90%; word-break: break-all; }
-  </style>
-</head>
-<body>
-  <div class="loading" id="loading">
-    <div class="dots"><span></span><span></span><span></span></div>
-    <div class="debug" id="debug"></div>
-  </div>
-  <script src="panel.js"></script>
-</body>
-</html>

package/workspace/skills/chrome-extension/panel/panel.js

@@ -1,123 +0,0 @@
-/**
- * Panel page — loads the Bloby chat in an iframe and bridges page context.
- *
- * Architecture:
- *   Content script (host page) ↔ Panel (this page) ↔ Chat iframe (Bloby server)
- *
- * The panel:
- * 1. Loads the Bloby chat in an iframe
- * 2. Requests page context from the content script
- * 3. Injects context into outgoing chat messages
- * 4. Forwards ExtensionAction commands from chat to content script
- */
-
-const debug = document.getElementById('debug');
-function log(msg) {
-  console.log('[bloby-panel] ' + msg);
-  if (debug) debug.textContent = msg;
-}
-
-let chatIframe = null;
-let currentPageContext = null;
-
-(async () => {
-  try {
-    log('Reading config...');
-    const data = await chrome.storage.local.get(['serverUrl', 'authToken']);
-
-    if (!data.serverUrl) {
-      document.getElementById('loading').innerHTML =
-        '<span style="color:#ef4444">Not paired. Click the Bloby icon in the toolbar to set up.</span>';
-      return;
-    }
-
-    let chatUrl = data.serverUrl + '/bloby/';
-    if (data.authToken) {
-      chatUrl += '?token=' + data.authToken;
-    }
-
-    // Add a marker so the chat app knows it's inside the extension
-    chatUrl += (chatUrl.includes('?') ? '&' : '?') + 'ext=1';
-
-    log('Loading: ' + chatUrl);
-
-    chatIframe = document.createElement('iframe');
-    chatIframe.id = 'bloby-chat-iframe';
-    chatIframe.src = chatUrl;
-    chatIframe.allow = 'microphone';
-    chatIframe.style.cssText = 'width:100%;height:100%;border:none;';
-
-    chatIframe.onload = () => {
-      log('Chat loaded!');
-      document.getElementById('loading').style.display = 'none';
-      // Request initial page context from content script
-      requestPageContext();
-    };
-
-    document.body.appendChild(chatIframe);
-
-    setTimeout(() => {
-      if (document.getElementById('loading').style.display !== 'none') {
-        log('Timeout loading chat');
-      }
-    }, 15000);
-
-  } catch (err) {
-    log('Error: ' + err.message);
-  }
-})();
-
-// ── Page Context ───────────────────────────────────────────────────────────
-
-function requestPageContext() {
-  // Ask the content script (parent of this panel) for page context
-  window.parent.postMessage({ type: 'bloby:get-page-context' }, '*');
-}
-
-// ── Message Handling ───────────────────────────────────────────────────────
-
-window.addEventListener('message', (event) => {
-  const msg = event.data;
-  if (!msg?.type) return;
-
-  // Context response from content script
-  if (msg.type === 'bloby:page-context') {
-    currentPageContext = msg.context;
-    log('Page context received: ' + (msg.context?.url || 'none'));
-
-    // Forward to chat iframe so it can use it
-    if (chatIframe?.contentWindow) {
-      chatIframe.contentWindow.postMessage({
-        type: 'bloby:page-context',
-        context: msg.context,
-      }, '*');
-    }
-    return;
-  }
-
-  // Action result from content script → forward to chat
-  if (msg.type === 'bloby:action-result') {
-    if (chatIframe?.contentWindow) {
-      chatIframe.contentWindow.postMessage(msg, '*');
-    }
-    return;
-  }
-
-  // Close request from chat iframe → forward to content script
-  if (msg.type === 'bloby:close') {
-    window.parent.postMessage({ type: 'bloby:close' }, '*');
-    return;
-  }
-
-  // Extension action from chat iframe → forward to content script
-  if (msg.type === 'bloby:extension-action') {
-    window.parent.postMessage(msg, '*');
-    return;
-  }
-
-  // Chat requests fresh page context
-  if (msg.type === 'bloby:request-context') {
-    requestPageContext();
-    return;
-  }
-});