@dbx-tools/ui-mastra 0.3.28 → 0.3.29

package/README.md

@@ -204,6 +204,25 @@ resolved during export: charts are rendered to inline SVG with ECharts' server
 renderer, and data markers become real tables. Expired or missing embeds are
 skipped so old transcripts still export cleanly.
 
+## Copying And Downloading
+
+Copy and download affordances appear in several places - message bubbles, code
+blocks, conversation export, and the data-grid CSV button - and they behave the
+same everywhere because each is backed by one internal module rather than
+per-component code.
+
+Copying works on hosts served over plain HTTP. An insecure context has no
+Clipboard API, so a bare `navigator.clipboard.writeText` silently does nothing on
+a local or intranet deployment; the shared helper falls back to a hidden
+`<textarea>` plus `document.execCommand("copy")` and reports whether the copy
+actually succeeded. Downloads revoke their object URL after the temporary anchor
+fires, so a long session does not accumulate blobs.
+
+If you build a controlled surface with `ChatView`, you get both without wiring
+anything. Adding a new copy or download button anywhere in this package should
+reuse `src/support/clipboard.ts` and `src/support/download.ts` instead of
+touching `navigator.clipboard` or `URL.createObjectURL` again.
+
 ## Modules
 
 - `MastraChat` - self-contained drop-in chat component.

package/index.ts

@@ -16,6 +16,8 @@ export * as reactThreadSidebar from "./src/react/thread-sidebar";
 export * as reactToolPill from "./src/react/tool-pill";
 export * as reactTypes from "./src/react/types";
 export * as supportChartOption from "./src/support/chart-option";
+export * as supportClipboard from "./src/support/clipboard";
+export * as supportDownload from "./src/support/download";
 export * as supportExport from "./src/support/export";
 export * as supportMastraClient from "./src/support/mastra-client";
 export * as supportMastraStream from "./src/support/mastra-stream";

package/package.json

@@ -20,25 +20,24 @@
     "echarts-for-react": "^3.0.2",
     "lucide-react": "^0.554.0",
     "marked": "^18.0.5",
-    "nanoid": "^5.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-core": "0.3.28",
-    "@dbx-tools/shared-genie": "0.3.28",
-    "@dbx-tools/shared-mastra": "0.3.28",
-    "@dbx-tools/shared-model": "0.3.28",
-    "@dbx-tools/ui-appkit": "0.3.28",
-    "@dbx-tools/ui-branding": "0.3.28"
+    "@dbx-tools/shared-core": "0.3.29",
+    "@dbx-tools/shared-genie": "0.3.29",
+    "@dbx-tools/shared-mastra": "0.3.29",
+    "@dbx-tools/shared-model": "0.3.29",
+    "@dbx-tools/ui-appkit": "0.3.29",
+    "@dbx-tools/ui-branding": "0.3.29"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.28",
+  "version": "0.3.29",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/bubbles.tsx

@@ -27,6 +27,7 @@ import { useState } from "react";
 import { MarkdownWithEmbeds } from "./embed-slots";
 import { ExportMenu } from "./export-menu";
 import { FeedbackControls } from "./feedback-controls";
+import { copyText } from "../support/clipboard";
 import { ToolMarkdown } from "./markdown";
 import { SuggestionPills } from "./suggestion-pills";
 import { collectSuggestions } from "./suggestions";
@@ -45,39 +46,6 @@ import type {
 // the helpers that surface approval-gated tool calls out of a message's
 // parts.
 
-/**
- * Copy `text` to the clipboard, resolving `true` on success. Prefers the
- * async Clipboard API, but that is only available in a secure context
- * (HTTPS / localhost) - over plain HTTP (e.g. a LAN / ZeroTier IP) it is
- * `undefined`, which is why a tap on mobile could silently do nothing. Falls
- * back to a hidden `<textarea>` + `document.execCommand("copy")` so copy works
- * off a non-secure origin too.
- */
-async function copyText(text: string): Promise<boolean> {
-  try {
-    if (navigator.clipboard?.writeText) {
-      await navigator.clipboard.writeText(text);
-      return true;
-    }
-  } catch {
-    // Fall through to the execCommand path.
-  }
-  try {
-    const area = document.createElement("textarea");
-    area.value = text;
-    area.setAttribute("readonly", "");
-    area.style.position = "fixed";
-    area.style.opacity = "0";
-    document.body.appendChild(area);
-    area.select();
-    const ok = document.execCommand("copy");
-    area.remove();
-    return ok;
-  } catch {
-    return false;
-  }
-}
-
 const getReasoningText = (parts: UIMessage["parts"]): string =>
   parts
     .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning")

package/src/react/data-grid.tsx

@@ -30,6 +30,7 @@ import {
   DownloadIcon,
 } from "lucide-react";
 import React, { useMemo, useState } from "react";
+import { downloadFile } from "../support/download";
 
 // Interactive result table plus the cell/label/CSV helpers it and the
 // markdown table renderer share. Built on `@tanstack/react-table` over
@@ -101,12 +102,7 @@ function downloadCsv(columns: string[], rows: DataRow[], filename: string): void
     columns.map(escape).join(","),
     ...rows.map((row) => columns.map((c) => escape(row[c])).join(",")),
   ].join("\n");
-  const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8;" }));
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.click();
-  URL.revokeObjectURL(url);
+  downloadFile(filename, csv, "text/csv;charset=utf-8");
 }
 
 /**

package/src/react/markdown.tsx

@@ -17,6 +17,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { format as formatSql } from "sql-formatter";
 import { Streamdown } from "streamdown";
 import { DataGrid, TABLE_WRAPPER_CLASSES, colorizeDelta, type DataRow } from "./data-grid";
+import { copyText } from "../support/clipboard";
 import { createShikiPlugin, highlightToHtml } from "../support/shiki-plugin";
 
 // Markdown rendering for the chat: the streaming `Streamdown` engine
@@ -307,7 +308,8 @@ const CopyButton = ({ value, className }: { value: string; className?: string })
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => () => clearTimeout(timer.current ?? undefined), []);
   const onCopy = () => {
-    void navigator.clipboard.writeText(value).then(() => {
+    void copyText(value).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       clearTimeout(timer.current ?? undefined);
       timer.current = setTimeout(() => setCopied(false), 1500);

package/src/react/mastra-chat.tsx

@@ -1,8 +1,7 @@
-import { error as errorUtil, log } from "@dbx-tools/shared-core";
+import { error as errorUtil, hash, log } from "@dbx-tools/shared-core";
 import { feedback, type MastraThread } from "@dbx-tools/shared-mastra";
 import { useBrand } from "@dbx-tools/ui-branding/react";
 import type { UIMessage } from "ai";
-import { nanoid } from "nanoid";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ChatView } from "./chat-view";
 import { dedupeSuggestions } from "./suggestions";
@@ -61,7 +60,7 @@ const logger = log.logger("ui-mastra/chat");
 const HISTORY_PAGE_SIZE = 20;
 
 const makeUserMessage = (text: string): UIMessage => ({
-  id: nanoid(),
+  id: hash.id(),
   role: "user",
   parts: [{ type: "text", text }],
 });
@@ -268,7 +267,7 @@ export const useMastraChat = (
   const feedbackAvailable = enableFeedback && mastraClient.feedbackEnabled;
   const threadKey = threadStorageKey(mastraClient.basePath, agentId);
   const [activeThreadId, setActiveThreadId] = useState<string | undefined>(() =>
-    enableThreads ? (readStoredThreadId(threadKey) ?? nanoid()) : undefined,
+    enableThreads ? (readStoredThreadId(threadKey) ?? hash.id()) : undefined,
   );
   const {
     threads,
@@ -743,8 +742,8 @@ export const useMastraChat = (
 
   const runStream = useCallback(
     (threadId: string, history: UIMessage[]) => {
-      const assistantId = nanoid();
-      const runId = nanoid();
+      const assistantId = hash.id();
+      const runId = hash.id();
       updateSession(threadId, (session) => ({
         ...session,
         assistantId,
@@ -917,7 +916,7 @@ export const useMastraChat = (
       if (isSessionRunning(getSession(threadId))) {
         updateSession(threadId, (session) => ({
           ...session,
-          queuedSteers: enqueueSteer(session.queuedSteers, { id: nanoid(), text }),
+          queuedSteers: enqueueSteer(session.queuedSteers, { id: hash.id(), text }),
         }));
         return;
       }
@@ -1026,7 +1025,7 @@ export const useMastraChat = (
   );
 
   const newThread = useCallback(() => {
-    const id = nanoid();
+    const id = hash.id();
     sessionsRef.current.set(id, { ...createThreadSession(), historyLoaded: true });
     notifySessions();
     setActiveThreadId(id);
@@ -1058,7 +1057,7 @@ export const useMastraChat = (
         return rest;
       });
       if (threadId === activeThreadId) {
-        const id = nanoid();
+        const id = hash.id();
         sessionsRef.current.set(id, { ...createThreadSession(), historyLoaded: true });
         notifySessions();
         setActiveThreadId(id);

package/src/react/tool-pill.tsx

@@ -1,3 +1,4 @@
+import { string } from "@dbx-tools/shared-core";
 import { genieModel } from "@dbx-tools/shared-genie";
 import {
   Collapsible,
@@ -25,21 +26,7 @@ import type { ToolEvent, ToolProgress } from "./types";
  *   `ask_genie_sales` -> `Ask Genie Sales`
  *   `myCoolTool`    -> `My Cool Tool`
  */
-export const humanizeToolName = (toolName: string): string =>
-  toolName
-    .replace(/[._]/g, " ")
-    .replace(/([a-z])([A-Z])/g, "$1 $2")
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
-    .join(" ");
-
-/**
- * Capitalize the first character of a label without touching the rest
- * (preserves `EXECUTING_QUERY`-style backend status labels).
- */
-const capitalizeFirst = (s: string): string =>
-  s.length === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1);
+export const humanizeToolName = (toolName: string): string => string.toLabel(toolName);
 
 /**
  * Track the freshest status label a running tool has published so the
@@ -54,7 +41,7 @@ const runningLabelFor = (event: ToolEvent): string => {
     .reverse()
     .find((p): p is Extract<ToolProgress, { type: "status" }> => p.type === "status");
   return latest
-    ? capitalizeFirst(genieModel.humanizeStatus(latest.status))
+    ? string.capitalize(genieModel.humanizeStatus(latest.status))
     : `Calling ${humanizeToolName(event.toolName)}`;
 };
 
@@ -256,13 +243,7 @@ const askGenieQuestion = (event: ToolEvent): string | undefined => {
  *   `THOUGHT_TYPE_UNDERSTANDING`   -> `Understanding`
  */
 const humanizeThoughtType = (kind: string): string =>
-  kind
-    .replace(/^THOUGHT_TYPE_/i, "")
-    .toLowerCase()
-    .split("_")
-    .filter(Boolean)
-    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(" ");
+  string.toLabel(kind.replace(/^THOUGHT_TYPE_/i, ""));
 
 /**
  * Genie attaches one of three payload kinds per attachment slot:

package/src/support/clipboard.ts

@@ -0,0 +1,41 @@
+/**
+ * Clipboard write that also works off a non-secure origin.
+ *
+ * `navigator.clipboard` only exists in a secure context (HTTPS / localhost).
+ * Over plain HTTP - a LAN IP, a ZeroTier address, a port-forwarded dev host -
+ * it is `undefined`, so a copy button wired straight to it silently does
+ * nothing. {@link copyText} falls back to a hidden `<textarea>` +
+ * `document.execCommand("copy")`, which is deprecated but still the only thing
+ * that works there.
+ *
+ * @module
+ */
+
+/**
+ * Copy `text` to the clipboard, returning whether it succeeded so the caller
+ * can decide whether to show a confirmation.
+ */
+export async function copyText(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Permission denied or non-secure context; fall through to execCommand.
+  }
+  try {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    area.remove();
+    return ok;
+  } catch {
+    return false;
+  }
+}

package/src/support/download.ts

@@ -0,0 +1,29 @@
+/**
+ * Triggering a browser download of an in-memory file.
+ *
+ * The chat surface exports from two places - the transcript exporter
+ * (markdown / HTML) and the data-grid CSV button - which both need the same
+ * blob-URL + synthetic-anchor dance, including revoking the URL so repeated
+ * exports do not leak object URLs.
+ *
+ * @module
+ */
+
+/**
+ * Download `content` as `filename`. `mime` should include the charset for text
+ * formats (e.g. `"text/csv;charset=utf-8"`) so the file opens correctly.
+ *
+ * The anchor is attached to the document before clicking because Firefox
+ * ignores a click on a detached element, and the object URL is revoked on a
+ * delay so the download has started before the blob is released.
+ */
+export function downloadFile(filename: string, content: BlobPart, mime: string): void {
+  const url = URL.createObjectURL(new Blob([content], { type: mime }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/src/support/export.ts

@@ -29,6 +29,7 @@ import type { UIMessage } from "ai";
 import * as echarts from "echarts";
 import { marked } from "marked";
 import { normalizeChartOption } from "./chart-option";
+import { downloadFile } from "./download";
 
 /**
  * Output formats {@link exportChat} can produce.
@@ -114,7 +115,7 @@ export async function exportChat(options: ExportChatOptions): Promise<void> {
 
   if (format === "markdown") {
     const md = await buildMarkdown(messages, resolver, title, userLabel);
-    downloadTextFile(`${stem}.md`, md, "text/markdown;charset=utf-8");
+    downloadFile(`${stem}.md`, md, "text/markdown;charset=utf-8");
     return;
   }
 
@@ -132,7 +133,7 @@ export async function exportChat(options: ExportChatOptions): Promise<void> {
  */
 function printViaHiddenIframe(html: string, downloadName: string): void {
   if (typeof document === "undefined" || !document.body) {
-    downloadTextFile(downloadName, html, "text/html;charset=utf-8");
+    downloadFile(downloadName, html, "text/html;charset=utf-8");
     return;
   }
   const iframe = document.createElement("iframe");
@@ -156,7 +157,7 @@ function printViaHiddenIframe(html: string, downloadName: string): void {
     const win = iframe.contentWindow;
     if (!win) {
       iframe.remove();
-      downloadTextFile(downloadName, html, "text/html;charset=utf-8");
+      downloadFile(downloadName, html, "text/html;charset=utf-8");
       return;
     }
     // Settle so charts / fonts lay out, then print. `afterprint` removes the
@@ -172,7 +173,7 @@ function printViaHiddenIframe(html: string, downloadName: string): void {
         win.print();
       } catch {
         cleanup();
-        downloadTextFile(downloadName, html, "text/html;charset=utf-8");
+        downloadFile(downloadName, html, "text/html;charset=utf-8");
       }
     }, PRINT_SETTLE_MS);
   };
@@ -443,18 +444,6 @@ function slugify(value: string): string {
   return string.toSlugWithOptions({ maxLength: 60 }, value) || "conversation";
 }
 
-/** Trigger a browser download of an in-memory text file. */
-function downloadTextFile(filename: string, content: string, mime: string): void {
-  const url = URL.createObjectURL(new Blob([content], { type: mime }));
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
-}
-
 /**
  * A brand color / font value safe to interpolate into a `<style>` block.
  * Brand colors are hex-validated upstream, but the font stack is only checked

package/src/support/mastra-stream.ts

@@ -1,3 +1,5 @@
+import { json } from "@dbx-tools/shared-core";
+
 /** One chunk from a Mastra agent SSE stream (`data: { type, payload, ... }`). */
 export interface MastraStreamChunk {
   type: string;
@@ -40,13 +42,8 @@ export async function processMastraStream(options: {
         if (!line.startsWith("data: ")) continue;
         const data = line.slice(6);
         if (data === "[DONE]") return;
-        let json: MastraStreamChunk;
-        try {
-          json = JSON.parse(data) as MastraStreamChunk;
-        } catch {
-          continue;
-        }
-        if (json) await options.onChunk(json);
+        const chunk = json.parse<MastraStreamChunk>(data);
+        if (chunk) await options.onChunk(chunk);
       }
     }
   } finally {