feat: Add 'isToolMode' prop for enhanced tool mode support (langflow-…

…ai#4483)

* fix: update getIconName function to support optional parameters and add tool mode handling

* Add 'isToolMode' prop to components for tool mode support

- Introduced 'isToolMode' prop across various components to enable tool mode functionality.
- Updated icon logic in textAreaComponent to use 'getIconName' with 'isToolMode'.
- Passed 'isToolMode' prop through parameterRenderComponent and related components.
- Adjusted inputGlobalComponent and NodeInputField to handle 'isToolMode' for conditional rendering.

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

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

@@ -184,6 +184,7 @@ export default function NodeInputField({
             nodeClass={data.node!}
             disabled={disabled}
             placeholder={isToolMode ? DEFAULT_TOOLSET_PLACEHOLDER : undefined}
+            isToolMode={isToolMode}
           />
         )}
       </div>

src/frontend/src/components/inputComponent/components/helpers/get-icon-name.ts

@@ -1,9 +1,11 @@
 export const getIconName = (
-  disabled: boolean,
-  selectedOption: string,
-  optionsIcon: string,
-  nodeStyle: boolean,
+  disabled?: boolean,
+  selectedOption?: string,
+  optionsIcon?: string,
+  nodeStyle?: boolean,
+  isToolMode?: boolean,
 ) => {
+  if (isToolMode) return "Hammer";
   if (disabled) return "lock";
   if (selectedOption && nodeStyle) return "GlobeOkIcon";
   return optionsIcon;

src/frontend/src/components/inputComponent/index.tsx

@@ -38,6 +38,7 @@ export default function InputComponent({
   name,
   onChangeFolderName,
   nodeStyle,
+  isToolMode,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
@@ -183,6 +184,7 @@ export default function InputComponent({
                 selectedOption!,
                 optionsIcon,
                 nodeStyle!,
+                isToolMode!,
               )}
               className={cn(
                 disabled ? "cursor-grab text-placeholder" : "cursor-pointer",

src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx

@@ -22,6 +22,7 @@ export default function InputGlobalComponent({
   password,
   editNode = false,
   placeholder,
+  isToolMode = false,
 }: InputProps<string, InputGlobalComponentType>): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
@@ -137,6 +138,7 @@ export default function InputGlobalComponent({
           { skipSnapshot },
         );
       }}
+      isToolMode={isToolMode}
     />
   );
 }

src/frontend/src/components/parameterRenderComponent/components/strRenderComponent/index.tsx

@@ -9,7 +9,8 @@ export function StrRenderComponent({
   placeholder,
   ...baseInputProps
 }: InputProps<string, StrRenderComponentType>) {
-  const { handleOnNewValue, id, disabled, editNode, value } = baseInputProps;
+  const { handleOnNewValue, id, disabled, editNode, value, isToolMode } =
+    baseInputProps;
 
   if (!templateData.options) {
     return templateData.multiline ? (
@@ -25,6 +26,7 @@ export function StrRenderComponent({
           }
         }}
         id={`textarea_${id}`}
+        isToolMode={isToolMode}
       />
     ) : (
       <InputGlobalComponent
@@ -33,6 +35,7 @@ export function StrRenderComponent({
         load_from_db={templateData.load_from_db}
         placeholder={placeholder}
         id={"input-" + name}
+        isToolMode={isToolMode}
       />
     );
   }

src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx

@@ -1,3 +1,4 @@
+import { getIconName } from "@/components/inputComponent/components/helpers/get-icon-name";
 import { GRADIENT_CLASS } from "@/constants/constants";
 import ComponentTextModal from "@/modals/textAreaModal";
 import { useRef, useState } from "react";
@@ -59,6 +60,7 @@ export default function TextAreaComponent({
   updateVisibility,
   password,
   placeholder,
+  isToolMode = false,
 }: InputProps<string, TextAreaComponentType>): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -106,7 +108,7 @@ export default function TextAreaComponent({
 
       <IconComponent
         dataTestId={`button_open_text_area_modal_${id}${editNode ? "_advanced" : ""}`}
-        name={disabled ? "lock" : "Scan"}
+        name={getIconName(disabled, "", "", false, isToolMode) || "Scan"}
         className={cn(
           "cursor-pointer bg-background",
           externalLinkIconClasses.icon,

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

@@ -31,6 +31,7 @@ export function ParameterRenderComponent({
   nodeClass,
   disabled,
   placeholder,
+  isToolMode,
 }: {
   handleOnNewValue: handleOnNewValueType;
   name: string;
@@ -42,6 +43,7 @@ export function ParameterRenderComponent({
   nodeClass: APIClassType;
   disabled: boolean;
   placeholder?: string;
+  isToolMode?: boolean;
 }) {
   const id = (
     templateData.type +
@@ -61,6 +63,7 @@ export function ParameterRenderComponent({
       handleNodeClass,
       readonly: templateData.readonly,
       placeholder,
+      isToolMode,
     };
     if (TEXT_FIELD_TYPES.includes(templateData.type ?? "")) {
       if (templateData.list) {

src/frontend/src/components/parameterRenderComponent/types.ts

@@ -14,6 +14,7 @@ export type BaseInputProps<valueType = any> = {
   handleNodeClass?: (value: any, code?: string, type?: string) => void;
   readonly?: boolean;
   placeholder?: string;
+  isToolMode?: boolean;
 };
 
 // Generic type for composing input props

src/frontend/src/customization/components/custom-parameter.tsx

@@ -14,6 +14,7 @@ export function CustomParameterComponent({
   nodeClass,
   disabled,
   placeholder,
+  isToolMode,
 }: {
   handleOnNewValue: handleOnNewValueType;
   name: string;
@@ -25,6 +26,7 @@ export function CustomParameterComponent({
   nodeClass: APIClassType;
   disabled: boolean;
   placeholder?: string;
+  isToolMode?: boolean;
 }) {
   return (
     <ParameterRenderComponent
@@ -38,6 +40,7 @@ export function CustomParameterComponent({
       nodeClass={nodeClass}
       disabled={disabled}
       placeholder={placeholder}
+      isToolMode={isToolMode}
     />
   );
 }

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

@@ -40,6 +40,7 @@ export type InputComponentType = {
   isObjectOption?: boolean;
   onChangeFolderName?: (e: any) => void;
   nodeStyle?: boolean;
+  isToolMode?: boolean;
 };
 export type DropDownComponent = {
   disabled?: boolean;