@lobehub/lobehub 2.0.0-next.236 → 2.0.0-next.238

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 # Changelog
 
+## [Version 2.0.0-next.238](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.237...v2.0.0-next.238)
+
+<sup>Released on **2026-01-08**</sup>
+
+#### ✨ Features
+
+- **misc**: Change the klavis Linear to LobeHub oauth Linear.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Topic renaming input focus issue in context menu.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Change the klavis Linear to LobeHub oauth Linear, closes [#11339](https://github.com/lobehub/lobe-chat/issues/11339) ([ec8ff26](https://github.com/lobehub/lobe-chat/commit/ec8ff26))
+
+#### What's fixed
+
+- **misc**: Topic renaming input focus issue in context menu, closes [#11323](https://github.com/lobehub/lobe-chat/issues/11323) ([dd065fc](https://github.com/lobehub/lobe-chat/commit/dd065fc))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [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>

package/changelog/v1.json

@@ -1,4 +1,21 @@
 [
+  {
+    "children": {
+      "features": [
+        "Change the klavis Linear to LobeHub oauth Linear."
+      ],
+      "fixes": [
+        "Topic renaming input focus issue in context menu."
+      ]
+    },
+    "date": "2026-01-08",
+    "version": "2.0.0-next.238"
+  },
+  {
+    "children": {},
+    "date": "2026-01-08",
+    "version": "2.0.0-next.237"
+  },
   {
     "children": {},
     "date": "2026-01-08",

package/locales/en-US/oauth.json

@@ -32,5 +32,6 @@
   "login.title": "Login to {{clientName}}",
   "login.userWelcome": "Welcome back, ",
   "success.subTitle": "You have successfully authorized the application to access your account. You may now close this page.",
+  "success.subTitleWithCountdown": "Authorization successful. Auto-closing in {{countdown}}s...",
   "success.title": "Authorization Successful"
 }

package/locales/zh-CN/oauth.json

@@ -32,5 +32,6 @@
   "login.title": "登录 {{clientName}}",
   "login.userWelcome": "欢迎回来，",
   "success.subTitle": "应用已获得授权。你可以关闭此页面了",
+  "success.subTitleWithCountdown": "应用已获得授权。{{countdown}}秒后自动关闭…",
   "success.title": "授权完成"
 }

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.236",
+  "version": "2.0.0-next.238",
   "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/const/src/klavis.ts

@@ -1,4 +1,4 @@
-import { IconType, SiCaldotcom, SiGithub, SiLinear } from '@icons-pack/react-simple-icons';
+import { IconType, SiCaldotcom, SiGithub } from '@icons-pack/react-simple-icons';
 import { Klavis } from 'klavis';
 
 export interface KlavisServerType {
@@ -40,12 +40,6 @@ export const KLAVIS_SERVER_TYPES: KlavisServerType[] = [
     label: 'Airtable',
     serverName: Klavis.McpServerName.Airtable,
   },
-  {
-    icon: SiLinear,
-    identifier: 'linear',
-    label: 'Linear',
-    serverName: Klavis.McpServerName.Linear,
-  },
   {
     icon: 'https://hub-apac-1.lobeobjects.space/assets/logos/googlesheets.svg',
     identifier: 'google-sheets',

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]/(auth)/oauth/callback/success/page.tsx

@@ -2,11 +2,48 @@
 
 import { FluentEmoji, Text } from '@lobehub/ui';
 import { Result } from 'antd';
-import React, { memo } from 'react';
+import { useSearchParams } from 'next/navigation';
+import React, { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const SuccessPage = memo(() => {
   const { t } = useTranslation('oauth');
+  const searchParams = useSearchParams();
+  const [countdown, setCountdown] = useState(3);
+
+  useEffect(() => {
+    // Check if this is a LobeHub Skill OAuth callback
+    const provider = searchParams.get('provider');
+
+    if (provider && window.opener) {
+      // Notify parent window about successful OAuth
+      window.opener.postMessage(
+        {
+          provider,
+          type: 'LOBEHUB_SKILL_AUTH_SUCCESS',
+        },
+        window.location.origin,
+      );
+
+      // Start countdown and close window after 3 seconds
+      let timeLeft = 3;
+      setCountdown(timeLeft);
+
+      const countdownTimer = setInterval(() => {
+        timeLeft -= 1;
+        setCountdown(timeLeft);
+
+        if (timeLeft <= 0) {
+          clearInterval(countdownTimer);
+          window.close();
+        }
+      }, 1000);
+
+      return () => clearInterval(countdownTimer);
+    }
+  }, [searchParams]);
+
+  const provider = searchParams.get('provider');
 
   return (
     <Result
@@ -14,7 +51,12 @@ const SuccessPage = memo(() => {
       status="success"
       subTitle={
         <Text fontSize={16} type="secondary">
-          {t('success.subTitle')}
+          {provider
+            ? t('success.subTitleWithCountdown', {
+                countdown,
+                defaultValue: `You may close this page. Auto-closing in ${countdown}s...`,
+              })
+            : t('success.subTitle')}
         </Text>
       }
       title={

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)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx

@@ -1,5 +1,6 @@
-import { Input, Popover } from '@lobehub/ui';
-import { memo, useCallback, useState } from 'react';
+import { Input, type InputProps, Popover } from '@lobehub/ui';
+import type { InputRef } from 'antd';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
 
@@ -9,6 +10,18 @@ interface EditingProps {
   toggleEditing: (visible?: boolean) => void;
 }
 
+function FocusableInput({ ...props }: InputProps) {
+  const ref = useRef<InputRef>(null);
+  useEffect(() => {
+    queueMicrotask(() => {
+      if (ref.current) {
+        ref.current.input?.focus();
+      }
+    });
+  }, []);
+  return <Input {...props} ref={ref} />;
+}
+
 const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
   const [newTitle, setNewTitle] = useState(title);
   const [editing, updateTopicTitle] = useChatStore((s) => [
@@ -41,19 +54,14 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
         );
       }
     }
-    toggleEditing(false);
   }, [newTitle, title, id, updateTopicTitle, toggleEditing]);
 
   return (
     <Popover
       content={
-        <Input
-          autoFocus
+        <FocusableInput
           defaultValue={title}
-          onBlur={() => {
-            handleUpdate();
-            toggleEditing(false);
-          }}
+          onBlur={handleUpdate}
           onChange={(e) => setNewTitle(e.target.value)}
           onClick={(e) => e.stopPropagation()}
           onPressEnter={() => {
@@ -64,6 +72,7 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
       }
       onOpenChange={(open) => {
         if (!open) handleUpdate();
+
         toggleEditing(open);
       }}
       open={editing}

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]/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>