misssing commit

src/apps/chat/components/message/RenderMarkdown.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { CSVDownload, CSVLink } from 'react-csv';
+
 import { Box, Button, styled } from '@mui/joy';
 
 import { lineHeightChatText } from '~/common/app.theme';
@@ -8,34 +10,6 @@ import type { TextBlock } from './blocks';
 
 import DownloadIcon from '@mui/icons-material/Download';
 
-const extractMarkdownTables = (input: string): string[][][] => {
-  // Split the input into sections based on lines that start and end with pipes, which might indicate tables
-  const potentialTables = input.split('\n\n').filter((section) => section.includes('|'));
-  const tables: string[][][] = [];
-
-  potentialTables.forEach((section) => {
-    // Split the section into rows and filter out non-table rows and header separators
-    const rows = section.split('\n').filter((row) => {
-      return row.trim().startsWith('|') && row.trim().endsWith('|') && !row.trim().match(/^\|[-:| ]+\|$/);
-    });
-
-    if (rows.length > 0) {
-      // Process each row to split into cells, trimming whitespace
-      const tableData = rows.map(
-        (row) =>
-          row
-            .split('|')
-            .slice(1, -1)
-            .map((cell) => cell.trim()), // Remove the first and last empty cells resulting from split
-      );
-
-      tables.push(tableData);
-    }
-  });
-
-  return tables;
-};
-
 /*
  * For performance reasons, we style this component here and copy the equivalent of 'props.sx' (the lineHeight) locally.
  */
@@ -61,20 +35,63 @@ const DynamicReactGFM = React.lazy(async () => {
   // NOTE: extracted here instead of inline as a large performance optimization
   const remarkPlugins = [remarkGfmModule.default];
 
+  //Extracts table data from jsx element in table renderer
+  const extractTableData = (children: React.JSX.Element) => {
+    // Function to extract text from a React element or component
+    const extractText = (element: any): String => {
+      // Base case: if the element is a string, return it
+      if (typeof element === 'string') {
+        return element;
+      }
+      // If the element has children, recursively extract text from them
+      if (element.props && element.props.children) {
+        if (Array.isArray(element.props.children)) {
+          return element.props.children.map(extractText).join('');
+        }
+        return extractText(element.props.children);
+      }
+      return '';
+    };
+
+    // Function to traverse and extract data from table rows and cells
+    const traverseAndExtract = (elements: any, tableData: any[] = []) => {
+      React.Children.forEach(elements, (element) => {
+        if (element.type === 'tr') {
+          const rowData = React.Children.map(element.props.children, (cell) => {
+            // Extract and return the text content of each cell
+            return extractText(cell);
+          });
+          tableData.push(rowData);
+        } else if (element.props && element.props.children) {
+          traverseAndExtract(element.props.children, tableData);
+        }
+      });
+      return tableData;
+    };
+
+    return traverseAndExtract(children);
+  };
+
   interface TableRendererProps {
     children: React.JSX.Element;
   }
   // Define a custom table renderer
   const TableRenderer = ({ children, ...props }: TableRendererProps) => {
     // Apply custom styles or modifications here
+    const tableData = extractTableData(children);
+
     return (
-      <table style={{ borderCollapse: 'collapse', width: '100%' }} {...props}>
-        {children}
-        <Button variant="outlined">
-          <DownloadIcon />
-          {'Download table as .csv '}
-        </Button>
-      </table>
+      <>
+        <table style={{ borderCollapse: 'collapse', width: '100%' }} {...props}>
+          {children}
+        </table>
+        <CSVLink filename='big-agi-export' data={tableData}>
+          <Button variant="outlined">
+            <DownloadIcon />
+            {'Download table as .csv '}
+          </Button>
+        </CSVLink>
+      </>
     );
   };
 
@@ -96,7 +113,6 @@ const DynamicReactGFM = React.lazy(async () => {
 });
 
 export const RenderMarkdown = (props: { textBlock: TextBlock }) => {
-  extractMarkdownTables(props.textBlock.content);
   return (
     <RenderMarkdownBox className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */ >
       <React.Suspense fallback={<div>Loading...</div>}>