@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/display/blocks/json/JsonTableView.js

@@ -0,0 +1,173 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Search
+} from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { Button, Input } from "@ai-matrx/design-system/controls";
+function formatPrimitive(value) {
+  if (value === null)
+    return /* @__PURE__ */ jsx("span", { className: "text-orange-500 italic", children: "null" });
+  if (value === void 0)
+    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+  if (typeof value === "boolean")
+    return /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400 font-mono", children: String(value) });
+  if (typeof value === "number")
+    return /* @__PURE__ */ jsx("span", { className: "text-blue-600 dark:text-blue-400 font-mono tabular-nums", children: value });
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+const NestedCell = ({ value }) => {
+  const [expanded, setExpanded] = useState(false);
+  const isArr = Array.isArray(value);
+  const preview = isArr ? `Array(${value.length})` : `Object(${Object.keys(value).length})`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: expanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => setExpanded((v) => !v), children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: preview }) }),
+    expanded && /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted/50 rounded px-2 py-1 overflow-auto max-h-48 whitespace-pre-wrap break-all", children: JSON.stringify(value, null, 2) })
+  ] });
+};
+const Cell = ({ value }) => {
+  if (value !== null && typeof value === "object") {
+    return /* @__PURE__ */ jsx(NestedCell, { value });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: formatPrimitive(value) });
+};
+function compareCells(a, b, dir) {
+  if (dir === null) return 0;
+  const mul = dir === "asc" ? 1 : -1;
+  if (a == null && b == null) return 0;
+  if (a == null) return -1 * mul;
+  if (b == null) return 1 * mul;
+  if (typeof a === "number" && typeof b === "number") return (a - b) * mul;
+  if (typeof a === "boolean" && typeof b === "boolean") {
+    return (Number(a) - Number(b)) * mul;
+  }
+  const sa = typeof a === "object" ? JSON.stringify(a) : String(a);
+  const sb = typeof b === "object" ? JSON.stringify(b) : String(b);
+  return sa.localeCompare(sb) * mul;
+}
+const JsonTableView = ({
+  rows,
+  columns,
+  caption,
+  className
+}) => {
+  const [sortCol, setSortCol] = useState(null);
+  const [sortDir, setSortDir] = useState(null);
+  const [query, setQuery] = useState("");
+  const handleSort = (col) => {
+    if (sortCol === col) {
+      if (sortDir === "asc") setSortDir("desc");
+      else if (sortDir === "desc") {
+        setSortCol(null);
+        setSortDir(null);
+      }
+    } else {
+      setSortCol(col);
+      setSortDir("asc");
+    }
+  };
+  const filteredRows = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter(
+      (row) => columns.some((c) => {
+        const v = row[c];
+        if (v == null) return false;
+        const s = typeof v === "object" ? JSON.stringify(v) : String(v);
+        return s.toLowerCase().includes(q);
+      })
+    );
+  }, [rows, columns, query]);
+  const sortedRows = useMemo(() => {
+    if (!sortCol || !sortDir) return filteredRows;
+    return [...filteredRows].sort(
+      (a, b) => compareCells(a[sortCol], b[sortCol], sortDir)
+    );
+  }, [filteredRows, sortCol, sortDir]);
+  const getSortIcon = (col) => {
+    if (sortCol !== col)
+      return /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-0 group-hover/th:opacity-50" });
+    if (sortDir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3 text-primary" });
+    return /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3 text-primary" });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-card border-t border-border/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1.5 border-b border-border/40 bg-muted/20", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: caption }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                adornment: "start",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: "Filter rows\u2026",
+                className: "w-48"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-[600px]", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm border-collapse", children: [
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxs("tr", { className: "bg-muted/70 backdrop-blur", children: [
+            /* @__PURE__ */ jsx("th", { className: "px-1 py-1 text-center text-[10px] text-muted-foreground font-mono border-r border-border/30 w-10 sticky left-0 bg-muted/70 backdrop-blur", children: "#" }),
+            columns.map((col) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                onClick: () => handleSort(col),
+                className: "group/th px-3 py-1.5 text-left text-xs font-semibold text-foreground border-r border-border/30 last:border-r-0 cursor-pointer hover:bg-muted transition-colors select-none whitespace-nowrap",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { children: col }),
+                  getSortIcon(col)
+                ] })
+              },
+              col
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: sortedRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: columns.length + 1,
+              className: "px-3 py-6 text-center text-xs text-muted-foreground",
+              children: query ? "No rows match the filter." : "Empty table."
+            }
+          ) }) : sortedRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "border-t border-border/20 hover:bg-muted/20 transition-colors align-top",
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "px-1 py-1 text-center text-[10px] text-muted-foreground font-mono border-r border-border/30 sticky left-0 bg-background", children: rowIdx + 1 }),
+                columns.map((col) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: "px-3 py-1.5 text-foreground border-r border-border/30 last:border-r-0 align-top min-w-0 max-w-md",
+                    children: /* @__PURE__ */ jsx(Cell, { value: row[col] })
+                  },
+                  col
+                ))
+              ]
+            },
+            rowIdx
+          )) })
+        ] }) })
+      ]
+    }
+  );
+};
+var JsonTableView_default = JsonTableView;
+export {
+  JsonTableView,
+  JsonTableView_default as default
+};

package/dist/display/blocks/json/json-compact-stringify.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Pretty-but-compact JSON stringifier.
+ *
+ * Inspired by `json-stringify-pretty-compact`: keep the outer structure
+ * indented for scannability, but collapse any sub-value whose one-line
+ * form fits within `maxWidth` back onto a single line. The result reads
+ * horizontally where possible without sacrificing top-level shape.
+ *
+ * Example output for a model definition:
+ *
+ *   {
+ *     "controls": {
+ *       "temperature": { "type": "number", "min": 0, "max": 1, "default": 1 },
+ *       "top_p":       { "type": "number", "min": 0, "max": 1, "default": 1 },
+ *       ...
+ *     }
+ *   }
+ */
+export interface CompactStringifyOptions {
+    /** Wrap to multi-line when the single-line form exceeds this width. */
+    maxWidth?: number;
+    /** Spaces per indent level. */
+    indent?: number;
+}
+export declare function stringifyCompact(value: unknown, options?: CompactStringifyOptions): string;

package/dist/display/blocks/json/json-compact-stringify.js

@@ -0,0 +1,52 @@
+function stringifyCompact(value, options = {}) {
+  const maxWidth = options.maxWidth ?? 100;
+  const indentSize = options.indent ?? 2;
+  const pad = " ".repeat(indentSize);
+  const render = (v, currentIndent) => {
+    const flat = JSON.stringify(v) ?? "null";
+    if (flat.length <= Math.max(0, maxWidth - currentIndent.length)) {
+      return prettifyFlat(flat);
+    }
+    if (Array.isArray(v)) {
+      if (v.length === 0) return "[]";
+      const nextIndent = currentIndent + pad;
+      const items = v.map((item) => nextIndent + render(item, nextIndent));
+      return "[\n" + items.join(",\n") + "\n" + currentIndent + "]";
+    }
+    if (v !== null && typeof v === "object") {
+      const keys = Object.keys(v);
+      if (keys.length === 0) return "{}";
+      const nextIndent = currentIndent + pad;
+      const items = keys.map((k) => {
+        const valueStr = render(v[k], nextIndent);
+        return nextIndent + JSON.stringify(k) + ": " + valueStr;
+      });
+      return "{\n" + items.join(",\n") + "\n" + currentIndent + "}";
+    }
+    return flat;
+  };
+  return render(value, "");
+}
+function prettifyFlat(flat) {
+  let out = "";
+  let inString = false;
+  for (let i = 0; i < flat.length; i++) {
+    const ch = flat[i];
+    out += ch;
+    if (ch === '"') {
+      let backslashes = 0;
+      for (let j = i - 1; j >= 0 && flat[j] === "\\"; j--) backslashes++;
+      if (backslashes % 2 === 0) inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === ":" || ch === ",") {
+      const next = flat[i + 1];
+      if (next !== void 0 && next !== " ") out += " ";
+    }
+  }
+  return out;
+}
+export {
+  stringifyCompact
+};

package/dist/display/blocks/json/json-tabular-utils.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Utilities for the JSON-aware code block: parse, detect tabular shape,
+ * and export to common interchange formats (CSV, NDJSON, XLSX).
+ *
+ * The detection rules are intentionally permissive — we offer Table view
+ * whenever a sensible interpretation exists, then let the user pick. A
+ * mediocre table render on borderline data is fine; an absent option on
+ * obviously-tabular data is the worse failure mode.
+ */
+export type TabularSource = "array-of-objects" | "matrix" | "wrapped-array" | "none";
+export interface TabularShape {
+    /** True when we can render `rows` as a sensible table. */
+    isTabular: boolean;
+    /** Normalized row records — never holds the original parsed value. */
+    rows: Record<string, unknown>[];
+    /** Ordered column names (union of keys for object-rows, indices for matrix). */
+    columns: string[];
+    /** Where the rows came from inside the original payload. */
+    source: TabularSource;
+    /** For `wrapped-array`: the key whose value held the inner array. */
+    wrapperKey?: string;
+}
+export interface ParseResult {
+    ok: boolean;
+    value?: unknown;
+    error?: string;
+}
+/**
+ * Strict JSON parse — no Python/single-quote/trailing-comma fallback.
+ * Streaming/partial content stays in code view, so we never want to be
+ * "clever" here and accidentally render half-baked structures as tables.
+ */
+export declare function parseJsonSafe(text: string): ParseResult;
+/**
+ * Detect a tabular interpretation of a parsed JSON value, in priority order:
+ *
+ *   1. Array of objects                            → array-of-objects
+ *   2. Matrix (array of equal-length arrays)       → matrix
+ *   3. Object with exactly one array-valued key
+ *      whose inner array satisfies (1) or (2)      → wrapped-array
+ *   4. Otherwise                                   → not tabular
+ *
+ * The cell values are returned as-is (still unknown). Rendering decides
+ * how to display nested objects/arrays in a cell.
+ */
+export declare function detectTabular(value: unknown): TabularShape;
+/**
+ * Stringify a cell for CSV/text export. Objects/arrays become compact JSON.
+ * `null` and `undefined` become empty strings (Excel-friendly).
+ */
+export declare function cellToCsv(value: unknown): string;
+export declare function rowsToCsv(rows: Record<string, unknown>[], columns: string[], delimiter?: string): string;
+export declare function rowsToNdjson(rows: unknown[]): string;
+/** Browser file-download for a text payload. */
+export declare function downloadText(filename: string, content: string, mime?: string): void;
+/**
+ * XLSX export uses the same `xlsx` package as `ImportTableModal`.
+ * Dynamically imported to keep it out of the initial chat bundle.
+ *
+ * Cell values are pre-stringified for objects/arrays so spreadsheets
+ * receive plain text instead of "[object Object]".
+ */
+export declare function rowsToXlsx(rows: Record<string, unknown>[], columns: string[], filename: string): Promise<void>;
+/** Default filename helper (no extension). */
+export declare function defaultJsonFilename(): string;

package/dist/display/blocks/json/json-tabular-utils.js

@@ -0,0 +1,121 @@
+import { announceBareHost, hostCapability } from "../../../host/registry.js";
+function parseJsonSafe(text) {
+  if (!text || !text.trim()) {
+    return { ok: false, error: "Empty input" };
+  }
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch (err) {
+    return {
+      ok: false,
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
+function isPlainObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function detectTabular(value) {
+  if (Array.isArray(value) && value.length > 0 && value.every(isPlainObject)) {
+    const cols = /* @__PURE__ */ new Set();
+    for (const row of value) {
+      for (const k of Object.keys(row)) cols.add(k);
+    }
+    return {
+      isTabular: true,
+      rows: value,
+      columns: Array.from(cols),
+      source: "array-of-objects"
+    };
+  }
+  if (Array.isArray(value) && value.length > 0 && value.every(Array.isArray)) {
+    const lens = new Set(value.map((r) => r.length));
+    if (lens.size === 1) {
+      const first = value[0];
+      const allStrings = first.every((c) => typeof c === "string");
+      const columns = allStrings ? first.map(String) : first.map((_, i) => `col_${i + 1}`);
+      const dataRows = allStrings ? value.slice(1) : value;
+      const rows = dataRows.map(
+        (r) => Object.fromEntries(columns.map((c, i) => [c, r[i]]))
+      );
+      return {
+        isTabular: true,
+        rows,
+        columns,
+        source: "matrix"
+      };
+    }
+  }
+  if (isPlainObject(value)) {
+    const arrayKeys = Object.keys(value).filter(
+      (k) => Array.isArray(value[k])
+    );
+    if (arrayKeys.length === 1) {
+      const wrapperKey = arrayKeys[0];
+      const inner = value[wrapperKey];
+      const recur = detectTabular(inner);
+      if (recur.isTabular) {
+        return { ...recur, source: "wrapped-array", wrapperKey };
+      }
+    }
+  }
+  return { isTabular: false, rows: [], columns: [], source: "none" };
+}
+function cellToCsv(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function escapeCsv(value, delimiter) {
+  const needsQuote = value.includes(delimiter) || value.includes('"') || value.includes("\n") || value.includes("\r");
+  if (!needsQuote) return value;
+  return `"${value.replace(/"/g, '""')}"`;
+}
+function rowsToCsv(rows, columns, delimiter = ",") {
+  const header = columns.map((c) => escapeCsv(c, delimiter)).join(delimiter);
+  const body = rows.map(
+    (row) => columns.map((c) => escapeCsv(cellToCsv(row[c]), delimiter)).join(delimiter)
+  ).join("\n");
+  return body ? `${header}
+${body}` : header;
+}
+function rowsToNdjson(rows) {
+  return rows.map((r) => JSON.stringify(r)).join("\n");
+}
+function downloadText(filename, content, mime = "text/plain") {
+  const blob = new Blob([content], { type: `${mime};charset=utf-8` });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  window.URL.revokeObjectURL(url);
+}
+async function rowsToXlsx(rows, columns, filename) {
+  const impl = hostCapability("app")?.rowsToXlsx;
+  if (impl) return impl(rows, columns, filename);
+  announceBareHost("app.rowsToXlsx", "spreadsheets download as CSV");
+  downloadText(rowsToCsv(rows, columns), filename.replace(/\.xlsx$/i, "") + ".csv", "text/csv");
+}
+function defaultJsonFilename() {
+  const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+  return `json-${stamp}`;
+}
+export {
+  cellToCsv,
+  defaultJsonFilename,
+  detectTabular,
+  downloadText,
+  parseJsonSafe,
+  rowsToCsv,
+  rowsToNdjson,
+  rowsToXlsx
+};

package/dist/display/blocks/links/LinkComponent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const LinkComponent: ({ href, children, }: {
+    href: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default LinkComponent;