@lobehub/chat 0.85.3 → 0.86.0-beta.2

package/.dockerignore

@@ -0,0 +1,10 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+.next
+.git
+scripts
+docs
+.github
+*.md

package/.github/workflows/issue-check-inactive.yml

@@ -18,6 +18,5 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'check-inactive'
-          token: ${{ secrets.GH_TOKEN }}
           inactive-label: 'Inactive'
           inactive-day: 30

package/.github/workflows/issue-close-require.yml

@@ -18,7 +18,6 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
-          token: ${{ secrets.GH_TOKEN }}
           labels: '✅ Fixed'
           inactive-day: 3
           body: |
@@ -29,7 +28,6 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
-          token: ${{ secrets.GH_TOKEN }}
           labels: '🤔 Need Reproduce'
           inactive-day: 3
           body: |
@@ -40,7 +38,6 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
-          token: ${{ secrets.GH_TOKEN }}
           labels: "🙅🏻‍♀️ WON'T DO"
           inactive-day: 3
           body: |

package/.github/workflows/issue-remove-inactive.yml

@@ -21,6 +21,5 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'remove-labels'
-          token: ${{ secrets.GH_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           labels: 'Inactive'

package/.github/workflows/pre-welcome.yml

@@ -14,10 +14,9 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           comment: |
-            🎉 Great PR @${{ github.event.pull_request.user.login }} 🎉
+            Great PR @${{ github.event.pull_request.user.login }}. The growth of project is inseparable from user feedback and contribution, thanks for your contribution ❤️
 
-            The growth of project is inseparable from user feedback and contribution, thanks for your contribution ❤️
-
-            项目的成长离不开用户反馈和贡献，感谢您的贡献 ❤️
-          emoji: 'hooray'
+            非常棒的 PR @${{ github.event.pull_request.user.login }}. 项目的成长离不开用户反馈和贡献，感谢您的贡献 ❤️
+          emoji: 'heart'
           pr-emoji: '+1, heart'
+          close: true

package/.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - beta
 
 jobs:
   release:
@@ -28,3 +29,5 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DOCKER_REGISTRY_PASSWORD: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+          DOCKER_REGISTRY_USER: ${{ secrets.DOCKER_REGISTRY_USER }}

package/.releaserc.js

@@ -1 +1,14 @@
-module.exports = require('@lobehub/lint').semanticRelease;
+const release = require('@lobehub/lint').semanticRelease;
+
+module.exports = {
+  ...release,
+  plugins: [
+    ...release.plugins,
+    [
+      '@codedependant/semantic-release-docker',
+      {
+        dockerImage: 'lobe-chat',
+      },
+    ],
+  ],
+};

package/CHANGELOG.md

@@ -2,23 +2,23 @@
 
 # Changelog
 
-### [Version 0.85.3](https://github.com/lobehub/lobe-chat/compare/v0.85.2...v0.85.3)
+## [Version 0.86.0-beta.2](https://github.com/lobehub/lobe-chat/compare/v0.86.0-beta.1...v0.86.0-beta.2)
 
 <sup>Released on **2023-10-10**</sup>
 
-#### 💄 Styles
+#### 🐛 Bug Fixes
 
-- **misc**: Add new components, modify display properties, and update settings feature, Replace 100vh with 100% to fix mobile scroll problem.
+- **misc**: Add apikey form when there is no default api key in env, Fix mobile safearea (fix.
 
 <br/>
 
 <details>
 <summary><kbd>Improvements and Fixes</kbd></summary>
 
-#### Styles
+#### What's fixed
 
-- **misc**: Add new components, modify display properties, and update settings feature ([87a4a46](https://github.com/lobehub/lobe-chat/commit/87a4a46))
-- **misc**: Replace 100vh with 100% to fix mobile scroll problem ([2ef3c94](https://github.com/lobehub/lobe-chat/commit/2ef3c94))
+- **misc**: Add apikey form when there is no default api key in env, closes [#290](https://github.com/lobehub/lobe-chat/issues/290) ([2c907e9](https://github.com/lobehub/lobe-chat/commit/2c907e9))
+- **misc**: Fix mobile safearea (fix, closes [#211](https://github.com/lobehub/lobe-chat/issues/211) ([68775b8](https://github.com/lobehub/lobe-chat/commit/68775b8))
 
 </details>
 

package/Dockerfile

@@ -0,0 +1,47 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+## Install dependencies only when needed
+FROM base AS builder
+WORKDIR /app
+
+COPY package.json ./
+
+RUN pnpm i -g bun
+# If you want to build docker in China
+#RUN npm config set registry https://registry.npmmirror.com/
+RUN bun i
+
+COPY . .
+RUN pnpm run build:docker # run build standalone for docker version
+
+## Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

package/next.config.mjs

@@ -2,6 +2,7 @@ import analyzer from '@next/bundle-analyzer';
 import nextPWA from 'next-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
+const buildWithDocker = process.env.DOCKER === 'true';
 
 const withBundleAnalyzer = analyzer({
   enabled: process.env.ANALYZE === 'true',
@@ -32,6 +33,8 @@ const nextConfig = {
     AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
     PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
   },
+
+  output: buildWithDocker ? 'standalone' : undefined,
 };
 
 export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.85.3",
+  "version": "0.86.0-beta.2",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -25,6 +25,7 @@
   "scripts": {
     "build": "next build",
     "build:analyze": "ANALYZE=true next build",
+    "build:docker": "DOCKER=true next build",
     "dev": "next dev -p 3010",
     "i18n": "npm run i18n:workflow && lobe-i18n",
     "i18n:workflow": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
@@ -120,6 +121,7 @@
     "zustand-utils": "^1"
   },
   "devDependencies": {
+    "@codedependant/semantic-release-docker": "^4",
     "@commitlint/cli": "^17",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
@@ -128,7 +130,6 @@
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
-    "@types/lodash": "^4",
     "@types/lodash-es": "^4",
     "@types/mixpanel-browser": "^2",
     "@types/node": "^20",
@@ -147,7 +148,6 @@
     "husky": "^8",
     "jsdom": "^22",
     "lint-staged": "^14",
-    "lodash": "^4",
     "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^3",

package/public/manifest.json

@@ -1,7 +1,7 @@
 {
   "background_color": "#000000",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
-  "display": "standalone",
+  "display": "fullscreen",
   "icons": [
     {
       "src": "/icons/icon-192x192.png",

package/scripts/i18nWorkflow/genDiff.ts

@@ -1,6 +1,5 @@
 import { consola } from 'consola';
 import { colors } from 'consola/utils';
-import { unset } from 'lodash';
 import { existsSync } from 'node:fs';
 
 import {
@@ -9,7 +8,7 @@ import {
   localesResourcesFilepath,
   outputLocaleJsonFilepath,
 } from './const';
-import { diff, readJSON, tagWhite, tagYellow, writeJSON } from './utils';
+import { diff, readJSON, tagWhite, tagYellow, unset, writeJSON } from './utils';
 
 export const genDiff = () => {
   consola.start(`Diff between Dev/Prod local...`);

package/scripts/i18nWorkflow/utils.ts

@@ -1,7 +1,6 @@
 import { consola } from 'consola';
 import { colors } from 'consola/utils';
 import { tocForResources } from 'i18next-resources-for-ts';
-import { isObject } from 'lodash';
 import { readFileSync, writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
@@ -59,8 +58,8 @@ export const diff = (obj1: any, obj2: any, prefix: string = ''): string[] => {
   let result: string[] = [];
   for (const key in obj1) {
     if (!obj2[key]) continue;
-    if (isObject(obj1[key]) && isObject(obj2[key])) {
-      result = [...result, ...diff(obj1[key], obj2[key], `${prefix}${key}.`)];
+    if (typeof obj1[key] === 'object' && obj1[key] !== null && obj2[key]) {
+      result = result.concat(diff(obj1[key], obj2[key], `${key}.`));
     } else if (obj1[key] !== obj2[key]) {
       result.push(`${prefix}${key}`);
     }
@@ -68,6 +67,13 @@ export const diff = (obj1: any, obj2: any, prefix: string = ''): string[] => {
   return result;
 };
 
+export const unset = (obj: any, key: string) => {
+  const keys = key.split('.');
+  const lastKey = keys.pop();
+  const lastObj = keys.reduce((obj, key) => (obj[key] = obj[key] || {}), obj);
+  if (lastKey) delete lastObj[lastKey];
+};
+
 export const tagBlue = (text: string) => colors.bgBlueBright(colors.black(` ${text} `));
 export const tagYellow = (text: string) => colors.bgYellowBright(colors.black(` ${text} `));
 export const tagGreen = (text: string) => colors.bgGreenBright(colors.black(` ${text} `));

package/src/app/chat/(desktop)/index.tsx

@@ -18,7 +18,7 @@ const DesktopPage = memo(() => (
     <Layout>
       <PageTitle />
       <ChatHeader />
-      <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
+      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
         <Conversation chatInput={<ChatInput />} />
         <SideBar />
       </Flexbox>

package/src/app/chat/(desktop)/layout.desktop.tsx

@@ -16,7 +16,7 @@ export default memo(({ children }: PropsWithChildren) => {
       <ResponsiveSessionList />
       <Flexbox
         flex={1}
-        height={'100%'}
+        height={'100vh'}
         id={'lobe-conversion-container'}
         style={{ position: 'relative' }}
       >

package/src/app/chat/(mobile)/mobile/index.tsx

@@ -10,7 +10,7 @@ import Layout from './layout.mobile';
 
 const Chat = memo(() => (
   <Layout>
-    <Flexbox height={'calc(100% - 44px)'} horizontal>
+    <Flexbox height={'calc(100vh - 44px)'} horizontal>
       <Conversation chatInput={<ChatInput />} mobile />
       <TopicList />
     </Flexbox>

package/src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -37,7 +37,6 @@ const Inbox = memo(() => {
 
   return (
     <Link
-      aria-label={INBOX_SESSION_ID}
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -24,7 +24,6 @@ const SessionList = memo(() => {
   ) : list.length > 0 ? (
     list.map(({ id }) => (
       <Link
-        aria-label={id}
         href={SESSION_CHAT_URL(id, mobile)}
         key={id}
         onClick={(e) => {

package/src/app/home/index.tsx

@@ -9,7 +9,7 @@ const Loading = () => {
   const { t } = useTranslation();
 
   return (
-    <Flexbox height={'100%'} width={'100%'}>
+    <Flexbox height={'100vh'} width={'100%'}>
       <Center flex={1} gap={12} width={'100%'}>
         <Logo extra={'Chat'} size={48} type={'combine'} />
         <Center gap={16} horizontal>

package/src/app/market/(desktop)/features/AgentDetail.tsx

@@ -53,7 +53,7 @@ const SideBar = memo(() => {
       <DraggablePanelContainer
         style={{
           flex: 'none',
-          height: '100%',
+          height: '100vh',
           minWidth: MARKET_SIDEBAR_WIDTH,
         }}
       >

package/src/app/market/(desktop)/features/Header.tsx

@@ -22,7 +22,7 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <Link aria-label={'home'} href={'/'}>
+        <Link href={'/'}>
           <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
         </Link>
       }

package/src/app/market/(desktop)/layout.desktop.tsx

@@ -34,12 +34,12 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
     <AppLayoutDesktop>
       <Flexbox
         flex={1}
-        height={'100%'}
+        height={'100vh'}
         id={'lobe-market-container'}
         style={{ position: 'relative' }}
       >
         <Header />
-        <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
+        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
           <Flexbox align={'center'} flex={1} style={{ overflow: 'auto', padding: 16 }}>
             <SafeSpacing />
 

package/src/app/market/features/AgentCard/AgentCardBanner.tsx

@@ -50,7 +50,6 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         {...props}
       >
         <Avatar
-          alt={'banner'}
           avatar={meta.avatar}
           background={meta.backgroundColor || theme.colorBgContainer}
           className={styles.bannerImg}

package/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -47,7 +47,7 @@ const Header = memo(() => {
         ))}
       </Center>
       <div className={styles.desc}>{description}</div>
-      <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
+      <Link className={styles.author} href={homepage} target={'_blank'}>
         @{author}
       </Link>
       <Button

package/src/app/settings/(desktop)/layout.desktop.tsx

@@ -14,7 +14,7 @@ export default memo(({ children }: PropsWithChildren) => {
   return (
     <AppLayoutDesktop>
       <SideBar />
-      <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
+      <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
         <Header />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />

package/src/app/settings/common/index.tsx

@@ -4,24 +4,20 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
-import { CURRENT_VERSION } from '@/const/version';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Footer from '../features/Footer';
 import Common from './Common';
 
 export default memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('tab.common'));
-
   return (
     <>
       <PageTitle title={pageTitle} />
       <Common />
-      <Footer>LobeChat v{CURRENT_VERSION}</Footer>
     </>
   );
 });

package/src/app/settings/features/SideBar/List.tsx

@@ -22,7 +22,6 @@ const List = memo(() => {
 
   return items.map(({ value, icon, label }) => (
     <Link
-      aria-label={label}
       href={`/settings/${value}`}
       key={value}
       onClick={() => {

package/src/app/settings/features/SideBar/index.tsx

@@ -27,7 +27,7 @@ const SideBar = memo(() => {
       <DraggablePanelBody className={styles.body} style={{ padding: 0 }}>
         <Flexbox className={styles.top} padding={16}>
           <div>
-            <Logo className={styles.logo} extra={'Settings'} size={36} type={'text'} />
+            <Logo className={styles.logo} size={36} type={'text'} />
           </div>
         </Flexbox>
         <UpgradeAlert />

package/src/app/settings/features/UpgradeAlert.tsx

@@ -14,7 +14,7 @@ const UpgradeAlert = memo(() => {
     hasNewVersion && (
       <Alert
         action={
-          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
+          <Link href={MANUAL_UPGRADE_URL} target={'_blank'}>
             <Button size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>

package/src/app/settings/llm/LLM/index.tsx

@@ -3,8 +3,10 @@ import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { Webhook } from 'lucide-react';
+import Link from 'next/link';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { settingsSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
@@ -22,6 +24,9 @@ const useStyles = createStyles(({ css, token }) => ({
       color: ${token.colorTextDescription} !important;
     }
   `,
+  plan: css`
+    color: ${token.colorTextDescription};
+  `,
   tip: css`
     font-size: 12px;
     color: ${token.colorTextDescription};
@@ -134,12 +139,25 @@ const LLM = memo(() => {
   };
 
   return (
-    <Form
-      form={form}
-      items={[openAI]}
-      onValuesChange={debounce(setSettings, 100)}
-      {...FORM_STYLE}
-    />
+    <Flexbox align={'center'} gap={24} width={'100%'}>
+      <Form
+        form={form}
+        items={[openAI]}
+        onValuesChange={debounce(setSettings, 100)}
+        {...FORM_STYLE}
+      />
+      <Flexbox align={'center'} className={styles.plan}>
+        <div>
+          <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+            更多模型正在
+            <Link href="https://github.com/lobehub/lobe-chat/issues/151" target="_blank">
+              计划接入
+            </Link>
+            中 ，敬请期待 ✨
+          </Trans>
+        </div>
+      </Flexbox>
+    </Flexbox>
   );
 });
 

package/src/app/settings/llm/index.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import Link from 'next/link';
 import { memo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import Footer from '@/app/settings/features/Footer';
 import PageTitle from '@/components/PageTitle';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
@@ -20,19 +18,6 @@ export default memo(() => {
     <>
       <PageTitle title={pageTitle} />
       <LLM />
-      <Footer>
-        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
-          更多模型正在
-          <Link
-            aria-label={'todo'}
-            href="https://github.com/lobehub/lobe-chat/issues/151"
-            target="_blank"
-          >
-            计划接入
-          </Link>
-          中 ，敬请期待 ✨
-        </Trans>
-      </Footer>
     </>
   );
 });

package/src/app/welcome/(desktop)/features/Showcase.tsx

@@ -10,7 +10,7 @@ const Showcase = memo(() => (
   <Flexbox
     flex={1}
     justify={'center'}
-    style={{ height: '100%', position: 'relative', width: '100%' }}
+    style={{ height: '100vh', position: 'relative', width: '100%' }}
   >
     <GridShowcase>
       <Banner />

package/src/app/welcome/(desktop)/layout.desktop.tsx

@@ -13,7 +13,7 @@ const Desktop = memo<PropsWithChildren>(({ children }) => {
       <Center
         className={styles.layout}
         flex={1}
-        height={'100%'}
+        height={'100vh'}
         horizontal
         style={{ position: 'relative' }}
       >

package/src/app/welcome/(mobile)/features/Showcase.tsx

@@ -4,7 +4,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import Banner from '@/app/welcome/features/Banner';
 
 const Showcase = memo(() => (
-  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100% - 44px)' }}>
+  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100vh - 44px)' }}>
     <Center gap={16}>
       <Banner mobile />
     </Center>

package/src/app/welcome/(mobile)/layout.mobile.tsx

@@ -12,7 +12,7 @@ const MobileLayout = memo<PropsWithChildren>(({ children }) => {
 
   return (
     <AppLayoutMobile navBar={<Header />} showTabBar style={{ background: theme.colorBgLayout }}>
-      <div style={{ height: '100%', paddingInline: 16 }}>{children}</div>
+      <div style={{ paddingInline: 16 }}>{children}</div>
     </AppLayoutMobile>
   );
 });

package/src/app/welcome/features/Banner/style.ts

@@ -60,7 +60,7 @@ export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) =
         overflow-y: auto;
 
         max-width: 1024px;
-        height: 100%;
+        height: 100vh;
         padding: 32px 16px;
       `,
     ),

package/src/features/FolderPanel/index.tsx

@@ -8,7 +8,7 @@ import { useGlobalStore } from '@/store/global';
 
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
-    height: 100%;
+    height: 100vh;
     color: ${token.colorTextSecondary};
     background: ${token.colorBgContainer};
   `,
@@ -48,7 +48,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
         updatePreference({ sessionsWidth: nextWidth });
       }}
       placement="left"
-      size={{ height: '100%', width: sessionsWidth }}
+      size={{ height: '100vh', width: sessionsWidth }}
     >
       <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
         {children}

package/src/features/SideBar/index.tsx

@@ -14,7 +14,7 @@ export default memo(() => {
     <SideNav
       avatar={<AvatarWithUpload id={'avatar'} />}
       bottomActions={<BottomActions setTab={setTab} tab={tab} />}
-      style={{ height: '100%' }}
+      style={{ height: '100vh' }}
       topActions={<TopActions setTab={setTab} tab={tab} />}
     />
   );

package/src/layout/AppLayout.desktop.tsx

@@ -10,7 +10,6 @@ const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
   const theme = useTheme();
   return (
     <Flexbox
-      height={'100%'}
       horizontal
       style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
       width={'100%'}

package/src/layout/AppLayout.mobile.tsx

@@ -16,7 +16,7 @@ const useStyles = createStyles(({ css, cx, stylish }) => ({
       overflow-y: auto;
 
       width: 100vw;
-      height: 100%;
+      height: 100vh;
     `,
   ),
   mobileNavBar: css`
@@ -62,6 +62,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>(
             <MobileTabBar className={styles.mobileTabBar} />
           </>
         )}
+        <SafeSpacing mobile position={'bottom'} />
       </Flexbox>
     );
   },

package/src/layout/GlobalLayout/LocaleLoading.tsx

@@ -7,7 +7,7 @@ const Loading = memo(() => (
   <div
     style={{
       backdropFilter: 'blur(3px)',
-      height: '100%',
+      height: '100vh',
       width: '100vw',
       zIndex: 100,
     }}

package/src/styles/global.ts

@@ -3,20 +3,20 @@ import { css } from 'antd-style';
 export default ({ prefixCls }: { prefixCls: string }) => css`
   html,
   body,
-  #__next,
   .${prefixCls}-app {
-    position: relative;
+    overflow: hidden;
     overscroll-behavior: none;
-    height: 100% !important;
-    min-height: 100% !important;
 
     ::-webkit-scrollbar {
-      display: none;
       width: 0;
       height: 0;
     }
   }
 
+  #__next {
+    height: 100%;
+  }
+
   p {
     margin-bottom: 0;
   }
@@ -24,7 +24,6 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
   @media (max-width: 575px) {
     * {
       ::-webkit-scrollbar {
-        display: none;
         width: 0;
         height: 0;
       }

package/src/app/settings/features/Footer.tsx

@@ -1,24 +0,0 @@
-import { Divider } from 'antd';
-import { createStyles } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-import { Center } from 'react-layout-kit';
-
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    font-size: 14px;
-    color: ${token.colorTextDescription};
-  `,
-);
-
-const Footer = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-  return (
-    <Center style={{ maxWidth: 600, width: '100%' }}>
-      <Divider>
-        <span className={styles}>{children}</span>
-      </Divider>
-    </Center>
-  );
-});
-
-export default Footer;