Merge pull request #949 from anthhub/fix/mcp-select

Fix/mcp select

Author: mrcfps

packages/ai-workspace-common/src/components/canvas/launchpad/chat-panel.tsx

@@ -270,7 +270,6 @@ export const ChatPanel = ({
       {
         query,
         resultId: newResultId,
-        selectedMcpServers,
         selectedSkill,
         modelInfo: selectedModel,
         contextItems,

packages/ai-workspace-common/src/components/canvas/launchpad/mcp-selector-panel/index.tsx

@@ -101,31 +101,54 @@ export const McpSelectorPanel: React.FC<McpSelectorPanelProps> = ({ isOpen, onCl
       );
     }
 
-    return mcpServers.map((server) => (
-      <div
-        key={server.name}
-        className={cn(
-          'group relative flex items-center justify-between',
-          'rounded-lg border border-solid m-1 py-2 px-3 mb-2',
-          'cursor-pointer transition-all duration-200',
-          selectedMcpServers.includes(server.name)
-            ? 'border-[#00968f] bg-[#00968f]/5 dark:bg-[#00968f]/10'
-            : 'border-black/10 dark:border-gray-700',
-          'hover:bg-gray-50 hover:border-gray-200 hover:shadow-sm dark:hover:bg-gray-700 dark:hover:border-gray-600',
-        )}
-        onClick={() => handleMcpSelect(server.name)}
-      >
-        <div className="flex-1 min-w-0 flex items-center">
-          <ToolOutlined className="text-[#00968f] mr-2" />
-          <span className="text-[12px] text-gray-700 dark:text-gray-200 font-medium block truncate">
-            {server.name}
-          </span>
+    // 对 mcpServers 进行排序，将已选择的服务器排在前面
+    const sortedMcpServers = [...mcpServers].sort((a, b) => {
+      const aSelected = selectedMcpServers.includes(a.name);
+      const bSelected = selectedMcpServers.includes(b.name);
+
+      if (aSelected && !bSelected) return -1;
+      if (!aSelected && bSelected) return 1;
+      return 0;
+    });
+
+    return sortedMcpServers.map((server) => {
+      const displayDescription = server.description || '';
+      return (
+        <div
+          key={server.name}
+          className={cn(
+            'group relative flex items-center justify-between',
+            'rounded-lg border border-solid m-1 py-2 px-3 mb-2',
+            'cursor-pointer transition-all duration-200',
+            selectedMcpServers.includes(server.name)
+              ? 'border-[#00968f] bg-[#00968f]/5 dark:bg-[#00968f]/10'
+              : 'border-black/10 dark:border-gray-700',
+            'hover:bg-gray-50 hover:border-gray-200 hover:shadow-sm dark:hover:bg-gray-700 dark:hover:border-gray-600',
+          )}
+          onClick={() => handleMcpSelect(server.name)}
+        >
+          <div className="flex-1 min-w-0 flex flex-col">
+            {' '}
+            {/* Changed to flex-col for name and description stacking */}
+            <div className="flex items-center">
+              <ToolOutlined className="text-[#00968f] mr-2 flex-shrink-0" />
+              <span className="text-[12px] text-gray-700 dark:text-gray-200 font-medium block truncate">
+                {server.name}
+              </span>
+            </div>
+            {/* Display server description */}
+            <Tooltip title={displayDescription} placement="bottomLeft">
+              <span className="text-[10px] text-gray-500 dark:text-gray-400 block truncate ml-6">
+                {displayDescription}
+              </span>
+            </Tooltip>
+          </div>
+          {selectedMcpServers.includes(server.name) && (
+            <CheckCircle2 className="w-4 h-4 text-[#00968f] ml-2" />
+          )}
         </div>
-        {selectedMcpServers.includes(server.name) && (
-          <CheckCircle2 className="w-4 h-4 text-[#00968f] ml-2" />
-        )}
-      </div>
-    ));
+      );
+    });
   };
 
   return (

packages/ai-workspace-common/src/components/canvas/launchpad/recommend-questions-panel/index.tsx

@@ -10,6 +10,7 @@ import { actionEmitter } from '@refly-packages/ai-workspace-common/events/action
 import { cn } from '@refly-packages/ai-workspace-common/utils/cn';
 import { useContextPanelStore } from '@refly-packages/ai-workspace-common/stores/context-panel';
 import { useFindSkill } from '@refly-packages/ai-workspace-common/hooks/use-find-skill';
+import { useLaunchpadStoreShallow } from '@refly-packages/ai-workspace-common/stores/launchpad';
 
 interface RecommendQuestionsPanelProps {
   isOpen: boolean;
@@ -29,6 +30,10 @@ export const RecommendQuestionsPanel: React.FC<RecommendQuestionsPanelProps> = (
 
   const skill = useFindSkill('recommendQuestions');
 
+  const { selectedMcpServers } = useLaunchpadStoreShallow((state) => ({
+    selectedMcpServers: state.selectedMcpServers,
+  }));
+
   const fetchRecommendQuestions = async (refresh = false) => {
     setLoading(true);
     const resultId = genActionResultID();
@@ -40,6 +45,7 @@ export const RecommendQuestionsPanel: React.FC<RecommendQuestionsPanelProps> = (
         query: newQAText,
         resultId,
         contextItems,
+        selectedMcpServers,
         selectedSkill: skill,
         modelInfo: selectedModel,
         runtimeConfig,

packages/ai-workspace-common/src/hooks/canvas/use-invoke-action.ts

@@ -31,6 +31,7 @@ import { codeArtifactEmitter } from '@refly-packages/ai-workspace-common/events/
 import { useReactFlow } from '@xyflow/react';
 import { detectActualTypeFromType } from '@refly-packages/ai-workspace-common/modules/artifacts/code-runner/artifact-type-util';
 import { deletedNodesEmitter } from '@refly-packages/ai-workspace-common/events/deleted-nodes';
+import { useLaunchpadStoreShallow } from '@refly-packages/ai-workspace-common/stores/launchpad';
 
 export const useInvokeAction = () => {
   const { addNode } = useAddNode();
@@ -555,6 +556,10 @@ export const useInvokeAction = () => {
   const findWebsite = useFindWebsite();
   const findImages = useFindImages();
 
+  const { selectedMcpServers } = useLaunchpadStoreShallow((state) => ({
+    selectedMcpServers: state.selectedMcpServers,
+  }));
+
   const invokeAction = useCallback(
     (payload: SkillNodeMeta, target: Entity) => {
       deletedNodeIdsRef.current = new Set();
@@ -567,7 +572,6 @@ export const useInvokeAction = () => {
         modelInfo,
         contextItems,
         selectedSkill,
-        selectedMcpServers,
         resultId,
         version = 0,
         tplConfig = {},
@@ -676,7 +680,7 @@ export const useInvokeAction = () => {
 
       return cleanup;
     },
-    [addNode, setNodeDataByEntity, onUpdateResult, createTimeoutHandler],
+    [addNode, setNodeDataByEntity, onUpdateResult, createTimeoutHandler, selectedMcpServers],
   );
 
   return { invokeAction, abortAction };