@lobehub/chat 0.79.7 → 0.80.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.80.0](https://github.com/lobehub/lobe-chat/compare/v0.79.8...v0.80.0)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### ✨ Features
+
+- **misc**: Improve user experience and ensure consistency.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Improve user experience and ensure consistency ([abba584](https://github.com/lobehub/lobe-chat/commit/abba584))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.79.8](https://github.com/lobehub/lobe-chat/compare/v0.79.7...v0.79.8)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix safeare in mobile.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix safeare in mobile ([2adfb04](https://github.com/lobehub/lobe-chat/commit/2adfb04))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.79.7](https://github.com/lobehub/lobe-chat/compare/v0.79.6...v0.79.7)
 
 <sup>Released on **2023-09-27**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.79.7",
+  "version": "0.80.0",
   "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",

package/public/manifest.json

@@ -4,23 +4,38 @@
   "display": "fullscreen",
   "icons": [
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/android-chrome-192x192.png",
+      "src": "/icons/icon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/android-chrome-512x512.png",
+      "src": "/icons/icon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
+  "id": "/",
   "name": "LobeChat",
   "orientation": "portrait",
   "scope": "/",
   "screenshots": [
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x720.png",
-      "sizes": "960x720",
+      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png",
+      "sizes": "960x540",
       "type": "image/png"
     }
   ],

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -1,4 +1,5 @@
 import { ChatList, RenderMessage } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,10 +16,22 @@ import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-const List = () => {
+const useStyles = createStyles(({ css, responsive, cx, stylish }) =>
+  cx(
+    stylish.noScrollbar,
+    css`
+      overflow-x: hidden;
+      ${responsive.mobile} {
+        width: 100vw;
+      }
+    `,
+  ),
+);
+
+const List = memo(() => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
-
+  const { styles } = useStyles();
   const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
@@ -83,6 +96,7 @@ const List = () => {
 
   return (
     <ChatList
+      className={styles}
       data={data}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
@@ -120,6 +134,6 @@ const List = () => {
       type={displayMode || 'chat'}
     />
   );
-};
+});
 
-export default memo(List);
+export default List;

package/src/app/chat/features/Conversation/Input/ActionBar/ActionRight.tsx

@@ -1,30 +1,36 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
 import { Eraser } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
+import SaveTopic from '../Footer/SaveTopic';
+
 const ActionsRight = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
-
+  const { mobile } = useResponsive();
   return (
-    <Popconfirm
-      cancelText={t('cancel', { ns: 'common' })}
-      okButtonProps={{ danger: true }}
-      okText={t('ok', { ns: 'common' })}
-      onConfirm={() => clearMessage()}
-      placement={'topRight'}
-      title={t('confirmClearCurrentMessages', { ns: 'common' })}
-    >
-      <ActionIcon
-        icon={Eraser}
-        placement={'bottom'}
-        title={t('clearCurrentMessages', { ns: 'common' })}
-      />
-    </Popconfirm>
+    <>
+      {mobile && <SaveTopic />}
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        placement={'topRight'}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon
+          icon={Eraser}
+          placement={'bottom'}
+          title={t('clearCurrentMessages', { ns: 'common' })}
+        />
+      </Popconfirm>
+    </>
   );
 });
 

package/src/app/chat/features/Conversation/Input/Mobile.tsx

@@ -1,12 +1,35 @@
+import { createStyles } from 'antd-style';
 import { ReactNode, memo } from 'react';
 
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100vw;
+
+    background: ${token.colorBgLayout};
+  `,
+);
+
 interface ChatInputMobileLayoutProps {
   children: ReactNode;
   expand?: boolean;
 }
 
 const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
-  return <div>{children}</div>;
+  const { styles } = useStyles();
+  return (
+    <>
+      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
+      <div className={styles}>{children}</div>
+    </>
+  );
 });
 
 export default ChatInputMobileLayout;

package/src/app/chat/index.tsx

@@ -13,8 +13,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import Conversation from './features/Conversation';
 import Header from './features/Header';
 import SideBar from './features/Sidebar';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Chat = memo(() => {
   const { mobile } = useResponsive();

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

@@ -11,8 +11,8 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const EditPage = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/settings/{layout.pc.tsx → layout.desktop.tsx}

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 
-import ChatLayout from '../layout.pc';
+import ChatLayout from '../layout.desktop';
 import Header from './features/Header';
 
 const DesktopLayout = memo<PropsWithChildren>(({ children }) => {

package/src/app/market/features/SideBar/AgentInfo/style.ts

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   author: css`
     font-size: 12px;
   `,
@@ -22,7 +22,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-align: center;
   `,
   loading: css`
-    .ant-skeleton-content {
+    .${prefixCls}-skeleton-content {
       display: flex;
       flex-direction: column;
     }
@@ -30,10 +30,10 @@ export const useStyles = createStyles(({ css, token }) => ({
   nav: css`
     padding-top: 4px;
 
-    .ant-tabs-tab {
+    .${prefixCls}-tabs-tab {
       margin: 4px !important;
 
-      + .ant-tabs-tab {
+      + .${prefixCls}-tabs-tab {
         margin: 4px !important;
       }
     }

package/src/app/market/index.tsx

@@ -10,8 +10,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import AgentCard from './features/AgentCard';
 import AgentSearchBar from './features/AgentSearchBar';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Market = memo(() => {
   const { t } = useTranslation('common');

package/src/app/metadata.ts

@@ -5,16 +5,9 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import pkg from '../../package.json';
 
 const title = genSiteHeadTitle();
-const description = pkg.description;
+const { description, homepage } = pkg;
 const metadata: Metadata = {
   appleWebApp: {
-    startupImage: [
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/splash-750x1624.png',
-      {
-        media: '(device-width: 768px) and (device-height: 1024px)',
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/splash-2048x2732.png',
-      },
-    ],
     statusBarStyle: 'black-translucent',
     title: title,
   },
@@ -23,10 +16,6 @@ const metadata: Metadata = {
     apple:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
     icon: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-32x32.png',
-    other: {
-      rel: 'mask-icon',
-      url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/safari-pinned-tab.svg',
-    },
     shortcut:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
@@ -37,13 +26,13 @@ const metadata: Metadata = {
       {
         alt: title,
         height: 360,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-480x360.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-480x270.png',
         width: 480,
       },
       {
         alt: title,
         height: 720,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x720.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png',
         width: 960,
       },
     ],
@@ -51,13 +40,13 @@ const metadata: Metadata = {
     siteName: title,
     title: title,
     type: 'website',
-    url: pkg.homepage,
+    url: homepage,
   },
   themeColor: [
     { color: '#fff', media: '(prefers-color-scheme: light)' },
     { color: '#000', media: '(prefers-color-scheme: dark)' },
   ],
-  title: genSiteHeadTitle(),
+  title: title,
   viewport: {
     initialScale: 1,
     maximumScale: 1,

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

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode, prefixCls }) => ({
   background: css`
     position: absolute;
     bottom: -10%;
@@ -42,8 +42,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   mobile: css`
     margin-top: -16px;
 
-    .ant-tabs-tab,
-    .ant-tabs-tab + .ant-tabs-tab {
+    .${prefixCls}-tabs-tab, .${prefixCls}-tabs-tab + .${prefixCls}-tabs-tab {
       margin: 4px 8px !important;
     }
   `,

package/src/app/settings/features/Settings/Common.tsx

@@ -1,7 +1,6 @@
 import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { changeLanguage } from 'i18next';
 import { debounce } from 'lodash-es';
 import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
@@ -14,6 +13,7 @@ import { localeOptions } from '@/locales/options';
 import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { ConfigKeys } from '@/types/settings';
+import { switchLang } from '@/utils/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
 
@@ -107,14 +107,7 @@ const Common = memo(() => {
           minWidth: undefined,
         },
         {
-          children: (
-            <Select
-              onChange={(e) => {
-                changeLanguage(e);
-              }}
-              options={localeOptions}
-            />
-          ),
+          children: <Select onChange={switchLang} options={localeOptions} />,
           label: t('settingTheme.lang.title'),
           name: 'language',
         },

package/src/app/settings/index.tsx

@@ -9,8 +9,8 @@ import { useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Settings from './features/Settings';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Setting = memo(() => {
   const { mobile } = useResponsive();

package/src/app/welcome/index.tsx

@@ -9,8 +9,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Banner from './features/Banner';
 import Footer from './features/Footer';
+import Layout from './layout.desktop';
 import Mobile from './layout.mobile';
-import Layout from './layout.pc';
 
 const Welcome = memo(() => {
   const { mobile } = useResponsive();

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

@@ -10,7 +10,7 @@ const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
     <AppMobileLayout
       navBar={<MobileNavBar center={<Logo type={'text'} />} />}
       showTabBar
-      style={{ background: theme.colorBgContainer }}
+      style={{ background: theme.colorBgLayout }}
     >
       {children}
     </AppMobileLayout>

package/src/const/layoutTokens.ts

@@ -4,6 +4,7 @@ export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
+export const CHAT_TEXTAREA_HEIGHT_MOBILE = 180;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;

package/src/const/settings.ts

@@ -12,7 +12,7 @@ import {
 export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   avatar: '',
   fontSize: 14,
-  language: 'zh-CN',
+  language: 'en-US',
   password: '',
   themeMode: 'auto',
 };

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -15,9 +15,9 @@ import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
 import MarketSettingModal from './MarketSettingModal';
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, prefixCls }) => ({
   avatar: css`
-    .ant-skeleton-header {
+    .${prefixCls}-skeleton-header {
       padding-right: 0;
     }
   `,

package/src/hooks/useIsPWA.ts

@@ -4,8 +4,7 @@ export const useIsPWA = () => {
   const [isPWA, setIsPWA] = useState(false);
 
   useEffect(() => {
-    const isInStandaloneMode = () =>
-      'standalone' in window.navigator && window.navigator['standalone'];
+    const isInStandaloneMode = () => window.matchMedia('(display-mode: standalone)').matches;
     if (isInStandaloneMode()) {
       setIsPWA(true);
     }

package/src/layout/GlobalLayout/index.tsx

@@ -3,7 +3,6 @@
 import { App, ConfigProvider } from 'antd';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
-import { changeLanguage } from 'i18next';
 import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useEffect } from 'react';
 
@@ -12,6 +11,7 @@ import { createI18nNext } from '@/locales/create';
 import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
 import { usePluginStore } from '@/store/plugin';
 import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import { switchLang } from '@/utils/switchLang';
 
 import { useStyles } from './style';
 
@@ -30,9 +30,7 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   }, []);
 
   useOnFinishHydrationGlobal((state) => {
-    i18n.then(() => {
-      changeLanguage(state.settings.language);
-    });
+    i18n.then(() => switchLang(state.settings.language));
   });
 
   useOnFinishHydrationSession((s, store) => {

package/src/locales/create.ts

@@ -14,29 +14,21 @@ export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces }
     ? ['error', 'common', ...namespace]
     : (['error', 'common', namespace].filter(Boolean) as Namespaces[]);
 
-  return (
-    i18n
-      // detect user language
-      // learn more: https://github.com/i18next/i18next-browser-languageDetector
-      .use(LanguageDetector)
-      // pass the i18n instance to react-i18next.
-      .use(initReactI18next)
-      // init i18next
-      // for all options read: https://www.i18next.com/overview/configuration-options
-      .init({
-        debug: process.env.NODE_ENV === 'development',
-        defaultNS: ns,
-        // LanguageDetector config, refs: https://github.com/i18next/i18next-browser-languageDetector
-        detection: {
-          caches: [],
-        },
-        fallbackLng: 'zh-CN',
-        interpolation: {
-          escapeValue: false, // not needed for react as it escapes by default
-        },
-        ns,
-        // resources: getRes(resources, ns),
-        resources,
-      })
-  );
+  return i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      debug: process.env.NODE_ENV === 'development',
+      defaultNS: ns,
+      detection: {
+        caches: [],
+      },
+      fallbackLng: 'en-US',
+      interpolation: {
+        escapeValue: false,
+      },
+      lng: 'en-US',
+      ns,
+      resources,
+    });
 };

package/src/styles/antdOverride.ts

@@ -1,22 +1,20 @@
 import { Theme, css } from 'antd-style';
 import { readableColor } from 'polished';
 
-export default (token: Theme) => css`
-  .ant-btn {
+export default ({ token, prefixCls }: { prefixCls: string; token: Theme }) => css`
+  .${prefixCls}-btn {
     box-shadow: none;
   }
 
-  .ant-popover {
+  .${prefixCls}-popover {
     z-index: 1100;
   }
 
-  .ant-slider-track,
-  .ant-tabs-ink-bar,
-  .ant-switch-checked {
+  .${prefixCls}-slider-track, .${prefixCls}-tabs-ink-bar, .${prefixCls}-switch-checked {
     background: ${token.colorPrimary} !important;
   }
 
-  .ant-btn-primary:not(.ant-btn-dangerous) {
+  .${prefixCls}-btn-primary:not(.${prefixCls}-btn-dangerous) {
     color: ${readableColor(token.colorPrimary)};
     background: ${token.colorPrimary};
 

package/src/styles/global.ts

@@ -1,9 +1,9 @@
 import { css } from 'antd-style';
 
-export default () => css`
+export default ({ prefixCls }: { prefixCls: string }) => css`
   html,
   body,
-  .ant-app {
+  .${prefixCls}-app {
     overflow: hidden;
     overscroll-behavior: none;
 

package/src/styles/index.ts

@@ -3,4 +3,9 @@ import { createGlobalStyle } from 'antd-style';
 import antdOverride from './antdOverride';
 import global from './global';
 
-export const GlobalStyle = createGlobalStyle(({ theme }) => [global(), antdOverride(theme)]);
+const prefixCls = 'ant';
+
+export const GlobalStyle = createGlobalStyle(({ theme }) => [
+  global({ prefixCls }),
+  antdOverride({ prefixCls, token: theme }),
+]);

package/src/utils/switchLang.ts

@@ -0,0 +1,6 @@
+import { changeLanguage } from 'i18next';
+
+export const switchLang = (lang: string) => {
+  changeLanguage(lang);
+  document.documentElement.lang = lang;
+};