@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/tables/TableWithSeparatedControls.js

@@ -0,0 +1,574 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { toast as copyToast } from "../../host/toast.js";
+import { rewriteTableSource } from "../../utils/table-source.js";
+import { useState, useEffect, useCallback } from "react";
+import { cn } from "@ai-matrx/design-system";
+import { RichContent } from "../../levels/RichContent.js";
+import { Button } from "@ai-matrx/design-system/controls";
+import {
+  Download,
+  Eye,
+  Edit,
+  Save,
+  X,
+  FileJson,
+  FileText,
+  FileSpreadsheet,
+  FileDown,
+  ChevronDown,
+  Database
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator
+} from "@ai-matrx/design-system";
+import { useToastManager } from "../../utils/lifted/useToastManager.js";
+import { THEMES } from "../themes.js";
+import { useOpenSaveToTable } from "../../host/tables.js";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+const TableControls = ({
+  tableData,
+  content,
+  showNormalized,
+  setShowNormalized,
+  editMode,
+  onSaveAsTable,
+  onSave,
+  onContentChange,
+  toggleGlobalEditMode,
+  handleSave,
+  handleCancel
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? copyToast.error(message) : copyToast.success(message)
+  });
+  const toast = useToastManager();
+  const debouncedTableData = useDebounce(tableData, 500);
+  const isUpdating = tableData !== debouncedTableData;
+  const generateMarkdownTable = useCallback(
+    () => rewriteTableSource(content, { headers: tableData.headers, rows: tableData.rows }),
+    [content, tableData.headers, tableData.rows]
+  );
+  const notifyContentChange = useCallback(() => {
+    if (onContentChange && content) {
+      try {
+        onContentChange(generateMarkdownTable());
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : String(error));
+        return false;
+      }
+    }
+    return true;
+  }, [onContentChange, content, generateMarkdownTable, toast]);
+  const copyTableToClipboard = useCallback(async () => {
+    try {
+      const formattedTable = generateMarkdownTable();
+      await copyText(formattedTable, "Table copied to clipboard");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy table");
+    }
+  }, [generateMarkdownTable, toast]);
+  const copyJsonToClipboard = useCallback(async () => {
+    try {
+      await copyText(
+        JSON.stringify(debouncedTableData.normalizedData, null, 2)
+      );
+      toast.success("JSON copied to clipboard");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy JSON");
+    }
+  }, [debouncedTableData.normalizedData, toast]);
+  const copyMarkdownToClipboard = useCallback(async () => {
+    try {
+      if (content) {
+        await copyText(content, "Markdown copied to clipboard");
+      } else {
+        copyTableToClipboard();
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy markdown");
+    }
+  }, [content, copyTableToClipboard, toast]);
+  const downloadCSV = useCallback(() => {
+    try {
+      const csvContent = [
+        tableData.headers.map((h) => h.replace(/"/g, '""')).join(","),
+        ...tableData.rows.map(
+          (row) => row.map((cell) => {
+            const escaped = cell.replace(/"/g, '""');
+            return cell.includes(",") ? `"${escaped}"` : escaped;
+          }).join(",")
+        )
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "table_data.csv";
+      link.click();
+      URL.revokeObjectURL(url);
+      toast.success("Table exported to CSV", {
+        action: {
+          label: "Download Again",
+          onClick: () => link.click(),
+          className: "font-medium"
+        }
+      });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to download CSV");
+    }
+  }, [tableData.headers, tableData.rows, toast]);
+  const downloadMarkdown = useCallback(() => {
+    try {
+      const markdownContent = content || "";
+      const fileName = tableData.headers && tableData.headers[0] ? `${tableData.headers[0].replace(/[^a-z0-9]/gi, "_").toLowerCase()}.md` : "table_data.md";
+      const blob = new Blob([markdownContent], {
+        type: "text/markdown;charset=utf-8"
+      });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      toast.success("Markdown file downloaded", {
+        action: {
+          label: "Download Again",
+          onClick: () => {
+            const newLink = document.createElement("a");
+            newLink.href = url;
+            newLink.download = fileName;
+            document.body.appendChild(newLink);
+            newLink.click();
+            document.body.removeChild(newLink);
+          },
+          className: "font-medium"
+        }
+      });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to download Markdown");
+    }
+  }, [content, tableData.headers, toast]);
+  const renderTableActionButton = useCallback(() => {
+    if (!debouncedTableData.normalizedData || !onSaveAsTable) return null;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Database, {}),
+        variant: "outline",
+        onClick: onSaveAsTable,
+        className: "flex",
+        disabled: isUpdating,
+        children: "Save to a table"
+      }
+    );
+  }, [debouncedTableData.normalizedData, onSaveAsTable, isUpdating]);
+  if (isUpdating) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-2 opacity-50", children: [
+      debouncedTableData.normalizedData && /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Eye, {}),
+          type: "submit",
+          variant: "outline",
+          className: "flex",
+          disabled: true,
+          children: showNormalized ? "Table" : "Data"
+        }
+      ),
+      debouncedTableData.normalizedData && onSaveAsTable && /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Database, {}),
+          type: "submit",
+          variant: "outline",
+          className: "flex",
+          disabled: true,
+          children: "Save to a table"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Download, {}),
+          iconEnd: /* @__PURE__ */ jsx(ChevronDown, {}),
+          type: "submit",
+          variant: "outline",
+          className: "flex",
+          disabled: true,
+          children: "Export"
+        }
+      ),
+      editMode !== "none" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(Save, {}),
+            type: "submit",
+            variant: "outline",
+            className: "flex",
+            disabled: true,
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(X, {}),
+            type: "submit",
+            variant: "outline",
+            className: "flex",
+            disabled: true,
+            children: "Cancel"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Edit, {}),
+          type: "submit",
+          variant: "outline",
+          className: "flex",
+          disabled: true,
+          children: "Edit"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [
+    debouncedTableData.normalizedData && /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Eye, {}),
+        variant: "outline",
+        onClick: () => setShowNormalized(!showNormalized),
+        className: "flex",
+        children: showNormalized ? "Table" : "Data"
+      }
+    ),
+    renderTableActionButton(),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Download, {}),
+          iconEnd: /* @__PURE__ */ jsx(ChevronDown, {}),
+          variant: "outline",
+          className: "flex",
+          children: "Export"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: copyTableToClipboard,
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-green-500" }),
+              /* @__PURE__ */ jsx("span", { children: "Copy as Text" })
+            ]
+          }
+        ),
+        content && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: copyMarkdownToClipboard,
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(FileDown, { className: "h-4 w-4 text-purple-500" }),
+              /* @__PURE__ */ jsx("span", { children: "Copy as Markdown" })
+            ]
+          }
+        ),
+        debouncedTableData.normalizedData && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: copyJsonToClipboard,
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(FileJson, { className: "h-4 w-4 text-blue-500" }),
+              /* @__PURE__ */ jsx("span", { children: "Copy as JSON" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: downloadCSV,
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(FileSpreadsheet, { className: "h-4 w-4 text-orange-500" }),
+              /* @__PURE__ */ jsx("span", { children: "Download as CSV" })
+            ]
+          }
+        ),
+        content && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: downloadMarkdown,
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(FileDown, { className: "h-4 w-4 text-indigo-500" }),
+              /* @__PURE__ */ jsx("span", { children: "Download as Markdown" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    editMode !== "none" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Save, {}),
+          variant: "outline",
+          onClick: () => handleSave(notifyContentChange),
+          className: "flex",
+          children: "Save"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(X, {}),
+          variant: "outline",
+          onClick: handleCancel,
+          className: "flex",
+          children: "Cancel"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Edit, {}),
+        variant: "outline",
+        onClick: () => toggleGlobalEditMode(notifyContentChange),
+        className: "flex",
+        children: "Edit"
+      }
+    )
+  ] });
+};
+const MarkdownTable = ({
+  data,
+  className = "",
+  fontSize = 16,
+  theme = "professional",
+  onSave = () => {
+  },
+  content = "",
+  onContentChange
+}) => {
+  const [tableData, setTableData] = useState({
+    headers: [],
+    rows: [],
+    normalizedData: data?.normalizedData
+  });
+  const [showNormalized, setShowNormalized] = useState(false);
+  const [editMode, setEditMode] = useState("none");
+  const tableFontsize = fontSize;
+  const toast = useToastManager();
+  const tableTheme = THEMES[theme]?.table || THEMES.professional.table;
+  useEffect(() => {
+    if (data) {
+      setTableData({
+        headers: data.headers,
+        rows: data.rows,
+        normalizedData: data.normalizedData
+      });
+    }
+  }, [data]);
+  const renderMarkdown = (text) => /* @__PURE__ */ jsx(RichContent, { level: "inline", source: text, isStreaming: false, gfmCell: true });
+  const toggleGlobalEditMode = useCallback(
+    (notifyContentChange) => {
+      if (editMode !== "none") {
+        if (!notifyContentChange()) return;
+        onSave(tableData);
+        setEditMode("none");
+        toast.info("Edit mode deactivated");
+      } else {
+        setEditMode("header");
+        toast.info("Edit mode activated");
+      }
+    },
+    [editMode, onSave, tableData, toast]
+  );
+  const handleHeaderChange = useCallback(
+    (index, value) => {
+      const newHeaders = [...tableData.headers];
+      newHeaders[index] = value;
+      setTableData({ ...tableData, headers: newHeaders });
+    },
+    [tableData]
+  );
+  const handleCellChange = useCallback(
+    (rowIndex, colIndex, value) => {
+      const newRows = [...tableData.rows];
+      newRows[rowIndex][colIndex] = value;
+      setTableData({ ...tableData, rows: newRows });
+    },
+    [tableData]
+  );
+  const handleRowClick = useCallback(
+    (rowIndex) => {
+      if (editMode === "none") return;
+      onSave(tableData);
+      setEditMode(rowIndex);
+    },
+    [editMode, onSave, tableData]
+  );
+  const handleHeaderClick = useCallback(() => {
+    if (editMode === "none") return;
+    onSave(tableData);
+    setEditMode("header");
+  }, [editMode, onSave, tableData]);
+  const handleSave = useCallback(
+    (notifyContentChange) => {
+      if (!notifyContentChange()) return;
+      onSave(tableData);
+      setEditMode("none");
+      toast.success("Table data saved");
+    },
+    [onSave, tableData, toast]
+  );
+  const handleCancel = useCallback(() => {
+    if (data) {
+      setTableData({
+        headers: data.headers,
+        rows: data.rows,
+        normalizedData: data.normalizedData
+      });
+    }
+    setEditMode("none");
+    toast.info("Edits cancelled");
+  }, [data, toast]);
+  const openSaveToTable = useOpenSaveToTable();
+  const onSaveAsTable = useCallback(() => {
+    openSaveToTable?.({ grid: { headers: tableData.headers, rows: tableData.rows } });
+  }, [openSaveToTable, tableData.headers, tableData.rows]);
+  const isEditingEnabled = editMode !== "none";
+  const isEditingHeader = editMode === "header";
+  const editingBorderStyle = "overflow-x-auto rounded-xl border-3 border-dashed border-red-500 rounded-xl";
+  const normalBorderStyle = `overflow-x-auto rounded-xl border-3 ${tableTheme.border}`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    showNormalized && tableData.normalizedData ? /* @__PURE__ */ jsxs("div", { className: "relative p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("pre", { className: "text-sm overflow-auto", children: JSON.stringify(tableData.normalizedData, null, 2) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Eye, {}),
+          variant: "outline",
+          onClick: () => setShowNormalized(false),
+          className: "absolute top-2 right-2 flex",
+          children: "View Table"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isEditingEnabled ? editingBorderStyle : normalBorderStyle,
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: "w-full border-collapse",
+            style: { fontSize: `${tableFontsize}px` },
+            children: [
+              /* @__PURE__ */ jsx("thead", { className: tableTheme.header, children: /* @__PURE__ */ jsx("tr", { onClick: handleHeaderClick, children: tableData.headers.map((header, i) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: cn("p-2 text-left", tableTheme.headerText),
+                  children: isEditingHeader ? /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: header,
+                      onChange: (e) => handleHeaderChange(i, e.target.value),
+                      className: cn(
+                        "w-full bg-transparent outline-none border border-dashed border-blue-300 p-1",
+                        tableTheme.headerText
+                      ),
+                      onClick: (e) => e.stopPropagation()
+                    }
+                  ) : renderMarkdown(header)
+                },
+                i
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: tableData.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  className: cn(
+                    "border-t",
+                    tableTheme.row,
+                    editMode === rowIndex && "bg-blue-50 dark:bg-blue-900/20"
+                  ),
+                  onClick: () => handleRowClick(rowIndex),
+                  children: row.map((cell, colIndex) => /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn("p-2", colIndex === 0 && "font-semibold"),
+                      children: editMode === rowIndex ? /* @__PURE__ */ jsx(
+                        "textarea",
+                        {
+                          value: cell,
+                          onChange: (e) => handleCellChange(rowIndex, colIndex, e.target.value),
+                          className: cn(
+                            "w-full bg-transparent outline-none border border-dashed border-blue-300 p-1",
+                            "resize-y min-h-[8rem]",
+                            colIndex === 0 && "font-semibold"
+                          ),
+                          onClick: (e) => e.stopPropagation(),
+                          onFocus: (e) => e.target.select()
+                        }
+                      ) : renderMarkdown(cell)
+                    },
+                    colIndex
+                  ))
+                },
+                rowIndex
+              )) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TableControls,
+      {
+        tableData,
+        content,
+        showNormalized,
+        setShowNormalized,
+        editMode,
+        onSaveAsTable: openSaveToTable ? onSaveAsTable : null,
+        onSave,
+        onContentChange,
+        toggleGlobalEditMode,
+        handleSave,
+        handleCancel
+      }
+    )
+  ] });
+};
+var TableWithSeparatedControls_default = MarkdownTable;
+export {
+  TableWithSeparatedControls_default as default
+};

package/dist/display/tables/ViewTableModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TableInfo {
+    table_id: string;
+    table_name: string;
+    row_count: string;
+    field_count: string;
+}
+interface ViewTableModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tableInfo: TableInfo;
+}
+declare const ViewTableModal: React.FC<ViewTableModalProps>;
+export default ViewTableModal;

package/dist/display/tables/ViewTableModal.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@ai-matrx/design-system";
+import { Button } from "@ai-matrx/design-system/controls";
+import { ExternalLink } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { LocatedTableViewer } from "../../host/app-bindings.js";
+const ViewTableModal = ({
+  isOpen,
+  onClose,
+  tableInfo
+}) => {
+  const handleOpenInNewTab = () => {
+    if (tableInfo?.table_id) {
+      window.open(`/data/${tableInfo.table_id}`, "_blank");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: cn(
+        "bg-textured text-gray-900 dark:text-gray-100 overflow-hidden",
+        "max-w-[95vw] w-[95vw] h-[90dvh] p-3 border-3 border-gray-200 dark:border-gray-700 rounded-3xl"
+      ), children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "flex flex-row items-center justify-between mb-1", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "text-xl font-semibold", children: [
+          "This table has ",
+          tableInfo.row_count,
+          " rows and ",
+          tableInfo.field_count,
+          " fields per row."
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "py-0", children: /* @__PURE__ */ jsx("div", { className: "h-[calc(85dvh-140px)] overflow-auto border-border rounded-lg bg-textured", children: /* @__PURE__ */ jsx(LocatedTableViewer, { tableId: tableInfo.table_id }) }) }),
+        /* @__PURE__ */ jsx(DialogFooter, { className: "flex items-center gap-2 mt-2 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end w-full gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              onClick: handleOpenInNewTab,
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 mr-2" }),
+                "Open in New Tab"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              onClick: onClose,
+              children: "Done"
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+var ViewTableModal_default = ViewTableModal;
+export {
+  ViewTableModal_default as default
+};

package/dist/display/tables/editing/ColumnActionsMenu.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface ColumnActionsMenuProps {
+    onInsertBefore: () => void;
+    onInsertAfter: () => void;
+    onDuplicate: () => void;
+    onClear: () => void;
+    onDelete: () => void;
+}
+/**
+ * Tiny per-column action menu. Stays invisible until the parent header cell
+ * is hovered (relies on a `group/col` class on the <th>). The trigger and
+ * items all stop event propagation so they don't trigger the header row's
+ * onClick handler (which would otherwise switch to header-edit mode).
+ */
+export declare const ColumnActionsMenu: React.FC<ColumnActionsMenuProps>;
+export {};