update packages

web/package.json

@@ -19,17 +19,17 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@faker-js/faker": "^9.4.0",
+    "@faker-js/faker": "^9.5.0",
     "@fluentui/react-context-selector": "^9.1.72",
     "@manufac/echarts-simple-transform": "^2.0.11",
     "@million/lint": "^1.0.14",
-    "@monaco-editor/react": "^4.6.0",
+    "@monaco-editor/react": "^4.7.0",
     "@supabase/auth-helpers-nextjs": "^0.10.0",
     "@supabase/auth-helpers-react": "^0.5.0",
     "@supabase/ssr": "^0.5.2",
     "@supabase/supabase-js": "^2.48.1",
-    "@tanstack/react-query": "^5.65.1",
+    "@tanstack/react-query": "^5.66.7",
-    "@vercel/speed-insights": "^1.1.0",
+    "@vercel/speed-insights": "^1.2.0",
     "ahooks": "^3.8.4",
     "antd": "5.23.3",
     "antd-style": "^3.7.1",
@@ -58,16 +58,16 @@
     "echarts-stat": "^1.2.0",
     "email-validator": "^2.0.4",
     "font-color-contrast": "^11.1.0",
-    "framer-motion": "^12.0.6",
+    "framer-motion": "^12.4.4",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
     "jwt-decode": "^4.0.0",
-    "material-symbols": "^0.28.1",
+    "material-symbols": "^0.28.2",
-    "monaco-sql-languages": "^0.12.2",
+    "monaco-sql-languages": "^0.13.1",
     "monaco-themes": "^0.4.4",
-    "monaco-yaml": "^5.2.3",
+    "monaco-yaml": "^5.3.1",
     "mutative": "^1.1.0",
     "next": "14.2.22",
     "next-themes": "^0.4.4",
@@ -75,29 +75,25 @@
     "papaparse": "^5.5.2",
     "patternomaly": "^1.3.2",
     "pluralize": "^8.0.0",
-    "posthog-js": "^1.212.0",
+    "posthog-js": "*",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^18",
     "react-chartjs-2": "^5.3.0",
-    "react-data-grid": "^7.0.0-beta.47",
+    "react-data-grid": "^7.0.0-beta.48",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4.6.1",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^9.0.3",
     "react-material-symbols": "^4.4.0",
-    "react-monaco-editor": "^0.56.2",
+    "react-monaco-editor": "^0.58.0",
-    "react-scan": "^0.1.0",
+    "react-scan": "^0.1.3",
     "react-syntax-highlighter": "^15.6.1",
-    "react-type-animation": "^3.2.0",
-    "react-use-websocket": "^4.11.1",
     "react-virtualized-auto-sizer": "^1.0.25",
-    "react-window": "^1.8.11",
-    "react-window-infinite-loader": "^1.0.10",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "split-pane-react": "^0.1.3",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.0.1",
     "utility-types": "^3.11.0",
     "uuid": "^11.0.5",
     "virtua": "^0.40.0"

web/src/app/app/_components/NewChatModal/NewChatModalDatasourceSelect.tsx

@@ -3,7 +3,6 @@ import { AppMaterialIcons } from '@/components/icons';
 import { SelectProps, Select } from 'antd';
 import isEmpty from 'lodash/isEmpty';
 import React, { useMemo } from 'react';
-import { BsStars } from 'react-icons/bs';
 import { Text } from '@/components/text';
 import { useMemoizedFn } from 'ahooks';
 import { createStyles } from 'antd-style';
@@ -20,7 +19,7 @@ export const NewChatModalDataSourceSelect: React.FC<{
     () => ({
       label: (
         <div className="flex items-center space-x-1">
-          <BsStars size={14} className={`min-w-[14px] ${styles.icon}`} />
+          <AppMaterialIcons size={14} className={`min-w-[14px] ${styles.icon}`} icon="stars" />
           <span>Auto-select</span>
         </div>
       ),

web/src/components/list/BusterList/BusterListReactWindow.tsx

@@ -1,211 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { BusterListProps } from './interfaces';
-import { VariableSizeList as List } from 'react-window';
-import { useMemoizedFn } from 'ahooks';
-import { BusterListContentMenu } from './BusterListContentMenu';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { HEIGHT_OF_SECTION_ROW, HEIGHT_OF_ROW } from './config';
-import { getAllIdsInSection } from './helpers';
-import { BusterListHeader } from './BusterListHeader';
-import { BusterListRowComponentSelector } from './BusterListRowComponentSelector';
-
-export const BusterListReactWindow: React.FC<BusterListProps> = ({
-  columns,
-  rows,
-  selectedRowKeys,
-  onSelectChange,
-  emptyState,
-  showHeader = true,
-  contextMenu,
-  showSelectAll = true,
-  useRowClickSelectChange = false,
-  rowClassName = ''
-}) => {
-  const contextMenuRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const showEmptyState = (!rows || rows.length === 0) && !!emptyState;
-
-  const [contextMenuPosition, setContextMenuPosition] = useState<{
-    x: number;
-    y: number;
-    scrollYPosition: number;
-    show: boolean;
-    id: string;
-  } | null>(null);
-
-  const onGlobalSelectChange = useMemoizedFn((v: boolean) => {
-    onSelectChange?.(v ? rows.map((row) => row.id) : []);
-  });
-
-  const onSelectSectionChange = useMemoizedFn((v: boolean, id: string) => {
-    if (!onSelectChange) return;
-    const idsInSection = getAllIdsInSection(rows, id);
-
-    if (v === false) {
-      onSelectChange(selectedRowKeys?.filter((d) => !idsInSection.includes(d)) || []);
-    } else {
-      onSelectChange(selectedRowKeys?.concat(idsInSection) || []);
-    }
-  });
-
-  const onSelectChangePreflight = useMemoizedFn((v: boolean, id: string) => {
-    if (!onSelectChange || !selectedRowKeys) return;
-    if (v === false) {
-      onSelectChange(selectedRowKeys?.filter((d) => d !== id));
-    } else {
-      onSelectChange(selectedRowKeys?.concat(id) || []);
-    }
-  });
-
-  const onContextMenuClick = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>, id: string) => {
-    if (!contextMenu) return;
-    e.stopPropagation();
-    e.preventDefault();
-    const x = e.clientX - 5;
-    const y = e.clientY - 5; // offset the top by 30px
-    const menuWidth = 250; // width of the menu
-    const menuHeight = 200; // height of the menu
-    const pageWidth = window.innerWidth;
-    const pageHeight = window.innerHeight;
-
-    // Ensure the menu does not render offscreen horizontally
-    const adjustedX = Math.min(Math.max(0, x), pageWidth - menuWidth);
-    // Ensure the menu does not render offscreen vertically, considering the offset
-    const adjustedY = Math.min(Math.max(0, y), pageHeight - menuHeight);
-
-    setContextMenuPosition({
-      x: adjustedX,
-      y: adjustedY,
-      show: true,
-      id: id,
-      scrollYPosition: window.scrollY
-    });
-  });
-
-  // const { run: onScrollListener } = useDebounceFn(
-  //   useMemoizedFn((e: React.UIEvent<HTMLDivElement>) => {
-  //     if (!contextMenu) return;
-  //     const newScrollY = (e.target as HTMLElement).scrollTop;
-  //     const scrollYDelta = newScrollY - scrollY.current;
-  //     const hasMoved50PixelsFromScrollYPosition =
-  //       Math.abs((contextMenuPosition?.scrollYPosition || 0) - newScrollY) > 35;
-  //     scrollY.current = newScrollY;
-  //     setContextMenuPosition((v) => ({
-  //       ...v!,
-  //       show: !!v?.show && !hasMoved50PixelsFromScrollYPosition,
-  //       y: (v?.y || 0) - scrollYDelta
-  //     }));
-  //   }),
-  //   { wait: 50 }
-  // );
-
-  const itemSize = useMemoizedFn((index: number) => {
-    const row = rows[index];
-    return row.rowSection ? HEIGHT_OF_SECTION_ROW : HEIGHT_OF_ROW;
-  });
-
-  const globalCheckStatus = useMemo(() => {
-    if (!selectedRowKeys) return 'unchecked';
-    if (selectedRowKeys.length === 0) return 'unchecked';
-    if (selectedRowKeys.length === rows.length) return 'checked';
-    return 'indeterminate';
-  }, [selectedRowKeys?.length, rows.length]);
-
-  const itemData = useMemo(() => {
-    return {
-      columns,
-      rows,
-      selectedRowKeys,
-      onSelectChange: onSelectChange ? onSelectChangePreflight : undefined,
-      onSelectSectionChange: onSelectChange ? onSelectSectionChange : undefined,
-      onContextMenuClick,
-      useRowClickSelectChange
-    };
-  }, [
-    columns,
-    rows,
-    useRowClickSelectChange,
-    selectedRowKeys,
-    onSelectChange,
-    onSelectSectionChange,
-    onContextMenuClick
-  ]);
-
-  //context menu click away
-  useEffect(() => {
-    if (contextMenu && contextMenuPosition?.show) {
-      const listenForClickAwayFromContextMenu = (e: MouseEvent) => {
-        if (!contextMenuRef.current?.contains(e.target as Node)) {
-          setContextMenuPosition((v) => ({
-            ...v!,
-            show: false
-          }));
-        }
-      };
-      document.addEventListener('click', listenForClickAwayFromContextMenu);
-      return () => {
-        document.removeEventListener('click', listenForClickAwayFromContextMenu);
-      };
-    }
-  }, [contextMenuRef, contextMenuPosition?.show, contextMenu]);
-
-  return (
-    <div
-      className="list-container relative flex h-full w-full flex-col overflow-hidden"
-      ref={containerRef}>
-      {showHeader && !showEmptyState && (
-        <BusterListHeader
-          columns={columns}
-          onGlobalSelectChange={onSelectChange ? onGlobalSelectChange : undefined}
-          globalCheckStatus={globalCheckStatus}
-          rowsLength={rows.length}
-          showSelectAll={showSelectAll}
-          rowClassName={rowClassName}
-        />
-      )}
-
-      {!showEmptyState && (
-        <div className="relative h-full w-full">
-          <AutoSizer>
-            {({ height, width }) => (
-              <List
-                height={height}
-                width={width}
-                estimatedItemSize={HEIGHT_OF_ROW}
-                overscanCount={10}
-                itemData={itemData}
-                itemSize={itemSize}
-                itemCount={rows.length}>
-                {({ index, style, data }) => (
-                  <BusterListRowComponentSelector
-                    style={style}
-                    row={rows[index]}
-                    id={rows[index].id}
-                    isLastChild={index === rows.length - 1}
-                    {...data}
-                  />
-                )}
-              </List>
-            )}
-          </AutoSizer>
-        </div>
-      )}
-
-      {showEmptyState && (
-        <div className="flex h-full items-center justify-center">{emptyState}</div>
-      )}
-
-      {contextMenu && contextMenuPosition?.id && (
-        <BusterListContentMenu
-          ref={contextMenuRef}
-          open={!!contextMenuPosition?.show}
-          menu={contextMenu}
-          id={contextMenuPosition?.id || ''}
-          placement={{ x: contextMenuPosition?.x || 0, y: contextMenuPosition?.y || 0 }}
-        />
-      )}
-    </div>
-  );
-};
-BusterListReactWindow.displayName = 'BusterListReactWindow';
-// Add a memoized checkbox component