Merge branch 'main' of https://github.com/arc53/DocsGPT

frontend/src/agents/NewAgent.tsx

@@ -45,6 +45,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     description: '',
     image: '',
     source: '',
+    sources: [],
     chunks: '',
     retriever: '',
     prompt_id: 'default',
@@ -150,7 +151,41 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     const formData = new FormData();
     formData.append('name', agent.name);
     formData.append('description', agent.description);
-    formData.append('source', agent.source);
+
+    if (selectedSourceIds.size > 1) {
+      const sourcesArray = Array.from(selectedSourceIds)
+        .map((id) => {
+          const sourceDoc = sourceDocs?.find(
+            (source) =>
+              source.id === id || source.retriever === id || source.name === id,
+          );
+          if (sourceDoc?.name === 'Default' && !sourceDoc?.id) {
+            return 'default';
+          }
+          return sourceDoc?.id || id;
+        })
+        .filter(Boolean);
+      formData.append('sources', JSON.stringify(sourcesArray));
+      formData.append('source', '');
+    } else if (selectedSourceIds.size === 1) {
+      const singleSourceId = Array.from(selectedSourceIds)[0];
+      const sourceDoc = sourceDocs?.find(
+        (source) =>
+          source.id === singleSourceId ||
+          source.retriever === singleSourceId ||
+          source.name === singleSourceId,
+      );
+      let finalSourceId;
+      if (sourceDoc?.name === 'Default' && !sourceDoc?.id)
+        finalSourceId = 'default';
+      else finalSourceId = sourceDoc?.id || singleSourceId;
+      formData.append('source', String(finalSourceId));
+      formData.append('sources', JSON.stringify([]));
+    } else {
+      formData.append('source', '');
+      formData.append('sources', JSON.stringify([]));
+    }
+
     formData.append('chunks', agent.chunks);
     formData.append('retriever', agent.retriever);
     formData.append('prompt_id', agent.prompt_id);
@@ -196,7 +231,41 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     const formData = new FormData();
     formData.append('name', agent.name);
     formData.append('description', agent.description);
-    formData.append('source', agent.source);
+
+    if (selectedSourceIds.size > 1) {
+      const sourcesArray = Array.from(selectedSourceIds)
+        .map((id) => {
+          const sourceDoc = sourceDocs?.find(
+            (source) =>
+              source.id === id || source.retriever === id || source.name === id,
+          );
+          if (sourceDoc?.name === 'Default' && !sourceDoc?.id) {
+            return 'default';
+          }
+          return sourceDoc?.id || id;
+        })
+        .filter(Boolean);
+      formData.append('sources', JSON.stringify(sourcesArray));
+      formData.append('source', '');
+    } else if (selectedSourceIds.size === 1) {
+      const singleSourceId = Array.from(selectedSourceIds)[0];
+      const sourceDoc = sourceDocs?.find(
+        (source) =>
+          source.id === singleSourceId ||
+          source.retriever === singleSourceId ||
+          source.name === singleSourceId,
+      );
+      let finalSourceId;
+      if (sourceDoc?.name === 'Default' && !sourceDoc?.id)
+        finalSourceId = 'default';
+      else finalSourceId = sourceDoc?.id || singleSourceId;
+      formData.append('source', String(finalSourceId));
+      formData.append('sources', JSON.stringify([]));
+    } else {
+      formData.append('source', '');
+      formData.append('sources', JSON.stringify([]));
+    }
+
     formData.append('chunks', agent.chunks);
     formData.append('retriever', agent.retriever);
     formData.append('prompt_id', agent.prompt_id);
@@ -293,9 +362,33 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           throw new Error('Failed to fetch agent');
         }
         const data = await response.json();
-        if (data.source) setSelectedSourceIds(new Set([data.source]));
-        else if (data.retriever)
+
+        if (data.sources && data.sources.length > 0) {
+          const mappedSources = data.sources.map((sourceId: string) => {
+            if (sourceId === 'default') {
+              const defaultSource = sourceDocs?.find(
+                (source) => source.name === 'Default',
+              );
+              return defaultSource?.retriever || 'classic';
+            }
+            return sourceId;
+          });
+          setSelectedSourceIds(new Set(mappedSources));
+        } else if (data.source) {
+          if (data.source === 'default') {
+            const defaultSource = sourceDocs?.find(
+              (source) => source.name === 'Default',
+            );
+            setSelectedSourceIds(
+              new Set([defaultSource?.retriever || 'classic']),
+            );
+          } else {
+            setSelectedSourceIds(new Set([data.source]));
+          }
+        } else if (data.retriever) {
           setSelectedSourceIds(new Set([data.retriever]));
+        }
+
         if (data.tools) setSelectedToolIds(new Set(data.tools));
         if (data.status === 'draft') setEffectiveMode('draft');
         if (data.json_schema) {
@@ -311,25 +404,57 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   }, [agentId, mode, token]);
 
   useEffect(() => {
-    const selectedSource = Array.from(selectedSourceIds).map((id) =>
-      sourceDocs?.find(
-        (source) =>
-          source.id === id || source.retriever === id || source.name === id,
-      ),
-    );
-    if (selectedSource[0]?.model === embeddingsName) {
-      if (selectedSource[0] && 'id' in selectedSource[0]) {
+    const selectedSources = Array.from(selectedSourceIds)
+      .map((id) =>
+        sourceDocs?.find(
+          (source) =>
+            source.id === id || source.retriever === id || source.name === id,
+        ),
+      )
+      .filter(Boolean);
+
+    if (selectedSources.length > 0) {
+      // Handle multiple sources
+      if (selectedSources.length > 1) {
+        // Multiple sources selected - store in sources array
+        const sourceIds = selectedSources
+          .map((source) => source?.id)
+          .filter((id): id is string => Boolean(id));
         setAgent((prev) => ({
           ...prev,
-          source: selectedSource[0]?.id || 'default',
+          sources: sourceIds,
+          source: '', // Clear single source for multiple sources
           retriever: '',
         }));
-      } else
-        setAgent((prev) => ({
-          ...prev,
-          source: '',
-          retriever: selectedSource[0]?.retriever || 'classic',
-        }));
+      } else {
+        // Single source selected - maintain backward compatibility
+        const selectedSource = selectedSources[0];
+        if (selectedSource?.model === embeddingsName) {
+          if (selectedSource && 'id' in selectedSource) {
+            setAgent((prev) => ({
+              ...prev,
+              source: selectedSource?.id || 'default',
+              sources: [], // Clear sources array for single source
+              retriever: '',
+            }));
+          } else {
+            setAgent((prev) => ({
+              ...prev,
+              source: '',
+              sources: [], // Clear sources array
+              retriever: selectedSource?.retriever || 'classic',
+            }));
+          }
+        }
+      }
+    } else {
+      // No sources selected
+      setAgent((prev) => ({
+        ...prev,
+        source: '',
+        sources: [],
+        retriever: '',
+      }));
     }
   }, [selectedSourceIds]);
 
@@ -510,7 +635,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         )
                         .filter(Boolean)
                         .join(', ')
-                    : 'Select source'}
+                    : 'Select sources'}
                 </button>
                 <MultiSelectPopup
                   isOpen={isSourcePopupOpen}
@@ -526,12 +651,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   selectedIds={selectedSourceIds}
                   onSelectionChange={(newSelectedIds: Set<string | number>) => {
                     setSelectedSourceIds(newSelectedIds);
-                    setIsSourcePopupOpen(false);
                   }}
-                  title="Select Source"
+                  title="Select Sources"
                   searchPlaceholder="Search sources..."
-                  noOptionsMessage="No source available"
-                  singleSelect={true}
+                  noOptionsMessage="No sources available"
                 />
               </div>
               <div className="mt-3">

frontend/src/agents/types/index.ts

@@ -10,6 +10,7 @@ export type Agent = {
   description: string;
   image: string;
   source: string;
+  sources?: string[];
   chunks: string;
   retriever: string;
   prompt_id: string;

frontend/src/api/endpoints.ts

@@ -57,6 +57,8 @@ const endpoints = {
     DIRECTORY_STRUCTURE: (docId: string) =>
       `/api/directory_structure?id=${docId}`,
     MANAGE_SOURCE_FILES: '/api/manage_source_files',
+    MCP_TEST_CONNECTION: '/api/mcp_server/test',
+    MCP_SAVE_SERVER: '/api/mcp_server/save',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/userService.ts

@@ -90,7 +90,10 @@ const userService = {
     path?: string,
     search?: string,
   ): Promise<any> =>
-    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path, search), token),
+    apiClient.get(
+      endpoints.USER.GET_CHUNKS(docId, page, perPage, path, search),
+      token,
+    ),
   addChunk: (data: any, token: string | null): Promise<any> =>
     apiClient.post(endpoints.USER.ADD_CHUNK, data, token),
   deleteChunk: (
@@ -105,16 +108,24 @@ const userService = {
     apiClient.get(endpoints.USER.DIRECTORY_STRUCTURE(docId), token),
   manageSourceFiles: (data: FormData, token: string | null): Promise<any> =>
     apiClient.postFormData(endpoints.USER.MANAGE_SOURCE_FILES, data, token),
-  syncConnector: (docId: string, provider: string, token: string | null): Promise<any> => {
+  testMCPConnection: (data: any, token: string | null): Promise<any> =>
+    apiClient.post(endpoints.USER.MCP_TEST_CONNECTION, data, token),
+  saveMCPServer: (data: any, token: string | null): Promise<any> =>
+    apiClient.post(endpoints.USER.MCP_SAVE_SERVER, data, token),
+  syncConnector: (
+    docId: string,
+    provider: string,
+    token: string | null,
+  ): Promise<any> => {
     const sessionToken = getSessionToken(provider);
     return apiClient.post(
       endpoints.USER.SYNC_CONNECTOR,
       {
         source_id: docId,
         session_token: sessionToken,
-        provider: provider
+        provider: provider,
       },
-      token
+      token,
     );
   },
 };

frontend/src/components/ConnectorAuth.tsx

@@ -16,7 +16,12 @@ const providerLabel = (provider: string) => {
   return map[provider] || provider.replace(/_/g, ' ');
 };
 
-const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onError, label }) => {
+const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
+  provider,
+  onSuccess,
+  onError,
+  label,
+}) => {
   const token = useSelector(selectToken);
   const completedRef = useRef(false);
   const intervalRef = useRef<number | null>(null);
@@ -31,8 +36,12 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onEr
 
   const handleAuthMessage = (event: MessageEvent) => {
     const successGeneric = event.data?.type === 'connector_auth_success';
-    const successProvider = event.data?.type === `${provider}_auth_success` || event.data?.type === 'google_drive_auth_success';
-    const errorProvider = event.data?.type === `${provider}_auth_error` || event.data?.type === 'google_drive_auth_error';
+    const successProvider =
+      event.data?.type === `${provider}_auth_success` ||
+      event.data?.type === 'google_drive_auth_success';
+    const errorProvider =
+      event.data?.type === `${provider}_auth_error` ||
+      event.data?.type === 'google_drive_auth_error';
 
     if (successGeneric || successProvider) {
       completedRef.current = true;
@@ -54,12 +63,17 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onEr
       cleanup();
 
       const apiHost = import.meta.env.VITE_API_HOST;
-      const authResponse = await fetch(`${apiHost}/api/connectors/auth?provider=${provider}`, {
-        headers: { Authorization: `Bearer ${token}` },
-      });
+      const authResponse = await fetch(
+        `${apiHost}/api/connectors/auth?provider=${provider}`,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        },
+      );
 
       if (!authResponse.ok) {
-        throw new Error(`Failed to get authorization URL: ${authResponse.status}`);
+        throw new Error(
+          `Failed to get authorization URL: ${authResponse.status}`,
+        );
       }
 
       const authData = await authResponse.json();
@@ -70,10 +84,12 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onEr
       const authWindow = window.open(
         authData.authorization_url,
         `${provider}-auth`,
-        'width=500,height=600,scrollbars=yes,resizable=yes'
+        'width=500,height=600,scrollbars=yes,resizable=yes',
       );
       if (!authWindow) {
-        throw new Error('Failed to open authentication window. Please allow popups.');
+        throw new Error(
+          'Failed to open authentication window. Please allow popups.',
+        );
       }
 
       window.addEventListener('message', handleAuthMessage as any);
@@ -98,10 +114,13 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onEr
   return (
     <button
       onClick={handleAuth}
-      className="w-full flex items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-3 text-white hover:bg-blue-600 transition-colors"
+      className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-3 text-white transition-colors hover:bg-blue-600"
     >
       <svg className="h-5 w-5" viewBox="0 0 24 24">
-        <path fill="currentColor" d="M6.28 3l5.72 10H24l-5.72-10H6.28zm11.44 0L12 13l5.72 10H24L18.28 3h-.56zM0 13l5.72 10h5.72L5.72 13H0z"/>
+        <path
+          fill="currentColor"
+          d="M6.28 3l5.72 10H24l-5.72-10H6.28zm11.44 0L12 13l5.72 10H24L18.28 3h-.56zM0 13l5.72 10h5.72L5.72 13H0z"
+        />
       </svg>
       {buttonLabel}
     </button>
@@ -109,4 +128,3 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({ provider, onSuccess, onEr
 };
 
 export default ConnectorAuth;
-

frontend/src/components/ConnectorTreeComponent.tsx

@@ -240,8 +240,6 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
     return current;
   };
 
-
-
   const getMenuRef = (id: string) => {
     if (!menuRefs.current[id]) {
       menuRefs.current[id] = React.createRef();

frontend/src/components/FileTreeComponent.tsx

@@ -136,8 +136,6 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     }
   }, [docId, token]);
 
-  
-
   const navigateToDirectory = (dirName: string) => {
     setCurrentPath((prev) => [...prev, dirName]);
   };
@@ -445,18 +443,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-0 min-h-[38px] flex flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
+      <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
         {/* Left side with path navigation */}
         <div className="flex w-full items-center sm:w-auto">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] font-medium"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleBackNavigation}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
           <div className="flex flex-wrap items-center">
-            <span className="text-[#7D54D1] font-semibold break-words">
+            <span className="font-semibold break-words text-[#7D54D1]">
               {sourceName}
             </span>
             {currentPath.length > 0 && (
@@ -487,8 +485,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
 
-        <div className="flex relative flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0">
-
+        <div className="relative mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:mt-0 sm:w-auto">
           {processingRef.current && (
             <div className="text-sm text-gray-500">
               {currentOpRef.current === 'add'
@@ -497,13 +494,13 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             </div>
           )}
 
-            {renderFileSearch()}
+          {renderFileSearch()}
 
           {/* Add file button */}
           {!processingRef.current && (
             <button
               onClick={handleAddFile}
-              className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-nowrap text-white font-medium"
+              className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap text-white"
               title={t('settings.sources.addFile')}
             >
               {t('settings.sources.addFile')}
@@ -609,7 +606,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -664,7 +661,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -756,14 +753,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             }
           }}
           placeholder={t('settings.sources.searchFiles')}
-          className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
-              ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} 
-              bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
+          className={`h-[38px] w-full border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
         />
 
         {searchQuery && (
-          <div className="absolute top-full left-0 right-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023] transition-all duration-200">
-            <div className="max-h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden overscroll-contain">
+          <div className="absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg transition-all duration-200 dark:border-[#6A6A6A] dark:bg-[#1F2023]">
+            <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
               {searchResults.length === 0 ? (
                 <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
                   {t('settings.sources.noResults')}
@@ -774,10 +769,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                     key={index}
                     onClick={() => handleSearchSelect(result)}
                     title={result.path}
-                    className={`flex min-w-0 cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1
+                    className={`flex min-w-0 cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                      index !== searchResults.length - 1
                         ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
                         : ''
-                      }`}
+                    }`}
                   >
                     <img
                       src={result.isFile ? FileIcon : FolderIcon}
@@ -788,7 +784,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                       }
                       className="mr-2 h-4 w-4 flex-shrink-0"
                     />
-                    <span className="text-sm dark:text-[#E0E0E0] truncate flex-1">
+                    <span className="flex-1 truncate text-sm dark:text-[#E0E0E0]">
                       {result.path.split('/').pop() || result.path}
                     </span>
                   </div>
@@ -870,7 +866,9 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         message={
           itemToDelete?.isFile
             ? t('settings.sources.confirmDelete')
-            : t('settings.sources.deleteDirectoryWarning', { name: itemToDelete?.name })
+            : t('settings.sources.deleteDirectoryWarning', {
+                name: itemToDelete?.name,
+              })
         }
         modalState={deleteModalState}
         setModalState={setDeleteModalState}

frontend/src/components/MessageInput.tsx

@@ -368,8 +368,8 @@ export default function MessageInput({
                 className="xs:px-3 xs:py-1.5 dark:border-purple-taupe flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 sm:max-w-[150px] dark:hover:bg-[#2C2E3C]"
                 onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
                 title={
-                  selectedDocs
-                    ? selectedDocs.name
+                  selectedDocs && selectedDocs.length > 0
+                    ? selectedDocs.map((doc) => doc.name).join(', ')
                     : t('conversation.sources.title')
                 }
               >
@@ -379,8 +379,10 @@ export default function MessageInput({
                   className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
                 />
                 <span className="xs:text-[12px] dark:text-bright-gray truncate overflow-hidden text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
-                  {selectedDocs
-                    ? selectedDocs.name
+                  {selectedDocs && selectedDocs.length > 0
+                    ? selectedDocs.length === 1
+                      ? selectedDocs[0].name
+                      : `${selectedDocs.length} sources selected`
                     : t('conversation.sources.title')}
                 </span>
                 {!isTouch && (

frontend/src/components/SourcesPopup.tsx

@@ -17,7 +17,7 @@ type SourcesPopupProps = {
   isOpen: boolean;
   onClose: () => void;
   anchorRef: React.RefObject<HTMLButtonElement | null>;
-  handlePostDocumentSelect: (doc: Doc | null) => void;
+  handlePostDocumentSelect: (doc: Doc[] | null) => void;
   setUploadModalState: React.Dispatch<React.SetStateAction<ActiveState>>;
 };
 
@@ -149,9 +149,13 @@ export default function SourcesPopup({
                 if (option.model === embeddingsName) {
                   const isSelected =
                     selectedDocs &&
-                    (option.id
-                      ? selectedDocs.id === option.id
-                      : selectedDocs.date === option.date);
+                    Array.isArray(selectedDocs) &&
+                    selectedDocs.length > 0 &&
+                    selectedDocs.some((doc) =>
+                      option.id
+                        ? doc.id === option.id
+                        : doc.date === option.date,
+                    );
 
                   return (
                     <div
@@ -159,11 +163,29 @@ export default function SourcesPopup({
                       className="border-opacity-80 dark:border-dim-gray flex cursor-pointer items-center border-b border-[#D9D9D9] p-3 transition-colors hover:bg-gray-100 dark:text-[14px] dark:hover:bg-[#2C2E3C]"
                       onClick={() => {
                         if (isSelected) {
-                          dispatch(setSelectedDocs(null));
-                          handlePostDocumentSelect(null);
+                          const updatedDocs =
+                            selectedDocs && Array.isArray(selectedDocs)
+                              ? selectedDocs.filter((doc) =>
+                                  option.id
+                                    ? doc.id !== option.id
+                                    : doc.date !== option.date,
+                                )
+                              : [];
+                          dispatch(
+                            setSelectedDocs(
+                              updatedDocs.length > 0 ? updatedDocs : null,
+                            ),
+                          );
+                          handlePostDocumentSelect(
+                            updatedDocs.length > 0 ? updatedDocs : null,
+                          );
                         } else {
-                          dispatch(setSelectedDocs(option));
-                          handlePostDocumentSelect(option);
+                          const updatedDocs =
+                            selectedDocs && Array.isArray(selectedDocs)
+                              ? [...selectedDocs, option]
+                              : [option];
+                          dispatch(setSelectedDocs(updatedDocs));
+                          handlePostDocumentSelect(updatedDocs);
                         }
                       }}
                     >

frontend/src/conversation/ConversationBubble.tsx

@@ -1,6 +1,6 @@
 import 'katex/dist/katex.min.css';
 
-import { forwardRef, Fragment, useRef, useState, useEffect } from 'react';
+import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
@@ -12,12 +12,13 @@ import {
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import DocumentationDark from '../assets/documentation-dark.svg';
+
 import ChevronDown from '../assets/chevron-down.svg';
 import Cloud from '../assets/cloud.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
 import Document from '../assets/document.svg';
+import DocumentationDark from '../assets/documentation-dark.svg';
 import Edit from '../assets/edit.svg';
 import Like from '../assets/like.svg?react';
 import Link from '../assets/link.svg';
@@ -761,7 +762,11 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         Response
                       </span>{' '}
                       <CopyButton
-                        textToCopy={JSON.stringify(toolCall.result, null, 2)}
+                        textToCopy={
+                          toolCall.status === 'error'
+                            ? toolCall.error || 'Unknown error'
+                            : JSON.stringify(toolCall.result, null, 2)
+                        }
                       />
                     </p>
                     {toolCall.status === 'pending' && (
@@ -779,6 +784,16 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         </span>
                       </p>
                     )}
+                    {toolCall.status === 'error' && (
+                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
+                        <span
+                          className="leading-[23px] text-red-500 dark:text-red-400"
+                          style={{ fontFamily: 'IBMPlexMono-Medium' }}
+                        >
+                          {toolCall.error}
+                        </span>
+                      </p>
+                    )}
                   </div>
                 </div>
               </Accordion>

frontend/src/conversation/conversationHandlers.ts

@@ -7,7 +7,7 @@ export function handleFetchAnswer(
   question: string,
   signal: AbortSignal,
   token: string | null,
-  selectedDocs: Doc | null,
+  selectedDocs: Doc[] | null,
   conversationId: string | null,
   promptId: string | null,
   chunks: string,
@@ -52,10 +52,17 @@ export function handleFetchAnswer(
     payload.attachments = attachments;
   }
 
-  if (selectedDocs && 'id' in selectedDocs) {
-    payload.active_docs = selectedDocs.id as string;
+  if (selectedDocs && Array.isArray(selectedDocs)) {
+    if (selectedDocs.length > 1) {
+      // Handle multiple documents
+      payload.active_docs = selectedDocs.map((doc) => doc.id!);
+      payload.retriever = selectedDocs[0]?.retriever as string;
+    } else if (selectedDocs.length === 1 && 'id' in selectedDocs[0]) {
+      // Handle single document (backward compatibility)
+      payload.active_docs = selectedDocs[0].id as string;
+      payload.retriever = selectedDocs[0].retriever as string;
+    }
   }
-  payload.retriever = selectedDocs?.retriever as string;
   return conversationService
     .answer(payload, token, signal)
     .then((response) => {
@@ -84,7 +91,7 @@ export function handleFetchAnswerSteaming(
   question: string,
   signal: AbortSignal,
   token: string | null,
-  selectedDocs: Doc | null,
+  selectedDocs: Doc[] | null,
   conversationId: string | null,
   promptId: string | null,
   chunks: string,
@@ -112,10 +119,17 @@ export function handleFetchAnswerSteaming(
     payload.attachments = attachments;
   }
 
-  if (selectedDocs && 'id' in selectedDocs) {
-    payload.active_docs = selectedDocs.id as string;
+  if (selectedDocs && Array.isArray(selectedDocs)) {
+    if (selectedDocs.length > 1) {
+      // Handle multiple documents
+      payload.active_docs = selectedDocs.map((doc) => doc.id!);
+      payload.retriever = selectedDocs[0]?.retriever as string;
+    } else if (selectedDocs.length === 1 && 'id' in selectedDocs[0]) {
+      // Handle single document (backward compatibility)
+      payload.active_docs = selectedDocs[0].id as string;
+      payload.retriever = selectedDocs[0].retriever as string;
+    }
   }
-  payload.retriever = selectedDocs?.retriever as string;
 
   return new Promise<Answer>((resolve, reject) => {
     conversationService
@@ -171,7 +185,7 @@ export function handleFetchAnswerSteaming(
 export function handleSearch(
   question: string,
   token: string | null,
-  selectedDocs: Doc | null,
+  selectedDocs: Doc[] | null,
   conversation_id: string | null,
   chunks: string,
   token_limit: number,
@@ -183,9 +197,17 @@ export function handleSearch(
     token_limit: token_limit,
     isNoneDoc: selectedDocs === null,
   };
-  if (selectedDocs && 'id' in selectedDocs)
-    payload.active_docs = selectedDocs.id as string;
-  payload.retriever = selectedDocs?.retriever as string;
+  if (selectedDocs && Array.isArray(selectedDocs)) {
+    if (selectedDocs.length > 1) {
+      // Handle multiple documents
+      payload.active_docs = selectedDocs.map((doc) => doc.id!);
+      payload.retriever = selectedDocs[0]?.retriever as string;
+    } else if (selectedDocs.length === 1 && 'id' in selectedDocs[0]) {
+      // Handle single document (backward compatibility)
+      payload.active_docs = selectedDocs[0].id as string;
+      payload.retriever = selectedDocs[0].retriever as string;
+    }
+  }
   return conversationService
     .search(payload, token)
     .then((response) => response.json())

frontend/src/conversation/conversationModels.ts

@@ -54,7 +54,7 @@ export interface Query {
 
 export interface RetrievalPayload {
   question: string;
-  active_docs?: string;
+  active_docs?: string | string[];
   retriever?: string;
   conversation_id: string | null;
   prompt_id?: string | null;

frontend/src/conversation/types/index.ts

@@ -4,5 +4,6 @@ export type ToolCallsType = {
   call_id: string;
   arguments: Record<string, any>;
   result?: Record<string, any>;
-  status?: 'pending' | 'completed';
+  error?: string;
+  status?: 'pending' | 'completed' | 'error';
 };

frontend/src/hooks/useDefaultDocument.ts

@@ -18,11 +18,14 @@ export default function useDefaultDocument() {
   const fetchDocs = () => {
     getDocs(token).then((data) => {
       dispatch(setSourceDocs(data));
-      if (!selectedDoc)
+      if (
+        !selectedDoc ||
+        (Array.isArray(selectedDoc) && selectedDoc.length === 0)
+      )
         Array.isArray(data) &&
           data?.forEach((doc: Doc) => {
             if (doc.model && doc.name === 'default') {
-              dispatch(setSelectedDocs(doc));
+              dispatch(setSelectedDocs([doc]));
             }
           });
     });

frontend/src/locale/en.json

@@ -185,7 +185,39 @@
       "cancel": "Cancel",
       "addNew": "Add New",
       "name": "Name",
-      "type": "Type"
+      "type": "Type",
+      "mcp": {
+        "addServer": "Add MCP Server",
+        "editServer": "Edit Server",
+        "serverName": "Server Name",
+        "serverUrl": "Server URL",
+        "headerName": "Header Name",
+        "timeout": "Timeout (seconds)",
+        "testConnection": "Test Connection",
+        "testing": "Testing...",
+        "saving": "Saving...",
+        "save": "Save",
+        "cancel": "Cancel",
+        "noAuth": "No Authentication",
+        "placeholders": {
+          "serverUrl": "https://api.example.com",
+          "apiKey": "Your secret API key",
+          "bearerToken": "Your secret token",
+          "username": "Your username",
+          "password": "Your password"
+        },
+        "errors": {
+          "nameRequired": "Server name is required",
+          "urlRequired": "Server URL is required",
+          "invalidUrl": "Please enter a valid URL",
+          "apiKeyRequired": "API key is required",
+          "tokenRequired": "Bearer token is required",
+          "usernameRequired": "Username is required",
+          "passwordRequired": "Password is required",
+          "testFailed": "Connection test failed",
+          "saveFailed": "Failed to save MCP server"
+        }
+      }
     }
   },
   "modals": {

frontend/src/modals/AddToolModal.tsx

@@ -8,6 +8,7 @@ import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import ConfigToolModal from './ConfigToolModal';
+import MCPServerModal from './MCPServerModal';
 import { AvailableToolType } from './types';
 import WrapperComponent from './WrapperModal';
 
@@ -34,6 +35,8 @@ export default function AddToolModal({
     React.useState<AvailableToolType | null>(null);
   const [configModalState, setConfigModalState] =
     React.useState<ActiveState>('INACTIVE');
+  const [mcpModalState, setMcpModalState] =
+    React.useState<ActiveState>('INACTIVE');
   const [loading, setLoading] = React.useState(false);
 
   useOutsideAlerter(modalRef, () => {
@@ -86,6 +89,9 @@ export default function AddToolModal({
         .catch((error) => {
           console.error('Failed to create tool:', error);
         });
+    } else if (tool.name === 'mcp_tool') {
+      setModalState('INACTIVE');
+      setMcpModalState('ACTIVE');
     } else {
       setModalState('INACTIVE');
       setConfigModalState('ACTIVE');
@@ -95,6 +101,12 @@ export default function AddToolModal({
   React.useEffect(() => {
     if (modalState === 'ACTIVE') getAvailableTools();
   }, [modalState]);
+
+  const handleMcpServerAdded = () => {
+    getUserTools();
+    setMcpModalState('INACTIVE');
+  };
+
   return (
     <>
       {modalState === 'ACTIVE' && (
@@ -166,6 +178,11 @@ export default function AddToolModal({
         tool={selectedTool}
         getUserTools={getUserTools}
       />
+      <MCPServerModal
+        modalState={mcpModalState}
+        setModalState={setMcpModalState}
+        onServerSaved={handleMcpServerAdded}
+      />
     </>
   );
 }

frontend/src/modals/MCPServerModal.tsx

@@ -0,0 +1,482 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import userService from '../api/services/userService';
+import Dropdown from '../components/Dropdown';
+import Input from '../components/Input';
+import Spinner from '../components/Spinner';
+import { useOutsideAlerter } from '../hooks';
+import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
+import WrapperComponent from './WrapperModal';
+
+interface MCPServerModalProps {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  server?: any;
+  onServerSaved: () => void;
+}
+
+const authTypes = [
+  { label: 'No Authentication', value: 'none' },
+  { label: 'API Key', value: 'api_key' },
+  { label: 'Bearer Token', value: 'bearer' },
+  // { label: 'Basic Authentication', value: 'basic' },
+];
+
+export default function MCPServerModal({
+  modalState,
+  setModalState,
+  server,
+  onServerSaved,
+}: MCPServerModalProps) {
+  const { t } = useTranslation();
+  const token = useSelector(selectToken);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const [formData, setFormData] = useState({
+    name: server?.displayName || 'My MCP Server',
+    server_url: server?.server_url || '',
+    auth_type: server?.auth_type || 'none',
+    api_key: '',
+    header_name: 'X-API-Key',
+    bearer_token: '',
+    username: '',
+    password: '',
+    timeout: server?.timeout || 30,
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+
+  useOutsideAlerter(modalRef, () => {
+    if (modalState === 'ACTIVE') {
+      setModalState('INACTIVE');
+      resetForm();
+    }
+  }, [modalState]);
+
+  const resetForm = () => {
+    setFormData({
+      name: 'My MCP Server',
+      server_url: '',
+      auth_type: 'none',
+      api_key: '',
+      header_name: 'X-API-Key',
+      bearer_token: '',
+      username: '',
+      password: '',
+      timeout: 30,
+    });
+    setErrors({});
+    setTestResult(null);
+  };
+
+  const validateForm = () => {
+    const requiredFields: { [key: string]: boolean } = {
+      name: !formData.name.trim(),
+      server_url: !formData.server_url.trim(),
+    };
+
+    const authFieldChecks: { [key: string]: () => void } = {
+      api_key: () => {
+        if (!formData.api_key.trim())
+          newErrors.api_key = t('settings.tools.mcp.errors.apiKeyRequired');
+      },
+      bearer: () => {
+        if (!formData.bearer_token.trim())
+          newErrors.bearer_token = t('settings.tools.mcp.errors.tokenRequired');
+      },
+      basic: () => {
+        if (!formData.username.trim())
+          newErrors.username = t('settings.tools.mcp.errors.usernameRequired');
+        if (!formData.password.trim())
+          newErrors.password = t('settings.tools.mcp.errors.passwordRequired');
+      },
+    };
+
+    const newErrors: { [key: string]: string } = {};
+    Object.entries(requiredFields).forEach(([field, isEmpty]) => {
+      if (isEmpty)
+        newErrors[field] = t(
+          `settings.tools.mcp.errors.${field === 'name' ? 'nameRequired' : 'urlRequired'}`,
+        );
+    });
+
+    if (formData.server_url.trim()) {
+      try {
+        new URL(formData.server_url);
+      } catch {
+        newErrors.server_url = t('settings.tools.mcp.errors.invalidUrl');
+      }
+    }
+
+    const timeoutValue = formData.timeout === '' ? 30 : formData.timeout;
+    if (
+      typeof timeoutValue === 'number' &&
+      (timeoutValue < 1 || timeoutValue > 300)
+    )
+      newErrors.timeout = 'Timeout must be between 1 and 300 seconds';
+
+    if (authFieldChecks[formData.auth_type])
+      authFieldChecks[formData.auth_type]();
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleInputChange = (name: string, value: string | number) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    if (errors[name]) {
+      setErrors((prev) => ({ ...prev, [name]: '' }));
+    }
+    setTestResult(null);
+  };
+
+  const buildToolConfig = () => {
+    const config: any = {
+      server_url: formData.server_url.trim(),
+      auth_type: formData.auth_type,
+      timeout: formData.timeout === '' ? 30 : formData.timeout,
+    };
+
+    if (formData.auth_type === 'api_key') {
+      config.api_key = formData.api_key.trim();
+      config.api_key_header = formData.header_name.trim() || 'X-API-Key';
+    } else if (formData.auth_type === 'bearer') {
+      config.bearer_token = formData.bearer_token.trim();
+    } else if (formData.auth_type === 'basic') {
+      config.username = formData.username.trim();
+      config.password = formData.password.trim();
+    }
+    return config;
+  };
+
+  const testConnection = async () => {
+    if (!validateForm()) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const config = buildToolConfig();
+      const response = await userService.testMCPConnection({ config }, token);
+      const result = await response.json();
+
+      setTestResult(result);
+    } catch (error) {
+      setTestResult({
+        success: false,
+        message: t('settings.tools.mcp.errors.testFailed'),
+      });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!validateForm()) return;
+    setLoading(true);
+    try {
+      const config = buildToolConfig();
+      const serverData = {
+        displayName: formData.name,
+        config,
+        status: true,
+        ...(server?.id && { id: server.id }),
+      };
+
+      const response = await userService.saveMCPServer(serverData, token);
+      const result = await response.json();
+
+      if (response.ok && result.success) {
+        setTestResult({
+          success: true,
+          message: result.message,
+        });
+        onServerSaved();
+        setModalState('INACTIVE');
+        resetForm();
+      } else {
+        setErrors({
+          general: result.error || t('settings.tools.mcp.errors.saveFailed'),
+        });
+      }
+    } catch (error) {
+      console.error('Error saving MCP server:', error);
+      setErrors({ general: t('settings.tools.mcp.errors.saveFailed') });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderAuthFields = () => {
+    switch (formData.auth_type) {
+      case 'api_key':
+        return (
+          <div className="mb-10">
+            <div className="mt-6">
+              <Input
+                name="api_key"
+                type="text"
+                className="rounded-md"
+                value={formData.api_key}
+                onChange={(e) => handleInputChange('api_key', e.target.value)}
+                placeholder={t('settings.tools.mcp.placeholders.apiKey')}
+                borderVariant="thin"
+                labelBgClassName="bg-white dark:bg-charleston-green-2"
+              />
+              {errors.api_key && (
+                <p className="mt-1 text-sm text-red-600">{errors.api_key}</p>
+              )}
+            </div>
+            <div className="mt-5">
+              <Input
+                name="header_name"
+                type="text"
+                className="rounded-md"
+                value={formData.header_name}
+                onChange={(e) =>
+                  handleInputChange('header_name', e.target.value)
+                }
+                placeholder={t('settings.tools.mcp.headerName')}
+                borderVariant="thin"
+                labelBgClassName="bg-white dark:bg-charleston-green-2"
+              />
+            </div>
+          </div>
+        );
+      case 'bearer':
+        return (
+          <div className="mb-10">
+            <Input
+              name="bearer_token"
+              type="text"
+              className="rounded-md"
+              value={formData.bearer_token}
+              onChange={(e) =>
+                handleInputChange('bearer_token', e.target.value)
+              }
+              placeholder={t('settings.tools.mcp.placeholders.bearerToken')}
+              borderVariant="thin"
+              labelBgClassName="bg-white dark:bg-charleston-green-2"
+            />
+            {errors.bearer_token && (
+              <p className="mt-1 text-sm text-red-600">{errors.bearer_token}</p>
+            )}
+          </div>
+        );
+      case 'basic':
+        return (
+          <div className="mb-10">
+            <div className="mt-6">
+              <Input
+                name="username"
+                type="text"
+                className="rounded-md"
+                value={formData.username}
+                onChange={(e) => handleInputChange('username', e.target.value)}
+                placeholder={t('settings.tools.mcp.username')}
+                borderVariant="thin"
+                labelBgClassName="bg-white dark:bg-charleston-green-2"
+              />
+              {errors.username && (
+                <p className="mt-1 text-sm text-red-600">{errors.username}</p>
+              )}
+            </div>
+            <div className="mt-5">
+              <Input
+                name="password"
+                type="text"
+                className="rounded-md"
+                value={formData.password}
+                onChange={(e) => handleInputChange('password', e.target.value)}
+                placeholder={t('settings.tools.mcp.password')}
+                borderVariant="thin"
+                labelBgClassName="bg-white dark:bg-charleston-green-2"
+              />
+              {errors.password && (
+                <p className="mt-1 text-sm text-red-600">{errors.password}</p>
+              )}
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    modalState === 'ACTIVE' && (
+      <WrapperComponent
+        close={() => {
+          setModalState('INACTIVE');
+          resetForm();
+        }}
+        className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
+      >
+        <div className="flex h-full flex-col">
+          <div className="px-6 py-4">
+            <h2 className="text-jet dark:text-bright-gray text-xl font-semibold">
+              {server
+                ? t('settings.tools.mcp.editServer')
+                : t('settings.tools.mcp.addServer')}
+            </h2>
+          </div>
+          <div className="flex-1 px-6">
+            <div className="space-y-6 py-6">
+              <div>
+                <Input
+                  name="name"
+                  type="text"
+                  className="rounded-md"
+                  value={formData.name}
+                  onChange={(e) => handleInputChange('name', e.target.value)}
+                  borderVariant="thin"
+                  placeholder={t('settings.tools.mcp.serverName')}
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
+                />
+                {errors.name && (
+                  <p className="mt-1 text-sm text-red-600">{errors.name}</p>
+                )}
+              </div>
+
+              <div>
+                <Input
+                  name="server_url"
+                  type="text"
+                  className="rounded-md"
+                  value={formData.server_url}
+                  onChange={(e) =>
+                    handleInputChange('server_url', e.target.value)
+                  }
+                  placeholder={t('settings.tools.mcp.serverUrl')}
+                  borderVariant="thin"
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
+                />
+                {errors.server_url && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.server_url}
+                  </p>
+                )}
+              </div>
+
+              <Dropdown
+                placeholder={t('settings.tools.mcp.authType')}
+                selectedValue={
+                  authTypes.find((type) => type.value === formData.auth_type)
+                    ?.label || null
+                }
+                onSelect={(selection: { label: string; value: string }) => {
+                  handleInputChange('auth_type', selection.value);
+                }}
+                options={authTypes}
+                size="w-full"
+                rounded="3xl"
+                border="border"
+              />
+
+              {renderAuthFields()}
+
+              <div>
+                <Input
+                  name="timeout"
+                  type="number"
+                  className="rounded-md"
+                  value={formData.timeout}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value === '') {
+                      handleInputChange('timeout', '');
+                    } else {
+                      const numValue = parseInt(value);
+                      if (!isNaN(numValue) && numValue >= 1) {
+                        handleInputChange('timeout', numValue);
+                      }
+                    }
+                  }}
+                  placeholder={t('settings.tools.mcp.timeout')}
+                  borderVariant="thin"
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
+                />
+                {errors.timeout && (
+                  <p className="mt-2 text-sm text-red-600">{errors.timeout}</p>
+                )}
+              </div>
+
+              {testResult && (
+                <div
+                  className={`rounded-md p-5 ${
+                    testResult.success
+                      ? 'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                      : 'bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300'
+                  }`}
+                >
+                  {testResult.message}
+                </div>
+              )}
+              {errors.general && (
+                <div className="rounded-2xl bg-red-50 p-5 text-red-700 dark:bg-red-900 dark:text-red-300">
+                  {errors.general}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="px-6 py-2">
+            <div className="flex flex-col gap-4 sm:flex-row sm:justify-between">
+              <button
+                onClick={testConnection}
+                disabled={testing}
+                className="border-silver dark:border-dim-gray dark:text-light-gray w-full rounded-3xl border px-6 py-2 text-sm font-medium transition-all hover:bg-gray-100 disabled:opacity-50 sm:w-auto dark:hover:bg-[#767183]/50"
+              >
+                {testing ? (
+                  <div className="flex items-center justify-center">
+                    <Spinner size="small" />
+                    <span className="ml-2">
+                      {t('settings.tools.mcp.testing')}
+                    </span>
+                  </div>
+                ) : (
+                  t('settings.tools.mcp.testConnection')
+                )}
+              </button>
+
+              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
+                <button
+                  onClick={() => {
+                    setModalState('INACTIVE');
+                    resetForm();
+                  }}
+                  className="dark:text-light-gray w-full cursor-pointer rounded-3xl px-6 py-2 text-sm font-medium hover:bg-gray-100 sm:w-auto dark:bg-transparent dark:hover:bg-[#767183]/50"
+                >
+                  {t('settings.tools.mcp.cancel')}
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={loading}
+                  className="bg-purple-30 hover:bg-violets-are-blue w-full rounded-3xl px-6 py-2 text-sm font-medium text-white transition-all disabled:opacity-50 sm:w-auto"
+                >
+                  {loading ? (
+                    <div className="flex items-center justify-center">
+                      <Spinner size="small" />
+                      <span className="ml-2">
+                        {t('settings.tools.mcp.saving')}
+                      </span>
+                    </div>
+                  ) : (
+                    t('settings.tools.mcp.save')
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </WrapperComponent>
+    )
+  );
+}

frontend/src/modals/ShareConversationModal.tsx

@@ -60,7 +60,7 @@ export const ShareConversationModal = ({
   const [sourcePath, setSourcePath] = useState<{
     label: string;
     value: string;
-  } | null>(preSelectedDoc ? extractDocPaths([preSelectedDoc])[0] : null);
+  } | null>(preSelectedDoc ? extractDocPaths(preSelectedDoc)[0] : null);
 
   const handleCopyKey = (url: string) => {
     navigator.clipboard.writeText(url);
@@ -105,14 +105,14 @@ export const ShareConversationModal = ({
   return (
     <WrapperModal close={close}>
       <div className="flex flex-col gap-2">
-        <h2 className="text-xl font-medium text-eerie-black dark:text-chinese-white">
+        <h2 className="text-eerie-black dark:text-chinese-white text-xl font-medium">
           {t('modals.shareConv.label')}
         </h2>
-        <p className="text-sm text-eerie-black dark:text-silver/60">
+        <p className="text-eerie-black dark:text-silver/60 text-sm">
           {t('modals.shareConv.note')}
         </p>
         <div className="flex items-center justify-between">
-          <span className="text-lg text-eerie-black dark:text-white">
+          <span className="text-eerie-black text-lg dark:text-white">
             {t('modals.shareConv.option')}
           </span>
           <ToggleSwitch
@@ -136,19 +136,19 @@ export const ShareConversationModal = ({
           </div>
         )}
         <div className="flex items-baseline justify-between gap-2">
-          <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 border-silver px-4 py-3 text-eerie-black dark:border-silver/40 dark:text-white">
+          <span className="no-scrollbar border-silver text-eerie-black dark:border-silver/40 w-full overflow-x-auto rounded-full border-2 px-4 py-3 whitespace-nowrap dark:text-white">
             {`${domain}/share/${identifier ?? '....'}`}
           </span>
           {status === 'fetched' ? (
             <button
-              className="my-1 h-10 w-28 rounded-full bg-purple-30 p-2 text-sm text-white hover:bg-violets-are-blue"
+              className="bg-purple-30 hover:bg-violets-are-blue my-1 h-10 w-28 rounded-full p-2 text-sm text-white"
               onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
             >
               {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
             </button>
           ) : (
             <button
-              className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-violets-are-blue"
+              className="bg-purple-30 hover:bg-violets-are-blue my-1 flex h-10 w-28 items-center justify-evenly rounded-full p-2 text-center text-sm font-normal text-white"
               onClick={() => {
                 shareCoversationPublicly(allowPrompt);
               }}

frontend/src/preferences/preferenceApi.ts

@@ -90,9 +90,9 @@ export function getLocalApiKey(): string | null {
   return key;
 }
 
-export function getLocalRecentDocs(): string | null {
-  const doc = localStorage.getItem('DocsGPTRecentDocs');
-  return doc;
+export function getLocalRecentDocs(): Doc[] | null {
+  const docs = localStorage.getItem('DocsGPTRecentDocs');
+  return docs ? (JSON.parse(docs) as Doc[]) : null;
 }
 
 export function getLocalPrompt(): string | null {
@@ -108,19 +108,20 @@ export function setLocalPrompt(prompt: string): void {
   localStorage.setItem('DocsGPTPrompt', prompt);
 }
 
-export function setLocalRecentDocs(doc: Doc | null): void {
-  localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(doc));
+export function setLocalRecentDocs(docs: Doc[] | null): void {
+  if (docs && docs.length > 0) {
+    localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(docs));
 
-  let docPath = 'default';
-  if (doc?.type === 'local') {
-    docPath = 'local' + '/' + doc.name + '/';
+    docs.forEach((doc) => {
+      let docPath = 'default';
+      if (doc.type === 'local') {
+        docPath = 'local' + '/' + doc.name + '/';
+      }
+      userService
+        .checkDocs({ docs: docPath }, null)
+        .then((response) => response.json());
+    });
+  } else {
+    localStorage.removeItem('DocsGPTRecentDocs');
   }
-  userService
-    .checkDocs(
-      {
-        docs: docPath,
-      },
-      null,
-    )
-    .then((response) => response.json());
 }

frontend/src/preferences/preferenceSlice.ts

@@ -15,7 +15,7 @@ export interface Preference {
   prompt: { name: string; id: string; type: string };
   chunks: string;
   token_limit: number;
-  selectedDocs: Doc | null;
+  selectedDocs: Doc[] | null;
   sourceDocs: Doc[] | null;
   conversations: {
     data: { name: string; id: string }[] | null;
@@ -34,15 +34,16 @@ const initialState: Preference = {
   prompt: { name: 'default', id: 'default', type: 'public' },
   chunks: '2',
   token_limit: 2000,
-  selectedDocs: {
-    id: 'default',
-    name: 'default',
-    type: 'remote',
-    date: 'default',
-    docLink: 'default',
-    model: 'openai_text-embedding-ada-002',
-    retriever: 'classic',
-  } as Doc,
+  selectedDocs: [
+    {
+      id: 'default',
+      name: 'default',
+      type: 'remote',
+      date: 'default',
+      model: 'openai_text-embedding-ada-002',
+      retriever: 'classic',
+    },
+  ] as Doc[],
   sourceDocs: null,
   conversations: {
     data: null,

frontend/src/settings/Sources.tsx

@@ -1,4 +1,3 @@
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -319,7 +318,7 @@ export default function Sources({
                   setSearchTerm(e.target.value);
                   setCurrentPage(1);
                 }}
-                className="w-full h-[32px] rounded-full border border-silver dark:border-silver/40 bg-transparent px-3 text-sm text-jet dark:text-bright-gray placeholder:text-gray-400 dark:placeholder:text-gray-500 outline-none focus:border-silver dark:focus:border-silver/60"
+                className="border-silver dark:border-silver/40 text-jet dark:text-bright-gray focus:border-silver dark:focus:border-silver/60 h-[32px] w-full rounded-full border bg-transparent px-3 text-sm outline-none placeholder:text-gray-400 dark:placeholder:text-gray-500"
               />
             </div>
           </div>
@@ -336,7 +335,7 @@ export default function Sources({
         </div>
         <div className="relative w-full">
           {loading ? (
-            <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-2 py-4">
+            <div className="grid w-full grid-cols-1 gap-6 px-2 py-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
               <SkeletonLoader component="sourceCards" count={rowsPerPage} />
             </div>
           ) : !currentDocuments?.length ? (
@@ -351,17 +350,18 @@ export default function Sources({
               </p>
             </div>
           ) : (
-            <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-2 py-4">
+            <div className="grid w-full grid-cols-1 gap-6 px-2 py-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
               {currentDocuments.map((document, index) => {
                 const docId = document.id ? document.id.toString() : '';
 
                 return (
                   <div key={docId} className="relative">
                     <div
-                      className={`flex h-[130px] w-full flex-col rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200  dark:bg-[#383838] ${activeMenuId === docId || syncMenuState.docId === docId
+                      className={`flex h-[130px] w-full flex-col rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
+                        activeMenuId === docId || syncMenuState.docId === docId
                           ? 'scale-[1.05]'
                           : 'hover:scale-[1.05]'
-                        }`}
+                      }`}
                     >
                       <div className="w-full flex-1">
                         <div className="flex w-full items-center justify-between gap-2">
@@ -426,7 +426,7 @@ export default function Sources({
                           <img
                             src={CalendarIcon}
                             alt=""
-                            className="w-[14px] h-[14px]"
+                            className="h-[14px] w-[14px]"
                           />
                           <span className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
                             {document.date ? formatDate(document.date) : ''}
@@ -436,7 +436,7 @@ export default function Sources({
                           <img
                             src={DiscIcon}
                             alt=""
-                            className="w-[14px] h-[14px]"
+                            className="h-[14px] w-[14px]"
                           />
                           <span className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
                             {document.tokens

frontend/src/settings/ToolConfig.tsx

@@ -30,9 +30,22 @@ export default function ToolConfig({
   handleGoBack: () => void;
 }) {
   const token = useSelector(selectToken);
-  const [authKey, setAuthKey] = React.useState<string>(
-    'token' in tool.config ? tool.config.token : '',
-  );
+  const [authKey, setAuthKey] = React.useState<string>(() => {
+    if (tool.name === 'mcp_tool') {
+      const config = tool.config as any;
+      if (config.auth_type === 'api_key') {
+        return config.api_key || '';
+      } else if (config.auth_type === 'bearer') {
+        return config.encrypted_token || '';
+      } else if (config.auth_type === 'basic') {
+        return config.password || '';
+      }
+      return '';
+    } else if ('token' in tool.config) {
+      return tool.config.token;
+    }
+    return '';
+  });
   const [customName, setCustomName] = React.useState<string>(
     tool.customName || '',
   );
@@ -97,6 +110,26 @@ export default function ToolConfig({
   };
 
   const handleSaveChanges = () => {
+    let configToSave;
+    if (tool.name === 'api_tool') {
+      configToSave = tool.config;
+    } else if (tool.name === 'mcp_tool') {
+      configToSave = { ...tool.config } as any;
+      const mcpConfig = tool.config as any;
+
+      if (authKey.trim()) {
+        if (mcpConfig.auth_type === 'api_key') {
+          configToSave.api_key = authKey;
+        } else if (mcpConfig.auth_type === 'bearer') {
+          configToSave.encrypted_token = authKey;
+        } else if (mcpConfig.auth_type === 'basic') {
+          configToSave.password = authKey;
+        }
+      }
+    } else {
+      configToSave = { token: authKey };
+    }
+
     userService
       .updateTool(
         {
@@ -105,7 +138,7 @@ export default function ToolConfig({
           displayName: tool.displayName,
           customName: customName,
           description: tool.description,
-          config: tool.name === 'api_tool' ? tool.config : { token: authKey },
+          config: configToSave,
           actions: 'actions' in tool ? tool.actions : [],
           status: tool.status,
         },
@@ -196,7 +229,15 @@ export default function ToolConfig({
       <div className="mt-1">
         {Object.keys(tool?.config).length !== 0 && tool.name !== 'api_tool' && (
           <p className="text-eerie-black dark:text-bright-gray text-sm font-semibold">
-            {t('settings.tools.authentication')}
+            {tool.name === 'mcp_tool'
+              ? (tool.config as any)?.auth_type === 'bearer'
+                ? 'Bearer Token'
+                : (tool.config as any)?.auth_type === 'api_key'
+                  ? 'API Key'
+                  : (tool.config as any)?.auth_type === 'basic'
+                    ? 'Password'
+                    : t('settings.tools.authentication')
+              : t('settings.tools.authentication')}
           </p>
         )}
         <div className="mt-4 flex flex-col items-start gap-2 sm:flex-row sm:items-center">
@@ -208,7 +249,17 @@ export default function ToolConfig({
                   value={authKey}
                   onChange={(e) => setAuthKey(e.target.value)}
                   borderVariant="thin"
-                  placeholder={t('modals.configTool.apiKeyPlaceholder')}
+                  placeholder={
+                    tool.name === 'mcp_tool'
+                      ? (tool.config as any)?.auth_type === 'bearer'
+                        ? 'Bearer Token'
+                        : (tool.config as any)?.auth_type === 'api_key'
+                          ? 'API Key'
+                          : (tool.config as any)?.auth_type === 'basic'
+                            ? 'Password'
+                            : t('modals.configTool.apiKeyPlaceholder')
+                      : t('modals.configTool.apiKeyPlaceholder')
+                  }
                 />
               </div>
             )}
@@ -450,6 +501,26 @@ export default function ToolConfig({
             setModalState={(state) => setShowUnsavedModal(state === 'ACTIVE')}
             submitLabel={t('settings.tools.saveAndLeave')}
             handleSubmit={() => {
+              let configToSave;
+              if (tool.name === 'api_tool') {
+                configToSave = tool.config;
+              } else if (tool.name === 'mcp_tool') {
+                configToSave = { ...tool.config } as any;
+                const mcpConfig = tool.config as any;
+
+                if (authKey.trim()) {
+                  if (mcpConfig.auth_type === 'api_key') {
+                    configToSave.api_key = authKey;
+                  } else if (mcpConfig.auth_type === 'bearer') {
+                    configToSave.encrypted_token = authKey;
+                  } else if (mcpConfig.auth_type === 'basic') {
+                    configToSave.password = authKey;
+                  }
+                }
+              } else {
+                configToSave = { token: authKey };
+              }
+
               userService
                 .updateTool(
                   {
@@ -458,10 +529,7 @@ export default function ToolConfig({
                     displayName: tool.displayName,
                     customName: customName,
                     description: tool.description,
-                    config:
-                      tool.name === 'api_tool'
-                        ? tool.config
-                        : { token: authKey },
+                    config: configToSave,
                     actions: 'actions' in tool ? tool.actions : [],
                     status: tool.status,
                   },

frontend/src/upload/Upload.tsx

@@ -4,8 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import { getSessionToken } from '../utils/providerUtils';
-
+import {
+  getSessionToken,
+  setSessionToken,
+  removeSessionToken,
+} from '../utils/providerUtils';
+import { formatDate } from '../utils/dateTimeUtils';
+import { formatBytes } from '../utils/stringUtils';
+import FileUpload from '../assets/file_upload.svg';
+import WebsiteCollect from '../assets/website_collect.svg';
 import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import ToggleSwitch from '../components/ToggleSwitch';
@@ -377,7 +384,8 @@ function Upload({
                           data?.find(
                             (d: Doc) => d.type?.toLowerCase() === 'local',
                           ),
-                    ));
+                      ),
+                    );
                   });
                   setProgress(
                     (progress) =>

frontend/src/utils/providerUtils.ts

@@ -3,7 +3,6 @@
  * Follows the convention: {provider}_session_token
  */
 
-
 export const getSessionToken = (provider: string): string | null => {
   return localStorage.getItem(`${provider}_session_token`);
 };
@@ -14,4 +13,4 @@ export const setSessionToken = (provider: string, token: string): void => {
 
 export const removeSessionToken = (provider: string): void => {
   localStorage.removeItem(`${provider}_session_token`);
-};
+};