feat: standardize node output icons with TextSearch and Chevrons (#5600)

* ✨ (NodeInputField): Update styling to include padding-bottom when lastInput is true for better UI appearance
📝 (NodeOutputfield): Import TextSearch component from lucide-react library for future use
🔧 (RenderInputParameters): Simplify logic for determining lastInput in NodeInputField component
🔧 (GenericNode): Change icon displayed on HiddenOutputsButton based on showHiddenOutputs state
🔧 (GenericNode): Update tooltip content to include the number of hiddenOutputs when toggling visibility
🔧 (sliderComponent): Remove unnecessary padding-bottom from SliderComponent for better layout
📝 (constants.ts): Update tooltip text for better clarity and consistency with action names

* ✨ (NodeOutputfield/index.tsx): Update import statement for IconComponent to include ForwardedIconComponent for better organization and clarity
🐛 (chatInputOutputUser-shard-0.spec.ts, chatInputOutputUser-shard-1.spec.ts): Fix references to 'ScanEye' icon to 'TextSearchIcon' for consistency and accuracy in tests

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

@@ -108,8 +108,8 @@ export default function NodeInputField({
     <div
       ref={ref}
       className={cn(
-        "relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
+        "relative flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
-        lastInput ? "rounded-b-[0.69rem]" : "",
+        lastInput ? "rounded-b-[0.69rem] pb-5" : "",
         isToolMode && "bg-primary/10",
         (name === "code" && type === "code") || (name.includes("code") && proxy)
           ? "hidden"

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

@@ -1,8 +1,11 @@
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import { useUpdateNodeInternals } from "@xyflow/react";
 import { cloneDeep } from "lodash";
+import { TextSearch } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { default as IconComponent } from "../../../../components/common/genericIconComponent";
+import ForwardedIconComponent, {
+  default as IconComponent,
+} from "../../../../components/common/genericIconComponent";
 import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
 import useFlowStore from "../../../../stores/flowStore";
@@ -113,7 +116,9 @@ const InspectButton = memo(
       unstyled
       onClick={onClick}
     >
-      <ScanEyeIcon
+      <IconComponent
+        name="TextSearchIcon"
+        strokeWidth={ICON_STROKE_WIDTH}
         className={cn(
           "icon-size",
           isToolMode

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

@@ -87,10 +87,7 @@ const RenderInputParameters = ({
 
       return (
         <NodeInputField
-          lastInput={
+          lastInput={!(shownOutputs.length > 0 || showHiddenOutputs)}
-            idx === templateFields.length - 1 &&
-            !(shownOutputs.length > 0 || showHiddenOutputs)
-          }
           key={memoizedKey}
           data={data}
           colors={memoizedColor.colors}

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

@@ -48,11 +48,11 @@ const HiddenOutputsButton = memo(
   }) => (
     <Button
       unstyled
-      className="group flex h-6 w-6 items-center justify-center rounded-full border bg-background hover:border-foreground hover:text-foreground"
+      className="group m-auto h-[1.75rem] w-[1.75rem] place-items-center items-center rounded-full border bg-muted hover:text-foreground"
       onClick={onClick}
     >
       <ForwardedIconComponent
-        name={showHiddenOutputs ? "EyeOff" : "Eye"}
+        name={showHiddenOutputs ? "ChevronsDownUp" : "ChevronsUpDown"}
         strokeWidth={1.5}
         className="h-4 w-4 text-placeholder-foreground group-hover:text-foreground"
       />
@@ -455,8 +455,8 @@ function GenericNode({
                 <ShadTooltip
                   content={
                     showHiddenOutputs
-                      ? TOOLTIP_HIDDEN_OUTPUTS
+                      ? `${TOOLTIP_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
-                      : TOOLTIP_OPEN_HIDDEN_OUTPUTS
+                      : `${TOOLTIP_OPEN_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
                   }
                 >
                   <div

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

@@ -198,7 +198,7 @@ export default function SliderComponent({
   const ringClassInputClass = "ring-[1px] ring-slider-input-border";
 
   return (
-    <div className="w-full rounded-lg pb-2">
+    <div className="w-full rounded-lg">
       <Case condition={!sliderButtons}>
         <div className="noflow nowheel nopan nodelete nodrag flex items-center justify-end">
           <div

src/frontend/src/constants/constants.ts

@@ -686,8 +686,8 @@ export const TOOLTIP_OUTDATED_NODE =
 
 export const CHAT_SECOND_INITIAL_TEXT = "to inspect previous messages.";
 
-export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Show hidden outputs";
+export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Expand hidden outputs";
-export const TOOLTIP_HIDDEN_OUTPUTS = "Hide outputs";
+export const TOOLTIP_HIDDEN_OUTPUTS = "Collapse hidden outputs";
 
 export const ZERO_NOTIFICATIONS = "No new notifications";
 

src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts

@@ -80,11 +80,11 @@ test(
 
     await page.getByText("Close", { exact: true }).click();
 
-    await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
       timeout: 30000,
     });
 
-    await page.getByTestId("icon-ScanEye").nth(4).click();
+    await page.getByTestId("icon-TextSearchIcon").nth(4).click();
 
     await page.getByText("Restart").isHidden();
   },

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts

@@ -34,11 +34,11 @@ test(
       timeout: 15000,
     });
 
-    await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
       timeout: 30000,
     });
 
-    await page.getByTestId("icon-ScanEye").nth(4).click();
+    await page.getByTestId("icon-TextSearchIcon").nth(4).click();
 
     await page.getByText("Sender", { exact: true }).isVisible();
     await page.getByText("Type", { exact: true }).isVisible();