@lobehub/chat 1.96.20 → 1.97.0

package/src/features/MCP/MCPInstallProgress/MCPDependenciesGuide.tsx

@@ -0,0 +1,217 @@
+import { Button, Markdown, Snippet, Text } from '@lobehub/ui';
+import { Card, Space } from 'antd';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { AlertTriangle, CheckCircle, ExternalLink, Terminal } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { SystemDependencyCheckResult } from '@/types/plugins';
+
+interface MCPDependenciesGuideProps {
+  identifier: string;
+  systemDependencies: SystemDependencyCheckResult[];
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  commandBlock: css`
+    position: relative;
+
+    padding-block: ${token.paddingXS}px;
+    padding-inline: ${token.paddingSM}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusSM}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+
+    background-color: ${token.colorFillTertiary};
+
+    &:hover {
+      background-color: ${token.colorFillSecondary};
+    }
+  `,
+  container: css`
+    margin-block-start: ${token.marginXS}px;
+    padding: ${token.padding}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+
+    background-color: ${token.colorBgContainer};
+  `,
+  copyButton: css`
+    position: absolute;
+    inset-block-start: ${token.paddingXXS}px;
+    inset-inline-end: ${token.paddingXXS}px;
+
+    height: auto;
+    min-height: auto;
+    padding-block: 2px;
+    padding-inline: 6px;
+
+    font-size: 12px;
+  `,
+  dependencyCard: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusSM}px;
+  `,
+  footer: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    justify-content: flex-end;
+    margin-block-start: ${token.marginXS}px;
+  `,
+  statusIcon: css`
+    display: flex;
+    gap: ${token.marginXXS}px;
+    align-items: center;
+  `,
+}));
+
+const MCPDependenciesGuide = memo<MCPDependenciesGuideProps>(
+  ({ identifier, systemDependencies }) => {
+    const { styles, theme } = useStyles();
+    const { t } = useTranslation(['plugin', 'common']);
+    const [installMCPPlugin, cancelInstallMCPPlugin] = useToolStore((s) => [
+      s.installMCPPlugin,
+      s.cancelInstallMCPPlugin,
+    ]);
+
+    const handleCancel = () => {
+      cancelInstallMCPPlugin(identifier);
+    };
+
+    const handleRetryCheck = async () => {
+      // 重新检查依赖，重新开始安装流程
+      await installMCPPlugin(identifier);
+    };
+
+    const handleSkipCheck = async () => {
+      // 跳过依赖检查，继续安装流程
+      await installMCPPlugin(identifier, { skipDepsCheck: true });
+    };
+
+    return (
+      <motion.div
+        animate={{ y: 0 }}
+        className={styles.container}
+        initial={{ y: 8 }}
+        transition={{ delay: 0.1, duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+      >
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 4 }}
+          style={{ marginBottom: 8 }}
+          transition={{ delay: 0.15, duration: 0.2 }}
+        >
+          <Flexbox gap={8}>
+            <Flexbox align="center" gap={8} horizontal>
+              <AlertTriangle color={theme.colorWarning} size={16} />
+              <Text as={'h5'} style={{ margin: 0 }}>
+                {t('mcpInstall.dependenciesRequired')}
+              </Text>
+            </Flexbox>
+            <Text style={{ fontSize: 12 }} type="secondary">
+              {t('mcpInstall.dependenciesDescription')}
+            </Text>
+          </Flexbox>
+        </motion.div>
+
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 4 }}
+          transition={{ delay: 0.2, duration: 0.2 }}
+        >
+          <Flexbox gap={8}>
+            {systemDependencies.map((dep) => (
+              <Card className={styles.dependencyCard} key={dep.name} size="small">
+                <Flexbox gap={12}>
+                  <Flexbox align="center" horizontal justify="space-between">
+                    <Flexbox align="center" gap={8} horizontal>
+                      <Text strong>{dep.name}</Text>
+                      {dep.requiredVersion && (
+                        <Text style={{ fontSize: 12 }} type="secondary">
+                          {t('mcpInstall.dependencyStatus.requiredVersion', {
+                            version: dep.requiredVersion,
+                          })}
+                        </Text>
+                      )}
+                    </Flexbox>
+                    <div className={styles.statusIcon}>
+                      {dep.meetRequirement ? (
+                        <>
+                          <CheckCircle color={theme.colorSuccess} size={14} />
+                          <Text style={{ fontSize: 12 }} type="success">
+                            {t('mcpInstall.dependencyStatus.installed')}
+                          </Text>
+                        </>
+                      ) : (
+                        <>
+                          <AlertTriangle color={theme.colorWarning} size={14} />
+                          <Text style={{ fontSize: 12 }} type="warning">
+                            {t('mcpInstall.dependencyStatus.notInstalled')}
+                          </Text>
+                        </>
+                      )}
+                    </div>
+                  </Flexbox>
+
+                  {!dep.meetRequirement && dep.installInstructions && (
+                    <Flexbox gap={12}>
+                      {dep.installInstructions.current && (
+                        <Flexbox gap={4}>
+                          <Text strong style={{ fontSize: 12 }}>
+                            <Terminal size={12} style={{ marginRight: 4 }} />
+                            {t('mcpInstall.installMethods.recommended')}
+                          </Text>
+                          <Snippet language={'bash'}>{dep.installInstructions.current}</Snippet>
+                        </Flexbox>
+                      )}
+
+                      {dep.installInstructions.manual && (
+                        <Flexbox gap={4}>
+                          <Text strong style={{ fontSize: 12 }}>
+                            <ExternalLink size={12} style={{ marginRight: 4 }} />
+                            {t('mcpInstall.installMethods.manual')}
+                          </Text>
+                          <Markdown style={{ fontSize: 12 }}>
+                            {dep.installInstructions.manual}
+                          </Markdown>
+                        </Flexbox>
+                      )}
+                    </Flexbox>
+                  )}
+                </Flexbox>
+              </Card>
+            ))}
+          </Flexbox>
+        </motion.div>
+
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className={styles.footer}
+          initial={{ opacity: 0, y: 4 }}
+          transition={{ delay: 0.3, duration: 0.2 }}
+        >
+          <Flexbox horizontal justify={'space-between'}>
+            <Button onClick={handleCancel} size="small">
+              {t('common:cancel')}
+            </Button>
+            <Space>
+              <Button onClick={handleSkipCheck} size="small">
+                {t('mcpInstall.skipDependencies')}
+              </Button>
+              <Button onClick={handleRetryCheck} size="small" type="primary">
+                {t('mcpInstall.recheckDependencies')}
+              </Button>
+            </Space>
+          </Flexbox>
+        </motion.div>
+      </motion.div>
+    );
+  },
+);
+
+export default MCPDependenciesGuide;

package/src/features/MCP/MCPInstallProgress/index.tsx

@@ -0,0 +1,118 @@
+import { Text } from '@lobehub/ui';
+import { Progress } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { motion } from 'framer-motion';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors } from '@/store/tool/selectors';
+import { MCPInstallStep } from '@/store/tool/slices/mcpStore';
+
+import InstallError from './InstallError';
+import MCPConfigForm from './MCPConfigForm';
+import MCPDependenciesGuide from './MCPDependenciesGuide';
+
+const MCPInstallProgress = memo<{ identifier: string }>(({ identifier }) => {
+  const { t } = useTranslation('plugin');
+  const installProgress = useToolStore(
+    mcpStoreSelectors.getMCPInstallProgress(identifier),
+    isEqual,
+  );
+
+  const theme = useTheme();
+
+  const stepText = installProgress ? t(`mcpInstall.${installProgress.step}` as any) : undefined;
+  const needsConfig = installProgress?.needsConfig;
+  const needsDependencies = installProgress?.step === MCPInstallStep.DEPENDENCIES_REQUIRED;
+  const hasError = installProgress?.step === MCPInstallStep.ERROR;
+  const errorInfo = installProgress?.errorInfo;
+
+  return (
+    <>
+      {installProgress && !hasError && !needsDependencies && (
+        <motion.div
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          initial={{ height: 0, opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+            height: { duration: 0.2 },
+          }}
+        >
+          <Flexbox paddingBlock={4}>
+            <Progress
+              percent={installProgress.progress}
+              showInfo={false}
+              size="small"
+              status="active"
+              strokeColor={{ '0%': theme.blue, '100%': theme.geekblue }}
+            />
+            {stepText && (
+              <Text fontSize={11} style={{ marginTop: 4 }} type={'secondary'}>
+                ({installProgress.progress}%) {stepText}
+              </Text>
+            )}
+          </Flexbox>
+        </motion.div>
+      )}
+
+      {hasError && errorInfo && (
+        <motion.div
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          initial={{ height: 0, opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+            height: { duration: 0.2 },
+          }}
+        >
+          <Flexbox paddingBlock={8}>
+            <InstallError errorInfo={errorInfo} identifier={identifier} />
+          </Flexbox>
+        </motion.div>
+      )}
+
+      {needsDependencies && installProgress?.systemDependencies && (
+        <motion.div
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          initial={{ height: 0, opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+            height: { duration: 0.2 },
+          }}
+        >
+          <Flexbox paddingInline={12}>
+            <MCPDependenciesGuide
+              identifier={identifier}
+              systemDependencies={installProgress.systemDependencies}
+            />
+          </Flexbox>
+        </motion.div>
+      )}
+
+      {needsConfig && installProgress && (
+        <motion.div
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          initial={{ height: 0, opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+            height: { duration: 0.2 },
+          }}
+        >
+          <MCPConfigForm configSchema={installProgress.configSchema} identifier={identifier} />
+        </motion.div>
+      )}
+    </>
+  );
+});
+
+export default MCPInstallProgress;

package/src/features/MCP/Scores.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { Icon, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { CircleDashedIcon, HammerIcon, LayersIcon, MessageSquareQuoteIcon } from 'lucide-react';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { McpNavKey } from '@/types/discover';
+
+import {
+  calculateScore,
+  calculateScoreFlags,
+  createScoreItems,
+  getGradeColor,
+  getGradeStyleClass,
+} from './calculateScore';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    active: css`
+      background: ${token.colorSuccessBgHover};
+    `,
+    disable: css`
+      color: ${token.colorTextDescription};
+    `,
+    extraTag: css`
+      padding-block: 4px;
+      padding-inline: 10px 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+
+      background: ${token.colorFillTertiary};
+    `,
+    extraTagActive: css`
+      &:hover {
+        color: ${token.colorText};
+      }
+    `,
+    gradeA: css`
+      color: ${token.colorSuccess};
+      background: ${token.colorSuccessBg};
+    `,
+    gradeB: css`
+      color: ${token.colorWarning};
+      background: ${token.colorWarningBg};
+    `,
+    gradeF: css`
+      color: ${token.colorError};
+      background: ${token.colorErrorBg};
+    `,
+    gradeIcon: css`
+      flex: none;
+
+      width: 22px;
+      height: 22px;
+      border: 1.5px solid;
+      border-radius: 50%;
+
+      font-size: 12px;
+      font-weight: 600;
+    `,
+    tag: css`
+      padding-block: 4px;
+      padding-inline: 8px 12px;
+      border-radius: 16px;
+      background: ${token.colorFillTertiary};
+    `,
+  };
+});
+
+interface ScoresProps {
+  deploymentOptions?: Array<{
+    installationMethod?: string;
+  }>;
+  github?: {
+    license?: string;
+  };
+  identifier: string;
+  // 列表页支持
+  installationMethods?: string;
+  isClaimed?: boolean;
+  isValidated?: boolean;
+  // 原始数据属性
+  overview?: {
+    readme?: string;
+  };
+  promptsCount?: number;
+  resourcesCount?: number;
+  toolsCount?: number;
+}
+
+const Scores = memo<ScoresProps>(
+  ({
+    identifier,
+    promptsCount,
+    toolsCount,
+    resourcesCount,
+    isValidated,
+    overview,
+    github,
+    deploymentOptions,
+    isClaimed = false,
+    installationMethods,
+  }) => {
+    const { cx, styles, theme } = useStyles();
+    const { t } = useTranslation('discover');
+
+    // 使用工具函数计算所有的 has* 值，但需要处理类型转换
+    const scoreFlags = calculateScoreFlags({
+      // 只传递兼容的属性，或者进行类型转换
+      deploymentOptions: deploymentOptions?.map((item) => ({
+        // 确保不为 undefined
+        connection: { type: 'stdio' as const },
+        installationMethod: item.installationMethod || 'manual', // 提供默认的 connection
+      })),
+      github: github?.license
+        ? {
+            license: github.license,
+            url: '', // 提供默认的 url
+          }
+        : undefined,
+      installationMethods,
+      isClaimed,
+      isValidated,
+      overview: overview?.readme
+        ? {
+            readme: overview.readme,
+          }
+        : undefined,
+      promptsCount,
+      resourcesCount,
+      toolsCount,
+    });
+
+    // 计算评分
+    const scoreItems = createScoreItems(scoreFlags);
+    const scoreResult = calculateScore(scoreItems);
+    const { grade, percentage } = scoreResult;
+
+    const showToolts = Boolean(toolsCount && toolsCount > 0);
+    const showResources = Boolean(resourcesCount && resourcesCount > 0);
+    const showPrompts = Boolean(promptsCount && promptsCount > 0);
+
+    const showExtra = showToolts || showResources || showPrompts;
+
+    const scoreTag = (
+      <Tooltip title={`${t(`mcp.details.scoreLevel.${grade}.desc`)} (${Math.round(percentage)}%)`}>
+        <Flexbox
+          align={'center'}
+          className={cx(styles.tag, getGradeStyleClass(grade, styles))}
+          gap={8}
+          horizontal
+          style={{
+            paddingLeft: 4,
+          }}
+        >
+          <Center className={styles.gradeIcon} style={{ borderColor: getGradeColor(grade, theme) }}>
+            {grade.toUpperCase()}
+          </Center>
+          <span style={{ fontWeight: 500 }}>
+            {t(`mcp.details.scoreLevel.${grade}.title`).toUpperCase()}
+          </span>
+        </Flexbox>
+      </Tooltip>
+    );
+
+    const unvalidatedTag = (
+      <Tooltip title={t('mcp.unvalidated.desc')}>
+        <Flexbox
+          align={'center'}
+          className={styles.tag}
+          gap={8}
+          horizontal
+          style={{
+            color: theme.colorTextDescription,
+            paddingLeft: 4,
+          }}
+        >
+          <Icon color={theme.colorTextQuaternary} icon={CircleDashedIcon} size={22} />
+          {t('mcp.unvalidated.title')}
+        </Flexbox>
+      </Tooltip>
+    );
+
+    return (
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        gap={8}
+        horizontal
+        onClick={(e) => e.stopPropagation()}
+      >
+        {identifier && (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                activeTab: McpNavKey.Score,
+              },
+              url: urlJoin('/discover/mcp', identifier),
+            })}
+          >
+            {isValidated ? scoreTag : unvalidatedTag}
+          </Link>
+        )}
+        {showExtra && (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                activeTab: McpNavKey.Schema,
+              },
+              url: urlJoin('/discover/mcp', identifier),
+            })}
+          >
+            <Flexbox align={'center'} className={styles.extraTag} gap={16} horizontal>
+              {showToolts && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.tools.title'),
+                    t('mcp.details.schema.tools.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={HammerIcon} size={14} />
+                    {toolsCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+              {showPrompts && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.prompts.title'),
+                    t('mcp.details.schema.prompts.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={MessageSquareQuoteIcon} size={14} />
+                    {promptsCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+              {showResources && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.resources.title'),
+                    t('mcp.details.schema.resources.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={LayersIcon} size={14} />
+                    {resourcesCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+            </Flexbox>
+          </Link>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Scores;