bloby-bot 0.21.13 → 0.22.1

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

@@ -0,0 +1,218 @@
+/**
+ * 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) for the agent
+ * - 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;
+
+  const BUBBLE_SIZE = 60;
+  const BUBBLE_MARGIN = 24;
+  const PANEL_WIDTH = 420;
+
+  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 changes
+  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);
+
+    // Inner dot (gradient)
+    const dot = document.createElement('div');
+    dot.className = 'bloby-ext-bubble-dot';
+    bubble.appendChild(dot);
+  }
+
+  function removeBubble() {
+    const bubble = document.getElementById('bloby-ext-bubble');
+    if (bubble) bubble.remove();
+    const panel = document.getElementById('bloby-ext-panel');
+    if (panel) panel.remove();
+    const backdrop = document.getElementById('bloby-ext-backdrop');
+    if (backdrop) backdrop.remove();
+  }
+
+  // ── Panel ──────────────────────────────────────────────────────────────────
+
+  function togglePanel() {
+    if (panelOpen) {
+      closePanel();
+    } else {
+      openPanel();
+    }
+  }
+
+  function openPanel() {
+    if (document.getElementById('bloby-ext-panel')) {
+      const panel = document.getElementById('bloby-ext-panel');
+      panel.classList.add('bloby-ext-panel-open');
+      panelOpen = true;
+      showBackdrop();
+      return;
+    }
+
+    // Create backdrop
+    showBackdrop();
+
+    // Create panel
+    const panel = document.createElement('div');
+    panel.id = 'bloby-ext-panel';
+
+    // Create iframe — loads the extension's own panel page
+    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);
+
+    // Trigger slide-in animation on next frame
+    requestAnimationFrame(() => {
+      panel.classList.add('bloby-ext-panel-open');
+      panelOpen = true;
+    });
+
+    // Listen for messages from the panel iframe
+    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');
+    }
+  }
+
+  // ── Panel ↔ Background Message Bridge ──────────────────────────────────────
+
+  function handlePanelMessage(event) {
+    if (event.source !== document.getElementById('bloby-ext-iframe')?.contentWindow) return;
+
+    const msg = event.data;
+    if (!msg?.type) return;
+
+    // Close panel request
+    if (msg.type === 'bloby:close') {
+      closePanel();
+      return;
+    }
+
+    // Forward chat messages to background worker → server
+    if (msg.type === 'bloby:send') {
+      chrome.runtime.sendMessage({ type: 'bloby:send', payload: msg.payload });
+      return;
+    }
+
+    // Panel requests page context
+    if (msg.type === 'bloby:get-page-context') {
+      const context = getPageContext();
+      const iframe = document.getElementById('bloby-ext-iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'bloby:page-context', context }, '*');
+      }
+      return;
+    }
+  }
+
+  // Forward server messages from background to panel iframe
+  chrome.runtime.onMessage.addListener((msg) => {
+    const iframe = document.getElementById('bloby-ext-iframe');
+    if (iframe?.contentWindow && panelOpen) {
+      iframe.contentWindow.postMessage(msg, '*');
+    }
+  });
+
+  // ── Page Context Extraction ────────────────────────────────────────────────
+
+  function getPageContext() {
+    const context = {
+      url: location.href,
+      title: document.title,
+      selection: window.getSelection()?.toString()?.slice(0, 2000) || '',
+    };
+
+    // Try to extract structured data (JSON-LD)
+    const jsonLd = document.querySelector('script[type="application/ld+json"]');
+    if (jsonLd) {
+      try {
+        const data = JSON.parse(jsonLd.textContent);
+        if (data.name) context.productName = data.name;
+        if (data.offers?.price) context.price = data.offers.price;
+        if (data.offers?.priceCurrency) context.currency = data.offers.priceCurrency;
+        if (data.description) context.description = data.description?.slice(0, 500);
+      } catch { /* ignore malformed JSON-LD */ }
+    }
+
+    // Meta description fallback
+    const metaDesc = document.querySelector('meta[name="description"]');
+    if (metaDesc && !context.description) {
+      context.description = metaDesc.content?.slice(0, 500);
+    }
+
+    return context;
+  }
+
+  // ── Keyboard shortcut ──────────────────────────────────────────────────────
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && panelOpen) {
+      closePanel();
+    }
+  });
+})();

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

@@ -0,0 +1,86 @@
+/* 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

@@ -0,0 +1,46 @@
+{
+  "manifest_version": 3,
+  "name": "Bloby",
+  "version": "0.1.0",
+  "description": "Your AI agent, on every page. Chat with Bloby from anywhere.",
+  "permissions": [
+    "storage",
+    "activeTab"
+  ],
+  "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", "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

@@ -0,0 +1,74 @@
+<!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;
+    }
+    .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); }
+    }
+  </style>
+</head>
+<body>
+  <div class="loading" id="loading">
+    <div class="dots"><span></span><span></span><span></span></div>
+  </div>
+
+  <script>
+    /**
+     * Panel page — loads the user's Bloby chat in an iframe.
+     * Reads serverUrl from chrome.storage.local.
+     */
+    (async () => {
+      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;
+      }
+
+      // Build the chat URL — same as the dashboard chat iframe
+      let chatUrl = `${data.serverUrl}/bloby/`;
+      if (data.authToken) {
+        chatUrl += `?token=${data.authToken}`;
+      }
+
+      // Create iframe to the user's Bloby server
+      const iframe = document.createElement('iframe');
+      iframe.src = chatUrl;
+      iframe.allow = 'microphone';
+      iframe.style.cssText = 'width:100%;height:100%;border:none;';
+
+      iframe.onload = () => {
+        document.getElementById('loading').style.display = 'none';
+      };
+
+      document.body.appendChild(iframe);
+
+      // Forward close events from chat iframe to content script (parent of this panel)
+      window.addEventListener('message', (e) => {
+        if (e.data?.type === 'bloby:close') {
+          window.parent.postMessage({ type: 'bloby:close' }, '*');
+        }
+      });
+    })();
+  </script>
+</body>
+</html>

package/workspace/skills/chrome-extension/popup/popup.css

@@ -0,0 +1,124 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 320px;
+  min-height: 280px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0a0a0b;
+  color: #e4e4e7;
+  padding: 32px 24px;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.logo-dot {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+}
+
+.logo-dot.connected {
+  box-shadow: 0 0 20px rgba(4, 209, 254, 0.4);
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #71717a;
+  margin-bottom: 24px;
+}
+
+/* Code Input */
+.code-input {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.code-input input {
+  width: 40px;
+  height: 48px;
+  border: 2px solid #27272a;
+  border-radius: 10px;
+  background: #18181b;
+  color: #e4e4e7;
+  font-size: 22px;
+  font-weight: 600;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.15s;
+  caret-color: transparent;
+}
+
+.code-input input:focus {
+  border-color: #AF27E3;
+}
+
+.code-input input.filled {
+  border-color: #04D1FE;
+}
+
+.error {
+  color: #ef4444;
+  font-size: 13px;
+  min-height: 18px;
+  margin-bottom: 8px;
+}
+
+.pairing {
+  color: #a1a1aa;
+  font-size: 13px;
+}
+
+/* Connected Screen */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #18181b;
+  border: 1px solid #27272a;
+  border-radius: 999px;
+  padding: 6px 14px;
+  font-size: 13px;
+  color: #a1a1aa;
+  margin-bottom: 20px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.btn-disconnect {
+  background: none;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  color: #71717a;
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-disconnect:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}

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

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bloby</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <!-- Pairing Screen -->
+  <div id="pair-screen">
+    <div class="logo">
+      <div class="logo-dot"></div>
+    </div>
+    <h1>Connect to Bloby</h1>
+    <p class="subtitle">Ask your Bloby for a pairing code</p>
+
+    <div class="code-input" id="code-input">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autofocus>
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+    </div>
+
+    <div id="error" class="error"></div>
+    <div id="pairing" class="pairing" style="display:none">Connecting...</div>
+  </div>
+
+  <!-- Connected Screen -->
+  <div id="connected-screen" style="display:none">
+    <div class="logo">
+      <div class="logo-dot connected"></div>
+    </div>
+    <h1 id="connected-name">Connected</h1>
+    <p class="subtitle" id="connected-url"></p>
+    <div class="status-badge">
+      <span class="status-dot"></span>
+      <span id="status-text">Connected</span>
+    </div>
+    <button id="disconnect-btn" class="btn-disconnect">Disconnect</button>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>