@lobehub/chat 1.76.1 → 1.77.1

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

@@ -279,26 +279,102 @@ export class SessionModel {
   // **************** Delete *************** //
 
   /**
-   * Delete a session, also delete all messages and topics associated with it.
+   * Delete a session and its associated agent data if no longer referenced.
    */
   delete = async (id: string) => {
-    return this.db
-      .delete(sessions)
-      .where(and(eq(sessions.id, id), eq(sessions.userId, this.userId)));
+    return this.db.transaction(async (trx) => {
+      // First get the agent IDs associated with this session
+      const links = await trx
+        .select({ agentId: agentsToSessions.agentId })
+        .from(agentsToSessions)
+        .where(and(eq(agentsToSessions.sessionId, id), eq(agentsToSessions.userId, this.userId)));
+
+      const agentIds = links.map((link) => link.agentId);
+
+      // Delete links in agentsToSessions
+      await trx
+        .delete(agentsToSessions)
+        .where(and(eq(agentsToSessions.sessionId, id), eq(agentsToSessions.userId, this.userId)));
+
+      // Delete the session
+      const result = await trx
+        .delete(sessions)
+        .where(and(eq(sessions.id, id), eq(sessions.userId, this.userId)));
+
+      // Delete orphaned agents
+      await this.clearOrphanAgent(agentIds, trx);
+
+      return result;
+    });
   };
 
   /**
-   * Batch delete sessions, also delete all messages and topics associated with them.
+   * Batch delete sessions and their associated agent data if no longer referenced.
    */
   batchDelete = async (ids: string[]) => {
-    return this.db
-      .delete(sessions)
-      .where(and(inArray(sessions.id, ids), eq(sessions.userId, this.userId)));
+    if (ids.length === 0) return { count: 0 };
+
+    return this.db.transaction(async (trx) => {
+      // Get agent IDs associated with these sessions
+      const links = await trx
+        .select({ agentId: agentsToSessions.agentId })
+        .from(agentsToSessions)
+        .where(
+          and(inArray(agentsToSessions.sessionId, ids), eq(agentsToSessions.userId, this.userId)),
+        );
+
+      const agentIds = [...new Set(links.map((link) => link.agentId))];
+
+      // Delete links in agentsToSessions
+      await trx
+        .delete(agentsToSessions)
+        .where(
+          and(inArray(agentsToSessions.sessionId, ids), eq(agentsToSessions.userId, this.userId)),
+        );
+
+      // Delete the sessions
+      const result = await trx
+        .delete(sessions)
+        .where(and(inArray(sessions.id, ids), eq(sessions.userId, this.userId)));
+
+      // Delete orphaned agents
+      await this.clearOrphanAgent(agentIds, trx);
+
+      return result;
+    });
   };
 
+  /**
+   * Delete all sessions and their associated agent data for this user.
+   */
   deleteAll = async () => {
-    return this.db.delete(sessions).where(eq(sessions.userId, this.userId));
+    return this.db.transaction(async (trx) => {
+      // Delete all agentsToSessions for this user
+      await trx.delete(agentsToSessions).where(eq(agentsToSessions.userId, this.userId));
+
+      // Delete all agents that were only used by this user's sessions
+      await trx.delete(agents).where(eq(agents.userId, this.userId));
+
+      // Delete all sessions for this user
+      return trx.delete(sessions).where(eq(sessions.userId, this.userId));
+    });
+  };
+
+  clearOrphanAgent = async (agentIds: string[], trx: any) => {
+    // Delete orphaned agents (those not linked to any other sessions)
+    for (const agentId of agentIds) {
+      const remaining = await trx
+        .select()
+        .from(agentsToSessions)
+        .where(eq(agentsToSessions.agentId, agentId))
+        .limit(1);
+
+      if (remaining.length === 0) {
+        await trx.delete(agents).where(and(eq(agents.id, agentId), eq(agents.userId, this.userId)));
+      }
+    }
   };
+
   // **************** Update *************** //
 
   update = async (id: string, data: Partial<SessionItem>) => {

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',
           },
           {