@lobehub/lobehub 2.0.0-next.162 → 2.0.0-next.163

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.163](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.162...v2.0.0-next.163)
+
+<sup>Released on **2025-12-06**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Add smooth scroll to top on 'More' button click in Title component.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Add smooth scroll to top on 'More' button click in Title component, closes [#10178](https://github.com/lobehub/lobe-chat/issues/10178) ([5ad4f0c](https://github.com/lobehub/lobe-chat/commit/5ad4f0c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.162](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.161...v2.0.0-next.162)
 
 <sup>Released on **2025-12-05**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Add smooth scroll to top on 'More' button click in Title component."
+      ]
+    },
+    "date": "2025-12-06",
+    "version": "2.0.0-next.163"
+  },
   {
     "children": {},
     "date": "2025-12-05",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.162",
+  "version": "2.0.0-next.163",
   "description": "LobeHub - an open-source,comprehensive AI Agent 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/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -13,6 +13,15 @@ import { DiscoverTab } from '@/types/discover';
 
 import { useNav } from '../../../features/useNav';
 
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
+const scrollToTop = () => {
+  const scrollableElement = document?.querySelector(`#${SCROLL_CONTAINER_ID}`);
+
+  if (!scrollableElement) return;
+  scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+};
+
 export const useStyles = createStyles(({ css, token }) => ({
   activeNavItem: css`
     background: ${token.colorFillTertiary};
@@ -44,7 +53,9 @@ const Nav = memo(() => {
         <ActionIcon
           color={theme.colorText}
           icon={MenuIcon}
-          onClick={() => setOpen(true)}
+          onClick={() => {
+            setOpen(true);
+          }}
           size={{ blockSize: 32, size: 18 }}
         />
         {activeItem?.label}
@@ -76,6 +87,7 @@ const Nav = memo(() => {
           compact
           items={items}
           onClick={({ key }) => {
+            scrollToTop();
             if (key === DiscoverTab.Home) {
               navigate('/discover');
             } else {

package/src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Pagination as Page } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -9,6 +9,8 @@ import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/cons
 import { useQuery } from '@/hooks/useQuery';
 import { DiscoverTab } from '@/types/discover';
 
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
 const useStyles = createStyles(({ css, token, prefixCls }) => {
   return {
     page: css`
@@ -37,13 +39,15 @@ const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize })
   const { page } = useQuery();
   const navigate = useNavigate();
   const location = useLocation();
+  const { mobile } = useResponsive();
 
   const handlePageChange = (newPage: number) => {
     const searchParams = new URLSearchParams(location.search);
     searchParams.set('page', String(newPage));
     navigate(`/discover/${tab}?${searchParams.toString()}`);
 
-    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    const scrollContainerId = mobile ? SCROLL_CONTAINER_ID : SCROLL_PARENT_ID;
+    const scrollableElement = document?.querySelector(`#${scrollContainerId}`);
     if (!scrollableElement) return;
     scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
   };

package/src/app/[variants]/(main)/discover/components/Title.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import { Button, Icon, Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import { ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import { Link } from 'react-router-dom';
 
+import { SCROLL_PARENT_ID } from '../features/const';
+
+const SCROLL_CONTAINER_ID = 'lobe-mobile-scroll-container';
+
 const useStyles = createStyles(({ css, responsive, token }) => ({
   more: css`
     display: flex;
@@ -47,7 +51,19 @@ interface TitleProps extends FlexboxProps {
 
 const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
   const { styles } = useStyles();
+  const { mobile } = useResponsive();
   const title = <h2 className={styles.title}>{children}</h2>;
+
+  const handleMoreClick = () => {
+    if (!moreLink) return;
+
+    const scrollContainerId = mobile ? SCROLL_CONTAINER_ID : SCROLL_PARENT_ID;
+    const scrollableElement = document?.querySelector(`#${scrollContainerId}`);
+
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
   return (
     <Flexbox align={'center'} gap={16} horizontal justify={'space-between'} width={'100%'}>
       {tag ? (
@@ -59,7 +75,11 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
         title
       )}
       {moreLink && (
-        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={`/discover${moreLink}`}>
+        <Link
+          onClick={handleMoreClick}
+          target={moreLink.startsWith('http') ? '_blank' : undefined}
+          to={moreLink}
+        >
           <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
             <span>{more}</span>
             <Icon icon={ChevronRight} />