@lobehub/chat 1.96.20 → 1.97.0

package/src/app/[variants]/(main)/discover/(list)/mcp/Client.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { DiscoverTab, McpQueryParams } from '@/types/discover';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const Client = memo<{ mobile?: boolean }>(() => {
+  const { q, page, category, sort, order } = useQuery() as McpQueryParams;
+  const useMcpList = useDiscoverStore((s) => s.useFetchMcpList);
+  const { data, isLoading } = useMcpList({
+    category,
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Mcp}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(Client);

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { Icon, Tag } from '@lobehub/ui';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import qs from 'query-string';
+import { memo, useMemo } from 'react';
+
+import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { withSuspense } from '@/components/withSuspense';
+import { useCategory } from '@/hooks/useMCPCategory';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { McpCategory } from '@/types/discover';
+
+import CategoryMenu from '../../../../components/CategoryMenu';
+
+const Category = memo(() => {
+  const useMcpCategories = useDiscoverStore((s) => s.useMcpCategories);
+  const { category = 'all', q } = useQuery() as { category?: McpCategory; q?: string };
+  const { data: items = [] } = useMcpCategories({ q });
+  const route = useRouter();
+  const cates = useCategory();
+
+  const genUrl = (key: McpCategory) =>
+    qs.stringifyUrl(
+      {
+        query: { category: key === McpCategory.All ? null : key, q },
+        url: '/discover/mcp',
+      },
+      { skipNull: true },
+    );
+
+  const handleClick = (key: McpCategory) => {
+    route.push(genUrl(key));
+    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+  const total = useMemo(() => items.reduce((acc, item) => acc + item.count, 0), [items]);
+
+  return (
+    <CategoryMenu
+      items={cates.map((item) => {
+        const itemData = items.find((i) => i.category === item.key);
+        return {
+          extra:
+            item.key === 'all'
+              ? total > 0 && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {total}
+                  </Tag>
+                )
+              : itemData && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {itemData.count}
+                  </Tag>
+                ),
+          ...item,
+          icon: <Icon icon={item.icon} size={18} />,
+          label: <Link href={genUrl(item.key)}>{item.label}</Link>,
+        };
+      })}
+      mode={'inline'}
+      onClick={(v) => handleClick(v.key as McpCategory)}
+      selectedKeys={[category]}
+    />
+  );
+});
+
+export default withSuspense(Category);

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

@@ -0,0 +1,51 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Blend, Cloud, LaptopMinimalIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+interface ConnectionTypeTagProps {
+  type?: 'hybrid' | 'local' | 'remote';
+}
+
+const ConnectionTypeTag = memo<ConnectionTypeTagProps>(({ type }) => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  const icons = {
+    hybrid: {
+      color: theme.purple,
+      icon: Blend,
+    },
+    local: {
+      color: theme.colorWarning,
+      icon: LaptopMinimalIcon,
+    },
+    remote: {
+      color: theme.colorInfo,
+      icon: Cloud,
+    },
+  };
+
+  if (!type || !icons[type]) return null;
+
+  return (
+    <Tooltip title={t(`mcp.details.connectionType.${type}.desc`)}>
+      <Flexbox
+        align={'center'}
+        gap={6}
+        horizontal
+        style={{
+          color: theme.colorTextSecondary,
+          fontSize: 12,
+        }}
+      >
+        <Icon color={icons[type].color} icon={icons[type].icon} size={14} />
+        {t(`mcp.details.connectionType.${type}.title`)}
+      </Flexbox>
+    </Tooltip>
+  );
+});
+
+export default ConnectionTypeTag;

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

@@ -0,0 +1,225 @@
+'use client';
+
+import { Github } from '@lobehub/icons';
+import { ActionIcon, Avatar, Block, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
+import { Spotlight } from '@lobehub/ui/awesome';
+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 InstallationIcon from '@/components/MCPDepsIcon';
+import OfficialIcon from '@/components/OfficialIcon';
+import PublishedTime from '@/components/PublishedTime';
+import Scores from '@/features/MCP/Scores';
+import { DiscoverMcpItem } from '@/types/discover';
+
+import ConnectionTypeTag from './ConnectionTypeTag';
+import MetaInfo from './MetaInfo';
+
+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 McpItem = memo<DiscoverMcpItem>(
+  ({
+    name,
+    icon,
+    author,
+    description,
+    identifier,
+    category,
+    isValidated,
+    isFeatured,
+    isClaimed,
+    isOfficial,
+    toolsCount,
+    updatedAt,
+    installationMethods,
+    promptsCount,
+    resourcesCount,
+    connectionType,
+    installCount,
+    github,
+  }) => {
+    const { t } = useTranslation('discover');
+    const { styles, theme } = useStyles();
+    const router = useRouter();
+    const link = urlJoin('/discover/mcp', identifier);
+    return (
+      <Block
+        clickable
+        height={'100%'}
+        onClick={() => {
+          router.push(link);
+        }}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        {isFeatured && <Spotlight size={400} />}
+        <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={icon} 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>
+                    {name}
+                  </Text>
+                </Link>
+                {isOfficial && (
+                  <Tooltip title={t('isOfficial')}>
+                    <OfficialIcon />
+                  </Tooltip>
+                )}
+              </Flexbox>
+              {author && <div className={styles.author}>{author}</div>}
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            {installationMethods && <InstallationIcon type={installationMethods} />}
+            {github && (
+              <Link href={github.url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+                <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+              </Link>
+            )}
+          </Flexbox>
+        </Flexbox>
+        <Flexbox flex={1} gap={12} paddingInline={16}>
+          <Scores
+            github={github}
+            identifier={identifier}
+            installationMethods={installationMethods}
+            isClaimed={isClaimed}
+            isValidated={isValidated}
+            overview={{ readme: github?.url }}
+            promptsCount={promptsCount}
+            resourcesCount={resourcesCount}
+            toolsCount={toolsCount}
+          />
+          <Text
+            as={'p'}
+            className={styles.desc}
+            ellipsis={{
+              rows: 3,
+            }}
+          >
+            {description}
+          </Text>
+          <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={updatedAt}
+                template={'MMM DD, YYYY'}
+              />
+            </Flexbox>
+            <Flexbox align={'center'} gap={8} horizontal>
+              {t(`mcp.categories.${category}.name` as any)}
+              {isFeatured && (
+                <Tag
+                  size={'small'}
+                  style={{
+                    color: 'inherit',
+                    fontSize: 'inherit',
+                  }}
+                  variant={'outlined'}
+                >
+                  {t('isFeatured')}
+                </Tag>
+              )}
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.footer}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+        >
+          <ConnectionTypeTag type={connectionType} />
+          <MetaInfo
+            className={styles.secondaryDesc}
+            installCount={installCount}
+            stars={github?.stars}
+          />
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+export default McpItem;

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

@@ -0,0 +1,33 @@
+import { Icon } from '@lobehub/ui';
+import { DownloadIcon, StarIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverMcpItem } from '@/types/discover';
+
+interface MetaInfoProps {
+  className?: string;
+  installCount: DiscoverMcpItem['installCount'];
+  stars?: number;
+}
+
+const MetaInfo = memo<MetaInfoProps>(({ stars, installCount, className }) => {
+  return (
+    <Flexbox align={'center'} className={className} gap={8} horizontal>
+      {Boolean(installCount) && (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Icon icon={DownloadIcon} size={14} />
+          {installCount}
+        </Flexbox>
+      )}
+      {Boolean(stars) && (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Icon icon={StarIcon} size={14} />
+          {stars}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default MetaInfo;

package/src/app/[variants]/(main)/discover/(list)/mcp/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 { DiscoverMcpItem } from '@/types/discover';
+
+import Item from './Item';
+
+interface McpListProps {
+  data?: DiscoverMcpItem[];
+  rows?: number;
+}
+
+const McpList = memo<McpListProps>(({ 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 McpList;

package/src/app/[variants]/(main)/discover/(list)/mcp/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/mcp',
+    description: t('discover.plugins.description'),
+    locale,
+    title: t('discover.plugins.title'),
+    url: '/discover/mcp',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  const { locale, t, isMobile } = await parsePageMetaProps(props);
+
+  const ld = ldModule.generate({
+    description: t('discover.plugins.description'),
+    locale,
+    title: t('discover.plugins.title'),
+    url: '/discover/mcp',
+    webpage: {
+      enable: true,
+      search: '/discover/mcp',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client mobile={isMobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverMCP';
+
+export default Page;

package/src/app/[variants]/(main)/discover/(list)/model/Client.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { DiscoverTab, ModelQueryParams } from '@/types/discover';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const Client = memo<{ mobile?: boolean }>(() => {
+  const { q, page, category, sort, order } = useQuery() as ModelQueryParams;
+  const useModelList = useDiscoverStore((s) => s.useModelList);
+  const { data, isLoading } = useModelList({
+    category,
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Models}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(Client);

package/src/app/[variants]/(main)/discover/(list)/{models → model}/_layout/Desktop.tsx

@@ -1,20 +1,14 @@
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { DEFAULT_LANG } from '@/const/locale';
-import { DiscoverService } from '@/server/services/discover';
-
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
 const Layout = async ({ children }: PropsWithChildren) => {
-  const discoverService = new DiscoverService();
-  const categoryList = await discoverService.getProviderList(DEFAULT_LANG);
-
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
-        <Category data={categoryList} />
+        <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
         {children}

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { Icon, Tag } from '@lobehub/ui';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import qs from 'query-string';
+import { memo, useMemo } from 'react';
+
+import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+
+import CategoryMenu from '../../../../components/CategoryMenu';
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const useModelCategories = useDiscoverStore((s) => s.useModelCategories);
+  const { category = 'all', q } = useQuery() as { category?: string; q?: string };
+  const { data: items = [] } = useModelCategories({ q });
+  const route = useRouter();
+  const cates = useCategory();
+
+  const genUrl = (key: string) =>
+    qs.stringifyUrl(
+      {
+        query: { category: key === 'all' ? null : key, q },
+        url: '/discover/model',
+      },
+      { skipNull: true },
+    );
+
+  const handleClick = (key: string) => {
+    route.push(genUrl(key));
+    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+  const total = useMemo(() => items.reduce((acc, item) => acc + item.count, 0), [items]);
+
+  return (
+    <CategoryMenu
+      items={cates.map((item) => {
+        const itemData = items.find((i) => i.category === item.key);
+        return {
+          extra:
+            item.key === 'all'
+              ? total > 0 && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {total}
+                  </Tag>
+                )
+              : itemData && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {itemData.count}
+                  </Tag>
+                ),
+          ...item,
+          icon: <Icon icon={item.icon} size={18} />,
+          label: <Link href={genUrl(item.key)}>{item.label}</Link>,
+        };
+      })}
+      mode={'inline'}
+      onClick={(v) => handleClick(v.key as string)}
+      selectedKeys={[category]}
+    />
+  );
+});
+
+export default withSuspense(Category);