@lobehub/chat 0.85.2 → 0.85.3

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

@@ -18,5 +18,6 @@ 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,6 +18,7 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
+          token: ${{ secrets.GH_TOKEN }}
           labels: '✅ Fixed'
           inactive-day: 3
           body: |
@@ -28,6 +29,7 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
+          token: ${{ secrets.GH_TOKEN }}
           labels: '🤔 Need Reproduce'
           inactive-day: 3
           body: |
@@ -38,6 +40,7 @@ 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,5 +21,6 @@ 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,9 +14,10 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           comment: |
-            Great PR @${{ github.event.pull_request.user.login }}. The growth of project is inseparable from user feedback and contribution, thanks for your contribution ❤️
+            🎉 Great PR @${{ github.event.pull_request.user.login }} 🎉
 
-            非常棒的 PR @${{ github.event.pull_request.user.login }}. 项目的成长离不开用户反馈和贡献，感谢您的贡献 ❤️
-          emoji: 'heart'
+            The growth of project is inseparable from user feedback and contribution, thanks for your contribution ❤️
+
+            项目的成长离不开用户反馈和贡献，感谢您的贡献 ❤️
+          emoji: 'hooray'
           pr-emoji: '+1, heart'
-          close: true

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+### [Version 0.85.3](https://github.com/lobehub/lobe-chat/compare/v0.85.2...v0.85.3)
+
+<sup>Released on **2023-10-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: Add new components, modify display properties, and update settings feature, Replace 100vh with 100% to fix mobile scroll problem.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **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))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.85.2](https://github.com/lobehub/lobe-chat/compare/v0.85.1...v0.85.2)
 
 <sup>Released on **2023-10-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.85.2",
+  "version": "0.85.3",
   "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",
@@ -128,6 +128,7 @@
     "@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",
@@ -146,6 +147,7 @@
     "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": "fullscreen",
+  "display": "standalone",
   "icons": [
     {
       "src": "/icons/icon-192x192.png",

package/scripts/i18nWorkflow/genDiff.ts

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

package/scripts/i18nWorkflow/utils.ts

@@ -1,6 +1,7 @@
 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';
 
@@ -58,8 +59,8 @@ export const diff = (obj1: any, obj2: any, prefix: string = ''): string[] => {
   let result: string[] = [];
   for (const key in obj1) {
     if (!obj2[key]) continue;
-    if (typeof obj1[key] === 'object' && obj1[key] !== null && obj2[key]) {
-      result = result.concat(diff(obj1[key], obj2[key], `${key}.`));
+    if (isObject(obj1[key]) && isObject(obj2[key])) {
+      result = [...result, ...diff(obj1[key], obj2[key], `${prefix}${key}.`)];
     } else if (obj1[key] !== obj2[key]) {
       result.push(`${prefix}${key}`);
     }
@@ -67,13 +68,6 @@ 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(100vh - 64px)'} horizontal>
+      <Flexbox flex={1} height={'calc(100% - 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={'100vh'}
+        height={'100%'}
         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(100vh - 44px)'} horizontal>
+    <Flexbox height={'calc(100% - 44px)'} horizontal>
       <Conversation chatInput={<ChatInput />} mobile />
       <TopicList />
     </Flexbox>

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

@@ -37,6 +37,7 @@ 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,6 +24,7 @@ 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={'100vh'} width={'100%'}>
+    <Flexbox height={'100%'} 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: '100vh',
+          height: '100%',
           minWidth: MARKET_SIDEBAR_WIDTH,
         }}
       >

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

@@ -22,7 +22,7 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <Link href={'/'}>
+        <Link aria-label={'home'} 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={'100vh'}
+        height={'100%'}
         id={'lobe-market-container'}
         style={{ position: 'relative' }}
       >
         <Header />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+        <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
           <Flexbox align={'center'} flex={1} style={{ overflow: 'auto', padding: 16 }}>
             <SafeSpacing />
 

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

@@ -50,6 +50,7 @@ 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 className={styles.author} href={homepage} target={'_blank'}>
+      <Link aria-label={author} 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={'100vh'} style={{ position: 'relative' }}>
+      <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
         <Header />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />

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

@@ -4,20 +4,24 @@ 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/Footer.tsx

@@ -0,0 +1,24 @@
+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;

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

@@ -22,6 +22,7 @@ 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} size={36} type={'text'} />
+            <Logo className={styles.logo} extra={'Settings'} 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 href={MANUAL_UPGRADE_URL} target={'_blank'}>
+          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
             <Button size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>

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

@@ -3,10 +3,8 @@ 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 { Trans, useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { settingsSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
@@ -24,9 +22,6 @@ const useStyles = createStyles(({ css, token }) => ({
       color: ${token.colorTextDescription} !important;
     }
   `,
-  plan: css`
-    color: ${token.colorTextDescription};
-  `,
   tip: css`
     font-size: 12px;
     color: ${token.colorTextDescription};
@@ -139,25 +134,12 @@ const LLM = memo(() => {
   };
 
   return (
-    <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>
+    <Form
+      form={form}
+      items={[openAI]}
+      onValuesChange={debounce(setSettings, 100)}
+      {...FORM_STYLE}
+    />
   );
 });
 

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

@@ -1,8 +1,10 @@
 'use client';
 
+import Link from 'next/link';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, 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';
@@ -18,6 +20,19 @@ 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: '100vh', position: 'relative', width: '100%' }}
+    style={{ height: '100%', 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={'100vh'}
+        height={'100%'}
         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(100vh - 44px)' }}>
+  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100% - 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={{ paddingInline: 16 }}>{children}</div>
+      <div style={{ height: '100%', 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: 100vh;
+        height: 100%;
         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: 100vh;
+    height: 100%;
     color: ${token.colorTextSecondary};
     background: ${token.colorBgContainer};
   `,
@@ -48,7 +48,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
         updatePreference({ sessionsWidth: nextWidth });
       }}
       placement="left"
-      size={{ height: '100vh', width: sessionsWidth }}
+      size={{ height: '100%', 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: '100vh' }}
+      style={{ height: '100%' }}
       topActions={<TopActions setTab={setTab} tab={tab} />}
     />
   );

package/src/layout/AppLayout.desktop.tsx

@@ -10,6 +10,7 @@ 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: 100vh;
+      height: 100%;
     `,
   ),
   mobileNavBar: css`
@@ -62,7 +62,6 @@ 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: '100vh',
+      height: '100%',
       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 {
-    overflow: hidden;
+    position: relative;
     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,6 +24,7 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
   @media (max-width: 575px) {
     * {
       ::-webkit-scrollbar {
+        display: none;
         width: 0;
         height: 0;
       }