@lobehub/chat 0.151.11 → 0.152.1

package/src/app/(main)/market/features/AgentCard/AgentCardBanner.tsx

@@ -3,8 +3,6 @@ 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 }) => ({
   banner: css`
     position: relative;
@@ -15,25 +13,22 @@ export const useStyles = createStyles(({ css, token }) => ({
     margin-bottom: -56px;
 
     background: ${token.colorFillSecondary};
-
-    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
     position: absolute;
-    top: -50%;
-    filter: blur(50px) saturate(2);
+    filter: blur(40px) saturate(1.5);
   `,
 }));
 
 interface AgentCardBannerProps extends DivProps {
+  avatar?: string;
   mask?: boolean;
   maskColor?: string;
-  meta: MetaData;
   size?: number;
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, size = 200, children, ...props }) => {
+  ({ avatar, className, size = 600, children, ...props }) => {
     const { styles, cx } = useStyles();
 
     return (
@@ -43,7 +38,13 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Avatar alt={'banner'} avatar={meta.avatar} className={styles.bannerImg} size={size} />
+        <Avatar
+          alt={'banner'}
+          avatar={avatar}
+          className={styles.bannerImg}
+          shape={'square'}
+          size={size}
+        />
         {children}
       </Flexbox>
     );

package/src/app/(main)/market/features/AgentCard/index.tsx

@@ -1,62 +1,137 @@
-import { SpotlightCardProps } from '@lobehub/ui';
-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 Loading from '../../components/Loading';
-import TagList from '../TagList';
-import AgentCardItem from './AgentCardItem';
-import { useStyles } from './style';
-
-export interface AgentCardProps {
-  CardRender: FC<SpotlightCardProps>;
-  mobile?: boolean;
+import { Avatar, Tag } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useMarketStore } from '@/store/market';
+import { AgentsMarketIndexItem } from '@/types/market';
+
+import AgentCardBanner from './AgentCardBanner';
+
+const { Paragraph, Title } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow: 0 0 1px 1px ${token.colorFillQuaternary} inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${token.colorFillSecondary} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-bottom: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  inner: css`
+    padding: 16px;
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-bottom: 0 !important;
+    font-size: 18px !important;
+  `,
+}));
+
+interface AgentCardProps extends AgentsMarketIndexItem {
+  variant?: 'default' | 'compact';
 }
 
-const AgentCard = memo<AgentCardProps>(({ CardRender, mobile }) => {
-  const { t } = useTranslation('market');
-  const [useFetchAgentList, keywords] = useMarketStore((s) => [
-    s.useFetchAgentList,
-    s.searchKeywords,
-  ]);
-  const { isLoading } = useFetchAgentList();
-  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
-  const { styles } = useStyles();
-
-  const GridRender: SpotlightCardProps['renderItem'] = useCallback(
-    (props: any) => (
-      <LazyLoad className={styles.lazy}>
-        <AgentCardItem {...props} />
-      </LazyLoad>
-    ),
-    [styles.lazy],
-  );
-
-  if (isLoading) return <Loading />;
-
-  return (
-    <Flexbox gap={mobile ? 16 : 24}>
-      <TagList />
-      {keywords ? (
-        <CardRender
-          items={agentList}
-          renderItem={GridRender}
-          spotlight={mobile ? undefined : false}
-        />
-      ) : (
-        <>
-          <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} />
-        </>
-      )}
-    </Flexbox>
-  );
-});
+const AgentCard = memo<AgentCardProps>(
+  ({ meta, createAt, author, homepage, identifier, variant }) => {
+    const { avatar, title, description, tags } = meta;
+
+    const onAgentCardClick = useMarketStore((s) => s.activateAgent);
+    const { styles, theme } = useStyles();
+    const isCompact = variant === 'compact';
+
+    return (
+      <Flexbox
+        className={styles.container}
+        gap={24}
+        key={identifier}
+        onClick={() => onAgentCardClick(identifier)}
+      >
+        {!isCompact && <AgentCardBanner avatar={avatar} />}
+        <Flexbox className={styles.inner} gap={12}>
+          <Flexbox align={'flex-end'} gap={16} horizontal justify={'space-between'} width={'100%'}>
+            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+              {title}
+            </Title>
+            {isCompact ? (
+              <Avatar
+                alt={title}
+                avatar={avatar}
+                size={40}
+                style={{ alignSelf: 'flex-end' }}
+                title={title}
+              />
+            ) : (
+              <Center
+                flex={'none'}
+                height={64}
+                style={{
+                  background: theme.colorBgContainer,
+                  borderRadius: '50%',
+                  marginTop: -6,
+                  overflow: 'hidden',
+                  zIndex: 2,
+                }}
+                width={64}
+              >
+                <Avatar alt={title} avatar={avatar} size={56} title={title} />
+              </Center>
+            )}
+          </Flexbox>
+          {!isCompact && (
+            <Flexbox gap={12} horizontal style={{ fontSize: 12 }}>
+              <Link aria-label={author} href={homepage} target={'_blank'}>
+                @{author}
+              </Link>
+              <time className={styles.time} dateTime={new Date(createAt).toISOString()}>
+                {createAt}
+              </time>
+            </Flexbox>
+          )}
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {description}
+          </Paragraph>
+          <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+            {(tags as string[])
+              .slice(0, 4)
+              .filter(Boolean)
+              .map((tag: string, index) => (
+                <Tag key={index} style={{ margin: 0 }}>
+                  {startCase(tag).trim()}
+                </Tag>
+              ))}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+AgentCard.displayName = 'AgentCard';
 
 export default AgentCard;

package/src/app/(main)/market/features/AgentList.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Grid, SpotlightCardProps } from '@lobehub/ui';
+import { Empty, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback, useLayoutEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import LazyLoad from 'react-lazy-load';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+import AgentCard from './AgentCard';
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  compactLazy: css`
+    min-height: 120px;
+  `,
+  lazy: css`
+    min-height: 332px;
+  `,
+  title: css`
+    margin-top: 0.5em;
+    font-size: 24px;
+    font-weight: 600;
+    ${responsive.mobile} {
+      font-size: 20px;
+    }
+  `,
+}));
+
+export interface AgentListProps {
+  mobile?: boolean;
+}
+
+const AgentList = memo<AgentListProps>(({ mobile }) => {
+  const { t } = useTranslation('market');
+  const [searchKeywords, useFetchAgentList] = useMarketStore((s) => [
+    s.searchKeywords,
+    s.useFetchAgentList,
+  ]);
+  const { isLoading } = useFetchAgentList();
+  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
+  const { styles } = useStyles();
+  const recentLength = mobile ? 3 : 6;
+
+  useLayoutEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useMarketStore.persist.rehydrate();
+  }, []);
+
+  const GridCompactRender: SpotlightCardProps['renderItem'] = useCallback(
+    (props: any) => (
+      <LazyLoad className={styles.compactLazy} offset={332}>
+        <AgentCard variant={'compact'} {...props} />
+      </LazyLoad>
+    ),
+    [],
+  );
+
+  if (isLoading) return <Skeleton paragraph={{ rows: 8 }} title={false} />;
+
+  if (searchKeywords) {
+    if (agentList.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    return (
+      <Grid rows={3}>
+        {agentList.map((item) => (
+          <GridCompactRender key={item.identifier} {...item} />
+        ))}
+      </Grid>
+    );
+  }
+
+  return (
+    <>
+      <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
+      <Grid rows={3}>
+        {agentList.slice(0, recentLength).map((item) => (
+          <AgentCard key={item.identifier} {...item} />
+        ))}
+      </Grid>
+      <h2 className={styles.title}>{t('title.allAgents')}</h2>
+      <Grid rows={3}>
+        {agentList.slice(recentLength).map((item) => (
+          <GridCompactRender key={item.identifier} {...item} />
+        ))}
+      </Grid>
+    </>
+  );
+});
+
+AgentList.displayName = 'AgentList';
+
+export default AgentList;

package/src/app/(main)/market/features/AgentSearchBar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import useControlledState from 'use-merge-value';
+
+import { useMarketStore } from '@/store/market';
+
+interface AgentSearchBarProps {
+  mobile?: boolean;
+}
+
+const AgentSearchBar = memo<AgentSearchBarProps>(({ mobile }) => {
+  const { t } = useTranslation('market');
+  const [searchKeywords, setSearchKeywords] = useMarketStore((s) => [
+    s.searchKeywords,
+    s.setSearchKeywords,
+  ]);
+
+  const [keyword, setKeyword] = useControlledState(searchKeywords, {
+    onChange: setSearchKeywords,
+    value: searchKeywords,
+  });
+
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => {
+        setKeyword(e.target.value);
+      }}
+      placeholder={t('search.placeholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keyword}
+    />
+  );
+});
+
+export default AgentSearchBar;

package/src/app/(main)/market/features/ShareAgentButton/Inner.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@lobehub/ui';
+import { Icon, Typography } from '@lobehub/ui';
 import { Button, Divider, Tag } from 'antd';
 import { Github, Settings, Share2 } from 'lucide-react';
 import Image from 'next/image';
@@ -10,7 +10,7 @@ import { AGENTS_INDEX_GITHUB, imageUrl } from '@/const/url';
 const Inner = memo(() => {
   const { t } = useTranslation('market');
   return (
-    <>
+    <Typography fontSize={14} headerMultiple={0.5} marginMultiple={0.4}>
       <Image
         alt={'banner'}
         height={602}
@@ -23,12 +23,14 @@ const Inner = memo(() => {
         <span>{t('guide.func1.title')}</span>
       </h3>
       <p>
-        <Icon icon={Settings} />
-        {' - '}
+        <kbd>
+          <Icon icon={Settings} />
+        </kbd>
         {t('guide.func1.desc1')}
         <br />
-        <Icon icon={Share2} />
-        {' - '}
+        <kbd>
+          <Icon icon={Share2} />
+        </kbd>
         {t('guide.func1.desc2')}
       </p>
       <Divider />
@@ -45,7 +47,7 @@ const Inner = memo(() => {
       >
         {t('guide.func2.button')}
       </Button>
-    </>
+    </Typography>
   );
 });
 

package/src/app/(main)/market/features/ShareAgentButton/index.tsx

@@ -1,34 +1,41 @@
 import { ActionIcon, Icon, Modal } from '@lobehub/ui';
-import { Button } from 'antd';
-import { Rss } from 'lucide-react';
+import { Button, Skeleton } from 'antd';
+import { useResponsive } from 'antd-style';
+import { Upload } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
-import Inner from './Inner';
+const Inner = dynamic(() => import('./Inner'), {
+  loading: () => <Skeleton paragraph={{ rows: 8 }} title={false} />,
+});
 
 const ShareAgentButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { mobile: resMobile } = useResponsive();
   const { t } = useTranslation('market');
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const buttonContent = mobile ? (
-    <ActionIcon
-      icon={Rss}
-      onClick={() => setIsModalOpen(true)}
-      size={MOBILE_HEADER_ICON_SIZE}
-      title={t('submitAgent')}
-    />
-  ) : (
-    <Button icon={<Icon icon={Rss} />} onClick={() => setIsModalOpen(true)}>
-      {t('submitAgent')}
-    </Button>
-  );
+  const buttonContent =
+    mobile || resMobile ? (
+      <ActionIcon
+        icon={Upload}
+        onClick={() => setIsModalOpen(true)}
+        size={MOBILE_HEADER_ICON_SIZE}
+        title={t('submitAgent')}
+      />
+    ) : (
+      <Button icon={<Icon icon={Upload} />} onClick={() => setIsModalOpen(true)}>
+        {t('submitAgent')}
+      </Button>
+    );
 
   return (
     <>
       {buttonContent}
       <Modal
+        allowFullscreen
         footer={null}
         onCancel={() => setIsModalOpen(false)}
         open={isModalOpen}

package/src/app/(main)/market/features/TagList.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Button } from 'antd';
+import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    color: ${token.colorBgLayout};
+    background: ${token.colorPrimary};
+
+    &:hover {
+      color: ${token.colorBgLayout} !important;
+      background: ${token.colorPrimary} !important;
+    }
+  `,
+  tag: css`
+    background: ${token.colorBgContainer};
+    border: none;
+
+    &:hover {
+      background: ${token.colorBgElevated} !important;
+    }
+  `,
+}));
+
+const TagList = memo(() => {
+  const { cx, styles } = useStyles();
+  const { md = true } = useResponsive();
+  const [searchKeywords, setSearchKeywords] = useMarketStore((s) => [
+    s.searchKeywords,
+    s.setSearchKeywords,
+  ]);
+  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
+
+  const list = md ? agentTagList : agentTagList.slice(0, 20);
+
+  return (
+    <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+      {list.map((item) => {
+        const isActive = searchKeywords === item;
+        return (
+          <Button
+            className={cx(styles.tag, isActive && styles.active)}
+            key={item}
+            onClick={() => {
+              setSearchKeywords(isActive ? '' : item);
+            }}
+            shape={'round'}
+            size={'small'}
+          >
+            {startCase(item)}
+          </Button>
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default TagList;

package/src/app/(main)/market/layout.tsx

@@ -0,0 +1,11 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const MainLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+MainLayout.displayName = 'MarketLayout';
+
+export default MainLayout;

package/src/app/(main)/market/loading.tsx

@@ -1,3 +1,3 @@
-import Load from './components/Loading';
+import { Skeleton } from 'antd';
 
-export default () => <Load />;
+export default () => <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />;

package/src/app/(main)/market/page.tsx

@@ -1,25 +1,35 @@
-import { Metadata } from 'next';
+import { Flexbox } from 'react-layout-kit';
 
 import { getCanonicalUrl } from '@/const/url';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
-import DesktopPage from './(desktop)';
-import MobilePage from './(mobile)';
-import PageTitle from './features/PageTitle';
+import AgentList from './features/AgentList';
+import AgentSearchBar from './features/AgentSearchBar';
+import TagList from './features/TagList';
 
-export default () => {
-  const mobile = isMobileDevice();
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return {
+    alternates: { canonical: getCanonicalUrl('/market') },
+    title: t('tab.market'),
+  };
+};
 
-  const Page = mobile ? MobilePage : DesktopPage;
+const Page = () => {
+  const mobile = isMobileDevice();
 
   return (
     <>
-      <PageTitle />
-      <Page />
+      <AgentSearchBar mobile={mobile} />
+      <Flexbox gap={mobile ? 16 : 24}>
+        <TagList />
+        <AgentList mobile={mobile} />
+      </Flexbox>
     </>
   );
 };
 
-export const metadata: Metadata = {
-  alternates: { canonical: getCanonicalUrl('/market') },
-};
+Page.DisplayName = 'Market';
+
+export default Page;

package/src/const/url.ts

@@ -43,6 +43,7 @@ export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean
 
 export const imageUrl = (filename: string) => withBasePath(`/images/${filename}`);
 
+export const LOBE_URL_IMPORT_NAME = 'settings';
 export const EMAIL_SUPPORT = 'support@lobehub.com';
 export const EMAIL_BUSINESS = 'hello@lobehub.com';
 

package/src/features/ChatInput/STT/browser.tsx

@@ -1,5 +1,5 @@
 import { SpeechRecognitionOptions, useSpeechRecognition } from '@lobehub/tts/react';
-import { isEqual } from 'lodash';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SWRConfiguration } from 'swr';

package/src/features/ChatInput/STT/openai.tsx

@@ -1,6 +1,6 @@
 import { getRecordMineType } from '@lobehub/tts';
 import { OpenAISTTOptions, useOpenAISTT } from '@lobehub/tts/react';
-import { isEqual } from 'lodash';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SWRConfiguration } from 'swr';

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -10,7 +10,7 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { useMarketStore } from '@/store/market';
 
 const { Paragraph } = Typography;
 
@@ -53,7 +53,7 @@ const AgentsSuggest = memo(() => {
   const [sliceStart, setSliceStart] = useState(0);
   const useFetchAgentList = useMarketStore((s) => s.useFetchAgentList);
   const { isLoading } = useFetchAgentList();
-  const agentList = useMarketStore((s) => agentMarketSelectors.getAgentList(s), isEqual);
+  const agentList = useMarketStore((s) => s.agentList, isEqual);
   const { styles } = useStyles();
 
   const loadingCards = Array.from({ length: 4 }).map((_, index) => (