@lobehub/chat 0.79.8 → 0.80.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.80.1](https://github.com/lobehub/lobe-chat/compare/v0.80.0...v0.80.1)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix conversation mobile viewarea.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix conversation mobile viewarea ([6668e11](https://github.com/lobehub/lobe-chat/commit/6668e11))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.79.8",
+  "version": "0.80.1",
   "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/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -1,5 +1,4 @@
 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';
@@ -16,22 +15,9 @@ import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-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 [
@@ -96,7 +82,6 @@ const List = memo(() => {
 
   return (
     <ChatList
-      className={styles}
       data={data}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}

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

@@ -1,4 +1,5 @@
 import { BackBottom } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -10,9 +11,22 @@ import ChatList from './ChatList';
 import ChatInput from './Input';
 import ChatScrollAnchor from './ScrollAnchor';
 
+const useStyles = createStyles(
+  ({ css, responsive, stylish }) => css`
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100%;
+    ${responsive.mobile} {
+      ${stylish.noScrollbar}
+      width: 100vw;
+    }
+  `,
+);
+
 const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
+  const { styles } = useStyles();
 
   const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
   useFetchPluginList();
@@ -20,7 +34,7 @@ const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-        <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
+        <div className={styles} ref={ref}>
           {!mobile && <SafeSpacing />}
           <ChatList />
           <ChatScrollAnchor />

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/metadata.ts

@@ -5,7 +5,7 @@ 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: {
     statusBarStyle: 'black-translucent',
@@ -40,7 +40,7 @@ const metadata: Metadata = {
     siteName: title,
     title: title,
     type: 'website',
-    url: pkg.homepage,
+    url: homepage,
   },
   themeColor: [
     { color: '#fff', media: '(prefers-color-scheme: light)' },

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/const/layoutTokens.ts

@@ -4,7 +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_TEXTAREA_HEIGHT_MOBILE = 120;
 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/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;
+};