@lobehub/chat 0.89.9 → 0.90.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # 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>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor ChatList onActionsClick.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor ChatList onActionsClick ([d06d87e](https://github.com/lobehub/lobe-chat/commit/d06d87e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.89.9](https://github.com/lobehub/lobe-chat/compare/v0.89.8...v0.89.9)
 
 <sup>Released on **2023-10-17**</sup>

package/README.md

@@ -90,8 +90,8 @@ Please be aware that LobeChat is currently under active development, and feedbac
 - [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience.
 - [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more.
 - [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs.
-- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy;
-- [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and customized dialogue functions;
+- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy.
+- [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and customized dialogue functions.
 - [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
 - [x] 🏬 **Role Market**: A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue.
 
@@ -335,7 +335,7 @@ Contributions of all types are more than welcome; if you are interested in contr
 
 ## 🔗 More Products
 
-- **[🤯 Lobe Theme][lobe-theme]:** The modern theme for stable diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
+- **[🤯 Lobe Theme][lobe-theme]:** The modern theme for Stable Diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
 - **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
 - **[💌 Lobe Commit][lobe-commit]:** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.89.9",
+  "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/ChatList/index.tsx

@@ -44,18 +44,9 @@ const List = memo(() => {
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
-      onActionClick={(key, id) => {
-        switch (key) {
-          case 'delete': {
-            deleteMessage(id);
-            break;
-          }
-
-          case 'regenerate': {
-            resendMessage(id);
-            break;
-          }
-        }
+      onActionsClick={{
+        del: ({ id }) => deleteMessage(id),
+        regenerate: ({ id }) => resendMessage(id),
       }}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })

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%;