@lobehub/chat 1.96.20 → 1.97.0

package/src/app/sitemap.tsx

@@ -1,30 +1,98 @@
 import { MetadataRoute } from 'next';
 
-import { SitemapType, sitemapModule } from '@/server/sitemap';
+import { LAST_MODIFIED, Sitemap, SitemapType } from '@/server/sitemap';
 
-export const generateSitemaps = async () => {
-  // Fetch the total number of products and calculate the number of sitemaps needed
-  return sitemapModule.sitemapIndexs;
-};
+// Sitemap缓存配置 - 24小时重新验证
+export const revalidate = 86_400; // 24小时 - 内容页面缓存
+export const dynamic = 'force-static';
 
-const Sitemap = async ({ id }: { id: SitemapType }): Promise<MetadataRoute.Sitemap> => {
-  switch (id) {
+export const generateSitemapLink = (url: string) =>
+  ['<sitemap>', `<loc>${url}</loc>`, `<lastmod>${LAST_MODIFIED}</lastmod>`, '</sitemap>'].join(
+    '\n',
+  );
+
+export async function generateSitemaps() {
+  const sitemapModule = new Sitemap();
+  // 生成动态的sitemap列表，包括分页的sitemap
+  const staticSitemaps = sitemapModule.sitemapIndexs;
+
+  // 获取需要分页的类型的页数
+  const [pluginPages, assistantPages, mcpPages, modelPages] = await Promise.all([
+    sitemapModule.getPluginPageCount(),
+    sitemapModule.getAssistantPageCount(),
+    sitemapModule.getMcpPageCount(),
+    sitemapModule.getModelPageCount(),
+  ]);
+
+  // 生成分页sitemap ID列表
+  const paginatedSitemaps = [
+    ...Array.from({ length: pluginPages }, (_, i) => ({ id: `plugins-${i + 1}` as SitemapType })),
+    ...Array.from({ length: assistantPages }, (_, i) => ({
+      id: `assistants-${i + 1}` as SitemapType,
+    })),
+    ...Array.from({ length: mcpPages }, (_, i) => ({ id: `mcp-${i + 1}` as SitemapType })),
+    ...Array.from({ length: modelPages }, (_, i) => ({ id: `models-${i + 1}` as SitemapType })),
+  ];
+
+  return [...staticSitemaps, ...paginatedSitemaps];
+}
+
+// 解析分页ID
+export function parsePaginatedId(id: string): { page?: number; type: SitemapType } {
+  if (id.includes('-')) {
+    const [type, pageStr] = id.split('-');
+    const page = parseInt(pageStr, 10);
+    if (!isNaN(page)) {
+      return { page, type: type as SitemapType };
+    }
+  }
+  return { type: id as SitemapType };
+}
+
+export default async function sitemap({ id }: { id: string }): Promise<MetadataRoute.Sitemap> {
+  const { type, page } = parsePaginatedId(id);
+  const sitemapModule = new Sitemap();
+
+  switch (type) {
     case SitemapType.Pages: {
       return sitemapModule.getPage();
     }
     case SitemapType.Assistants: {
-      return sitemapModule.getAssistants();
+      return sitemapModule.getAssistants(page);
+    }
+    case SitemapType.Mcp: {
+      return sitemapModule.getMcp(page);
     }
     case SitemapType.Plugins: {
-      return sitemapModule.getPlugins();
+      return sitemapModule.getPlugins(page);
     }
     case SitemapType.Models: {
-      return sitemapModule.getModels();
+      return sitemapModule.getModels(page);
     }
     case SitemapType.Providers: {
       return sitemapModule.getProviders();
     }
-  }
-};
+    default: {
+      // 处理分页的sitemap（plugins-1, assistants-2, mcp-3等）
+      if (id.startsWith('plugins-')) {
+        const pageNum = parseInt(id.split('-')[1], 10);
+        return sitemapModule.getPlugins(pageNum);
+      }
+      if (id.startsWith('assistants-')) {
+        const pageNum = parseInt(id.split('-')[1], 10);
+        return sitemapModule.getAssistants(pageNum);
+      }
+      if (id.startsWith('mcp-')) {
+        const pageNum = parseInt(id.split('-')[1], 10);
+        return sitemapModule.getMcp(pageNum);
+      }
+      if (id.startsWith('models-')) {
+        const pageNum = parseInt(id.split('-')[1], 10);
+        return sitemapModule.getModels(pageNum);
+      }
 
-export default Sitemap;
+      // 默认返回空数组
+      return [];
+    }
+  }
+}

package/src/components/CopyableLabel/index.tsx

@@ -0,0 +1,37 @@
+import { CopyButton, Text } from '@lobehub/ui';
+import { CSSProperties, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const CopyableLabel = memo<{ style?: CSSProperties; value?: string | null }>(
+  ({ style, value = '--' }) => {
+    return (
+      <Flexbox
+        align={'center'}
+        gap={4}
+        horizontal
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+          ...style,
+        }}
+      >
+        <Text
+          ellipsis
+          style={{
+            color: 'inherit',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            margin: 0,
+            overflow: 'hidden',
+            width: '100%',
+          }}
+        >
+          {value || '--'}
+        </Text>
+        <CopyButton content={value || '--'} size={'small'} />
+      </Flexbox>
+    );
+  },
+);
+
+export default CopyableLabel;

package/src/components/Descriptions/index.tsx

@@ -0,0 +1,119 @@
+import { Grid, type GridProps, Icon, IconProps, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { CSSProperties, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import CopyableLabel from '../CopyableLabel';
+
+const useStyles = createStyles(({ responsive, css, token }) => {
+  return {
+    bordered: css`
+      overflow: hidden;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusLG}px;
+      ${responsive.mobile} {
+        background: ${token.colorBgContainer};
+      }
+    `,
+    cell: css`
+      overflow: hidden;
+      box-shadow: 0 0 0 0.5px ${token.colorBorderSecondary};
+    `,
+    label: css`
+      overflow: hidden;
+      border-inline-end: 1px solid ${token.colorBorderSecondary};
+      background: ${token.colorFillQuaternary};
+    `,
+  };
+});
+
+export interface DescriptionItem {
+  copyable?: boolean;
+  icon?: IconProps['icon'];
+  key: string;
+  label: ReactNode;
+  style?: CSSProperties;
+  value: ReactNode;
+}
+
+interface DescriptionsProps extends Omit<GridProps, 'children'> {
+  bordered?: boolean;
+  items: DescriptionItem[];
+  labelWidth?: number | string;
+}
+
+const Descriptions = memo<DescriptionsProps>(
+  ({ labelWidth = 150, title, bordered, className, items, ...rest }) => {
+    const { cx, styles, theme } = useStyles();
+
+    return (
+      <>
+        {title && <h3 style={{ marginTop: 12 }}>{title}</h3>}
+        <Grid
+          className={cx(bordered && styles.bordered, className)}
+          gap={0}
+          maxItemWidth={450}
+          {...rest}
+        >
+          {items.map((item) => (
+            <Flexbox
+              align={'center'}
+              className={cx(bordered && styles.cell)}
+              flex={1}
+              horizontal
+              key={item.key}
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <Flexbox
+                align={'center'}
+                className={cx(bordered && styles.label)}
+                flex={'none'}
+                gap={6}
+                horizontal
+                paddingBlock={bordered ? 12 : 4}
+                paddingInline={bordered ? 16 : 0}
+                style={{ height: '100%', position: 'relative' }}
+                width={labelWidth}
+              >
+                {item.icon && <Icon color={theme.colorTextSecondary} icon={item.icon} />}
+                <Text
+                  ellipsis
+                  style={{
+                    color: theme.colorTextSecondary,
+                  }}
+                >
+                  {item.label}
+                </Text>
+              </Flexbox>
+              <Flexbox
+                align={'center'}
+                flex={1}
+                horizontal
+                justify={'flex-start'}
+                paddingBlock={bordered ? 12 : 4}
+                paddingInline={16}
+                style={{ height: '100%', overflow: 'hidden', position: 'relative' }}
+              >
+                {item.copyable ? (
+                  <CopyableLabel
+                    style={item.style}
+                    value={item.value ? String(item.value) : '--'}
+                  />
+                ) : (
+                  <Text ellipsis style={{ ...item.style }}>
+                    {item.value}
+                  </Text>
+                )}
+              </Flexbox>
+            </Flexbox>
+          ))}
+        </Grid>
+      </>
+    );
+  },
+);
+
+export default Descriptions;

package/src/components/InlineTable/index.tsx

@@ -0,0 +1,69 @@
+import { ConfigProvider, Table, TableProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  hoverToActive: css`
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  table: css`
+    .${prefixCls}-table {
+      background: transparent;
+
+      th,
+      td {
+        border: none !important;
+        font-size: 13px;
+      }
+
+      .${prefixCls}-table-cell:before {
+        display: none;
+      }
+    }
+
+    tr {
+      td:first-child,
+      th:first-child {
+        padding-inline-start: 24px !important;
+      }
+
+      td:last-child,
+      th:last-child {
+        padding-inline-end: 24px !important;
+      }
+    }
+  `,
+}));
+
+const InlineTable = memo<TableProps & { hoverToActive?: boolean }>(
+  ({ hoverToActive, className, ...rest }) => {
+    const { cx, styles, theme } = useStyles();
+    return (
+      <ConfigProvider
+        theme={{
+          components: {
+            Table: {
+              headerBg: theme.colorFillQuaternary,
+              headerBorderRadius: 0,
+            },
+          },
+        }}
+      >
+        <Table
+          bordered={false}
+          className={cx(styles.table, hoverToActive && styles.hoverToActive, className)}
+          pagination={false}
+          scroll={{ x: 'max-content' }}
+          size={'small'}
+          {...rest}
+        />
+      </ConfigProvider>
+    );
+  },
+);
+
+export default InlineTable;

package/src/{features/PluginSettings/PluginSettingRender.tsx → components/JSONSchemaConfig/ItemRender.tsx}

@@ -3,7 +3,7 @@ import { Slider, Switch } from 'antd';
 import { JSONSchema7Type } from 'json-schema';
 import { memo } from 'react';
 
-interface PluginSettingsProps {
+interface JSONSchemaItemRenderProps {
   defaultValue?: any;
   enum?: JSONSchema7Type[];
   format?: string;
@@ -15,7 +15,7 @@ interface PluginSettingsProps {
   value?: any;
 }
 
-const PluginSettingRender = memo<PluginSettingsProps>(
+const JSONSchemaItemRender = memo<JSONSchemaItemRenderProps>(
   ({ type, enum: enumItems, format, minimum, maximum, ...props }) => {
     switch (type) {
       case 'string': {
@@ -51,4 +51,4 @@ const PluginSettingRender = memo<PluginSettingsProps>(
   },
 );
 
-export default PluginSettingRender;
+export default JSONSchemaItemRender;

package/src/components/MCPDepsIcon/Java.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { IconType } from '@lobehub/icons';
+import { memo } from 'react';
+
+const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 50 50"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M28.188 0c2.75 6.363-9.86 10.293-11.032 15.594-1.074 4.87 7.492 10.531 7.5 10.531-1.3-2.016-2.258-3.676-3.562-6.813C18.887 14.008 34.535 9.207 28.187 0zm8.375 8.813s-11.063.71-11.626 7.78c-.25 3.15 2.91 4.805 3 7.095.075 1.87-1.875 3.437-1.875 3.437s3.547-.676 4.657-3.531c1.23-3.168-2.399-5.309-2.032-7.844.352-2.426 7.875-6.938 7.875-6.938zM19.186 25.155s-10.125-.144-10.125 2.719c0 2.992 13.254 3.215 22.72 1.375 0 0 2.515-1.73 3.187-2.375-6.203 1.266-20.344 1.406-20.344.313 0-1.008 4.563-2.032 4.563-2.032zm19.47 0c-.993.078-2.063.461-3.032 1.157 2.281-.493 4.219.921 4.219 2.53 0 3.626-5.25 7.032-5.25 7.032s8.125-.922 8.125-6.875c0-2.703-1.88-4.016-4.063-3.844zM16.75 30.72c-1.555 0-3.875 1.218-3.875 2.375 0 2.324 11.688 4.113 20.344.718l-3-1.843c-5.867 1.879-16.672 1.265-13.469-1.25zm1.438 5.218c-2.13 0-3.532 1.286-3.532 2.25 0 2.985 12.715 3.286 17.75.25l-3.187-2.03c-3.762 1.59-13.203 1.831-11.032-.47zm-7.094 2.688c-3.469-.07-5.719 1.488-5.719 2.781 0 6.875 35.5 6.559 35.5-.468 0-1.168-1.348-1.735-1.844-2C41.934 45.656 9.97 45.12 9.97 41.156c0-.902 2.351-1.765 4.531-1.343l-1.844-1.063a12.349 12.349 0 00-1.562-.125zm33.531 4.625c-5.398 5.117-19.078 6.973-32.844 3.813 13.762 5.632 32.778 2.472 32.844-3.813z" />
+    </svg>
+  );
+});
+
+export default Icon;

package/src/components/MCPDepsIcon/PowerShell.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { IconType } from '@lobehub/icons';
+import { memo } from 'react';
+
+const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 50 50"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M49.324 7.34c-.94-1.17-2.61-1.32-3.96-1.33-3.929-.01-28.786-.01-32.386 0-3.999.01-5.579 1.27-6.479 5.17C4.409 20.19 2.33 29.21.27 38.23c-.31 1.37-.55 3.11.42 4.33.99 1.24 2.79 1.41 4.249 1.41 5.159.02 26.657.02 32.376 0 3.55-.01 5.469-1.51 6.239-4.88 2.28-9.98 4.309-19.02 6.199-27.64.291-1.3.501-2.95-.429-4.11zM14.758 38.28c-1.2.88-2.34 1.11-3.3-.2-1.07-1.45-.08-2.31 1.02-3.12 3.96-2.89 7.909-5.8 11.839-8.72.55-.41 1.27-.97 1.74-1.32-.61-.69-1.12-1.26-1.53-1.73-2.43-2.73-4.659-5.27-7.069-7.87-1.1-1.19-1.45-2.34-.13-3.52 1.31-1.16 2.6-1.06 3.789.28 3.34 3.72 6.679 7.44 10.069 11.1 1.27 1.37.98 2.3-.42 3.32-5.359 3.89-10.689 7.83-16.008 11.78zM32.246 38h-9.499c-1.13 0-1.75-1-1.75-2s.62-2 1.75-2h9.499c1.13 0 1.75 1 1.75 2s-.62 2-1.75 2z" />
+    </svg>
+  );
+});
+
+export default Icon;

package/src/components/MCPDepsIcon/Terminal.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { IconType } from '@lobehub/icons';
+import { memo } from 'react';
+
+const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M7.293 14.293a1 1 0 101.414 1.414l2.5-2.5a1.707 1.707 0 000-2.414l-2.5-2.5a1 1 0 00-1.414 1.414L9.586 12l-2.293 2.293zM13 14a1 1 0 100 2h3a1 1 0 100-2h-3zm9-6.066V16.066c0 .886 0 1.65-.082 2.262-.088.655-.287 1.284-.797 1.793-.51.51-1.138.709-1.793.797-.612.082-1.376.082-2.262.082H6.934c-.886 0-1.65 0-2.262-.082-.655-.088-1.284-.287-1.793-.797-.51-.51-.709-1.138-.797-1.793C2 17.716 2 16.952 2 16.066V7.934c0-.886 0-1.65.082-2.262.088-.655.287-1.284.797-1.793.51-.51 1.138-.709 1.793-.797C5.284 3 6.048 3 6.934 3H17.066c.886 0 1.65 0 2.262.082.655.088 1.284.287 1.793.797.51.51.709 1.138.797 1.793C22 6.284 22 7.048 22 7.934z" />
+    </svg>
+  );
+});
+
+export default Icon;

package/src/components/MCPDepsIcon/UV.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { IconType } from '@lobehub/icons';
+import { memo } from 'react';
+
+const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 41 41"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M0 .169l.084 20 .068 16a4 4 0 004.017 3.982l16-.067 10-.042 1.016-.005c2.203-.009 3.983-1.834 3.983-4.037H37v4h3.168L40 0 21.6.078l.077 15.94V26H18.4l.077-9.968L18.4.092 0 .168z" />
+    </svg>
+  );
+});
+
+export default Icon;

package/src/components/MCPDepsIcon/index.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import {
+  SiApachemaven,
+  SiBlender,
+  SiBun,
+  SiDeno,
+  SiDocker,
+  SiGit,
+  SiGo,
+  SiHelm,
+  SiKubernetes,
+  SiNodedotjs,
+  SiNpm,
+  SiPipx,
+  SiPnpm,
+  SiPython,
+  SiRust,
+  SiYarn,
+} from '@icons-pack/react-simple-icons';
+import { Icon, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import Java from './Java';
+import PowerShell from './PowerShell';
+import Terminal from './Terminal';
+import UV from './UV';
+
+const icons: any = {
+  blender: SiBlender,
+  bun: SiBun,
+  bunx: SiBun,
+  deno: SiDeno,
+  docker: SiDocker,
+  git: SiGit,
+  go: SiGo,
+  helm: SiHelm,
+  java: Java,
+  kubectl: SiKubernetes,
+  make: Terminal,
+  manual: Terminal,
+  maven: SiApachemaven,
+  nodejs: SiNodedotjs,
+  npm: SiNpm,
+  npx: SiNpm,
+  odbc: Terminal,
+  pandoc: Terminal,
+  pipx: SiPipx,
+  pnpm: SiPnpm,
+  pnpx: SiPnpm,
+  powershell: PowerShell,
+  python: SiPython,
+  rust: SiRust,
+  sh: Terminal,
+  uv: UV,
+  uvx: UV,
+  yarn: SiYarn,
+};
+
+const InstallationIcon = memo<{ size?: number; type: string }>(({ type, size = 20 }) => {
+  const theme = useTheme();
+  const iconType = type.split(' ')[0];
+  if (iconType === 'none') return;
+  return (
+    <Tooltip title={iconType}>
+      <Icon fill={theme.colorTextDescription} icon={icons?.[iconType] || Terminal} size={size} />
+    </Tooltip>
+  );
+});
+
+export default InstallationIcon;

package/src/components/MCPStdioCommandInput/index.tsx

@@ -0,0 +1,47 @@
+import {
+  SiBun,
+  SiDocker,
+  SiNodedotjs,
+  SiNpm,
+  SiPnpm,
+  SiPython,
+} from '@icons-pack/react-simple-icons';
+import { AutoComplete, type AutoCompleteProps } from '@lobehub/ui';
+import { FC, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+// 定义预设的命令选项
+const STDIO_COMMAND_OPTIONS: {
+  // 假设图标是 React 函数组件
+  color?: string;
+  icon?: FC<{ color?: string; size?: number }>;
+  value: string;
+}[] = [
+  { color: '#CB3837', icon: SiNpm, value: 'npx' },
+  { color: '#CB3837', icon: SiNpm, value: 'npm' },
+  { color: '#F69220', icon: SiPnpm, value: 'pnpm' },
+  { color: '#F69220', icon: SiPnpm, value: 'pnpx' },
+  { color: '#339933', icon: SiNodedotjs, value: 'node' },
+  { color: '#efe2d2', icon: SiBun, value: 'bun' },
+  { color: '#efe2d2', icon: SiBun, value: 'bunx' },
+  { color: '#DE5FE9', icon: SiPython, value: 'uv' },
+  { color: '#3776AB', icon: SiPython, value: 'python' },
+  { color: '#2496ED', icon: SiDocker, value: 'docker' },
+];
+
+const MCPStdioCommandInput = memo<AutoCompleteProps>((props) => (
+  <AutoComplete
+    options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
+      label: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {Icon && <Icon color={color} size={16} />}
+          {value}
+        </Flexbox>
+      ),
+      value: value,
+    }))}
+    {...props}
+  />
+));
+
+export default MCPStdioCommandInput;

package/src/components/OfficialIcon.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { IconType } from '@lobehub/icons';
+import { memo } from 'react';
+
+const OfficialIcon: IconType = memo(({ size = 18, style, fill = '#1d9bf0', ...rest }) => {
+  return (
+    <svg
+      fill={fill}
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 22 22"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M20.396 11a3.487 3.487 0 00-2.008-3.062 3.474 3.474 0 00-.742-3.584 3.474 3.474 0 00-3.584-.742A3.468 3.468 0 0011 1.604a3.463 3.463 0 00-3.053 2.008 3.472 3.472 0 00-1.902-.14c-.635.13-1.22.436-1.69.882a3.461 3.461 0 00-.734 3.584A3.49 3.49 0 001.604 11a3.496 3.496 0 002.017 3.062 3.471 3.471 0 00.733 3.584 3.49 3.49 0 003.584.742A3.487 3.487 0 0011 20.396a3.476 3.476 0 003.062-2.007 3.335 3.335 0 004.326-4.327A3.487 3.487 0 0020.396 11zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" />
+    </svg>
+  );
+});
+
+export default OfficialIcon;

package/src/components/Plugins/MCPTag.tsx

@@ -0,0 +1,18 @@
+import { MCP } from '@lobehub/icons';
+import { Tag } from '@lobehub/ui';
+import { memo } from 'react';
+
+interface MCPTagProps {
+  showIcon?: boolean;
+  showText?: boolean;
+}
+
+const MCPTag = memo<MCPTagProps>(({ showIcon = true, showText = true }) => {
+  return (
+    <Tag icon={showIcon && <MCP />} size={'small'}>
+      {showText && 'Model Context Protocol'}
+    </Tag>
+  );
+});
+
+export default MCPTag;

package/src/components/Plugins/PluginTag.tsx

@@ -0,0 +1,50 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { BadgeCheck, CircleUser, Package } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MCPTag from './MCPTag';
+
+interface PluginTagProps {
+  author?: string;
+  isMCP?: boolean;
+  showIcon?: boolean;
+  showText?: boolean;
+  type: 'builtin' | 'customPlugin' | 'plugin';
+}
+
+const PluginTag = memo<PluginTagProps>(
+  ({ showIcon = true, author, type, showText = true, isMCP }) => {
+    const { t } = useTranslation('plugin');
+    const isCustom = type === 'customPlugin';
+    const isOfficial = author === 'LobeHub';
+
+    const customTag = (
+      <Tag color={'warning'} icon={showIcon && <Icon icon={Package} />} size={'small'}>
+        {t('store.customPlugin')}
+      </Tag>
+    );
+
+    if (isMCP)
+      return (
+        <>
+          <MCPTag showIcon={showIcon} showText={false} />
+          {isCustom && customTag}
+        </>
+      );
+
+    if (isCustom) return customTag;
+
+    return (
+      <Tag
+        color={isOfficial ? 'success' : undefined}
+        icon={showIcon && <Icon icon={isOfficial ? BadgeCheck : CircleUser} />}
+        size={'small'}
+      >
+        {showText && (author || t('store.communityPlugin'))}
+      </Tag>
+    );
+  },
+);
+
+export default PluginTag;