@lobehub/chat 1.76.0 → 1.77.0

package/src/features/DataImporter/ImportDetail.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { Button, Table, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Info } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ImportPgDataStructure } from '@/types/export';
+
+const { Text } = Typography;
+
+const getNonEmptyTables = (data: ImportPgDataStructure) => {
+  const result = [];
+
+  for (const [key, value] of Object.entries(data.data)) {
+    if (Array.isArray(value) && value.length > 0) {
+      result.push({
+        count: value.length,
+        name: key,
+      });
+    }
+  }
+
+  return result;
+};
+
+const getTotalRecords = (tables: { count: number; name: string }[]): number => {
+  return tables.reduce((sum, table) => sum + table.count, 0);
+};
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    duplicateAlert: css`
+      margin-block-start: ${token.marginMD}px;
+      padding: ${token.paddingMD}px;
+      border: 1px solid ${token.colorWarningBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      background-color: ${token.colorWarningBg};
+    `,
+    duplicateDescription: css`
+      margin-block-start: ${token.marginXS}px;
+      font-size: ${token.fontSizeSM}px;
+      color: ${token.colorTextSecondary};
+    `,
+    duplicateOptions: css`
+      margin-block-start: ${token.marginSM}px;
+    `,
+    duplicateTag: css`
+      border-color: ${token.colorWarningBorder};
+      color: ${token.colorWarning};
+      background-color: ${token.colorWarningBg};
+    `,
+    hash: css`
+      font-family: ${token.fontFamilyCode};
+      font-size: 12px;
+      color: ${token.colorTextTertiary};
+    `,
+    infoIcon: css`
+      color: ${token.colorTextSecondary};
+    `,
+    modalContent: css`
+      padding-block: ${token.paddingMD}px;
+padding-inline: 0;
+    `,
+    successIcon: css`
+      color: ${token.colorSuccess};
+    `,
+    tableContainer: css`
+      overflow: hidden;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusLG}px;
+    `,
+    tableName: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+    warningIcon: css`
+      color: ${token.colorWarning};
+    `,
+  };
+});
+
+interface ImportPreviewModalProps {
+  importData: ImportPgDataStructure;
+  onCancel?: () => void;
+  onConfirm?: (overwriteExisting: boolean) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}
+
+const ImportPreviewModal = ({
+  open = true,
+  onOpenChange = () => {},
+  onConfirm = () => {},
+  onCancel = () => {},
+  importData,
+}: ImportPreviewModalProps) => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const [duplicateAction] = useState<string>('skip');
+  const tables = getNonEmptyTables(importData);
+  const totalRecords = getTotalRecords(tables);
+
+  // 表格列定义
+  const columns = [
+    {
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <div className={styles.tableName}>{text}</div>,
+      title: t('importPreview.tables.name'),
+    },
+    {
+      dataIndex: 'count',
+      key: 'count',
+      title: t('importPreview.tables.count'),
+    },
+  ];
+
+  const handleConfirm = () => {
+    onConfirm(duplicateAction === 'overwrite');
+    onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      footer={[
+        <Button
+          key="cancel"
+          onClick={() => {
+            onOpenChange(false);
+            onCancel();
+          }}
+        >
+          {t('cancel')}
+        </Button>,
+        <Button key="confirm" onClick={handleConfirm} type="primary">
+          {t('importPreview.confirmImport')}
+        </Button>,
+      ]}
+      onCancel={() => onOpenChange(false)}
+      open={open}
+      title={t('importPreview.title')}
+      width={700}
+    >
+      <div className={styles.modalContent}>
+        <Flexbox gap={16}>
+          <Flexbox gap={4}>
+            <Flexbox align="center" horizontal justify="space-between" width="100%">
+              <Flexbox align="center" gap={8} horizontal>
+                <Info className={styles.infoIcon} size={16} />
+                <Text strong>{t('importPreview.totalRecords', { count: totalRecords })}</Text>
+              </Flexbox>
+              <Flexbox horizontal>
+                <Text type="secondary">
+                  {t('importPreview.totalTables', { count: tables.length })}
+                </Text>
+              </Flexbox>
+            </Flexbox>
+            <Flexbox className={styles.hash} gap={4} horizontal>
+              Hash: <span>{importData.schemaHash}</span>
+            </Flexbox>
+          </Flexbox>
+
+          <div className={styles.tableContainer}>
+            <Table
+              columns={columns}
+              dataSource={tables}
+              pagination={false}
+              rowKey="name"
+              scroll={{ y: 350 }}
+              size="small"
+            />
+          </div>
+
+          {/*<Flexbox>*/}
+          {/*  重复数据处理方式：*/}
+          {/*  <div className={styles.duplicateOptions}>*/}
+          {/*    <Radio.Group*/}
+          {/*      onChange={(e) => setDuplicateAction(e.target.value)}*/}
+          {/*      value={duplicateAction}*/}
+          {/*    >*/}
+          {/*      <Space>*/}
+          {/*        <Radio value="skip">跳过</Radio>*/}
+          {/*        <Radio value="overwrite">覆盖</Radio>*/}
+          {/*      </Space>*/}
+          {/*    </Radio.Group>*/}
+          {/*  </div>*/}
+          {/*  <div className={styles.duplicateDescription}>*/}
+          {/*    {duplicateAction === 'skip'*/}
+          {/*      ? '选择跳过将仅导入不重复的数据，保留现有数据不变。'*/}
+          {/*      : '选择覆盖将使用导入数据替换系统中具有相同 ID 的现有记录。'}*/}
+          {/*  </div>*/}
+          {/*</Flexbox>*/}
+        </Flexbox>
+      </div>
+    </Modal>
+  );
+};
+
+export default ImportPreviewModal;

package/src/features/DataImporter/SuccessResult.tsx

@@ -2,17 +2,27 @@
 
 import { Icon } from '@lobehub/ui';
 import { Button, Result, Table } from 'antd';
+import { createStyles } from 'antd-style';
 import { CheckCircle } from 'lucide-react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    zeroCell: css`
+      color: ${token.colorTextQuaternary};
+    `,
+  };
+});
+
 interface SuccessResultProps {
   dataSource?: {
     added: number;
     error: number;
     skips: number;
     title: string;
+    updated: number;
   }[];
   duration: number;
   onClickFinish?: () => void;
@@ -20,7 +30,11 @@ interface SuccessResultProps {
 
 const SuccessResult = memo<SuccessResultProps>(({ duration, dataSource, onClickFinish }) => {
   const { t } = useTranslation('common');
+  const { styles } = useStyles();
 
+  const cellRender = (text: string) => {
+    return text ? text : <span className={styles.zeroCell}>0</span>;
+  };
   return (
     <Result
       extra={
@@ -30,24 +44,26 @@ const SuccessResult = memo<SuccessResultProps>(({ duration, dataSource, onClickF
       }
       icon={<Icon icon={CheckCircle} />}
       status={'success'}
-      style={{ paddingBlock: 24 }}
+      style={{ paddingBlock: 24, paddingInline: 0 }}
       subTitle={
         // if there is no importData, means it's only import the settings
         !dataSource ? (
           t('importModal.finish.onlySettings')
         ) : (
-          <Flexbox gap={16} width={400}>
+          <Flexbox gap={16} width={500}>
             {t('importModal.finish.subTitle', { duration: (duration / 1000).toFixed(2) })}
             <Table
               bordered
               columns={[
-                { dataIndex: 'title', title: t('importModal.result.type') },
-                { dataIndex: 'added', title: t('importModal.result.added') },
-                { dataIndex: 'skips', title: t('importModal.result.skips') },
-                { dataIndex: 'error', title: t('importModal.result.errors') },
+                { dataIndex: 'title', render: cellRender, title: t('importModal.result.type') },
+                { dataIndex: 'added', render: cellRender, title: t('importModal.result.added') },
+                { dataIndex: 'skips', render: cellRender, title: t('importModal.result.skips') },
+                { dataIndex: 'error', render: cellRender, title: t('importModal.result.errors') },
+                { dataIndex: 'updated', render: cellRender, title: t('importModal.result.update') },
               ]}
               dataSource={dataSource}
               pagination={false}
+              rowKey={'title'}
               size={'small'}
             />
           </Flexbox>

package/src/features/DataImporter/_deprecated.ts

@@ -0,0 +1,43 @@
+import { t } from 'i18next';
+
+import { notification } from '@/components/AntdStaticMethods';
+import { Migration } from '@/migrations';
+import { ConfigFile } from '@/types/exportConfig';
+
+/**
+ * V2 删除该方法
+ * 不再需要 Migration.migrate
+ * @deprecated
+ */
+export const importConfigFile = async (
+  file: File,
+  onConfigImport: (config: ConfigFile) => Promise<void>,
+) => {
+  const text = await file.text();
+
+  try {
+    const config = JSON.parse(text);
+
+    // it means the config file is exported from a newer version
+    if ('schemaHash' in config) {
+      notification.error({
+        description: t('import.incompatible.description', { ns: 'error' }),
+        message: t('import.incompatible.title', { ns: 'error' }),
+      });
+      return;
+    }
+
+    const { state, version } = Migration.migrate(config);
+
+    await onConfigImport({ ...config, state, version });
+  } catch (error) {
+    console.error(error);
+    notification.error({
+      description: t('import.importConfigFile.description', {
+        ns: 'error',
+        reason: (error as any).message,
+      }),
+      message: t('import.importConfigFile.title', { ns: 'error' }),
+    });
+  }
+};

package/src/features/DataImporter/config.ts

@@ -0,0 +1,21 @@
+import { t } from 'i18next';
+
+import { notification } from '@/components/AntdStaticMethods';
+import { ImportPgDataStructure } from '@/types/export';
+
+export const parseConfigFile = async (file: File): Promise<ImportPgDataStructure | undefined> => {
+  const text = await file.text();
+
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    console.error(error);
+    notification.error({
+      description: t('import.importConfigFile.description', {
+        ns: 'error',
+        reason: (error as any).message,
+      }),
+      message: t('import.importConfigFile.title', { ns: 'error' }),
+    });
+  }
+};

package/src/features/DataImporter/index.tsx

@@ -8,16 +8,21 @@ import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
 import DataStyleModal from '@/components/DataStyleModal';
-import { ImportResult, ImportResults, configService } from '@/services/config';
+import { importService } from '@/services/import';
+import { ImportResult, ImportResults } from '@/services/import/_deprecated';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
-import { ErrorShape, FileUploadState, ImportStage } from '@/types/importer';
-import { importConfigFile } from '@/utils/config';
+import { ImportPgDataStructure } from '@/types/export';
+import { ConfigFile } from '@/types/exportConfig';
+import { ErrorShape, FileUploadState, ImportStage, OnImportCallbacks } from '@/types/importer';
 
 import ImportError from './Error';
 import { FileUploading } from './FileUploading';
+import ImportPreviewModal from './ImportDetail';
 import DataLoading from './Loading';
 import SuccessResult from './SuccessResult';
+import { importConfigFile } from './_deprecated';
+import { parseConfigFile } from './config';
 
 const useStyles = createStyles(({ css }) => ({
   children: css`
@@ -50,13 +55,16 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
 
   const [fileUploadingState, setUploadingState] = useState<FileUploadState | undefined>();
   const [importError, setImportError] = useState<ErrorShape | undefined>();
-  const [importData, setImportData] = useState<ImportResults | undefined>();
+  const [importResults, setImportResults] = useState<ImportResults | undefined>();
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [importPgData, setImportPgData] = useState<ImportPgDataStructure | undefined>(undefined);
 
   const dataSource = useMemo(() => {
-    if (!importData) return;
+    if (!importResults) return;
 
-    const { type, ...res } = importData;
+    const { type, ...res } = importResults;
 
+    console.log(res);
     if (type === 'settings') return;
 
     return Object.entries(res)
@@ -65,15 +73,16 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
         added: value.added,
         error: value.errors,
         skips: value.skips,
-        title: t(`importModal.result.${item as keyof ImportResults}`),
+        title: item,
+        updated: value.updated || 0,
       }));
-  }, [importData]);
+  }, [importResults]);
 
   const isFinished = importState === ImportStage.Success || importState === ImportStage.Error;
 
   const closeModal = () => {
     setImportState(ImportStage.Finished);
-    setImportData(undefined);
+    setImportResults(undefined);
     setImportError(undefined);
     setUploadingState(undefined);
 
@@ -114,7 +123,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
 
       case ImportStage.Success: {
         return (
-          <Center gap={24} paddingInline={40}>
+          <Center gap={24} paddingInline={16}>
             <SuccessResult dataSource={dataSource} duration={duration} onClickFinish={closeModal} />
           </Center>
         );
@@ -139,35 +148,74 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
         icon={ImportIcon}
         open={importState !== ImportStage.Start && importState !== ImportStage.Finished}
         title={t('importModal.title')}
-        width={isFinished ? 500 : 400}
+        width={isFinished ? 600 : 400}
       >
         {content}
       </DataStyleModal>
       <Upload
+        accept={'application/json'}
         beforeUpload={async (file) => {
-          await importConfigFile(file, async (config) => {
-            setImportState(ImportStage.Preparing);
+          const config = await parseConfigFile(file);
+          if (!config) return false;
 
-            await configService.importConfigState(config, {
-              onError: (error) => {
-                setImportError(error);
-              },
-              onFileUploading: (state) => {
-                setUploadingState(state);
-              },
-              onStageChange: (stage) => {
-                setImportState(stage);
-              },
-              onSuccess: (data, duration) => {
-                if (data) setImportData(data);
-                setDuration(duration);
-              },
+          if (!('schemaHash' in config)) {
+            // TODO: remove in V2
+            await importConfigFile(file, async (config) => {
+              setImportState(ImportStage.Preparing);
+              console.log(config);
+
+              const importConfigState = async (
+                config: ConfigFile,
+                callbacks?: OnImportCallbacks,
+              ): Promise<void> => {
+                if (config.exportType === 'settings') {
+                  await importService.importSettings(config.state.settings);
+                  callbacks?.onStageChange?.(ImportStage.Success);
+                  return;
+                }
+
+                if (config.exportType === 'all') {
+                  await importService.importSettings(config.state.settings);
+                }
+
+                await importService.importData(
+                  {
+                    messages: (config.state as any).messages || [],
+                    sessionGroups: (config.state as any).sessionGroups || [],
+                    sessions: (config.state as any).sessions || [],
+                    topics: (config.state as any).topics || [],
+                    version: config.version,
+                  },
+                  callbacks,
+                );
+              };
+
+              await importConfigState(config, {
+                onError: (error) => {
+                  setImportError(error);
+                },
+                onFileUploading: (state) => {
+                  setUploadingState(state);
+                },
+                onStageChange: (stage) => {
+                  setImportState(stage);
+                },
+                onSuccess: (data, duration) => {
+                  if (data) setImportResults(data);
+                  setDuration(duration);
+                },
+              });
+
+              await refreshSessions();
+              await refreshMessages();
+              await refreshTopics();
             });
 
-            await refreshSessions();
-            await refreshMessages();
-            await refreshTopics();
-          });
+            return false;
+          }
+
+          setImportPgData(config);
+          setShowImportModal(true);
 
           return false;
         }}
@@ -178,6 +226,39 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
         {/* a very hackable solution: add a pseudo before to have a large hot zone */}
         <div className={styles.children}>{children}</div>
       </Upload>
+      {importPgData && (
+        <ImportPreviewModal
+          importData={importPgData}
+          onConfirm={async (overwriteExisting) => {
+            setImportState(ImportStage.Preparing);
+
+            await importService.importPgData(importPgData, {
+              callbacks: {
+                onError: (error) => {
+                  setImportError(error);
+                },
+                onFileUploading: (state) => {
+                  setUploadingState(state);
+                },
+                onStageChange: (stage) => {
+                  setImportState(stage);
+                },
+                onSuccess: (data, duration) => {
+                  if (data) setImportResults(data);
+                  setDuration(duration);
+                },
+              },
+              overwriteExisting,
+            });
+
+            await refreshSessions();
+            await refreshMessages();
+            await refreshTopics();
+          }}
+          onOpenChange={setShowImportModal}
+          open={showImportModal}
+        />
+      )}
     </>
   );
 });

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

@@ -5,6 +5,8 @@ import React from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import { mutate } from 'swr';
 
+import { exportService } from '@/services/export';
+
 import Header from '../../features/Header';
 import Table from '../../features/Table';
 import { FETCH_TABLE_DATA_KEY, usePgTable, useTableColumns } from '../usePgTable';
@@ -39,6 +41,10 @@ const DataTable = ({ tableName }: DataTableProps) => {
           },
           {
             icon: Download,
+            onClick: async () => {
+              const data = await exportService.exportData();
+              console.log(data);
+            },
             title: 'Export',
           },
           {

package/src/features/User/UserPanel/useMenu.tsx

@@ -9,7 +9,6 @@ import {
   Feather,
   FileClockIcon,
   HardDriveDownload,
-  HardDriveUpload,
   LifeBuoy,
   LogOut,
   Mail,
@@ -32,10 +31,8 @@ import {
   UTM_SOURCE,
   mailTo,
 } from '@/const/url';
-import { isServerMode } from '@/const/version';
 import DataImporter from '@/features/DataImporter';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
-import { configService } from '@/services/config';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
@@ -121,38 +118,6 @@ export const useMenu = () => {
           key: 'import',
           label: <DataImporter>{t('import')}</DataImporter>,
         },
-        isServerMode
-          ? null
-          : {
-              children: [
-                {
-                  key: 'allAgent',
-                  label: t('exportType.allAgent'),
-                  onClick: configService.exportAgents,
-                },
-                {
-                  key: 'allAgentWithMessage',
-                  label: t('exportType.allAgentWithMessage'),
-                  onClick: configService.exportSessions,
-                },
-                {
-                  key: 'globalSetting',
-                  label: t('exportType.globalSetting'),
-                  onClick: configService.exportSettings,
-                },
-                {
-                  type: 'divider',
-                },
-                {
-                  key: 'all',
-                  label: t('exportType.all'),
-                  onClick: configService.exportAll,
-                },
-              ],
-              icon: <Icon icon={HardDriveUpload} />,
-              key: 'export',
-              label: t('export'),
-            },
         {
           type: 'divider',
         },

package/src/features/User/__tests__/useMenu.test.tsx

@@ -81,7 +81,6 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'profile')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
     });
@@ -100,7 +99,6 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'profile')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
     });

package/src/locales/default/common.ts

@@ -209,6 +209,7 @@ export default {
       skips: '重复跳过',
       topics: '话题',
       type: '数据类型',
+      update: '记录更新',
     },
     title: '导入数据',
     uploading: {
@@ -217,6 +218,16 @@ export default {
       speed: '上传速度',
     },
   },
+  importPreview: {
+    confirmImport: '确认导入',
+    tables: {
+      count: '记录数',
+      name: '表名',
+    },
+    title: '导入数据预览',
+    totalRecords:"总计将导入 {{count}} 条记录",
+    totalTables: '{{count}} 个表',
+  },
   information: '社区与资讯',
   installPWA: '安装浏览器应用 (PWA)',
   lang: {

package/src/locales/default/error.ts

@@ -16,6 +16,16 @@ export default {
     detail: '错误详情',
     title: '请求失败',
   },
+  import: {
+    importConfigFile: {
+      description: '出错原因: {{reason}}',
+      title: '导入失败',
+    },
+    incompatible: {
+      description: '该文件由更高版本导出，请尝试升级到最新版本后再重新导入',
+      title: '当前应用不支持导入该文件',
+    },
+  },
   loginRequired: {
     desc: '即将自动跳转到登录页面',
     title: '请登录后使用该功能',