create float component

langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -8,6 +8,7 @@ import InputListComponent from "../../../../components/inputListComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
+import FloatComponent from "../../../../components/floatComponent";
 
 export default function ParameterComponent({
 	left,
@@ -60,8 +61,11 @@ export default function ParameterComponent({
 							isValidConnection(connection, reactFlowInstance)
 						}
 						className={classNames(
-							(left ? "-ml-0.5 " : "-mr-0.5 "),
-								"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",left && (type==="str" || type==="bool")?"hidden":""
+							left ? "-ml-0.5 " : "-mr-0.5 ",
+							"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
+							left && (type === "str" || type === "bool" || type === "float")
+								? "hidden"
+								: ""
 						)}
 						style={{
 							borderColor: color,
@@ -113,6 +117,14 @@ export default function ParameterComponent({
 							}}
 						/>
 					</div>
+				) : left === true && type === "float" ? (
+					<FloatComponent
+						disabled={disabled}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t) => {
+							data.node.template[name].value = t;
+						}}
+					/>
 				) : (
 					<></>
 				)}

langflow/frontend/src/components/floatComponent/index.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { FloatComponentType } from "../../types/components";
+
+export default function FloatComponent({value, onChange, disabled}: FloatComponentType){
+    const [myValue, setMyValue] = useState(value ?? "");
+    useEffect(()=> {
+        if(disabled){
+            setMyValue("");
+            onChange("");
+        }
+    }, [disabled, onChange])
+    return (
+        <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+            <input
+            type="number"
+            value={myValue}
+            className={"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-gray-700" : "")}
+            placeholder="Type a number from zero to one"
+            onChange={(e) => {
+                setMyValue(e.target.value);
+                onChange(e.target.value);
+            }}
+            />
+        </div>
+    );
+}

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

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, ReactElement, ReactNode } from 'react';
+import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
 import { NodeDataType } from "../flow/index";
 export type InputComponentType = {
 	value: string;
@@ -27,9 +27,17 @@ export type ParameterComponentType = {
 	name?: string;
 	tooltipTitle: string;
 };
-export type InputListComponentType = {value:string[],onChange:(value:string[])=>void,disabled:boolean}
+export type InputListComponentType = {
+	value: string[];
+	onChange: (value: string[]) => void;
+	disabled: boolean;
+};
 
-export type TextAreaComponentType = {disabled:boolean,onChange:(value:string[]|string)=>void,value:string[]|string}
+export type TextAreaComponentType = {
+	disabled: boolean;
+	onChange: (value: string[] | string) => void;
+	value: string[] | string;
+};
 
 export type DisclosureComponentType = {
 	children: ReactNode;
@@ -39,6 +47,12 @@ export type DisclosureComponentType = {
 		buttons?: {
 			Icon: ReactElement;
 			title: string;
-      onClick:(event?:React.MouseEvent)=>void;
+			onClick: (event?: React.MouseEvent) => void;
 		}[];
-	}};
+	};
+};
+export type FloatComponentType = {
+	value: string;
+	disabled?: boolean;
+	onChange: (value: string) => void;
+};

langflow/frontend/tailwind.config.js

@@ -22,6 +22,16 @@ module.exports = {
           '&::-webkit-scrollbar': {
             display: 'none'
           }
+        },
+        '.arrow-hide':{
+          '&::-webkit-inner-spin-button':{
+            '-webkit-appearance': 'none',
+            'margin': 0
+          },
+          '&::-webkit-outer-spin-button':{
+            '-webkit-appearance': 'none',
+            'margin': 0
+          },
         }
       }
       )