Passed data through context to get form keys

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -10,6 +10,7 @@ import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
 
 import RadialProgressComponent from "../../RadialProgress";
+import { TabsContext } from "../../../contexts/tabsContext";
 
 export default function BuildTrigger({
   open,
@@ -24,6 +25,7 @@ export default function BuildTrigger({
 }) {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
   const { reactFlowInstance } = useContext(typesContext);
+  const { setTabsState } = useContext(TabsContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";
@@ -87,6 +89,17 @@ export default function BuildTrigger({
       } else if (parsedData.log) {
         // If the event is a log, log it
         setSuccessData({ title: parsedData.log });
+      } else if (parsedData.input_keys) {
+        setTabsState((old) => {
+          return {
+            ...old,
+            [flowId]: {
+              ...old[flowId],
+              formKeysData: parsedData,
+            
+            }
+          };
+        })
       } else {
         // Otherwise, process the data
         const isValid = processStreamResult(parsedData);

src/frontend/src/components/chatComponent/index.tsx

@@ -72,7 +72,7 @@ export default function Chat({ flow }: ChatType) {
             isBuilt={isBuilt}
           />
           <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-          <FormModal key={flow.id} flow={flow} open={openForm} setOpen={setOpenForm} />
+          <FormModal key={flow.id + "form"} flow={flow} open={openForm} setOpen={setOpenForm} />
           <ChatTrigger open={open || openForm} setOpen={setOpen} isBuilt={isBuilt} />
           <FormTrigger open={open || openForm} setOpen={setOpenForm} isBuilt={isBuilt} />
         </div>

src/frontend/src/contexts/tabsContext.tsx

@@ -597,6 +597,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           return {
             ...prev,
             [tabId]: {
+              ...prev[tabId],
               isPending: false,
             },
           };

src/frontend/src/modals/formModal/index.tsx

@@ -18,6 +18,7 @@ import { postValidateCode } from "../../controllers/API";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function FormModal({
   flow,
@@ -32,6 +33,7 @@ export default function FormModal({
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setNoticeData } = useContext(alertContext);
+  const { tabsState } = useContext(TabsContext);
   const ws = useRef<WebSocket | null>(null);
   const [lockChat, setLockChat] = useState(false);
   const isOpen = useRef(open);
@@ -49,6 +51,7 @@ export default function FormModal({
   }, [open]);
   useEffect(() => {
     id.current = flow.id;
+    console.log(tabsState[flow.id])
   }, [flow.id]);
 
   var isStream = false;

src/frontend/src/types/tabs/index.ts

@@ -33,5 +33,6 @@ export type TabsContextType = {
 export type TabsState = {
   [key: string]: {
     isPending: boolean;
+    formKeysData: {input_keys?: Array<string>, memory_keys?: Array<string>};
   };
 };