@peak-ai/canvas 1.3.15 → 1.3.16

package/src/plugins/helpers/render-components.tsx

@@ -0,0 +1,1103 @@
+/* eslint-disable func-style */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable func-names */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import chroma from 'chroma-js';
+import React, { useEffect, useState, JSX, useRef, Fragment } from 'react';
+
+import { theme } from '@peak-ai/ais-components/theme';
+
+import Markdown from 'markdown-to-jsx';
+
+import {
+  PieChart,
+  Pie,
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  ResponsiveContainer,
+  CartesianGrid,
+  Legend,
+} from 'recharts';
+
+import { TooltipButton } from '../../shadcn/components/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../../shadcn/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../shadcn/components/ui/chart';
+import { renderFilter } from '../../shadcn/components/ui/filter';
+import { renderDateFilter } from '../../shadcn/components/ui/date-filter';
+import {
+  Pagination,
+  PaginationContent,
+  renderPaginationArrows,
+} from '../../shadcn/components/ui/pagination';
+import { ScrollArea, ScrollBar } from '../../shadcn/components/ui/scroll-area';
+import { renderSearch } from '../../shadcn/components/ui/search';
+import { TableLoader, ChartLoader, CardLoader } from '../../shadcn/components/ui/skeleton';
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableHeadSortable,
+  TableBody,
+  TableCell,
+  SortDirection,
+} from '../../shadcn/components/ui/table';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../shadcn/components/ui/tabs';
+
+import { cn } from '../../shadcn/utils';
+import { getAffectedComponentsWithLoader } from '../../helpers';
+
+const baseColors = [
+  [theme.colors.Blue_100, theme.colors.Blue_30],
+  [theme.colors.Purpley_100, theme.colors.Purpley_30],
+  [theme.colors.Light_Bluish_Green, '#06601b'],
+  [theme.colors.Wild_Strawberry, '#4d001c'],
+];
+
+function getNColors(n: number) {
+  const colors: Array<string[]> = [];
+
+  for (const baseColor of baseColors) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    colors.push(chroma.scale(baseColor).mode('lab').colors(n));
+  }
+
+  function getOneColor(existing: Array<string>) {
+    let color: null | string = null;
+
+    do {
+      const base = colors[Math.floor(Math.random() * colors.length)];
+      const selectedColorIndex = Math.floor(Math.random() * base.length);
+      color = base[selectedColorIndex];
+    } while (existing.includes(color));
+
+    return color as string;
+  }
+
+  const selectedColors: Array<string> = [];
+
+  for (let i = 0; i < n; i++) {
+    selectedColors.push(getOneColor(selectedColors));
+  }
+
+  return selectedColors;
+}
+
+/* TODO: Loader remains */
+export function renderActionCard(props: any): JSX.Element {
+  const { gjsModel, ...rest } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const {
+    headerContent = 'Default Action Card Title',
+    icon,
+    bodyContent = 'Default body content. Click to edit.',
+  } = allData;
+
+  const [, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  const defaultClasses = 'bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full';
+
+  return (
+    <Card className={defaultClasses} isEditable={false} contentEditable={false} {...rest}>
+      <CardContent className="p-0" isEditable={false} contentEditable={false}>
+        <div className="px-4 py-3">
+          <div className="flex items-start">
+            <span className="text-5xl mr-2" aria-hidden="true">
+              {icon}
+            </span>
+            <div className="flex-1">
+              <div className="text-xl font-semibold">{headerContent}</div>
+              <div className="text-base leading-relaxed mt-1">{bodyContent}</div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function renderCard(props: any): JSX.Element {
+  const { isEditable = false, gjsModel, ...rest } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const {
+    headerContent,
+    headerDescription,
+    bodyContent,
+    footerContent,
+    footerClass,
+    footerIcon,
+    contentMetadata,
+    contentMetadataClass,
+    className,
+  } = allData;
+
+  const [attributes, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  const defaultClasses = 'bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full';
+  const defaultFooterClasses = 'text-sm';
+  const defaultContentMetadataClasses = 'text-xs';
+  const mergedCardClassName = className ? cn(defaultClasses, className) : defaultClasses;
+  const mergedFooterClassName = footerClass
+    ? cn(defaultFooterClasses, footerClass)
+    : defaultFooterClasses;
+  const mergedContentMetadataClassName = contentMetadataClass
+    ? cn(defaultContentMetadataClasses, contentMetadataClass)
+    : defaultContentMetadataClasses;
+
+  function getCardContent() {
+    if (attributes.interactionApiInProgress) {
+      return (
+        <CardContent>
+          <CardLoader />
+        </CardContent>
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <CardHeader>
+          <CardTitle data-slot="headerContent" contentEditable={isEditable} className="text-lg">
+            {headerContent}
+          </CardTitle>
+          <CardDescription
+            data-slot="headerDescription"
+            contentEditable={isEditable}
+            className="text-sm"
+          >
+            {headerDescription}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent data-slot="bodyContent" contentEditable={false} className="flex-grow">
+          <div className="text-3xl font-semibold truncate">{bodyContent}</div>
+          {contentMetadata && (
+            <div className={mergedContentMetadataClassName} style={{ color: '#2A44D4' }}>
+              {contentMetadata}
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter
+          data-slot="footerContent"
+          contentEditable={isEditable}
+          className={cn(mergedFooterClassName)}
+        >
+          {footerIcon && (
+            <span className="mr-2" aria-hidden="true">
+              {footerIcon}
+            </span>
+          )}
+          {footerContent}
+        </CardFooter>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Card {...rest} className={mergedCardClassName}>
+      {getCardContent()}
+    </Card>
+  );
+}
+
+function renderChartComponent(chartType: string, data: any, config: any): JSX.Element {
+  switch (chartType) {
+    case 'pie':
+      return (
+        <PieChart>
+          {data.length >= 20 && (
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          )}
+          <Pie
+            data={data}
+            dataKey={config.dataKey}
+            nameKey={config.nameKey}
+            innerRadius={60}
+            strokeWidth={10}
+            label={
+              data.length < 20
+                ? ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`
+                : undefined
+            }
+            labelLine={false}
+          />
+        </PieChart>
+      );
+    case 'bar':
+      config.dataKeys = config.dataKeys || [];
+
+      return (
+        <BarChart data={data} {...config.chartUi}>
+          <CartesianGrid vertical={false} />
+          <XAxis dataKey={config.xAxis} />
+          <YAxis />
+          <Legend align="left" wrapperStyle={{ marginLeft: 20 }} />
+          {config.dataKeys.map(
+            ({ key, name, color }: { key: string; name: string; color: string }) => {
+              return (
+                <Bar dataKey={key} fill={color ?? '#4caf50'} name={name} key={key} radius={2} />
+              );
+            },
+          )}
+          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+        </BarChart>
+      );
+    case 'line':
+      config.dataKeys = config.dataKeys || [];
+
+      return (
+        <LineChart data={data}>
+          <CartesianGrid vertical={false} />
+          <XAxis dataKey={config.xAxis} />
+          <YAxis />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+          {config.dataKeys.map(
+            ({ key, name, color }: { key: string; name: string; color: string }) => {
+              return (
+                <Line
+                  type="monotone"
+                  dataKey={key}
+                  stroke={color ?? '#4caf50'}
+                  name={name}
+                  key={key}
+                />
+              );
+            },
+          )}
+          <Legend align="left" />
+        </LineChart>
+      );
+    default:
+      return (
+        <PieChart>
+          {data.length >= 20 && (
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          )}
+          <Pie
+            data={data}
+            dataKey={config.dataKey}
+            nameKey={config.nameKey}
+            innerRadius={60}
+            strokeWidth={10}
+            label={
+              data.length < 20
+                ? ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`
+                : undefined
+            }
+            labelLine={false}
+          />
+        </PieChart>
+      );
+  }
+}
+
+export function renderChart(props: any): JSX.Element {
+  const { isEditable = false, gjsModel, ...rest } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const [attributes, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth);
+      }
+    };
+
+    updateContainerWidth();
+    window.addEventListener('resize', updateContainerWidth);
+    
+    return () => window.removeEventListener('resize', updateContainerWidth);
+  }, []);
+
+  const {
+    config = {},
+    chartType = 'pie',
+    chartData = [],
+    className,
+    title = 'Title',
+    subTitle = 'Subtitle',
+  } = allData;
+
+  const defaultClasses = 'aspect-auto h-[250px] w-full';
+  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
+
+  if (chartType === 'pie') {
+    const colors = getNColors(chartData.length);
+
+    for (let i = 0; i < chartData.length; i++) {
+      const data = chartData[i];
+
+      if (!data.fill) {
+        data.fill = colors[i];
+      }
+    }
+  } else if (!config.color) {
+    config.color = baseColors[Math.floor(Math.random() * baseColors.length)];
+  }
+
+  let width: number | undefined = undefined;
+  let totalDataPoints = 0;
+
+  // Helper function to get responsive config
+  const getResponsiveConfig = () => {
+    if (chartType === 'bar' && totalDataPoints > 15 && containerWidth > 0 && width && width <= containerWidth) {
+      // If chart fits in container, use responsive behavior
+      return { ...config, chartUi: {} };
+    }
+    
+    return config;
+  };
+
+  if (chartType === 'bar') {
+    totalDataPoints = chartData.length * config.dataKeys.length;
+    
+    if (totalDataPoints > 15) {
+      width =
+        totalDataPoints * 20 +
+        config.dataKeys.length * 8 * chartData.length +
+        chartData.length * 15;
+      config.chartUi = {
+        barCategoryGap: '10%',
+        width,
+      };
+    } else {
+      config.chartUi = {};
+    }
+  }
+
+  const chartUi = attributes.interactionApiInProgress ? (
+    <ChartLoader />
+  ) : (
+    <React.Fragment>
+      {chartType === 'bar' && totalDataPoints > 15 && config.chartUi && width && (containerWidth === 0 || width > containerWidth) ? (
+        <div className="w-full">
+          <ScrollArea className="w-full">
+            <div style={{ minWidth: `${width}px`, width: 'max-content' }}>
+              <ResponsiveContainer width={width} height={250}>
+                <ChartContainer {...rest} config={config} className={mergedClasses}>
+                  {renderChartComponent(chartType, chartData, config)}
+                </ChartContainer>
+              </ResponsiveContainer>
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={250}>
+          <ChartContainer {...rest} config={getResponsiveConfig()} className={mergedClasses}>
+            {renderChartComponent(chartType, chartData, getResponsiveConfig())}
+          </ChartContainer>
+        </ResponsiveContainer>
+      )}
+    </React.Fragment>
+  );
+
+  return (
+    <Card className="shadow border mt-2 mb-2">
+      <CardHeader>
+        <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
+          {title}
+        </CardTitle>
+        <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
+          {subTitle}
+        </CardDescription>
+      </CardHeader>
+      <CardContent ref={containerRef} data-slot="bodyContent" contentEditable={false} className="px-6">
+        {chartUi}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Creating this separate component to manage loading state easily!
+function TableButton(props: any) {
+  const [loading, setLoading] = useState(false);
+
+  async function onClick() {
+    setLoading(true);
+    await props.onClick();
+    setLoading(false);
+  }
+
+  const defaultClasses = 'mr-2';
+  const mergedClasses = props.className ? cn(defaultClasses, props.className) : defaultClasses;
+
+  return (
+    <TooltipButton
+      className={mergedClasses}
+      isEditable={false}
+      interact={onClick}
+      attributes={{
+        interactionApiInProgress: loading,
+        isDisabled: props.isDisabled,
+      }}
+      variant={props.variant}
+      size="sm"
+      text={props.text}
+      tooltipContent={props.tooltipContent}
+    />
+  );
+}
+
+export function renderTable(props: any): JSX.Element {
+  const { gjsModel, performInteraction = () => {}, ...rest } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const {
+    data = [],
+    headerMapper = {},
+    className,
+    isEditable = false,
+    title = 'Title',
+    subTitle = 'Subtitle',
+    actions = [],
+    sortConfig = {},
+    pagination,
+  } = allData;
+
+  const [attributes, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  const [activeSortColumn, setActiveSortColumn] = useState<string | null>(null);
+  const [sortDirections, setSortDirections] = useState<Record<string, SortDirection>>({});
+
+  const [pageNumber, setPageNumber] = useState(
+    Number(pagination?.values?.pageNumber ?? pagination?.initialPage),
+  );
+
+  const [pageSize, setPageSize] = useState(
+    Number(pagination?.values?.pageSize ?? pagination?.initialPageSize),
+  );
+
+  const totalCount = pagination?.totalCount;
+
+  const [totalPages, setTotalPages] = useState(Math.ceil(totalCount / pageSize) || 1);
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    const componentData = gjsModel.get('componentProps');
+    
+    const sortColumn = componentData?.sortColumn;
+    const sortDirection = componentData?.sortDirection;
+    
+    if (sortColumn && sortDirection) {
+      setActiveSortColumn(sortColumn);
+      setSortDirections(prev => ({ ...prev, [sortColumn]: sortDirection }));
+    } else {
+      setActiveSortColumn(null);
+      setSortDirections({});
+    }
+  }, [allData]);
+
+  useEffect(() => {
+    if (sortConfig && Object.keys(sortConfig).length > 0) {
+      setSortDirections(sortConfig);
+
+      const firstSortedColumn = Object.keys(sortConfig)[0];
+
+      if (firstSortedColumn) {
+        setActiveSortColumn(firstSortedColumn);
+      }
+    }
+  }, [sortConfig]);
+
+  const parsedData = data.map((datum: any) => {
+    const newData = {
+      ...datum,
+    };
+
+    delete newData.id;
+
+    return newData;
+  });
+
+  const handleSort = async (column: string, direction: SortDirection) => {
+    if (direction === null) {
+      setActiveSortColumn(null);
+      setSortDirections(prev => ({ ...prev, [column]: null }));
+      
+      const currentProps = gjsModel.get('componentProps');
+      gjsModel.set('componentProps', {
+        ...currentProps,
+        sortColumn: null,
+        sortDirection: null,
+      });
+
+      const id = gjsModel.get('id');
+      await performInteraction({
+        id,
+        interactionType: 'tableSort',
+        payload: {
+          sortColumn: null,
+          sortDirection: null,
+          tableId: id
+        },
+        affectedComponents: getAffectedComponentsWithLoader([id], true),
+      });
+      
+      return;
+    }
+
+    setActiveSortColumn(column);
+    setSortDirections(prev => ({ ...prev, [column]: direction }));
+    
+    const currentProps = gjsModel.get('componentProps');
+    gjsModel.set('componentProps', {
+      ...currentProps,
+      sortColumn: column,
+      sortDirection: direction,
+    });
+    
+    const id = gjsModel.get('id');
+    
+    await performInteraction({
+      id,
+      interactionType: 'tableSort',
+      payload: {
+        sortColumn: column,
+        sortDirection: direction,
+        tableId: id
+      },
+      affectedComponents: getAffectedComponentsWithLoader([id], true),
+    });
+  };
+
+  async function takeRowAction(rowIndex: number, actionId: string) {
+    const id = gjsModel.get('id');
+
+    await performInteraction({
+      id: actionId,
+      interactionType: 'tableButton',
+      payload: {
+        row: data[rowIndex],
+        tableId: id,
+      },
+      affectedComponents: [],
+    });
+  }
+
+  const originalKeys = Object.keys(parsedData[0] || {}).filter((key) => key in headerMapper);
+  const headers = originalKeys.map((key) => headerMapper[key]);
+
+  if (actions.length > 0) {
+    headers.push('');
+    originalKeys.push('');
+  }
+
+  const rows = parsedData.map((datum: any) => originalKeys.map((key) => datum[key]));
+
+  const defaultClasses = 'aspect-auto h-[250px] w-full';
+  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
+
+  function renderActions(rowIndex: number, rowActions: Array<Record<string, any>>) {
+    if (!actions.length) {
+      return null;
+    }
+
+    return (
+      <TableCell className="sticky right-0 bg-white">
+        {rowActions.map((action) => {
+          return (
+            <TableButton
+              className={action.className}
+              isEditable={isEditable}
+              onClick={() => takeRowAction(rowIndex, action.id)}
+              variant={action.variant}
+              key={action.id}
+              text={action.text}
+              tooltipContent={action.tooltipContent}
+            />
+          );
+        })}
+      </TableCell>
+    );
+  }
+
+  const renderTableComponent = attributes.interactionApiInProgress ? (
+    <TableLoader />
+  ) : (
+    <Table
+      {...rest}
+      className={`caption-bottom text-sm relative ${mergedClasses}`}
+      data-slot="table"
+    >
+      <TableHeader data-slot="table-header" className="sticky top-0 z-2">
+        <TableRow>
+          {headers.map((head: string, idx: number) => {
+            const isActionColumn = actions.length > 0 && idx === headers.length - 1;
+            const originalKey = originalKeys[idx];
+            
+            if (isActionColumn) {
+              return (
+                <TableHead
+                  key={idx}
+                  data-slot={`table-header-${idx}`}
+                  contentEditable={isEditable}
+                  className="sticky right-0 bg-slate-100"
+                >
+                  {head}
+                </TableHead>
+              );
+            }
+
+            return (
+              <TableHeadSortable
+                key={idx}
+                data-slot={`table-header-${idx}`}
+                sortDirection={sortDirections[originalKey] || 'asc'}
+                isActive={activeSortColumn === originalKey}
+                onSort={(direction) => handleSort(originalKey, direction)}
+                sortable={true}
+                isEditable={isEditable}
+              >
+                {head}
+              </TableHeadSortable>
+            );
+          })}
+        </TableRow>
+      </TableHeader>
+      <TableBody data-slot="table-body">
+        {rows.map((row: any[], rIdx: number) => (
+          <TableRow
+            key={rIdx}
+            data-slot={`row-${rIdx}`}
+            className="hover:bg-muted/50 border-b transition-colors"
+          >
+            {row.map((cell: string, cIdx: number) => (
+              <TableCell
+                key={cIdx}
+                data-slot={`cell-${rIdx}-${cIdx}`}
+                className="p-2 align-middle whitespace-nowrap"
+                contentEditable={false}
+              >
+                {cell}
+              </TableCell>
+            ))}
+            {renderActions(rIdx, actions)}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+
+  useEffect(() => {
+    setPageNumber(Number(pagination?.values?.pageNumber ?? pagination?.initialPage));
+    setPageSize(Number(pagination?.values?.pageSize ?? pagination?.initialPageSize));
+  }, [pagination]);
+
+  useEffect(() => {
+    setTotalPages(Math.ceil(totalCount / pageSize) || 1);
+  }, [totalCount, pageSize]);
+
+  const pageSizeOptions = pagination?.pageSizeOptions;
+
+  async function handlePageChange(newPage = pageNumber, newSize = pageSize) {
+    const id = gjsModel.get('id');
+    const prevPage = pageNumber;
+    const prevSize = pageSize;
+    setPageNumber(newPage);
+    setPageSize(newSize);
+
+    const componentData = gjsModel.get('componentProps');
+    const currentSortColumn = componentData?.sortColumn;
+    const currentSortDirection = componentData?.sortDirection;
+
+    try {
+      await performInteraction({
+        id,
+        interactionType: 'pagination',
+        payload: {
+          pageNumber: newPage,
+          pageSize: newSize,
+          ...(currentSortColumn && currentSortDirection && {
+            sortColumn: currentSortColumn,
+            sortDirection: currentSortDirection,
+          }),
+        },
+        affectedComponents: getAffectedComponentsWithLoader([id], true),
+      });
+    } catch (error) {
+      setPageNumber(prevPage);
+      setPageSize(prevSize);
+    }
+  }
+
+  const tableData = (
+    <Fragment>
+      <ScrollArea data-slot="table-container" className={mergedClasses}>
+        {renderTableComponent}
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      {(totalCount >= 0) && (
+        <div className="flex items-center justify-between mt-4 w-full">
+          <div className="flex items-center gap-2">
+            <label htmlFor="page-size-select" className="text-sm">
+              Rows per page:
+            </label>
+            <select
+              id="page-size-select"
+              value={pageSize}
+              onChange={(e) => handlePageChange(1, Number(e.target.value))}
+              className="border rounded px-2 py-1 text-sm cursor-pointer"
+              disabled={attributes.interactionApiInProgress}
+            >
+              {pageSizeOptions.map((size: any) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            <span className="text-xs text-muted-foreground whitespace-nowrap">
+              {(pageNumber - 1) * pageSize + 1}–{Math.min(pageNumber * pageSize, totalCount)} of{' '}
+              {totalCount}
+            </span>
+            <Pagination>
+              <PaginationContent className="gap-0.2">
+                {renderPaginationArrows(
+                  pageNumber,
+                  totalPages,
+                  attributes.interactionApiInProgress,
+                  handlePageChange,
+                )}
+              </PaginationContent>
+            </Pagination>
+          </div>
+        </div>
+      )}
+    </Fragment>
+  );
+
+  return (
+    <Card className="shadow border">
+      <CardHeader>
+        <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
+          {title}
+        </CardTitle>
+        <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
+          {subTitle}
+        </CardDescription>
+      </CardHeader>
+      <CardContent data-slot="bodyContent" contentEditable={false}>
+        {tableData}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function renderTab(props: any): JSX.Element {
+  let tabsWidth = 200;
+
+  if (props.tabs.length > 4) {
+    tabsWidth = 150;
+  }
+
+  return (
+    <Tabs defaultValue={props.defaultValue}>
+      <div className="text-center mb-4">
+        <TabsList className="bg-gray-300">
+          {props.tabs.map((tab: string) => (
+            <TabsTrigger value={tab} key={tab} className={`text-md w-[${tabsWidth}px]`}>
+              {tab}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
+      {props.tabs.map((tab: string) => (
+        <TabsContent value={tab} className="tabs-content" key={tab} />
+      ))}
+    </Tabs>
+  );
+}
+
+export function renderMarkdown(props: any): JSX.Element {
+  const { gjsModel, ...rest } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const [, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  const [isEditing, setIsEditing] = useState(false);
+  const editRef = useRef<HTMLDivElement>(null);
+
+  const startEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      setupEditor();
+    }, 0);
+  };
+
+  const setupEditor = () => {
+    if (!editRef.current) {
+      return;
+    }
+
+    const editor = editRef.current;
+    editor.innerHTML = '';
+    editor.textContent = allData.summaryText;
+    editor.focus();
+  };
+
+  const saveChanges = () => {
+    if (!editRef.current) {
+      return;
+    }
+
+    const content = editRef.current.innerText || '';
+    setAllData((prev: Record<string, any>) => ({
+      ...prev,
+      summaryText: content,
+    }));
+    setIsEditing(false);
+    editRef.current.innerHTML = '';
+  };
+
+  const markdownStyles = {
+    ul: { props: { className: 'list-disc' } },
+    h1: { props: { className: 'text-4xl font-bold leading-[4rem]' } },
+    h2: { props: { className: 'text-3xl font-bold leading-[3rem]' } },
+    h3: { props: { className: 'text-2xl font-bold leading-[2rem]' } },
+    h4: { props: { className: 'text-xl font-bold leading-[2.5rem]' } },
+    h5: { props: { className: 'text-lg font-bold leading-[2.5rem]' } },
+    h6: { props: { className: 'text-base font-bold leading-[2rem]' } },
+  };
+
+  if (!allData.isEditable) {
+    return (
+      <div className="px-[1em]" {...rest}>
+        <div data-slot="summaryText">
+          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-[1em]" {...rest}>
+      {isEditing ? (
+        <div
+          ref={editRef}
+          contentEditable
+          onBlur={saveChanges}
+          data-slot="summaryText"
+          className="p-2 min-h-[100px] whitespace-pre-wrap"
+          suppressContentEditableWarning={true}
+          style={{
+            whiteSpace: 'pre-wrap',
+            wordWrap: 'break-word',
+          }}
+        />
+      ) : (
+        <div
+          onClick={startEditing}
+          data-slot="summaryText"
+          style={{
+            whiteSpace: 'pre-wrap',
+            wordWrap: 'break-word',
+          }}
+        >
+          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function renderButton(props: any): JSX.Element {
+  const { isEditable = false, gjsModel, performInteraction = () => {} } = props;
+
+  const [allData, setAllData] = useState({
+    ...props,
+  });
+
+  const [attributes, setAttributes] = useState({
+    interactionApiInProgress: false,
+  });
+
+  useEffect(() => {
+    gjsModel.on('change:componentProps', () => {
+      setAllData({
+        ...gjsModel.get('componentProps'),
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    gjsModel.on('change:attributes', () => {
+      setAttributes({
+        ...gjsModel.get('attributes'),
+      });
+    });
+  }, []);
+
+  const {
+    text,
+    className,
+    payload,
+    variant = 'default',
+    size = 'sm',
+    affectedComponents,
+    tooltipContent,
+  } = allData;
+
+  function interact() {
+    const id = gjsModel.get('id');
+    performInteraction({
+      id,
+      interactionType: 'button',
+      affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
+      payload,
+    });
+  }
+
+  return (
+    <TooltipButton
+      className={className}
+      isEditable={isEditable}
+      interact={interact}
+      attributes={attributes}
+      variant={variant}
+      size={size}
+      text={text}
+      tooltipContent={tooltipContent}
+    />
+  );
+}
+
+export function getRenderers(): Record<string, (props: any) => JSX.Element> {
+  return {
+    ActionCard: renderActionCard,
+    Button: renderButton,
+    Card: renderCard,
+    Chart: renderChart,
+    Filter: renderFilter,
+    Markdown: renderMarkdown,
+    Search: renderSearch,
+    Table: renderTable,
+    Tabs: renderTab,
+  };
+}