@lobehub/chat 0.73.0 → 0.75.0

package/src/pages/chat/features/SessionList/List/index.tsx

@@ -26,10 +26,8 @@ const SessionList = memo(() => {
       <Link
         href={SESSION_CHAT_URL(id, mobile)}
         key={id}
-        // replace onClick with onPointerDown to prevent double click on mobile
-        onPointerDown={(e) => {
+        onClick={(e) => {
           e.preventDefault();
-
           if (mobile) switchSession(id);
           else activeSession(id);
         }}

package/src/pages/chat/features/SessionList/Mobile.tsx

@@ -1,22 +1,12 @@
-import { SearchBar } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
+import SessionSearchBar from '../SessionSearchBar';
 
 const Sessions = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('common');
-  const [keywords] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
   return (
     <>
       <div style={{ padding: '8px 16px' }}>
-        <SearchBar
-          allowClear
-          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-          placeholder={t('searchAgentPlaceholder')}
-          type={'block'}
-          value={keywords}
-        />
+        <SessionSearchBar />
       </div>
       {children}
     </>

package/src/pages/chat/features/SessionSearchBar/index.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SessionSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.searchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+      placeholder={t('searchAgentPlaceholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default SessionSearchBar;

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -1,9 +1,10 @@
+import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { topicSelectors } from '@/store/session/selectors';
@@ -15,20 +16,27 @@ export const Topic = () => {
   const init = useSessionChatInit();
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
+  const [activeTopicId, keywords] = useSessionStore((s) => [
+    s.activeTopicId,
+    s.topicSearchKeywords,
+  ]);
   const { t } = useTranslation('empty');
-
   const [visible, updateGuideState] = useGlobalStore((s) => [
     s.preference.guide?.topic,
     s.updateGuideState,
   ]);
 
+  const topicsData = useMemo(() => {
+    if (!keywords) return topics;
+    return topics.filter(({ title }) => title.toLowerCase().includes(keywords.toLowerCase()));
+  }, [topics, keywords]);
+
   return !init ? (
     <SkeletonList />
   ) : (
     <Flexbox gap={2} style={{ marginBottom: 12 }}>
       {topics?.length === 0 && (
-        <Empty
+        <EmptyCard
           alt={t('topic.desc')}
           cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
           desc={t('topic.desc')}
@@ -43,9 +51,13 @@ export const Topic = () => {
         />
       )}
 
-      <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
+      <TopicItem
+        active={!activeTopicId}
+        fav={false}
+        title={t('topic.defaultTitle', { ns: 'common' })}
+      />
 
-      {topics.map(({ id, favorite, title }) => (
+      {topicsData.map(({ id, favorite, title }) => (
         <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>

package/src/pages/chat/features/Sidebar/TopicSearchBar/index.tsx

@@ -0,0 +1,24 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const TopicSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      onChange={(e) => useSessionStore.setState({ topicSearchKeywords: e.target.value })}
+      placeholder={t('topic.searchPlaceholder')}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default TopicSearchBar;

package/src/pages/chat/features/Sidebar/index.tsx

@@ -1,29 +1,22 @@
-import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Desktop from './Desktop';
 import Mobile from './Mobile';
 import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
 
 const SideBar = memo(() => {
   const { mobile } = useResponsive();
 
   const Render = mobile ? Mobile : Desktop;
 
-  const { t } = useTranslation('common');
-
   return (
     <Render>
       <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
         <Flexbox padding={16}>
-          <SearchBar
-            placeholder={t('topic.searchPlaceholder')}
-            spotlight={!mobile}
-            type={mobile ? 'block' : 'ghost'}
-          />
+          <TopicSearchBar />
         </Flexbox>
         <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
           <Topic />

package/src/pages/market/features/AgentCard/AgentCardBanner.tsx

@@ -0,0 +1,64 @@
+import { Avatar, DivProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MetaData } from '@/types/meta';
+
+export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+  banner: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 64px;
+    margin-bottom: -56px;
+
+    background: ${token.colorFill};
+  `,
+  bannerImg: css`
+    filter: blur(6px) saturate(1.6);
+  `,
+  bannerMask: css`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
+  `,
+}));
+
+interface AgentCardBannerProps extends DivProps {
+  mask?: boolean;
+  maskColor?: string;
+  meta: MetaData;
+  size?: number;
+}
+
+const AgentCardBanner = memo<AgentCardBannerProps>(
+  ({ meta, className, mask, size = 8, maskColor, ...props }) => {
+    const { styles, theme, cx } = useStyles(maskColor);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.banner, className)}
+        justify={'center'}
+        {...props}
+      >
+        <Avatar
+          avatar={meta.avatar}
+          background={meta.backgroundColor || theme.colorBgContainer}
+          className={styles.bannerImg}
+          style={{ transform: `scale(${size})` }}
+        />
+        {mask && <div className={styles.bannerMask} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default AgentCardBanner;

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

@@ -0,0 +1,57 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { Typography } from 'antd';
+import { useThemeMode } from 'antd-style';
+import { startCase } from 'lodash-es';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useMarketStore } from '@/store/market';
+import { AgentsMarketIndexItem } from '@/types/market';
+
+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();
+  return (
+    <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
+      <AgentCardBanner
+        mask
+        maskColor={theme.colorBgContainer}
+        meta={meta}
+        style={{ opacity: isDarkMode ? 0.9 : 0.4 }}
+      />
+      <Flexbox className={styles.inner} gap={8} ref={ref}>
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={backgroundColor || theme.colorFillTertiary}
+          className={styles.avatar}
+          size={56}
+        />
+        <Paragraph className={styles.title} ellipsis={{ rows: 1, tooltip: title }}>
+          {title}
+        </Paragraph>
+        <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: description }}>
+          {description}
+        </Paragraph>
+        <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+          {(tags as string[]).map((tag: string, index) => (
+            <Tag key={index} style={{ margin: 0 }}>
+              {startCase(tag).trim()}
+            </Tag>
+          ))}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default AgentCardItem;

package/src/pages/market/features/AgentCard/Loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+  return (
+    <Flexbox>
+      <Skeleton paragraph={{ rows: 8 }} />
+    </Flexbox>
+  );
+});
+
+export default Loading;

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

@@ -0,0 +1,37 @@
+import { SpotlightCard } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+import TagList from '../TagList';
+import AgentCardItem from './AgentCardItem';
+import Loading from './Loading';
+
+const gridRender = (item: any) => <AgentCardItem {...item} />;
+
+const AgentCard = memo(() => {
+  const agentList = useMarketStore(agentMarketSelectors.getAgentList);
+
+  const [useFetchAgentList, keywords] = useMarketStore((s) => [
+    s.useFetchAgentList,
+    s.searchKeywords,
+  ]);
+
+  const { isLoading } = useFetchAgentList();
+
+  const agentListData = useMemo(() => {
+    if (!keywords) return agentList;
+    return agentList.filter(({ meta }) => JSON.stringify(meta).toLowerCase().includes(keywords));
+  }, [agentList, keywords]);
+
+  if (isLoading || !agentList) return <Loading />;
+
+  return (
+    <>
+      <TagList />
+      <SpotlightCard items={agentListData} renderItem={gridRender} />
+    </>
+  );
+});
+
+export default AgentCard;

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

@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  avatar: css``,
+
+  container: css`
+    position: relative;
+    overflow: hidden;
+    border-radius: 11px;
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+  `,
+  inner: css`
+    padding: 16px;
+  `,
+  title: css`
+    margin-bottom: 0 !important;
+    font-size: 16px;
+    font-weight: 600;
+  `,
+}));

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

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } 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 { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => useMarketStore.setState({ searchKeywords: e.target.value })}
+      placeholder={t('search.placeholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default AgentSearchBar;

package/src/pages/market/features/Header/Desktop.tsx

@@ -1,9 +1,13 @@
-import { ChatHeader, Logo, SearchBar } from '@lobehub/ui';
+import { ChatHeader, Icon, Logo } from '@lobehub/ui';
+import { Button } from 'antd';
 import { createStyles } from 'antd-style';
+import { Bot } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { AGENTS_INDEX_GITHUB } from '@/const/url';
+
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
     color: ${token.colorText};
@@ -13,16 +17,23 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const Header = memo(() => {
   const { styles } = useStyles();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('market');
 
   return (
     <ChatHeader
       left={
         <Link href={'/'}>
-          <Logo className={styles.logo} extra={t('tab.market')} size={36} type={'text'} />
+          <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
         </Link>
       }
-      right={<SearchBar allowClear spotlight type={'ghost'} />}
+      right={
+        <Button
+          icon={<Icon icon={Bot} />}
+          onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
+        >
+          {t('submitAgent')}
+        </Button>
+      }
     />
   );
 });

package/src/pages/market/features/Header/Mobile.tsx

@@ -1,39 +1,22 @@
 import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useSessionStore } from '@/store/session';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  logo: css`
-    fill: ${token.colorText};
-  `,
-  top: css`
-    position: sticky;
-    top: 0;
-  `,
-}));
 
 const Header = memo(() => {
-  const [createSession] = useSessionStore((s) => [s.createSession]);
-
   return (
     <MobileNavBar
       center={<Logo type={'text'} />}
       left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
       right={
-        <>
-          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
-          <ActionIcon
-            icon={Settings2}
-            onClick={() => {
-              Router.push({ pathname: `/settings` });
-            }}
-          />
-        </>
+        <ActionIcon
+          icon={Settings2}
+          onClick={() => {
+            Router.push({ pathname: `/settings` });
+          }}
+        />
       }
     />
   );

package/src/pages/market/features/SideBar/AgentInfo/Comment.tsx

@@ -0,0 +1,16 @@
+import { Giscus } from '@lobehub/ui';
+import { memo } from 'react';
+
+const Comment = memo<{ identifier: string }>(({ identifier }) => (
+  <Giscus
+    category="General"
+    categoryId="DIC_kwDOKON5YM4CZNRJ"
+    id="lobehub"
+    mapping="specific"
+    repo="lobehub/lobe-chat-agents"
+    repoId="R_kgDOKON5YA"
+    term={identifier}
+  />
+));
+
+export default Comment;

package/src/pages/market/features/SideBar/AgentInfo/Header.tsx

@@ -0,0 +1,68 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { Button, Typography } from 'antd';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { useSessionStore } from '@/store/session';
+
+import { useStyles } from './style';
+
+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);
+
+  const { meta, createAt, author, homepage, config } = agentItem;
+  const { avatar, title, description, tags, backgroundColor } = meta;
+
+  return (
+    <Center className={styles.container} gap={16}>
+      <Avatar
+        avatar={avatar}
+        background={backgroundColor || theme.colorFillTertiary}
+        className={styles.avatar}
+        size={100}
+      />
+      <div className={styles.title}>{title}</div>
+      <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+        {(tags as string[]).map((tag: string, index) => (
+          <Tag
+            key={index}
+            onClick={() => useMarketStore.setState({ searchKeywords: tag })}
+            style={{ margin: 0 }}
+          >
+            {startCase(tag).trim()}
+          </Tag>
+        ))}
+      </Center>
+      <div className={styles.desc}>{description}</div>
+      <Link className={styles.author} href={homepage} target={'_blank'}>
+        @{author}
+      </Link>
+      <Button
+        block
+        onClick={() => {
+          if (!agentItem) return;
+
+          createSession({ config, meta });
+          switchSideBar('chat');
+        }}
+        type={'primary'}
+      >
+        {t('addAgent')}
+      </Button>
+      <div className={styles.date}>{createAt}</div>
+    </Center>
+  );
+});
+
+export default Header;

package/src/pages/market/features/SideBar/AgentInfo/Loading.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+const Loading = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <>
+      <Center className={styles.container} gap={16} style={{ paddingTop: 80 }}>
+        <Skeleton.Avatar active shape={'circle'} size={100} />
+        <Skeleton
+          active
+          className={styles.loading}
+          paragraph={{
+            rows: 3,
+            style: {
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+            },
+            width: ['60%', '80%', '20%'],
+          }}
+          title={{
+            style: {
+              alignSelf: 'center',
+              marginBottom: 0,
+            },
+            width: '50%',
+          }}
+        />
+        <Skeleton.Button active block />
+        <Skeleton
+          active
+          className={styles.loading}
+          paragraph={{
+            rows: 1,
+            style: {
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              marginBottom: 0,
+            },
+            width: ['20%'],
+          }}
+          title={false}
+        />
+      </Center>
+      <Center gap={16} style={{ padding: 16 }}>
+        <Flexbox gap={16} horizontal>
+          <Skeleton.Button active size={'small'} />
+          <Skeleton.Button active size={'small'} />
+        </Flexbox>
+        <Skeleton active paragraph={{ rows: 6 }} title={false} />
+      </Center>
+    </>
+  );
+});
+
+export default Loading;

package/src/pages/market/features/SideBar/AgentInfo/TokenTag.tsx

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+import { encode } from 'gpt-tokenizer';
+import { memo, useMemo } from 'react';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    padding: 2px 5px;
+
+    font-size: 12px;
+    line-height: 1;
+    color: ${token.colorBgLayout};
+
+    background: ${token.colorText};
+    border-radius: 12px;
+  `,
+);
+
+const TokenTag = memo<{ systemRole: string }>(({ systemRole }) => {
+  const { styles } = useStyles();
+  const value = useMemo(() => encode(systemRole).length, [systemRole]);
+
+  return <div className={styles}>{value}</div>;
+});
+
+export default TokenTag;