diff --git a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index f3b8b8a96..3d43557d9 100644 --- a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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({ }} /> + ) : left === true && type === "float" ? ( + { + data.node.template[name].value = t; + }} + /> ) : ( <> )} diff --git a/langflow/frontend/src/components/floatComponent/index.tsx b/langflow/frontend/src/components/floatComponent/index.tsx new file mode 100644 index 000000000..adce64ba5 --- /dev/null +++ b/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 ( +
+ { + setMyValue(e.target.value); + onChange(e.target.value); + }} + /> +
+ ); +} \ No newline at end of file diff --git a/langflow/frontend/src/types/components/index.ts b/langflow/frontend/src/types/components/index.ts index 63ee9de73..5f02e9c5e 100644 --- a/langflow/frontend/src/types/components/index.ts +++ b/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; }[]; - }}; \ No newline at end of file + }; +}; +export type FloatComponentType = { + value: string; + disabled?: boolean; + onChange: (value: string) => void; +}; diff --git a/langflow/frontend/tailwind.config.js b/langflow/frontend/tailwind.config.js index 5cf6f2599..02a58f432 100644 --- a/langflow/frontend/tailwind.config.js +++ b/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 + }, } } )