@lobehub/chat 1.96.20 → 1.97.0

package/src/features/PluginStore/InstalledList/index.tsx

@@ -0,0 +1,85 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { LobeToolType } from '@/types/tool/tool';
+
+import Detail from './Detail';
+import List from './List';
+
+const PluginList = memo<{ keywords?: string }>(({ keywords }) => {
+  const { t } = useTranslation('plugin');
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [type, setType] = useState<LobeToolType>();
+  const [runtimeType, setRuntimeType] = useState<'mcp' | 'default'>();
+  const theme = useTheme();
+
+  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
+  const isEmpty = useToolStore((s) => pluginSelectors.installedPluginMetaList(s).length === 0);
+
+  if (isEmpty)
+    return (
+      <Center height={'75vh'} paddingBlock={40}>
+        <Empty description={t('store.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <Flexbox
+      height={'75vh'}
+      horizontal
+      style={{
+        borderTop: `1px solid ${theme.colorBorderSecondary}`,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      <DraggablePanel maxWidth={1024} minWidth={420} placement={'left'}>
+        <List
+          identifier={identifier}
+          keywords={keywords}
+          setIdentifier={({ identifier, type, runtimeType }) => {
+            useToolStore.setState({ activePluginIdentifier: identifier });
+            setType(type);
+            setRuntimeType(runtimeType);
+            ref?.current?.scrollTo({ top: 0 });
+          }}
+        />
+      </DraggablePanel>
+      {identifier ? (
+        <Flexbox
+          height={'100%'}
+          padding={16}
+          ref={ref}
+          style={{
+            background: theme.colorBgContainerSecondary,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+          }}
+          width={'100%'}
+        >
+          <Detail identifier={identifier} runtimeType={runtimeType} type={type} />
+        </Flexbox>
+      ) : (
+        <Center
+          height={'100%'}
+          style={{
+            background: theme.colorBgContainerSecondary,
+          }}
+          width={'100%'}
+        >
+          <Empty description={t('store.emptySelectHint')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </Center>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PluginList;

package/src/features/PluginStore/Loading.tsx

@@ -4,8 +4,8 @@ import { Flexbox } from 'react-layout-kit';
 
 const Loading = memo(() => {
   return (
-    <Flexbox>
-      <Skeleton paragraph={{ rows: 8 }} />
+    <Flexbox padding={16}>
+      <Skeleton active paragraph={{ rows: 8 }} title={false} />
     </Flexbox>
   );
 });

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

@@ -0,0 +1,44 @@
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const DetailsLoading = memo(() => {
+  const theme = useTheme();
+  return (
+    <Flexbox gap={24}>
+      <Flexbox gap={12}>
+        <Flexbox align={'center'} gap={16} horizontal width={'100%'}>
+          <Skeleton.Avatar active size={64} />
+          <Skeleton.Button active style={{ height: 36, width: 200 }} />
+        </Flexbox>
+        <Skeleton.Button active size={'small'} style={{ width: 200 }} />
+      </Flexbox>
+      <Flexbox
+        gap={12}
+        height={54}
+        horizontal
+        style={{
+          borderBottom: `1px solid ${theme.colorBorder}`,
+        }}
+      >
+        <Skeleton.Button />
+        <Skeleton.Button />
+      </Flexbox>
+      <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>
+  );
+});
+
+export default DetailsLoading;

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;