From 93dbe11014cf967690727c25e89d9d1075008c24 Mon Sep 17 00:00:00 2001
From: blackhao <13851610112@163.com>
Date: Sat, 6 Dec 2025 01:30:57 -0600
Subject: UX

---
 frontend/src/components/nodes/LLMNode.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

(limited to 'frontend/src/components/nodes/LLMNode.tsx')

diff --git a/frontend/src/components/nodes/LLMNode.tsx b/frontend/src/components/nodes/LLMNode.tsx
index cdd402c..592ab5b 100644
--- a/frontend/src/components/nodes/LLMNode.tsx
+++ b/frontend/src/components/nodes/LLMNode.tsx
@@ -49,18 +49,32 @@ const LLMNode = ({ id, data, selected }: NodeProps<NodeData>) => {
   
   const inputsToShow = Math.max(maxConnectedIndex + 2, 1);
 
+  const isDisabled = data.disabled;
+
   return (
-    <div className={`px-4 py-2 shadow-md rounded-md bg-white border-2 min-w-[200px] ${selected ? 'border-blue-500' : 'border-gray-200'}`}>
+    <div 
+      className={`px-4 py-2 shadow-md rounded-md border-2 min-w-[200px] transition-all ${
+        isDisabled 
+          ? 'bg-gray-100 border-gray-300 opacity-50 cursor-not-allowed' 
+          : selected 
+            ? 'bg-white border-blue-500' 
+            : 'bg-white border-gray-200'
+      }`}
+      style={{ pointerEvents: isDisabled ? 'none' : 'auto' }}
+    >
       <div className="flex items-center mb-2">
-        <div className="rounded-full w-8 h-8 flex justify-center items-center bg-gray-100">
+        <div className={`rounded-full w-8 h-8 flex justify-center items-center ${isDisabled ? 'bg-gray-200' : 'bg-gray-100'}`}>
           {data.status === 'loading' ? (
             <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
           ) : (
-            <MessageSquare className="w-4 h-4 text-gray-600" />
+            <MessageSquare className={`w-4 h-4 ${isDisabled ? 'text-gray-400' : 'text-gray-600'}`} />
           )}
         </div>
         <div className="ml-2">
-          <div className="text-sm font-bold truncate max-w-[150px]">{data.label}</div>
+          <div className={`text-sm font-bold truncate max-w-[150px] ${isDisabled ? 'text-gray-400' : ''}`}>
+            {data.label}
+            {isDisabled && <span className="text-xs ml-1">(disabled)</span>}
+          </div>
           <div className="text-xs text-gray-500">{data.model}</div>
         </div>
       </div>
-- 
cgit v1.2.3