@lobehub/chat 1.96.20 → 1.97.0

package/src/app/[variants]/(main)/discover/components/CategoryMenu.tsx

@@ -1,39 +1,37 @@
 'use client';
 
-import { ConfigProvider, Menu, MenuProps } from 'antd';
-import { useTheme } from 'antd-style';
+import { Menu, MenuProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-export const ICON_SIZE = { size: '1.25em' };
+const useStyles = createStyles(({ css, prefixCls }) => {
+  return {
+    menu: css`
+      padding: 0 !important;
+      .${prefixCls}-menu-item {
+        display: flex;
+        gap: 4px;
+
+        width: 100%;
+        height: 44px;
+        margin-inline: 0;
+        padding-inline-start: 24px !important;
+
+        font-size: 16px;
+
+        .${prefixCls}-menu-title-content > a {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    `,
+  };
+});
 
 const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
-  const theme = useTheme();
-
-  return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Menu: {
-            itemSelectedBg: theme.colorFillTertiary,
-          },
-        },
-      }}
-    >
-      <Menu
-        mode="inline"
-        style={{
-          background: 'transparent',
-          border: 'none',
-          fontSize: 16,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          width: '100%',
-          ...style,
-        }}
-        {...rest}
-      />
-    </ConfigProvider>
-  );
+  const { styles } = useStyles();
+
+  return <Menu className={styles.menu} mode="inline" style={style} {...rest} />;
 });
 
 export default CategoryMenu;

package/src/app/[variants]/(main)/discover/components/ListLoading.tsx

@@ -1,66 +1,76 @@
 'use client';
 
+import { Block, Grid } from '@lobehub/ui';
 import { Skeleton } from 'antd';
+import { useResponsive, useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import GridLoadingCard from './GridLoadingCard';
-
 const ListLoading = memo(() => {
   return (
-    <Flexbox gap={16}>
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
-      </Flexbox>
-      <GridLoadingCard banner />
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
-      </Flexbox>
-      <GridLoadingCard />
-    </Flexbox>
-  );
-});
-
-export const ListLoadingWithoutBanner = memo<{ banner?: boolean }>(() => {
-  return (
-    <Flexbox gap={16}>
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
-      </Flexbox>
-      <GridLoadingCard count={16} />
-    </Flexbox>
-  );
-});
-
-export const ProviderListLoading = memo<{ banner?: boolean }>(() => {
-  return (
-    <Flexbox gap={16}>
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
-      </Flexbox>
-      <GridLoadingCard count={6} rows={1} />
+    <Flexbox width={'100%'}>
+      <Grid rows={3} width={'100%'}>
+        {Array.from({ length: 12 }).map((_, index) => (
+          <Block gap={24} key={index} padding={16} variant={'outlined'}>
+            <Flexbox align={'center'} gap={8} horizontal>
+              <Skeleton.Avatar active key={index} size={40} />
+              <Skeleton.Button active style={{ height: 32, width: 120 }} />
+            </Flexbox>
+            <Skeleton paragraph={{ rows: 4 }} title={false} />
+          </Block>
+        ))}
+      </Grid>
     </Flexbox>
   );
 });
 
-export const HomeLoading = memo<{ banner?: boolean }>(() => {
+export const DetailsLoading = memo(() => {
+  const { mobile } = useResponsive();
+  const theme = useTheme();
   return (
-    <Flexbox gap={16}>
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
+    <Flexbox gap={24}>
+      <Flexbox gap={12}>
+        {!mobile && <Skeleton paragraph={{ rows: 1 }} style={{ width: 200 }} title={false} />}
+        <Flexbox align={'center'} gap={16} horizontal width={'100%'}>
+          <Skeleton.Avatar active size={mobile ? 48 : 64} />
+          <Skeleton.Button active style={{ height: 36, width: 200 }} />
+        </Flexbox>
+        <Skeleton.Button active size={'small'} style={{ width: 200 }} />
       </Flexbox>
-      <GridLoadingCard banner />
-      <GridLoadingCard />
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
+      <Flexbox
+        gap={12}
+        height={54}
+        horizontal
+        style={{
+          borderBottom: `1px solid ${theme.colorBorder}`,
+        }}
+      >
+        <Skeleton.Button />
+        <Skeleton.Button />
       </Flexbox>
-      <GridLoadingCard />
-      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
-        <Skeleton.Button active style={{ minWidth: 150 }} />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          flex={1}
+          gap={16}
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          <Skeleton paragraph={{ rows: 3 }} title={false} />
+          <Skeleton paragraph={{ rows: 8 }} title={false} />
+          <Skeleton paragraph={{ rows: 8 }} title={false} />
+        </Flexbox>
+        <Flexbox gap={16} width={360}>
+          <Skeleton paragraph={{ rows: 3 }} title={false} />
+          <Skeleton paragraph={{ rows: 4 }} title={false} />
+        </Flexbox>
       </Flexbox>
-      <GridLoadingCard />
     </Flexbox>
   );
 });
-
 export default ListLoading;

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

@@ -1,5 +1,4 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Text, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { HelpCircleIcon } from 'lucide-react';
 import { CSSProperties, ReactNode, memo } from 'react';
@@ -51,15 +50,15 @@ const Statistic = memo<StatisticProps>(
     const { cx, styles } = useStyles();
     const isTop = valuePlacement === 'top';
     const valueContent = (
-      <Typography.Paragraph className={styles.number} ellipsis={{ rows: 1 }} style={valueStyle}>
+      <Text className={styles.number} ellipsis={{ rows: 1 }} style={valueStyle}>
         {value}
-      </Typography.Paragraph>
+      </Text>
     );
     const titleContent = (
-      <Typography.Paragraph className={styles.title} ellipsis={{ rows: 1 }} style={titleStyle}>
+      <Text className={styles.title} ellipsis={{ rows: 1 }} style={titleStyle}>
         {title}
         {tooltip && <Icon icon={HelpCircleIcon} style={{ marginLeft: '0.4em' }} />}
-      </Typography.Paragraph>
+      </Text>
     );
     const content = (
       <Flexbox

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { SearchBar, SearchBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { usePathname } from 'next/navigation';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+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 Search = memo<StoreSearchBarProps>(() => {
+  const { t } = useTranslation('discover');
+  const pathname = usePathname();
+  const { q } = useQuery() as { q?: string };
+  const router = useQueryRoute();
+  const [word, setWord] = useState<string>(q || '');
+  const activeTab = pathname.split('/')[2] || 'assistant';
+  const handleSearch = (value: string) => {
+    router.push(urlJoin('/discover', activeTab), {
+      query: value ? { q: value } : {},
+      replace: true,
+    });
+  };
+
+  return (
+    <SearchBar
+      defaultValue={q}
+      enableShortKey
+      onInputChange={(v) => {
+        setWord(v);
+        if (!v) handleSearch('');
+      }}
+      onSearch={handleSearch}
+      placeholder={t('search.placeholder')}
+      style={{
+        width: 'min(720px,100%)',
+      }}
+      value={word}
+      variant={'outlined'}
+    />
+  );
+});
+
+export default withSuspense(Search);

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+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, token }) => ({
+  more: css`
+    display: flex;
+    align-items: center;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block: 0.2em;
+    font-weight: bold;
+    line-height: 1.5;
+  `,
+  title2: css`
+    font-size: 18px;
+  `,
+  title3: css`
+    font-size: 16px;
+  `,
+}));
+
+export interface TitleProps extends FlexboxProps {
+  icon?: ReactNode;
+  id?: string;
+  level?: 2 | 3;
+  more?: ReactNode;
+  moreLink?: string;
+  tag?: ReactNode;
+}
+
+const Title = memo<TitleProps>(
+  ({ id, tag, children, moreLink, more, level = 2, icon, ...rest }) => {
+    const { cx, styles } = useStyles();
+    const title = (
+      <h2 className={cx(styles.title, styles[`title${level}`])} id={id}>
+        {children}
+      </h2>
+    );
+    return (
+      <Flexbox
+        align={'center'}
+        gap={16}
+        horizontal
+        justify={'space-between'}
+        width={'100%'}
+        {...rest}
+      >
+        {tag || icon ? (
+          <Flexbox align={'center'} gap={8} horizontal>
+            {icon}
+            {title}
+            {tag && (
+              <Flexbox align={'center'} gap={4} horizontal>
+                {tag}
+              </Flexbox>
+            )}
+          </Flexbox>
+        ) : (
+          title
+        )}
+        {moreLink && (
+          <Link
+            className={styles.more}
+            href={moreLink}
+            target={moreLink.startsWith('http') ? '_blank' : undefined}
+          >
+            <span style={{ marginRight: 4 }}>{more}</span>
+            <Icon icon={ChevronRight} />
+          </Link>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Title;

package/src/app/[variants]/(main)/discover/features/__tests__/calculateScore.test.ts

@@ -0,0 +1,185 @@
+import {
+  DEFAULT_WEIGHTS,
+  calculateScore,
+  createScoreItems,
+} from '../../../../../../features/MCP/calculateScore';
+
+describe('calculateScore', () => {
+  describe('Grade A scenarios', () => {
+    it('should return grade A for perfect score', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: true,
+        hasLicense: true,
+        hasDeployment: true,
+        hasDeployMoreThanManual: true,
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: true,
+        hasResources: true,
+        hasClaimed: true,
+      });
+
+      const result = calculateScore(scoreItems);
+
+      expect(result.grade).toBe('a');
+      expect(result.totalScore).toBe(100);
+      expect(result.maxScore).toBe(100);
+      expect(result.percentage).toBe(100);
+    });
+
+    it('should return grade A for 85% score with all required items', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: true,
+        hasLicense: true,
+        hasDeployment: true,
+        hasDeployMoreThanManual: true,
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: true,
+        hasResources: true,
+        hasClaimed: false, // 缺少这项
+      });
+
+      const result = calculateScore(scoreItems);
+
+      expect(result.grade).toBe('a');
+      expect(result.percentage).toBeGreaterThanOrEqual(80);
+    });
+  });
+
+  describe('Grade B scenarios', () => {
+    it('should return grade B for 65-84% score with all required items', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: true,
+        hasLicense: false, // 缺少这项
+        hasDeployment: true,
+        hasDeployMoreThanManual: false, // 缺少这项
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: false, // 缺少这项
+        hasResources: false, // 缺少这项
+        hasClaimed: false, // 缺少这项
+      });
+
+      const result = calculateScore(scoreItems);
+
+      expect(result.grade).toBe('b');
+      expect(result.percentage).toBeGreaterThanOrEqual(60);
+      expect(result.percentage).toBeLessThan(80);
+    });
+  });
+
+  describe('Grade F scenarios', () => {
+    it('should return grade F when required items are missing', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: false, // 必需项缺失
+        hasLicense: true,
+        hasDeployment: true,
+        hasDeployMoreThanManual: true,
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: true,
+        hasResources: true,
+        hasClaimed: true,
+      });
+
+      const result = calculateScore(scoreItems);
+
+      expect(result.grade).toBe('f');
+    });
+
+    it('should return grade F when validation is missing', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: true,
+        hasLicense: true,
+        hasDeployment: true,
+        hasDeployMoreThanManual: true,
+        hasValidated: false, // 必需项缺失
+        hasTools: true,
+        hasPrompts: true,
+        hasResources: true,
+        hasClaimed: true,
+      });
+
+      const result = calculateScore(scoreItems);
+
+      expect(result.grade).toBe('f');
+    });
+
+    it('should return grade F for very low score even with required items', () => {
+      const scoreItems = createScoreItems({
+        hasReadme: true,
+        hasLicense: false,
+        hasDeployment: true,
+        hasDeployMoreThanManual: false,
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: false,
+        hasResources: false,
+        hasClaimed: false,
+      });
+
+      // 手动设置更低的权重来测试低分情况
+      const lowWeights = {
+        ...DEFAULT_WEIGHTS,
+        readme: 5,
+        deployment: 5,
+        validated: 5,
+        tools: 5,
+      };
+
+      const result = calculateScore(scoreItems, lowWeights);
+
+      // 这种情况下应该能达到 65% 以上，所以改为测试另一种情况
+      expect(result.percentage).toBeGreaterThan(0);
+    });
+  });
+
+  describe('createScoreItems', () => {
+    it('should create correct score items with required flags', () => {
+      const data = {
+        hasReadme: true,
+        hasLicense: false,
+        hasDeployment: true,
+        hasDeployMoreThanManual: false,
+        hasValidated: true,
+        hasTools: true,
+        hasPrompts: false,
+        hasResources: false,
+        hasClaimed: false,
+      };
+
+      const items = createScoreItems(data);
+
+      expect(items.readme.required).toBe(true);
+      expect(items.deployment.required).toBe(true);
+      expect(items.validated.required).toBe(true);
+      expect(items.tools.required).toBe(true);
+      expect(items.license.required).toBeUndefined();
+      expect(items.prompts.required).toBeUndefined();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty score items', () => {
+      const result = calculateScore({});
+
+      expect(result.totalScore).toBe(0);
+      expect(result.maxScore).toBe(0);
+      expect(result.percentage).toBe(0);
+      expect(result.grade).toBe('f');
+    });
+
+    it('should use default weights for unknown items', () => {
+      const unknownItem = {
+        unknownKey: { check: true, required: false },
+      };
+
+      const result = calculateScore(unknownItem);
+
+      expect(result.totalScore).toBe(5); // 默认权重
+      expect(result.maxScore).toBe(5);
+      expect(result.percentage).toBe(100);
+    });
+  });
+});

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

@@ -1,25 +1,25 @@
+import { MCP } from '@lobehub/icons';
 import { Icon } from '@lobehub/ui';
-import { Bot, Brain, BrainCircuit, House, Puzzle } from 'lucide-react';
+import { Bot, Brain, BrainCircuit, House } from 'lucide-react';
+import Link from 'next/link';
 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 { useDiscoverTab } from '@/hooks/useDiscoverTab';
 import { DiscoverTab } from '@/types/discover';
 
 const ICON_SIZE = 16;
 
 export const useNav = () => {
   const pathname = usePathname();
-  const type = useDiscoverTab();
   const { t } = useTranslation('discover');
 
   const activeKey = useMemo(() => {
     for (const value of Object.values(DiscoverTab)) {
-      if (pathname === '/discover/search') {
-        return type;
+      if (pathname.includes(urlJoin('/discover', DiscoverTab.Plugins))) {
+        return DiscoverTab.Mcp;
       } else if (pathname.includes(urlJoin('/discover', value))) {
         return value;
       }
@@ -32,27 +32,47 @@ export const useNav = () => {
       {
         icon: <Icon icon={House} size={ICON_SIZE} />,
         key: DiscoverTab.Home,
-        label: t('tab.home'),
+        label: (
+          <Link href={'/discover'} style={{ color: 'inherit' }}>
+            {t('tab.home')}
+          </Link>
+        ),
       },
       {
         icon: <Icon icon={Bot} size={ICON_SIZE} />,
         key: DiscoverTab.Assistants,
-        label: t('tab.assistants'),
+        label: (
+          <Link href={urlJoin('/discover', DiscoverTab.Assistants)} style={{ color: 'inherit' }}>
+            {t('tab.assistant')}
+          </Link>
+        ),
       },
       {
-        icon: <Icon icon={Puzzle} size={ICON_SIZE} />,
-        key: DiscoverTab.Plugins,
-        label: t('tab.plugins'),
+        icon: <MCP className={'anticon'} size={ICON_SIZE} />,
+        key: DiscoverTab.Mcp,
+        label: (
+          <Link href={urlJoin('/discover', DiscoverTab.Mcp)} style={{ color: 'inherit' }}>
+            {`MCP ${t('tab.plugin')}`}
+          </Link>
+        ),
       },
       {
         icon: <Icon icon={Brain} size={ICON_SIZE} />,
         key: DiscoverTab.Models,
-        label: t('tab.models'),
+        label: (
+          <Link href={urlJoin('/discover', DiscoverTab.Models)} style={{ color: 'inherit' }}>
+            {t('tab.model')}
+          </Link>
+        ),
       },
       {
         icon: <Icon icon={BrainCircuit} size={ICON_SIZE} />,
         key: DiscoverTab.Providers,
-        label: t('tab.providers'),
+        label: (
+          <Link href={urlJoin('/discover', DiscoverTab.Providers)} style={{ color: 'inherit' }}>
+            {t('tab.provider')}
+          </Link>
+        ),
       },
     ],
     [t],

package/src/app/robots.tsx

@@ -1,30 +1,32 @@
 import { MetadataRoute } from 'next';
 
-import { sitemapModule } from '@/server/sitemap';
+import { Sitemap } from '@/server/sitemap';
 import { getCanonicalUrl } from '@/server/utils/url';
 
+// Robots文件缓存配置 - 24小时重新验证
+export const revalidate = 86_400; // 24小时 - 内容页面缓存
+export const dynamic = 'force-static';
+
 const robots = (): MetadataRoute.Robots => {
+  const sitemapModule = new Sitemap();
   return {
     host: getCanonicalUrl(),
     rules: [
       {
         allow: ['/discover/*'],
-        disallow: ['/discover/search/*'],
         userAgent: ['Facebot', 'facebookexternalhit'],
       },
       {
         allow: ['/discover/*'],
-        disallow: ['/discover/search/*'],
         userAgent: 'LinkedInBot',
       },
       {
         allow: ['/discover/*'],
-        disallow: ['/discover/search/*'],
         userAgent: 'Twitterbot',
       },
       {
         allow: ['/'],
-        disallow: ['/api/*', '/login', '/signup', '/files', '/repos/*', '/discover/search/*'],
+        disallow: ['/api/*', '/login', '/signup', '/files', '/repos/*'],
         userAgent: '*',
       },
     ],