fix(builder): Always show connected optional pins on node (#7724)

- Always show connected optional pins on node
- Refactor `hasOptionalFields()` to a constant `hasOptionalFields`

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -21,6 +21,7 @@ import { Switch } from "@/components/ui/switch";
 import { Copy, Trash2 } from "lucide-react";
 import { history } from "./history";
 import NodeHandle from "./NodeHandle";
+import { CustomEdgeData } from "./CustomEdge";
 import { NodeGenericInputField } from "./node-input-components";
 
 type ParsedKey = { key: string; index?: number };
@@ -57,7 +58,10 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
-  const { getNode, setNodes, getEdges, setEdges } = useReactFlow();
+  const { getNode, setNodes, getEdges, setEdges } = useReactFlow<
+    CustomNodeData,
+    CustomEdgeData
+  >();
 
   const outputDataRef = useRef<HTMLDivElement>(null);
   const isInitialSetup = useRef(true);
@@ -88,14 +92,11 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     setIsAdvancedOpen(checked);
   };
 
-  const hasOptionalFields = () => {
-    return (
-      data.inputSchema &&
-      Object.keys(data.inputSchema.properties).some((key) => {
-        return !data.inputSchema.required?.includes(key);
-      })
-    );
-  };
+  const hasOptionalFields =
+    data.inputSchema &&
+    Object.keys(data.inputSchema.properties).some((key) => {
+      return !data.inputSchema.required?.includes(key);
+    });
 
   const generateOutputHandles = (schema: BlockIORootSchema) => {
     if (!schema?.properties) return null;
@@ -350,17 +351,18 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
             Object.entries(data.inputSchema.properties).map(
               ([propKey, propSchema]) => {
                 const isRequired = data.inputSchema.required?.includes(propKey);
+                const isConnected = isHandleConnected(propKey);
                 return (
-                  (isRequired || isAdvancedOpen) && (
+                  (isRequired || isAdvancedOpen || isConnected) && (
                     <div key={propKey} onMouseOver={() => {}}>
                       <NodeHandle
                         keyName={propKey}
-                        isConnected={isHandleConnected(propKey)}
+                        isConnected={isConnected}
                         isRequired={isRequired}
                         schema={propSchema}
                         side="left"
                       />
-                      {!isHandleConnected(propKey) && (
+                      {!isConnected && (
                         <NodeGenericInputField
                           className="mt-1 mb-2"
                           propKey={propKey}
@@ -412,7 +414,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
       <div className="flex items-center mt-2.5">
         <Switch onCheckedChange={toggleOutput} />
         <span className="m-1 mr-4">Output</span>
-        {hasOptionalFields() && (
+        {hasOptionalFields && (
           <>
             <Switch onCheckedChange={toggleAdvancedSettings} />
             <span className="m-1">Advanced</span>