@lobehub/lobehub 2.0.0-next.313 → 2.0.0-next.315

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.315](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.314...v2.0.0-next.315)
+
+<sup>Released on **2026-01-19**</sup>
+
+#### ✨ Features
+
+- **misc**: Add the cloudEndpoint & Klavis Tools Call in Excuation Task.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add the cloudEndpoint & Klavis Tools Call in Excuation Task, closes [#11627](https://github.com/lobehub/lobe-chat/issues/11627) ([0ffe6c4](https://github.com/lobehub/lobe-chat/commit/0ffe6c4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.314](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.313...v2.0.0-next.314)
+
+<sup>Released on **2026-01-19**</sup>
+
+#### ✨ Features
+
+- **misc**: Improve desktop onboarding window management and footer actions.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Improve desktop onboarding window management and footer actions, closes [#11619](https://github.com/lobehub/lobe-chat/issues/11619) ([6ed280e](https://github.com/lobehub/lobe-chat/commit/6ed280e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.313](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.312...v2.0.0-next.313)
 
 <sup>Released on **2026-01-19**</sup>

package/apps/desktop/src/main/appBrowsers.ts

@@ -1,3 +1,5 @@
+import { APP_WINDOW_MIN_SIZE } from '@lobechat/desktop-bridge';
+
 import type { BrowserWindowOpts } from './core/browser/Browser';
 
 export const BrowsersIdentifiers = {
@@ -11,7 +13,8 @@ export const appBrowsers = {
     height: 800,
     identifier: 'app',
     keepAlive: true,
-    minWidth: 400,
+    minHeight: APP_WINDOW_MIN_SIZE.height,
+    minWidth: APP_WINDOW_MIN_SIZE.width,
     path: '/',
     showOnInit: true,
     titleBarStyle: 'hidden',

package/apps/desktop/src/main/controllers/BrowserWindowsCtr.ts

@@ -1,7 +1,7 @@
 import type {
   InterceptRouteParams,
   OpenSettingsWindowOptions,
-  WindowResizableParams,
+  WindowMinimumSizeParams,
   WindowSizeParams,
 } from '@lobechat/electron-client-ipc';
 import { findMatchingRoute } from '~common/routes';
@@ -81,9 +81,21 @@ export default class BrowserWindowsCtr extends ControllerModule {
   }
 
   @IpcMethod()
-  setWindowResizable(params: WindowResizableParams) {
+  setWindowMinimumSize(params: WindowMinimumSizeParams) {
     this.withSenderIdentifier((identifier) => {
-      this.app.browserManager.setWindowResizable(identifier, params.resizable);
+      const currentSize = this.app.browserManager.getWindowSize(identifier);
+      const nextWindowSize = {
+        ...currentSize,
+      };
+      if (params.height) {
+        nextWindowSize.height = Math.max(currentSize.height, params.height);
+      }
+      if (params.width) {
+        nextWindowSize.width = Math.max(currentSize.width, params.width);
+      }
+
+      this.app.browserManager.setWindowSize(identifier, nextWindowSize);
+      this.app.browserManager.setWindowMinimumSize(identifier, params);
     });
   }
 

package/apps/desktop/src/main/core/browser/Browser.ts

@@ -1,4 +1,4 @@
-import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
+import { APP_WINDOW_MIN_SIZE, TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { MainBroadcastEventKey, MainBroadcastParams } from '@lobechat/electron-client-ipc';
 import {
   BrowserWindow,
@@ -291,9 +291,19 @@ export default class Browser {
     });
   }
 
-  setWindowResizable(resizable: boolean): void {
-    logger.debug(`[${this.identifier}] Setting window resizable: ${resizable}`);
-    this._browserWindow?.setResizable(resizable);
+  setWindowMinimumSize(size: { height?: number; width?: number }): void {
+    logger.debug(`[${this.identifier}] Setting window minimum size: ${JSON.stringify(size)}`);
+
+    const currentMinimumSize = this._browserWindow?.getMinimumSize?.() ?? [0, 0];
+    const rawWidth = size.width ?? currentMinimumSize[0];
+    const rawHeight = size.height ?? currentMinimumSize[1];
+
+    // Electron doesn't "reset" minimum size with 0x0 reliably.
+    // Treat 0 / negative as fallback to app-level default preset.
+    const width = rawWidth > 0 ? rawWidth : APP_WINDOW_MIN_SIZE.width;
+    const height = rawHeight > 0 ? rawHeight : APP_WINDOW_MIN_SIZE.height;
+
+    this._browserWindow?.setMinimumSize?.(width, height);
   }
 
   // ==================== Window Position ====================

package/apps/desktop/src/main/core/browser/BrowserManager.ts

@@ -250,9 +250,14 @@ export class BrowserManager {
     browser?.setWindowSize(size);
   }
 
-  setWindowResizable(identifier: string, resizable: boolean) {
+  getWindowSize(identifier: string) {
     const browser = this.browsers.get(identifier);
-    browser?.setWindowResizable(resizable);
+    return browser?.browserWindow.getBounds();
+  }
+
+  setWindowMinimumSize(identifier: string, size: { height?: number; width?: number }) {
+    const browser = this.browsers.get(identifier);
+    browser?.setWindowMinimumSize(size);
   }
 
   getIdentifierByWebContents(webContents: WebContents): string | null {

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "features": [
+        "Add the cloudEndpoint & Klavis Tools Call in Excuation Task."
+      ]
+    },
+    "date": "2026-01-19",
+    "version": "2.0.0-next.315"
+  },
+  {
+    "children": {
+      "features": [
+        "Improve desktop onboarding window management and footer actions."
+      ]
+    },
+    "date": "2026-01-19",
+    "version": "2.0.0-next.314"
+  },
   {
     "children": {
       "fixes": [

package/e2e/src/steps/community/detail-pages.steps.ts

@@ -68,7 +68,7 @@ Then('I should be on an assistant detail page', async function (this: CustomWorl
 
   const currentUrl = this.page.url();
   // Check if URL matches assistant detail page pattern
-  const hasAssistantDetail = /\/community\/assistant\/[^#?]+/.test(currentUrl);
+  const hasAssistantDetail = /\/community\/agent\/[^#?]+/.test(currentUrl);
   expect(
     hasAssistantDetail,
     `Expected URL to match assistant detail page pattern, but got: ${currentUrl}`,
@@ -138,7 +138,7 @@ Then('I should be on the assistant list page', async function (this: CustomWorld
   // After back navigation, URL should be /community/agent or /community
   const isListPage =
     (currentUrl.includes('/community/agent') &&
-      !/\/community\/assistant\/[\dA-Za-z-]+$/.test(currentUrl)) ||
+      !/\/community\/agent\/[\dA-Za-z-]+$/.test(currentUrl)) ||
     currentUrl.endsWith('/community') ||
     currentUrl.includes('/community#');
 

package/e2e/src/steps/community/interactions.steps.ts

@@ -230,10 +230,10 @@ When('I click on the sort dropdown', async function (this: CustomWorld) {
 });
 
 When('I select a sort option', async function (this: CustomWorld) {
-  await this.page.waitForTimeout(500);
+  await this.page.waitForTimeout(1000);
 
-  // Find and click a sort option (assuming dropdown opens a menu)
-  const sortOptions = this.page.locator('[role="option"], [role="menuitem"]');
+  // The sort dropdown uses checkbox items with role="menuitemcheckbox"
+  const sortOptions = this.page.locator('[role="menuitemcheckbox"]');
 
   // Wait for options to appear
   await sortOptions.first().waitFor({ state: 'visible', timeout: 30_000 });
@@ -381,7 +381,7 @@ Then('the URL should contain the category parameter', async function (this: Cust
     currentUrl.includes('category=') ||
     currentUrl.includes('tag=') ||
     // For path-based routing like /community/agent/category-name
-    /\/community\/assistant\/[^/?]+/.test(currentUrl);
+    /\/community\/agent\/[^/?]+/.test(currentUrl);
 
   expect(
     hasCategory,
@@ -433,8 +433,8 @@ Then('I should be navigated to the assistant detail page', async function (this:
   await this.page.waitForLoadState('networkidle', { timeout: 30_000 });
 
   const currentUrl = this.page.url();
-  // Verify that URL changed and contains /assistant/ followed by an identifier
-  const hasAssistantDetail = /\/community\/assistant\/[^#?]+/.test(currentUrl);
+  // Verify that URL changed and contains /agent/ followed by an identifier
+  const hasAssistantDetail = /\/community\/agent\/[^#?]+/.test(currentUrl);
   const urlChanged = currentUrl !== this.testContext.previousUrl;
 
   expect(

package/e2e/src/steps/hooks.ts

@@ -45,10 +45,24 @@ BeforeAll({ timeout: 600_000 }, async function () {
     // Navigate to signin page
     await page.goto(`${baseUrl}/signin`, { waitUntil: 'networkidle' });
 
+    // Wait for the page to fully hydrate
+    await page.waitForTimeout(2000);
+
+    // Check if we can find the email input
+    const emailInput = page
+      .locator('input[id="email"], input[name="email"], input[type="text"]')
+      .first();
+    const emailInputVisible = await emailInput.isVisible().catch(() => false);
+
+    if (!emailInputVisible) {
+      console.log(
+        '⚠️  Login form not available, skipping authentication (tests requiring auth may fail)',
+      );
+      return;
+    }
+
     // Step 1: Enter email
     console.log('   Step 1: Entering email...');
-    const emailInput = page.locator('input[id="email"]').first();
-    await emailInput.waitFor({ state: 'visible', timeout: 30_000 });
     await emailInput.fill(TEST_USER.email);
 
     // Click the next button
@@ -57,7 +71,9 @@ BeforeAll({ timeout: 600_000 }, async function () {
 
     // Step 2: Wait for password step and enter password
     console.log('   Step 2: Entering password...');
-    const passwordInput = page.locator('input[id="password"]').first();
+    const passwordInput = page
+      .locator('input[id="password"], input[name="password"], input[type="password"]')
+      .first();
     await passwordInput.waitFor({ state: 'visible', timeout: 30_000 });
     await passwordInput.fill(TEST_USER.password);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.313",
+  "version": "2.0.0-next.315",
   "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/desktop-bridge/src/index.ts

@@ -10,3 +10,8 @@ export {
 
 // Desktop window constants
 export const TITLE_BAR_HEIGHT = 38;
+
+export const APP_WINDOW_MIN_SIZE = {
+  height: 600,
+  width: 1000,
+} as const;

package/packages/electron-client-ipc/src/types/window.ts

@@ -3,6 +3,7 @@ export interface WindowSizeParams {
   width?: number;
 }
 
-export interface WindowResizableParams {
-  resizable: boolean;
+export interface WindowMinimumSizeParams {
+  height?: number;
+  width?: number;
 }

package/src/app/[variants]/(desktop)/desktop-onboarding/_layout/index.tsx

@@ -3,7 +3,7 @@
 import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { Center, Flexbox, Text } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { cx } from 'antd-style';
+import { css, cx } from 'antd-style';
 import type { FC, PropsWithChildren } from 'react';
 
 import SimpleTitleBar from '@/features/Electron/titlebar/SimpleTitleBar';
@@ -13,6 +13,9 @@ import { useIsDark } from '@/hooks/useIsDark';
 
 import { styles } from './style';
 
+const contentContainer = css`
+  overflow: auto;
+`;
 const OnboardingContainer: FC<PropsWithChildren> = ({ children }) => {
   const isDarkMode = useIsDark();
   return (
@@ -44,9 +47,9 @@ const OnboardingContainer: FC<PropsWithChildren> = ({ children }) => {
               <ThemeButton placement={'bottomRight'} size={18} />
             </Flexbox>
           </Flexbox>
-          <Center height={'100%'} padding={16} width={'100%'}>
+          <Flexbox align={'center'} className={cx(contentContainer)} height={'100%'} width={'100%'}>
             {children}
-          </Center>
+          </Flexbox>
           <Center padding={24}>
             <Text align={'center'} type={'secondary'}>
               © 2025 LobeHub. All rights reserved.

package/src/app/[variants]/(desktop)/desktop-onboarding/components/OnboardingFooterActions.tsx

@@ -0,0 +1,38 @@
+import { Flexbox, type FlexboxProps } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+
+interface OnboardingFooterActionsProps extends Omit<FlexboxProps, 'children'> {
+  left?: ReactNode;
+  right?: ReactNode;
+}
+
+const OnboardingFooterActions = memo<OnboardingFooterActionsProps>(
+  ({ left, right, style, ...rest }) => {
+    return (
+      <Flexbox
+        align={'center'}
+        horizontal
+        justify={'space-between'}
+        style={{
+          background: cssVar.colorBgContainer,
+          bottom: 0,
+          marginTop: 'auto',
+          paddingTop: 16,
+          position: 'sticky',
+          width: '100%',
+          zIndex: 10,
+          ...style,
+        }}
+        {...rest}
+      >
+        <div>{left}</div>
+        <div>{right}</div>
+      </Flexbox>
+    );
+  },
+);
+
+OnboardingFooterActions.displayName = 'OnboardingFooterActions';
+
+export default OnboardingFooterActions;

package/src/app/[variants]/(desktop)/desktop-onboarding/features/DataModeStep.tsx

@@ -10,6 +10,7 @@ import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 import LobeMessage from '../components/LobeMessage';
+import OnboardingFooterActions from '../components/OnboardingFooterActions';
 
 type DataMode = 'share' | 'privacy';
 
@@ -48,7 +49,7 @@ const DataModeStep = memo<DataModeStepProps>(({ onBack, onNext }) => {
   );
 
   return (
-    <Flexbox gap={16}>
+    <Flexbox gap={16} style={{ height: '100%', minHeight: '100%' }}>
       <Flexbox>
         <LobeMessage sentences={[t('screen4.title'), t('screen4.title2'), t('screen4.title3')]} />
         <Text as={'p'}>{t('screen4.description')}</Text>
@@ -113,19 +114,23 @@ const DataModeStep = memo<DataModeStepProps>(({ onBack, onNext }) => {
       <Text color={cssVar.colorTextSecondary} fontSize={12} style={{ marginTop: 16 }}>
         {t('screen4.footerNote')}
       </Text>
-      <Flexbox horizontal justify={'space-between'} style={{ marginTop: 32 }}>
-        <Button
-          icon={Undo2Icon}
-          onClick={onBack}
-          style={{ color: cssVar.colorTextDescription }}
-          type={'text'}
-        >
-          {t('back')}
-        </Button>
-        <Button onClick={onNext} type={'primary'}>
-          {t('next')}
-        </Button>
-      </Flexbox>
+      <OnboardingFooterActions
+        left={
+          <Button
+            icon={Undo2Icon}
+            onClick={onBack}
+            style={{ color: cssVar.colorTextDescription }}
+            type={'text'}
+          >
+            {t('back')}
+          </Button>
+        }
+        right={
+          <Button onClick={onNext} type={'primary'}>
+            {t('next')}
+          </Button>
+        }
+      />
     </Flexbox>
   );
 });

package/src/app/[variants]/(desktop)/desktop-onboarding/features/LoginStep.tsx

@@ -1,6 +1,10 @@
 'use client';
 
-import { AuthorizationProgress, useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import {
+  AuthorizationPhase,
+  AuthorizationProgress,
+  useWatchBroadcast,
+} from '@lobechat/electron-client-ipc';
 import { Alert, Button, Center, Flexbox, Icon, Input, Text } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { cssVar } from 'antd-style';
@@ -9,6 +13,7 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isDesktop } from '@/const/version';
+import UserInfo from '@/features/User/UserInfo';
 import { remoteServerService } from '@/services/electron/remoteServer';
 import { useElectronStore } from '@/store/electron';
 import { setDesktopAutoOidcFirstOpenHandled } from '@/utils/electron/autoOidc';
@@ -21,6 +26,13 @@ type LoginMethod = 'cloud' | 'selfhost';
 // 登录状态类型
 type LoginStatus = 'idle' | 'loading' | 'success' | 'error';
 
+const authorizationPhaseI18nKeyMap: Record<AuthorizationPhase, string> = {
+  browser_opened: 'screen5.auth.phase.browserOpened',
+  cancelled: 'screen5.actions.cancel',
+  verifying: 'screen5.auth.phase.verifying',
+  waiting_for_auth: 'screen5.auth.phase.waitingForAuth',
+};
+
 const loginMethodMetas = {
   cloud: {
     descriptionKey: 'screen5.methods.cloud.description',
@@ -181,6 +193,7 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
     setAuthProgress(progress);
     if (progress.phase === 'cancelled') {
       setCloudLoginStatus('idle');
+      setSelfhostLoginStatus('idle');
       setAuthProgress(null);
     }
   });
@@ -188,6 +201,7 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
   const handleCancelAuth = async () => {
     await remoteServerService.cancelAuthorization();
     setCloudLoginStatus('idle');
+    setSelfhostLoginStatus('idle');
     setAuthProgress(null);
   };
 
@@ -195,13 +209,19 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
   const renderCloudContent = () => {
     if (cloudLoginStatus === 'success') {
       return (
-        <Flexbox gap={12} style={{ width: '100%' }}>
+        <Flexbox gap={16} style={{ width: '100%' }}>
           <Alert
             description={t('authResult.success.desc')}
             style={{ width: '100%' }}
             title={t('authResult.success.title')}
             type={'success'}
           />
+          <UserInfo
+            style={{
+              background: cssVar.colorFillSecondary,
+              borderRadius: 8,
+            }}
+          />
           <Button
             block
             disabled={isSigningOut || isConnectingServer}
@@ -239,27 +259,35 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
     }
 
     if (cloudLoginStatus === 'loading') {
+      const phaseText = t(authorizationPhaseI18nKeyMap[authProgress?.phase ?? 'browser_opened'], {
+        defaultValue: t('screen5.actions.signingIn'),
+      });
+      const remainingSeconds = authProgress
+        ? Math.max(0, Math.ceil((authProgress.maxPollTime - authProgress.elapsed) / 1000))
+        : null;
+
       return (
         <Flexbox gap={8} style={{ width: '100%' }}>
           <Button block disabled={true} icon={Cloud} loading={true} size={'large'} type={'primary'}>
-            {authProgress
-              ? t(`screen5.auth.phase.${authProgress.phase}`, {
-                  defaultValue: t('screen5.actions.signingIn'),
-                })
-              : t('screen5.actions.signingIn')}
+            {t('screen5.actions.signingIn')}
           </Button>
-          {authProgress && (
-            <Flexbox align={'center'} horizontal justify={'space-between'}>
+          <Text style={{ color: cssVar.colorTextDescription }} type={'secondary'}>
+            {phaseText}
+          </Text>
+          <Flexbox align={'center'} horizontal justify={'space-between'}>
+            {remainingSeconds !== null ? (
               <Text style={{ color: cssVar.colorTextDescription }} type={'secondary'}>
                 {t('screen5.auth.remaining', {
-                  time: Math.round((authProgress.maxPollTime - authProgress.elapsed) / 1000),
+                  time: remainingSeconds,
                 })}
               </Text>
-              <Button onClick={handleCancelAuth} size={'small'} type={'text'}>
-                {t('screen5.actions.cancel')}
-              </Button>
-            </Flexbox>
-          )}
+            ) : (
+              <div />
+            )}
+            <Button onClick={handleCancelAuth} size={'small'} type={'text'}>
+              {t('screen5.actions.cancel')}
+            </Button>
+          </Flexbox>
         </Flexbox>
       );
     }
@@ -283,13 +311,19 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
   const renderSelfhostContent = () => {
     if (selfhostLoginStatus === 'success') {
       return (
-        <Flexbox gap={12} style={{ width: '100%' }}>
+        <Flexbox gap={16} style={{ width: '100%' }}>
           <Alert
             description={t('authResult.success.desc')}
             style={{ width: '100%' }}
             title={t('authResult.success.title')}
             type={'success'}
           />
+          <UserInfo
+            style={{
+              background: cssVar.colorFillSecondary,
+              borderRadius: 8,
+            }}
+          />
           <Button
             block
             disabled={isSigningOut || isConnectingServer}
@@ -354,8 +388,8 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
   };
 
   return (
-    <Flexbox gap={32}>
-      <Flexbox>
+    <Center gap={32} style={{ height: '100%', minHeight: '100%' }}>
+      <Flexbox align={'flex-start'} justify={'flex-start'} style={{ width: '100%' }}>
         <LobeMessage sentences={[t('screen5.title'), t('screen5.title2'), t('screen5.title3')]} />
         <Text as={'p'}>{t('screen5.description')}</Text>
       </Flexbox>
@@ -401,7 +435,7 @@ const LoginStep = memo<LoginStepProps>(({ onBack, onNext }) => {
           </Button>
         </Flexbox>
       )}
-    </Flexbox>
+    </Center>
   );
 });
 

package/src/app/[variants]/(desktop)/desktop-onboarding/features/PermissionsStep.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { ensureElectronIpc } from '@/utils/electron/ipc';
 
 import LobeMessage from '../components/LobeMessage';
+import OnboardingFooterActions from '../components/OnboardingFooterActions';
 
 type PermissionMeta = {
   descriptionKey: string;
@@ -154,7 +155,7 @@ const PermissionsStep = memo<PermissionsStepProps>(({ onBack, onNext }) => {
   };
 
   return (
-    <Flexbox gap={16}>
+    <Flexbox gap={16} style={{ height: '100%', minHeight: '100%' }}>
       <Flexbox>
         <LobeMessage sentences={[t('screen3.title'), t('screen3.title2'), t('screen3.title3')]} />
         <Text as={'p'}>{t('screen3.description')}</Text>
@@ -207,19 +208,23 @@ const PermissionsStep = memo<PermissionsStepProps>(({ onBack, onNext }) => {
           </Block>
         ))}
       </Block>
-      <Flexbox horizontal justify={'space-between'} style={{ marginTop: 32 }}>
-        <Button
-          icon={Undo2Icon}
-          onClick={onBack}
-          style={{ color: cssVar.colorTextDescription }}
-          type={'text'}
-        >
-          {t('back')}
-        </Button>
-        <Button onClick={onNext} type={'primary'}>
-          {t('next')}
-        </Button>
-      </Flexbox>
+      <OnboardingFooterActions
+        left={
+          <Button
+            icon={Undo2Icon}
+            onClick={onBack}
+            style={{ color: cssVar.colorTextDescription }}
+            type={'text'}
+          >
+            {t('back')}
+          </Button>
+        }
+        right={
+          <Button onClick={onNext} type={'primary'}>
+            {t('next')}
+          </Button>
+        }
+      />
     </Flexbox>
   );
 });