📝 (StringListInput.py): update parameter name from "param" to "input_value" to improve clarity and consistency

📝 (StringListOutput.py): update parameter name from "param" to "input_value" to improve clarity and consistency
📝 (index.tsx): add InputListComponent to handle StringListInput and StringListOutput components in IOFieldView
📝 (index.tsx): update InputListComponent props to include value, onChange, disabled, and playgroundDisabled
📝 (index.tsx): update IOFieldView to render InputListComponent for StringListInput and StringListOutput components

src/backend/base/langflow/components/inputs/StringListInput.py

@@ -7,7 +7,7 @@ class StringListInput(CustomComponent):
     display_name = "String List Input"
 
     def build_config(self):
-        return {"param": {"display_name": "String List Input", "field_type": "str", "list": True}}
+        return {"input_value": {"display_name": "String List Input", "field_type": "str", "list": True}}
 
-    def build(self, param: list) -> Record:
+    def build(self, input_value: list) -> Record:
-        return Record(data=param)
+        return Record(data=input_value)

src/backend/base/langflow/components/outputs/StringListOutput.py

@@ -7,7 +7,7 @@ class StringListOutput(CustomComponent):
     display_name = "String List Output"
 
     def build_config(self):
-        return {"param": {"display_name": "String List Output", "field_type": "str", "list": True}}
+        return {"input_value": {"display_name": "String List Output", "field_type": "str", "list": True}}
 
-    def build(self, param: list) -> Record:
+    def build(self, input_value: list) -> Record:
-        return Record(data=param)
+        return Record(data=input_value)

src/frontend/src/components/inputListComponent/index.tsx

@@ -12,6 +12,7 @@ export default function InputListComponent({
   disabled,
   editNode = false,
   componentName,
+  playgroundDisabled,
 }: InputListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value.length > 0 && value[0] !== "") {
@@ -24,7 +25,7 @@ export default function InputListComponent({
     value = [value];
   }
 
-  if (!value.length) value = [""];
+  if (!value?.length) value = [""];
 
   return (
     <div
@@ -37,7 +38,7 @@ export default function InputListComponent({
         return (
           <div key={idx} className="flex w-full gap-3">
             <Input
-              disabled={disabled}
+              disabled={disabled || playgroundDisabled}
               type="text"
               value={singleValue}
               className={editNode ? "input-edit-node" : ""}
@@ -64,6 +65,7 @@ export default function InputListComponent({
                     editNode ? "-edit" : ""
                   }_${componentName}-` + idx
                 }
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="Plus"
@@ -82,10 +84,15 @@ export default function InputListComponent({
                   newInputList.splice(idx, 1);
                   onChange(newInputList);
                 }}
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="X"
-                  className="h-4 w-4 hover:text-status-red"
+                  className={`h-4 w-4 ${
+                    disabled || playgroundDisabled
+                      ? ""
+                      : "hover:text-accent-foreground"
+                  }`}
                 />
               </button>
             )}

src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx

@@ -2,6 +2,7 @@ import { cloneDeep } from "lodash";
 import { useState } from "react";
 import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
+import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
 import {
   Select,
@@ -121,7 +122,21 @@ export default function IOFieldView({
             );
 
           case "StringListInput":
-            return <>diusahjduisahudsa</>;
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  disabled={false}
+                />
+              </>
+            );
 
           default:
             return (
@@ -249,7 +264,22 @@ export default function IOFieldView({
             );
 
           case "StringListOutput":
-            return <>diusahjduisahudsa</>;
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  playgroundDisabled
+                  disabled={false}
+                />
+              </>
+            );
 
           default:
             return (

src/frontend/src/types/components/index.ts

@@ -69,6 +69,7 @@ export type InputListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   componentName?: string;
+  playgroundDisabled?: boolean;
 };
 
 export type InputGlobalComponentType = {