@lobehub/lobehub 2.0.0-next.343 → 2.0.0-next.345

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -1,30 +1,9 @@
 'use client';
 
-import { Skeleton } from '@lobehub/ui';
-import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
-import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
-import { enableClerk } from '@/envs/auth';
-import dynamic from '@/libs/next/dynamic';
-
-const ClerkProfile = dynamic(() => import('./features/ClerkProfile'), {
-  loading: () => (
-    <div style={{ flex: 1 }}>
-      <Skeleton paragraph={{ rows: 8 }} title={false} />
-    </div>
-  ),
-});
-
 const Page = () => {
-  const { t } = useTranslation('setting');
-  if (!enableClerk) return <Navigate replace to="/settings" />;
-  return (
-    <>
-      <SettingHeader title={t('tab.security')} />
-      <ClerkProfile />
-    </>
-  );
+  return <Navigate replace to="/settings" />;
 };
 
 export default Page;

package/src/app/[variants]/(main)/settings/skill/features/KlavisSkillItem.tsx

@@ -8,7 +8,7 @@ import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { createIntegrationDetailModal } from '@/features/IntegrationDetailModal';
 import { useToolStore } from '@/store/tool';
 import { type KlavisServer, KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 import { useUserStore } from '@/store/user';
@@ -72,7 +72,6 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);
-  const [detailOpen, setDetailOpen] = useState(false);
 
   const oauthWindowRef = useRef<Window | null>(null);
   const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -313,8 +312,7 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
   const isConnected = server?.status === KlavisServerStatus.CONNECTED;
 
   return (
-    <>
-      <Flexbox
+    <Flexbox
         align="center"
         className={styles.container}
         gap={16}
@@ -324,7 +322,16 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
         <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
           <div className={styles.icon}>{renderIcon()}</div>
           <Flexbox gap={4} style={{ overflow: 'hidden' }}>
-            <span className={styles.title} onClick={() => setDetailOpen(true)}>
+            <span
+              className={styles.title}
+              onClick={() =>
+                createIntegrationDetailModal({
+                  identifier: serverType.identifier,
+                  serverName: serverType.serverName,
+                  type: 'klavis',
+                })
+              }
+            >
               {serverType.label}
             </span>
             {!isConnected && renderStatus()}
@@ -335,15 +342,6 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
           {renderAction()}
         </Flexbox>
       </Flexbox>
-      <IntegrationDetailModal
-        identifier={serverType.identifier}
-        isConnecting={isConnecting || isWaitingAuth}
-        onClose={() => setDetailOpen(false)}
-        onConnect={handleConnect}
-        open={detailOpen}
-        type="klavis"
-      />
-    </>
   );
 });
 

package/src/app/[variants]/(main)/settings/skill/features/LobehubSkillItem.tsx

@@ -8,7 +8,7 @@ import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { createIntegrationDetailModal } from '@/features/IntegrationDetailModal';
 import { useToolStore } from '@/store/tool';
 import {
   type LobehubSkillServer,
@@ -75,7 +75,6 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);
-  const [detailOpen, setDetailOpen] = useState(false);
 
   const oauthWindowRef = useRef<Window | null>(null);
   const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -299,8 +298,7 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
   const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
 
   return (
-    <>
-      <Flexbox
+    <Flexbox
         align="center"
         className={styles.container}
         gap={16}
@@ -314,7 +312,12 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
           <Flexbox gap={4} style={{ overflow: 'hidden' }}>
             <span
               className={`${styles.title} ${!isConnected ? styles.disconnectedTitle : ''}`}
-              onClick={() => setDetailOpen(true)}
+              onClick={() =>
+                createIntegrationDetailModal({
+                  identifier: provider.id,
+                  type: 'lobehub',
+                })
+              }
             >
               {provider.label}
             </span>
@@ -326,15 +329,6 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
           {renderAction()}
         </Flexbox>
       </Flexbox>
-      <IntegrationDetailModal
-        identifier={provider.id}
-        isConnecting={isConnecting || isWaitingAuth}
-        onClose={() => setDetailOpen(false)}
-        onConnect={handleConnect}
-        open={detailOpen}
-        type="lobehub"
-      />
-    </>
   );
 });
 

package/src/app/[variants]/(main)/settings/skill/index.tsx

@@ -2,30 +2,32 @@
 
 import { Button, Icon } from '@lobehub/ui';
 import { Store } from 'lucide-react';
-import { useState } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 
 import SkillList from './features/SkillList';
 
 const Page = () => {
   const { t } = useTranslation('setting');
-  const [open, setOpen] = useState(false);
+
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
 
   return (
     <>
       <SettingHeader
         extra={
-          <Button icon={<Icon icon={Store} />} onClick={() => setOpen(true)}>
+          <Button icon={<Icon icon={Store} />} onClick={handleOpenStore}>
             {t('skillStore.button')}
           </Button>
         }
         title={t('tab.skill')}
       />
       <SkillList />
-      <SkillStore open={open} setOpen={setOpen} />
     </>
   );
 };

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

@@ -31,48 +31,16 @@ vi.mock('@/const/version', () => ({
   isDesktop: false,
 }));
 
-// Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: false },
-}));
-
-vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
-}));
-
 afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = false;
   mockNavigate.mockReset();
 });
 
 describe('UserBanner', () => {
-  it('should render UserInfo and DataStatistics when auth is disabled', () => {
-    act(() => {
-      useUserStore.setState({ isSignedIn: false });
-    });
-    enableAuth.value = false;
-
-    render(<UserBanner />);
-
-    expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
-    expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
-    expect(screen.queryByText('Mocked UserLoginOrSignup')).not.toBeInTheDocument();
-  });
-
-  it('should render UserInfo and DataStatistics when user is logged in with auth enabled', () => {
+  it('should render UserInfo and DataStatistics when user is logged in', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
 
-    enableClerk.value = true;
-
     render(<UserBanner />);
 
     expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
@@ -80,11 +48,10 @@ describe('UserBanner', () => {
     expect(screen.queryByText('Mocked UserLoginOrSignup')).not.toBeInTheDocument();
   });
 
-  it('should render UserLoginOrSignup when user is not logged in with auth enabled', () => {
+  it('should render UserLoginOrSignup when user is not logged in', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableClerk.value = true;
 
     render(<UserBanner />);
 

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

@@ -22,21 +22,6 @@ vi.mock('react-i18next', () => ({
   })),
 }));
 
-// 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;
-  },
-}));
-
 // Mock version constants
 vi.mock('@/const/version', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/const/version')>();
@@ -47,8 +32,6 @@ vi.mock('@/const/version', async (importOriginal) => {
 });
 
 afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = true;
   mockNavigate.mockReset();
 });
 
@@ -57,8 +40,6 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth.value = true;
-    enableClerk.value = false;
 
     const mockOpenChangelogModal = vi.fn();
     const { result } = renderHook(() => useCategory(mockOpenChangelogModal), { wrapper });
@@ -77,7 +58,6 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableAuth.value = true;
 
     const mockOpenChangelogModal = vi.fn();
     const { result } = renderHook(() => useCategory(mockOpenChangelogModal), { wrapper });

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

@@ -4,7 +4,6 @@ import { Flexbox } from '@lobehub/ui';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { enableAuth } from '@/envs/auth';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';
@@ -17,7 +16,7 @@ const UserBanner = memo(() => {
 
   return (
     <Flexbox gap={12} paddingBlock={8}>
-      {!enableAuth || (enableAuth && isLoginWithAuth) ? (
+      {isLoginWithAuth ? (
         <>
           <Link style={{ color: 'inherit' }} to="/settings/profile">
             <UserInfo />

package/src/app/[variants]/(mobile)/me/profile/features/Category.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChartColumnBigIcon, LogOut, ShieldCheck, UserCircle } from 'lucide-react';
+import { ChartColumnBigIcon, LogOut, UserCircle } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,11 +11,7 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
-  const [isLogin, isLoginWithClerk, signOut] = useUserStore((s) => [
-    authSelectors.isLogin(s),
-    authSelectors.isLoginWithClerk(s),
-    s.logout,
-  ]);
+  const [isLogin, signOut] = useUserStore((s) => [authSelectors.isLogin(s), s.logout]);
   const navigate = useNavigate();
   const { t } = useTranslation('auth');
   const items: CellProps[] = [
@@ -25,12 +21,6 @@ const Category = memo(() => {
       label: t('tab.profile'),
       onClick: () => navigate('/settings/profile'),
     },
-    isLoginWithClerk && {
-      icon: ShieldCheck,
-      key: ProfileTabs.Security,
-      label: t('tab.security'),
-      onClick: () => navigate('/settings/security'),
-    },
     {
       icon: ChartColumnBigIcon,
       key: ProfileTabs.Stats,
@@ -46,7 +36,7 @@ const Category = memo(() => {
       label: t('signout', { ns: 'auth' }),
       onClick: () => {
         signOut();
-        navigate('/login');
+        navigate('/signin');
       },
     },
   ].filter(Boolean) as CellProps[];

package/src/app/[variants]/(mobile)/settings/_layout/Header.tsx

@@ -6,7 +6,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { enableAuth } from '@/envs/auth';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { type SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -16,7 +15,7 @@ const Header = memo(() => {
   const { t } = useTranslation('setting');
   const showMobileWorkspace = useShowMobileWorkspace();
   const navigate = useNavigate();
-  const params = useParams<{ providerId?: string, tab?: string; }>();
+  const params = useParams<{ providerId?: string; tab?: string }>();
 
   const isSessionActive = useSessionStore((s) => !!s.activeId);
   const isProvider = params.providerId && params.providerId !== 'all';
@@ -27,7 +26,7 @@ const Header = memo(() => {
     } else if (isProvider) {
       navigate('/settings/provider/all');
     } else {
-      navigate(enableAuth ? '/me/settings' : '/me');
+      navigate('/me/settings');
     }
   };
 

package/src/app/[variants]/share/t/[id]/_layout/index.tsx

@@ -65,7 +65,7 @@ const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
                 <UserAvatar size={32} />
               </Link>
             ) : (
-              <NextLink href="/login">
+              <NextLink href="/signin">
                 <ProductLogo size={32} />
               </NextLink>
             )}

package/src/app/[variants]/share/t/[id]/index.tsx

@@ -56,7 +56,7 @@ const ShareTopicPage = memo(() => {
           <NotFound
             desc={t('sharePage.error.unauthorized.subtitle')}
             extra={
-              <Button href="/login" type="primary">
+              <Button href="/signin" type="primary">
                 {t('sharePage.error.unauthorized.action')}
               </Button>
             }

package/src/app/robots.tsx

@@ -26,7 +26,7 @@ const robots = (): MetadataRoute.Robots => {
       },
       {
         allow: ['/'],
-        disallow: ['/api/*', '/login', '/signup', '/knowledge/*', '/share/*'],
+        disallow: ['/api/*', '/signin', '/signup', '/knowledge/*', '/share/*'],
         userAgent: '*',
       },
     ],

package/src/envs/auth.ts

@@ -6,11 +6,6 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv {
-      // ===== Clerk ===== //
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
-      CLERK_SECRET_KEY?: string;
-      CLERK_WEBHOOK_SECRET?: string;
-
       // ===== Auth (shared by Better Auth / Next Auth) ===== //
       AUTH_SECRET?: string;
       AUTH_EMAIL_VERIFICATION?: string;
@@ -136,10 +131,6 @@ declare global {
 export const getAuthConfig = () => {
   return createEnv({
     client: {
-      // ---------------------------------- clerk ----------------------------------
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH: z.boolean().optional().default(false),
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: z.boolean().optional(),
 
@@ -147,10 +138,6 @@ export const getAuthConfig = () => {
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
     },
     server: {
-      // ---------------------------------- clerk ----------------------------------
-      CLERK_SECRET_KEY: z.string().optional(),
-      CLERK_WEBHOOK_SECRET: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       AUTH_SECRET: z.string().optional(),
       AUTH_SSO_PROVIDERS: z.string().optional().default(''),
@@ -261,14 +248,6 @@ export const getAuthConfig = () => {
     },
 
     runtimeEnv: {
-      // Clerk
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH:
-        process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1' ||
-        !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
-      CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1',
       // Fallback to NEXT_PUBLIC_* for seamless migration
@@ -396,13 +375,9 @@ export const getAuthConfig = () => {
 export const authEnv = getAuthConfig();
 
 // Auth flags - use process.env directly for build-time dead code elimination
-export const enableClerk =
-  process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1'
-    ? true
-    : !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
-export const enableBetterAuth = process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1';
+// Better Auth is the default auth solution when NextAuth is not explicitly enabled
 export const enableNextAuth = process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1';
-export const enableAuth = enableClerk || enableBetterAuth || enableNextAuth || false;
+export const enableBetterAuth = !enableNextAuth;
 
 // Auth headers and constants
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';

package/src/envs/llm.ts

@@ -241,7 +241,7 @@ export const getLLMConfig = () => {
       ENABLED_DEEPSEEK: !!process.env.DEEPSEEK_API_KEY,
       DEEPSEEK_API_KEY: process.env.DEEPSEEK_API_KEY,
 
-      ENABLED_GOOGLE: !!process.env.GOOGLE_API_KEY,
+      ENABLED_GOOGLE: process.env.ENABLED_GOOGLE !== '0',
       GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
 
       ENABLED_VERTEXAI: !!process.env.VERTEXAI_CREDENTIALS,
@@ -252,7 +252,7 @@ export const getLLMConfig = () => {
       ENABLED_PERPLEXITY: !!process.env.PERPLEXITY_API_KEY,
       PERPLEXITY_API_KEY: process.env.PERPLEXITY_API_KEY,
 
-      ENABLED_ANTHROPIC: !!process.env.ANTHROPIC_API_KEY,
+      ENABLED_ANTHROPIC: process.env.ENABLED_ANTHROPIC !== '0',
       ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
 
       ENABLED_MINIMAX: !!process.env.MINIMAX_API_KEY,

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -5,14 +5,14 @@ import { Center, Flexbox } from '@lobehub/ui';
 import { Space, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideTrash2, Plug2, Store } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import PluginTag from '@/components/Plugins/PluginTag';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
@@ -27,10 +27,12 @@ import PluginAction from './PluginAction';
 const AgentPlugin = memo(() => {
   const { t } = useTranslation('setting');
 
-  const [showStore, setShowStore] = useState(false);
-
   const navigate = useNavigate();
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   const [userEnabledPlugins, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
     s.toggleAgentPlugin,
@@ -120,7 +122,7 @@ const AgentPlugin = memo(() => {
             icon={Store}
             onClick={(e) => {
               e.stopPropagation();
-              setShowStore(true);
+              handleOpenStore();
             }}
             size={'small'}
           />
@@ -139,7 +141,7 @@ const AgentPlugin = memo(() => {
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                setShowStore(true);
+                handleOpenStore();
                 navigate('/community/mcp');
               }}
               to={'/community/mcp'}
@@ -168,12 +170,7 @@ const AgentPlugin = memo(() => {
     title: t('settingPlugin.title'),
   };
 
-  return (
-    <>
-      <SkillStore open={showStore} setOpen={setShowStore} />
-      <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />
-    </>
-  );
+  return <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />;
 });
 
 export default AgentPlugin;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,8 +1,8 @@
 import { Blocks } from 'lucide-react';
-import { Suspense, memo, useState } from 'react';
+import { Suspense, memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
@@ -15,7 +15,6 @@ import { useControls } from './useControls';
 
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
-  const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
   const { marketItems } = useControls({
     setUpdating,
@@ -29,6 +28,10 @@ const Tools = memo(() => {
 
   const enableFC = useModelSupportToolUse(model, provider);
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   if (!enableFC)
     return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
 
@@ -42,7 +45,7 @@ const Tools = memo(() => {
             <PopoverContent
               enableKlavis={enableKlavis}
               items={marketItems}
-              onOpenStore={() => setModalOpen(true)}
+              onOpenStore={handleOpenStore}
             />
           ),
           maxWidth: 320,
@@ -56,7 +59,6 @@ const Tools = memo(() => {
         showTooltip={false}
         title={t('tools.title')}
       />
-      <SkillStore open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });

package/src/features/ChatMiniMap/utils.ts

@@ -1,4 +1,4 @@
-import { markdownToTxt } from 'markdown-to-txt';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 const MIN_WIDTH = 12;
 const MAX_WIDTH = 24;

package/src/features/CommandMenu/SearchResults.tsx

@@ -11,12 +11,12 @@ import {
   Puzzle,
   Sparkles,
 } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import type { SearchResult } from '@/database/repositories/search';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import { CommandItem } from './components';
 import { styles } from './styles';