Merge branch 'zustand/io/migration' into cz/new-tests

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -110,7 +110,7 @@ export default function ChatMessage({
       >
         <div
           className={classNames(
-            "mr-3 mt-1 flex max-w-16 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
+            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
           )}
         >
           <div className="flex flex-col items-center gap-1">
@@ -126,7 +126,7 @@ export default function ChatMessage({
                 alt={!chat.isSend ? "robot_image" : "male_technology"}
               />
             </div>
-            <span className="max-w-16 truncate text-xs">
+            <span className="max-w-24 truncate text-xs">
               {chat.sender_name}
             </span>
           </div>

src/frontend/src/modals/IOModal/index.tsx

@@ -116,10 +116,13 @@ export default function IOModal({
   }
 
   useEffect(() => {
-    setSelectedViewField(startView());
-    setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
+    if(selectedTab!==2) setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
   }, [allNodes]);
 
+  useEffect(() => {
+    setSelectedViewField(startView());
+  },[open])
+
   return (
     <BaseModal
       size={selectedTab === 0 ? "large-thin" : "large"}

src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx

@@ -3,13 +3,18 @@ import { useNavigate } from "react-router-dom";
 //@ts-ignore
 import { ReactComponent as TransferFiles } from "../../../../assets/undraw_transfer_files_re_a2a9.svg";
 //@ts-ignore
-import { ReactComponent as BasicPrompt } from "../../../../assets/undraw_design_components_9vy6.svg";
 //@ts-ignore
-import { ReactComponent as ChatWithHistory } from "../../../../assets/undraw_mobile_messages_re_yx8w.svg";
-//@ts-ignore
-import { ReactComponent as Assistant } from "../../../../assets/undraw_team_collaboration_re_ow29.svg";
 //@ts-ignore
 import { ReactComponent as APIRequest } from "../../../../assets/undraw_real_time_analytics_re_yliv.svg";
+//@ts-ignore
+import { ReactComponent as PromptChaining } from "../../../../assets/undraw_cloud_docs_re_xjht.svg";
+//@ts-ignore
+import { ReactComponent as ChatBot } from "../../../../assets/undraw_chat_bot_re_e2gj.svg";
+//@ts-ignore
+import { ReactComponent as BlogPost } from "../../../../assets/undraw_blog_post_re_fy5x.svg";
+//@ts-ignore
+import { ReactComponent as BasicPrompt } from "../../../../assets/undraw_short_bio_re_fmx0.svg";
+
 import {
   Card,
   CardContent,
@@ -28,12 +33,12 @@ export default function UndrawCardComponent({
 
   function selectImage() {
     switch (flow.name) {
-      case "Data Ingestion":
+      case "Blog Writer":
         return (
-          <TransferFiles
+          <BlogPost
             style={{
-              width: "80%",
-              height: "80%",
+              width: "65%",
+              height: "65%",
               preserveAspectRatio: "xMidYMid meet",
             }}
           />
@@ -42,15 +47,15 @@ export default function UndrawCardComponent({
         return (
           <BasicPrompt
             style={{
-              width: "80%",
-              height: "80%",
+              width: "65%",
+              height: "65%",
               preserveAspectRatio: "xMidYMid meet",
             }}
           />
         );
-      case "Chat with memory":
+      case "Memory Chatbot":
         return (
-          <ChatWithHistory
+          <ChatBot
             style={{
               width: "70%",
               height: "70%",
@@ -68,9 +73,19 @@ export default function UndrawCardComponent({
             }}
           />
         );
-      case "Assistant":
+      case "Document QA":
         return (
-          <Assistant
+          <TransferFiles
+            style={{
+              width: "80%",
+              height: "80%",
+              preserveAspectRatio: "xMidYMid meet",
+            }}
+          />
+        );
+      case "Prompt Chaining":
+        return (
+          <PromptChaining
             style={{
               width: "80%",
               height: "80%",

src/frontend/src/modals/NewFlowModal/index.tsx

@@ -23,11 +23,41 @@ export default function NewFlowModal({
           /> */}
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className=" grid h-full w-full grid-cols-3 gap-3 overflow-auto p-4 custom-scroll">
+        <div className=" mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll">
           <NewFlowCardComponent />
-          {examples.map((example, idx) => {
+          {/* {examples.map((example, idx) => {
             return <UndrawCardComponent key={idx} flow={example} />;
-          })}
+          })} */}
+          {examples.find((e) => e.name == "Basic Prompting") && (
+            <UndrawCardComponent
+              key={1}
+              flow={examples.find((e) => e.name == "Basic Prompting")!}
+            />
+          )}
+          {examples.find((e) => e.name == "Memory Chatbot") && (
+            <UndrawCardComponent
+              key={1}
+              flow={examples.find((e) => e.name == "Memory Chatbot")!}
+            />
+          )}
+          {examples.find((e) => e.name == "Document QA") && (
+            <UndrawCardComponent
+              key={1}
+              flow={examples.find((e) => e.name == "Document QA")!}
+            />
+          )}
+          {examples.find((e) => e.name == "Prompt Chaining") && (
+            <UndrawCardComponent
+              key={1}
+              flow={examples.find((e) => e.name == "Prompt Chaining")!}
+            />
+          )}
+          {examples.find((e) => e.name == "Blog Writer") && (
+            <UndrawCardComponent
+              key={1}
+              flow={examples.find((e) => e.name == "Blog Writer")!}
+            />
+          )}
         </div>
       </BaseModal.Content>
     </BaseModal>

src/frontend/src/modals/baseModal/index.tsx

@@ -141,7 +141,7 @@ function BaseModal({
       break;
     case "three-cards":
       minWidth = "min-w-[1066px]";
-      height = "h-[80vh]";
+      height = "h-fit";
       break;
     case "large-thin":
       minWidth = "min-w-[65vw]";

src/frontend/src/modals/shareModal/index.tsx

@@ -20,6 +20,7 @@ import {
   downloadNode,
   removeApiKeys,
   removeFileNameFromComponents,
+  removeGlobalVariableFromComponents,
 } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
 import ConfirmationModal from "../ConfirmationModal";
@@ -100,6 +101,7 @@ export default function ShareModal({
   const handleShareComponent = async (update = false) => {
     //remove file names from flows before sharing
     removeFileNameFromComponents(component);
+    removeGlobalVariableFromComponents(component);
     const flow: FlowType = removeApiKeys({
       id: component!.id,
       data: component!.data,

src/frontend/src/utils/reactflowUtils.ts

@@ -1192,6 +1192,20 @@ export function removeFileNameFromComponents(flow: FlowType) {
   });
 }
 
+export function removeGlobalVariableFromComponents(flow: FlowType) {
+  flow.data!.nodes.forEach((node: NodeType) => {
+    Object.keys(node.data.node!.template).forEach((field) => {
+      if (node.data?.node?.template[field]?.load_from_db) {
+        node.data.node!.template[field].value = "";
+        node.data.node!.template[field].load_from_db = false;
+      }
+    });
+    if (node.data.node?.flow) {
+      removeGlobalVariableFromComponents(node.data.node.flow);
+    }
+  });
+}
+
 export function typesGenerator(data: APIObjectType) {
   return Object.keys(data)
     .reverse()