✨ feat: support new ai provider in client pglite (lobehub#5488)

* update to pglite mode

* add service

* 新增 DevPanel

* 新增数据库预览 UI

* Update useCategory.tsx

* add postgres table viewer

* improve table detail

* fix

* fix list

* fix custom provider in client mode

* fix build

* fix tests

* fix url

* add test for service

Author: arvinxx

package.json

@@ -27,11 +27,11 @@
   "sideEffects": false,
   "scripts": {
     "build": "next build",
-    "build:analyze": "ANALYZE=true next build",
-    "build:docker": "DOCKER=true next build && npm run build-sitemap",
     "postbuild": "npm run build-sitemap && npm run build-migrate-db",
     "build-migrate-db": "bun run db:migrate",
     "build-sitemap": "tsx ./scripts/buildSitemapIndex/index.ts",
+    "build:analyze": "ANALYZE=true next build",
+    "build:docker": "DOCKER=true next build && npm run build-sitemap",
     "db:generate": "drizzle-kit generate && npm run db:generate-client",
     "db:generate-client": "tsx ./scripts/migrateClientDB/compile-migrations.ts",
     "db:migrate": "MIGRATION_DB=1 tsx ./scripts/migrateServerDB/index.ts",
@@ -59,11 +59,11 @@
     "start": "next start -p 3210",
     "stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "npm run test-app && npm run test-server",
-    "test:update": "vitest -u",
     "test-app": "vitest run --config vitest.config.ts",
     "test-app:coverage": "vitest run --config vitest.config.ts  --coverage",
     "test-server": "vitest run --config vitest.server.config.ts",
     "test-server:coverage": "vitest run --config vitest.server.config.ts --coverage",
+    "test:update": "vitest -u",
     "type-check": "tsc --noEmit",
     "webhook:ngrok": "ngrok http http://localhost:3011",
     "workflow:cdn": "tsx ./scripts/cdnWorkflow/index.ts",
@@ -206,6 +206,7 @@
     "react-layout-kit": "^1.9.1",
     "react-lazy-load": "^4.0.1",
     "react-pdf": "^9.2.1",
+    "react-rnd": "^10.4.14",
     "react-scan": "^0.0.54",
     "react-virtuoso": "^4.12.3",
     "react-wrap-balancer": "^1.1.1",

src/app/(main)/discover/(detail)/provider/[slug]/features/ProviderConfig.tsx

@@ -10,7 +10,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlexboxProps } from 'react-layout-kit';
 
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { DiscoverProviderItem } from '@/types/discover';
 
 const useStyles = createStyles(({ css }) => ({
@@ -32,7 +32,7 @@ const ProviderConfig = memo<ProviderConfigProps>(({ data, identifier }) => {
 
   const router = useRouter();
   const openSettings = () => {
-    router.push(!isServerMode ? '/settings/llm' : `/settings/provider/${identifier}`);
+    router.push(isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${identifier}`);
   };
 
   const icon = <Icon icon={SquareArrowOutUpRight} size={{ fontSize: 16 }} />;

src/app/(main)/settings/hooks/useCategory.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
-import { isServerMode } from '@/const/version';
+import { isDeprecatedEdition } from '@/const/version';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -53,7 +53,7 @@ export const useCategory = () => {
         },
         showLLM &&
         // TODO: Remove /llm when v2.0
-        !isServerMode
+        (isDeprecatedEdition
           ? {
               icon: <Icon icon={Brain} />,
               key: SettingsTabs.LLM,
@@ -71,7 +71,7 @@ export const useCategory = () => {
                   {t('tab.provider')}
                 </Link>
               ),
-            },
+            }),
 
         enableSTT && {
           icon: <Icon icon={Mic2} />,

src/app/(main)/settings/provider/(detail)/[id]/ClientMode.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import { aiProviderService } from '@/services/aiProvider';
+
+import ModelList from '../../features/ModelList';
+import ProviderConfig from '../../features/ProviderConfig';
+
+const ClientMode = memo<{ id: string }>(({ id }) => {
+  const { data, isLoading } = useSWR('get-client-provider', () =>
+    aiProviderService.getAiProviderById(id),
+  );
+
+  return (
+    <Flexbox gap={24} paddingBlock={8}>
+      {!isLoading && data && <ProviderConfig {...data} />}
+      <ModelList id={id} />
+    </Flexbox>
+  );
+});
+
+export default ClientMode;

src/app/(main)/settings/provider/(detail)/[id]/page.tsx

@@ -8,6 +8,7 @@ import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
 import { PagePropsWithId } from '@/types/next';
 import { getUserAuth } from '@/utils/server/auth';
 
+import ClientMode from './ClientMode';
 import ProviderDetail from './index';
 
 const Page = async (props: PagePropsWithId) => {
@@ -33,7 +34,7 @@ const Page = async (props: PagePropsWithId) => {
     return <ProviderDetail {...userCard} />;
   }
 
-  return <div>not found</div>;
+  return <ClientMode id={params.id} />;
 };
 
 export default Page;

src/app/(main)/settings/provider/ProviderMenu/SortProviderModal/index.tsx

@@ -72,7 +72,6 @@ const ConfigGroupModal = memo<ConfigGroupModalProps>(({ open, onCancel, defaultI
               id: item.id,
               sort: index,
             }));
-            console.log(sortMap);
             setLoading(true);
             await updateAiProviderSort(sortMap);
             setLoading(false);

src/database/client/migrations.json

@@ -282,5 +282,16 @@
     "bps": true,
     "folderMillis": 1731858381716,
     "hash": "d8263bfefe296ed366379c7b7fc65195d12e6a1c0a9f1c96097ea28f2123fe50"
+  },
+  {
+    "sql": [
+      "CREATE TABLE \"ai_models\" (\n\t\"id\" varchar(150) NOT NULL,\n\t\"display_name\" varchar(200),\n\t\"description\" text,\n\t\"organization\" varchar(100),\n\t\"enabled\" boolean,\n\t\"provider_id\" varchar(64) NOT NULL,\n\t\"type\" varchar(20) DEFAULT 'chat' NOT NULL,\n\t\"sort\" integer,\n\t\"user_id\" text NOT NULL,\n\t\"pricing\" jsonb,\n\t\"parameters\" jsonb DEFAULT '{}'::jsonb,\n\t\"config\" jsonb,\n\t\"abilities\" jsonb DEFAULT '{}'::jsonb,\n\t\"context_window_tokens\" integer,\n\t\"source\" varchar(20),\n\t\"released_at\" varchar(10),\n\t\"accessed_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\t\"created_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\t\"updated_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\tCONSTRAINT \"ai_models_id_provider_id_user_id_pk\" PRIMARY KEY(\"id\",\"provider_id\",\"user_id\")\n);\n",
+      "\nCREATE TABLE \"ai_providers\" (\n\t\"id\" varchar(64) NOT NULL,\n\t\"name\" text,\n\t\"user_id\" text NOT NULL,\n\t\"sort\" integer,\n\t\"enabled\" boolean,\n\t\"fetch_on_client\" boolean,\n\t\"check_model\" text,\n\t\"logo\" text,\n\t\"description\" text,\n\t\"key_vaults\" text,\n\t\"source\" varchar(20),\n\t\"settings\" jsonb,\n\t\"accessed_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\t\"created_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\t\"updated_at\" timestamp with time zone DEFAULT now() NOT NULL,\n\tCONSTRAINT \"ai_providers_id_user_id_pk\" PRIMARY KEY(\"id\",\"user_id\")\n);\n",
+      "\nALTER TABLE \"ai_models\" ADD CONSTRAINT \"ai_models_user_id_users_id_fk\" FOREIGN KEY (\"user_id\") REFERENCES \"public\".\"users\"(\"id\") ON DELETE cascade ON UPDATE no action;",
+      "\nALTER TABLE \"ai_providers\" ADD CONSTRAINT \"ai_providers_user_id_users_id_fk\" FOREIGN KEY (\"user_id\") REFERENCES \"public\".\"users\"(\"id\") ON DELETE cascade ON UPDATE no action;"
+    ],
+    "bps": true,
+    "folderMillis": 1735834653361,
+    "hash": "845a692ceabbfc3caf252a97d3e19a213bc0c433df2689900135f9cfded2cf49"
   }
 ]