@lobehub/chat 1.96.20 → 1.97.1

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

@@ -0,0 +1,151 @@
+import { Form, Markdown } from '@lobehub/ui';
+import { Form as AForm, Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ItemRender from '@/components/JSONSchemaConfig/ItemRender';
+import { transformPluginSettings } from '@/features/PluginSettings';
+import { useToolStore } from '@/store/tool';
+
+interface MCPConfigFormProps {
+  configSchema: any;
+  identifier: string;
+  onCancel?: () => void;
+  onSubmit?: (config: Record<string, any>) => Promise<void>;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  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};
+  `,
+  footer: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    justify-content: flex-end;
+
+    margin-block-start: ${token.margin}px;
+    padding-block-start: ${token.paddingXS}px;
+    border-block-start: 1px solid ${token.colorBorderSecondary};
+  `,
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
+}));
+
+const MCPConfigForm = memo<MCPConfigFormProps>(({ configSchema, identifier, onCancel }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['plugin', 'common']);
+  const [form] = AForm.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const { installMCPPlugin } = useToolStore();
+
+  const items = transformPluginSettings(configSchema);
+
+  const handleSubmit = async (values: Record<string, any>) => {
+    setLoading(true);
+    try {
+      await installMCPPlugin(identifier, { config: values, resume: true });
+    } catch (error) {
+      console.error('Config submission failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      // 默认行为：清理安装进度
+      useToolStore.getState().updateMCPInstallProgress(identifier, undefined);
+    }
+  };
+
+  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 }}
+        transition={{ delay: 0.15, duration: 0.2 }}
+      >
+        <Flexbox gap={8}>
+          <strong>{t('mcpInstall.configurationRequired')}</strong>
+          <span style={{ fontSize: 12, opacity: 0.7 }}>
+            {t('mcpInstall.configurationDescription')}
+          </span>
+        </Flexbox>
+      </motion.div>
+
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 4 }}
+        transition={{ delay: 0.2, duration: 0.2 }}
+      >
+        <Form
+          form={form}
+          gap={12}
+          items={items
+            .filter((item) => configSchema.required?.includes(item.name))
+            .map((item) => ({
+              children: (
+                <ItemRender
+                  enum={item.enum}
+                  format={item.format}
+                  maximum={item.maximum}
+                  minimum={item.minimum}
+                  type={item.type as any}
+                />
+              ),
+              desc: item.desc && (
+                <Markdown className={styles.markdown} variant={'chat'}>
+                  {item.desc as string}
+                </Markdown>
+              ),
+              key: item.label,
+              label: item.label,
+              name: item.name,
+              rules: [{ required: true }],
+              tag: item.tag,
+              valuePropName: item.type === 'boolean' ? 'checked' : undefined,
+            }))}
+          itemsType={'flat'}
+          layout={'vertical'}
+          onFinish={handleSubmit}
+          variant={'borderless'}
+        />
+      </motion.div>
+
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        className={styles.footer}
+        initial={{ opacity: 0, y: 4 }}
+        transition={{ delay: 0.25, duration: 0.2 }}
+      >
+        <Button onClick={handleCancel} size="small">
+          {t('common:cancel')}
+        </Button>
+        <Button loading={loading} onClick={() => form.submit()} size="small" type="primary">
+          {t('mcpInstall.continueInstall')}
+        </Button>
+      </motion.div>
+    </motion.div>
+  );
+});
+
+export default MCPConfigForm;

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;