Function: Adding MCP Server

Author: ShenKSPZ

src/App.tsx

@@ -3,6 +3,7 @@ import { ChatPage } from './components/pages/ChatPage';
 import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
 import { TranslationPage } from './components/pages/TranslationPage';
 import { FileManagementPage } from './components/pages/FileManagementPage';
+import { MCPServerPage } from './components/pages/MCPServerPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
@@ -38,6 +39,7 @@ function App() {
         {activePage === 'image' && <ImageGenerationPage />}
         {activePage === 'translation' && <TranslationPage />}
         {activePage === 'files' && <FileManagementPage />}
+        {activePage === 'mcpserver' && <MCPServerPage />}
       </MainLayout>
     </DatabaseInitializer>
   );

src/components/chat/ChatMessageArea.tsx

@@ -1,6 +1,7 @@
 import React, { useState, FormEvent, useRef, useEffect } from 'react';
 import { Conversation, Message } from '../../types/chat';
-import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X } from 'lucide-react';
+import { MCPServerSettings } from '../../types/settings';
+import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X, ServerCog } from 'lucide-react';
 import MarkdownContent from './MarkdownContent';
 import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 import { MessageHelper } from '../../services/message-helper';
@@ -26,6 +27,9 @@ interface ChatMessageAreaProps {
   isCurrentlyStreaming?: boolean;
   selectedProvider: string;
   selectedModel: string;
+  mcpServers?: Record<string, MCPServerSettings>;
+  selectedMcpServers?: string[];
+  onToggleMcpServer?: (serverId: string) => void;
 }
 
 export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
@@ -40,6 +44,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   isCurrentlyStreaming = false,
   selectedProvider,
   selectedModel,
+  mcpServers,
+  selectedMcpServers,
+  onToggleMcpServer,
 }) => {
   const { t } = useTranslation();
   const [inputValue, setInput] = useState('');
@@ -54,6 +61,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const [webSearchActive, setWebSearchActive] = useState(false);
   const [isWebSearchPreviewEnabled, setIsWebSearchPreviewEnabled] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [mcpPopupOpen, setMcpPopupOpen] = useState(false);
+  const mcpButtonRef = useRef<HTMLButtonElement>(null);
+  const mcpPopupRef = useRef<HTMLDivElement>(null);
 
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -278,6 +288,25 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     textarea.style.height = `${newHeight}px`;
   }
 
+  // Add useEffect to handle click outside for MCP popup
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        mcpPopupRef.current && 
+        !mcpPopupRef.current.contains(event.target as Node) &&
+        mcpButtonRef.current && 
+        !mcpButtonRef.current.contains(event.target as Node)
+      ) {
+        setMcpPopupOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // If no active conversation is selected
   if (!activeConversation) {
     return (
@@ -552,6 +581,70 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
             webSearchElement
           }
 
+          {/* MCP Servers dropdown */}
+          {mcpServers && Object.keys(mcpServers).length > 0 && (
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setMcpPopupOpen(!mcpPopupOpen)}
+                ref={mcpButtonRef}
+                className={`flex items-center justify-center w-fit h-8 p-2 transition-all duration-200 rounded-full outline outline-2
+                  ${selectedMcpServers && selectedMcpServers.length > 0 ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
+                aria-label="MCP Servers"
+                title="MCP Servers"
+              >
+                <ServerCog className={`mr-1 ${selectedMcpServers && selectedMcpServers.length > 0 ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
+                <span className={`text-sm font-light ${selectedMcpServers && selectedMcpServers.length > 0 ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>
+                  MCP Tools {selectedMcpServers && selectedMcpServers.length > 0 ? `(${selectedMcpServers.length})` : ''}
+                </span>
+              </button>
+              
+              {mcpPopupOpen && (
+                <div 
+                  ref={mcpPopupRef}
+                  className="absolute z-10 mt-2 image-generation-popup"
+                  style={{ bottom: '100%', left: 0, minWidth: '220px' }}
+                >
+                  <div className="p-2">
+                    <div className="mb-2 text-sm font-medium text-gray-700">
+                      {t('chat.availableMcpServers')}
+                    </div>
+                    <div className="overflow-y-auto max-h-60">
+                      {Object.values(mcpServers).map((server) => (
+                        <div
+                          key={server.id}
+                          className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
+                            selectedMcpServers?.includes(server.id)
+                              ? 'image-generation-provider-selected'
+                              : 'image-generation-provider-item'
+                          }`}
+                          onClick={() => onToggleMcpServer?.(server.id)}
+                        >
+                          <ServerCog className="w-5 h-5 mr-2" />
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium">{server.name}</span>
+                            {server.isDefault && (
+                              <span className="text-xs text-gray-500">{t('mcpServer.default')}</span>
+                            )}
+                            {server.isImageGeneration && (
+                              <span className="text-xs text-gray-500">{t('mcpServer.imageGeneration')}</span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                      
+                      {Object.keys(mcpServers).length === 0 && (
+                        <div className="px-3 py-2 text-sm text-gray-500">
+                          {t('chat.noMcpServersAvailable')}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
           <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate pr-6 lg:pr-12`}>
             {t('chat.pressShiftEnterToChangeLines')}
           </span>

src/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MessageSquare, Settings, Image, Languages, FolderClosed } from 'lucide-react';
+import { MessageSquare, Settings, Image, Languages, FolderClosed, ServerCog } from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
@@ -31,6 +31,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
     else if(activePage === 'files'){
       return 'files';
     }
+    else if(activePage === 'mcpserver'){
+      return 'mcpserver';
+    }
 
     return '';
   }
@@ -87,6 +90,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
         >
           <FolderClosed size={22} />
         </button>
+
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'mcpserver' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('mcpserver')}
+          aria-label="MCP Servers"
+        >
+          <ServerCog size={22} />
+        </button>
       </div>
 
       {/* Settings button at bottom */}

src/components/pages/ChatPage.tsx

@@ -5,6 +5,7 @@ import { Conversation, ConversationFolder } from '../../types/chat';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from '../../services/settings-service';
 import { ChatService } from '../../services/chat-service';
 import { AIService } from '../../services/ai-service';
+import { MCPServerSettings } from '../../types/settings';
 
 export const ChatPage = () => {
   const [conversations, setConversations] = useState<Conversation[]>([]);
@@ -17,6 +18,8 @@ export const ChatPage = () => {
   const [selectedModel, setSelectedModel] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('');
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+  const [mcpServers, setMcpServers] = useState<Record<string, MCPServerSettings>>({});
+  const [selectedMcpServers, setSelectedMcpServers] = useState<string[]>([]);
 
   // Initialize the services
   useEffect(() => {
@@ -43,6 +46,10 @@ export const ChatPage = () => {
         const foldersList = chatService.getFolders();
         setFolders(foldersList);
 
+        // Load MCP servers
+        const mcpServersList = chatService.getAvailableMCPServers();
+        setMcpServers(mcpServersList);
+        
         // Set active conversation from chat service
         const activeId = chatService.getActiveConversationId();
         if (activeId) {
@@ -65,6 +72,22 @@ export const ChatPage = () => {
 
   }, [isServiceInitialized]);
 
+  // Load MCP servers when settings change
+  useEffect(() => {
+    const handleSettingsChange = () => {
+      if (chatServiceRef.current) {
+        const mcpServersList = chatServiceRef.current.getAvailableMCPServers();
+        setMcpServers(mcpServersList);
+      }
+    };
+    
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
   // Load active conversation details when selected
   useEffect(() => {
     if (activeConversationId && isServiceInitialized && chatServiceRef.current) {
@@ -206,25 +229,32 @@ export const ChatPage = () => {
 
     try {
       const chatService = chatServiceRef.current;
-
-      // Send user message with streaming
-      await chatService.sendMessage(
-        content, 
-        activeConversationId,
-        true,
-        (updatedConversation) => {
-          setConversations(updatedConversation);
-        }
-      );
 
+      // Check if there are selected MCP servers to use
+      if (selectedMcpServers.length > 0) {
+        // Send message with MCP tools
+        await chatService.sendMessageWithMCPTools(
+          content,
+          activeConversationId,
+          selectedMcpServers,
+          true,
+          (updatedConversation) => {
+            setConversations(updatedConversation);
+          }
+        );
+      } else {
+        // Send regular message
+        await chatService.sendMessage(
+          content, 
+          activeConversationId,
+          true,
+          (updatedConversation) => {
+            setConversations(updatedConversation);
+          }
+        );
+      }
     } catch (err) {
       console.error('Error sending streaming message:', err);
-      
-      // // If streaming fails, we'll try to fall back to regular mode
-      // const error = err as Error;
-      // if (error.message && error.message.includes('does not support streaming')) {
-      //   await handleSendMessage(content);
-      // }
     }
   };
 
@@ -368,6 +398,17 @@ export const ChatPage = () => {
     }
   };
 
+  // Toggle selection of an MCP server
+  const handleToggleMcpServer = (serverId: string) => {
+    setSelectedMcpServers(prev => {
+      if (prev.includes(serverId)) {
+        return prev.filter(id => id !== serverId);
+      } else {
+        return [...prev, serverId];
+      }
+    });
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
 
@@ -406,6 +447,9 @@ export const ChatPage = () => {
             isCurrentlyStreaming={chatServiceRef.current?.isCurrentlyStreaming(activeConversationId) || false}
             selectedProvider={selectedProvider}
             selectedModel={selectedModel}
+            mcpServers={mcpServers}
+            selectedMcpServers={selectedMcpServers}
+            onToggleMcpServer={handleToggleMcpServer}
           />
         </div>
       </div>