@lobehub/chat 0.159.4 → 0.159.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.159.5](https://github.com/lobehub/lobe-chat/compare/v0.159.4...v0.159.5)
+
+<sup>Released on **2024-05-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix scroll and expand.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix scroll and expand, closes [#2470](https://github.com/lobehub/lobe-chat/issues/2470) ([8b1202a](https://github.com/lobehub/lobe-chat/commit/8b1202a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.159.4](https://github.com/lobehub/lobe-chat/compare/v0.159.3...v0.159.4)
 
 <sup>Released on **2024-05-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.159.4",
+  "version": "0.159.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/@topic/_layout/Desktop.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '../features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Header />
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        {children}
+      </Flexbox>
+    </>
+  );
+};
+
+export default Layout;

package/src/app/(main)/chat/(workspace)/@topic/_layout/Mobile.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import TopicSearchBar from '../features/TopicSearchBar';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox gap={8} height={'100%'} padding={'8px 8px 0'} style={{ overflow: 'hidden' }}>
+      <TopicSearchBar />
+      <Flexbox
+        height={'100%'}
+        style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
+        width={'calc(100% + 16px)'}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Layout;

package/src/app/(main)/chat/(workspace)/@topic/default.tsx

@@ -1,15 +1,21 @@
 import { isMobileDevice } from '@/utils/responsive';
 
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
 import SystemRole from './features/SystemRole';
 import TopicListContent from './features/TopicListContent';
 
 const Topic = () => {
   const mobile = isMobileDevice();
 
+  const Layout = mobile ? Mobile : Desktop;
+
   return (
     <>
       {!mobile && <SystemRole />}
-      <TopicListContent mobile={mobile} />
+      <Layout>
+        <TopicListContent />
+      </Layout>
     </>
   );
 };

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/{Topic/SkeletonList.tsx → SkeletonList.tsx}

@@ -45,7 +45,7 @@ export const Placeholder = memo(() => {
 });
 
 export const SkeletonList = memo(() => (
-  <Flexbox>
+  <Flexbox style={{ paddingTop: 6 }}>
     {Array.from({ length: 8 }).map((_, i) => (
       <Placeholder key={i} />
     ))}

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/{Topic/TopicItem.tsx → TopicItem.tsx}

@@ -19,7 +19,12 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
   container: css`
     cursor: pointer;
+
+    width: calc(100% - 16px);
+    margin-block: 2px;
+    margin-inline: 8px;
     padding: 8px;
+
     border-radius: ${token.borderRadius}px;
 
     &:hover {

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/index.tsx

@@ -1,18 +1,100 @@
+'use client';
+
+import { EmptyCard } from '@lobehub/ui';
+import { useThemeMode } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import React, { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+
+import { imageUrl } from '@/const/url';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { ChatTopic } from '@/types/topic';
+
+import { Placeholder, SkeletonList } from './SkeletonList';
+import TopicItem from './TopicItem';
+
+const TopicListContent = memo(() => {
+  const { t } = useTranslation('chat');
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const { isDarkMode } = useThemeMode();
+  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
+    s.topicsInit,
+    s.activeTopicId,
+    topicSelectors.currentTopicLength(s),
+  ]);
+  const [visible, updateGuideState] = useUserStore((s) => [
+    s.preference.guide?.topic,
+    s.updateGuideState,
+  ]);
+
+  const topics = useChatStore(
+    (s) => [
+      {
+        favorite: false,
+        id: 'default',
+        title: t('topic.defaultTitle'),
+      } as ChatTopic,
+      ...topicSelectors.displayTopics(s),
+    ],
+    isEqual,
+  );
+
+  const itemContent = useCallback(
+    (index: number, { id, favorite, title }: ChatTopic) =>
+      index === 0 ? (
+        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
+      ) : (
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
+      ),
+    [activeTopicId],
+  );
+
+  const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
 
-import Header from './Header';
-import { Topic } from './Topic';
-import TopicSearchBar from './TopicSearchBar';
-
-const TopicListContent = ({ mobile }: { mobile?: boolean }) => {
-  return (
-    <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
-      {mobile ? <TopicSearchBar /> : <Header />}
-      <Flexbox gap={16} height={'100%'} style={{ paddingTop: 6, position: 'relative' }}>
-        <Topic mobile={mobile} />
-      </Flexbox>
-    </Flexbox>
+  return !topicsInit ? (
+    <SkeletonList />
+  ) : (
+    <>
+      {topicLength === 0 && visible && (
+        <Flexbox paddingInline={8}>
+          <EmptyCard
+            alt={t('topic.guide.desc')}
+            cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
+            desc={t('topic.guide.desc')}
+            height={120}
+            imageProps={{
+              priority: true,
+            }}
+            onVisibleChange={(visible) => {
+              updateGuideState({ topic: visible });
+            }}
+            style={{ flex: 'none', marginBottom: 12 }}
+            title={t('topic.guide.title')}
+            visible={visible}
+            width={200}
+          />
+        </Flexbox>
+      )}
+      <Virtuoso
+        components={{ ScrollSeekPlaceholder: Placeholder }}
+        computeItemKey={(_, item) => item.id}
+        data={topics}
+        fixedItemHeight={44}
+        initialTopMostItemIndex={Math.max(activeIndex, 0)}
+        itemContent={itemContent}
+        overscan={44 * 10}
+        ref={virtuosoRef}
+        scrollSeekConfiguration={{
+          enter: (velocity) => Math.abs(velocity) > 350,
+          exit: (velocity) => Math.abs(velocity) < 10,
+        }}
+      />
+    </>
   );
-};
+});
 
 export default TopicListContent;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -2,7 +2,8 @@
 
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
-import { PropsWithChildren, memo, useEffect, useLayoutEffect, useState } from 'react';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -26,27 +27,23 @@ const useStyles = createStyles(({ css, token }) => ({
 const TopicPanel = memo(({ children }: PropsWithChildren) => {
   const { styles } = useStyles();
   const { md = true, lg = true } = useResponsive();
-  const [showAgentSettings, toggleConfig, isPreferenceInit] = useGlobalStore((s) => [
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
     s.isPreferenceInit,
   ]);
-  const [expand, setExpand] = useState(showAgentSettings);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));
 
-  const handleExpand = (e: boolean) => {
-    toggleConfig(e);
-    setExpand(e);
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, Boolean(showAgentSettings))) return;
+    toggleConfig(expand);
+    setCacheExpand(expand);
   };
 
-  useLayoutEffect(() => {
-    if (!isPreferenceInit) return;
-    setExpand(showAgentSettings);
-  }, [isPreferenceInit, showAgentSettings]);
-
   useEffect(() => {
-    if (lg && showAgentSettings) setExpand(true);
-    if (!lg) setExpand(false);
-  }, [lg, showAgentSettings]);
+    if (lg && cacheExpand) toggleConfig(true);
+    if (!lg) toggleConfig(false);
+  }, [lg, cacheExpand]);
 
   return (
     <DraggablePanel
@@ -54,7 +51,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
       classNames={{
         content: styles.content,
       }}
-      expand={expand}
+      expand={showAgentSettings}
       minWidth={CHAT_SIDEBAR_WIDTH}
       mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpand}

package/src/app/(main)/chat/(workspace)/_layout/Mobile/TopicModal.tsx

@@ -17,7 +17,15 @@ const Topics = memo(({ children }: PropsWithChildren) => {
   const { t } = useTranslation('chat');
 
   return (
-    <Modal allowFullscreen onCancel={() => setOpen(false)} open={open} title={t('topic.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={() => setOpen(false)}
+      open={open}
+      styles={{
+        body: { padding: 0 },
+      }}
+      title={t('topic.title')}
+    >
       {children}
     </Modal>
   );

package/src/app/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useLayoutEffect, useState } from 'react';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
@@ -18,25 +18,21 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const SessionPanel = memo<PropsWithChildren>(({ children }) => {
   const { md = true } = useResponsive();
+
   const { styles } = useStyles();
-  const [sessionsWidth, sessionExpandable, updatePreference, isPreferenceInit] = useGlobalStore(
-    (s) => [
-      s.preference.sessionsWidth,
-      s.preference.showSessionPanel,
-      s.updatePreference,
-      s.isPreferenceInit,
-    ],
-  );
-  const [expand, setExpand] = useState(sessionExpandable);
+  const [sessionsWidth, sessionExpandable, updatePreference] = useGlobalStore((s) => [
+    s.preference.sessionsWidth,
+    s.preference.showSessionPanel,
+    s.updatePreference,
+  ]);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(sessionExpandable));
   const [tmpWidth, setWidth] = useState(sessionsWidth);
   if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);
 
-  const handleExpand: DraggablePanelProps['onExpandChange'] = (e) => {
-    updatePreference({
-      sessionsWidth: e ? 320 : 0,
-      showSessionPanel: e,
-    });
-    setExpand(e);
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, sessionExpandable)) return;
+    updatePreference({ showSessionPanel: expand });
+    setCacheExpand(expand);
   };
 
   const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
@@ -47,21 +43,16 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
     updatePreference({ sessionsWidth: nextWidth });
   };
 
-  useLayoutEffect(() => {
-    if (!isPreferenceInit) return;
-    setExpand(sessionExpandable);
-  }, [isPreferenceInit, sessionExpandable]);
-
   useEffect(() => {
-    if (md && sessionExpandable) setExpand(true);
-    if (!md) setExpand(false);
-  }, [md, sessionExpandable]);
+    if (md && cacheExpand) updatePreference({ showSessionPanel: true });
+    if (!md) updatePreference({ showSessionPanel: false });
+  }, [md, cacheExpand]);
 
   return (
     <DraggablePanel
       className={styles.panel}
       defaultSize={{ width: tmpWidth }}
-      expand={expand}
+      expand={sessionExpandable}
       maxWidth={400}
       minWidth={FOLDER_WIDTH}
       mode={md ? 'fixed' : 'float'}

package/src/components/SidebarHeader/index.tsx

@@ -2,10 +2,9 @@ import { createStyles } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css }) => ({
   header: css`
     z-index: 10;
-    box-shadow: 0 2px 6px ${token.colorBgLayout};
   `,
 }));
 

package/src/components/server/MobileNavLayout.tsx

@@ -16,6 +16,7 @@ const MobileContentLayout = ({
   const content = (
     <Flexbox
       height="100%"
+      id={'lobe-mobile-scroll-container'}
       style={{
         overflowX: 'hidden',
         overflowY: 'auto',

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -6,7 +6,7 @@ import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { RefreshCw } from 'lucide-react';
 import Link from 'next/link';
-import { memo, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -71,26 +71,6 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
     </Flexbox>
   ));
 
-  const cards = useMemo(
-    () =>
-      agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
-        <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
-          <Flexbox className={styles.card} gap={8} horizontal>
-            <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
-            <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
-              <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
-                {agent.meta.title}
-              </Paragraph>
-              <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
-                {agent.meta.description}
-              </Paragraph>
-            </Flexbox>
-          </Flexbox>
-        </Link>
-      )),
-    [agentList, sliceStart],
-  );
-
   const handleRefresh = () => {
     if (!agentList) return;
     setSliceStart(Math.floor((Math.random() * agentList.length) / 2));
@@ -108,7 +88,23 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
         />
       </Flexbox>
       <Grid gap={8} rows={2}>
-        {isLoading ? loadingCards : cards}
+        {isLoading
+          ? loadingCards
+          : agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
+              <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
+                <Flexbox className={styles.card} gap={8} horizontal>
+                  <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
+                  <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
+                    <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
+                      {agent.meta.title}
+                    </Paragraph>
+                    <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
+                      {agent.meta.description}
+                    </Paragraph>
+                  </Flexbox>
+                </Flexbox>
+              </Link>
+            ))}
       </Grid>
     </Flexbox>
   );

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -30,12 +30,25 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 100%;
     min-height: 100dvh;
     max-height: 100dvh;
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
   `,
   // scrollbar-width and scrollbar-color are supported from Chrome 121
   // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
   scrollbar: css`
     scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
+
+    #lobe-mobile-scroll-container {
+      scrollbar-width: none;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
   `,
 
   // so this is a polyfill for older browsers

package/src/store/user/slices/preference/initialState.ts

@@ -32,6 +32,7 @@ export interface UserPreferenceState {
 export const DEFAULT_PREFERENCE: UserPreference = {
   guide: {
     moveSettingsToAvatar: true,
+    topic: true,
   },
   telemetry: null,
   useCmdEnterToSend: false,

package/src/styles/global.ts

@@ -16,10 +16,33 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     max-height: 100dvh;
 
     background: ${token.colorBgLayout};
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
   }
 
   * {
     scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
+
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      background-color: ${token.colorText};
+      background-clip: content-box;
+      border: 3px solid transparent;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
   }
 `;

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/Topic/index.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import { EmptyCard } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import React, { memo, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-
-import { imageUrl } from '@/const/url';
-import { useChatStore } from '@/store/chat';
-import { topicSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { ChatTopic } from '@/types/topic';
-
-import { Placeholder, SkeletonList } from './SkeletonList';
-import TopicItem from './TopicItem';
-
-export const Topic = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { t } = useTranslation('chat');
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
-  const { isDarkMode } = useThemeMode();
-  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
-    s.topicsInit,
-    s.activeTopicId,
-    topicSelectors.currentTopicLength(s),
-  ]);
-  const [visible, updateGuideState] = useUserStore((s) => [
-    s.preference.guide?.topic,
-    s.updateGuideState,
-  ]);
-
-  const topics = useChatStore(
-    (s) => [
-      {
-        favorite: false,
-        id: 'default',
-        title: t('topic.defaultTitle'),
-      } as ChatTopic,
-      ...topicSelectors.displayTopics(s),
-    ],
-    isEqual,
-  );
-
-  const itemContent = useCallback(
-    (index: number, { id, favorite, title }: ChatTopic) =>
-      index === 0 ? (
-        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
-      ) : (
-        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
-      ),
-    [activeTopicId],
-  );
-
-  const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
-
-  return !topicsInit ? (
-    <SkeletonList />
-  ) : (
-    <Flexbox
-      gap={2}
-      height={'100%'}
-      paddingInline={mobile ? undefined : 8}
-      style={{ marginBottom: 12 }}
-    >
-      {topicLength === 0 && (
-        <EmptyCard
-          alt={t('topic.guide.desc')}
-          cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
-          desc={t('topic.guide.desc')}
-          height={120}
-          imageProps={{
-            priority: true,
-          }}
-          onVisibleChange={(visible) => {
-            updateGuideState({ topic: visible });
-          }}
-          style={{ flex: 'none', marginBottom: 12 }}
-          title={t('topic.guide.title')}
-          visible={visible}
-          width={200}
-        />
-      )}
-      <Virtuoso
-        components={{ ScrollSeekPlaceholder: Placeholder }}
-        computeItemKey={(_, item) => item.id}
-        data={topics}
-        fixedItemHeight={44}
-        initialTopMostItemIndex={Math.max(activeIndex, 0)}
-        itemContent={itemContent}
-        overscan={44 * 10}
-        ref={virtuosoRef}
-        scrollSeekConfiguration={{
-          enter: (velocity) => Math.abs(velocity) > 350,
-          exit: (velocity) => Math.abs(velocity) < 10,
-        }}
-      />
-    </Flexbox>
-  );
-});