@lobehub/chat 1.96.20 → 1.97.1

package/src/features/PluginStore/McpList/Detail/Settings/index.tsx

@@ -0,0 +1,381 @@
+import { Icon, Input, Text } from '@lobehub/ui';
+import { Form as AForm, App, Button, Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { EditIcon, LinkIcon, SaveIcon, Settings2Icon, TerminalIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
+import ArgsInput from '@/features/PluginDevModal/MCPManifestForm/ArgsInput';
+import EnvEditor from '@/features/PluginDevModal/MCPManifestForm/EnvEditor';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  compactForm: css`
+    .ant-form-item {
+      margin-block-end: ${token.marginSM}px;
+    }
+
+    .ant-form-item-label {
+      padding-block-end: ${token.paddingXXS}px;
+
+      label {
+        height: auto;
+        font-size: ${token.fontSizeSM}px;
+      }
+    }
+  `,
+
+  configFormContainer: css`
+    padding: ${token.paddingLG}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorFillAlter};
+  `,
+
+  configHeader: css`
+    margin-block-end: ${token.marginLG}px;
+
+    h5 {
+      margin-block-end: ${token.marginXS}px !important;
+      color: ${token.colorTextHeading};
+    }
+  `,
+
+  connectionForm: css`
+    padding: ${token.paddingMD}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorFillAlter};
+  `,
+
+  connectionPreview: css`
+    padding: ${token.paddingMD}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorFillAlter};
+  `,
+
+  editButton: css`
+    position: absolute;
+    inset-block-start: ${token.paddingXS}px;
+    inset-inline-end: ${token.paddingXS}px;
+  `,
+
+  emptyState: css`
+    padding: ${token.paddingXL}px;
+    border: 1px dashed ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+
+    color: ${token.colorTextTertiary};
+    text-align: center;
+
+    background: ${token.colorFillQuaternary};
+  `,
+
+  footer: css`
+    display: flex;
+    gap: ${token.marginSM}px;
+    margin-block-start: ${token.marginLG}px;
+  `,
+
+  markdown: css`
+    p {
+      margin-block-end: ${token.marginXS}px;
+      color: ${token.colorTextDescription};
+    }
+  `,
+
+  previewItem: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: ${token.paddingXS}px;
+    padding-inline: 0;
+
+    &:not(:last-child) {
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+    }
+  `,
+
+  previewLabel: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    align-items: center;
+
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+  `,
+
+  previewValue: css`
+    padding-block: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXS}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 600;
+    color: ${token.colorText};
+
+    background: ${token.colorFillQuaternary};
+  `,
+
+  sectionTitle: css`
+    position: relative;
+
+    display: flex;
+    gap: ${token.marginXS}px;
+    align-items: center;
+
+    height: 32px;
+
+    font-size: ${token.fontSizeLG}px;
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+
+    &::after {
+      content: '';
+
+      flex: 1;
+
+      height: 1px;
+      margin-inline-start: ${token.marginMD}px;
+
+      background: linear-gradient(to right, ${token.colorBorder}, transparent);
+    }
+  `,
+}));
+
+const Settings = memo<{ identifier: string }>(({ identifier }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['plugin', 'common']);
+  const [connectionForm] = AForm.useForm();
+  const [envForm] = AForm.useForm();
+  const [loading, setLoading] = useState(false);
+  const [connectionLoading, setConnectionLoading] = useState(false);
+  const [isEditingConnection, setIsEditingConnection] = useState(false);
+
+  const [updatePluginSettings, updateInstallPlugin] = useToolStore((s) => [
+    s.updatePluginSettings,
+    s.updateInstallMcpPlugin,
+  ]);
+  const { message } = App.useApp();
+
+  // 获取已安装插件信息
+  const installedPlugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
+  const pluginSettings = useToolStore(pluginSelectors.getPluginSettingsById(identifier));
+
+  if (!installedPlugin) {
+    return null;
+  }
+
+  const customParams = installedPlugin.customParams?.mcp;
+  const isStdioType = customParams?.type === 'stdio';
+
+  const handleConnectionSubmit = async (values: any) => {
+    setConnectionLoading(true);
+    try {
+      await updateInstallPlugin(identifier!, values);
+
+      message.success(t('settings.messages.connectionUpdateSuccess'));
+      setIsEditingConnection(false);
+    } catch (error) {
+      console.error('Connection update failed:', error);
+      message.error(t('settings.messages.connectionUpdateFailed'));
+    } finally {
+      setConnectionLoading(false);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    connectionForm.resetFields();
+    setIsEditingConnection(false);
+  };
+
+  const handleEnvSubmit = async (values: { env?: Record<string, string> }) => {
+    setLoading(true);
+    try {
+      await updatePluginSettings(identifier!, values.env || {}, { override: true });
+      message.success(t('settings.messages.envUpdateSuccess'));
+    } catch (error) {
+      console.error('Settings update failed:', error);
+      message.error(t('settings.messages.envUpdateFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Flexbox paddingBlock={8} paddingInline={12}>
+      <Flexbox gap={24}>
+        <Flexbox gap={24}>
+          <div className={styles.sectionTitle}>
+            <LinkIcon size={16} />
+            {t('settings.connection.title')}
+            {!isEditingConnection && (
+              <Button
+                className={styles.editButton}
+                icon={<EditIcon size={12} />}
+                onClick={() => setIsEditingConnection(true)}
+                size="small"
+                type="text"
+              >
+                {t('settings.edit')}
+              </Button>
+            )}
+          </div>
+
+          {!isEditingConnection ? (
+            // 预览模式
+            <Flexbox paddingInline={8}>
+              <div className={styles.previewItem}>
+                <span className={styles.previewLabel}>{t('settings.connection.type')}</span>
+                <Flexbox horizontal>
+                  <Icon icon={TerminalIcon} />
+                  <Text className={styles.previewValue}>
+                    {customParams?.type?.toUpperCase() || 'Unknown'}
+                  </Text>
+                </Flexbox>
+              </div>
+
+              {customParams?.type === 'http' && customParams?.url && (
+                <div className={styles.previewItem}>
+                  <span className={styles.previewLabel}>{t('settings.connection.url')}</span>
+                  <span className={styles.previewValue}>{customParams.url}</span>
+                </div>
+              )}
+
+              {customParams?.type === 'stdio' && (
+                <>
+                  {customParams?.command && (
+                    <div className={styles.previewItem}>
+                      <span className={styles.previewLabel}>
+                        {t('settings.connection.command')}
+                      </span>
+                      <span className={styles.previewValue}>{customParams.command}</span>
+                    </div>
+                  )}
+
+                  {customParams?.args && customParams.args.length > 0 && (
+                    <div className={styles.previewItem}>
+                      <span className={styles.previewLabel}>{t('settings.connection.args')}</span>
+                      <span className={styles.previewValue}>{customParams.args.join(' ')}</span>
+                    </div>
+                  )}
+                </>
+              )}
+            </Flexbox>
+          ) : (
+            // 编辑模式
+            <div className={styles.connectionForm}>
+              <AForm
+                className={styles.compactForm}
+                form={connectionForm}
+                initialValues={customParams}
+                layout="vertical"
+                onFinish={handleConnectionSubmit}
+              >
+                {customParams?.type === 'http' && (
+                  <AForm.Item
+                    label={t('settings.connection.url')}
+                    name={'url'}
+                    rules={[{ message: t('settings.rules.urlRequired'), required: true }]}
+                  >
+                    <Input placeholder="https://mcp.example.com/server" size="small" />
+                  </AForm.Item>
+                )}
+
+                {customParams?.type === 'stdio' && (
+                  <>
+                    <AForm.Item
+                      label={t('settings.connection.command')}
+                      name={'command'}
+                      rules={[{ message: t('settings.rules.commandRequired'), required: true }]}
+                    >
+                      <MCPStdioCommandInput placeholder="npx, uv, python..." />
+                    </AForm.Item>
+
+                    <AForm.Item
+                      label={t('settings.connection.args')}
+                      name={'args'}
+                      rules={[{ message: t('settings.rules.argsRequired'), required: true }]}
+                    >
+                      <ArgsInput placeholder="e.g: mcp-hello-world" />
+                    </AForm.Item>
+                  </>
+                )}
+                <div className={styles.footer}>
+                  <Space>
+                    <Button
+                      htmlType="submit"
+                      icon={<SaveIcon size={12} />}
+                      loading={connectionLoading}
+                      type="primary"
+                    >
+                      {t('common:save')}
+                    </Button>
+                    <Button onClick={handleCancelEdit}>{t('common:cancel')}</Button>
+                  </Space>
+                </div>
+              </AForm>
+            </div>
+          )}
+        </Flexbox>
+
+        {/* 环境变量配置（仅 stdio 类型） */}
+        {isStdioType && (
+          <Flexbox gap={12}>
+            <div className={styles.sectionTitle}>
+              <Settings2Icon size={16} />
+              {t('settings.configuration.title')}
+            </div>
+            <Text style={{ fontSize: 12 }} type="secondary">
+              {t('settings.envConfigDescription')}
+            </Text>
+            <AForm
+              form={envForm}
+              initialValues={{ env: pluginSettings }}
+              layout="vertical"
+              onFinish={handleEnvSubmit}
+            >
+              <AForm.Item name="env" style={{ marginBottom: 0 }}>
+                <EnvEditor />
+              </AForm.Item>
+              <div className={styles.footer}>
+                <Space>
+                  <Button
+                    htmlType="submit"
+                    icon={<SaveIcon size={14} />}
+                    loading={loading}
+                    type="primary"
+                  >
+                    {t('common:save')}
+                  </Button>
+                  <Button onClick={() => envForm.resetFields()}>{t('common:reset')}</Button>
+                </Space>
+              </div>
+            </AForm>
+          </Flexbox>
+        )}
+
+        {/* HTTP 类型提示 */}
+        {!isStdioType && (
+          <div>
+            <div className={styles.sectionTitle}>
+              <Settings2Icon size={16} />
+              {t('settings.configuration.title')}
+            </div>
+            <div className={styles.emptyState}>
+              <Typography.Text type="secondary">{t('settings.httpTypeNotice')}</Typography.Text>
+            </div>
+          </div>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Settings;

package/src/features/PluginStore/McpList/Detail/index.tsx

@@ -0,0 +1,71 @@
+import { Empty } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import Deployment from '@/features/MCPPluginDetail/Deployment';
+import { DetailProvider } from '@/features/MCPPluginDetail/DetailProvider';
+import Header from '@/features/MCPPluginDetail/Header';
+import Nav from '@/features/MCPPluginDetail/Nav';
+import Overview from '@/features/MCPPluginDetail/Overview';
+import Schema from '@/features/MCPPluginDetail/Schema';
+import Score from '@/features/MCPPluginDetail/Score';
+import DetailLoading from '@/features/PluginStore/McpList/Detail/Loading';
+import { useDiscoverStore } from '@/store/discover';
+import { useToolStore } from '@/store/tool';
+import { McpNavKey } from '@/types/discover';
+
+import Settings from './Settings';
+
+interface DetailProps {
+  identifier?: string;
+}
+const Detail = memo<DetailProps>(({ identifier: defaultIdentifier }) => {
+  const [activeTab, setActiveTab] = useState(McpNavKey.Overview);
+  const { t } = useTranslation('plugin');
+
+  const theme = useTheme();
+  const [activeMCPIdentifier, isMcpListInit] = useToolStore((s) => [
+    s.activeMCPIdentifier,
+    s.isMcpListInit,
+  ]);
+
+  const identifier = defaultIdentifier ?? activeMCPIdentifier;
+
+  const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
+  const { data, isLoading } = useMcpDetail({ identifier });
+
+  if (!isMcpListInit || isLoading) return <DetailLoading />;
+
+  if (!identifier)
+    return (
+      <Center
+        height={'100%'}
+        style={{
+          background: theme.colorBgContainerSecondary,
+        }}
+        width={'100%'}
+      >
+        <Empty description={t('store.emptySelectHint')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <DetailProvider config={data}>
+      <Flexbox gap={16}>
+        <Header inModal />
+        <Nav activeTab={activeTab as McpNavKey} inModal setActiveTab={setActiveTab} />
+        <Flexbox gap={24}>
+          {activeTab === McpNavKey.Settings && <Settings identifier={identifier} />}
+          {activeTab === McpNavKey.Overview && <Overview inModal />}
+          {activeTab === McpNavKey.Deployment && <Deployment />}
+          {activeTab === McpNavKey.Schema && <Schema />}
+          {activeTab === McpNavKey.Score && <Score />}
+        </Flexbox>
+      </Flexbox>
+    </DetailProvider>
+  );
+});
+
+export default Detail;

package/src/features/PluginStore/McpList/List/Action.tsx

@@ -0,0 +1,94 @@
+import { ActionIcon, Button, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
+import { MoreVerticalIcon, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
+
+interface ActionsProps {
+  identifier: string;
+}
+
+const Actions = memo<ActionsProps>(({ identifier }) => {
+  const [installed, installing, unInstallPlugin, installMCPPlugin, cancelInstallMCPPlugin] =
+    useToolStore((s) => [
+      pluginSelectors.isPluginInstalled(identifier)(s),
+      mcpStoreSelectors.isMCPInstalling(identifier)(s),
+      s.uninstallPlugin,
+      s.installMCPPlugin,
+      s.cancelInstallMCPPlugin,
+    ]);
+
+  const { t } = useTranslation('plugin');
+  const togglePlugin = useAgentStore((s) => s.togglePlugin);
+  const { modal } = App.useApp();
+
+  return (
+    <Flexbox align={'center'} horizontal>
+      {installed ? (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                danger: true,
+                icon: <Icon icon={Trash2} />,
+                key: 'uninstall',
+                label: t('store.actions.uninstall'),
+                onClick: () => {
+                  modal.confirm({
+                    centered: true,
+                    okButtonProps: { danger: true },
+                    onOk: async () => unInstallPlugin(identifier),
+                    title: t('store.actions.confirmUninstall'),
+                    type: 'error',
+                  });
+                },
+              },
+            ],
+          }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <ActionIcon
+            icon={MoreVerticalIcon}
+            loading={installing}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          />
+        </Dropdown>
+      ) : installing ? (
+        <Button
+          onClick={async (e) => {
+            e.stopPropagation();
+            await cancelInstallMCPPlugin(identifier);
+          }}
+          variant={'filled'}
+        >
+          {t('store.actions.cancel')}
+        </Button>
+      ) : (
+        <Button
+          onClick={async (e) => {
+            e.stopPropagation();
+
+            const isSuccess = await installMCPPlugin(identifier);
+
+            if (isSuccess) {
+              await togglePlugin(identifier);
+            }
+          }}
+          variant={'filled'}
+        >
+          {t('store.actions.install')}
+        </Button>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Actions;

package/src/features/PluginStore/McpList/List/Item.tsx

@@ -0,0 +1,84 @@
+import { Block, Text } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useEffect, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors } from '@/store/tool/selectors';
+import { MCPInstallStep } from '@/store/tool/slices/mcpStore/initialState';
+import { DiscoverMcpItem } from '@/types/discover';
+import { LobeToolType } from '@/types/tool/tool';
+
+import Actions from './Action';
+
+interface PluginItemProps extends DiscoverMcpItem {
+  active?: boolean;
+  setIdentifier: (identifier?: string) => void;
+  type?: LobeToolType;
+}
+
+const Item = memo<PluginItemProps>(
+  ({ name, description, icon, setIdentifier, active, identifier }) => {
+    const installProgress = useToolStore(
+      mcpStoreSelectors.getMCPInstallProgress(identifier),
+      isEqual,
+    );
+
+    const needsConfig = installProgress?.needsConfig;
+    const needsDependencies = installProgress?.step === MCPInstallStep.DEPENDENCIES_REQUIRED;
+
+    const containerRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+      if ((!needsConfig && !needsDependencies) || !containerRef.current) return;
+
+      containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, [needsConfig, needsDependencies]);
+
+    return (
+      <Flexbox gap={0} ref={containerRef}>
+        <Block
+          align={'center'}
+          clickable
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          onClick={() => setIdentifier(identifier)}
+          paddingBlock={8}
+          paddingInline={12}
+          style={{ position: 'relative' }}
+          variant={active ? 'filled' : 'borderless'}
+        >
+          <Flexbox
+            align={'center'}
+            flex={1}
+            gap={8}
+            horizontal
+            style={{ overflow: 'hidden', position: 'relative' }}
+          >
+            <PluginAvatar avatar={icon} />
+            <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
+              <Text ellipsis strong>
+                {name}
+              </Text>
+              <Text ellipsis fontSize={12} type={'secondary'}>
+                {description}
+              </Text>
+            </Flexbox>
+          </Flexbox>
+          <Actions identifier={identifier} />
+        </Block>
+
+        {!!installProgress && (
+          <Flexbox paddingInline={12}>
+            <MCPInstallProgress identifier={identifier} />
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Item;