Feat: Display MCP multiple selection bar #3221 (#8737)

### What problem does this PR solve?

Feat: Display MCP multiple selection bar #3221

### Type of change


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

web/src/pages/agent/chat/hooks.ts

@@ -1,3 +1,4 @@
+import sonnerMessage from '@/components/ui/message';
 import { MessageType } from '@/constants/chat';
 import {
   useHandleMessageInputChange,
@@ -14,7 +15,6 @@ import {
 import { Message } from '@/interfaces/database/chat';
 import i18n from '@/locales/config';
 import api from '@/utils/api';
-import { message } from 'antd';
 import { get } from 'lodash';
 import trim from 'lodash/trim';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
@@ -28,8 +28,6 @@ import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { receiveMessageError } from '../utils';
 
-const antMessage = message;
-
 export const useSelectNextMessages = () => {
   const { data: flowDetail, loading } = useFetchAgent();
   const reference = flowDetail.dsl.retrieval;
@@ -139,7 +137,7 @@ export const useSendNextMessage = () => {
       const res = await send(params);
 
       if (receiveMessageError(res)) {
-        antMessage.error(res?.data?.message);
+        sonnerMessage.error(res?.data?.message);
 
         // cancel loading
         setValue(message.content);

web/src/pages/agent/constant.tsx

@@ -465,7 +465,7 @@ export const initialCategorizeValues = {
 };
 
 export const initialMessageValues = {
-  messages: [],
+  content: [''],
 };
 
 export const initialKeywordExtractValues = {

web/src/pages/agent/form/message-form/use-values.ts

@@ -1,18 +1,15 @@
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { isEmpty } from 'lodash';
 import { useMemo } from 'react';
+import { initialMessageValues } from '../../constant';
 import { convertToObjectArray } from '../../utils';
 
-const defaultValues = {
-  content: [],
-};
-
 export function useValues(node?: RAGFlowNodeType) {
   const values = useMemo(() => {
     const formData = node?.data?.form;
 
     if (isEmpty(formData)) {
-      return defaultValues;
+      return initialMessageValues;
     }
 
     return {