@schlessera/brain-ui-react 0.4.0

package/src/lib/share.ts

@@ -0,0 +1,167 @@
+import { API_BASE } from "./backend.js";
+import type { RenderRequest } from "@schlessera/brain-ui-sdk/protocol";
+
+export type ShareKind = "file" | "text" | "richtext";
+
+/**
+ * True when the browser supports navigator.share at all. Note this doesn't
+ * guarantee that a specific payload is shareable — call canShareFiles too.
+ */
+export function isShareSupported(): boolean {
+  return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+
+function canShareFiles(files: File[]): boolean {
+  if (typeof navigator === "undefined" || typeof navigator.canShare !== "function") return false;
+  try {
+    return navigator.canShare({ files });
+  } catch {
+    return false;
+  }
+}
+
+function triggerDownload(file: File): void {
+  const url = URL.createObjectURL(file);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = file.name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 5_000);
+}
+
+/**
+ * Share a File via the OS share sheet. Falls back to a browser download
+ * when the platform can't share files (desktop Chrome / Firefox).
+ *
+ * Returns true if the share dialog (or fallback) was triggered, false if
+ * the user dismissed it.
+ */
+export async function shareFile(
+  file: File,
+  opts: { title?: string; text?: string } = {}
+): Promise<boolean> {
+  if (isShareSupported() && canShareFiles([file])) {
+    try {
+      await navigator.share({ files: [file], title: opts.title, text: opts.text });
+      return true;
+    } catch (err) {
+      // AbortError = user cancelled; anything else falls through to download
+      if (err instanceof DOMException && err.name === "AbortError") return false;
+      console.warn("[share] navigator.share failed, falling back to download:", err);
+    }
+  }
+  triggerDownload(file);
+  return true;
+}
+
+/**
+ * Share plain text / a URL via the OS share sheet. Falls back to clipboard
+ * copy when unavailable.
+ */
+export async function shareText(
+  data: { text: string; title?: string; url?: string }
+): Promise<boolean> {
+  if (isShareSupported()) {
+    try {
+      await navigator.share({ title: data.title, text: data.text, url: data.url });
+      return true;
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return false;
+      console.warn("[share] navigator.share text failed, falling back to clipboard:", err);
+    }
+  }
+  try {
+    await navigator.clipboard.writeText(data.url ? `${data.text}\n${data.url}` : data.text);
+    return true;
+  } catch (err) {
+    console.warn("[share] clipboard.writeText failed:", err);
+    return false;
+  }
+}
+
+/**
+ * Copy rich text (HTML + plain) to the clipboard. Best-effort: on browsers
+ * that don't support ClipboardItem, falls back to plain text only.
+ */
+export async function copyRichText(html: string, plain: string): Promise<boolean> {
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      const item = new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([plain], { type: "text/plain" }),
+      });
+      await navigator.clipboard.write([item]);
+      return true;
+    }
+    await navigator.clipboard.writeText(plain);
+    return true;
+  } catch (err) {
+    console.warn("[share] copyRichText failed:", err);
+    return false;
+  }
+}
+
+/**
+ * Fetch a URL into a File. Used to wrap the existing
+ * /api/files/content?raw=1 endpoint for share-the-bytes flows.
+ */
+export async function fetchAsFile(
+  url: string,
+  filename: string,
+  mime?: string
+): Promise<File> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`fetch failed: ${res.status} ${res.statusText}`);
+  const blob = await res.blob();
+  return new File([blob], filename, { type: mime ?? blob.type ?? "application/octet-stream" });
+}
+
+/**
+ * POST to /api/render and return the resulting File. Throws on non-2xx.
+ */
+export async function renderToFile(
+  req: RenderRequest,
+  filename: string
+): Promise<File> {
+  const res = await fetch(`${API_BASE}/render`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(req),
+  });
+  if (!res.ok) {
+    let detail = res.statusText;
+    try {
+      const j = await res.json();
+      detail = (j as { error?: string; detail?: string }).detail ?? (j as { error?: string }).error ?? detail;
+    } catch {
+      // ignore
+    }
+    throw new Error(`Render failed (${res.status}): ${detail}`);
+  }
+  const blob = await res.blob();
+  const ext = req.format === "png" ? "png" : "pdf";
+  const safeBase = filename.replace(/\.(png|pdf|md|html?|txt)$/i, "");
+  return new File([blob], `${safeBase}.${ext}`, {
+    type: req.format === "png" ? "image/png" : "application/pdf",
+  });
+}
+
+/**
+ * One-call helper: render content to PNG/PDF and dispatch the share sheet.
+ */
+export async function renderAndShare(opts: {
+  content: string;
+  contentType: RenderRequest["contentType"];
+  format: RenderRequest["format"];
+  filename: string;
+  title?: string;
+  text?: string;
+}): Promise<boolean> {
+  const file = await renderToFile(
+    { content: opts.content, contentType: opts.contentType, format: opts.format, title: opts.title },
+    opts.filename
+  );
+  return shareFile(file, { title: opts.title, text: opts.text });
+}

package/src/lib/strip-markdown.ts

@@ -0,0 +1,38 @@
+/**
+ * Best-effort markdown → plain text for sharing. Keeps list structure
+ * (lines starting with "- ") and headings (as bare lines), drops syntax.
+ *
+ * Not a full markdown parser; intended for short snippets pasted into
+ * messengers. For correctness we'd want to render to HTML and grab
+ * textContent, but that requires a DOM round-trip.
+ */
+export function stripMarkdown(md: string): string {
+  let s = md;
+
+  // Code fences — keep contents, drop the ``` and language hint
+  s = s.replace(/```[a-zA-Z0-9_+-]*\n([\s\S]*?)```/g, (_m, body) => body);
+  // Inline code
+  s = s.replace(/`([^`\n]+)`/g, "$1");
+  // Images: ![alt](url) → alt (or just drop if no alt)
+  s = s.replace(/!\[([^\]]*)\]\([^)]*\)/g, (_m, alt) => alt || "");
+  // Links: [text](url) → text (url)
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m, text, url) => {
+    return text === url ? text : `${text} (${url})`;
+  });
+  // Bold / italic / strike — drop markers, keep text
+  s = s.replace(/(\*\*|__)(.+?)\1/g, "$2");
+  s = s.replace(/(\*|_)(.+?)\1/g, "$2");
+  s = s.replace(/~~(.+?)~~/g, "$1");
+  // Headings: # text → text
+  s = s.replace(/^#{1,6}\s+/gm, "");
+  // Blockquotes: leading "> "
+  s = s.replace(/^>\s?/gm, "");
+  // Horizontal rules
+  s = s.replace(/^---+$/gm, "");
+  // Wikilinks [[slug]] or [[slug|label]] → label or slug
+  s = s.replace(/\[\[([^\[\]\n|]+?)(?:\|([^\[\]\n]+?))?\]\]/g, (_m, target, label) => label?.trim() ?? target.trim());
+  // Collapse 3+ blank lines to 2
+  s = s.replace(/\n{3,}/g, "\n\n");
+
+  return s.trim();
+}

package/src/lib/tool-names.ts

@@ -0,0 +1,27 @@
+/**
+ * MCP-prefixed names of brain-ui's own in-process tools, as they appear in the
+ * tool-call stream. Kept in one place so the timeline, history reconstruction,
+ * and per-tool rendering all agree on the identifiers.
+ */
+export const ASK_USER_TOOL_NAME = "mcp__brain-ui__ask_user";
+export const GET_LOCATION_TOOL_NAME = "mcp__brain-ui__get_current_location";
+
+const LEGACY_MCP_PREFIX = "mcp__brain_ui__";
+const MCP_PREFIX = "mcp__brain-ui__";
+
+/**
+ * Pre-rename transcripts used the `mcp__brain_ui__` server prefix; the server is
+ * now `mcp__brain-ui__`. Normalize the legacy prefix so old tool calls resolve
+ * to the same identifiers (special-card renderers, icons) as new ones instead of
+ * falling back to a raw JSON blob.
+ */
+export function normalizeToolName(name: string): string {
+  return name.startsWith(LEGACY_MCP_PREFIX)
+    ? MCP_PREFIX + name.slice(LEGACY_MCP_PREFIX.length)
+    : name;
+}
+
+export const isAskUserTool = (name: string | undefined): boolean =>
+  !!name && normalizeToolName(name) === ASK_USER_TOOL_NAME;
+export const isLocationTool = (name: string | undefined): boolean =>
+  !!name && normalizeToolName(name) === GET_LOCATION_TOOL_NAME;

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/ws-client.ts

@@ -0,0 +1,109 @@
+import type { ClientMessage, ServerMessage } from "@schlessera/brain-ui-sdk/protocol";
+
+type MessageHandler = (msg: ServerMessage) => void;
+type StatusHandler = (status: "connecting" | "connected" | "disconnected") => void;
+
+export class WSClient {
+  private ws: WebSocket | null = null;
+  private url: string;
+  private onMessage: MessageHandler;
+  private onStatusChange: StatusHandler;
+  private reconnectAttempt = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private closed = false;
+
+  constructor(
+    url: string,
+    onMessage: MessageHandler,
+    onStatusChange: StatusHandler
+  ) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onStatusChange = onStatusChange;
+  }
+
+  connect() {
+    this.closed = false;
+    this.onStatusChange("connecting");
+
+    try {
+      this.ws = new WebSocket(this.url);
+
+      this.ws.onopen = () => {
+        this.reconnectAttempt = 0;
+        this.onStatusChange("connected");
+      };
+
+      this.ws.onmessage = (evt) => {
+        try {
+          const msg = JSON.parse(evt.data) as ServerMessage;
+          this.onMessage(msg);
+        } catch {
+          console.error("[ws] Failed to parse message:", evt.data);
+        }
+      };
+
+      this.ws.onclose = () => {
+        this.onStatusChange("disconnected");
+        if (!this.closed) {
+          this.scheduleReconnect();
+        }
+      };
+
+      this.ws.onerror = () => {
+        // onclose will fire after onerror
+      };
+    } catch {
+      this.onStatusChange("disconnected");
+      if (!this.closed) {
+        this.scheduleReconnect();
+      }
+    }
+  }
+
+  send(msg: ClientMessage) {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(msg));
+    }
+  }
+
+  close() {
+    this.closed = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.ws?.close();
+    this.ws = null;
+  }
+
+  get isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+
+  /**
+   * Skip the remaining backoff and reconnect immediately (e.g. when the
+   * browser fires an `online` event). No-op if open/connecting or closed
+   * deliberately.
+   */
+  reconnectNow() {
+    if (this.closed) return;
+    const state = this.ws?.readyState;
+    if (state === WebSocket.OPEN || state === WebSocket.CONNECTING) return;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.reconnectAttempt = 0;
+    this.connect();
+  }
+
+  private scheduleReconnect() {
+    const delay = Math.min(1000 * 2 ** this.reconnectAttempt, 30000);
+    this.reconnectAttempt++;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, delay);
+  }
+}