@lobehub/chat 0.89.10 → 0.90.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.90.0](https://github.com/lobehub/lobe-chat/compare/v0.89.10...v0.90.0)
+
+<sup>Released on **2023-10-17**</sup>
+
+#### ✨ Features
+
+- **misc**: Add Lazyload.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add Lazyload ([27d6cb7](https://github.com/lobehub/lobe-chat/commit/27d6cb7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.89.10](https://github.com/lobehub/lobe-chat/compare/v0.89.9...v0.89.10)
 
 <sup>Released on **2023-10-17**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.89.10",
+  "version": "0.90.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",
@@ -103,6 +103,7 @@
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
+    "react-lazy-load": "^4",
     "remark": "^14",
     "remark-gfm": "^3",
     "remark-html": "^15",

package/src/app/chat/features/ChatHeader/ShareButton/style.ts

@@ -34,8 +34,7 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
   preview: cx(
     stylish.noScrollbar,
     css`
-      overflow-x: hidden;
-      overflow-y: scroll;
+      overflow: hidden scroll;
 
       width: 100%;
       max-height: 40vh;

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

@@ -12,8 +12,7 @@ import ChatScrollAnchor from './ScrollAnchor';
 
 const useStyles = createStyles(
   ({ css, responsive, stylish }) => css`
-    overflow-x: hidden;
-    overflow-y: scroll;
+    overflow: hidden scroll;
     height: 100%;
     ${responsive.mobile} {
       ${stylish.noScrollbar}

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -2,6 +2,7 @@ import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
+import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionHydrated, useSessionStore } from '@/store/session';
@@ -23,18 +24,19 @@ const SessionList = memo(() => {
     <SkeletonList />
   ) : list.length > 0 ? (
     list.map(({ id }) => (
-      <Link
-        aria-label={id}
-        href={SESSION_CHAT_URL(id, mobile)}
-        key={id}
-        onClick={(e) => {
-          e.preventDefault();
-          if (mobile) switchSession(id);
-          else activeSession(id);
-        }}
-      >
-        <SessionItem id={id} />
-      </Link>
+      <LazyLoad height={70} key={id}>
+        <Link
+          aria-label={id}
+          href={SESSION_CHAT_URL(id, mobile)}
+          onClick={(e) => {
+            e.preventDefault();
+            if (mobile) switchSession(id);
+            else activeSession(id);
+          }}
+        >
+          <SessionItem id={id} />
+        </Link>
+      </LazyLoad>
     ))
   ) : (
     <AddButton />

package/src/app/chat/features/TopicListContent/SystemRole/style.ts

@@ -2,8 +2,7 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
   prompt: css`
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
 
     padding: 0 16px 16px;
 

package/src/app/market/(mobile)/features/AgentCard.tsx

@@ -12,7 +12,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
 }));
 
-const AgentCard = memo<SpotlightCardProps>(({ items, renderItem, gap = 8, ...props }) => {
+const AgentCard = memo<SpotlightCardProps>(({ items, renderItem, gap = 16, ...props }) => {
   const { styles } = useStyles();
   return (
     <Flexbox gap={gap} {...props}>

package/src/app/market/(mobile)/index.tsx

@@ -12,6 +12,6 @@ import Layout from './layout.mobile';
 export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
   <Layout>
     <Index />
-    <AgentCard CardRender={CardRender} defaultAgents={defaultAgents} />
+    <AgentCard CardRender={CardRender} defaultAgents={defaultAgents} mobile />
   </Layout>
 ));

package/src/app/market/features/AgentCard/AgentCardItem.tsx

@@ -28,7 +28,6 @@ const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
           animation={isHovering}
           avatar={avatar}
           background={backgroundColor || theme.colorFillTertiary}
-          className={styles.avatar}
           size={56}
         />
         <Paragraph className={styles.title} ellipsis={{ rows: 1, tooltip: title }}>
@@ -38,7 +37,7 @@ const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
           {description}
         </Paragraph>
         <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-          {(tags as string[]).map((tag: string, index) => (
+          {(tags as string[]).filter(Boolean).map((tag: string, index) => (
             <Tag key={index} style={{ margin: 0 }}>
               {startCase(tag).trim()}
             </Tag>

package/src/app/market/features/AgentCard/index.tsx

@@ -1,8 +1,8 @@
 import { SpotlightCardProps } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { FC, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import LazyLoad from 'react-lazy-load';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 import { AgentsMarketIndexItem } from '@/types/market';
@@ -12,16 +12,25 @@ import AgentCardItem from './AgentCardItem';
 import Loading from './Loading';
 import { useStyles } from './style';
 
-const gridRender = (item: any) => <AgentCardItem {...item} />;
+const gridRender: SpotlightCardProps['renderItem'] = (item) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { styles } = useStyles();
+  return (
+    <LazyLoad className={styles.lazy}>
+      <AgentCardItem {...item} />
+    </LazyLoad>
+  );
+};
 
 export interface AgentCardProps {
   CardRender: FC<SpotlightCardProps>;
   defaultAgents?: AgentsMarketIndexItem[];
+  mobile?: boolean;
 }
 
-const AgentCard = memo<AgentCardProps>(({ defaultAgents, CardRender }) => {
+const AgentCard = memo<AgentCardProps>(({ defaultAgents, CardRender, mobile }) => {
   const { t } = useTranslation('market');
-  const { mobile } = useResponsive();
+
   const { styles } = useStyles();
 
   const [useFetchAgentList, keywords] = useMarketStore((s) => [
@@ -44,13 +53,21 @@ const AgentCard = memo<AgentCardProps>(({ defaultAgents, CardRender }) => {
     <Flexbox gap={mobile ? 16 : 24}>
       <TagList />
       {keywords ? (
-        <CardRender items={agentListData} renderItem={gridRender} spotlight={false} />
+        <CardRender
+          items={agentListData}
+          renderItem={gridRender}
+          spotlight={mobile ? undefined : false}
+        />
       ) : (
         <>
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
           <CardRender items={agentListData.slice(0, 3)} renderItem={gridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
-          <CardRender items={agentListData.slice(3)} renderItem={gridRender} spotlight={false} />
+          <CardRender
+            items={agentListData.slice(3)}
+            renderItem={gridRender}
+            spotlight={mobile ? undefined : false}
+          />
         </>
       )}
     </Flexbox>

package/src/app/market/features/AgentCard/style.ts

@@ -1,8 +1,6 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token, responsive }) => ({
-  avatar: css``,
-
   container: css`
     position: relative;
     overflow: hidden;
@@ -17,6 +15,9 @@ export const useStyles = createStyles(({ css, token, responsive }) => ({
   inner: css`
     padding: 16px;
   `,
+  lazy: css`
+    min-height: 232px;
+  `,
   subTitle: css`
     font-size: 24px;
     font-weight: 600;

package/src/app/welcome/features/Banner/style.ts

@@ -56,8 +56,7 @@ export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) =
       css`
         position: relative;
 
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: hidden auto;
 
         max-width: 1024px;
         height: 100%;

package/src/layout/AppLayout.mobile.tsx

@@ -14,8 +14,7 @@ const useStyles = createStyles(({ css, cx, stylish }) => ({
     css`
       position: relative;
 
-      overflow-x: hidden;
-      overflow-y: auto;
+      overflow: hidden auto;
 
       width: 100vw;
       height: 100%;