@lobehub/lobehub 2.0.0-next.3 → 2.0.0-next.31

package/renovate.json

@@ -1,5 +1,7 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "automerge": false,
+  "dependencyDashboard": true,
   "extends": [
     "config:recommended",
     ":dependencyDashboard",
@@ -9,17 +11,37 @@
     ":semanticPrefixFixDepsChoreOthers",
     "group:monorepos",
     "group:recommended",
-    "group:allNonMajor",
     "replacements:all",
     "workarounds:all"
   ],
   "ignoreDeps": [],
   "labels": ["dependencies"],
+  "packageRules": [
+    // 1) Pinned deps: isolate (OK to use separate* here because there's no matchUpdateTypes)
+    {
+      "description": "Isolate PRs for pinned deps (exact x.y.z)",
+      "matchManagers": ["npm", "pnpm", "yarn", "bun"],
+      "matchCurrentValue": "^\\d+\\.\\d+\\.\\d+([+-][0-9A-Za-z.-]+)?$",
+      "groupName": null,
+      "separateMinorPatch": true,
+      "separateMajorMinor": true
+    },
+    // 2) Non-pinned deps: Patch versions, grouped together
+    {
+      "description": "Group patch versions together for non-pinned deps",
+      "matchManagers": ["npm", "pnpm", "yarn", "bun"],
+      "matchCurrentValue": "/(^[~^]|[<>=| -])/", // anything that looks like a range
+      "groupName": "patch dependencies",
+      "matchUpdateTypes": ["patch"]
+    }
+  ],
   "postUpdateOptions": ["yarnDedupeHighest"],
   "prConcurrentLimit": 30,
   "prHourlyLimit": 0,
   "rangeStrategy": "bump",
   "rebaseWhen": "conflicted",
   "schedule": "on sunday before 6:00am",
+  "separateMajorMinor": true,
+  "separateMultipleMajor": true,
   "timezone": "UTC"
 }

package/scripts/migrateServerDB/errorHint.js

@@ -15,13 +15,7 @@ if you have any other question, please open issue here: https://github.com/lobeh
 const DB_FAIL_INIT_HINT = `------------------------------------------------------------------------------------------
 ⚠️ Database migrate failed due to not find the db instance.
 
-1) You might not switch to server db mode, please set the env blow and try again:
-
-\`\`\`
-NEXT_PUBLIC_SERVICE_MODE=server
-\`\`\`
-
-2) if you are using docker postgres image, you may need to set DATABASE_DRIVER to node
+if you are using docker postgres image, you may need to set DATABASE_DRIVER to node
 
 \`\`\`
 DATABASE_DRIVER=node

package/scripts/migrateServerDB/index.ts

@@ -17,13 +17,14 @@ const isDesktop = process.env.NEXT_PUBLIC_IS_DESKTOP_APP === '1';
 const runMigrations = async () => {
   const { serverDB } = await import('../../packages/database/src/server');
 
+  const time = Date.now();
   if (process.env.DATABASE_DRIVER === 'node') {
     await nodeMigrate(serverDB, { migrationsFolder });
   } else {
     await neonMigrate(serverDB, { migrationsFolder });
   }
 
-  console.log('✅ database migration pass.');
+  console.log('✅ database migration pass. use: %s ms', Date.now() - time);
   // eslint-disable-next-line unicorn/no-process-exit
   process.exit(0);
 };

package/src/app/(backend)/webapi/revalidate/route.ts

@@ -18,7 +18,7 @@ export const GET = async (request: NextRequest) => {
     return NextResponse.json('tag query parameter is required', { status: 400 });
   }
 
-  revalidateTag(tag);
+  revalidateTag(tag, 'max');
 
   return Response.json({ now: Date.now(), revalidated: true });
 };

package/src/app/[variants]/(auth)/signup/[[...signup]]/page.tsx

@@ -1,7 +1,6 @@
 import { SignUp } from '@clerk/nextjs';
-import { notFound, redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
 
-import { serverFeatureFlags } from '@/config/featureFlags';
 import { enableClerk } from '@/const/auth';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -21,12 +20,6 @@ export const generateMetadata = async (props: DynamicLayoutProps) => {
 const Page = () => {
   if (!enableClerk) return notFound();
 
-  const enableClerkSignUp = serverFeatureFlags().enableClerkSignUp;
-
-  if (!enableClerkSignUp) {
-    redirect('/login');
-  }
-
   return <SignUp path="/signup" />;
 };
 

package/src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -40,6 +40,15 @@ vi.mock('@/const/auth', () => ({
   },
 }));
 
+// Mock version constants
+vi.mock('@/const/version', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/const/version')>();
+  return {
+    ...actual,
+    isServerMode: false,
+  };
+});
+
 afterEach(() => {
   enableAuth = true;
   enableClerk = true;

package/src/app/[variants]/(main)/(mobile)/me/(home)/features/UserBanner.tsx

@@ -6,7 +6,6 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth, enableNextAuth } from '@/const/auth';
-import { isDeprecatedEdition } from '@/const/version';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';
@@ -25,11 +24,9 @@ const UserBanner = memo(() => {
           <Link href={'/profile'} style={{ color: 'inherit' }}>
             <UserInfo />
           </Link>
-          {!isDeprecatedEdition && (
-            <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
-              <DataStatistics paddingInline={12} />
-            </Link>
-          )}
+          <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
+            <DataStatistics paddingInline={12} />
+          </Link>
         </>
       ) : (
         <UserLoginOrSignup

package/src/app/[variants]/(main)/(mobile)/me/(home)/layout.tsx

@@ -2,7 +2,6 @@ import { PropsWithChildren, Suspense } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 
 import Header from './features/Header';
 
@@ -10,7 +9,6 @@ const Layout = ({ children }: PropsWithChildren) => {
   return (
     <MobileContentLayout header={<Header />} withNav>
       <Suspense fallback={<Loading />}>{children}</Suspense>
-      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -32,9 +32,6 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
     useServerConfigStore(featureFlagsSelectors);
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.NavigateToChat));
 
-  // Check if server mode is enabled
-  const isServerMode = process.env.NEXT_PUBLIC_SERVICE_MODE === 'server';
-
   const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
   const isFilesActive = tab === SidebarTabKey.Files;
   const isDiscoverActive = tab === SidebarTabKey.Discover;
@@ -69,7 +66,7 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
           tooltipProps={{ placement: 'right' }}
         />
       </Link>
-      {enableKnowledgeBase && isServerMode && (
+      {enableKnowledgeBase && (
         <Link aria-label={t('tab.knowledgeBase')} href={'/knowledge'}>
           <ActionIcon
             active={isFilesActive}

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/V1Mobile/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import ActionBar from './ActionBar';
 import Files from './Files';
@@ -37,7 +37,7 @@ const MobileChatInput = memo(() => {
   const { isLoading } = useInitAgentConfig();
 
   const [loading, value, onInput, onStop] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.inputMessage,
     s.updateInputMessage,
     s.stopGenerateMessage,

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/V1Mobile/useSend.ts

@@ -6,7 +6,7 @@ import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors, topicSelectors } from '@/store/chat/selectors';
 import { fileChatSelectors, useFileStore } from '@/store/file';
 import { getUserStoreState } from '@/store/user';
 
@@ -26,17 +26,19 @@ export const useSendMessage = () => {
   const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
 
   const isUploadingFiles = useFileStore(fileChatSelectors.isUploadingFiles);
-  const isSendButtonDisabledByMessage = useChatStore(chatSelectors.isSendButtonDisabledByMessage);
+  const isSendButtonDisabledByMessage = useChatStore(
+    messageStateSelectors.isSendButtonDisabledByMessage,
+  );
 
   const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
 
   const send = useCallback(async (params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
-    if (chatSelectors.isAIGenerating(store)) return;
+    if (messageStateSelectors.isAIGenerating(store)) return;
 
     // if uploading file or send button is disabled by message, then we should not send the message
     const isUploadingFiles = fileChatSelectors.isUploadingFiles(useFileStore.getState());
-    const isSendButtonDisabledByMessage = chatSelectors.isSendButtonDisabledByMessage(
+    const isSendButtonDisabledByMessage = messageStateSelectors.isSendButtonDisabledByMessage(
       useChatStore.getState(),
     );
 

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend.ts

@@ -5,7 +5,12 @@ import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { getChatStoreState, useChatStore } from '@/store/chat';
-import { aiChatSelectors, chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import {
+  aiChatSelectors,
+  chatSelectors,
+  messageStateSelectors,
+  topicSelectors,
+} from '@/store/chat/selectors';
 import { fileChatSelectors, useFileStore } from '@/store/file';
 import { mentionSelectors, useMentionStore } from '@/store/mention';
 import { useSessionStore } from '@/store/session';
@@ -38,8 +43,8 @@ export const useSend = () => {
     s.addAIMessage,
     s.stopGenerateMessage,
     s.cancelSendMessageInServer,
-    chatSelectors.isAIGenerating(s),
-    chatSelectors.isSendButtonDisabledByMessage(s),
+    messageStateSelectors.isAIGenerating(s),
+    messageStateSelectors.isSendButtonDisabledByMessage(s),
     aiChatSelectors.isCurrentSendMessageLoading(s),
   ]);
   const { analytics } = useAnalytics();
@@ -68,7 +73,7 @@ export const useSend = () => {
       return;
     }
 
-    if (chatSelectors.isAIGenerating(store)) return;
+    if (messageStateSelectors.isAIGenerating(store)) return;
 
     const inputMessage = store.inputMessage;
     // 发送时再取一次最新的文件列表，防止闭包拿到旧值
@@ -127,7 +132,7 @@ export const useSend = () => {
 
   const stop = () => {
     const store = getChatStoreState();
-    const generating = chatSelectors.isAIGenerating(store);
+    const generating = messageStateSelectors.isAIGenerating(store);
 
     if (generating) {
       stopGenerateMessage();
@@ -165,8 +170,8 @@ export const useSendGroupMessage = () => {
     s.sendGroupMessage,
     s.updateInputMessage,
     s.stopGenerateMessage,
-    chatSelectors.isSendButtonDisabledByMessage(s),
-    chatSelectors.isCreatingMessage(s),
+    messageStateSelectors.isSendButtonDisabledByMessage(s),
+    messageStateSelectors.isCreatingMessage(s),
   ]);
 
   const isSupervisorThinking = useChatStore((s) =>
@@ -205,7 +210,7 @@ export const useSendGroupMessage = () => {
 
       if (
         chatSelectors.isSupervisorLoading(store.activeId)(store) ||
-        chatSelectors.isCreatingMessage(store)
+        messageStateSelectors.isCreatingMessage(store)
       )
         return;
 
@@ -287,8 +292,8 @@ export const useSendGroupMessage = () => {
 
   const stop = useCallback(() => {
     const store = getChatStoreState();
-    const isAgentGenerating = chatSelectors.isAIGenerating(store);
-    const isCreating = chatSelectors.isCreatingMessage(store);
+    const isAgentGenerating = messageStateSelectors.isAIGenerating(store);
+    const isCreating = messageStateSelectors.isCreatingMessage(store);
 
     if (isAgentGenerating) {
       stopGenerateMessage();

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/Actions.tsx

@@ -1,3 +1,5 @@
+import { isDesktop } from '@lobechat/const';
+import { SessionDefaultGroup } from '@lobechat/types';
 import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStyles } from 'antd-style';
@@ -6,7 +8,6 @@ import isEqual from 'fast-deep-equal';
 import {
   Check,
   ExternalLink,
-  HardDriveDownload,
   ListTree,
   LucideCopy,
   LucidePlus,
@@ -18,14 +19,11 @@ import {
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { isDesktop, isServerMode } from '@/const/version';
-import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
 import { useChatGroupStore } from '@/store/chatGroup';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionGroupSelectors, sessionSelectors } from '@/store/session/selectors';
-import { SessionDefaultGroup } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`
@@ -148,29 +146,6 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, parentType
           {
             type: 'divider',
           },
-          isServerMode
-            ? undefined
-            : {
-                children: [
-                  {
-                    key: 'agent',
-                    label: t('exportType.agent', { ns: 'common' }),
-                    onClick: () => {
-                      configService.exportSingleAgent(id);
-                    },
-                  },
-                  {
-                    key: 'agentWithMessage',
-                    label: t('exportType.agentWithMessage', { ns: 'common' }),
-                    onClick: () => {
-                      configService.exportSingleSession(id);
-                    },
-                  },
-                ],
-                icon: <Icon icon={HardDriveDownload} />,
-                key: 'export',
-                label: t('export', { ns: 'common' }),
-              },
           {
             danger: true,
             icon: <Icon icon={Trash} />,

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -8,7 +8,7 @@ import { isDesktop } from '@/const/version';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
@@ -33,7 +33,9 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const openSessionInNewWindow = useGlobalStore((s) => s.openSessionInNewWindow);
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
-  const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
+  const [loading] = useChatStore((s) => [
+    messageStateSelectors.isAIGenerating(s) && id === s.activeId,
+  ]);
 
   const [pin, title, avatar, avatarBackground, updateAt, members, model, group, sessionType] =
     useSessionStore((s) => {

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { isDesktop } from '@/const/version';
-import InitClientDB from '@/features/InitClientDB';
 import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
 import { LayoutProps } from '../type';
@@ -22,7 +21,6 @@ const Layout = ({ children, session }: LayoutProps) => {
         <SessionPanel>{session}</SessionPanel>
         <Workspace>{children}</Workspace>
       </Flexbox>
-      {!isDesktop && <InitClientDB bottom={60} />}
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { Suspense, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { withSuspense } from '@/components/withSuspense';
-import InitClientDB from '@/features/InitClientDB';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import { LayoutProps } from './type';
@@ -40,9 +39,6 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
       >
         {children}
       </Flexbox>
-      <Suspense>
-        <InitClientDB bottom={100} />
-      </Suspense>
     </>
   );
 });

package/src/app/[variants]/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,69 +1,9 @@
-import { ActionIcon, Button, Dropdown, type MenuProps } from '@lobehub/ui';
-import { HardDriveDownload } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { isServerMode } from '@/const/version';
-import { configService } from '@/services/config';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
+import { memo } from 'react';
 
 import SubmitAgentButton from './SubmitAgentButton';
 
 export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
-  const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
-
-  const mobile = useServerConfigStore((s) => s.isMobile);
-
-  const items = useMemo<MenuProps['items']>(
-    () =>
-      isServerMode
-        ? []
-        : [
-            {
-              key: 'agent',
-              label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleAgent(id);
-              },
-            },
-            {
-              key: 'agentWithMessage',
-              label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleSession(id);
-              },
-            },
-          ],
-    [],
-  );
-
-  return (
-    <>
-      <SubmitAgentButton modal={modal} />
-      {!isServerMode && (
-        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-          {modal ? (
-            <Button block icon={HardDriveDownload} variant={'filled'}>
-              {t('export', { ns: 'common' })}
-            </Button>
-          ) : (
-            <ActionIcon
-              icon={HardDriveDownload}
-              size={HEADER_ICON_SIZE(mobile)}
-              title={t('export', { ns: 'common' })}
-            />
-          )}
-        </Dropdown>
-      )}
-    </>
-  );
+  return <SubmitAgentButton modal={modal} />;
 });
 
 export default HeaderContent;

package/src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -52,6 +52,7 @@ const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize })
     <Page
       className={styles.page}
       current={page ? Number(page) : currentPage}
+      data-testid="pagination"
       onChange={handlePageChange}
       pageSize={pageSize}
       showSizeChanger={false}

package/src/app/[variants]/(main)/discover/(list)/features/SortButton/index.tsx

@@ -174,7 +174,7 @@ const SortButton = memo(() => {
       }}
       trigger={['click', 'hover']}
     >
-      <Button icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
+      <Button data-testid="sort-dropdown" icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
         {activeItem.label}
         <Icon icon={ChevronDown} />
       </Button>

package/src/app/[variants]/(main)/discover/(list)/mcp/features/List/Item.tsx

@@ -82,6 +82,7 @@ const McpItem = memo<DiscoverMcpItem>(
     return (
       <Block
         clickable
+        data-testid="mcp-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/(list)/model/features/List/Item.tsx

@@ -61,6 +61,7 @@ const ModelItem = memo<DiscoverModelItem>(
     return (
       <Block
         clickable
+        data-testid="model-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/(list)/provider/features/List/Item.tsx

@@ -54,6 +54,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
     return (
       <Block
         clickable
+        data-testid="provider-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/components/CategoryMenu.tsx

@@ -31,7 +31,15 @@ const useStyles = createStyles(({ css, prefixCls }) => {
 const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
   const { styles } = useStyles();
 
-  return <Menu className={styles.menu} mode="inline" style={style} {...rest} />;
+  return (
+    <Menu
+      className={styles.menu}
+      data-testid="category-menu"
+      mode="inline"
+      style={style}
+      {...rest}
+    />
+  );
 });
 
 export default CategoryMenu;

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicList.tsx

@@ -34,6 +34,7 @@ const TopicsList = memo(() => {
     <Flexbox
       align="center"
       gap={12}
+      padding={12}
       ref={ref}
       style={{
         maxHeight: '100%',

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -73,7 +73,7 @@ const PromptInput = ({ showTitle = false }: PromptInputProps) => {
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       if (!isCreating && value.trim()) {
         handleGenerate();

package/src/app/[variants]/(main)/image/page.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import StructuredData from '@/components/StructuredData';
 import { BRANDING_NAME } from '@/const/branding';
-import InitClientDB from '@/features/InitClientDB';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -34,7 +33,6 @@ const AiImage = async (props: DynamicLayoutProps) => {
   return (
     <>
       <StructuredData ld={ld} />
-      <InitClientDB bottom={100} />
       <Suspense fallback={<SkeletonList />}>
         <ImageWorkspace />
       </Suspense>

package/src/app/[variants]/(main)/labs/components/LabCard.tsx

@@ -6,6 +6,8 @@ import Image from 'next/image';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { SkeletonSwitch } from '@/components/Skeleton';
+
 interface LabCardProps {
   checked: boolean;
   cover?: string;
@@ -71,18 +73,18 @@ const LabCard = memo<PropsWithChildren<LabCardProps>>(
         <div className={styles.card}>
           <div className={styles.row}>
             <div className={styles.thumb}>
-              {cover && <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} />}
+              {cover && (
+                <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} unoptimized />
+              )}
             </div>
             <Flexbox gap={6}>
               <div className={styles.title}>{title}</div>
               <div className={styles.desc}>{desc}</div>
               {meta ? <div className={styles.meta}>{meta}</div> : null}
             </Flexbox>
-            {!loading && (
-              <Flexbox align={'flex-end'} height={'100%'} justify={'center'} paddingInline={8}>
-                <Switch checked={checked} onChange={onChange} />
-              </Flexbox>
-            )}
+            <Flexbox align={'flex-end'} height={'100%'} justify={'center'} paddingInline={8}>
+              {loading ? <SkeletonSwitch /> : <Switch checked={checked} onChange={onChange} />}
+            </Flexbox>
           </div>
         </div>
       </div>