@lobehub/chat 1.84.0 → 1.84.2

package/src/features/PluginDevModal/MCPManifestForm/EnvEditor.tsx

@@ -0,0 +1,227 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import fastDeepEqual from 'fast-deep-equal';
+import { LucidePlus, LucideTrash } from 'lucide-react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { v4 as uuidv4 } from 'uuid';
+
+import { FormInput } from '@/components/FormInput';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+
+    width: 100%;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  input: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+  `,
+  row: css`
+    margin-block-end: 8px;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  `,
+  title: css`
+    margin-block-end: 8px;
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+interface KeyValueItem {
+  id: string;
+  key: string;
+  value: string;
+}
+
+export interface EnvEditorProps {
+  onChange?: (value: Record<string, string>) => void;
+  value?: Record<string, string>;
+}
+
+const recordToLocalList = (
+  record: Record<string, string> | undefined | null = {},
+): KeyValueItem[] =>
+  Object.entries(record || {}).map(([key, val]) => ({
+    id: uuidv4(),
+    key,
+    value: typeof val === 'string' ? val : '',
+  }));
+
+const localListToRecord = (
+  list: KeyValueItem[] | undefined | null = [],
+): Record<string, string> => {
+  const record: Record<string, string> = {};
+  const keys = new Set<string>();
+  (list || [])
+    .slice()
+    .reverse()
+    .forEach((item) => {
+      const trimmedKey = item.key.trim();
+      if (trimmedKey && !keys.has(trimmedKey)) {
+        record[trimmedKey] = typeof item.value === 'string' ? item.value : '';
+        keys.add(trimmedKey);
+      }
+    });
+  return Object.keys(record)
+    .reverse()
+    .reduce(
+      (acc, key) => {
+        acc[key] = record[key];
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+};
+
+const EnvEditor = memo<EnvEditorProps>(({ value, onChange }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['plugin', 'common']);
+  const [items, setItems] = useState<KeyValueItem[]>(() => recordToLocalList(value));
+  const prevValueRef = useRef<Record<string, string> | undefined>(undefined);
+
+  useEffect(() => {
+    const externalRecord = value || {};
+    if (!fastDeepEqual(externalRecord, prevValueRef.current)) {
+      setItems(recordToLocalList(externalRecord));
+      prevValueRef.current = externalRecord;
+    }
+  }, [value]);
+
+  const triggerChange = (newItems: KeyValueItem[]) => {
+    const keysCount: Record<string, number> = {};
+    newItems.forEach((item) => {
+      const trimmedKey = item.key.trim();
+      if (trimmedKey) {
+        keysCount[trimmedKey] = (keysCount[trimmedKey] || 0) + 1;
+      }
+    });
+    setItems(
+      newItems.map((item) => ({
+        ...item,
+      })),
+    );
+    onChange?.(localListToRecord(newItems));
+  };
+
+  const handleAdd = () => {
+    const newItems = [...items, { id: uuidv4(), key: '', value: '' }];
+    triggerChange(newItems);
+  };
+
+  const handleRemove = (id: string) => {
+    const newItems = items.filter((item) => item.id !== id);
+    triggerChange(newItems);
+  };
+
+  const handleKeyChange = (id: string, newKey: string) => {
+    const newItems = items.map((item) => (item.id === id ? { ...item, key: newKey } : item));
+    triggerChange(newItems);
+  };
+
+  const handleValueChange = (id: string, newValue: string) => {
+    const newItems = items.map((item) => (item.id === id ? { ...item, value: newValue } : item));
+    triggerChange(newItems);
+  };
+
+  const getDuplicateKeys = (currentItems: KeyValueItem[]): Set<string> => {
+    const keys = new Set<string>();
+    const duplicates = new Set<string>();
+    currentItems.forEach((item) => {
+      const trimmedKey = item.key.trim();
+      if (trimmedKey) {
+        if (keys.has(trimmedKey)) {
+          duplicates.add(trimmedKey);
+        } else {
+          keys.add(trimmedKey);
+        }
+      }
+    });
+    return duplicates;
+  };
+  const duplicateKeys = getDuplicateKeys(items);
+
+  return (
+    <div className={styles.container}>
+      <Flexbox className={styles.title} gap={8} horizontal>
+        <Flexbox flex={1}>key</Flexbox>
+        <Flexbox flex={2}>value</Flexbox>
+        <Flexbox style={{ width: 30 }} />
+      </Flexbox>
+      <Flexbox width={'100%'}>
+        {items.map((item) => {
+          const isDuplicate = item.key.trim() && duplicateKeys.has(item.key.trim());
+          return (
+            <Flexbox
+              align="flex-start"
+              className={styles.row}
+              gap={8}
+              horizontal
+              key={item.id}
+              width={'100%'}
+            >
+              <Flexbox flex={1} style={{ position: 'relative' }}>
+                <FormInput
+                  className={styles.input}
+                  onChange={(e) => handleKeyChange(item.id, e)}
+                  placeholder={'key'}
+                  status={isDuplicate ? 'error' : undefined}
+                  value={item.key}
+                  variant={'filled'}
+                />
+                {isDuplicate && (
+                  <div
+                    style={{
+                      bottom: '-16px',
+                      color: 'red',
+                      fontSize: '12px',
+                      position: 'absolute',
+                    }}
+                  >
+                    {t('dev.mcp.env.duplicateKeyError')}
+                  </div>
+                )}
+              </Flexbox>
+              <Flexbox flex={2}>
+                <FormInput
+                  className={styles.input}
+                  onChange={(value) => handleValueChange(item.id, value)}
+                  placeholder={'value'}
+                  value={item.value}
+                  variant={'filled'}
+                />
+              </Flexbox>
+              <ActionIcon
+                icon={LucideTrash}
+                onClick={() => handleRemove(item.id)}
+                size={'small'}
+                style={{ marginTop: 4 }}
+                title={t('delete', { ns: 'common' })}
+              />
+            </Flexbox>
+          );
+        })}
+        <Button
+          block
+          icon={<Icon icon={LucidePlus} />}
+          onClick={handleAdd}
+          size={'small'}
+          style={{ marginTop: items.length > 0 ? 16 : 8 }}
+          type="dashed"
+        >
+          {t('dev.mcp.env.add')}
+        </Button>
+      </Flexbox>
+    </div>
+  );
+});
+
+export default EnvEditor;

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -21,6 +21,7 @@ import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
 import ArgsInput from './ArgsInput';
+import EnvEditor from './EnvEditor';
 import MCPTypeSelect from './MCPTypeSelect';
 import { parseMcpInput } from './utils';
 
@@ -51,6 +52,7 @@ const STDIO_COMMAND_OPTIONS: {
 const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
 const STDIO_COMMAND = ['customParams', 'mcp', 'command'];
 const STDIO_ARGS = ['customParams', 'mcp', 'args'];
+const STDIO_ENV = ['customParams', 'mcp', 'env'];
 const MCP_TYPE = ['customParams', 'mcp', 'type'];
 
 const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
@@ -199,6 +201,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                   },
                 },
           ]}
+          tag={'identifier'}
         >
           <Input
             onChange={handleIdentifierChange}
@@ -215,6 +218,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               { message: t('dev.mcp.url.required'), required: true },
               { message: t('dev.mcp.url.invalid'), type: 'url' },
             ]}
+            tag={'url'}
           >
             <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
           </FormItem>
@@ -227,6 +231,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               label={t('dev.mcp.command.label')}
               name={STDIO_COMMAND}
               rules={[{ message: t('dev.mcp.command.required'), required: true }]}
+              tag={'command'}
             >
               <AutoComplete
                 options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
@@ -246,9 +251,18 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               label={t('dev.mcp.args.label')}
               name={STDIO_ARGS}
               rules={[{ message: t('dev.mcp.args.required'), required: true }]}
+              tag={'args'}
             >
               <ArgsInput placeholder={t('dev.mcp.args.placeholder')} />
             </FormItem>
+            <FormItem
+              extra={t('dev.mcp.env.desc')}
+              label={t('dev.mcp.env.label')}
+              name={STDIO_ENV}
+              tag={'env'}
+            >
+              <EnvEditor />
+            </FormItem>
           </>
         )}
         <FormItem colon={false} label={t('dev.mcp.testConnectionTip')} layout={'horizontal'}>

package/src/locales/default/plugin.ts

@@ -48,7 +48,7 @@ export default {
     },
     mcp: {
       args: {
-        desc: '传递给 STDIO 命令的参数列表，一般在这里输入 MCP 服务器名称',
+        desc: '传递给执行命令的参数列表，一般在这里输入 MCP 服务器名称，或启动脚本路径',
         label: '命令参数',
         placeholder: '例如：mcp-hello-world',
         required: '请输入启动参数',
@@ -63,6 +63,15 @@ export default {
         desc: '输入你的 MCP Streamable HTTP Server 的地址',
         label: 'MCP Endpoint URL',
       },
+      env: {
+        add: '新增一行',
+        desc: '输入你的 MCP Server 所需要的环境变量',
+        duplicateKeyError: '字段键必须唯一',
+        formValidationFailed: '表单验证失败，请检查参数格式',
+        keyRequired: '字段键不能为空',
+        label: 'MCP Server 环境变量',
+        stringifyError: '无法序列化参数，请检查参数格式',
+      },
       identifier: {
         desc: '为你的 MCP 插件指定一个名称，需要使用英文字符',
         invalid: '标识符只能包含字母、数字、连字符和下划线',

package/src/server/globalConfig/index.ts

@@ -33,6 +33,9 @@ export const getServerGlobalConfig = async () => {
         enabledKey: 'ENABLED_GITEE_AI',
         modelListKey: 'GITEE_AI_MODEL_LIST',
       },
+      lmstudio: {
+        fetchOnClient: isDesktop ? false : undefined,
+      },
       /* ↓ cloud slot ↓ */
 
       /* ↑ cloud slot ↑ */