bug: unable to use Other Model for 'Language Model' in Agent Component (#11506)

* fixed import issue on model provider

* addressed commments

---------

Co-authored-by: keval shah <kevalvirat@gmail.com>

Author: deon-sanchez

src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/__tests__/computeDisplayHandle.test.ts

@@ -100,11 +100,11 @@ describe("computeDisplayHandle", () => {
   });
 
   describe("model input handling", () => {
-    it("should require input_types for model type to show handle", () => {
-      expect(computeDisplayHandle({ type: "model" }, false)).toBe(false);
+    it("should always show handle for model type", () => {
+      expect(computeDisplayHandle({ type: "model" }, false)).toBe(true);
       expect(
         computeDisplayHandle({ type: "model", input_types: [] }, false),
-      ).toBe(false);
+      ).toBe(true);
       expect(
         computeDisplayHandle(
           { type: "model", input_types: ["LanguageModel"] },
@@ -113,7 +113,7 @@ describe("computeDisplayHandle", () => {
       ).toBe(true);
     });
 
-    it("should allow refresh_button for model type if it has input_types", () => {
+    it("should always show handle for model type even with refresh_button", () => {
       expect(
         computeDisplayHandle(
           {
@@ -126,13 +126,13 @@ describe("computeDisplayHandle", () => {
       ).toBe(true);
       expect(
         computeDisplayHandle({ type: "model", refresh_button: true }, false),
-      ).toBe(false);
+      ).toBe(true);
     });
   });
 
   describe("real-world scenarios", () => {
     it("should handle LLM component inputs correctly", () => {
-      // Model selector with refresh
+      // Model selector always shows handle
       expect(
         computeDisplayHandle(
           {
@@ -143,6 +143,16 @@ describe("computeDisplayHandle", () => {
           false,
         ),
       ).toBe(true);
+      // Model selector without input_types also shows handle
+      expect(
+        computeDisplayHandle(
+          {
+            type: "model",
+            refresh_button: true,
+          },
+          false,
+        ),
+      ).toBe(true);
       // Text input with optional connection
       expect(
         computeDisplayHandle(

src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx

@@ -46,14 +46,19 @@ const RenderInputParameters = ({
     templateFields.forEach((templateField) => {
       const template = data.node?.template[templateField];
       if (template) {
+        // For model type fields, provide default input_types if not set
+        const isModelType = template.type === "model";
+        const effectiveInputTypes =
+          template.input_types && template.input_types.length > 0
+            ? template.input_types
+            : isModelType
+              ? ["LanguageModel"]
+              : template.input_types;
+
         colorMap.set(templateField, {
-          colors: getNodeInputColors(
-            template.input_types,
-            template.type,
-            types,
-          ),
+          colors: getNodeInputColors(effectiveInputTypes, template.type, types),
           colorsName: getNodeInputColorsName(
-            template.input_types,
+            effectiveInputTypes,
             template.type,
             types,
           ),
@@ -101,6 +106,15 @@ const RenderInputParameters = ({
       const memoizedColor = memoizedColors.get(templateField);
       const memoizedKey = memoizedKeys.get(templateField);
 
+      // For model type fields, provide default input_types if not set
+      const isModelType = template.type === "model";
+      const effectiveInputTypes =
+        template.input_types && template.input_types.length > 0
+          ? template.input_types
+          : isModelType
+            ? ["LanguageModel"]
+            : template.input_types;
+
       return (
         <NodeInputField
           lastInput={
@@ -113,16 +127,16 @@ const RenderInputParameters = ({
           title={getFieldTitle(data.node?.template!, templateField)}
           info={template.info!}
           name={templateField}
-          tooltipTitle={template.input_types?.join("\n") ?? template.type}
+          tooltipTitle={effectiveInputTypes?.join("\n") ?? template.type}
           required={template.required}
           id={{
-            inputTypes: template.input_types,
+            inputTypes: effectiveInputTypes,
             type: template.type,
             id: data.id,
             fieldName: templateField,
           }}
           type={template.type}
-          optionalHandle={template.input_types}
+          optionalHandle={effectiveInputTypes}
           proxy={template.proxy}
           showNode={showNode}
           colorName={memoizedColor.colorsName}

src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/utils.ts

@@ -30,12 +30,16 @@ export const computeDisplayHandle = (
     Array.isArray(optionalHandle) &&
     optionalHandle.length > 0;
 
+  // Always show handle for model inputs
+  if (isModelInput) {
+    return true;
+  }
+
   return !!(
     (!LANGFLOW_SUPPORTED_TYPES.has(type ?? "") ||
       (optionalHandle && optionalHandle.length > 0)) &&
     !(isToolMode && template.tool_mode) &&
-    (!hasRefreshButton || isModelInput) &&
-    (!isModelInput || hasInputTypes)
+    !hasRefreshButton
   );
 };
 

src/frontend/src/components/core/parameterRenderComponent/components/modelInputComponent/index.tsx

@@ -505,15 +505,6 @@ export default function ModelInputComponent({
         () => setOpenManageProvidersDialog(true),
         "manage-model-providers",
       )}
-
-      {externalOptions?.fields?.data?.node &&
-        renderFooterButton(
-          externalOptions.fields.data.node.display_name,
-          externalOptions.fields.data.node.icon || "Box",
-          () =>
-            handleExternalOptions(externalOptions.fields.data.node.name || ""),
-          "external-option-button",
-        )}
     </div>
   );