@lobehub/chat 1.46.7 → 1.47.1

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),
+  );
+};

package/src/features/DevPanel/index.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import FloatPanel from './FloatPanel';
+import PostgresViewer from './PostgresViewer';
+
+const DevPanel = () => (
+  <FloatPanel>
+    <PostgresViewer />
+  </FloatPanel>
+);
+
+export default DevPanel;

package/src/features/ModelSwitchPanel/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
@@ -76,7 +76,9 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
               </Flexbox>
             ),
             onClick: () => {
-              router.push(!isServerMode ? '/settings/llm' : `/settings/provider/${provider.id}`);
+              router.push(
+                isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${provider.id}`,
+              );
             },
           },
         ];

package/src/hooks/useEnabledChatModels.ts

@@ -1,6 +1,6 @@
 import isEqual from 'fast-deep-equal';
 
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
@@ -10,7 +10,7 @@ export const useEnabledChatModels = (): EnabledProviderWithModels[] => {
   const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
   const enabledChatModelList = useAiInfraStore((s) => s.enabledChatModelList, isEqual);
 
-  if (!isServerMode) {
+  if (isDeprecatedEdition) {
     return enabledList;
   }
 

package/src/hooks/useModelContextWindowTokens.ts

@@ -1,4 +1,4 @@
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
@@ -8,7 +8,7 @@ export const useModelContextWindowTokens = (model: string, provider: string) =>
 
   // TODO: remove this in V2.0
   const oldValue = useUserStore(modelProviderSelectors.modelMaxToken(model));
-  if (!isServerMode) return oldValue;
+  if (isDeprecatedEdition) return oldValue;
   //
 
   return newValue as number;

package/src/hooks/useModelHasContextWindowToken.ts

@@ -1,4 +1,4 @@
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
@@ -12,7 +12,7 @@ export const useModelHasContextWindowToken = () => {
 
   // TODO: remove this in V2.0
   const oldValue = useUserStore(modelProviderSelectors.isModelHasMaxToken(model));
-  if (!isServerMode) return oldValue;
+  if (isDeprecatedEdition) return oldValue;
   //
 
   return newValue;

package/src/hooks/useModelSupportToolUse.ts

@@ -1,4 +1,4 @@
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
@@ -8,7 +8,7 @@ export const useModelSupportToolUse = (model: string, provider: string) => {
 
   // TODO: remove this in V2.0
   const oldValue = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
-  if (!isServerMode) return oldValue;
+  if (isDeprecatedEdition) return oldValue;
   //
 
   return newValue;

package/src/hooks/useModelSupportVision.ts

@@ -1,4 +1,4 @@
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
@@ -8,7 +8,7 @@ export const useModelSupportVision = (model: string, provider: string) => {
 
   // TODO: remove this in V2.0
   const oldValue = useUserStore(modelProviderSelectors.isModelEnabledVision(model));
-  if (!isServerMode) return oldValue;
+  if (isDeprecatedEdition) return oldValue;
   //
 
   return newValue;

package/src/layout/GlobalProvider/index.tsx

@@ -9,7 +9,7 @@ import {
   LOBE_THEME_NEUTRAL_COLOR,
   LOBE_THEME_PRIMARY_COLOR,
 } from '@/const/theme';
-import DebugUI from '@/features/DebugUI';
+import DevPanel from '@/features/DevPanel';
 import { getServerGlobalConfig } from '@/server/globalConfig';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { getAntdLocale, parseBrowserLanguage } from '@/utils/locale';
@@ -65,9 +65,9 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
             <Suspense>
               <StoreInitialization />
               <ReactScan />
+              {process.env.NODE_ENV === 'development' && <DevPanel />}
             </Suspense>
           </ServerConfigStoreProvider>
-          <DebugUI />
         </AppTheme>
         <AntdV5MonkeyPatch />
       </Locale>

package/src/services/_auth.ts

@@ -1,5 +1,5 @@
 import { JWTPayload, LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
@@ -94,7 +94,7 @@ export const createPayloadWithKeyVaults = (provider: string) => {
   let keyVaults = {};
 
   // TODO: remove this condition in V2.0
-  if (!isServerMode) {
+  if (isDeprecatedEdition) {
     keyVaults = keyVaultsConfigSelectors.getVaultByProvider(provider as any)(
       useUserStore.getState(),
     );

package/src/services/aiModel/client.ts

@@ -0,0 +1,60 @@
+import { clientDB } from '@/database/client/db';
+import { AiInfraRepos } from '@/database/repositories/aiInfra';
+import { AiModelModel } from '@/database/server/models/aiModel';
+import { BaseClientService } from '@/services/baseClientService';
+
+import { IAiModelService } from './type';
+
+export class ClientService extends BaseClientService implements IAiModelService {
+  private get aiModel(): AiModelModel {
+    return new AiModelModel(clientDB as any, this.userId);
+  }
+  private get aiInfraRepos(): AiInfraRepos {
+    return new AiInfraRepos(clientDB as any, this.userId, {});
+  }
+
+  createAiModel: IAiModelService['createAiModel'] = async (params) => {
+    const data = await this.aiModel.create(params);
+
+    return data?.id;
+  };
+
+  getAiProviderModelList: IAiModelService['getAiProviderModelList'] = async (id) => {
+    return this.aiInfraRepos.getAiProviderModelList(id);
+  };
+
+  getAiModelById: IAiModelService['getAiModelById'] = async (id) => {
+    return this.aiModel.findById(id);
+  };
+
+  toggleModelEnabled: IAiModelService['toggleModelEnabled'] = async (params) => {
+    return this.aiModel.toggleModelEnabled(params);
+  };
+
+  updateAiModel: IAiModelService['updateAiModel'] = async (id, providerId, value) => {
+    return this.aiModel.update(id, providerId, value);
+  };
+
+  batchUpdateAiModels: IAiModelService['batchUpdateAiModels'] = async (id, models) => {
+    return this.aiModel.batchUpdateAiModels(id, models);
+  };
+
+  batchToggleAiModels: IAiModelService['batchToggleAiModels'] = async (id, models, enabled) => {
+    return this.aiModel.batchToggleAiModels(id, models, enabled);
+  };
+
+  clearRemoteModels: IAiModelService['clearRemoteModels'] = async (providerId) => {
+    return this.aiModel.clearRemoteModels(providerId);
+  };
+
+  updateAiModelOrder: IAiModelService['updateAiModelOrder'] = async (providerId, items) => {
+    return this.aiModel.updateModelsOrder(providerId, items);
+  };
+
+  deleteAiModel: IAiModelService['deleteAiModel'] = async (params: {
+    id: string;
+    providerId: string;
+  }) => {
+    return this.aiModel.delete(params.id, params.providerId);
+  };
+}

package/src/services/aiModel/index.test.ts

@@ -0,0 +1,10 @@
+import { testService } from '~test-utils';
+
+import { ClientService } from './client';
+import { ServerService } from './server';
+
+describe('aiModelService', () => {
+  testService(ServerService);
+
+  testService(ClientService);
+});

package/src/services/aiModel/index.ts

@@ -0,0 +1,5 @@
+import { ClientService } from './client';
+import { ServerService } from './server';
+
+export const aiModelService =
+  process.env.NEXT_PUBLIC_SERVICE_MODE === 'server' ? new ServerService() : new ClientService();

package/src/services/aiModel/server.ts

@@ -0,0 +1,47 @@
+import { lambdaClient } from '@/libs/trpc/client';
+import { IAiModelService } from '@/services/aiModel/type';
+
+export class ServerService implements IAiModelService {
+  createAiModel: IAiModelService['createAiModel'] = async (params) => {
+    return lambdaClient.aiModel.createAiModel.mutate(params);
+  };
+
+  getAiProviderModelList: IAiModelService['getAiProviderModelList'] = async (id) => {
+    return lambdaClient.aiModel.getAiProviderModelList.query({ id });
+  };
+
+  getAiModelById: IAiModelService['getAiModelById'] = async (id) => {
+    return lambdaClient.aiModel.getAiModelById.query({ id });
+  };
+
+  toggleModelEnabled: IAiModelService['toggleModelEnabled'] = async (params) => {
+    return lambdaClient.aiModel.toggleModelEnabled.mutate(params);
+  };
+
+  updateAiModel: IAiModelService['updateAiModel'] = async (id, providerId, value) => {
+    return lambdaClient.aiModel.updateAiModel.mutate({ id, providerId, value });
+  };
+
+  batchUpdateAiModels: IAiModelService['batchUpdateAiModels'] = async (id, models) => {
+    return lambdaClient.aiModel.batchUpdateAiModels.mutate({ id, models });
+  };
+
+  batchToggleAiModels: IAiModelService['batchToggleAiModels'] = async (id, models, enabled) => {
+    return lambdaClient.aiModel.batchToggleAiModels.mutate({ enabled, id, models });
+  };
+
+  clearRemoteModels: IAiModelService['clearRemoteModels'] = async (providerId) => {
+    return lambdaClient.aiModel.clearRemoteModels.mutate({ providerId });
+  };
+
+  updateAiModelOrder: IAiModelService['updateAiModelOrder'] = async (providerId, items) => {
+    return lambdaClient.aiModel.updateAiModelOrder.mutate({ providerId, sortMap: items });
+  };
+
+  deleteAiModel: IAiModelService['deleteAiModel'] = async (params: {
+    id: string;
+    providerId: string;
+  }) => {
+    return lambdaClient.aiModel.removeAiModel.mutate(params);
+  };
+}

package/src/services/aiModel/type.ts

@@ -0,0 +1,30 @@
+/* eslint-disable typescript-sort-keys/interface */
+import {
+  AiModelSortMap,
+  AiProviderModelListItem,
+  CreateAiModelParams,
+  ToggleAiModelEnableParams,
+  UpdateAiModelParams,
+} from '@/types/aiModel';
+
+export interface IAiModelService {
+  createAiModel: (params: CreateAiModelParams) => Promise<any>;
+
+  getAiProviderModelList: (id: string) => Promise<AiProviderModelListItem[]>;
+
+  getAiModelById: (id: string) => Promise<any>;
+
+  toggleModelEnabled: (params: ToggleAiModelEnableParams) => Promise<any>;
+
+  updateAiModel: (id: string, providerId: string, value: UpdateAiModelParams) => Promise<any>;
+
+  batchUpdateAiModels: (id: string, models: AiProviderModelListItem[]) => Promise<any>;
+
+  batchToggleAiModels: (id: string, models: string[], enabled: boolean) => Promise<any>;
+
+  clearRemoteModels: (providerId: string) => Promise<any>;
+
+  updateAiModelOrder: (providerId: string, items: AiModelSortMap[]) => Promise<any>;
+
+  deleteAiModel: (params: { id: string; providerId: string }) => Promise<any>;
+}

package/src/services/aiProvider/client.ts

@@ -0,0 +1,64 @@
+import { clientDB } from '@/database/client/db';
+import { AiInfraRepos } from '@/database/repositories/aiInfra';
+import { AiProviderModel } from '@/database/server/models/aiProvider';
+import { BaseClientService } from '@/services/baseClientService';
+
+import { IAiProviderService } from './type';
+
+export class ClientService extends BaseClientService implements IAiProviderService {
+  private get aiProviderModel(): AiProviderModel {
+    return new AiProviderModel(clientDB as any, this.userId);
+  }
+  private get aiInfraRepos(): AiInfraRepos {
+    let config = {};
+    if (typeof window !== 'undefined') {
+      config = window.global_serverConfigStore.getState().serverConfig.aiProvider || {};
+    }
+
+    return new AiInfraRepos(clientDB as any, this.userId, config);
+  }
+
+  createAiProvider: IAiProviderService['createAiProvider'] = async (params) => {
+    const data = await this.aiProviderModel.create(params);
+
+    return data?.id;
+  };
+
+  getAiProviderById: IAiProviderService['getAiProviderById'] = async (id) => {
+    return this.aiProviderModel.getAiProviderById(id);
+  };
+
+  getAiProviderList: IAiProviderService['getAiProviderList'] = async () => {
+    return await this.aiInfraRepos.getAiProviderList();
+  };
+
+  getAiProviderRuntimeState: IAiProviderService['getAiProviderRuntimeState'] = async () => {
+    const runtimeConfig = await this.aiProviderModel.getAiProviderRuntimeConfig();
+
+    const enabledAiProviders = await this.aiInfraRepos.getUserEnabledProviderList();
+
+    const enabledAiModels = await this.aiInfraRepos.getEnabledModels();
+
+    return { enabledAiModels, enabledAiProviders, runtimeConfig };
+  };
+
+  toggleProviderEnabled: IAiProviderService['toggleProviderEnabled'] = async (id, enabled) => {
+    return this.aiProviderModel.toggleProviderEnabled(id, enabled);
+  };
+
+  updateAiProvider: IAiProviderService['updateAiProvider'] = async (id, value) => {
+    return this.aiProviderModel.update(id, value);
+  };
+
+  updateAiProviderConfig: IAiProviderService['updateAiProviderConfig'] = async (id, value) => {
+    return this.aiProviderModel.updateConfig(id, value);
+  };
+
+  updateAiProviderOrder: IAiProviderService['updateAiProviderOrder'] = async (items) => {
+    return this.aiProviderModel.updateOrder(items);
+  };
+
+  deleteAiProvider: IAiProviderService['deleteAiProvider'] = async (id) => {
+    return this.aiProviderModel.delete(id);
+  };
+}