@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.346

package/src/features/SkillStore/LobeHubList/index.tsx

@@ -3,10 +3,9 @@
 import { KLAVIS_SERVER_TYPES, LOBEHUB_SKILL_PROVIDERS } from '@lobechat/const';
 import { createStaticStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import type { Klavis } from 'klavis';
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
-import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { createIntegrationDetailModal } from '@/features/IntegrationDetailModal';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { klavisStoreSelectors, lobehubSkillStoreSelectors } from '@/store/tool/selectors';
@@ -15,7 +14,6 @@ import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types'
 
 import Empty from '../Empty';
 import Item from './Item';
-import { useSkillConnect } from './useSkillConnect';
 
 const styles = createStaticStyles(({ css }) => ({
   grid: css`
@@ -36,40 +34,7 @@ interface LobeHubListProps {
   keywords: string;
 }
 
-interface DetailState {
-  identifier: string;
-  serverName?: Klavis.McpServerName;
-  type: 'klavis' | 'lobehub';
-}
-
-interface DetailModalWithConnectProps {
-  detailState: DetailState;
-  onClose: () => void;
-}
-
-const DetailModalWithConnect = memo<DetailModalWithConnectProps>(({ detailState, onClose }) => {
-  const { handleConnect, isConnecting } = useSkillConnect({
-    identifier: detailState.identifier,
-    serverName: detailState.serverName,
-    type: detailState.type,
-  });
-
-  return (
-    <IntegrationDetailModal
-      identifier={detailState.identifier}
-      isConnecting={isConnecting}
-      onClose={onClose}
-      onConnect={handleConnect}
-      open
-      type={detailState.type}
-    />
-  );
-});
-
-DetailModalWithConnect.displayName = 'DetailModalWithConnect';
-
 export const LobeHubList = memo<LobeHubListProps>(({ keywords }) => {
-  const [detailState, setDetailState] = useState<DetailState | null>(null);
 
   const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
   const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);
@@ -84,13 +49,19 @@ export const LobeHubList = memo<LobeHubListProps>(({ keywords }) => {
   useFetchLobehubSkillConnections(isLobehubSkillEnabled);
   useFetchUserKlavisServers(isKlavisEnabled);
 
-  const getLobehubSkillServerByProvider = (providerId: string) => {
-    return allLobehubSkillServers.find((server) => server.identifier === providerId);
-  };
+  const getLobehubSkillServerByProvider = useCallback(
+    (providerId: string) => {
+      return allLobehubSkillServers.find((server) => server.identifier === providerId);
+    },
+    [allLobehubSkillServers],
+  );
 
-  const getKlavisServerByIdentifier = (identifier: string) => {
-    return allKlavisServers.find((server) => server.identifier === identifier);
-  };
+  const getKlavisServerByIdentifier = useCallback(
+    (identifier: string) => {
+      return allKlavisServers.find((server) => server.identifier === identifier);
+    },
+    [allKlavisServers],
+  );
 
   const filteredItems = useMemo(() => {
     const items: Array<
@@ -127,57 +98,49 @@ export const LobeHubList = memo<LobeHubListProps>(({ keywords }) => {
   if (filteredItems.length === 0) return <Empty search={hasSearchKeywords} />;
 
   return (
-    <>
-      <div className={styles.grid}>
-        {filteredItems.map((item) => {
-          if (item.type === 'lobehub') {
-            const server = getLobehubSkillServerByProvider(item.provider.id);
-            const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
-            return (
-              <Item
-                description={item.provider.description}
-                icon={item.provider.icon}
-                identifier={item.provider.id}
-                isConnected={isConnected}
-                key={item.provider.id}
-                label={item.provider.label}
-                onOpenDetail={() =>
-                  setDetailState({ identifier: item.provider.id, type: 'lobehub' })
-                }
-                type="lobehub"
-              />
-            );
-          }
-          const server = getKlavisServerByIdentifier(item.serverType.identifier);
-          const isConnected = server?.status === KlavisServerStatus.CONNECTED;
+    <div className={styles.grid}>
+      {filteredItems.map((item) => {
+        if (item.type === 'lobehub') {
+          const server = getLobehubSkillServerByProvider(item.provider.id);
+          const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
           return (
             <Item
-              description={item.serverType.description}
-              icon={item.serverType.icon}
-              identifier={item.serverType.identifier}
+              description={item.provider.description}
+              icon={item.provider.icon}
+              identifier={item.provider.id}
               isConnected={isConnected}
-              key={item.serverType.identifier}
-              label={item.serverType.label}
+              key={item.provider.id}
+              label={item.provider.label}
               onOpenDetail={() =>
-                setDetailState({
-                  identifier: item.serverType.identifier,
-                  serverName: item.serverType.serverName,
-                  type: 'klavis',
-                })
+                createIntegrationDetailModal({ identifier: item.provider.id, type: 'lobehub' })
               }
-              serverName={item.serverType.serverName}
-              type="klavis"
+              type="lobehub"
             />
           );
-        })}
-      </div>
-      {detailState && (
-        <DetailModalWithConnect
-          detailState={detailState}
-          onClose={() => setDetailState(null)}
-        />
-      )}
-    </>
+        }
+        const server = getKlavisServerByIdentifier(item.serverType.identifier);
+        const isConnected = server?.status === KlavisServerStatus.CONNECTED;
+        return (
+          <Item
+            description={item.serverType.description}
+            icon={item.serverType.icon}
+            identifier={item.serverType.identifier}
+            isConnected={isConnected}
+            key={item.serverType.identifier}
+            label={item.serverType.label}
+            onOpenDetail={() =>
+              createIntegrationDetailModal({
+                identifier: item.serverType.identifier,
+                serverName: item.serverType.serverName,
+                type: 'klavis',
+              })
+            }
+            serverName={item.serverType.serverName}
+            type="klavis"
+          />
+        );
+      })}
+    </div>
   );
 });
 

package/src/features/SkillStore/Search/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useToolStore } from '@/store/tool';
 
-import { SkillStoreTab } from '../Content';
+import { SkillStoreTab } from '../SkillStoreContent';
 
 interface SearchProps {
   activeTab: SkillStoreTab;

package/src/features/SkillStore/{Content.tsx → SkillStoreContent.tsx}

@@ -2,11 +2,10 @@
 
 import { Flexbox, Segmented } from '@lobehub/ui';
 import { type SegmentedOptions } from 'antd/es/segmented';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AddSkillButton from './AddSkillButton';
-
 import CommunityList from './CommunityList';
 import LobeHubList from './LobeHubList';
 import Search from './Search';
@@ -16,7 +15,7 @@ export enum SkillStoreTab {
   LobeHub = 'lobehub',
 }
 
-export const Content = memo(() => {
+export const SkillStoreContent = () => {
   const { t } = useTranslation('setting');
   const [activeTab, setActiveTab] = useState<SkillStoreTab>(SkillStoreTab.LobeHub);
   const [lobehubKeywords, setLobehubKeywords] = useState('');
@@ -52,8 +51,4 @@ export const Content = memo(() => {
       </Flexbox>
     </Flexbox>
   );
-});
-
-Content.displayName = 'SkillStoreContent';
-
-export default Content;
+};

package/src/features/SkillStore/index.tsx

@@ -1,37 +1,19 @@
 'use client';
 
-import { Modal } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { createModal } from '@lobehub/ui';
+import { t } from 'i18next';
 
-import Content from './Content';
+import { SkillStoreContent } from './SkillStoreContent';
 
-interface SkillStoreProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-export const SkillStore = memo<SkillStoreProps>(({ open, setOpen }) => {
-  const { t } = useTranslation('setting');
-
-  return (
-    <Modal
-      allowFullscreen
-      destroyOnClose={false}
-      footer={null}
-      onCancel={() => setOpen(false)}
-      open={open}
-      styles={{
-        body: { overflow: 'hidden', padding: 0 },
-      }}
-      title={t('skillStore.title')}
-      width={'min(80%, 800px)'}
-    >
-      <Content />
-    </Modal>
-  );
-});
-
-SkillStore.displayName = 'SkillStore';
-
-export default SkillStore;
+export const createSkillStoreModal = () =>
+  createModal({
+    allowFullscreen: true,
+    children: <SkillStoreContent />,
+    destroyOnHidden: false,
+    footer: null,
+    styles: {
+      body: { overflow: 'hidden', padding: 0 },
+    },
+    title: t('skillStore.title', { ns: 'setting' }),
+    width: 'min(80%, 800px)',
+  });

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

@@ -10,8 +10,6 @@ import BusinessPanelContent from '@/business/client/features/User/BusinessPanelC
 import BrandWatermark from '@/components/BrandWatermark';
 import Menu from '@/components/Menu';
 import { isDesktop } from '@/const/version';
-import { enableBetterAuth, enableNextAuth } from '@/envs/auth';
-import { useRouter } from '@/libs/next/navigation';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
@@ -22,8 +20,6 @@ import LangButton from './LangButton';
 import { useMenu } from './useMenu';
 
 const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
-  const router = useRouter();
-
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
   const [openSignIn, signOut] = useUserStore((s) => [s.openLogin, s.logout]);
   const { mainItems, logoutItems } = useMenu();
@@ -52,10 +48,6 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
 
     signOut();
     closePopover();
-    // NextAuth and Better Auth handle redirect in their own signOut methods
-    if (enableNextAuth || enableBetterAuth) return;
-    // Clerk uses /login page
-    router.push('/login');
   };
 
   return (

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

@@ -68,19 +68,11 @@ vi.mock('@/const/version', () => ({
 }));
 
 // Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk, enableNextAuth } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: false },
+const { enableNextAuth } = vi.hoisted(() => ({
   enableNextAuth: { value: false },
 }));
 
 vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
   get enableNextAuth() {
     return enableNextAuth.value;
   },
@@ -140,32 +132,6 @@ describe('PanelContent', () => {
     });
   });
 
-  describe('disable auth', () => {
-    it('should render UserInfo', () => {
-      act(() => {
-        useUserStore.setState({ isSignedIn: true });
-      });
-
-      renderWithRouter(<PanelContent closePopover={closePopover} />);
-
-      expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
-      expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
-      expect(screen.queryByText('Mocked SignInBlock')).not.toBeInTheDocument();
-    });
-
-    it('should render BrandWatermark when disable auth', () => {
-      enableAuth.value = false;
-
-      act(() => {
-        useUserStore.setState({ isSignedIn: false });
-      });
-
-      renderWithRouter(<PanelContent closePopover={closePopover} />);
-
-      expect(screen.getByText('Mocked BrandWatermark')).toBeInTheDocument();
-    });
-  });
-
   it('should render Menu with main items', () => {
     renderWithRouter(<PanelContent closePopover={closePopover} />);
 

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

@@ -10,87 +10,60 @@ import UserAvatar from '../UserAvatar';
 vi.mock('zustand/traditional');
 
 // Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk, enableNextAuth } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: false },
+const { enableNextAuth } = vi.hoisted(() => ({
   enableNextAuth: { value: false },
 }));
 
 vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
   get enableNextAuth() {
     return enableNextAuth.value;
   },
 }));
 
 afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = false;
   enableNextAuth.value = false;
 });
 
 describe('UserAvatar', () => {
-  describe('enable Auth', () => {
-    it('should show the username and avatar are displayed when the user is logged in', async () => {
-      const mockAvatar = 'https://example.com/avatar.png';
-      const mockUsername = 'teeeeeestuser';
-
-      act(() => {
-        useUserStore.setState({
-          enableAuth: () => true,
-          isSignedIn: true,
-          user: { avatar: mockAvatar, id: 'abc', username: mockUsername },
-        });
+  it('should show the username and avatar are displayed when the user is logged in', async () => {
+    const mockAvatar = 'https://example.com/avatar.png';
+    const mockUsername = 'teeeeeestuser';
+
+    act(() => {
+      useUserStore.setState({
+        isSignedIn: true,
+        user: { avatar: mockAvatar, id: 'abc', username: mockUsername },
       });
-
-      render(<UserAvatar />);
-
-      expect(screen.getByAltText(mockUsername)).toBeInTheDocument();
-      expect(screen.getByAltText(mockUsername)).toHaveAttribute('src', mockAvatar);
     });
 
-    it('should show default avatar when the user is logged in but have no custom avatar', () => {
-      const mockUsername = 'testuser';
+    render(<UserAvatar />);
 
-      act(() => {
-        useUserStore.setState({
-          enableAuth: () => true,
-          isSignedIn: true,
-          user: { id: 'bbb', username: mockUsername },
-        });
-      });
+    expect(screen.getByAltText(mockUsername)).toBeInTheDocument();
+    expect(screen.getByAltText(mockUsername)).toHaveAttribute('src', mockAvatar);
+  });
 
-      render(<UserAvatar />);
-      // When user has no avatar url, <Avatar /> falls back to initials rendering (not an <img />)
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
+  it('should show default avatar when the user is logged in but have no custom avatar', () => {
+    const mockUsername = 'testuser';
 
-    it('should show LobeChat and default avatar when the user is not logged in and enable auth', () => {
-      act(() => {
-        useUserStore.setState({ enableAuth: () => true, isSignedIn: false, user: undefined });
+    act(() => {
+      useUserStore.setState({
+        isSignedIn: true,
+        user: { id: 'bbb', username: mockUsername },
       });
-
-      render(<UserAvatar />);
-      expect(screen.getByAltText(BRANDING_NAME)).toBeInTheDocument();
-      expect(screen.getByAltText(BRANDING_NAME)).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
     });
-  });
 
-  describe('disable Auth', () => {
-    it('should show LobeChat and default avatar when the user is not logged in and disabled auth', () => {
-      enableAuth.value = false;
-      act(() => {
-        useUserStore.setState({ enableAuth: () => false, isSignedIn: false, user: undefined });
-      });
+    render(<UserAvatar />);
+    // When user has no avatar url, <Avatar /> falls back to initials rendering (not an <img />)
+    expect(screen.getByText('TE')).toBeInTheDocument();
+  });
 
-      render(<UserAvatar />);
-      expect(screen.getByAltText(BRANDING_NAME)).toBeInTheDocument();
-      expect(screen.getByAltText(BRANDING_NAME)).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
+  it('should show LobeChat and default avatar when the user is not logged in', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: false, user: undefined });
     });
+
+    render(<UserAvatar />);
+    expect(screen.getByAltText(BRANDING_NAME)).toBeInTheDocument();
+    expect(screen.getByAltText(BRANDING_NAME)).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
   });
 });

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

@@ -48,33 +48,11 @@ vi.mock('./useNewVersion', () => ({
   useNewVersion: vi.fn(() => false),
 }));
 
-// Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: true },
-}));
-
-vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
-}));
-
-afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = true;
-});
-
 describe('useMenu', () => {
   it('should provide correct menu items when user is logged in with auth', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: true, enableAuth: () => true });
+      useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth.value = true;
-    enableClerk.value = false;
 
     const { result } = renderHook(() => useMenu(), { wrapper });
 
@@ -88,29 +66,10 @@ describe('useMenu', () => {
     });
   });
 
-  it('should provide correct menu items when user is logged in without auth', () => {
-    act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => false });
-    });
-    enableAuth.value = false;
-
-    const { result } = renderHook(() => useMenu(), { wrapper });
-
-    act(() => {
-      const { mainItems, logoutItems } = result.current;
-      // When not logged in (isLogin = false), these items should not be shown
-      // isLogin checks isSignedIn, so with isSignedIn: false, isLogin should be false
-      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(false);
-      expect(mainItems?.some((item) => item?.key === 'import')).toBe(false);
-      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
-    });
-  });
-
   it('should provide correct menu items when user is not logged in', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
+      useUserStore.setState({ isSignedIn: false });
     });
-    enableAuth.value = true;
 
     const { result } = renderHook(() => useMenu(), { wrapper });
 

package/src/layout/AuthProvider/index.tsx

@@ -4,7 +4,6 @@ import { type PropsWithChildren } from 'react';
 import { authEnv } from '@/envs/auth';
 
 import BetterAuth from './BetterAuth';
-import Clerk from './Clerk';
 import Desktop from './Desktop';
 import NextAuth from './NextAuth';
 import NoAuth from './NoAuth';
@@ -14,10 +13,6 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
     return <Desktop>{children}</Desktop>;
   }
 
-  if (authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH) {
-    return <Clerk>{children}</Clerk>;
-  }
-
   if (authEnv.NEXT_PUBLIC_ENABLE_BETTER_AUTH) {
     return <BetterAuth>{children}</BetterAuth>;
   }

package/src/libs/next/config/define-config.ts

@@ -17,16 +17,14 @@ interface CustomNextConfig {
 export function defineConfig(config: CustomNextConfig) {
   const isProd = process.env.NODE_ENV === 'production';
   const buildWithDocker = process.env.DOCKER === 'true';
-  const isDesktop = process.env.NEXT_PUBLIC_IS_DESKTOP_APP === '1';
+
   const enableReactScan = !!process.env.REACT_SCAN_MONITOR_API_KEY;
   const shouldUseCSP = process.env.ENABLED_CSP === '1';
 
   const isTest =
     process.env.NODE_ENV === 'test' || process.env.TEST === '1' || process.env.E2E === '1';
 
-  // if you need to proxy the api endpoint to remote server
-
-  const isStandaloneMode = buildWithDocker || isDesktop;
+  const isStandaloneMode = buildWithDocker || process.env.NEXT_BUILD_STANDALONE === '1';
 
   const standaloneConfig: NextConfig = {
     output: 'standalone',
@@ -38,6 +36,7 @@ export function defineConfig(config: CustomNextConfig) {
   const nextConfig: NextConfig = {
     ...(isStandaloneMode ? standaloneConfig : {}),
     assetPrefix,
+
     compiler: {
       emotion: true,
     },
@@ -313,15 +312,22 @@ export function defineConfig(config: CustomNextConfig) {
         permanent: true,
         source: '/chat',
       },
+      // Redirect old Clerk login route to Better Auth signin
+      {
+        destination: '/signin',
+        permanent: true,
+        source: '/login',
+      },
       ...(config.redirects ?? []),
     ],
-
     // when external packages in dev mode with turbopack, this config will lead to bundle error
+    // @napi-rs/canvas is a native module that can't be bundled by Turbopack
+    // pdfjs-dist uses @napi-rs/canvas for DOMMatrix polyfill in Node.js environment
     serverExternalPackages: config.serverExternalPackages
       ? config.serverExternalPackages
-      : ['pdfkit'],
+      : ['pdfkit', '@napi-rs/canvas', 'pdfjs-dist'],
 
-    transpilePackages: ['pdfjs-dist', 'mermaid', 'better-auth-harmony'],
+    transpilePackages: ['mermaid', 'better-auth-harmony'],
     turbopack: {
       rules: isTest
         ? void 0
@@ -400,14 +406,13 @@ export function defineConfig(config: CustomNextConfig) {
 
   const withBundleAnalyzer = process.env.ANALYZE === 'true' ? analyzer() : noWrapper;
 
-  const withPWA =
-    isProd && !isDesktop
-      ? withSerwistInit({
-          register: false,
-          swDest: 'public/sw.js',
-          swSrc: 'src/app/sw.ts',
-        })
-      : noWrapper;
+  const withPWA = isProd
+    ? withSerwistInit({
+        register: false,
+        swDest: 'public/sw.js',
+        swSrc: 'src/app/sw.ts',
+      })
+    : noWrapper;
 
   return withBundleAnalyzer(withPWA(nextConfig as NextConfig));
 }