Fix syntax error causing build failure (#374)

tylerpayne · Tyler Payne · husseinmozannar · web-flow · commit 659aaec40900 · 2025-09-14T20:19:17.000-04:00
Co-authored-by: Tyler Payne &lt;tylerpayne@microsoft.com&gt;
Co-authored-by: Hussein Mozannar &lt;hmozannar@microsoft.com&gt;
diff --git a/frontend/src/components/features/McpServerSelector/McpServerSelector.css b/frontend/src/components/features/McpServerSelector/McpServerSelector.css
@@ -14,15 +14,12 @@
 
 .mcp-selector .ant-select-selection-wrap {
   align-items: center;
-  padding: 5px;
+  padding: 0px;
 }
 
 /* Style the prefix with semi-transparent border */
 .mcp-selector-prefix {
-  padding: 5px;
   border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
   border-color: transparent !important;
   transition: border-color 0.2s ease;
   display: inline-flex;
diff --git a/frontend/src/components/features/McpServerSelector/McpServerSelector.tsx b/frontend/src/components/features/McpServerSelector/McpServerSelector.tsx
@@ -38,7 +38,6 @@ export const McpServerSelector: React.FC<McpServerSelectorProps> = ({ servers, o
         }))
     }, [servers])
 
-
     const selectComponent = (
         <Select
             mode="multiple"
@@ -48,15 +47,16 @@ export const McpServerSelector: React.FC<McpServerSelectorProps> = ({ servers, o
             onChange={handleChange}
             options={options}
             className="mcp-selector"
-            prefix={<Flex gap={4} className={mcpSelectorPrefixClassNames}><WrenchScrewdriverIcon width={20} /><Typography>Tools</Typography></Flex>}
+            prefix={<WrenchScrewdriverIcon width={22} />}
             suffixIcon={null}
             popupMatchSelectWidth={false}
+            maxTagCount={0}
             popupRender={(menu) => (
                 <>
                     {menu}
                     <Divider style={{ margin: '8px 0' }} />
-                    <Button 
-                        type="text" 
+                    <Button
+                        type="text"
                         onClick={handleAddServer}
                         style={{ width: '100%', padding: '0px 12px', marginBottom: "6px" }}
                         className="mcp-selector-add-mcp-server-button"
diff --git a/frontend/src/components/views/chat/chatinput.tsx b/frontend/src/components/views/chat/chatinput.tsx
@@ -33,7 +33,6 @@ import PlanView from "./plan";
 import { McpServerSelector } from "../../features/McpServerSelector/McpServerSelector";
 import { MCPAgentConfig, MCPServerInfo } from "../../features/McpServersConfig/types";
 import { extractMcpServers } from "../../features/McpServersConfig/McpServersList";
-
 // Threshold for large text files (in characters)
 const LARGE_TEXT_THRESHOLD = 1500;
 
@@ -105,9 +104,7 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
       runStatus === "active" ||
       runStatus === "pausing" ||
       inputRequest?.input_type === "approval";
-
     const [mcpServers, setMcpServers] = React.useState<MCPServerInfo[]>([]);
-    
     // Handle textarea auto-resize
     React.useEffect(() => {
       if (textAreaRef.current) {
@@ -156,19 +153,18 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
           setIsLoading(false);
         }
       };
-
       const fetchMCPServers = async () => {
         if (!user?.email) {
           console.error("User not authenticated");
           setIsLoading(false);
           return;
         }
-  
+
         try {
           setIsLoading(true);
-  
+
           // Get user's latest settings from database
-          const settings = await settingsAPI.getSettings(user.email);  
+          const settings = await settingsAPI.getSettings(user.email);
           const mcpAgentConfigs: MCPAgentConfig[] = settings.mcp_agent_configs || [];
           const mcpServers = extractMcpServers(mcpAgentConfigs);
           setMcpServers(mcpServers);
@@ -178,10 +174,10 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
           setIsLoading(false);
         }
       };
-  
+
       fetchMCPServers();
       fetchAllPlans();
-    }, [userId, user?.email]); // Added user?.email to properly track when user changes
+    }, [userId, user?.email]);
 
     // Add paste event listener for images and large text
     const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -604,13 +600,15 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
       };
     }, [isRelevantPlansVisible]);
 
+    const goToMcpServersTab = React.useCallback(() => {
       onSubMenuChange("mcp_servers");
-    }, [onSubMenuChange])
-    
+    }, [onSubMenuChange]);
+
     const handleMcpServerSelectionChange = React.useCallback((newSelection: string[]) => {
       onSelectedMcpServersChange(newSelection);
     }, [onSelectedMcpServersChange]);
 
+
     return (
       <div className="mt-2 w-full relative">
         {notificationContextHolder}
@@ -625,21 +623,52 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
           />
         )}
 
+        {/* Selected MCP Tools Display */}
+        {selectedMcpServers.length > 0 && (
+          <div
+            className={`-mb-2 mx-1 ${darkMode === "dark" ? "bg-[#333333]" : "bg-gray-100"
+              } rounded-t border-b-0 p-2 flex border flex-wrap gap-2`}
+          >
+            {selectedMcpServers.map((serverName) => (
+              <div
+                key={serverName}
+                className={`flex items-center gap-1 ${darkMode === "dark"
+                  ? "bg-[#444444] text-white"
+                  : "bg-white text-black"
+                  } rounded px-2 py-1 text-xs`}
+              >
+                <span className="truncate max-w-[150px]">🔧 {serverName}</span>
+                {runStatus === "created" && (
+                  <Button
+                    type="text"
+                    size="small"
+                    className="p-0 ml-1 flex items-center justify-center"
+                    onClick={() =>
+                      onSelectedMcpServersChange(
+                        selectedMcpServers.filter((s) => s !== serverName)
+                      )
+                    }
+                    icon={<XIcon className="w-3 h-3" />}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
         {/* Attached Items Preview */}
         {(attachedPlan || fileList.length > 0) && (
           <div
-            className={`-mb-2 mx-1 ${
-              darkMode === "dark" ? "bg-[#333333]" : "bg-gray-100"
-            } rounded-t border-b-0 p-2 flex border flex-wrap gap-2`}
+            className={`${selectedMcpServers.length > 0 ? '-mt-2' : '-mb-2'} mx-1 ${darkMode === "dark" ? "bg-[#333333]" : "bg-gray-100"
+              } ${selectedMcpServers.length > 0 ? 'rounded-b border-t-0' : 'rounded-t border-b-0'} p-2 flex border flex-wrap gap-2`}
           >
             {/* Attached Plan */}
             {attachedPlan && (
               <div
-                className={`flex items-center gap-1 ${
-                  darkMode === "dark"
-                    ? "bg-[#444444] text-white"
-                    : "bg-white text-black"
-                } rounded px-2 py-1 text-xs cursor-pointer hover:opacity-80 transition-opacity`}
+                className={`flex items-center gap-1 ${darkMode === "dark"
+                  ? "bg-[#444444] text-white"
+                  : "bg-white text-black"
+                  } rounded px-2 py-1 text-xs cursor-pointer hover:opacity-80 transition-opacity`}
                 onClick={handlePlanClick}
               >
                 <span className="truncate max-w-[150px]">
@@ -662,11 +691,10 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
             {fileList.map((file) => (
               <div
                 key={file.uid}
-                className={`flex items-center gap-1 ${
-                  darkMode === "dark"
-                    ? "bg-[#444444] text-white"
-                    : "bg-white text-black"
-                } rounded px-2 py-1 text-xs`}
+                className={`flex items-center gap-1 ${darkMode === "dark"
+                  ? "bg-[#444444] text-white"
+                  : "bg-white text-black"
+                  } rounded px-2 py-1 text-xs`}
               >
                 {getFileIcon(file)}
                 <span className="truncate max-w-[150px]">{file.name}</span>
@@ -700,95 +728,80 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
               task={attachedPlan.task || ""}
               plan={attachedPlan.steps || []}
               viewOnly={true}
-              setPlan={() => {}}
+              setPlan={() => { }}
             />
           )}
         </Modal>
 
-        <div className="mt-2 rounded shadow-sm">
+        <div className="mt-2 rounded shadow-sm flex">
           <div
-            className={`flex flex-col w-full ${dragOver ? "opacity-50" : ""}`}
+            className={`flex w-full ${dragOver ? "opacity-50" : ""}`}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
           >
-            {/* First row: Textarea full width */}
-            <div className={`w-full border-t border-l border-r border-accent rounded-t-lg ${
-                    darkMode === "dark"
-                      ? "bg-[#444444] text-white"
-                      : "bg-white text-black"
-                  }`}>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  handleSubmit();
-                }}
-              >
-                <textarea
-                  id="queryInput"
-                  name="queryInput"
-                  onPaste={handlePaste}
-                  ref={textAreaRef}
-                  defaultValue={""}
-                  onChange={handleTextChange}
-                  onKeyDown={handleKeyDown}
-                  className={`flex items-center w-full resize-none p-2 ${
-                    darkMode === "dark"
+            <div className="flex w-full">
+              <div className="flex-1">
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                  }}
+                >
+                  <textarea
+                    id="queryInput"
+                    name="queryInput"
+                    onPaste={handlePaste}
+                    ref={textAreaRef}
+                    defaultValue={""}
+                    onChange={handleTextChange}
+                    onKeyDown={handleKeyDown}
+                    className={`flex items-center w-full resize-none border-l border-t border-b border-accent p-2 pl-5 rounded-l-lg ${darkMode === "dark"
                       ? "bg-[#444444] text-white"
                       : "bg-white text-black"
-                  } ${
-                    isInputDisabled ? "cursor-not-allowed" : ""
-                  } focus:outline-none rounded-t-lg`}
-                  style={{
-                    maxHeight: "120px",
-                    overflowY: "auto",
-                    minHeight: "50px",
-                  }}
-                  placeholder={
-                    runStatus === "awaiting_input"
-                      ? "Type your response here and let Magentic-UI know of any changes in the browser."
-                      : enable_upload
-                      ? dragOver
-                        ? "Drop files here..."
-                        : "Type your message here..."
-                      : "Type your message here..."
-                  }
-                  disabled={isInputDisabled}
-                />
-              </form>
-            </div>
-
-            {/* Second row: MCP Selector (flexible) + Buttons (right-aligned) */}
-            <div className="flex w-full">
-              {/* MCP Selector - flexible width */}
-              <div className={`flex-1 border-l border-b border-accent p-2 rounded-bl-lg flex justify-start items-center ${
-                      darkMode === "dark"
-                        ? "bg-[#444444] text-white"
-                        : "bg-white text-black"
-                    }`}>
-                <McpServerSelector 
-                  servers={mcpServers} 
-                  onAddMcpServer={goToMcpServersTab} 
-                  runStatus={runStatus}
-                  value={selectedMcpServers}
-                  onChange={handleMcpServerSelectionChange}
-                />
+                      } ${isInputDisabled ? "cursor-not-allowed" : ""
+                      } focus:outline-none`}
+                    style={{
+                      maxHeight: "120px",
+                      overflowY: "auto",
+                      minHeight: "50px",
+                    }}
+                    placeholder={
+                      runStatus === "awaiting_input"
+                        ? "Type your response here and let Magentic-UI know of any changes in the browser."
+                        : enable_upload
+                          ? dragOver
+                            ? "Drop files here..."
+                            : "Type your message here..."
+                          : "Type your message here..."
+                    }
+                    disabled={isInputDisabled}
+                  />
+                </form>
               </div>
 
-              {/* Buttons - right-aligned */}
               <div
-                className={`flex items-center justify-center gap-2 border-r border-b border-accent px-2 rounded-br-lg ${
-                  darkMode === "dark"
-                    ? "bg-[#444444] text-white"
-                    : "bg-white text-black"
-                }`}
+                className={`flex items-center justify-center gap-2 border-t border-r border-b border-accent px-2 rounded-r-lg ${darkMode === "dark"
+                  ? "bg-[#444444] text-white"
+                  : "bg-white text-black"
+                  }`}
               >
+
+                {runStatus === "created" && (
+                  <McpServerSelector
+                    servers={mcpServers}
+                    onAddMcpServer={goToMcpServersTab}
+                    runStatus={runStatus}
+                    value={selectedMcpServers}
+                    onChange={handleMcpServerSelectionChange}
+                  />
+                )}
+
                 {/* File upload button replaced with Dropdown */}
                 {enable_upload && (
                   <div
-                    className={`${
-                      isInputDisabled ? "pointer-events-none opacity-50" : ""
-                    }`}
+                    className={`${isInputDisabled ? "pointer-events-none opacity-50" : ""
+                      }`}
                   >
                     <Dropdown
                       overlay={
@@ -857,11 +870,10 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
                     type="button"
                     onClick={handleSubmit}
                     disabled={isInputDisabled}
-                    className={`bg-magenta-800 transition duration-300 rounded flex justify-center items-center w-11 h-9 ${
-                      isInputDisabled
-                        ? "cursor-not-allowed"
-                        : "hover:bg-magenta-900"
-                    }`}
+                    className={`bg-magenta-800 transition duration-300 rounded flex justify-center items-center w-11 h-9 ${isInputDisabled
+                      ? "cursor-not-allowed"
+                      : "hover:bg-magenta-900"
+                      }`}
                   >
                     <PaperAirplaneIcon className="h-6 w-6 text-white" />
                   </button>
@@ -882,4 +894,4 @@ const ChatInput = React.forwardRef<{ focus: () => void }, ChatInputProps>(
   }
 );
 
-export default ChatInput;
+export default ChatInput;
