@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/display/tables/MarkdownTable.js

@@ -0,0 +1,769 @@
+"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,
+  useMemo,
+  useRef
+} from "react";
+import { useIsMobile } from "@ai-matrx/kit/media-query";
+import { cn } from "@ai-matrx/design-system";
+import { RichContent } from "../../levels/RichContent.js";
+import { Button } from "@ai-matrx/design-system";
+import {
+  Download,
+  Eye,
+  Edit,
+  Save,
+  X,
+  FileJson,
+  FileText,
+  FileSpreadsheet,
+  FileDown,
+  ChevronDown
+} 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 { TableEditToolbar } from "./editing/TableEditToolbar.js";
+import { RowActionsMenu } from "./editing/RowActionsMenu.js";
+import { ColumnActionsMenu } from "./editing/ColumnActionsMenu.js";
+import { useTableUndo } from "./editing/useTableUndo.js";
+import { useDoubleClickEdit } from "./editing/useDoubleClickEdit.js";
+import { useSpecimenMode } from "../specimen/SpecimenContext.js";
+import { MarkdownTableScrollArea } from "./MarkdownTableScrollArea.js";
+import { ChartThisButton, TableChartPanel } from "../blocks/chart/TableChart.js";
+import { tableActionRowClass, useTableActionTitles } from "./table-action-row.js";
+import { TableSaveToMenu } from "./TableSaveToMenu.js";
+import { phoneStackCellProps, useTableViewer } from "./table-viewer.js";
+import {
+  appendRow,
+  appendColumn,
+  clearAllContents,
+  insertRowAbove,
+  insertRowBelow,
+  removeRow,
+  clearRow,
+  duplicateRow,
+  insertColumnBefore,
+  insertColumnAfter,
+  removeColumn,
+  clearColumn,
+  duplicateColumn
+} from "./editing/tableMutations.js";
+const ExportDropdownMenu = ({
+  tableData,
+  content,
+  copyTableToClipboard,
+  copyMarkdownToClipboard,
+  copyJsonToClipboard,
+  downloadCSV,
+  downloadMarkdown,
+  isStreamActive = false
+}) => {
+  const [isDataStable, setIsDataStable] = useState(false);
+  const stabilityTimerRef = useRef(null);
+  const stableTableData = useMemo(
+    () => ({
+      headers: tableData.headers,
+      rows: tableData.rows,
+      normalizedData: tableData.normalizedData
+    }),
+    [
+      JSON.stringify(tableData.headers),
+      JSON.stringify(tableData.rows),
+      JSON.stringify(tableData.normalizedData)
+    ]
+  );
+  useEffect(() => {
+    if (isStreamActive) {
+      setIsDataStable(false);
+      if (stabilityTimerRef.current) {
+        clearTimeout(stabilityTimerRef.current);
+        stabilityTimerRef.current = null;
+      }
+      return void 0;
+    }
+    if (stabilityTimerRef.current) {
+      clearTimeout(stabilityTimerRef.current);
+    }
+    setIsDataStable(false);
+    stabilityTimerRef.current = setTimeout(() => {
+      setIsDataStable(true);
+    }, 1e3);
+    return () => {
+      if (stabilityTimerRef.current) {
+        clearTimeout(stabilityTimerRef.current);
+      }
+    };
+  }, [stableTableData, content, isStreamActive]);
+  if (isStreamActive || !isDataStable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+        children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+          "Export",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 ml-1" })
+        ]
+      }
+    ) }),
+    /* @__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" })
+          ]
+        }
+      ),
+      tableData.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" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const MarkdownTable = ({
+  data,
+  className = "",
+  fontSize = 14,
+  theme = "professional",
+  onSave = () => {
+  },
+  content = "",
+  onContentChange,
+  isStreamActive = false
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? copyToast.error(message) : copyToast.success(message)
+  });
+  const isMobile = useIsMobile();
+  const { canWrite } = useTableViewer();
+  const specimenMode = useSpecimenMode();
+  const tableData = useMemo(() => {
+    if (!data) {
+      return {
+        headers: [],
+        rows: [],
+        normalizedData: void 0
+      };
+    }
+    return {
+      headers: data.headers || [],
+      rows: data.rows || [],
+      normalizedData: data.normalizedData
+    };
+  }, [
+    JSON.stringify(data?.headers || []),
+    JSON.stringify(data?.rows || []),
+    JSON.stringify(data?.normalizedData || [])
+  ]);
+  const [internalTableData, setInternalTableData] = useState(tableData);
+  const [showNormalized, setShowNormalized] = useState(false);
+  const [editMode, setEditMode] = useState("none");
+  const tableFontsize = fontSize;
+  const toast = useToastManager();
+  const tableTheme = THEMES[theme]?.table || THEMES.professional.table;
+  const [showChart, setShowChart] = useState(false);
+  const actionRowRef = useTableActionTitles();
+  const previousDataRef = useRef("");
+  useEffect(() => {
+    setInternalTableData(tableData);
+  }, [tableData]);
+  useEffect(() => {
+    if (data) {
+      const dataHash = JSON.stringify({
+        headers: data.headers || [],
+        rows: data.rows || [],
+        normalizedData: data.normalizedData
+      });
+      if (dataHash !== previousDataRef.current) {
+        previousDataRef.current = dataHash;
+        setInternalTableData({
+          headers: data.headers || [],
+          rows: data.rows || [],
+          normalizedData: data.normalizedData
+        });
+      }
+    }
+  }, [data]);
+  const generateMarkdownTable = () => rewriteTableSource(content, { headers: internalTableData.headers, rows: internalTableData.rows });
+  const notifyContentChange = () => {
+    if (onContentChange && content) {
+      try {
+        onContentChange(generateMarkdownTable());
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : String(error));
+        return false;
+      }
+    }
+    return true;
+  };
+  const copyTableToClipboard = 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");
+    }
+  };
+  const copyJsonToClipboard = async () => {
+    try {
+      await copyText(
+        JSON.stringify(internalTableData.normalizedData, null, 2)
+      );
+      toast.success("JSON copied to clipboard");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy JSON");
+    }
+  };
+  const copyMarkdownToClipboard = 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");
+    }
+  };
+  const downloadCSV = () => {
+    try {
+      const csvContent = [
+        internalTableData.headers.map((h) => h.replace(/"/g, '""')).join(","),
+        ...internalTableData.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");
+    }
+  };
+  const downloadMarkdown = () => {
+    try {
+      const markdownContent = content || "";
+      const fileName = internalTableData.headers && internalTableData.headers[0] ? `${internalTableData.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");
+    }
+  };
+  const toggleGlobalEditMode = () => {
+    if (editMode !== "none") {
+      if (!notifyContentChange()) return;
+      onSave(internalTableData);
+      setEditMode("none");
+      toast.info("Edit mode deactivated");
+    } else {
+      setEditMode("header");
+      toast.info("Edit mode activated");
+    }
+  };
+  const handleHeaderChange = (index, value) => {
+    const newHeaders = [...internalTableData.headers];
+    newHeaders[index] = value;
+    setInternalTableData({ ...internalTableData, headers: newHeaders });
+  };
+  const handleCellChange = (rowIndex, colIndex, value) => {
+    const newRows = internalTableData.rows.map(
+      (row, i) => i === rowIndex ? row.map((cell, j) => j === colIndex ? value : cell) : row
+    );
+    setInternalTableData({ ...internalTableData, rows: newRows });
+  };
+  const handleRowClick = (rowIndex) => {
+    if (editMode === "none") return;
+    onSave(internalTableData);
+    setEditMode(rowIndex);
+  };
+  const handleHeaderClick = () => {
+    if (editMode === "none") return;
+    onSave(internalTableData);
+    setEditMode("header");
+  };
+  const handleSave = () => {
+    if (!notifyContentChange()) return;
+    onSave(internalTableData);
+    setEditMode("none");
+    toast.success("Table data saved");
+  };
+  const handleCancel = () => {
+    if (data) {
+      setInternalTableData({
+        headers: data.headers || [],
+        rows: data.rows || [],
+        normalizedData: data.normalizedData
+      });
+    }
+    setEditMode("none");
+    toast.info("Edits cancelled");
+  };
+  const undo = useTableUndo();
+  const applyMutation = (mutator) => {
+    const next = mutator(internalTableData);
+    setInternalTableData({
+      headers: next.headers,
+      rows: next.rows,
+      normalizedData: next.normalizedData
+    });
+  };
+  const undoLast = () => {
+    const prev = undo.consume();
+    if (prev) {
+      setInternalTableData(prev);
+      toast.info("Undone");
+    }
+  };
+  const undoToastAction = {
+    label: "Undo",
+    onClick: undoLast,
+    className: "font-medium"
+  };
+  const handleAppendRow = () => {
+    applyMutation(appendRow);
+    toast.success("Row added");
+  };
+  const handleInsertRowAbove = (rowIndex) => {
+    applyMutation((t) => insertRowAbove(t, rowIndex));
+    toast.success("Row inserted above");
+  };
+  const handleInsertRowBelow = (rowIndex) => {
+    applyMutation((t) => insertRowBelow(t, rowIndex));
+    toast.success("Row inserted below");
+  };
+  const handleDuplicateRow = (rowIndex) => {
+    applyMutation((t) => duplicateRow(t, rowIndex));
+    toast.success("Row duplicated");
+  };
+  const handleClearRow = (rowIndex) => {
+    undo.snapshot(internalTableData);
+    applyMutation((t) => clearRow(t, rowIndex));
+    toast.success("Row cleared", { action: undoToastAction });
+  };
+  const handleDeleteRow = (rowIndex) => {
+    undo.snapshot(internalTableData);
+    applyMutation((t) => removeRow(t, rowIndex));
+    if (editMode === rowIndex) {
+      setEditMode("header");
+    }
+    toast.success("Row deleted", { action: undoToastAction });
+  };
+  const handleClearAllContents = () => {
+    if (internalTableData.rows.length === 0 || internalTableData.headers.length <= 1) {
+      return;
+    }
+    undo.snapshot(internalTableData);
+    applyMutation(clearAllContents);
+    toast.success("Cleared all contents (kept first column)", {
+      action: undoToastAction
+    });
+  };
+  const handleAppendColumn = () => {
+    applyMutation((t) => appendColumn(t));
+    toast.success("Column added");
+  };
+  const handleInsertColumnBefore = (colIndex) => {
+    applyMutation((t) => insertColumnBefore(t, colIndex));
+    toast.success("Column inserted before");
+  };
+  const handleInsertColumnAfter = (colIndex) => {
+    applyMutation((t) => insertColumnAfter(t, colIndex));
+    toast.success("Column inserted after");
+  };
+  const handleDuplicateColumn = (colIndex) => {
+    applyMutation((t) => duplicateColumn(t, colIndex));
+    toast.success("Column duplicated");
+  };
+  const handleClearColumn = (colIndex) => {
+    undo.snapshot(internalTableData);
+    applyMutation((t) => clearColumn(t, colIndex));
+    toast.success("Column cleared", { action: undoToastAction });
+  };
+  const handleDeleteColumn = (colIndex) => {
+    undo.snapshot(internalTableData);
+    applyMutation((t) => removeColumn(t, colIndex));
+    toast.success("Column deleted", { action: undoToastAction });
+  };
+  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}`;
+  const canEnterEditMode = !isStreamActive && !specimenMode;
+  const { handleTableDoubleClick, bindCellTextareaRef } = useDoubleClickEdit({
+    canEnterEditMode,
+    editMode,
+    setEditMode
+  });
+  const phoneStack = !isEditingEnabled;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    showNormalized && internalTableData.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(internalTableData.normalizedData, null, 2) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowNormalized(false),
+          className: "absolute top-2 right-2 opacity-90 hover:opacity-100 flex items-center gap-1 shadow-md",
+          children: [
+            /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+            "View Table"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      MarkdownTableScrollArea,
+      {
+        className: cn(
+          isEditingEnabled ? editingBorderStyle : normalBorderStyle,
+          isMobile && "-mx-1",
+          phoneStack && "phone-stack"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cn(
+              "border-collapse",
+              isMobile && !phoneStack ? "min-w-max w-full" : "w-full"
+            ),
+            style: { fontSize: `${tableFontsize}px` },
+            onDoubleClick: canWrite ? handleTableDoubleClick : void 0,
+            children: [
+              /* @__PURE__ */ jsx("thead", { className: tableTheme.header, children: /* @__PURE__ */ jsxs("tr", { onClick: handleHeaderClick, children: [
+                isEditingEnabled && /* @__PURE__ */ jsx("th", { className: "w-5 p-0", "aria-hidden": "true" }),
+                internalTableData.headers.map((header, i) => /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    "data-cell": "header",
+                    "data-cell-col": i,
+                    className: cn(
+                      "p-2 text-left",
+                      tableTheme.headerText,
+                      isMobile && "whitespace-nowrap",
+                      isEditingEnabled && "group/col"
+                    ),
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "flex items-center gap-2",
+                          isEditingEnabled && "justify-between"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isEditingHeader ? /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              value: internalTableData.headers[i] || 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()
+                            }
+                          ) : /* @__PURE__ */ jsx(RichContent, { level: "inline", source: header, isStreaming: false, gfmCell: true }) }),
+                          isEditingEnabled && /* @__PURE__ */ jsx(
+                            ColumnActionsMenu,
+                            {
+                              onInsertBefore: () => handleInsertColumnBefore(i),
+                              onInsertAfter: () => handleInsertColumnAfter(i),
+                              onDuplicate: () => handleDuplicateColumn(i),
+                              onClear: () => handleClearColumn(i),
+                              onDelete: () => handleDeleteColumn(i)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  i
+                ))
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: internalTableData.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+                "tr",
+                {
+                  className: cn(
+                    "border-t",
+                    tableTheme.row,
+                    editMode === rowIndex && "bg-blue-50 dark:bg-blue-900/20",
+                    isEditingEnabled && "group/row"
+                  ),
+                  onClick: () => handleRowClick(rowIndex),
+                  children: [
+                    isEditingEnabled && /* @__PURE__ */ jsx("td", { className: "w-5 p-0 text-center align-middle", children: /* @__PURE__ */ jsx(
+                      RowActionsMenu,
+                      {
+                        onInsertAbove: () => handleInsertRowAbove(rowIndex),
+                        onInsertBelow: () => handleInsertRowBelow(rowIndex),
+                        onDuplicate: () => handleDuplicateRow(rowIndex),
+                        onClear: () => handleClearRow(rowIndex),
+                        onDelete: () => handleDeleteRow(rowIndex)
+                      }
+                    ) }),
+                    row.map((cell, colIndex) => /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        "data-cell": "body",
+                        "data-cell-row": rowIndex,
+                        "data-cell-col": colIndex,
+                        ...phoneStack ? phoneStackCellProps(internalTableData.headers, colIndex) : {},
+                        className: cn(
+                          "p-2",
+                          colIndex === 0 && "font-semibold",
+                          isMobile && !phoneStack && "whitespace-nowrap max-w-[200px] overflow-hidden text-ellipsis"
+                        ),
+                        children: editMode === rowIndex ? /* @__PURE__ */ jsx(
+                          "textarea",
+                          {
+                            ref: bindCellTextareaRef(rowIndex, colIndex),
+                            value: internalTableData.rows[rowIndex]?.[colIndex] || 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()
+                          }
+                        ) : /* @__PURE__ */ jsx(RichContent, { level: "inline", source: cell, isStreaming: false, gfmCell: true })
+                      },
+                      colIndex
+                    ))
+                  ]
+                },
+                rowIndex
+              )) })
+            ]
+          }
+        )
+      }
+    ),
+    showChart && !isStreamActive && !specimenMode && /* @__PURE__ */ jsx(
+      TableChartPanel,
+      {
+        table: {
+          headers: internalTableData.headers,
+          rows: internalTableData.rows
+        },
+        onClose: () => setShowChart(false)
+      }
+    ),
+    !isStreamActive && !specimenMode && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: actionRowRef,
+        role: "toolbar",
+        "aria-label": "Table actions",
+        className: tableActionRowClass(isMobile),
+        children: [
+          isEditingEnabled && /* @__PURE__ */ jsx(
+            TableEditToolbar,
+            {
+              onAddRow: handleAppendRow,
+              onAddColumn: handleAppendColumn,
+              onClearAllContents: handleClearAllContents,
+              rowCount: internalTableData.rows.length,
+              colCount: internalTableData.headers.length,
+              className: "contents"
+            }
+          ),
+          !isEditingEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            internalTableData.normalizedData && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => setShowNormalized(!showNormalized),
+                className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+                children: [
+                  /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+                  showNormalized ? "Table" : "Data"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChartThisButton,
+              {
+                table: {
+                  headers: internalTableData.headers,
+                  rows: internalTableData.rows
+                },
+                active: showChart,
+                onToggle: () => setShowChart((v) => !v)
+              }
+            ),
+            canWrite && internalTableData.normalizedData && /* @__PURE__ */ jsx(
+              TableSaveToMenu,
+              {
+                headers: internalTableData.headers,
+                rows: internalTableData.rows
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ExportDropdownMenu,
+              {
+                tableData: internalTableData,
+                content,
+                copyTableToClipboard,
+                copyMarkdownToClipboard,
+                copyJsonToClipboard,
+                downloadCSV,
+                downloadMarkdown,
+                isStreamActive
+              }
+            )
+          ] }),
+          isEditingEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: handleSave,
+                "data-keep-label": "",
+                className: "flex items-center gap-2 border-1 border-dashed border-green-500 rounded-xl",
+                children: [
+                  /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
+                  "Save"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: handleCancel,
+                "data-keep-label": "",
+                className: "flex items-center gap-2 border-1 border-dashed border-red-500 rounded-xl",
+                children: [
+                  /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                  "Cancel"
+                ]
+              }
+            )
+          ] }) : canWrite ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: toggleGlobalEditMode,
+              className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+              children: [
+                /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }),
+                "Edit"
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+var MarkdownTable_default = MarkdownTable;
+export {
+  MarkdownTable_default as default
+};