@lobehub/chat 0.145.9 → 0.145.10

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.145.10](https://github.com/lobehub/lobe-chat/compare/v0.145.9...v0.145.10)
+
+<sup>Released on **2024-04-02**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.145.9](https://github.com/lobehub/lobe-chat/compare/v0.145.8...v0.145.9)
 
 <sup>Released on **2024-04-02**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.145.9",
+  "version": "0.145.10",
   "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/market/features/AgentCard/index.tsx

@@ -52,11 +52,7 @@ const AgentCard = memo<AgentCardProps>(({ CardRender, mobile }) => {
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
           <CardRender items={agentList.slice(0, 3)} renderItem={GridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
-          <CardRender
-            items={agentList.slice(3)}
-            renderItem={GridRender}
-            spotlight={mobile ? undefined : false}
-          />
+          <CardRender items={agentList.slice(3)} renderItem={GridRender} />
         </>
       )}
     </Flexbox>

package/src/features/PluginStore/OnlineList.tsx

@@ -3,9 +3,10 @@ import { Empty } from 'antd';
 import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ServerCrash } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
 
 import AddPluginButton from '@/features/PluginStore/AddPluginButton';
 import { useToolStore } from '@/store/tool';
@@ -31,6 +32,18 @@ export const OnlineList = memo(() => {
 
   const isEmpty = pluginStoreList.length === 0;
 
+  const filteredPluginList = useMemo(
+    () =>
+      pluginStoreList.filter((item) =>
+        [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+          .filter(Boolean)
+          .join('')
+          .toLowerCase()
+          .includes((keywords || '')?.toLowerCase()),
+      ),
+    [pluginStoreList, keywords],
+  );
+
   return (
     <>
       <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
@@ -60,19 +73,20 @@ export const OnlineList = memo(() => {
           )}
         </Center>
       ) : (
-        <Flexbox gap={24}>
-          {pluginStoreList
-            .filter((item) =>
-              [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
-                .filter(Boolean)
-                .join('')
-                .toLowerCase()
-                .includes((keywords || '')?.toLowerCase()),
-            )
-            .map((item) => (
-              <PluginItem key={item.identifier} {...item} />
-            ))}
-        </Flexbox>
+        <Virtuoso
+          itemContent={(index) => {
+            const item = filteredPluginList[index];
+
+            return (
+              <Flexbox key={item.identifier} paddingBlock={12}>
+                <PluginItem {...item} />
+              </Flexbox>
+            );
+          }}
+          overscan={400}
+          style={{ height: 500 }}
+          totalCount={filteredPluginList.length}
+        />
       )}
     </>
   );

package/src/styles/global.ts

@@ -1,6 +1,6 @@
-import { css } from 'antd-style';
+import { Theme, css } from 'antd-style';
 
-export default ({ prefixCls }: { prefixCls: string }) => css`
+export default ({ prefixCls, token }: { prefixCls: string; token: Theme }) => css`
   html,
   body,
   #__next,
@@ -12,6 +12,7 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
   }
 
   * {
+    scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
   }
 

package/src/styles/index.ts

@@ -6,6 +6,6 @@ import global from './global';
 const prefixCls = 'ant';
 
 export const GlobalStyle = createGlobalStyle(({ theme }) => [
-  global({ prefixCls }),
+  global({ prefixCls, token: theme }),
   antdOverride({ prefixCls, token: theme }),
 ]);