Feat: Place the new mcp button at the end of the line. #10427 (#11170)

### What problem does this PR solve?

Feat: Place the new mcp button at the end of the line. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/de.ts

@@ -1229,7 +1229,6 @@ export default {
       },
       addVariable: 'Variable hinzufügen',
       variableSettings: 'Variableneinstellungen',
-      globalVariables: 'Globale Variablen',
       systemPrompt: 'System-Prompt',
       addCategory: 'Kategorie hinzufügen',
       categoryName: 'Kategoriename',

web/src/locales/en.ts

@@ -1064,10 +1064,10 @@ Example: general/v2/`,
       exceptionMethod: 'Exception method',
       maxRounds: 'Max reflection rounds',
       delayEfterError: 'Delay after error',
-      maxRetries: 'Max reflection rounds',
+      maxRetries: 'Max retry rounds',
       advancedSettings: 'Advanced Settings',
       addTools: 'Add Tools',
-      sysPromptDefultValue: `
+      sysPromptDefaultValue: `
       <role>
         You are a helpful assistant, an AI assistant specialized in problem-solving for the user.
         If a specific domain is provided, adapt your expertise to that domain; otherwise, operate as a generalist.
@@ -1524,7 +1524,6 @@ This delimiter is used to split the input text into several text pieces echo of
       },
       addVariable: 'Add variable',
       variableSettings: 'Variable settings',
-      globalVariables: 'Global variables',
       systemPrompt: 'System prompt',
       userPrompt: 'User prompt',
       addCategory: 'Add category',

web/src/locales/fr.ts

@@ -1154,7 +1154,6 @@ export default {
       },
       addVariable: 'Ajouter une variable',
       variableSettings: 'Paramètres des variables',
-      globalVariables: 'Variables globales',
       systemPrompt: 'Invite système',
       addCategory: 'Ajouter une catégorie',
       categoryName: 'Nom de la catégorie',

web/src/locales/pt-br.ts

@@ -1131,7 +1131,6 @@ export default {
       },
       addVariable: 'Adicionar variável',
       variableSettings: 'Configurações da variável',
-      globalVariables: 'Variáveis globais',
       systemPrompt: 'Prompt do sistema',
       addCategory: 'Adicionar categoria',
       categoryName: 'Nome da categoria',

web/src/locales/ru.ts

@@ -937,7 +937,7 @@ export default {
       maxRetries: 'Макс. попыток',
       advancedSettings: 'Расширенные настройки',
       addTools: 'Добавить инструменты',
-      sysPromptDefultValue: `
+      sysPromptDefaultValue: `
       <role>
         Вы полезный помощник, ИИ-ассистент, специализирующийся на решении проблем пользователя.
         Если указана конкретная область, адаптируйте вашу экспертизу к этой области; в противном случае действуйте как универсальный специалист.
@@ -1385,7 +1385,6 @@ export default {
       },
       addVariable: 'Добавить переменную',
       variableSettings: 'Настройки переменных',
-      globalVariables: 'Глобальные переменные',
       systemPrompt: 'Системный промпт',
       userPrompt: 'Пользовательский промпт',
       addCategory: 'Добавить категорию',

web/src/locales/zh.ts

@@ -759,7 +759,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       confirmPasswordMessage: '请确认新密码',
       confirmPasswordNonMatchMessage: '您输入的新密码不匹配！',
       cancel: '取消',
-      addedModels: '添加了的模型',
+      addedModels: '已添加的模型',
       modelsToBeAdded: '待添加的模型',
       addTheModel: '添加',
       apiKey: 'API-Key',
@@ -1011,10 +1011,10 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       exceptionMethod: '异常处理方法',
       maxRounds: '最大反思轮数',
       delayEfterError: '错误后延迟',
-      maxRetries: '最大反思轮数',
+      maxRetries: '最大重试轮数',
       advancedSettings: '高级设置',
       addTools: '添加工具',
-      sysPromptDefultValue: `
+      sysPromptDefaultValue: `
 <role>
   你是一名乐于助人的助手，一名专注于为用户解决问题的 AI 助手。
   如果用户指定了特定领域，你需要在该领域展现专业性；如果没有，则以通用助手的方式工作。

web/src/pages/agent/constant/index.tsx

@@ -446,7 +446,7 @@ export const initialAgentValues = {
   ...initialLlmBaseValues,
   description: '',
   user_prompt: '',
-  sys_prompt: t('flow.sysPromptDefultValue'),
+  sys_prompt: t('flow.sysPromptDefaultValue'),
   prompts: [{ role: PromptRole.User, content: `{${AgentGlobals.SysQuery}}` }],
   message_history_window_size: 12,
   max_retries: 3,

web/src/pages/agent/form/agent-form/index.tsx

@@ -212,7 +212,7 @@ function AgentForm({ node }: INextOperatorForm) {
                   <FormItem className="flex-1">
                     <FormLabel>{t('flow.maxRetries')}</FormLabel>
                     <FormControl>
-                      <NumberInput {...field} max={8}></NumberInput>
+                      <NumberInput {...field} max={8} min={0}></NumberInput>
                     </FormControl>
                   </FormItem>
                 )}
@@ -237,7 +237,7 @@ function AgentForm({ node }: INextOperatorForm) {
                     <FormItem className="flex-1">
                       <FormLabel>{t('flow.maxRounds')}</FormLabel>
                       <FormControl>
-                        <NumberInput {...field}></NumberInput>
+                        <NumberInput {...field} min={0}></NumberInput>
                       </FormControl>
                     </FormItem>
                   )}

web/src/pages/agent/gobal-variable-sheet/index.tsx

@@ -5,7 +5,7 @@ import {
   FormFieldConfig,
   FormFieldType,
 } from '@/components/dynamic-form';
-import { Button } from '@/components/ui/button';
+import { BlockButton, Button } from '@/components/ui/button';
 import { Modal } from '@/components/ui/modal/modal';
 import {
   Sheet,
@@ -142,13 +142,12 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
         >
           <SheetHeader className="p-5">
             <SheetTitle className="flex items-center gap-2.5">
-              {t('flow.gobalVariable')}
+              {t('flow.conversationVariable')}
             </SheetTitle>
           </SheetHeader>
 
           <div className="px-5 pb-5">
-            <Button
+            <BlockButton
-              variant={'secondary'}
               onClick={() => {
                 setFields(GobalFormFields);
                 setDefaultValues(GobalVariableFormDefaultValues);
@@ -156,7 +155,7 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
               }}
             >
               {t('flow.add')}
-            </Button>
+            </BlockButton>
           </div>
 
           <div className="flex flex-col gap-2 px-5 ">
@@ -203,7 +202,7 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
           </div>
         </SheetContent>
         <Modal
-          title={t('flow.add') + t('flow.gobalVariable')}
+          title={t('flow.add') + t('flow.conversationVariable')}
           open={visible}
           onCancel={hideAddModal}
           showfooter={false}

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -6,7 +6,7 @@ import { DefaultOptionType } from 'antd/es/select';
 import { t } from 'i18next';
 import { isEmpty, toLower } from 'lodash';
 import get from 'lodash/get';
-import { MessageCircleCode } from 'lucide-react';
+import { MessageSquareCode } from 'lucide-react';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   AgentDialogueMode,
@@ -162,7 +162,7 @@ export function useBuildConversationVariableOptions() {
           return {
             label: keyWithPrefix,
             parentLabel: <span>{t('flow.conversationVariable')}</span>,
-            icon: <MessageCircleCode className="size-3" />,
+            icon: <MessageSquareCode className="size-3" />,
             value: keyWithPrefix,
             type: value.type,
           };

web/src/pages/agent/index.tsx

@@ -28,6 +28,7 @@ import {
   History,
   LaptopMinimalCheck,
   Logs,
+  MessageSquareCode,
   ScreenShare,
   Settings,
   Upload,
@@ -218,7 +219,7 @@ export default function Agent() {
             onClick={() => showGobalParamSheet()}
             loading={loading}
           >
-            {t('flow.conversationVariable')}
+            <MessageSquareCode /> {t('flow.conversationVariable')}
           </ButtonLoading>
           <Button variant={'secondary'} onClick={handleButtonRunClick}>
             <CirclePlay />

web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx

@@ -124,7 +124,7 @@ export function EditMcpDialog({
           form={form}
           setFieldChanged={setFieldChanged}
         ></EditMcpForm>
-        <Card>
+        <Card className="bg-transparent">
           <CardContent className="p-3">
             <Collapse
               title={

web/src/pages/user-setting/mcp/index.tsx

@@ -59,7 +59,7 @@ export default function McpServer() {
     <ProfileSettingWrapperCard
       header={
         <>
-          <div className="text-text-primary text-2xl font-medium">
+          <div className="text-text-primary text-2xl font-semibold">
             {t('mcp.mcpServers')}
           </div>
           <section className="flex items-center justify-between">
@@ -80,13 +80,13 @@ export default function McpServer() {
                 )}
                 {t(`mcp.${isSelectionMode ? 'exitBulkManage' : 'bulkManage'}`)}
               </Button>
-              <Button variant={'secondary'} onClick={showEditModal('')}>
+              <Button variant={'secondary'} onClick={showImportModal}>
-                <Plus className="size-3.5" /> {t('mcp.addMCP')}
-              </Button>
-              <Button onClick={showImportModal}>
                 <Download className="size-3.5" />
                 {t('mcp.import')}
               </Button>
+              <Button onClick={showEditModal('')}>
+                <Plus className="size-3.5" /> {t('mcp.addMCP')}
+              </Button>
             </div>
           </section>
         </>