@lobehub/chat 1.17.6 → 1.18.0

package/src/app/(main)/discover/components/Statistic.tsx

@@ -0,0 +1,92 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { HelpCircleIcon } from 'lucide-react';
+import { CSSProperties, ReactNode, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow: hidden;
+    min-width: 64px;
+  `,
+  number: css`
+    margin: 0 !important;
+
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: center;
+  `,
+  title: css`
+    margin: 0 !important;
+
+    font-size: 12px;
+    line-height: 1.2;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+}));
+
+export interface StatisticProps extends Omit<FlexboxProps, 'children' | 'title'> {
+  title: ReactNode;
+  titleStyle?: CSSProperties;
+  tooltip?: string;
+  value: ReactNode;
+  valuePlacement?: 'top' | 'bottom';
+  valueStyle?: CSSProperties;
+}
+
+const Statistic = memo<StatisticProps>(
+  ({
+    className,
+    valueStyle,
+    titleStyle,
+    valuePlacement = 'top',
+    tooltip,
+    title,
+    value,
+    ...rest
+  }) => {
+    const { cx, styles } = useStyles();
+    const isTop = valuePlacement === 'top';
+    const valueContent = (
+      <Typography.Paragraph className={styles.number} ellipsis={{ rows: 1 }} style={valueStyle}>
+        {value}
+      </Typography.Paragraph>
+    );
+    const titleContent = (
+      <Typography.Paragraph className={styles.title} ellipsis={{ rows: 1 }} style={titleStyle}>
+        {title}
+        {tooltip && <Icon icon={HelpCircleIcon} style={{ marginLeft: '0.4em' }} />}
+      </Typography.Paragraph>
+    );
+    const content = (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.container, className)}
+        flex={1}
+        justify={'center'}
+        {...rest}
+      >
+        {isTop ? (
+          <>
+            {valueContent}
+            {titleContent}
+          </>
+        ) : (
+          <>
+            {titleContent}
+            {valueContent}
+          </>
+        )}
+      </Flexbox>
+    );
+
+    if (!tooltip) return content;
+
+    return <Tooltip title={tooltip}>{content}</Tooltip>;
+  },
+);
+
+export default Statistic;

package/src/app/(main)/discover/components/Title.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Button, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import { ReactNode, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, responsive, token }) => ({
+  more: css`
+    display: flex;
+    align-items: center;
+    color: ${token.colorTextSecondary};
+  `,
+  tag: css`
+    flex: none;
+
+    padding-block: 0.1em;
+    padding-inline: 0.3em;
+
+    font-size: 18px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+
+    background: ${token.colorFillSecondary};
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      font-size: 14px;
+    }
+  `,
+  title: css`
+    margin-block-start: 0.5em;
+    font-size: 24px;
+    font-weight: 600;
+    ${responsive.mobile} {
+      font-size: 18px;
+    }
+  `,
+}));
+
+interface TitleProps extends FlexboxProps {
+  more?: ReactNode;
+  moreLink?: string;
+  tag?: ReactNode;
+}
+
+const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
+  const { styles } = useStyles();
+  const title = <h2 className={styles.title}>{children}</h2>;
+  return (
+    <Flexbox align={'center'} gap={16} horizontal justify={'space-between'} width={'100%'}>
+      {tag ? (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {title}
+          <Tag bordered={false} className={styles.tag}>
+            {tag}
+          </Tag>
+        </Flexbox>
+      ) : (
+        title
+      )}
+      {moreLink && (
+        <Link href={moreLink} target={moreLink.startsWith('http') ? '_blank' : undefined}>
+          <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
+            <span>{more}</span>
+            <Icon icon={ChevronRight} />
+          </Button>
+        </Link>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Title;

package/src/app/(main)/discover/components/VirtuosoGridList/index.tsx

@@ -0,0 +1,52 @@
+import { Grid, GridProps } from '@lobehub/ui';
+import { forwardRef, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import { VirtuosoGrid, VirtuosoGridProps } from 'react-virtuoso';
+
+import { useScrollParent } from './useScrollParent';
+
+const GridList = forwardRef<HTMLDivElement, GridProps>((props, ref) => (
+  <Grid gap={16} maxItemWidth={280} ref={ref} rows={4} {...props} />
+));
+
+const List = forwardRef<HTMLDivElement, FlexboxProps>((props, ref) => (
+  <Flexbox gap={16} ref={ref} {...props} />
+));
+
+export const VirtuosoList = memo<VirtuosoGridProps<any, any>>(({ data, ...rest }) => {
+  const scrollParent = useScrollParent();
+  const initialItemCount = data && data?.length >= 8 ? 8 : data?.length;
+  return (
+    <VirtuosoGrid
+      components={{ List: List }}
+      customScrollParent={scrollParent}
+      data={data}
+      initialItemCount={initialItemCount}
+      overscan={400}
+      {...rest}
+    />
+  );
+});
+
+const VirtuosoGridList = memo<VirtuosoGridProps<any, any>>(
+  ({ data, initialItemCount, ...rest }) => {
+    const scrollParent = useScrollParent();
+    const count = data && data?.length >= 8 ? 8 : data?.length;
+    const maxInitialItemCount =
+      data && data?.length && initialItemCount && initialItemCount > data?.length
+        ? data?.length
+        : initialItemCount;
+    return (
+      <VirtuosoGrid
+        components={{ List: GridList }}
+        customScrollParent={scrollParent}
+        data={data}
+        initialItemCount={maxInitialItemCount || count}
+        overscan={400}
+        {...rest}
+      />
+    );
+  },
+);
+
+export default VirtuosoGridList;

package/src/app/(main)/discover/components/VirtuosoGridList/useScrollParent.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+import { isOnServerSide } from '@/utils/env';
+
+import { SCROLL_PARENT_ID } from '../../features/const';
+
+export const useScrollParent = () => {
+  const [parent, setParent] = useState<HTMLDivElement>();
+
+  useEffect(() => {
+    if (isOnServerSide) return;
+    const scrollParent = document.querySelector(`#${SCROLL_PARENT_ID}`);
+    if (scrollParent) {
+      setParent(scrollParent as HTMLDivElement);
+    }
+  }, []);
+
+  return parent;
+};

package/src/app/(main)/discover/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/{market/features/ShareAgentButton → discover/features/CreateButton}/Inner.tsx

@@ -5,11 +5,10 @@ import Image from 'next/image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { BRANDING_NAME } from '@/const/branding';
 import { AGENTS_INDEX_GITHUB, imageUrl } from '@/const/url';
 
 const Inner = memo(() => {
-  const { t } = useTranslation('market');
+  const { t } = useTranslation('discover');
   return (
     <Typography fontSize={14} headerMultiple={0.5} marginMultiple={0.4}>
       <Image
@@ -20,33 +19,33 @@ const Inner = memo(() => {
         width={1602}
       />
       <h3>
-        <Tag color={'cyan'}>{t('guide.func1.tag')}</Tag>
-        <span>{t('guide.func1.title', { appName: BRANDING_NAME })}</span>
+        <Tag color={'cyan'}>{t('createGuide.func1.tag')}</Tag>
+        <span>{t('createGuide.func1.title')}</span>
       </h3>
       <p>
         <kbd>
           <Icon icon={Settings} />
         </kbd>
-        {t('guide.func1.desc1')}
+        {t('createGuide.func1.desc1')}
         <br />
         <kbd>
           <Icon icon={Share2} />
         </kbd>
-        {t('guide.func1.desc2')}
+        {t('createGuide.func1.desc2')}
       </p>
       <Divider />
       <h3>
-        <Tag color={'cyan'}>{t('guide.func2.tag')}</Tag>
-        <span>{t('guide.func2.title')}</span>
+        <Tag color={'cyan'}>{t('createGuide.func2.tag')}</Tag>
+        <span>{t('createGuide.func2.title')}</span>
       </h3>
-      <p>{t('guide.func2.desc')}</p>
+      <p>{t('createGuide.func2.desc')}</p>
       <br />
       <Button
         icon={<Icon icon={Github} />}
         onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
         type={'primary'}
       >
-        {t('guide.func2.button')}
+        {t('createGuide.func2.button')}
       </Button>
     </Typography>
   );

package/src/app/(main)/{market/features/ShareAgentButton → discover/features/CreateButton}/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Icon, Modal } from '@lobehub/ui';
 import { Button, Skeleton } from 'antd';
 import { useResponsive } from 'antd-style';
-import { Upload } from 'lucide-react';
+import { Brush } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,22 +12,22 @@ const Inner = dynamic(() => import('./Inner'), {
   loading: () => <Skeleton paragraph={{ rows: 8 }} title={false} />,
 });
 
-const ShareAgentButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+const CreateButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { mobile: resMobile } = useResponsive();
-  const { t } = useTranslation('market');
+  const { t } = useTranslation('discover');
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const buttonContent =
     mobile || resMobile ? (
       <ActionIcon
-        icon={Upload}
+        icon={Brush}
         onClick={() => setIsModalOpen(true)}
         size={MOBILE_HEADER_ICON_SIZE}
-        title={t('submitAgent')}
+        title={t('create')}
       />
     ) : (
-      <Button icon={<Icon icon={Upload} />} onClick={() => setIsModalOpen(true)}>
-        {t('submitAgent')}
+      <Button icon={<Icon icon={Brush} />} onClick={() => setIsModalOpen(true)}>
+        {t('create')}
       </Button>
     );
 
@@ -39,7 +39,7 @@ const ShareAgentButton = memo<{ mobile?: boolean }>(({ mobile }) => {
         footer={null}
         onCancel={() => setIsModalOpen(false)}
         open={isModalOpen}
-        title={t('submitAgent')}
+        title={t('create')}
       >
         <Inner />
       </Modal>
@@ -47,4 +47,4 @@ const ShareAgentButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   );
 });
 
-export default ShareAgentButton;
+export default CreateButton;

package/src/app/(main)/discover/features/LikeButton.tsx

@@ -0,0 +1,73 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button, Space } from 'antd';
+import { ThumbsDownIcon, ThumbsUpIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { formatShortenNumber } from '@/utils/format';
+
+import { useStyles } from '../components/Statistic';
+
+interface LikeButtonProps {
+  count: number;
+  isDisliked?: boolean;
+  isLiked?: boolean;
+  onDislikeClick?: (active: boolean) => void;
+  onLikeClick?: (active: boolean) => void;
+  showDislike?: boolean;
+}
+
+const LikeButton = memo<LikeButtonProps>(
+  ({ count, onLikeClick, onDislikeClick, isLiked, showDislike, isDisliked }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation('discover');
+
+    if (showDislike)
+      return (
+        <Space.Compact style={{ flex: 1.75 }}>
+          <Tooltip title={t('like')}>
+            <Button
+              className={styles.number}
+              icon={<Icon icon={ThumbsUpIcon} />}
+              onClick={() => onLikeClick?.(!isLiked)}
+              size={'large'}
+              style={{ flex: 1 }}
+              type={isLiked ? 'primary' : 'default'}
+            >
+              {formatShortenNumber(count)}
+            </Button>
+          </Tooltip>
+          <Tooltip title={t('dislike')}>
+            <Button
+              className={styles.number}
+              icon={<Icon icon={ThumbsDownIcon} />}
+              onClick={() => onDislikeClick?.(!isDisliked)}
+              size={'large'}
+              style={{ flex: 'none' }}
+              type={isDisliked ? 'primary' : 'default'}
+            />
+          </Tooltip>
+        </Space.Compact>
+      );
+
+    return (
+      <Flexbox align={'center'} flex={1} justify={'center'} style={{ position: 'relative' }}>
+        <Tooltip title={t('like')}>
+          <Button
+            className={styles.number}
+            icon={<Icon icon={ThumbsUpIcon} />}
+            onClick={() => onLikeClick?.(!isLiked)}
+            size={'large'}
+            style={{ width: '100%' }}
+            type={isLiked ? 'primary' : 'default'}
+          >
+            {formatShortenNumber(count)}
+          </Button>
+        </Tooltip>
+      </Flexbox>
+    );
+  },
+);
+
+export default LikeButton;

package/src/app/(main)/discover/features/ModelFeatureTags.tsx

@@ -0,0 +1,77 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { LucideEye, ToyBrick } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { formatTokenNumber } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token }) => ({
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillSecondary};
+  `,
+}));
+
+interface TagsProps extends FlexboxProps {
+  functionCall?: boolean;
+  tokens?: number;
+  vision?: boolean;
+}
+
+const ModelFeatureTags = memo<TagsProps>(({ children, tokens, vision, functionCall, ...rest }) => {
+  const { t } = useTranslation(['discover', 'components']);
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} gap={4} horizontal wrap={'wrap'} {...rest}>
+      {tokens && (
+        <Tooltip overlayStyle={{ pointerEvents: 'none' }} title={t('models.contentLength')}>
+          <Tag bordered={false} className={styles.token} style={{ flex: 'none', margin: 0 }}>
+            {formatTokenNumber(tokens)}
+          </Tag>
+        </Tooltip>
+      )}
+      {vision && (
+        <Tooltip
+          overlayStyle={{ pointerEvents: 'none' }}
+          title={t('ModelSelect.featureTag.vision', { ns: 'components' })}
+        >
+          <Tag
+            bordered={false}
+            className={styles.tagGreen}
+            icon={<Icon icon={LucideEye} />}
+            style={{ flex: 'none', margin: 0 }}
+          />
+        </Tooltip>
+      )}
+      {functionCall && (
+        <Tooltip
+          overlayStyle={{ maxWidth: 'unset', pointerEvents: 'none' }}
+          title={t('ModelSelect.featureTag.functionCall', { ns: 'components' })}
+        >
+          <Tag
+            bordered={false}
+            className={styles.tagBlue}
+            icon={<Icon icon={ToyBrick} />}
+            style={{ flex: 'none', margin: 0 }}
+          />
+        </Tooltip>
+      )}
+      {children}
+    </Flexbox>
+  );
+});
+
+export default ModelFeatureTags;

package/src/app/(main)/discover/features/StoreSearchBar.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { SearchBar, SearchBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { usePathname } from 'next/navigation';
+import { useQueryState } from 'nuqs';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverTab } from '@/types/discover';
+
+import { useNav } from './useNav';
+
+export const useStyles = createStyles(({ css, prefixCls, token }) => ({
+  active: css`
+    box-shadow: ${token.boxShadow};
+  `,
+  bar: css`
+    .${prefixCls}-input-group-wrapper {
+      padding: 0;
+    }
+  `,
+}));
+
+interface StoreSearchBarProps extends SearchBarProps {
+  mobile?: boolean;
+}
+
+const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...rest }) => {
+  const [active, setActive] = useState(false);
+  const pathname = usePathname();
+  const { q } = useQuery();
+  const { activeKey } = useNav();
+  const [searchKey, setSearchKey] = useQueryState('q');
+
+  const { t } = useTranslation('discover');
+  const { cx, styles } = useStyles();
+  const router = useQueryRoute();
+
+  const activeType = activeKey === DiscoverTab.Home ? DiscoverTab.Assistants : activeKey;
+
+  useEffect(() => {
+    if (!pathname.includes('/discover/search')) return;
+    // 使用 useQueryState 时，当 handleSearch 为空时无法回跳
+    if (!q) router.push(urlJoin('/discover', activeType), { query: {}, replace: true });
+  }, [q, pathname, activeType]);
+
+  const handleSearch = (value: string) => {
+    router.push('/discover/search', { query: { q: value, type: activeType } });
+  };
+
+  return (
+    <SearchBar
+      allowClear
+      autoFocus={mobile || active}
+      className={cx(styles.bar, active && styles.active)}
+      defaultValue={searchKey ? String(searchKey) : ''}
+      enableShortKey={!mobile}
+      onBlur={(e) => {
+        setActive(false);
+        onBlur?.(e);
+      }}
+      onChange={(e) => setSearchKey(e.target.value)}
+      onFocus={(e) => {
+        setActive(true);
+        onFocus?.(e);
+      }}
+      onSearch={handleSearch}
+      placeholder={t('search.placeholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      style={{ width: mobile || active ? '100%' : 'min(480px,100%)' }}
+      styles={{ input: { width: '100%' } }}
+      type={'block'}
+      value={searchKey ? String(searchKey) : ''}
+      {...rest}
+    />
+  );
+});
+
+export default StoreSearchBar;

package/src/app/(main)/discover/features/const.ts

@@ -0,0 +1,2 @@
+export const MAX_WIDTH = 1440;
+export const SCROLL_PARENT_ID = 'discover-scroll';

package/src/app/(main)/discover/features/useNav.tsx

@@ -0,0 +1,71 @@
+import { Icon } from '@lobehub/ui';
+import { Bot, Brain, BrainCircuit, House, Puzzle } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+import { ReactNode, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import type { MenuProps } from '@/components/Menu';
+import { useQuery } from '@/hooks/useQuery';
+import { DiscoverTab } from '@/types/discover';
+
+export const useNav = () => {
+  const pathname = usePathname();
+  const { type } = useQuery();
+  const { t } = useTranslation('discover');
+  const iconSize = { fontSize: 16 };
+
+  const activeKey = useMemo(() => {
+    for (const value of Object.values(DiscoverTab)) {
+      if (pathname === '/discover/search') {
+        return (type as DiscoverTab) || DiscoverTab.Assistants;
+      } else if (pathname.includes(urlJoin('/discover', value))) {
+        return value;
+      }
+    }
+    return DiscoverTab.Home;
+  }, [pathname]);
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={House} size={iconSize} />,
+        key: DiscoverTab.Home,
+        label: t('tab.home'),
+      },
+      {
+        icon: <Icon icon={Bot} size={iconSize} />,
+        key: DiscoverTab.Assistants,
+        label: t('tab.assistants'),
+      },
+      {
+        icon: <Icon icon={Puzzle} size={iconSize} />,
+        key: DiscoverTab.Plugins,
+        label: t('tab.plugins'),
+      },
+      {
+        icon: <Icon icon={Brain} size={iconSize} />,
+        key: DiscoverTab.Models,
+        label: t('tab.models'),
+      },
+      {
+        icon: <Icon icon={BrainCircuit} size={iconSize} />,
+        key: DiscoverTab.Providers,
+        label: t('tab.providers'),
+      },
+    ],
+    [t],
+  );
+
+  const activeItem = items.find((item: any) => item.key === activeKey) as {
+    icon: ReactNode;
+    key: string;
+    label: string;
+  };
+
+  return {
+    activeItem,
+    activeKey,
+    items,
+  };
+};

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
+
+MainLayout.displayName = 'DiscoverStoreLayout';
+
+export default MainLayout;

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

@@ -0,0 +1,9 @@
+import { Center } from 'react-layout-kit';
+
+import CircleLoading from '@/components/CircleLoading';
+
+export default () => (
+  <Center height={'90vh'} width={'100%'}>
+    <CircleLoading />
+  </Center>
+);