@lobehub/chat 1.96.20 → 1.97.0

package/src/app/[variants]/(main)/discover/(list)/assistant/features/Category/useCategory.tsx

@@ -0,0 +1,112 @@
+import {
+  BadgeDollarSignIcon,
+  BriefcaseIcon,
+  Coffee,
+  DramaIcon,
+  GamepadIcon,
+  GraduationCapIcon,
+  ImageIcon,
+  LanguagesIcon,
+  LaughIcon,
+  Layers,
+  LayoutPanelTop,
+  MicroscopeIcon,
+  PencilIcon,
+  PrinterIcon,
+  TerminalSquareIcon,
+} from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AssistantCategory } from '@/types/discover';
+
+export const useCategory = () => {
+  const { t } = useTranslation('discover');
+
+  return useMemo(
+    () => [
+      {
+        icon: LayoutPanelTop,
+        key: AssistantCategory.All,
+        label: t('category.assistant.all'),
+      },
+      {
+        icon: MicroscopeIcon,
+        key: AssistantCategory.Academic,
+        label: t('category.assistant.academic'),
+      },
+      {
+        icon: BriefcaseIcon,
+        key: AssistantCategory.Career,
+        label: t('category.assistant.career'),
+      },
+      {
+        icon: PencilIcon,
+        key: AssistantCategory.CopyWriting,
+        label: t('category.assistant.copywriting'),
+      },
+      {
+        icon: ImageIcon,
+        key: AssistantCategory.Design,
+        label: t('category.assistant.design'),
+      },
+      {
+        icon: GraduationCapIcon,
+        key: AssistantCategory.Education,
+        label: t('category.assistant.education'),
+      },
+      {
+        icon: LaughIcon,
+        key: AssistantCategory.Emotions,
+        label: t('category.assistant.emotions'),
+      },
+      {
+        icon: DramaIcon,
+        key: AssistantCategory.Entertainment,
+        label: t('category.assistant.entertainment'),
+      },
+      {
+        icon: GamepadIcon,
+        key: AssistantCategory.Games,
+        label: t('category.assistant.games'),
+      },
+      {
+        icon: Layers,
+        key: AssistantCategory.General,
+        label: t('category.assistant.general'),
+      },
+      {
+        icon: Coffee,
+        key: AssistantCategory.Life,
+        label: t('category.assistant.life'),
+      },
+      {
+        icon: BadgeDollarSignIcon,
+        key: AssistantCategory.Marketing,
+        label: t('category.assistant.marketing'),
+      },
+      {
+        icon: PrinterIcon,
+        key: AssistantCategory.Office,
+        label: t('category.assistant.office'),
+      },
+      {
+        icon: TerminalSquareIcon,
+        key: AssistantCategory.Programming,
+        label: t('category.assistant.programming'),
+      },
+      {
+        icon: LanguagesIcon,
+        key: AssistantCategory.Translation,
+        label: t('category.assistant.translation'),
+      },
+    ],
+    [t],
+  );
+};
+
+export const useCategoryItem = (key?: AssistantCategory) => {
+  const items = useCategory();
+  if (!key) return;
+  return items.find((item) => item.key === key);
+};

package/src/app/[variants]/(main)/discover/(list)/assistant/features/List/Item.tsx

@@ -0,0 +1,189 @@
+import { Github } from '@lobehub/icons';
+import { ActionIcon, Avatar, Block, Icon, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ClockIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import PublishedTime from '@/components/PublishedTime';
+import { DiscoverAssistantItem } from '@/types/discover';
+
+import TokenTag from './TokenTag';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    author: css`
+      color: ${token.colorTextDescription};
+    `,
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      color: ${token.colorTextSecondary};
+    `,
+    footer: css`
+      margin-block-start: 16px;
+      border-block-start: 1px dashed ${token.colorBorder};
+      background: ${token.colorBgContainerSecondary};
+    `,
+    secondaryDesc: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const AssistantItem = memo<DiscoverAssistantItem>(
+  ({
+    createdAt,
+    author,
+    avatar,
+    title,
+    description,
+    category,
+    identifier,
+    tokenUsage,
+    pluginCount,
+    knowledgeCount,
+    backgroundColor,
+  }) => {
+    const { styles, theme } = useStyles();
+    const router = useRouter();
+    const link = urlJoin('/discover/assistant', identifier);
+    const { t } = useTranslation('discover');
+
+    return (
+      <Block
+        clickable
+        height={'100%'}
+        onClick={() => {
+          router.push(link);
+        }}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'flex-start'}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+          width={'100%'}
+        >
+          <Flexbox
+            gap={12}
+            horizontal
+            style={{
+              overflow: 'hidden',
+            }}
+            title={identifier}
+          >
+            <Avatar
+              avatar={avatar}
+              background={backgroundColor || 'transparent'}
+              size={40}
+              style={{ flex: 'none' }}
+            />
+            <Flexbox
+              flex={1}
+              gap={2}
+              style={{
+                overflow: 'hidden',
+              }}
+            >
+              <Flexbox
+                align={'center'}
+                flex={1}
+                gap={8}
+                horizontal
+                style={{
+                  overflow: 'hidden',
+                }}
+              >
+                <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+                  <Text as={'h2'} className={styles.title} ellipsis>
+                    {title}
+                  </Text>
+                </Link>
+              </Flexbox>
+              {author && <div className={styles.author}>{author}</div>}
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            <Link
+              href={urlJoin(
+                'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
+                identifier,
+              )}
+              onClick={(e) => e.stopPropagation()}
+              target={'_blank'}
+            >
+              <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+            </Link>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox flex={1} gap={12} paddingInline={16}>
+          <Text
+            as={'p'}
+            className={styles.desc}
+            ellipsis={{
+              rows: 3,
+            }}
+          >
+            {description}
+          </Text>
+          <TokenTag
+            knowledgeCount={knowledgeCount}
+            pluginCount={pluginCount}
+            tokenUsage={tokenUsage}
+          />
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.footer}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+        >
+          <Flexbox
+            align={'center'}
+            className={styles.secondaryDesc}
+            horizontal
+            justify={'space-between'}
+          >
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Icon icon={ClockIcon} size={14} />
+              <PublishedTime
+                className={styles.secondaryDesc}
+                date={createdAt}
+                template={'MMM DD, YYYY'}
+              />
+            </Flexbox>
+            {t(`category.assistant.${category}` as any)}
+          </Flexbox>
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+export default AssistantItem;

package/src/app/[variants]/(main)/discover/(list)/assistant/features/List/TokenTag.tsx

@@ -0,0 +1,70 @@
+import { MCP } from '@lobehub/icons';
+import { Icon, Tag, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookTextIcon, CoinsIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { formatIntergerNumber } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    token: css`
+      border-radius: 4px;
+
+      font-family: ${token.fontFamilyCode};
+      font-size: 11px;
+      color: ${token.colorTextSecondary};
+
+      background: ${token.colorFillTertiary};
+    `,
+  };
+});
+
+interface TokenTagProps {
+  knowledgeCount?: number;
+  placement?: 'top' | 'right';
+  pluginCount?: number;
+  tokenUsage: number;
+}
+
+const TokenTag = memo<TokenTagProps>(
+  ({ tokenUsage, pluginCount, knowledgeCount, placement = 'right' }) => {
+    const { styles, theme } = useStyles();
+    const { t } = useTranslation('discover');
+    return (
+      <Flexbox align={'center'} gap={4} horizontal>
+        <Tooltip
+          placement={placement}
+          styles={{ root: { pointerEvents: 'none' } }}
+          title={t('assistants.tokenUsage')}
+        >
+          <Tag className={styles.token} icon={<Icon icon={CoinsIcon} />}>
+            {formatIntergerNumber(tokenUsage)}
+          </Tag>
+        </Tooltip>
+        {Boolean(pluginCount && pluginCount > 0) && (
+          <Tooltip
+            placement={placement}
+            styles={{ root: { pointerEvents: 'none' } }}
+            title={t('assistants.withPlugin')}
+          >
+            <Tag icon={<Icon fill={theme.colorTextSecondary} icon={MCP} />}>{pluginCount}</Tag>
+          </Tooltip>
+        )}
+        {Boolean(knowledgeCount && knowledgeCount > 0) && (
+          <Tooltip
+            placement={placement}
+            styles={{ root: { pointerEvents: 'none' } }}
+            title={t('assistants.withKnowledge')}
+          >
+            <Tag icon={<Icon icon={BookTextIcon} />}>{knowledgeCount}</Tag>
+          </Tooltip>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default TokenTag;

package/src/app/[variants]/(main)/discover/(list)/assistant/features/List/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { DiscoverAssistantItem } from '@/types/discover';
+
+import Item from './Item';
+
+export interface AssistantListProps {
+  data?: DiscoverAssistantItem[];
+  rows?: number;
+}
+
+const AssistantList = memo<AssistantListProps>(({ data = [], rows = 3 }) => {
+  if (data.length === 0)
+    return (
+      <Center height={640}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+  return (
+    <Grid rows={rows} width={'100%'}>
+      {data.map((item, index) => (
+        <Item key={index} {...item} />
+      ))}
+    </Grid>
+  );
+});
+
+export default AssistantList;

package/src/app/[variants]/(main)/discover/(list)/assistant/page.tsx

@@ -0,0 +1,46 @@
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageMetaProps } from '@/utils/server/pageProps';
+
+import Client from './Client';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const { locale, t } = await parsePageMetaProps(props);
+
+  return metadataModule.generate({
+    alternate: true,
+    canonical: 'https://lobehub.com/agent',
+    description: t('discover.assistants.description'),
+    locale,
+    title: t('discover.assistants.title'),
+    url: '/discover/assistant',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  const { locale, t, isMobile } = await parsePageMetaProps(props);
+
+  const ld = ldModule.generate({
+    description: t('discover.assistants.description'),
+    locale,
+    title: t('discover.assistants.title'),
+    url: '/discover/assistant',
+    webpage: {
+      enable: true,
+      search: '/discover/assistant',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client mobile={isMobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverAssistants';
+
+export default Page;

package/src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Pagination as Page } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverTab } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => {
+  return {
+    page: css`
+      .${prefixCls}-pagination-item-active {
+        border-color: ${token.colorFillSecondary};
+        background: ${token.colorFillSecondary};
+
+        &:hover {
+          border-color: ${token.colorFill};
+          background: ${token.colorFill};
+        }
+      }
+    `,
+  };
+});
+
+interface PaginationProps {
+  currentPage: number;
+  pageSize: number;
+  tab: DiscoverTab;
+  total: number;
+}
+
+const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize }) => {
+  const { styles } = useStyles();
+  const { page } = useQuery();
+  const router = useQueryRoute();
+
+  const handlePageChange = (newPage: number) => {
+    router.push(urlJoin('/discover', tab), {
+      query: {
+        page: String(newPage),
+      },
+    });
+    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
+  return (
+    <Page
+      className={styles.page}
+      current={page ? Number(page) : currentPage}
+      onChange={handlePageChange}
+      pageSize={pageSize}
+      showSizeChanger={false}
+      style={{
+        alignSelf: 'flex-end',
+      }}
+      total={total}
+    />
+  );
+});
+
+export default Pagination;

package/src/app/[variants]/(main)/discover/(list)/features/SortButton/index.tsx

@@ -0,0 +1,184 @@
+import { Dropdown, DropdownMenuItemType, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { ArrowDownWideNarrow, ChevronDown } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import {
+  AssistantSorts,
+  DiscoverTab,
+  McpSorts,
+  ModelSorts,
+  PluginSorts,
+  ProviderSorts,
+} from '@/types/discover';
+
+const SortButton = memo(() => {
+  const { t } = useTranslation('discover');
+  const pathname = usePathname();
+  const { sort } = useQuery();
+  const router = useQueryRoute();
+  const activeTab = useMemo(() => pathname.split('discover/')[1] as DiscoverTab, [pathname]);
+  const items = useMemo(() => {
+    switch (activeTab) {
+      case DiscoverTab.Assistants: {
+        return [
+          {
+            key: AssistantSorts.CreatedAt,
+            label: t('assistants.sorts.createdAt'),
+          },
+          {
+            key: AssistantSorts.Title,
+            label: t('assistants.sorts.title'),
+          },
+          {
+            key: AssistantSorts.Identifier,
+            label: t('assistants.sorts.identifier'),
+          },
+          {
+            key: AssistantSorts.TokenUsage,
+            label: t('assistants.sorts.tokenUsage'),
+          },
+          {
+            key: AssistantSorts.PluginCount,
+            label: t('assistants.sorts.pluginCount'),
+          },
+          {
+            key: AssistantSorts.KnowledgeCount,
+            label: t('assistants.sorts.knowledgeCount'),
+          },
+        ];
+      }
+      case DiscoverTab.Plugins: {
+        return [
+          {
+            key: PluginSorts.CreatedAt,
+            label: t('plugins.sorts.createdAt'),
+          },
+          {
+            key: PluginSorts.Title,
+            label: t('plugins.sorts.title'),
+          },
+          {
+            key: PluginSorts.Identifier,
+            label: t('plugins.sorts.identifier'),
+          },
+        ];
+      }
+      case DiscoverTab.Models: {
+        return [
+          {
+            key: ModelSorts.ReleasedAt,
+            label: t('models.sorts.releasedAt'),
+          },
+          {
+            key: ModelSorts.Identifier,
+            label: t('models.sorts.identifier'),
+          },
+          {
+            key: ModelSorts.ContextWindowTokens,
+            label: t('models.sorts.contextWindowTokens'),
+          },
+          {
+            key: ModelSorts.InputPrice,
+            label: t('models.sorts.inputPrice'),
+          },
+          {
+            key: ModelSorts.OutputPrice,
+            label: t('models.sorts.outputPrice'),
+          },
+          {
+            key: ModelSorts.ProviderCount,
+            label: t('models.sorts.providerCount'),
+          },
+        ];
+      }
+      case DiscoverTab.Providers: {
+        return [
+          {
+            key: ProviderSorts.Default,
+            label: t('providers.sorts.default'),
+          },
+          {
+            key: ProviderSorts.Identifier,
+            label: t('providers.sorts.identifier'),
+          },
+          {
+            key: ProviderSorts.ModelCount,
+            label: t('providers.sorts.modelCount'),
+          },
+        ];
+      }
+      case DiscoverTab.Mcp: {
+        return [
+          {
+            key: McpSorts.IsFeatured,
+            label: t('mcp.sorts.isFeatured'),
+          },
+          {
+            key: McpSorts.IsValidated,
+            label: t('mcp.sorts.isValidated'),
+          },
+          {
+            key: McpSorts.InstallCount,
+            label: t('mcp.sorts.installCount'),
+          },
+          {
+            key: McpSorts.RatingCount,
+            label: t('mcp.sorts.ratingCount'),
+          },
+          {
+            key: McpSorts.UpdatedAt,
+            label: t('mcp.sorts.updatedAt'),
+          },
+          {
+            label: t('mcp.sorts.createdAt'),
+            value: McpSorts.CreatedAt,
+          },
+        ];
+      }
+      default: {
+        return [];
+      }
+    }
+  }, [t, activeTab]);
+
+  const activeItem: any = useMemo(() => {
+    if (sort) {
+      const findItem = items?.find((item: any) => item.key === sort);
+      if (findItem) return findItem;
+    }
+    return items?.[0];
+  }, [items, sort]);
+
+  const handleSort = (config: string) => {
+    router.push(pathname, {
+      query: {
+        sort: config,
+      },
+    });
+  };
+
+  if (items?.length === 0) return null;
+
+  return (
+    <Dropdown
+      menu={{
+        activeKey: activeItem.key,
+        items: items as DropdownMenuItemType[],
+        onClick: ({ key }) => handleSort(key),
+      }}
+      trigger={['click', 'hover']}
+    >
+      <Button icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
+        {activeItem.label}
+        <Icon icon={ChevronDown} />
+      </Button>
+    </Dropdown>
+  );
+});
+
+export default SortButton;