🎨 style(GenericNode/index.tsx): refactor GenericNode component to use a more readable and maintainable code structure

✨ feat(GenericNode/index.tsx): add documentation link to GenericNode component and display it as a tooltip when hovering over the info icon.

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

@@ -14,7 +14,7 @@ import NodeModal from "../../modals/NodeModal";
 import Tooltip from "../../components/TooltipComponent";
 import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-import { Info } from "lucide-react";
+import { FileText, Info } from "lucide-react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
 
@@ -36,6 +36,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
+  const refHtml = useRef(null);
 
   // useEffect(() => {
   //   if (reactFlowInstance) {
@@ -69,6 +70,22 @@ export default function GenericNode({
 
   useEffect(() => {}, [closePopUp, data.node.template]);
 
+  useEffect(() => {
+    refHtml.current = (
+      <div className="flex">
+        <span>{`${data.node.display_name} Documentation`}</span>
+        <span
+          className="self-center"
+          style={{
+            color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+          }}
+        >
+          <FileText className="h-4 w-4 ml-2" />
+        </span>
+      </div>
+    );
+  }, []);
+
   return (
     <>
       <NodeToolbar>
@@ -93,7 +110,7 @@ export default function GenericNode({
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate">
+            <div className="ml-2 truncate flex">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
@@ -102,6 +119,29 @@ export default function GenericNode({
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
+              <div className="">
+                {data.node.documentation !== "" && (
+                  <ShadTooltip
+                    open={true}
+                    delayDuration={1000}
+                    content={refHtml.current}
+                  >
+                    <a
+                      href={data.node.documentation}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Info
+                        style={{
+                          color:
+                            nodeColors[types[data.type]] ?? nodeColors.unknown,
+                        }}
+                        className="ml-2 self-center w-4 h-4"
+                      />
+                    </a>
+                  </ShadTooltip>
+                )}
+              </div>
             </div>
           </div>
           <div className="flex gap-3">
@@ -114,23 +154,6 @@ export default function GenericNode({
             ></button>
           </div>
           <div className="flex gap-3">
-            <div className=" px-5 pb-3 mr-5">
-              {data.node.documentation !== "" && (
-                <Tooltip
-                  title={
-                    <a
-                      href={data.node.documentation}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {`Open ${data.node.display_name} documentation`}
-                    </a>
-                  }
-                >
-                  <Info />
-                </Tooltip>
-              )}
-            </div>
             <div>
               <Tooltip
                 title={