Merge remote-tracking branch 'origin/ioView' into zustand/io/migration

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

@@ -168,6 +168,7 @@ export default function GenericNode({
     buildStatus: BuildStatus | undefined,
     validationStatus: validationStatusType | null
   ) => {
+    console.log(buildStatus);
     const isValid = validationStatus && validationStatus.valid;
     if (isValid) {
       return "green-status";
@@ -193,7 +194,6 @@ export default function GenericNode({
   };
   const renderIconPlayOrPauseComponents = (
     buildStatus: BuildStatus | undefined,
-    validationStatus: validationStatusType | null
   ) => {
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading />;
@@ -201,7 +201,7 @@ export default function GenericNode({
       return (
         <IconComponent
           name="Play"
-          className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground hover:text-medium-indigo"
+          className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground group-hover:text-medium-indigo"
         />
       );
     }
@@ -468,44 +468,21 @@ export default function GenericNode({
                 variant="secondary"
                 className={"group h-9 px-1.5"}
                 onClick={() => {
-                  if (buildStatus === BuildStatus.BUILDING || isBuilding)
+                  if (data?.buildStatus === BuildStatus.BUILDING || isBuilding)
                     return;
                   buildFlow(data.id);
                 }}
               >
                 <div>
                   <ShadTooltip
-                    styleClasses="cursor-default"
                     content={
-                      buildStatus === BuildStatus.BUILDING ? (
-                        <span>Building...</span>
-                      ) : !validationStatus ? (
-                        <span className="flex">
-                          Build{" "}
-                          <IconComponent
-                            name="Play"
-                            className=" h-5 stroke-status-green stroke-2"
-                          />{" "}
-                          flow to validate status.
-                        </span>
-                      ) : (
-                        <div className="max-h-96 overflow-auto">
-                          {typeof validationStatus.params === "string"
-                            ? `${durationString}\n${validationStatus.params}`
-                                .split("\n")
-                                .map((line, index) => (
-                                  <div key={index}>{line}</div>
-                                ))
-                            : durationString}
-                        </div>
-                      )
+                      "Build"
                     }
                     side="bottom"
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
                         buildStatus,
-                        validationStatus
                       )}
                     </div>
                   </ShadTooltip>
@@ -514,7 +491,6 @@ export default function GenericNode({
             )}
             <div className="">
               <ShadTooltip
-                styleClasses="cursor-default"
                 content={
                   data?.buildStatus === BuildStatus.BUILDING ? (
                     <span>Building...</span>
@@ -530,7 +506,6 @@ export default function GenericNode({
                     </div>
                   )
                 }
-                side="bottom"
               >
                 <div>
                   {renderIconStatusComponents(

src/frontend/src/components/IOview/index.tsx

@@ -1,7 +1,11 @@
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { NodeType } from "../../types/flow";
+import { validateNodes } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
@@ -16,19 +20,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
+  const chatInput = useFlowStore((state) => state.inputs).find(
+    (input) => input.type === "ChatInput"
+  );
   const outputs = useFlowStore((state) => state.outputs).filter(
     (output) => output.type !== "ChatOutput"
   );
+  const chatOutput = useFlowStore((state) => state.outputs).find(
+    (output) => output.type === "ChatOutput"
+  );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       (inputs.some((input) => input.id === node.id) ||
-        outputs.some((output) => output.id === node.id)) &&
-      node.type !== "ChatInput" &&
-      node.type !== "ChatOutput"
-  );
-  const haveChat = useFlowStore((state) => state.outputs).some(
-    (output) => output.type === "ChatOutput"
+        outputs.some((output) => output.id === node.id))
   );
+  const haveChat =
+    chatInput || chatOutput
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
@@ -36,6 +43,45 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
+  const { getNode, setNode, buildFlow, getFlow } = useFlowStore();
+  const { setErrorData } = useAlertStore();
+  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+  const [lockChat, setLockChat] = useState(false);
+  const [chatValue, setChatValue] = useState("");
+  const isBuilding = useFlowStore((state) => state.isBuilding);
+
+  async function sendMessage(count = 1): Promise<void> {
+    if (isBuilding) return;
+    const { nodes, edges } = getFlow();
+    let nodeValidationErrors = validateNodes(nodes, edges);
+    if (nodeValidationErrors.length === 0) {
+      setIsBuilding(true);
+      setLockChat(true);
+      setChatValue("");
+      const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+      if (chatInputNode) {
+        let newNode = cloneDeep(chatInputNode);
+        newNode.data.node!.template["message"].value = chatValue;
+        setNode(chatInput!.id, newNode);
+      }
+      for (let i = 0; i < count; i++) {
+        await buildFlow().catch((err) => {
+          console.error(err);
+          setLockChat(false);
+        });
+      }
+      setLockChat(false);
+
+      //set chat message in the flow and run build
+      //@ts-ignore
+    } else {
+      setErrorData({
+        title: "Oops! Looks like you missed some required information:",
+        list: nodeValidationErrors,
+      });
+    }
+  }
+
   useEffect(() => {
     setSelectedViewField(undefined);
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
@@ -43,7 +89,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
 
   return (
     <BaseModal
-      size={haveChat ? "large" : "small"}
+      size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
       open={open}
       setOpen={setOpen}
     >
@@ -60,178 +106,196 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="flex-max-width mt-2 h-[80vh]">
-          {selectedTab !== 0 && (
-            <div
-              className={cn(
-                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start overflow-auto scrollbar-hide",
-                haveChat ? "w-2/6" : "w-full"
-              )}
-            >
-              <Tabs
-                value={selectedTab.toString()}
-                className={"api-modal-tabs "}
-                onValueChange={(value) => {
-                  setSelectedTab(Number(value));
-                }}
+        <div className="flex h-full flex-col">
+          <div className="flex-max-width mt-2 h-full">
+            {selectedTab !== 0 && (
+              <div
+                className={cn(
+                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start overflow-auto scrollbar-hide",
+                  haveChat ? "w-2/6" : "w-full"
+                )}
               >
-                <div className="api-modal-tablist-div">
-                  <TabsList>
-                    {inputs.length > 0 && (
-                      <TabsTrigger value={"1"}>Inputs</TabsTrigger>
-                    )}
-                    {outputs.length > 0 && (
-                      <TabsTrigger value={"2"}>Outputs</TabsTrigger>
-                    )}
-                  </TabsList>
-                </div>
-
-                <TabsContent
-                  value={"1"}
-                  className="api-modal-tabs-content mt-4"
+                <Tabs
+                  value={selectedTab.toString()}
+                  className={
+                    "flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center"
+                  }
+                  onValueChange={(value) => {
+                    setSelectedTab(Number(value));
+                  }}
                 >
-                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                    <IconComponent className="h-4 w-4" name={"Type"} />
-                    Text Inputs
+                  <div className="api-modal-tablist-div">
+                    <TabsList>
+                      {inputs.length > 0 && (
+                        <TabsTrigger value={"1"}>Inputs</TabsTrigger>
+                      )}
+                      {outputs.length > 0 && (
+                        <TabsTrigger value={"2"}>Outputs</TabsTrigger>
+                      )}
+                    </TabsList>
                   </div>
-                  {nodes
-                    .filter((node) =>
-                      inputs.some((input) => input.id === node.id)
-                    )
-                    .map((node, index) => {
-                      const input = inputs.find(
-                        (input) => input.id === node.id
-                      )!;
-                      return (
-                        <div
-                          className="file-component-accordion-div"
-                          key={index}
-                        >
-                          <AccordionComponent
-                            trigger={
-                              <div className="file-component-badge-div">
-                                <Badge variant="gray" size="md">
-                                  {input.id}
-                                </Badge>
-                                {haveChat && (
-                                  <div
-                                    className="-mb-1 pr-4"
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      setSelectedViewField(input);
-                                    }}
-                                  >
-                                    <IconComponent
-                                      className="h-4 w-4"
-                                      name="ExternalLink"
-                                    ></IconComponent>
-                                  </div>
-                                )}
-                              </div>
-                            }
-                            key={index}
-                            keyValue={input.id}
-                          >
-                            <div className="file-component-tab-column">
-                              <div className="">
-                                {input && (
-                                  <IOInputField
-                                    inputType={input.type}
-                                    inputId={input.id}
-                                  />
-                                )}
-                              </div>
-                            </div>
-                          </AccordionComponent>
-                        </div>
-                      );
-                    })}
-                </TabsContent>
-                <TabsContent
-                  value={"2"}
-                  className="api-modal-tabs-content mt-4"
-                >
-                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                    <IconComponent className="h-4 w-4" name={"Braces"} />
-                    Prompt Outputs
-                  </div>
-                  {nodes
-                    .filter((node) =>
-                      outputs.some((output) => output.id === node.id)
-                    )
-                    .map((node, index) => {
-                      const output = outputs.find(
-                        (output) => output.id === node.id
-                      )!;
-                      return (
-                        <div
-                          className="file-component-accordion-div"
-                          key={index}
-                        >
-                          <AccordionComponent
-                            trigger={
-                              <div className="file-component-badge-div">
-                                <Badge variant="gray" size="md">
-                                  {output.id}
-                                </Badge>
-                                {haveChat && (
-                                  <div
-                                    className="-mb-1 pr-4"
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      setSelectedViewField(output);
-                                    }}
-                                  >
-                                    <IconComponent
-                                      className="h-4 w-4"
-                                      name="ExternalLink"
-                                    ></IconComponent>
-                                  </div>
-                                )}
-                              </div>
-                            }
-                            key={index}
-                            keyValue={output.id}
-                          >
-                            <div className="file-component-tab-column">
-                              <div className="">
-                                {output && (
-                                  <IOOutputView
-                                    outputType={output.type}
-                                    outputId={output.id}
-                                  />
-                                )}
-                              </div>
-                            </div>
-                          </AccordionComponent>
-                        </div>
-                      );
-                    })}
-                </TabsContent>
-              </Tabs>
-            </div>
-          )}
 
-          {haveChat ? (
-            selectedViewField ? (
-              inputs.some((input) => input.id === selectedViewField.id) ? (
-                <IOInputField
-                  inputType={selectedViewField.type!}
-                  inputId={selectedViewField.id!}
-                />
+                  <TabsContent
+                    value={"1"}
+                    className="api-modal-tabs-content mt-4"
+                  >
+                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
+                      <IconComponent className="h-4 w-4" name={"Type"} />
+                      Text Inputs
+                    </div>
+                    {nodes
+                      .filter((node) =>
+                        inputs.some((input) => input.id === node.id)
+                      )
+                      .map((node, index) => {
+                        const input = inputs.find(
+                          (input) => input.id === node.id
+                        )!;
+                        return (
+                          <div
+                            className="file-component-accordion-div"
+                            key={index}
+                          >
+                            <AccordionComponent
+                              trigger={
+                                <div className="file-component-badge-div">
+                                  <Badge variant="gray" size="md">
+                                    {input.id}
+                                  </Badge>
+                                  {haveChat && (
+                                    <div
+                                      className="-mb-1 pr-4"
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        setSelectedViewField(input);
+                                      }}
+                                    >
+                                      <IconComponent
+                                        className="h-4 w-4"
+                                        name="ExternalLink"
+                                      ></IconComponent>
+                                    </div>
+                                  )}
+                                </div>
+                              }
+                              key={index}
+                              keyValue={input.id}
+                            >
+                              <div className="file-component-tab-column">
+                                <div className="">
+                                  {input && (
+                                    <IOInputField
+                                      inputType={input.type}
+                                      inputId={input.id}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            </AccordionComponent>
+                          </div>
+                        );
+                      })}
+                  </TabsContent>
+                  <TabsContent
+                    value={"2"}
+                    className="api-modal-tabs-content mt-4"
+                  >
+                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
+                      <IconComponent className="h-4 w-4" name={"Braces"} />
+                      Prompt Outputs
+                    </div>
+                    {nodes
+                      .filter((node) =>
+                        outputs.some((output) => output.id === node.id)
+                      )
+                      .map((node, index) => {
+                        const output = outputs.find(
+                          (output) => output.id === node.id
+                        )!;
+                        return (
+                          <div
+                            className="file-component-accordion-div"
+                            key={index}
+                          >
+                            <AccordionComponent
+                              trigger={
+                                <div className="file-component-badge-div">
+                                  <Badge variant="gray" size="md">
+                                    {output.id}
+                                  </Badge>
+                                  {haveChat && (
+                                    <div
+                                      className="-mb-1 pr-4"
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        setSelectedViewField(output);
+                                      }}
+                                    >
+                                      <IconComponent
+                                        className="h-4 w-4"
+                                        name="ExternalLink"
+                                      ></IconComponent>
+                                    </div>
+                                  )}
+                                </div>
+                              }
+                              key={index}
+                              keyValue={output.id}
+                            >
+                              <div className="file-component-tab-column">
+                                <div className="">
+                                  {output && (
+                                    <IOOutputView
+                                      outputType={output.type}
+                                      outputId={output.id}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            </AccordionComponent>
+                          </div>
+                        );
+                      })}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            )}
+
+            {haveChat ? (
+              selectedViewField ? (
+                inputs.some((input) => input.id === selectedViewField.id) ? (
+                  <IOInputField
+                    inputType={selectedViewField.type!}
+                    inputId={selectedViewField.id!}
+                  />
+                ) : (
+                  <IOOutputView
+                    outputType={selectedViewField.type!}
+                    outputId={selectedViewField.id!}
+                  />
+                )
               ) : (
-                <IOOutputView
-                  outputType={selectedViewField.type!}
-                  outputId={selectedViewField.id!}
+                <NewChatView
+                  sendMessage={sendMessage}
+                  chatValue={chatValue}
+                  setChatValue={setChatValue}
+                  lockChat={lockChat}
+                  setLockChat={setLockChat}
                 />
               )
             ) : (
-              <NewChatView />
-            )
-          ) : (
-            <div className="absolute bottom-8 right-8">
-              <Button className="px-3">
-                <IconComponent name="Play" className="h-6 w-6" />
+              <div className="absolute bottom-8 right-8"></div>
+            )}
+          </div>
+          {!haveChat && (
+            <div className="flex w-full justify-end pt-6">
+              <Button variant={"outline"} className="px-3 flex gap-2" onClick={() => sendMessage(1)}>
+                
+                <IconComponent
+                  name={isBuilding ? "Loader2" : "Play"}
+                  className={cn("h-4 w-4", isBuilding ? "animate-spin" : "fill-current text-medium-indigo")}
+                />
+                Run Flow
               </Button>
             </div>
           )}

src/frontend/src/components/ViewTriggers/chat/index.tsx

@@ -21,7 +21,7 @@ export default function ChatTrigger({}): JSX.Element {
       >
         <div className="flex gap-3">
           <IconComponent
-            name="Sliders"
+            name="Zap"
             className={"message-button-icon h-6 w-6 transition-all"}
           />
         </div>

src/frontend/src/components/newChatView/chatMessage/index.tsx

@@ -70,7 +70,7 @@ export default function ChatMessage({
 
   useEffect(() => {
     // This effect is specifically for calling updateChat after streaming ends
-    if (!isStreaming && streamUrl === null) {
+    if (!isStreaming && streamUrl) {
       if (updateChat) {
         updateChat(chat, chatMessage, streamUrl);
       }

src/frontend/src/components/newChatView/index.tsx

@@ -1,4 +1,4 @@
-import _, { cloneDeep } from "lodash";
+import _ from "lodash";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { deleteFlowPool } from "../../controllers/API";
@@ -11,30 +11,21 @@ import {
   ChatOutputType,
   FlowPoolObjectType,
 } from "../../types/chat";
-import { NodeType } from "../../types/flow";
-import { validateNodes } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
-export default function NewChatView(): JSX.Element {
-  const [chatValue, setChatValue] = useState("");
-  const {
-    flowPool,
-    outputs,
-    inputs,
-    getNode,
-    setNode,
-    buildFlow,
-    getFlow,
-    CleanFlowPool,
-  } = useFlowStore();
-  const { setErrorData, setNoticeData } = useAlertStore();
+export default function NewChatView({
+  sendMessage,
+  chatValue,
+  setChatValue,
+  lockChat,
+  setLockChat,
+}): JSX.Element {
+  const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
+  const { setNoticeData } = useAlertStore();
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
-  const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
-  const isBuilding = useFlowStore((state) => state.isBuilding);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 
   const inputTypes = inputs.map((obj) => obj.type);
@@ -115,40 +106,6 @@ export default function NewChatView(): JSX.Element {
     }
   }, []);
 
-  async function sendMessage(count = 1): Promise<void> {
-    if (isBuilding) return;
-    const { nodes, edges } = getFlow();
-    let nodeValidationErrors = validateNodes(nodes, edges);
-    if (nodeValidationErrors.length === 0) {
-      setIsBuilding(true);
-      setLockChat(true);
-      setChatValue("");
-      const chatInputId = inputIds.find((inputId) =>
-        inputId.includes("ChatInput")
-      );
-      const chatInput: NodeType = getNode(chatInputId!) as NodeType;
-      if (chatInput) {
-        let newNode = cloneDeep(chatInput);
-        newNode.data.node!.template["message"].value = chatValue;
-        setNode(chatInputId!, newNode);
-      }
-      for (let i = 0; i < count; i++) {
-        await buildFlow().catch((err) => {
-          console.error(err);
-          setLockChat(false);
-        });
-      }
-      setLockChat(false);
-
-      //set chat message in the flow and run build
-      //@ts-ignore
-    } else {
-      setErrorData({
-        title: "Oops! Looks like you missed some required information:",
-        list: nodeValidationErrors,
-      });
-    }
-  }
   function clearChat(): void {
     setChatHistory([]);
     deleteFlowPool(currentFlowId).then((_) => {

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

@@ -66,6 +66,7 @@ interface BaseModalProps {
     | "small"
     | "medium"
     | "large"
+    | "large-thin"
     | "large-h-full"
     | "small-h-full"
     | "medium-h-full"
@@ -128,6 +129,10 @@ function BaseModal({
       minWidth = "min-w-[80vw]";
       height = "h-[80vh]";
       break;
+    case "large-thin":
+        minWidth = "min-w-[65vw]";
+        height = "h-[80vh]";
+        break;
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       break;

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

@@ -576,6 +576,7 @@ export default function FormModal({
                           chatHistory.length - 1 === index ? true : false
                         }
                         key={index}
+                        updateChat={() => {}}
                       />
                     ))
                   ) : (

src/frontend/src/style/applies.css

@@ -175,7 +175,7 @@
     @apply fixed bottom-4 right-4;
   }
   .message-button-icon {
-    @apply fill-chat-trigger stroke-chat-trigger stroke-1;
+    @apply fill-medium-indigo stroke-medium-indigo stroke-1;
   }
   .disabled-message-button-icon {
     @apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;

src/frontend/src/types/components/index.ts

@@ -524,11 +524,7 @@ export type chatMessagePropsType = {
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
-  updateChat?: (
-    chat: ChatMessageType,
-    message: string,
-    stream_url: string | null
-  ) => void;
+  updateChat: (chat: ChatMessageType, message: string, stream_url: string) => void;
 };
 
 export type formModalPropsType = {