@chatbridge/vscode 0.7.0

package/dist/webview/main.js

@@ -0,0 +1,167 @@
+"use strict";
+(() => {
+  // src/webview/main.ts
+  var vscode = acquireVsCodeApi();
+  var history = document.getElementById("history");
+  var status = document.getElementById("status");
+  var attachments = document.getElementById("attachments");
+  var form = document.getElementById("composer");
+  var input = document.getElementById("input");
+  var sendButton = document.getElementById("send");
+  var welcome = document.getElementById("welcome");
+  var welcomeText = document.getElementById("welcome-text");
+  var banner = document.getElementById("banner");
+  var footer = document.getElementById("footer");
+  var config = {};
+  function applyConfig(c) {
+    config = c;
+    if (c.sendButton?.background) {
+      sendButton.style.setProperty("--cb-send-bg", c.sendButton.background);
+    }
+    if (c.sendButton?.foreground) {
+      sendButton.style.setProperty("--cb-send-fg", c.sendButton.foreground);
+    }
+    if (c.userMessage?.borderColor) {
+      document.documentElement.style.setProperty(
+        "--cb-user-border",
+        c.userMessage.borderColor
+      );
+    }
+    welcomeText.textContent = c.welcome ?? "";
+    if (c.bannerUri) {
+      banner.src = c.bannerUri;
+      banner.hidden = false;
+    } else {
+      banner.hidden = true;
+    }
+    footer.textContent = c.footer ?? "";
+    footer.hidden = !c.footer;
+  }
+  function el(tag, className, text) {
+    const e = document.createElement(tag);
+    e.className = className;
+    if (text !== void 0) e.textContent = text;
+    return e;
+  }
+  function button(label, onClick) {
+    const b = el("button", "action", label);
+    b.setAttribute("type", "button");
+    b.addEventListener("click", onClick);
+    return b;
+  }
+  function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  function renderMessage(m) {
+    const box = el("div", `message ${m.role}`);
+    if (m.role === "separator") {
+      box.textContent = `\u2014 ${m.text} \u2014`;
+      return box;
+    }
+    box.appendChild(el("div", "text", m.text));
+    for (const a of m.attachments ?? []) {
+      box.appendChild(
+        el("div", "attachment", `\u{1F4CE} ${a.path} (${formatSize(a.bytes)})`)
+      );
+    }
+    return box;
+  }
+  function renderStatus(s) {
+    status.replaceChildren();
+    status.hidden = false;
+    if (s.status === "busy" || s.status === "opening") {
+      status.appendChild(el("span", "spinner"));
+      status.appendChild(
+        el(
+          "span",
+          "progress-text",
+          s.status === "opening" ? "Opening browser..." : "Waiting..."
+        )
+      );
+      return;
+    }
+    if (s.status === "dead") {
+      const auth = s.lastError === "AUTH_REQUIRED" || s.lastError === "AUTH_EXPIRED";
+      status.appendChild(
+        el(
+          "span",
+          "progress-text",
+          auth ? "Not logged in." : "The chat stopped."
+        )
+      );
+      if (auth) {
+        status.appendChild(
+          button(
+            "Log in",
+            () => vscode.postMessage({ type: "command", name: "login" })
+          )
+        );
+      }
+      status.appendChild(
+        button(
+          "New chat",
+          () => vscode.postMessage({ type: "command", name: "newChat" })
+        )
+      );
+      return;
+    }
+    status.hidden = true;
+  }
+  function renderAttachments(s) {
+    attachments.replaceChildren();
+    s.pendingAttachments.forEach((a, index) => {
+      const chip = el("span", "chip", `\u{1F4CE} ${a.path} (${formatSize(a.bytes)})`);
+      const x = button(
+        "\xD7",
+        () => vscode.postMessage({ type: "removeAttachment", index })
+      );
+      x.className = "chip-remove";
+      chip.appendChild(x);
+      attachments.appendChild(chip);
+    });
+  }
+  function render(s) {
+    history.replaceChildren(...s.messages.map(renderMessage));
+    history.scrollTop = history.scrollHeight;
+    renderStatus(s);
+    renderAttachments(s);
+    welcome.hidden = s.messages.length > 0 || !config.welcome && !config.bannerUri;
+    history.hidden = !welcome.hidden;
+    const locked = s.status === "busy" || s.status === "opening";
+    input.disabled = locked;
+    sendButton.disabled = locked;
+    if (!locked) input.focus();
+  }
+  function submit() {
+    const text = input.value;
+    if (text.trim() === "" && attachments.childElementCount === 0) return;
+    vscode.postMessage({ type: "send", text });
+    input.value = "";
+  }
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submit();
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  });
+  window.addEventListener("message", (event) => {
+    const m = event.data;
+    if (m.type === "state") {
+      const { type: _type, ...state } = m;
+      render(state);
+    } else if (m.type === "config") {
+      const { type: _type, ...rest } = m;
+      applyConfig(rest);
+    } else if (m.type === "progress") {
+      const t = status.querySelector(".progress-text");
+      if (t) t.textContent = m.text;
+    }
+  });
+  vscode.postMessage({ type: "ready" });
+})();

package/dist/webview/style.css

@@ -0,0 +1,139 @@
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-foreground);
+  background: var(--vscode-sideBar-background);
+}
+#history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.message {
+  margin-bottom: 10px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.message.user {
+  background: var(--vscode-input-background);
+  border: 1px solid var(--cb-user-border, var(--vscode-focusBorder));
+}
+.message.assistant {
+  background: var(--vscode-editor-background);
+}
+.message.error {
+  color: var(--vscode-errorForeground);
+  border-left: 3px solid var(--vscode-errorForeground);
+}
+.message.separator {
+  text-align: center;
+  opacity: 0.6;
+}
+.attachment {
+  opacity: 0.7;
+  font-size: 90%;
+  margin-top: 4px;
+}
+#status {
+  padding: 4px 8px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  opacity: 0.85;
+}
+.spinner {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--vscode-progressBar-background);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+#attachments {
+  padding: 0 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.chip {
+  background: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 90%;
+}
+.chip-remove,
+.action {
+  margin-left: 6px;
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  border: none;
+  border-radius: 3px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+#composer {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  border-top: 1px solid var(--vscode-panel-border);
+}
+#input {
+  flex: 1;
+  resize: none;
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-border, transparent);
+  font-family: inherit;
+}
+#welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 12px;
+  text-align: center;
+  opacity: 0.7;
+}
+/* `display: flex` above would otherwise beat the `hidden` attribute. */
+#welcome[hidden] {
+  display: none;
+}
+#banner {
+  max-width: 100%;
+  height: auto;
+}
+#welcome-text {
+  margin: 8px 0 0;
+  white-space: pre-line;
+}
+#footer {
+  padding: 0 8px 8px;
+  text-align: center;
+  font-size: 90%;
+  opacity: 0.7;
+}
+#send {
+  background: var(--cb-send-bg, var(--vscode-button-background));
+  color: var(--cb-send-fg, var(--vscode-button-foreground));
+  border: none;
+  border-radius: 3px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+#send:disabled,
+#input:disabled {
+  opacity: 0.5;
+}

package/dist/webview-html.d.ts

@@ -0,0 +1,9 @@
+export interface HtmlInputs {
+    cspSource: string;
+    nonce: string;
+    scriptUri: string;
+    styleUri: string;
+    title: string;
+}
+/** The whole document; no inline script or style, no external origin. */
+export declare function buildHtml(i: HtmlInputs): string;

package/dist/webview-html.js

@@ -0,0 +1,32 @@
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+/** The whole document; no inline script or style, no external origin. */
+export function buildHtml(i) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${i.cspSource}; script-src 'nonce-${i.nonce}'; style-src ${i.cspSource};">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="${i.styleUri}">
+<title>${escapeHtml(i.title)}</title>
+</head>
+<body>
+<div id="welcome" hidden><img id="banner" alt="" hidden><p id="welcome-text"></p></div>
+<main id="history" aria-live="polite"></main>
+<div id="status" hidden></div>
+<div id="attachments"></div>
+<form id="composer">
+<textarea id="input" rows="3" placeholder="Message (Enter to send, Shift+Enter for a newline)"></textarea>
+<button id="send" type="submit">Send</button>
+</form>
+<footer id="footer" hidden></footer>
+<script nonce="${i.nonce}" src="${i.scriptUri}"></script>
+</body>
+</html>`;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@chatbridge/vscode",
+  "version": "0.7.0",
+  "description": "VSCode extension factory for chatbridge: a sidebar chat view on top of ChatSession",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/7milch/chatbridge-cli.git",
+    "directory": "packages/vscode"
+  },
+  "keywords": ["chatbridge", "vscode", "playwright", "chat"],
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check:webview": "tsc -p tsconfig.webview.json",
+    "build:webview": "bun run check:webview && esbuild src/webview/main.ts --bundle --format=iife --target=es2022 --outfile=dist/webview/main.js && mkdir -p dist/webview && cp src/webview/style.css dist/webview/style.css"
+  },
+  "dependencies": {
+    "@chatbridge/core": "0.7.0"
+  },
+  "devDependencies": {
+    "@types/vscode": "1.138.0",
+    "esbuild": "0.25.12"
+  }
+}