@lobehub/lobehub 2.0.0-next.235 → 2.0.0-next.237

package/.devcontainer/devcontainer.json

@@ -1,7 +1,9 @@
 {
   "features": {
     "ghcr.io/devcontainer-community/devcontainer-features/bun.sh:1": {},
-    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {}
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
+      "moby": false
+    }
   },
   "image": "mcr.microsoft.com/devcontainers/typescript-node"
-}
+}

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [Version 2.0.0-next.237](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.236...v2.0.0-next.237)
+
+<sup>Released on **2026-01-08**</sup>
+
+#### ✨ Features
+
+- **ui**: Move new topic button to navigation panel.
+
+#### 🐛 Bug Fixes
+
+- **onboarding**: Prevent step overflow and misc improvements.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **ui**: Move new topic button to navigation panel, closes [#11325](https://github.com/lobehub/lobe-chat/issues/11325) ([3d6b399](https://github.com/lobehub/lobe-chat/commit/3d6b399))
+
+#### What's fixed
+
+- **onboarding**: Prevent step overflow and misc improvements, closes [#11322](https://github.com/lobehub/lobe-chat/issues/11322) ([8586fd4](https://github.com/lobehub/lobe-chat/commit/8586fd4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.236](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.235...v2.0.0-next.236)
+
+<sup>Released on **2026-01-08**</sup>
+
+#### 🐛 Bug Fixes
+
+- **provider-config**: Update isFetchOnClient Switch component.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **provider-config**: Update isFetchOnClient Switch component, closes [#11215](https://github.com/lobehub/lobe-chat/issues/11215) ([5bb038b](https://github.com/lobehub/lobe-chat/commit/5bb038b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.235](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.234...v2.0.0-next.235)
 
 <sup>Released on **2026-01-08**</sup>

package/changelog/v1.json

@@ -1,4 +1,14 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-08",
+    "version": "2.0.0-next.237"
+  },
+  {
+    "children": {},
+    "date": "2026-01-08",
+    "version": "2.0.0-next.236"
+  },
   {
     "children": {
       "improvements": [

package/locales/zh-CN/subscription.json

@@ -330,7 +330,7 @@
   "switchToYearly.desc": "切换后，支付差价后立即生效年付计费，起始日期继承原计划。",
   "switchToYearly.title": "切换为年付",
   "tab.billing": "账单管理",
-  "tab.funds": "点数管理",
+  "tab.funds": "积分管理",
   "tab.plans": "订阅计划",
   "tab.referral": "推荐奖励",
   "tab.spend": "点数明细",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.235",
+  "version": "2.0.0-next.237",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/model-bank/src/aiModels/anthropic.ts

@@ -292,36 +292,6 @@ const anthropicChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
-  {
-    abilities: {
-      functionCall: true,
-      vision: true,
-    },
-    contextWindowTokens: 200_000,
-    description:
-      'Claude 3 Opus is Anthropic’s most powerful model for highly complex tasks, excelling in performance, intelligence, fluency, and comprehension.',
-    displayName: 'Claude 3 Opus',
-    id: 'claude-3-opus-20240229',
-    maxOutput: 4096,
-    pricing: {
-      units: [
-        { name: 'textInput_cacheRead', rate: 1.5, strategy: 'fixed', unit: 'millionTokens' },
-        { name: 'textInput', rate: 15, strategy: 'fixed', unit: 'millionTokens' },
-        { name: 'textOutput', rate: 75, strategy: 'fixed', unit: 'millionTokens' },
-        {
-          lookup: { prices: { '1h': 30, '5m': 18.75 }, pricingParams: ['ttl'] },
-          name: 'textInput_cacheWrite',
-          strategy: 'lookup',
-          unit: 'millionTokens',
-        },
-      ],
-    },
-    releasedAt: '2024-02-29',
-    settings: {
-      extendParams: ['disableContextCaching'],
-    },
-    type: 'chat',
-  },
 ];
 
 export const allModels = [...anthropicChatModels];

package/packages/model-bank/src/aiModels/volcengine.ts

@@ -10,12 +10,13 @@ const doubaoChatModels: AIChatModelCard[] = [
       vision: true,
     },
     config: {
-      deploymentName: 'doubao-seed-1-8-251215',
+      deploymentName: 'doubao-seed-1-8-251228',
     },
     contextWindowTokens: 256_000,
     description:
       'Doubao-Seed-1.8 有着更强的多模态理解能力和 Agent 能力，支持文本/图片/视频输入与上下文缓存，可在复杂任务中提供更出色的表现。',
     displayName: 'Doubao Seed 1.8',
+    enabled: true,
     id: 'doubao-seed-1.8',
     maxOutput: 64_000,
     pricing: {

package/packages/types/src/user/onboarding.ts

@@ -9,8 +9,10 @@ export interface UserOnboarding {
   version: number;
 }
 
+export const MAX_ONBOARDING_STEPS = 5;
+
 export const UserOnboardingSchema = z.object({
-  currentStep: z.number().optional(),
+  currentStep: z.number().min(1).max(MAX_ONBOARDING_STEPS).optional(),
   finishedAt: z.string().optional(),
   version: z.number(),
 });

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox } from '@lobehub/ui';
 import { BotPromptIcon } from '@lobehub/ui/icons';
-import { SearchIcon } from 'lucide-react';
+import { MessageSquarePlusIcon, SearchIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ import urlJoin from 'url-join';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useActionSWR } from '@/libs/swr';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -19,6 +20,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 
 const Nav = memo(() => {
   const { t } = useTranslation('chat');
+  const { t: tTopic } = useTranslation('topic');
   const isInbox = useAgentStore(builtinAgentSelectors.isInboxAgent);
   const params = useParams();
   const agentId = params.aid;
@@ -29,9 +31,25 @@ const Nav = memo(() => {
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
   const hideProfile = isInbox || !isAgentEditable;
   const switchTopic = useChatStore((s) => s.switchTopic);
+  const [openNewTopicOrSaveTopic] = useChatStore((s) => [s.openNewTopicOrSaveTopic]);
+
+  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
+  const handleNewTopic = () => {
+    // If in agent sub-route, navigate back to agent chat first
+    if (isProfileActive && agentId) {
+      router.push(urlJoin('/agent', agentId));
+    }
+    mutate();
+  };
 
   return (
     <Flexbox gap={1} paddingInline={4}>
+      <NavItem
+        icon={MessageSquarePlusIcon}
+        loading={isValidating}
+        onClick={handleNewTopic}
+        title={tTopic('actions.addNewTopic')}
+      />
       {!hideProfile && (
         <NavItem
           active={isProfileActive}

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

@@ -4,14 +4,13 @@ import { type PropsWithChildren, memo } from 'react';
 
 import SideBarHeaderLayout from '@/features/NavPanel/SideBarHeaderLayout';
 
-import AddTopicButon from './AddTopicButon';
 import Agent from './Agent';
 import Nav from './Nav';
 
 const HeaderInfo = memo<PropsWithChildren>(() => {
   return (
     <>
-      <SideBarHeaderLayout left={<Agent />} right={<AddTopicButon />} />
+      <SideBarHeaderLayout left={<Agent />} />
       <Nav />
     </>
   );

package/src/app/[variants]/(main)/settings/profile/features/KlavisAuthorizationList/index.tsx

@@ -4,11 +4,8 @@ import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { modal } from '@/components/AntdStaticMethods';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useToolStore } from '@/store/tool';
-import { type KlavisServer, KlavisServerStatus } from '@/store/tool/slices/klavisStore';
-import { type ToolStore } from '@/store/tool/store';
+import { type KlavisServer } from '@/store/tool/slices/klavisStore';
 
 interface KlavisAuthItemProps {
   server: KlavisServer;
@@ -54,11 +51,6 @@ const KlavisAuthItem = memo<KlavisAuthItemProps>(({ server }) => {
     return <IconComponent size={14} />;
   };
 
-  // 只显示已连接的服务器
-  if (server.status !== KlavisServerStatus.CONNECTED) {
-    return null;
-  }
-
   return (
     <Tag closable onClose={handleRevoke}>
       <Flexbox align="center" gap={4} horizontal style={{ opacity: isRevoking ? 0.5 : 1 }}>
@@ -69,24 +61,14 @@ const KlavisAuthItem = memo<KlavisAuthItemProps>(({ server }) => {
   );
 });
 
-export const KlavisAuthorizationList = memo(() => {
-  const enableKlavis = useServerConfigStore(serverConfigSelectors.enableKlavis);
-  const useFetchUserKlavisServers = useToolStore((s: ToolStore) => s.useFetchUserKlavisServers);
-  const servers = useToolStore((s: ToolStore) => s.servers);
-
-  // 获取已授权的服务器列表
-  useFetchUserKlavisServers(enableKlavis);
-
-  // 只显示已连接的服务器
-  const connectedServers = servers.filter((s) => s.status === KlavisServerStatus.CONNECTED);
-
-  if (!enableKlavis || connectedServers.length === 0) {
-    return null;
-  }
+interface KlavisAuthorizationListProps {
+  servers: KlavisServer[];
+}
 
+export const KlavisAuthorizationList = memo<KlavisAuthorizationListProps>(({ servers }) => {
   return (
     <Flexbox gap={8} horizontal wrap="wrap">
-      {connectedServers.map((server) => (
+      {servers.map((server) => (
         <KlavisAuthItem key={server.identifier} server={server} />
       ))}
     </Flexbox>

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

@@ -9,6 +9,8 @@ import { useTranslation } from 'react-i18next';
 import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
+import { useToolStore } from '@/store/tool';
+import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 import { useUserStore } from '@/store/user';
 import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
@@ -37,9 +39,21 @@ const ProfileSetting = ({ mobile }: ProfileSettingProps) => {
   const isLoadedAuthProviders = useUserStore(authSelectors.isLoadedAuthProviders);
   const fetchAuthProviders = useUserStore((s) => s.fetchAuthProviders);
   const enableKlavis = useServerConfigStore(serverConfigSelectors.enableKlavis);
+  const [servers, isServersInit, useFetchUserKlavisServers] = useToolStore((s) => [
+    s.servers,
+    s.isServersInit,
+    s.useFetchUserKlavisServers,
+  ]);
+  const connectedServers = servers.filter((s) => s.status === KlavisServerStatus.CONNECTED);
+
+  // Fetch Klavis servers
+  useFetchUserKlavisServers(enableKlavis);
 
   const isLoginWithAuth = isLoginWithNextAuth || isLoginWithBetterAuth;
-  const isLoading = !isUserLoaded || (isLoginWithAuth && !isLoadedAuthProviders);
+  const isLoading =
+    !isUserLoaded ||
+    (isLoginWithAuth && !isLoadedAuthProviders) ||
+    (enableKlavis && !isServersInit);
 
   useEffect(() => {
     if (isLoginWithAuth) {
@@ -110,11 +124,11 @@ const ProfileSetting = ({ mobile }: ProfileSettingProps) => {
         )}
 
         {/* Klavis Authorizations Row */}
-        {enableKlavis && (
+        {enableKlavis && connectedServers.length > 0 && (
           <>
             <Divider style={{ margin: 0 }} />
             <ProfileRow label={t('profile.authorizations.title')} mobile={mobile}>
-              <KlavisAuthorizationList />
+              <KlavisAuthorizationList servers={connectedServers} />
             </ProfileRow>
           </>
         )}

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -150,7 +150,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
       enabled,
       isLoading,
       configUpdating,
-      isFetchOnClient,
       enableResponseApi,
       isProviderEndpointNotEmpty,
       isProviderApiKeyNotEmpty,
@@ -160,7 +159,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
       aiProviderSelectors.isProviderEnabled(id)(s),
       aiProviderSelectors.isAiProviderConfigLoading(id)(s),
       aiProviderSelectors.isProviderConfigUpdating(id)(s),
-      aiProviderSelectors.isProviderFetchOnClient(id)(s),
       aiProviderSelectors.isProviderEnableResponseApi(id)(s),
       aiProviderSelectors.isActiveProviderEndpointNotEmpty(s),
       aiProviderSelectors.isActiveProviderApiKeyNotEmpty(s),
@@ -301,11 +299,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         (showEndpoint && isProviderEndpointNotEmpty) ||
         (showApiKey && isProviderApiKeyNotEmpty));
     const clientFetchItem = showClientFetch && {
-      children: isLoading ? (
-        <SkeletonSwitch />
-      ) : (
-        <Switch checked={isFetchOnClient} disabled={configUpdating} />
-      ),
+      children: isLoading ? <SkeletonSwitch /> : <Switch loading={configUpdating} />,
       desc: t('providerModels.config.fetchOnClient.desc'),
       label: t('providerModels.config.fetchOnClient.title'),
       minWidth: undefined,

package/src/app/[variants]/onboarding/features/FullNameStep.tsx

@@ -4,7 +4,7 @@ import { SendButton } from '@lobehub/editor/react';
 import { Button, Flexbox, Icon, Input } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { SignatureIcon, Undo2Icon } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
@@ -23,13 +23,25 @@ const FullNameStep = memo<FullNameStepProps>(({ onBack, onNext }) => {
   const updateFullName = useUserStore((s) => s.updateFullName);
 
   const [value, setValue] = useState(existingFullName || '');
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isNavigatingRef = useRef(false);
 
-  const handleNext = () => {
+  const handleNext = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
     if (value.trim()) {
       updateFullName(value.trim());
     }
     onNext();
-  };
+  }, [value, updateFullName, onNext]);
+
+  const handleBack = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
+    onBack();
+  }, [onBack]);
 
   return (
     <Flexbox gap={16}>
@@ -59,7 +71,7 @@ const FullNameStep = memo<FullNameStepProps>(({ onBack, onNext }) => {
           }}
           suffix={
             <SendButton
-              disabled={!value?.trim()}
+              disabled={!value?.trim() || isNavigating}
               onClick={handleNext}
               style={{
                 zoom: 1.5,
@@ -73,8 +85,9 @@ const FullNameStep = memo<FullNameStepProps>(({ onBack, onNext }) => {
       </Flexbox>
       <Flexbox horizontal justify={'flex-start'} style={{ marginTop: 32 }}>
         <Button
+          disabled={isNavigating}
           icon={Undo2Icon}
-          onClick={onBack}
+          onClick={handleBack}
           style={{
             color: cssVar.colorTextDescription,
           }}

package/src/app/[variants]/onboarding/features/InterestsStep.tsx

@@ -3,7 +3,7 @@
 import { Block, Button, Flexbox, Icon, Input, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { BriefcaseIcon, Undo2Icon } from 'lucide-react';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
@@ -25,6 +25,8 @@ const InterestsStep = memo<InterestsStepProps>(({ onBack, onNext }) => {
   const [selectedInterests, setSelectedInterests] = useState<string[]>(existingInterests);
   const [customInput, setCustomInput] = useState('');
   const [showCustomInput, setShowCustomInput] = useState(false);
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isNavigatingRef = useRef(false);
 
   const areas = useMemo(
     () =>
@@ -49,7 +51,11 @@ const InterestsStep = memo<InterestsStepProps>(({ onBack, onNext }) => {
     }
   }, [customInput, selectedInterests]);
 
-  const handleNext = useCallback(async () => {
+  const handleNext = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
+
     // Include custom input value if "other" is active and has content
     const finalInterests = [...selectedInterests];
     const trimmedCustom = customInput.trim();
@@ -60,12 +66,17 @@ const InterestsStep = memo<InterestsStepProps>(({ onBack, onNext }) => {
     // Deduplicate
     const uniqueInterests = [...new Set(finalInterests)];
 
-    if (uniqueInterests.length > 0) {
-      await updateInterests(uniqueInterests);
-    }
+    updateInterests(uniqueInterests);
     onNext();
   }, [selectedInterests, customInput, showCustomInput, updateInterests, onNext]);
 
+  const handleBack = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
+    onBack();
+  }, [onBack]);
+
   return (
     <Flexbox gap={16}>
       <LobeMessage
@@ -138,14 +149,15 @@ const InterestsStep = memo<InterestsStepProps>(({ onBack, onNext }) => {
       )}
       <Flexbox horizontal justify={'space-between'} style={{ marginTop: 32 }}>
         <Button
+          disabled={isNavigating}
           icon={Undo2Icon}
-          onClick={onBack}
+          onClick={handleBack}
           style={{ color: cssVar.colorTextDescription }}
           type={'text'}
         >
           {t('back')}
         </Button>
-        <Button onClick={handleNext} type={'primary'}>
+        <Button disabled={isNavigating} onClick={handleNext} type={'primary'}>
           {t('next')}
         </Button>
       </Flexbox>

package/src/app/[variants]/onboarding/features/ProSettingsStep.tsx

@@ -3,7 +3,7 @@
 import { Button, Flexbox, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Undo2Icon } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -34,14 +34,30 @@ const ProSettingsStep = memo<ProSettingsStepProps>(({ onBack }) => {
     (s) => settingsSelectors.currentSettings(s).defaultAgent?.config,
   );
 
-  const handleFinish = () => {
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isNavigatingRef = useRef(false);
+
+  const handleFinish = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
     finishOnboarding();
     navigate('/');
-  };
+  }, [finishOnboarding, navigate]);
+
+  const handleBack = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
+    onBack();
+  }, [onBack]);
 
-  const handleModelChange = ({ model, provider }: { model: string; provider: string }) => {
-    updateDefaultModel(model, provider);
-  };
+  const handleModelChange = useCallback(
+    ({ model, provider }: { model: string; provider: string }) => {
+      updateDefaultModel(model, provider);
+    },
+    [updateDefaultModel],
+  );
 
   return (
     <Flexbox gap={16}>
@@ -70,8 +86,9 @@ const ProSettingsStep = memo<ProSettingsStepProps>(({ onBack }) => {
 
       <Flexbox align={'center'} horizontal justify={'space-between'} style={{ marginTop: 16 }}>
         <Button
+          disabled={isNavigating}
           icon={Undo2Icon}
-          onClick={onBack}
+          onClick={handleBack}
           style={{
             color: cssVar.colorTextDescription,
           }}
@@ -79,7 +96,12 @@ const ProSettingsStep = memo<ProSettingsStepProps>(({ onBack }) => {
         >
           {t('back')}
         </Button>
-        <Button onClick={handleFinish} style={{ minWidth: 120 }} type="primary">
+        <Button
+          disabled={isNavigating}
+          onClick={handleFinish}
+          style={{ minWidth: 120 }}
+          type="primary"
+        >
           {t('finish')}
         </Button>
       </Flexbox>

package/src/app/[variants]/onboarding/features/ResponseLanguageStep.tsx

@@ -4,7 +4,7 @@ import { SendButton } from '@lobehub/editor/react';
 import { Button, Flexbox, Select, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Undo2Icon } from 'lucide-react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type Locales, localeOptions, normalizeLocale } from '@/locales/resources';
@@ -24,11 +24,23 @@ const ResponseLanguageStep = memo<ResponseLanguageStepProps>(({ onBack, onNext }
   const setSettings = useUserStore((s) => s.setSettings);
 
   const [value, setValue] = useState<Locales | ''>(normalizeLocale(navigator.language));
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isNavigatingRef = useRef(false);
 
-  const handleNext = () => {
+  const handleNext = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
     setSettings({ general: { responseLanguage: value || '' } });
     onNext();
-  };
+  }, [value, setSettings, onNext]);
+
+  const handleBack = useCallback(() => {
+    if (isNavigatingRef.current) return;
+    isNavigatingRef.current = true;
+    setIsNavigating(true);
+    onBack();
+  }, [onBack]);
 
   const Message = useCallback(
     () => (
@@ -73,6 +85,7 @@ const ResponseLanguageStep = memo<ResponseLanguageStepProps>(({ onBack, onNext }
           value={value}
         />
         <SendButton
+          disabled={isNavigating}
           onClick={handleNext}
           style={{
             zoom: 1.5,
@@ -85,8 +98,9 @@ const ResponseLanguageStep = memo<ResponseLanguageStepProps>(({ onBack, onNext }
       </Text>
       <Flexbox horizontal justify={'flex-start'} style={{ marginTop: 32 }}>
         <Button
+          disabled={isNavigating}
           icon={Undo2Icon}
-          onClick={onBack}
+          onClick={handleBack}
           style={{
             color: cssVar.colorTextDescription,
           }}

package/src/app/[variants]/onboarding/features/TelemetryStep.tsx

@@ -7,7 +7,7 @@ import { LoadingDots } from '@lobehub/ui/chat';
 import { Steps, Switch } from 'antd';
 import { cssVar } from 'antd-style';
 import { BrainIcon, HeartHandshakeIcon, PencilRulerIcon, ShieldCheck } from 'lucide-react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
@@ -21,12 +21,20 @@ interface TelemetryStepProps {
 const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
   const { t } = useTranslation('onboarding');
   const [check, setCheck] = useState(true);
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isNavigatingRef = useRef(false);
   const updateGeneralConfig = useUserStore((s) => s.updateGeneralConfig);
 
-  const handleChoice = (enabled: boolean) => {
-    updateGeneralConfig({ telemetry: enabled });
-    onNext();
-  };
+  const handleChoice = useCallback(
+    (enabled: boolean) => {
+      if (isNavigatingRef.current) return;
+      isNavigatingRef.current = true;
+      setIsNavigating(true);
+      updateGeneralConfig({ telemetry: enabled });
+      onNext();
+    },
+    [updateGeneralConfig, onNext],
+  );
 
   const IconAvatar = useCallback(({ icon }: { icon: IconProps['icon'] }) => {
     return (
@@ -123,6 +131,7 @@ const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
         </Flexbox>
       </Flexbox>
       <Button
+        disabled={isNavigating}
         onClick={() => handleChoice(check)}
         size={'large'}
         style={{