From 5a18780acab7c8bc6972e92a25eb7b87c120168a Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 18 Oct 2024 17:24:10 +0100
Subject: [PATCH] feat(frontend): catch websocket textToAction event

---
 .../components/visual-editor/v2/Diagrams.tsx  | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/visual-editor/v2/Diagrams.tsx b/frontend/src/components/visual-editor/v2/Diagrams.tsx
index 6903189..edf3c5a 100644
--- a/frontend/src/components/visual-editor/v2/Diagrams.tsx
+++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx
@@ -51,11 +51,12 @@ import { EntityType, Format } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
 import { BlockPorts } from "@/types/visual-editor.types";
+import { useSocket, useSocketGetQuery } from "@/websocket/socket-hooks";
 
-import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
 import BlockDialog from "../BlockDialog";
 import { ZOOM_LEVEL } from "../constants";
 import { useVisualEditor } from "../hooks/useVisualEditor";
+import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
 
 const Diagrams = () => {
   const { t } = useTranslate();
@@ -79,15 +80,23 @@ const Diagrams = () => {
   const { searchPayload } = useSearch<IBlock>({
     $eq: [{ category: selectedCategoryId }],
   });
-  const { data: categories } = useFind(
+  const [hasTextToActions, setHasTextToActions] = useState(false);
+  const { data: categories, refetch } = useFind(
     { entity: EntityType.CATEGORY },
     {
       hasCount: false,
       initialSortState: [{ field: "createdAt", sort: "asc" }],
     },
     {
-      onSuccess([{ id, zoom, offset }]) {
-        if (id) {
+      onSuccess(categories) {
+        const { id, zoom, offset } = categories[0];
+        const aiGeneratedFlowId = categories.find(
+          (category) => category.label === "AI Flow",
+        )?.id;
+
+        if (aiGeneratedFlowId && hasTextToActions) {
+          setSelectedCategoryId?.(aiGeneratedFlowId);
+        } else if (id) {
           setSelectedCategoryId?.(id);
           if (engine?.getModel()) {
             setViewerOffset(offset || [0, 0]);
@@ -429,6 +438,23 @@ const Diagrams = () => {
     }
   };
 
+  useSocketGetQuery("/subscriber/subscribe/");
+
+  const { socket } = useSocket();
+
+  socket?.on(
+    "actions",
+    async (event: { op: "textToActions"; msg: string[] }) => {
+      if (
+        event?.op === "textToActions" &&
+        event.msg.includes("navigateToAiFlow")
+      ) {
+        setHasTextToActions(true);
+        await refetch();
+      }
+    },
+  );
+
   return (
     <div
       className="visual-editor"