@ai-matrx/rich-content 0.2.3 → 0.2.6

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

@@ -0,0 +1,562 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
+import {
+  Suspense,
+  createContext,
+  lazy,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Copy,
+  FileSpreadsheet,
+  FileText,
+  ListTree,
+  Code2,
+  Compass,
+  FileJson,
+  StretchHorizontal,
+  TableProperties,
+  MoreHorizontal,
+  AlignJustify,
+  Shapes
+} from "lucide-react";
+import { useOpenSaveToTable } from "../../../host/tables.js";
+import { toast } from "../../../host/toast.js";
+import { cn } from "@ai-matrx/design-system";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "@ai-matrx/design-system";
+import IconButton from "../../../utils/lifted/IconButton.js";
+import { AdvancedMenu } from "../../../host/app-bindings.js";
+import { useAdvancedMenu } from "../../../host/app-bindings.js";
+import {
+  parseJsonSafe,
+  detectTabular,
+  rowsToCsv,
+  rowsToNdjson,
+  rowsToXlsx,
+  downloadText,
+  defaultJsonFilename
+} from "./json-tabular-utils.js";
+import { stringifyCompact } from "./json-compact-stringify.js";
+import { CodeBlockWithContextAttach } from "../../../host/app-bindings.js";
+import { useOpenConvertToShapeWindow } from "../../../host/app-bindings.js";
+import { findEscapedKindMarkers } from "../../../kinds/react/kind-problems.js";
+import KindEscapedNotice from "../../../kinds/react/KindEscapedNotice.js";
+import { KindValueFrontDoor } from "../../../host/app-bindings.js";
+import { textCarriesKind, valueCarriesKind } from "@ai-matrx/content-ir/surfaces";
+import { Button } from "@ai-matrx/design-system/controls";
+const JsonTableView = lazy(
+  () => import("./JsonTableView.js")
+);
+import { JsonTreeViewer, RawJsonExplorer } from "../../../host/app-bindings.js";
+function PaneFallback({ label = "Loading\u2026" }) {
+  return /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted-foreground italic", children: label });
+}
+const JsonKindRouteContext = createContext([]);
+function canonicalJson(value) {
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return "";
+  }
+}
+const JsonBlock = ({
+  content,
+  className,
+  isStreamActive = false,
+  allowEdit = true,
+  customBuiltinKeys = [],
+  onCodeChange,
+  conversationId,
+  messageId,
+  allowConvertToShape = true,
+  irEnvelope = null,
+  meta
+}) => {
+  const openConvertToShape = useOpenConvertToShapeWindow();
+  const routedAbove = useContext(JsonKindRouteContext);
+  const [mode, setMode] = useState("code");
+  const openSaveToTable = useOpenSaveToTable();
+  const [formatOverride, setFormatOverride] = useState(null);
+  const effectiveContent = formatOverride ?? content;
+  const [previousContent, setPreviousContent] = useState(content);
+  if (previousContent !== content) {
+    setPreviousContent(content);
+    setFormatOverride(null);
+  }
+  const parsed = useMemo(() => {
+    return parseJsonSafe(effectiveContent);
+  }, [effectiveContent]);
+  const cardShowsSource = !allowConvertToShape || !textCarriesKind(effectiveContent) && !(parsed.ok && valueCarriesKind(parsed.value));
+  const kindMarkers = useMemo(() => {
+    if (!parsed.ok || isStreamActive || !allowConvertToShape) return [];
+    return findEscapedKindMarkers(parsed.value, irEnvelope);
+  }, [parsed, isStreamActive, allowConvertToShape, irEnvelope]);
+  const tabular = useMemo(() => {
+    if (!parsed.ok) {
+      return {
+        isTabular: false,
+        rows: [],
+        columns: [],
+        source: "none"
+      };
+    }
+    return detectTabular(parsed.value);
+  }, [parsed]);
+  const jsonMenuItems = useMemo(() => {
+    if (!parsed.ok) return [];
+    const data2 = parsed.value;
+    const items = [];
+    const base = defaultJsonFilename();
+    if (allowConvertToShape) {
+      items.push({
+        key: "convert-to-shape",
+        icon: Shapes,
+        iconColor: "text-amber-600 dark:text-amber-400",
+        label: "Convert to Shape\u2026",
+        description: "Create or improve a reusable Shape from this JSON",
+        category: "Create",
+        showToast: false,
+        action: () => {
+          openConvertToShape({ initialJsonContent: effectiveContent });
+        }
+      });
+    }
+    if (tabular.isTabular && openSaveToTable) {
+      items.push({
+        key: "save-to-table",
+        icon: TableProperties,
+        iconColor: "text-emerald-600 dark:text-emerald-400",
+        label: "Save to a table\u2026",
+        description: "A new table, or add these rows to one you have",
+        category: "Data",
+        showToast: false,
+        action: () => {
+          openSaveToTable({
+            value: data2,
+            title: tabular.source === "wrapped-array" && tabular.wrapperKey ? humanizeIdentifier(tabular.wrapperKey) || tabular.wrapperKey : null
+          });
+        }
+      });
+    }
+    if (Array.isArray(data2)) {
+      items.push({
+        key: "download-ndjson",
+        icon: FileText,
+        label: "Download as NDJSON",
+        description: "One object per line",
+        category: "Download",
+        showToast: false,
+        action: () => downloadText(
+          `${base}.ndjson`,
+          rowsToNdjson(data2),
+          "application/x-ndjson"
+        )
+      });
+    }
+    if (tabular.isTabular) {
+      items.push({
+        key: "download-csv",
+        icon: FileSpreadsheet,
+        label: "Download as CSV",
+        description: `${tabular.rows.length} rows \xD7 ${tabular.columns.length} cols`,
+        category: "Download",
+        showToast: false,
+        action: () => downloadText(
+          `${base}.csv`,
+          rowsToCsv(tabular.rows, tabular.columns),
+          "text/csv"
+        )
+      });
+      items.push({
+        key: "download-xlsx",
+        icon: FileSpreadsheet,
+        label: "Download as Excel (.xlsx)",
+        description: "Best for spreadsheets",
+        category: "Download",
+        showToast: false,
+        action: () => {
+          void rowsToXlsx(tabular.rows, tabular.columns, `${base}.xlsx`);
+        }
+      });
+    }
+    return items;
+  }, [
+    allowConvertToShape,
+    effectiveContent,
+    openConvertToShape,
+    openSaveToTable,
+    parsed,
+    tabular
+  ]);
+  const compactForm = useMemo(() => {
+    if (!parsed.ok) return null;
+    try {
+      return stringifyCompact(parsed.value, { maxWidth: 100, indent: 2 });
+    } catch {
+      return null;
+    }
+  }, [parsed]);
+  const expandedForm = useMemo(() => {
+    if (!parsed.ok) return null;
+    try {
+      return JSON.stringify(parsed.value, null, 2);
+    } catch {
+      return null;
+    }
+  }, [parsed]);
+  const isCompactFormatted = compactForm !== null && effectiveContent.trim() === compactForm.trim();
+  const applyFormat = (next) => {
+    if (next === effectiveContent) return;
+    if (onCodeChange) {
+      if (formatOverride !== null) setFormatOverride(null);
+      onCodeChange(next);
+    } else {
+      setFormatOverride(next);
+    }
+  };
+  const formatMenuItems = useMemo(() => {
+    const items = [];
+    if (compactForm) {
+      items.push({
+        key: "format-compact",
+        icon: AlignJustify,
+        iconColor: "text-sky-600 dark:text-sky-400",
+        label: "Compact formatting",
+        description: "Inline leaf objects and arrays that fit on one line. Updates the JSON text.",
+        category: "Format",
+        showToast: false,
+        disabled: isCompactFormatted,
+        action: () => applyFormat(compactForm)
+      });
+    }
+    if (expandedForm) {
+      items.push({
+        key: "format-expanded",
+        icon: Code2,
+        iconColor: "text-sky-600 dark:text-sky-400",
+        label: "Standard formatting",
+        description: "Two-space pretty-print. Updates the JSON text.",
+        category: "Format",
+        showToast: false,
+        disabled: !isCompactFormatted && effectiveContent.trim() === expandedForm.trim(),
+        action: () => applyFormat(expandedForm)
+      });
+    }
+    return items;
+  }, [compactForm, expandedForm, isCompactFormatted, effectiveContent]);
+  const fullMenuItems = useMemo(
+    () => [...formatMenuItems, ...jsonMenuItems],
+    [formatMenuItems, jsonMenuItems]
+  );
+  const canInspect = parsed.ok;
+  const activeMode = canInspect ? mode : "code";
+  const toggleFormat = () => {
+    if (isCompactFormatted) {
+      if (expandedForm) applyFormat(expandedForm);
+    } else {
+      if (compactForm) applyFormat(compactForm);
+    }
+  };
+  const viewToggle = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(
+      ViewToggle,
+      {
+        mode: activeMode,
+        onChange: setMode,
+        inspectAvailable: canInspect,
+        tabularAvailable: tabular.isTabular
+      }
+    ),
+    activeMode === "code" && /* @__PURE__ */ jsx(
+      FormatToggleButton,
+      {
+        isCompact: isCompactFormatted,
+        disabled: !compactForm || !expandedForm,
+        onToggle: toggleFormat
+      }
+    )
+  ] });
+  if (!parsed.ok) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-content-renderer": "JsonBlock",
+        onClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PaneFallback, { label: "Loading code\u2026" }), children: /* @__PURE__ */ jsx(
+          CodeBlockWithContextAttach,
+          {
+            showSource: cardShowsSource,
+            code: content,
+            language: "json",
+            meta,
+            className,
+            isStreamActive,
+            allowEdit,
+            customBuiltinKeys,
+            onCodeChange,
+            headerLeftSlot: viewToggle,
+            extraMenuItems: fullMenuItems,
+            conversationId,
+            messageId
+          }
+        ) })
+      }
+    );
+  }
+  const data = parsed.value;
+  const tabularCaption = tabular.isTabular && `${tabular.rows.length} row${tabular.rows.length === 1 ? "" : "s"} \xD7 ${tabular.columns.length} col${tabular.columns.length === 1 ? "" : "s"}`;
+  const stopBubble = (e) => e.stopPropagation();
+  const routedKey = !isStreamActive && allowConvertToShape && valueCarriesKind(data) ? canonicalJson(data) : null;
+  if (routedKey !== null && !routedAbove.includes(routedKey)) {
+    return /* @__PURE__ */ jsx(JsonKindRouteContext.Provider, { value: [...routedAbove, routedKey], children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-content-renderer": "JsonBlock",
+        "data-kind-route": "answer-value",
+        onClick: stopBubble,
+        onMouseDown: stopBubble,
+        onMouseUp: stopBubble,
+        onDoubleClick: stopBubble,
+        children: [
+          kindMarkers.length > 0 ? /* @__PURE__ */ jsx(KindEscapedNotice, { markers: kindMarkers, rendered: true }) : null,
+          /* @__PURE__ */ jsx(KindValueFrontDoor, { value: data })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-content-renderer": "JsonBlock",
+      onClick: stopBubble,
+      onMouseDown: stopBubble,
+      onMouseUp: stopBubble,
+      onDoubleClick: stopBubble,
+      children: [
+        kindMarkers.length > 0 ? /* @__PURE__ */ jsx(KindEscapedNotice, { markers: kindMarkers }) : null,
+        mode === "code" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PaneFallback, { label: "Loading code\u2026" }), children: /* @__PURE__ */ jsx(
+          CodeBlockWithContextAttach,
+          {
+            showSource: cardShowsSource,
+            code: effectiveContent,
+            language: "json",
+            meta,
+            className,
+            isStreamActive,
+            allowEdit,
+            customBuiltinKeys,
+            onCodeChange: onCodeChange ? (next) => {
+              if (formatOverride !== null) setFormatOverride(null);
+              onCodeChange(next);
+            } : (next) => setFormatOverride(next),
+            headerLeftSlot: viewToggle,
+            extraMenuItems: fullMenuItems,
+            conversationId,
+            messageId
+          }
+        ) }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "w-full my-4 rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700 bg-background",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                JsonViewHeader,
+                {
+                  toggle: viewToggle,
+                  menuItems: fullMenuItems,
+                  caption: mode === "table" ? tabularCaption || "" : "",
+                  content: effectiveContent
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "bg-card", children: [
+                mode === "tree" && /* @__PURE__ */ jsx("div", { className: "max-h-[600px] overflow-auto", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PaneFallback, { label: "Loading tree\u2026" }), children: /* @__PURE__ */ jsx(JsonTreeViewer, { data }) }) }),
+                mode === "table" && tabular.isTabular && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PaneFallback, { label: "Loading table\u2026" }), children: /* @__PURE__ */ jsx(
+                  JsonTableView,
+                  {
+                    rows: tabular.rows,
+                    columns: tabular.columns,
+                    caption: tabularCaption
+                  }
+                ) }),
+                mode === "explorer" && /* @__PURE__ */ jsx("div", { className: "max-h-[600px] overflow-auto", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PaneFallback, { label: "Loading explorer\u2026" }), children: /* @__PURE__ */ jsx(RawJsonExplorer, { pageData: data }) }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const FormatToggleButton = ({
+  isCompact,
+  disabled,
+  onToggle
+}) => {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(AlignJustify, {}), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+      e.stopPropagation();
+      if (!disabled) onToggle();
+    }, disabled, title: disabled ? "Available when the JSON is valid" : isCompact ? "Expand JSON" : "Compact JSON", "aria-label": isCompact ? "Expand JSON" : "Compact JSON" }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "text-xs", children: disabled ? "Available when the JSON is valid" : isCompact ? "Reformat to standard pretty-print (updates the text)" : "Reformat to compact (inlines leaf objects, updates the text)" })
+  ] }) });
+};
+const VIEW_BUTTON = "h-5 w-5 flex items-center justify-center rounded transition-colors";
+const ViewToggle = ({
+  mode,
+  onChange,
+  inspectAvailable,
+  tabularAvailable
+}) => {
+  const items = [
+    { id: "code", label: "Code", icon: Code2, tooltip: "Code" },
+    {
+      id: "tree",
+      label: "Tree",
+      icon: ListTree,
+      disabled: !inspectAvailable,
+      tooltip: inspectAvailable ? "Tree" : "Available when the JSON is valid"
+    },
+    {
+      id: "table",
+      label: "Table",
+      icon: StretchHorizontal,
+      disabled: !inspectAvailable || !tabularAvailable,
+      tooltip: tabularAvailable ? "Table" : inspectAvailable ? "Table view available when JSON is an array of objects" : "Available when the JSON is valid"
+    },
+    {
+      id: "explorer",
+      label: "Path",
+      icon: Compass,
+      disabled: !inspectAvailable,
+      tooltip: inspectAvailable ? "Path explorer" : "Available when the JSON is valid"
+    }
+  ];
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 rounded-md border border-border/50 bg-background/50 p-0.5", children: items.map((item) => {
+    const Icon = item.icon;
+    const active = mode === item.id;
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!item.disabled) onChange(item.id);
+        },
+        disabled: item.disabled,
+        title: item.tooltip ?? item.label,
+        "aria-label": `${item.label} view`,
+        "aria-pressed": active,
+        className: cn(
+          VIEW_BUTTON,
+          active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted",
+          item.disabled && "opacity-40 cursor-not-allowed"
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" })
+      },
+      item.id
+    );
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "text-xs", children: item.tooltip })
+    ] }, item.id);
+  }) }) });
+};
+const JsonViewHeader = ({
+  toggle,
+  menuItems,
+  caption,
+  content
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const menu = useAdvancedMenu();
+  const kebabRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await copyText(content);
+      setCopied(true);
+      toast.success("Copied JSON to clipboard");
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("Failed to copy");
+    }
+  };
+  const fullMenuItems = [
+    {
+      key: "copy-json",
+      icon: Copy,
+      label: "Copy JSON",
+      category: "Copy",
+      showToast: false,
+      action: handleCopy
+    },
+    ...menuItems
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1.5 bg-zinc-300 dark:bg-zinc-700 text-xs text-gray-700 dark:text-gray-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+        /* @__PURE__ */ jsx(FileJson, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] font-semibold uppercase tracking-wide", children: "JSON" })
+      ] }),
+      toggle,
+      caption && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: caption })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Copy,
+          tooltip: copied ? "Copied!" : "Copy JSON",
+          variant: "ghost",
+          onClick: handleCopy,
+          tooltipSide: "bottom"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: kebabRef, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: MoreHorizontal,
+          tooltip: "More actions",
+          variant: "ghost",
+          tooltipSide: "bottom",
+          onClick: () => {
+            if (kebabRef.current) menu.open(kebabRef.current);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        AdvancedMenu,
+        {
+          ...menu.menuProps,
+          anchorElement: menu.anchorElement,
+          items: fullMenuItems,
+          title: "JSON actions",
+          position: "bottom-right",
+          width: "260px",
+          maxWidth: "300px"
+        }
+      )
+    ] })
+  ] });
+};
+var JsonBlock_default = JsonBlock;
+export {
+  JsonBlock,
+  JsonBlock_default as default
+};

package/dist/display/blocks/json/JsonTableView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface JsonTableViewProps {
+    rows: Record<string, unknown>[];
+    columns: string[];
+    /** Optional preamble shown above the table — e.g. "12 rows × 5 cols". */
+    caption?: React.ReactNode;
+    className?: string;
+}
+export declare const JsonTableView: React.FC<JsonTableViewProps>;
+export default JsonTableView;