@lobehub/chat 0.80.0 → 0.80.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # 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>

package/package.json

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