@lobehub/chat 0.101.0 → 0.101.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.101.2](https://github.com/lobehub/lobe-chat/compare/v0.101.1...v0.101.2)
+
+<sup>Released on **2023-11-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: upload image to vision model adapting to mobile device.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: upload image to vision model adapting to mobile device, closes [#457](https://github.com/lobehub/lobe-chat/issues/457) ([9c4f4ee](https://github.com/lobehub/lobe-chat/commit/9c4f4ee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.101.1](https://github.com/lobehub/lobe-chat/compare/v0.101.0...v0.101.1)
+
+<sup>Released on **2023-11-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix market search (fix.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix market search (fix, closes [#437](https://github.com/lobehub/lobe-chat/issues/437) ([178b742](https://github.com/lobehub/lobe-chat/commit/178b742))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.101.0](https://github.com/lobehub/lobe-chat/compare/v0.100.5...v0.101.0)
 
 <sup>Released on **2023-11-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.101.0",
+  "version": "0.101.2",
   "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",

package/src/app/chat/(desktop)/features/ChatInput/InputArea.tsx

@@ -1,11 +1,7 @@
-import { TextArea } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
-import { useSessionStore } from '@/store/session';
-
-import { useSendMessage } from '../../../features/ChatInput/useSend';
+import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
 
 const useStyles = createStyles(({ css }) => {
   return {
@@ -22,46 +18,11 @@ const useStyles = createStyles(({ css }) => {
 });
 
 const InputArea = memo(() => {
-  const { t } = useTranslation('common');
-  const { cx, styles } = useStyles();
-
-  const isChineseInput = useRef(false);
-
-  const [loading, message, updateInputMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.inputMessage,
-    s.updateInputMessage,
-  ]);
-
-  const handleSend = useSendMessage();
+  const { styles } = useStyles();
 
   return (
-    <div className={cx(styles.textareaContainer)}>
-      <TextArea
-        className={styles.textarea}
-        onBlur={(e) => {
-          updateInputMessage(e.target.value);
-        }}
-        onChange={(e) => {
-          updateInputMessage(e.target.value);
-        }}
-        onCompositionEnd={() => {
-          isChineseInput.current = false;
-        }}
-        onCompositionStart={() => {
-          isChineseInput.current = true;
-        }}
-        onPressEnter={(e) => {
-          if (!loading && !e.shiftKey && !isChineseInput.current) {
-            e.preventDefault();
-            handleSend();
-          }
-        }}
-        placeholder={t('sendPlaceholder', { ns: 'chat' })}
-        resize={false}
-        type="pure"
-        value={message}
-      />
+    <div className={styles.textareaContainer}>
+      <InputAreaInner className={styles.textarea} />
     </div>
   );
 });

package/src/app/chat/(mobile)/features/ChatInput/Files.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from '@/app/chat/components/FileList';
+import { useFileStore } from '@/store/files';
+
+const Files = memo(() => {
+  const inputFilesList = useFileStore((s) => s.inputFilesList);
+
+  return (
+    <Flexbox padding={12}>
+      <FileList alwaysShowClose items={inputFilesList} />
+    </Flexbox>
+  );
+});
+
+export default Files;

package/src/app/chat/(mobile)/features/ChatInput/Mobile.tsx

@@ -1,79 +1,25 @@
-import { Icon, Input } from '@lobehub/ui';
-import { Button, type InputRef } from 'antd';
-import { Loader2, SendHorizonal } from 'lucide-react';
-import { forwardRef, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import useControlledState from 'use-merge-value';
 
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
+import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
 import SaveTopic from '@/app/chat/features/ChatInput/Topic';
 
+import SendButton from './SendButton';
 import { useStyles } from './style.mobile';
 
-export type ChatInputAreaMobile = {
-  loading?: boolean;
-  onChange?: (value: string) => void;
-  onSend?: (value: string) => void;
-  onStop?: () => void;
-  value?: string;
-};
+const ChatInputArea = memo(() => {
+  const { cx, styles } = useStyles();
 
-const ChatInputArea = forwardRef<InputRef, ChatInputAreaMobile>(
-  ({ onSend, loading, onChange, onStop, value }) => {
-    const { t } = useTranslation('chat');
-    const [currentValue, setCurrentValue] = useControlledState<string>('', {
-      onChange: onChange,
-      value,
-    });
-    const { cx, styles } = useStyles();
-    const isChineseInput = useRef(false);
-
-    const handleSend = useCallback(() => {
-      if (loading) return;
-      if (onSend) onSend(currentValue);
-      setCurrentValue('');
-    }, [currentValue]);
-
-    return (
-      <Flexbox className={cx(styles.container)} gap={12}>
-        <ActionBar rightAreaStartRender={<SaveTopic />} />
-        <Flexbox className={styles.inner} gap={8} horizontal>
-          <Input
-            className={cx(styles.input)}
-            onBlur={(e) => {
-              setCurrentValue(e.target.value);
-            }}
-            onChange={(e) => {
-              setCurrentValue(e.target.value);
-            }}
-            onCompositionEnd={() => {
-              isChineseInput.current = false;
-            }}
-            onCompositionStart={() => {
-              isChineseInput.current = true;
-            }}
-            onPressEnter={(e) => {
-              if (!loading && !e.shiftKey && !isChineseInput.current) {
-                e.preventDefault();
-                handleSend();
-              }
-            }}
-            placeholder={t('sendPlaceholder')}
-            type={'block'}
-            value={currentValue}
-          />
-          <div>
-            {loading ? (
-              <Button icon={loading && <Icon icon={Loader2} spin />} onClick={onStop} />
-            ) : (
-              <Button icon={<Icon icon={SendHorizonal} />} onClick={handleSend} type={'primary'} />
-            )}
-          </div>
-        </Flexbox>
+  return (
+    <Flexbox className={cx(styles.container)} gap={12}>
+      <ActionBar rightAreaStartRender={<SaveTopic />} />
+      <Flexbox className={styles.inner} gap={8} horizontal>
+        <InputAreaInner mobile />
+        <SendButton />
       </Flexbox>
-    );
-  },
-);
+    </Flexbox>
+  );
+});
 
 export default ChatInputArea;

package/src/app/chat/(mobile)/features/ChatInput/SendButton.tsx

@@ -0,0 +1,30 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Loader2, SendHorizonal } from 'lucide-react';
+import { memo } from 'react';
+
+import { useSendMessage } from '@/app/chat/features/ChatInput/useSend';
+import { useSessionStore } from '@/store/session';
+
+const SendButton = memo(() => {
+  const [loading, onStop] = useSessionStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
+
+  const handleSend = useSendMessage();
+
+  return loading ? (
+    <Button
+      icon={loading && <Icon icon={Loader2} spin />}
+      onClick={onStop}
+      style={{ flex: 'none' }}
+    />
+  ) : (
+    <Button
+      icon={<Icon icon={SendHorizonal} />}
+      onClick={handleSend}
+      style={{ flex: 'none' }}
+      type={'primary'}
+    />
+  );
+});
+
+export default SendButton;

package/src/app/chat/(mobile)/features/ChatInput/index.tsx

@@ -1,10 +1,10 @@
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
 
+import Files from './Files';
 import ChatInputArea from './Mobile';
 
 const useStyles = createStyles(
@@ -23,25 +23,12 @@ const useStyles = createStyles(
 const ChatInputMobileLayout = memo(() => {
   const { styles } = useStyles();
 
-  const [message, setMessage] = useState('');
-
-  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.sendMessage,
-    s.stopGenerateMessage,
-  ]);
-
   return (
     <>
+      <Files />
       <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
       <div className={styles}>
-        <ChatInputArea
-          loading={isLoading}
-          onChange={setMessage}
-          onSend={sendMessage}
-          onStop={stopGenerateMessage}
-          value={message}
-        />
+        <ChatInputArea />
       </div>
     </>
   );

package/src/app/chat/components/FileList/FileItem.style.ts

@@ -28,6 +28,9 @@ export const useStyles = createStyles(({ css, cx, token, isDarkMode }) => {
   `);
 
   return {
+    alwaysShowClose: css`
+      opacity: 1 !important;
+    `,
     closeIcon,
     container: css`
       cursor: pointer;

package/src/app/chat/components/FileList/FileItem.tsx

@@ -10,60 +10,64 @@ import { useFileStore } from '@/store/files';
 
 import { IMAGE_SIZE, useStyles } from './FileItem.style';
 
-const FileItem = memo<{ editable: boolean; id: string; onClick: () => void }>(
-  ({ editable, id, onClick }) => {
-    const { styles } = useStyles();
-    const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
+interface FileItemProps {
+  alwaysShowClose?: boolean;
+  editable: boolean;
+  id: string;
+  onClick: () => void;
+}
+const FileItem = memo<FileItemProps>(({ editable, id, onClick, alwaysShowClose }) => {
+  const { styles, cx } = useStyles();
+  const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
 
-    const { data, isLoading } = useFetchFile(id);
+  const { data, isLoading } = useFetchFile(id);
 
-    return (
-      <Flexbox className={styles.container} onClick={onClick}>
-        {isLoading ? (
-          <Skeleton
-            active
-            title={{
-              style: { borderRadius: 8, height: IMAGE_SIZE },
-              width: IMAGE_SIZE,
-            }}
-          />
-        ) : (
-          <Flexbox className={styles.imageCtn}>
-            <div className={styles.imageWrapper}>
-              {data ? (
-                <Image
-                  alt={data.name || ''}
-                  className={styles.image}
-                  fetchPriority={'high'}
-                  height={IMAGE_SIZE}
-                  loading={'lazy'}
-                  src={data.url}
-                  width={IMAGE_SIZE}
-                />
-              ) : (
-                <Center className={styles.notFound} height={'100%'}>
-                  <Icon icon={LucideImageOff} size={{ fontSize: 28 }} />
-                </Center>
-              )}
-            </div>
-          </Flexbox>
-        )}
-        {/* only show close icon when editable */}
-        {editable && (
-          <Center
-            className={styles.closeIcon}
-            onClick={(e) => {
-              e.stopPropagation();
+  return (
+    <Flexbox className={styles.container} onClick={onClick}>
+      {isLoading ? (
+        <Skeleton
+          active
+          title={{
+            style: { borderRadius: 8, height: IMAGE_SIZE },
+            width: IMAGE_SIZE,
+          }}
+        />
+      ) : (
+        <Flexbox className={styles.imageCtn}>
+          <div className={styles.imageWrapper}>
+            {data ? (
+              <Image
+                alt={data.name || ''}
+                className={styles.image}
+                fetchPriority={'high'}
+                height={IMAGE_SIZE}
+                loading={'lazy'}
+                src={data.url}
+                width={IMAGE_SIZE}
+              />
+            ) : (
+              <Center className={styles.notFound} height={'100%'}>
+                <Icon icon={LucideImageOff} size={{ fontSize: 28 }} />
+              </Center>
+            )}
+          </div>
+        </Flexbox>
+      )}
+      {/* only show close icon when editable */}
+      {editable && (
+        <Center
+          className={cx(styles.closeIcon, alwaysShowClose && styles.alwaysShowClose)}
+          onClick={(e) => {
+            e.stopPropagation();
 
-              removeFile(id);
-            }}
-          >
-            <CloseCircleFilled />
-          </Center>
-        )}
-      </Flexbox>
-    );
-  },
-);
+            removeFile(id);
+          }}
+        >
+          <CloseCircleFilled />
+        </Center>
+      )}
+    </Flexbox>
+  );
+});
 
 export default FileItem;

package/src/app/chat/components/FileList/index.tsx

@@ -14,11 +14,14 @@ import Lightbox from './Lightbox';
 // }));
 
 interface FileListProps {
+  alwaysShowClose?: boolean;
+
   editable?: boolean;
+
   items: string[];
 }
 
-const FileList = memo<FileListProps>(({ items, editable = true }) => {
+const FileList = memo<FileListProps>(({ items, editable = true, alwaysShowClose }) => {
   // const { styles } = useStyles();
 
   const [showLightbox, setShowLightbox] = useState(false);
@@ -38,6 +41,7 @@ const FileList = memo<FileListProps>(({ items, editable = true }) => {
       >
         {items.map((i, index) => (
           <FileItem
+            alwaysShowClose={alwaysShowClose}
             editable={editable}
             id={i}
             key={i}

package/src/app/chat/features/ChatInput/InputAreaInner/index.tsx

@@ -0,0 +1,57 @@
+import { Input, TextArea } from '@lobehub/ui';
+import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+import { useSendMessage } from '../useSend';
+
+export interface InputAreaInnerProps {
+  className?: string;
+  mobile?: boolean;
+}
+
+const InputAreaInner = memo<InputAreaInnerProps>(({ className, mobile }) => {
+  const { t } = useTranslation('chat');
+  const isChineseInput = useRef(false);
+
+  const [loading, message, updateInputMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.inputMessage,
+    s.updateInputMessage,
+  ]);
+
+  const handleSend = useSendMessage();
+
+  const Render = mobile ? Input : TextArea;
+
+  return (
+    <Render
+      className={className}
+      onBlur={(e) => {
+        updateInputMessage(e.target.value);
+      }}
+      onChange={(e) => {
+        updateInputMessage(e.target.value);
+      }}
+      onCompositionEnd={() => {
+        isChineseInput.current = false;
+      }}
+      onCompositionStart={() => {
+        isChineseInput.current = true;
+      }}
+      onPressEnter={(e) => {
+        if (!loading && !e.shiftKey && !isChineseInput.current) {
+          e.preventDefault();
+          handleSend();
+        }
+      }}
+      placeholder={t('sendPlaceholder')}
+      resize={false}
+      type={mobile ? 'block' : 'pure'}
+      value={message}
+    />
+  );
+});
+
+export default InputAreaInner;

package/src/app/market/(desktop)/features/AgentDetail.tsx

@@ -1,6 +1,6 @@
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -31,6 +31,18 @@ const SideBar = memo(() => {
     s.activateAgent,
   ]);
 
+  const handleExpandChange = useCallback(
+    (show: boolean) => {
+      if (!show) {
+        setTempId(useMarketStore.getState().currentIdentifier);
+        deactivateAgent();
+      } else if (tempId) {
+        activateAgent(tempId);
+      }
+    },
+    [deactivateAgent, activateAgent, tempId],
+  );
+
   return (
     <DraggablePanel
       className={styles.drawer}
@@ -40,14 +52,7 @@ const SideBar = memo(() => {
       expand={showAgentSidebar}
       minWidth={MARKET_SIDEBAR_WIDTH}
       mode={'fixed'}
-      onExpandChange={(show) => {
-        if (!show) {
-          setTempId(useMarketStore.getState().currentIdentifier);
-          deactivateAgent();
-        } else if (tempId) {
-          activateAgent(tempId);
-        }
-      }}
+      onExpandChange={handleExpandChange}
       placement={'right'}
     >
       <DraggablePanelContainer

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

@@ -6,18 +6,17 @@ import { FC, memo } from 'react';
 
 import AgentCard from '@/app/market/features/AgentCard';
 import ResponsiveIndex from '@/components/ResponsiveIndex';
-import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
 import Layout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
-export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
+export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>
       <Index />
-      <AgentCard CardRender={SpotlightCard} defaultAgents={defaultAgents} />
+      <AgentCard CardRender={SpotlightCard} />
     </Layout>
   </ResponsiveIndex>
 ));

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

@@ -3,15 +3,14 @@
 import { memo } from 'react';
 
 import AgentCard from '@/app/market/features/AgentCard';
-import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
 import CardRender from './features/AgentCard';
 import Layout from './layout.mobile';
 
-export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
+export default memo(() => (
   <Layout>
     <Index />
-    <AgentCard CardRender={CardRender} defaultAgents={defaultAgents} mobile />
+    <AgentCard CardRender={CardRender} mobile />
   </Layout>
 ));

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

@@ -13,13 +13,16 @@ import AgentCardBanner from './AgentCardBanner';
 import { useStyles } from './style';
 
 const { Paragraph } = Typography;
+
 const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const onAgentCardClick = useMarketStore((s) => s.activateAgent);
-  const { avatar, title, description, tags, backgroundColor } = meta;
   const { styles, theme } = useStyles();
   const { isDarkMode } = useThemeMode();
+
+  const { avatar, title, description, tags, backgroundColor } = meta;
+
   return (
     <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
       <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />

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

@@ -1,71 +1,60 @@
 import { SpotlightCardProps } from '@lobehub/ui';
-import { FC, memo, useMemo } from 'react';
+import isEqual from 'fast-deep-equal';
+import { FC, memo, useCallback } 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';
 
 import TagList from '../TagList';
 import AgentCardItem from './AgentCardItem';
 import Loading from './Loading';
 import { useStyles } from './style';
 
-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, mobile }) => {
+const AgentCard = memo<AgentCardProps>(({ CardRender, mobile }) => {
   const { t } = useTranslation('market');
-
-  const { styles } = useStyles();
-
   const [useFetchAgentList, keywords] = useMarketStore((s) => [
     s.useFetchAgentList,
     s.searchKeywords,
   ]);
-  useFetchAgentList();
-
-  const clientAgentList = useMarketStore(agentMarketSelectors.getAgentList);
-  const agentList = clientAgentList.length === 0 && defaultAgents ? defaultAgents : clientAgentList;
+  const { isLoading } = useFetchAgentList();
+  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
+  const { styles } = useStyles();
 
-  const agentListData = useMemo(() => {
-    if (!keywords) return agentList;
-    return agentList.filter(({ meta }) => JSON.stringify(meta).toLowerCase().includes(keywords));
-  }, [agentList, keywords]);
+  const GridRender: SpotlightCardProps['renderItem'] = useCallback(
+    (props: any) => (
+      <LazyLoad className={styles.lazy}>
+        <AgentCardItem {...props} />
+      </LazyLoad>
+    ),
+    [styles.lazy],
+  );
 
-  if (agentList.length === 0) return <Loading />;
+  if (isLoading) return <Loading />;
 
   return (
     <Flexbox gap={mobile ? 16 : 24}>
       <TagList />
       {keywords ? (
         <CardRender
-          items={agentListData}
-          renderItem={gridRender}
+          items={agentList}
+          renderItem={GridRender}
           spotlight={mobile ? undefined : false}
         />
       ) : (
         <>
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
-          <CardRender items={agentListData.slice(0, 3)} renderItem={gridRender} />
+          <CardRender items={agentList.slice(0, 3)} renderItem={GridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
           <CardRender
-            items={agentListData.slice(3)}
-            renderItem={gridRender}
+            items={agentList.slice(3)}
+            renderItem={GridRender}
             spotlight={mobile ? undefined : false}
           />
         </>

package/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -17,7 +17,6 @@ const { Link } = Typography;
 const Header = memo(() => {
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
-
   const createSession = useSessionStore((s) => s.createSession);
   const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);

package/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx

@@ -22,11 +22,10 @@ const AgentModalInner = memo(() => {
     s.useFetchAgent,
     s.currentIdentifier,
   ]);
-  const { styles } = useStyles();
-
-  const { data, isLoading } = useFetchAgent(currentIdentifier);
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
+  const { data, isLoading } = useFetchAgent(currentIdentifier);
+  const { styles } = useStyles();
 
   if (isLoading || !data?.meta) return <Loading />;
 

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

@@ -1,22 +1,27 @@
 import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useMarketStore } from '@/store/market';
 
 const AgentSearchBar = memo(() => {
   const { t } = useTranslation('market');
-  const keywords = useMarketStore((s) => s.searchKeywords);
+  const [keywords, setKeywords] = useMarketStore((s) => [s.searchKeywords, s.setSearchKeywords]);
   const [value, setValue] = useState(keywords);
   const { mobile } = useResponsive();
+
+  const handleSearch = useCallback(() => {
+    setKeywords(value);
+  }, [value, setKeywords]);
+
   return (
     <SearchBar
       allowClear
       enableShortKey={!mobile}
       onChange={(e) => setValue(e.target.value)}
-      onPressEnter={() => useMarketStore.setState({ searchKeywords: value })}
-      onSubmit={() => useMarketStore.setState({ searchKeywords: value })}
+      onPressEnter={handleSearch}
+      onSubmit={handleSearch}
       placeholder={t('search.placeholder')}
       shortKey={'k'}
       spotlight={!mobile}

package/src/app/market/features/TagList/Inner.tsx

@@ -0,0 +1,28 @@
+import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const Inner = memo(() => {
+  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
+  const [keywords, setSearchKeywords] = useMarketStore((s) => [
+    s.searchKeywords,
+    s.setSearchKeywords,
+  ]);
+
+  return agentTagList.map((item) => (
+    <Button
+      key={item}
+      onClick={() => setSearchKeywords(item)}
+      shape={'round'}
+      size={'small'}
+      type={keywords === item ? 'primary' : 'default'}
+    >
+      {startCase(item)}
+    </Button>
+  ));
+});
+
+export default Inner;

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

@@ -1,32 +1,21 @@
-import { Button, Skeleton } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { startCase } from 'lodash-es';
-import { memo } from 'react';
+import { Skeleton } from 'antd';
+import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import Inner from '@/app/market/features/TagList/Inner';
 
 const TagList = memo(() => {
-  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
-  const keywords = useMarketStore((s) => s.searchKeywords);
-
   return (
     <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-      {agentTagList?.length > 0
-        ? agentTagList.map((item) => (
-            <Button
-              key={item}
-              onClick={() => useMarketStore.setState({ searchKeywords: item })}
-              shape={'round'}
-              size={'small'}
-              type={keywords === item ? 'primary' : 'default'}
-            >
-              {startCase(item)}
-            </Button>
-          ))
-        : Array.from({ length: 5 })
-            .fill('')
-            .map((_, index) => <Skeleton.Button key={index} shape={'round'} size={'small'} />)}
+      <Suspense
+        fallback={Array.from({ length: 5 })
+          .fill('')
+          .map((_, index) => (
+            <Skeleton.Button key={index} shape={'round'} size={'small'} />
+          ))}
+      >
+        <Inner />
+      </Suspense>
     </Flexbox>
   );
 });

package/src/store/market/action.ts

@@ -12,6 +12,7 @@ import type { Store } from './store';
 export interface StoreAction {
   activateAgent: (identifier: string) => void;
   deactivateAgent: () => void;
+  setSearchKeywords: (keywords: string) => void;
   updateAgentMap: (key: string, value: AgentsMarketItem) => void;
   useFetchAgent: (identifier: string) => SWRResponse<AgentsMarketItem>;
   useFetchAgentList: () => SWRResponse<LobeChatAgentsMarketIndex>;
@@ -29,6 +30,9 @@ export const createMarketAction: StateCreator<
   deactivateAgent: () => {
     set({ currentIdentifier: undefined }, false, 'deactivateAgent');
   },
+  setSearchKeywords: (keywords) => {
+    set({ searchKeywords: keywords });
+  },
   updateAgentMap: (key, value) => {
     const { agentMap } = get();
 
@@ -56,7 +60,11 @@ export const createMarketAction: StateCreator<
   useFetchAgentList: () =>
     useSWR<LobeChatAgentsMarketIndex>(getCurrentLanguage(), getAgentList, {
       onSuccess: (agentMarketIndex) => {
-        set({ agentList: agentMarketIndex.agents }, false, 'useFetchAgentList');
+        set(
+          { agentList: agentMarketIndex.agents, tagList: agentMarketIndex.tags },
+          false,
+          'useFetchAgentList',
+        );
       },
     }),
 });

package/src/store/market/initialState.ts

@@ -7,6 +7,7 @@ export interface StoreState {
   agentMap: MarketAgentMap;
   currentIdentifier: string;
   searchKeywords: string;
+  tagList: string[];
 }
 
 export const initialState: StoreState = {
@@ -14,4 +15,5 @@ export const initialState: StoreState = {
   agentMap: {},
   currentIdentifier: '',
   searchKeywords: '',
+  tagList: [],
 };

package/src/store/market/selectors.ts

@@ -1,17 +1,19 @@
-import { flatten } from 'lodash-es';
-
 import { DEFAULT_AGENTS_MARKET_ITEM } from '@/const/market';
 import { AgentsMarketItem } from '@/types/market';
-import { findDuplicates } from '@/utils/findDuplicates';
 
 import type { Store } from './store';
 
-const getAgentList = (s: Store) => s.agentList;
-const getAgentTagList = (s: Store) => {
-  const agentList = s.agentList;
-  const rawAgentTagList = flatten(agentList.map((item) => item.meta.tags)) as string[];
-  return findDuplicates(rawAgentTagList);
+const getAgentList = (s: Store) => {
+  const { searchKeywords, agentList } = s;
+  if (!searchKeywords) return agentList;
+  return agentList.filter(({ meta }) => {
+    const checkMeta: string = [meta.tags, meta.title, meta.description, meta.avatar]
+      .filter(Boolean)
+      .join('');
+    return checkMeta.toLowerCase().includes(searchKeywords.toLowerCase());
+  });
 };
+const getAgentTagList = (s: Store) => s.tagList;
 
 const getAgentItemById = (d: string) => (s: Store) => s.agentMap[d];
 

package/src/types/market.ts

@@ -16,4 +16,5 @@ export type AgentsMarketItem = AgentsMarketIndexItem & LobeAgentSettings;
 export interface LobeChatAgentsMarketIndex {
   agents: AgentsMarketIndexItem[];
   schemaVersion: 1;
+  tags: string[];
 }

package/src/utils/findDuplicates.ts

@@ -1,22 +0,0 @@
-export const findDuplicates = (arr: string[]): string[] => {
-  const duplicates: { [key: string]: number } = {};
-
-  // 统计每个项目出现的次数
-  for (const item of arr) {
-    if (duplicates[item]) {
-      duplicates[item]++;
-    } else {
-      duplicates[item] = 1;
-    }
-  }
-
-  // 挑出重复出现 3 次以上的项目
-  const COUNT = 3;
-
-  const result = Object.keys(duplicates).filter((item) => duplicates[item] >= COUNT);
-
-  // 按重复次数从多到少排序
-  result.sort((a, b) => duplicates[b] - duplicates[a]);
-
-  return result;
-};