@lobehub/chat 1.46.7 → 1.47.0

package/src/database/server/models/aiProvider.ts

@@ -165,7 +165,7 @@ export class AiProviderModel {
 
   getAiProviderById = async (
     id: string,
-    decryptor: DecryptUserKeyVaults,
+    decryptor?: DecryptUserKeyVaults,
   ): Promise<AiProviderDetailItem | undefined> => {
     const query = this.db
       .select({
@@ -205,7 +205,7 @@ export class AiProviderModel {
     return { ...result, keyVaults } as AiProviderDetailItem;
   };
 
-  getAiProviderRuntimeConfig = async (decryptor: DecryptUserKeyVaults) => {
+  getAiProviderRuntimeConfig = async (decryptor?: DecryptUserKeyVaults) => {
     const result = await this.db
       .select({
         fetchOnClient: aiProviders.fetchOnClient,

package/src/features/DevPanel/FloatPanel.tsx

@@ -0,0 +1,136 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { FloatButton } from 'antd';
+import { createStyles } from 'antd-style';
+import { BugIcon, BugOff, XIcon } from 'lucide-react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Rnd } from 'react-rnd';
+
+// 定义样式
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    collapsed: css`
+      pointer-events: none;
+      transform: scale(0.8);
+      opacity: 0;
+    `,
+    content: css`
+      overflow: auto;
+      flex: 1;
+      height: 100%;
+      color: ${token.colorText};
+    `,
+
+    expanded: css`
+      pointer-events: auto;
+      transform: scale(1);
+      opacity: 1;
+    `,
+
+    header: css`
+      cursor: move;
+      user-select: none;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+      border-start-start-radius: 12px;
+      border-start-end-radius: 12px;
+
+      font-weight: ${token.fontWeightStrong};
+      color: ${token.colorText};
+
+      background: ${token.colorFillAlter};
+    `,
+    panel: css`
+      position: fixed;
+      z-index: 1000;
+
+      overflow: hidden;
+      display: flex;
+
+      border-radius: 12px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: ${token.boxShadow};
+
+      transition: opacity ${token.motionDurationMid} ${token.motionEaseInOut};
+    `,
+  };
+});
+
+const minWidth = 800;
+const minHeight = 600;
+
+const CollapsibleFloatPanel = ({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [position, setPosition] = useState({ x: 100, y: 100 });
+  const [size, setSize] = useState({ height: minHeight, width: minWidth });
+
+  useEffect(() => {
+    try {
+      const localStoragePosition = localStorage.getItem('debug-panel-position');
+      if (localStoragePosition && JSON.parse(localStoragePosition)) {
+        setPosition(JSON.parse(localStoragePosition));
+      }
+    } catch {
+      /* empty */
+    }
+
+    try {
+      const localStorageSize = localStorage.getItem('debug-panel-size');
+      if (localStorageSize && JSON.parse(localStorageSize)) {
+        setSize(JSON.parse(localStorageSize));
+      }
+    } catch {
+      /* empty */
+    }
+  }, []);
+
+  return (
+    <>
+      <FloatButton
+        icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{ bottom: 24, right: 24 }}
+      />
+      {isExpanded && (
+        <Rnd
+          bounds="window"
+          className={`${styles.panel} ${isExpanded ? styles.expanded : styles.collapsed}`}
+          dragHandleClassName="panel-drag-handle"
+          minHeight={minHeight}
+          minWidth={minWidth}
+          onDragStop={(e, d) => {
+            setPosition({ x: d.x, y: d.y });
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            setSize({
+              height: Number(ref.style.height),
+              width: Number(ref.style.width),
+            });
+            setPosition(position);
+          }}
+          position={position}
+          size={size}
+        >
+          <Flexbox height={'100%'}>
+            <Flexbox
+              align={'center'}
+              className={`panel-drag-handle ${styles.header}`}
+              horizontal
+              justify={'space-between'}
+            >
+              开发者面板
+              <ActionIcon icon={XIcon} onClick={() => setIsExpanded(false)} />
+            </Flexbox>
+            <Flexbox className={styles.content}>{children}</Flexbox>
+          </Flexbox>
+        </Rnd>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleFloatPanel;

package/src/features/DevPanel/PostgresViewer/DataTable/Table.tsx

@@ -0,0 +1,157 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Center } from 'react-layout-kit';
+import { TableVirtuoso } from 'react-virtuoso';
+import useSWR from 'swr';
+
+import { tableViewerService } from '@/services/tableViewer';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import { useTableColumns } from '../useTableColumns';
+import TableCell from './TableCell';
+
+const useStyles = createStyles(({ token, css }) => ({
+  columnList: css`
+    margin-inline-start: 32px;
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextSecondary};
+
+    > div {
+      padding-block: ${token.paddingXS}px;
+      padding-inline: 0;
+    }
+  `,
+  table: css`
+    overflow: scroll hidden;
+    flex: 1;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-inline-end: 12px;
+      font-family: ${token.fontFamilyCode};
+    }
+
+    thead {
+      tr {
+        outline: 1px solid ${token.colorBorderSecondary};
+      }
+    }
+
+    th,
+    td {
+      overflow: hidden;
+
+      max-width: 200px;
+      padding-block: 8px;
+      padding-inline: 12px;
+      border-inline-end: 1px solid ${token.colorBorderSecondary};
+
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    th {
+      position: sticky;
+      z-index: 1;
+      inset-block-start: 0;
+
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+
+      font-weight: ${token.fontWeightStrong};
+      text-align: start;
+      text-wrap: nowrap;
+
+      background: ${token.colorBgElevated};
+    }
+
+    td {
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+      text-wrap: nowrap;
+    }
+
+    tbody {
+      tr:hover {
+        background: ${token.colorFillTertiary};
+      }
+    }
+  `,
+  tableItem: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: ${token.padding}px;
+    align-items: center;
+
+    padding: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorText};
+  `,
+}));
+
+interface TableProps {
+  tableName?: string;
+}
+
+const Table = ({ tableName }: TableProps) => {
+  const { styles } = useStyles();
+
+  const tableColumns = useTableColumns(tableName);
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  const tableData = useSWR(
+    isDBInited && tableName ? ['fetch-table-data', tableName] : null,
+    ([, table]) => tableViewerService.getTableData(table),
+  );
+
+  const columns = tableColumns.data?.map((t) => t.name) || [];
+  const isLoading = tableColumns.isLoading || tableData.isLoading;
+
+  if (!tableName) return <Center height={'80%'}>Select a table to view data</Center>;
+
+  if (isLoading) return <Center height={'80%'}>Loading...</Center>;
+
+  const dataSource = tableData.data?.data || [];
+  const header = (
+    <tr>
+      {columns.map((column) => (
+        <th key={column}>{column}</th>
+      ))}
+    </tr>
+  );
+
+  return (
+    <div className={styles.table}>
+      {dataSource.length === 0 ? (
+        <>
+          <table>
+            <thead>{header}</thead>
+          </table>
+          <Center height={400}>no rows</Center>
+        </>
+      ) : (
+        <TableVirtuoso
+          data={dataSource}
+          fixedHeaderContent={() => header}
+          itemContent={(index, row) => (
+            <>
+              {columns.map((column) => (
+                <TableCell
+                  column={column}
+                  dataItem={row}
+                  key={`${column}_${index}`}
+                  rowIndex={index}
+                />
+              ))}
+            </>
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Table;

package/src/features/DevPanel/PostgresViewer/DataTable/TableCell.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+
+interface TableCellProps {
+  column: string;
+  dataItem: any;
+  rowIndex: number;
+}
+
+const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
+  const data = dataItem[column];
+  const content = useMemo(() => {
+    switch (typeof data) {
+      case 'object': {
+        return JSON.stringify(data);
+      }
+
+      case 'boolean': {
+        return data ? 'True' : 'False';
+      }
+
+      default: {
+        return data;
+      }
+    }
+  }, [data]);
+
+  return (
+    <td key={column} onDoubleClick={() => console.log('Edit cell:', rowIndex, column)}>
+      {content}
+    </td>
+  );
+};
+
+export default TableCell;

package/src/features/DevPanel/PostgresViewer/DataTable/index.tsx

@@ -0,0 +1,67 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { Download, Filter, RefreshCw } from 'lucide-react';
+import React from 'react';
+
+import Table from './Table';
+
+const useStyles = createStyles(({ token, css }) => ({
+  dataPanel: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    height: 100%;
+
+    background: ${token.colorBgContainer};
+  `,
+  toolbar: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+  toolbarButtons: css`
+    display: flex;
+    gap: 4px;
+  `,
+  toolbarTitle: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+  `,
+}));
+
+interface DataTableProps {
+  tableName: string;
+}
+
+const DataTable = ({ tableName }: DataTableProps) => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.dataPanel}>
+      {/* Toolbar */}
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarTitle}>{tableName || 'Select a table'}</div>
+        <div className={styles.toolbarButtons}>
+          <Button color={'default'} icon={<Icon icon={Filter} />} variant={'filled'}>
+            Filter
+          </Button>
+          <ActionIcon icon={Download} title={'Export'} />
+          <ActionIcon icon={RefreshCw} title={'Refresh'} />
+        </div>
+      </div>
+
+      {/* Table */}
+      <Table tableName={tableName} />
+    </div>
+  );
+};
+
+export default DataTable;

package/src/features/DevPanel/PostgresViewer/Schema.tsx

@@ -0,0 +1,196 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronDown, ChevronRight, Database, Table as TableIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import { tableViewerService } from '@/services/tableViewer';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import TableColumns from './TableColumns';
+
+// 样式定义
+const useStyles = createStyles(({ token, css }) => ({
+  button: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    padding-block: ${token.paddingXS}px;
+    padding-inline: ${token.padding}px;
+    border: none;
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorFillSecondary};
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  count: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  dataPanel: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    height: 100%;
+
+    background: ${token.colorBgContainer};
+  `,
+  schema: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    font-weight: normal;
+    color: ${token.colorTextTertiary};
+  `,
+  schemaHeader: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+  `,
+  schemaPanel: css`
+    overflow: scroll;
+
+    width: 280px;
+    height: 100%;
+    border-inline-end: 1px solid ${token.colorBorderSecondary};
+
+    background: ${token.colorBgContainer};
+  `,
+  selected: css`
+    background: ${token.colorFillSecondary};
+  `,
+  table: css`
+    overflow: hidden;
+    flex: 1;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th {
+      position: sticky;
+      z-index: 1;
+      inset-block-start: 0;
+
+      padding: ${token.padding}px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+
+      font-weight: ${token.fontWeightStrong};
+      text-align: start;
+
+      background: ${token.colorFillQuaternary};
+    }
+
+    td {
+      padding: ${token.padding}px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+      transition: all ${token.motionDurationMid};
+
+      &:hover {
+        background: ${token.colorFillQuaternary};
+      }
+    }
+  `,
+  tableItem: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    margin-inline: 8px;
+    padding: 8px;
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorText};
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+}));
+
+interface SchemaPanelProps {
+  onTableSelect: (tableName: string) => void;
+  selectedTable?: string;
+}
+const SchemaPanel = ({ onTableSelect, selectedTable }: SchemaPanelProps) => {
+  const { styles, cx } = useStyles();
+  const [expandedTables, setExpandedTables] = useState(new Set());
+
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  const { data, isLoading } = useSWR(isDBInited ? 'fetch-tables' : null, () =>
+    tableViewerService.getAllTables(),
+  );
+
+  const toggleTable = (tableName: string) => {
+    const newExpanded = new Set(expandedTables);
+    if (newExpanded.has(tableName)) {
+      newExpanded.delete(tableName);
+    } else {
+      newExpanded.add(tableName);
+    }
+    setExpandedTables(newExpanded);
+  };
+
+  return (
+    <div className={styles.schemaPanel}>
+      <div className={styles.schemaHeader}>
+        <Database size={16} />
+        <Flexbox align={'center'} horizontal justify={'space-between'}>
+          <span>Tables {data?.length}</span>
+          <span className={styles.schema}>public</span>
+        </Flexbox>
+      </div>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <Flexbox>
+          {data?.map((table) => (
+            <div key={table.name}>
+              <Flexbox
+                className={cx(styles.tableItem, selectedTable === table.name && styles.selected)}
+                horizontal
+                onClick={() => {
+                  toggleTable(table.name);
+                  onTableSelect(table.name);
+                }}
+              >
+                <Icon icon={expandedTables.has(table.name) ? ChevronDown : ChevronRight} />
+                <TableIcon size={16} />
+                <Flexbox align={'center'} horizontal justify={'space-between'}>
+                  <span>{table.name}</span>
+                  <span className={styles.count}>{table.count}</span>
+                </Flexbox>
+              </Flexbox>
+              {expandedTables.has(table.name) && <TableColumns tableName={table.name} />}
+            </div>
+          ))}
+        </Flexbox>
+      )}
+    </div>
+  );
+};
+
+export default SchemaPanel;

package/src/features/DevPanel/PostgresViewer/TableColumns.tsx

@@ -0,0 +1,67 @@
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useTableColumns } from './useTableColumns';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    margin-inline: 40px 4px;
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextSecondary};
+  `,
+  item: css`
+    padding-block: 4px;
+    padding-inline: 0;
+    font-family: ${token.fontFamilyCode};
+  `,
+  type: css`
+    font-size: 10px;
+    color: ${token.red9};
+  `,
+}));
+
+interface TableColumnsProps {
+  tableName: string;
+}
+
+const TableColumns = ({ tableName }: TableColumnsProps) => {
+  const { styles } = useStyles();
+
+  const { data, isLoading } = useTableColumns(tableName);
+
+  return (
+    <div className={styles.container}>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <Flexbox>
+          {data?.map((column) => (
+            <Flexbox
+              align={'center'}
+              className={styles.item}
+              horizontal
+              justify={'space-between'}
+              key={column.name}
+            >
+              <Flexbox>
+                <Flexbox>{column.name}</Flexbox>
+                <span className={styles.type}>{column.type}</span>
+              </Flexbox>
+              {column.isPrimaryKey && (
+                <div>
+                  <Tag bordered={false} color={'cyan'}>
+                    Primary
+                  </Tag>
+                </div>
+              )}
+            </Flexbox>
+          ))}
+        </Flexbox>
+      )}
+    </div>
+  );
+};
+
+export default TableColumns;

package/src/features/DevPanel/PostgresViewer/index.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import DataTable from './DataTable';
+import SchemaPanel from './Schema';
+
+// Main Database Panel Component
+const DatabasePanel = () => {
+  const [selectedTable, setSelectedTable] = useState<string>('');
+
+  return (
+    <Flexbox height={'100%'} horizontal>
+      <SchemaPanel onTableSelect={setSelectedTable} selectedTable={selectedTable} />
+      <DataTable tableName={selectedTable} />
+    </Flexbox>
+  );
+};
+
+export default DatabasePanel;

package/src/features/DevPanel/PostgresViewer/useTableColumns.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+
+import { tableViewerService } from '@/services/tableViewer';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+export const useTableColumns = (tableName?: string) => {
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  return useSWR(isDBInited && tableName ? ['fetch-table-columns', tableName] : null, ([, table]) =>
+    tableViewerService.getTableDetails(table),
+  );
+};