From d192b50f76e6af396ebb60e7a287cd6169b95014 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 23 Feb 2024 22:00:53 +0100
Subject: [PATCH 01/22] Refactored just logic of IOView

---
 src/frontend/src/components/IOview/index.tsx  | 222 ++++++++----------
 .../src/components/newChatView/index.tsx      |   2 +-
 src/frontend/src/constants/constants.ts       |   2 +-
 3 files changed, 105 insertions(+), 121 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index a85a98ac7..57569c7e7 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -1,9 +1,7 @@
-import { ReactNode, useState } from "react";
+import { useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
 import useFlowStore from "../../stores/flowStore";
-import { NodeType } from "../../types/flow";
-import { isInputType, isOutputType } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
@@ -14,60 +12,32 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 
 export default function IOView({ children, open, setOpen }): JSX.Element {
-  const inputs = useFlowStore((state) => state.inputs);
-  const outputs = useFlowStore((state) => state.outputs);
-  const inputIds = inputs.map((obj) => obj.id);
-  const outputIds = outputs.map((obj) => obj.id);
-  const nodes = useFlowStore((state) => state.nodes);
-  const setNode = useFlowStore((state) => state.setNode);
-  const categories = getCategories();
-  const [selectedCategory, setSelectedCategory] = useState<number>(0);
-  const [showChat, setShowChat] = useState<boolean>(false);
-  const [selectedView, setSelectedView] = useState<{
-    type: string;
-    id?: string;
-  }>(handleInitialView());
-
-  type CategoriesType = { name: string; icon: string };
-
-  function handleInitialView() {
-    if (
-      outputs.map((output) => output.type).includes("ChatOutput") ||
-      inputs.map((input) => input.type).includes("ChatInput")
-    ) {
-      return { type: "ChatOutput" };
-    }
-    return { type: "" };
-  }
-
-  function getCategories() {
-    const categories: CategoriesType[] = [];
-    if (inputs.filter((input) => input.type !== "ChatInput").length > 0)
-      categories.push({ name: "Inputs", icon: "TextCursorInput" });
-    if (outputs.filter((output) => output.type !== "ChatOutput").length > 0)
-      categories.push({ name: "Outputs", icon: "TerminalSquare" });
-    return categories;
-  }
-
-  function handleSelectChange(): ReactNode {
-    const { type, id } = selectedView;
-    if (type === "ChatOutput") return <NewChatView />;
-    if (isInputType(type))
-      return <IOInputField inputId={id!} inputType={type} />;
-    if (isOutputType(type))
-      return <IOOutputView outputId={id!} outputType={type} />;
-    else return undefined;
-  }
-
-  function UpdateAccordion() {
-    return (categories[selectedCategory]?.name ?? "Inputs") === "Inputs"
-      ? inputs
-      : outputs;
-  }
+  const inputs = useFlowStore((state) => state.inputs).filter(
+    (input) => input.type !== "ChatInput"
+  );
+  const outputs = useFlowStore((state) => state.outputs).filter(
+    (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"
+  );
+  const [selectedTab, setSelectedTab] = useState(
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
+  );
+  const [selectedViewField, setSelectedViewField] = useState<
+    { type: string; id: string } | undefined
+  >(undefined);
 
   return (
     <BaseModal
-      size={handleSelectChange() ? "large" : "small"}
+      size={haveChat ? "large" : "small"}
       open={open}
       setOpen={setOpen}
     >
@@ -88,71 +58,72 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
           <div
             className={cn(
               "mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide",
-              handleSelectChange() ? "w-2/6" : "w-full"
+              haveChat ? "w-2/6" : "w-full"
             )}
           >
             <div className="flex w-full items-center justify-between py-2">
               <div className="flex items-start gap-4">
-                {categories.map((category, index) => {
-                  return (
-                    //hide chat button if chat is alredy on the view
-                    <Button
-                      onClick={() => setSelectedCategory(index)}
-                      variant={
-                        index === selectedCategory ? "primary" : "secondary"
-                      }
-                      key={index}
-                    >
-                      <IconComponent
-                        name={category.icon}
-                        className=" file-component-variable"
-                      />
-                      <span className="file-component-variables-span text-md">
-                        {category.name}
-                      </span>
-                    </Button>
-                  );
-                })}
+                <Button
+                  onClick={() => setSelectedTab(1)}
+                  variant={selectedTab === 1 ? "primary" : "secondary"}
+                >
+                  <IconComponent
+                    name="FormInput"
+                    className=" file-component-variable"
+                  />
+                  <span className="file-component-variables-span text-md">
+                    Inputs
+                  </span>
+                </Button>
+                <Button
+                  onClick={() => setSelectedTab(2)}
+                  variant={selectedTab === 2 ? "primary" : "secondary"}
+                >
+                  <IconComponent
+                    name="ChevronRightSquare"
+                    className=" file-component-variable"
+                  />
+                  <span className="file-component-variables-span text-md">
+                    Outputs
+                  </span>
+                </Button>
               </div>
-              {(outputs.map((output) => output.type).includes("ChatOutput") ||
-                inputs.map((output) => output.type).includes("chatInput")) &&
-                selectedView.type !== "ChatOutput" && (
-                  <Button
-                    onClick={() => setSelectedView({ type: "ChatOutput" })}
-                    variant="outline"
-                    key={"chat"}
-                    className="self-end px-2.5"
-                  >
-                    <IconComponent
-                      name="MessageSquareMore"
-                      className="h-5 w-5"
-                    />
-                  </Button>
-                )}
+              {selectedViewField && haveChat && (
+                <Button
+                  onClick={() => setSelectedViewField(undefined)}
+                  variant="outline"
+                  key={"chat"}
+                  className="self-end px-2.5"
+                >
+                  <IconComponent name="MessageSquareMore" className="h-5 w-5" />
+                </Button>
+              )}
             </div>
             <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
-              {categories[selectedCategory]?.name === "Inputs" && (
+              {selectedTab === 1 && (
                 <>
                   <IconComponent name={"FormInput"} />
                   Text Inputs
                 </>
               )}
-              {categories[selectedCategory]?.name === "Outputs" && (
+              {selectedTab === 2 && (
                 <>
                   <IconComponent name={"ChevronRightSquare"} />
                   Prompt Outputs
                 </>
               )}
             </div>
-            {UpdateAccordion()
-              .filter(
-                (input) =>
-                  input.type !== "ChatInput" && input.type !== "ChatOutput"
+            {nodes
+              .filter((node) =>
+                selectedTab === 1
+                  ? inputs.some((input) => input.id === node.id)
+                  : outputs.some((output) => output.id === node.id)
               )
-              .map((input, index) => {
-                const node: NodeType = nodes.find(
-                  (node) => node.id === input.id
-                )!;
+              .map((node, index) => {
+                const input =
+                  selectedTab === 1
+                    ? inputs.find((input) => input.id === node.id)!
+                    : outputs.find((output) => output.id === node.id)!;
                 return (
                   <div className="file-component-accordion-div" key={index}>
                     <AccordionComponent
@@ -161,21 +132,20 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                           <Badge variant="gray" size="md">
                             {input.id}
                           </Badge>
-                          <div
-                            className="-mb-1 pr-4"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              setSelectedView({
-                                type: input.type,
-                                id: input.id,
-                              });
-                            }}
-                          >
-                            <IconComponent
-                              className="h-4 w-4"
-                              name="ExternalLink"
-                            ></IconComponent>
-                          </div>
+                          {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}
@@ -183,8 +153,8 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                     >
                       <div className="file-component-tab-column">
                         <div className="">
-                          {node &&
-                            (categories[selectedCategory]?.name === "Inputs" ? (
+                          {input &&
+                            (selectedTab === 1 ? (
                               <IOInputField
                                 inputType={input.type}
                                 inputId={input.id}
@@ -202,8 +172,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                 );
               })}
           </div>
-          {handleSelectChange() ? (
-            handleSelectChange()
+          {haveChat ? (
+            selectedViewField ? (
+              inputs.some((input) => input.id === selectedViewField.id) ? (
+                <IOInputField
+                  inputType={selectedViewField.type!}
+                  inputId={selectedViewField.id!}
+                />
+              ) : (
+                <IOOutputView
+                  outputType={selectedViewField.type!}
+                  outputId={selectedViewField.id!}
+                />
+              )
+            ) : (
+              <NewChatView />
+            )
           ) : (
             <div className="absolute bottom-8 right-8">
               <Button className="px-3">
diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx
index f84402c9f..ca572a238 100644
--- a/src/frontend/src/components/newChatView/index.tsx
+++ b/src/frontend/src/components/newChatView/index.tsx
@@ -17,7 +17,7 @@ import { classNames } from "../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
-export default function newChatView(): JSX.Element {
+export default function NewChatView(): JSX.Element {
   const [chatValue, setChatValue] = useState("");
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const {
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index b9422efab..c1eaa999d 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 export const priorityFields = new Set(["code", "template"]);
 
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
-export const OUTPUT_TYPES = new Set(["ChatOutput"]);
+export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);

From 903746d7de00383fc31c7273b0d04a3fc4003712 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 23 Feb 2024 22:09:46 +0100
Subject: [PATCH 02/22] Fixed bug when opening io view modal

---
 src/frontend/src/components/IOview/index.tsx | 245 ++++++++++---------
 src/frontend/src/constants/constants.ts      |   2 +-
 2 files changed, 131 insertions(+), 116 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 57569c7e7..7e3e24f76 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
 import useFlowStore from "../../stores/flowStore";
@@ -35,6 +35,11 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
+  useEffect(() => {
+    setSelectedViewField(undefined);
+    setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
+  }, [inputs.length, outputs.length]);
+
   return (
     <BaseModal
       size={haveChat ? "large" : "small"}
@@ -55,123 +60,133 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex-max-width mt-2 h-[80vh]">
-          <div
-            className={cn(
-              "mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide",
-              haveChat ? "w-2/6" : "w-full"
-            )}
-          >
-            <div className="flex w-full items-center justify-between py-2">
-              <div className="flex items-start gap-4">
-                <Button
-                  onClick={() => setSelectedTab(1)}
-                  variant={selectedTab === 1 ? "primary" : "secondary"}
-                >
-                  <IconComponent
-                    name="FormInput"
-                    className=" file-component-variable"
-                  />
-                  <span className="file-component-variables-span text-md">
-                    Inputs
-                  </span>
-                </Button>
-                <Button
-                  onClick={() => setSelectedTab(2)}
-                  variant={selectedTab === 2 ? "primary" : "secondary"}
-                >
-                  <IconComponent
-                    name="ChevronRightSquare"
-                    className=" file-component-variable"
-                  />
-                  <span className="file-component-variables-span text-md">
-                    Outputs
-                  </span>
-                </Button>
-              </div>
-              {selectedViewField && haveChat && (
-                <Button
-                  onClick={() => setSelectedViewField(undefined)}
-                  variant="outline"
-                  key={"chat"}
-                  className="self-end px-2.5"
-                >
-                  <IconComponent name="MessageSquareMore" className="h-5 w-5" />
-                </Button>
+          {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>
-            <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
-              {selectedTab === 1 && (
-                <>
-                  <IconComponent name={"FormInput"} />
-                  Text Inputs
-                </>
-              )}
-              {selectedTab === 2 && (
-                <>
-                  <IconComponent name={"ChevronRightSquare"} />
-                  Prompt Outputs
-                </>
-              )}
-            </div>
-            {nodes
-              .filter((node) =>
-                selectedTab === 1
-                  ? inputs.some((input) => input.id === node.id)
-                  : outputs.some((output) => output.id === node.id)
-              )
-              .map((node, index) => {
-                const input =
-                  selectedTab === 1
-                    ? inputs.find((input) => input.id === node.id)!
-                    : 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">
-                            {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="flex w-full items-center justify-between py-2">
+                <div className="flex items-start gap-4">
+                  {inputs.length > 0 && (
+                    <Button
+                      onClick={() => setSelectedTab(1)}
+                      variant={selectedTab === 1 ? "primary" : "secondary"}
                     >
-                      <div className="file-component-tab-column">
-                        <div className="">
-                          {input &&
-                            (selectedTab === 1 ? (
-                              <IOInputField
-                                inputType={input.type}
-                                inputId={input.id}
-                              />
-                            ) : (
-                              <IOOutputView
-                                outputType={input.type}
-                                outputId={input.id}
-                              />
-                            ))}
+                      <IconComponent
+                        name="FormInput"
+                        className=" file-component-variable"
+                      />
+                      <span className="file-component-variables-span text-md">
+                        Inputs
+                      </span>
+                    </Button>
+                  )}
+                  {outputs.length > 0 && (
+                    <Button
+                      onClick={() => setSelectedTab(2)}
+                      variant={selectedTab === 2 ? "primary" : "secondary"}
+                    >
+                      <IconComponent
+                        name="ChevronRightSquare"
+                        className=" file-component-variable"
+                      />
+                      <span className="file-component-variables-span text-md">
+                        Outputs
+                      </span>
+                    </Button>
+                  )}
+                </div>
+                {selectedViewField && haveChat && (
+                  <Button
+                    onClick={() => setSelectedViewField(undefined)}
+                    variant="outline"
+                    key={"chat"}
+                    className="self-end px-2.5"
+                  >
+                    <IconComponent
+                      name="MessageSquareMore"
+                      className="h-5 w-5"
+                    />
+                  </Button>
+                )}
+              </div>
+              <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
+                {selectedTab === 1 && (
+                  <>
+                    <IconComponent name={"FormInput"} />
+                    Text Inputs
+                  </>
+                )}
+                {selectedTab === 2 && (
+                  <>
+                    <IconComponent name={"ChevronRightSquare"} />
+                    Prompt Outputs
+                  </>
+                )}
+              </div>
+              {nodes
+                .filter((node) =>
+                  selectedTab === 1
+                    ? inputs.some((input) => input.id === node.id)
+                    : outputs.some((output) => output.id === node.id)
+                )
+                .map((node, index) => {
+                  const input =
+                    selectedTab === 1
+                      ? inputs.find((input) => input.id === node.id)!
+                      : 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">
+                              {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 &&
+                              (selectedTab === 1 ? (
+                                <IOInputField
+                                  inputType={input.type}
+                                  inputId={input.id}
+                                />
+                              ) : (
+                                <IOOutputView
+                                  outputType={input.type}
+                                  outputId={input.id}
+                                />
+                              ))}
+                          </div>
                         </div>
-                      </div>
-                    </AccordionComponent>
-                  </div>
-                );
-              })}
-          </div>
+                      </AccordionComponent>
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+
           {haveChat ? (
             selectedViewField ? (
               inputs.some((input) => input.id === selectedViewField.id) ? (
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index c1eaa999d..b9422efab 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 export const priorityFields = new Set(["code", "template"]);
 
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
-export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);
+export const OUTPUT_TYPES = new Set(["ChatOutput"]);

From 3e7c776ccf794844b76bdfa33d836f9729cda1a5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:19:52 +0100
Subject: [PATCH 03/22] Added visual changes, as pin on toolbar and play button
 separate from status.

---
 .../src/CustomNodes/GenericNode/index.tsx     |  60 +----
 .../src/components/IOInputField/index.tsx     |   2 +-
 .../src/components/IOOutputView/index.tsx     |   2 +-
 src/frontend/src/components/IOview/index.tsx  | 251 ++++++++++--------
 src/frontend/src/constants/constants.ts       |   2 +-
 .../src/modals/genericModal/index.tsx         |   2 +-
 .../components/nodeToolbarComponent/index.tsx |  63 +++--
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/utils/styleUtils.ts          |   6 +
 9 files changed, 210 insertions(+), 180 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c62abf6b9..7464f07f7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -120,7 +120,6 @@ export default function GenericNode({
   }, [flowPool, data.id]);
 
   const showNode = data.showNode ?? true;
-  const pinned = data.node?.pinned ?? false;
 
   const nameEditable = data.node?.flow || data.type === "CustomComponent";
 
@@ -160,7 +159,7 @@ export default function GenericNode({
   const getIconPlayOrPauseComponent = (name, className) => (
     <IconComponent
       name={name}
-      className={`absolute h-5 stroke-2 ${className} ml-0.5`}
+      className={`h-4 fill-current stroke-2 ${className}`}
     />
   );
 
@@ -193,7 +192,7 @@ export default function GenericNode({
       return <Loading />;
     } else {
       const className = getStatusClassName(buildStatus, validationStatus);
-      return <>{getIconPlayOrPauseComponent("Play", className)}</>;
+      return <>{getIconPlayOrPauseComponent("CircleDot", className)}</>;
     }
   };
 
@@ -439,39 +438,7 @@ export default function GenericNode({
             {showNode && (
               <Button
                 variant="outline"
-                className="h-9 px-1.5"
-                onClick={() => {
-                  setNode(data.id, (old) => ({
-                    ...old,
-                    data: {
-                      ...old.data,
-                      node: {
-                        ...old.data.node,
-                        pinned: old.data?.node?.pinned ? false : true,
-                      },
-                    },
-                  }));
-                }}
-              >
-                <Tooltip
-                  title={<span>{pinned ? "Pin Output" : "Unpin Output"}</span>}
-                >
-                  <div className="generic-node-status-position flex items-center">
-                    <IconComponent
-                      name={"Pin"}
-                      className={cn(
-                        "h-5 fill-transparent stroke-chat-trigger stroke-2 transition-all",
-                        pinned ? "animate-wiggle fill-chat-trigger" : ""
-                      )}
-                    />
-                  </div>
-                </Tooltip>
-              </Button>
-            )}
-            {showNode && (
-              <Button
-                variant="outline"
-                className={"h-9 px-1.5"}
+                className={"group h-9 px-1.5"}
                 onClick={() => {
                   if (data?.build_status === BuildStatus.BUILDING || isBuilding)
                     return;
@@ -485,12 +452,7 @@ export default function GenericNode({
                         <span>Building...</span>
                       ) : !validationStatus ? (
                         <span className="flex">
-                          Build{" "}
-                          <IconComponent
-                            name="Play"
-                            className=" h-5 stroke-build-trigger stroke-2"
-                          />{" "}
-                          flow to validate status.
+                          Build flow to validate status.
                         </span>
                       ) : (
                         <div className="max-h-96 overflow-auto">
@@ -506,15 +468,21 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
-                      {renderIconPlayOrPauseComponents(
-                        data?.build_status,
-                        validationStatus
-                      )}
+                      <IconComponent
+                        name="Play"
+                        className="absolute ml-0.5 h-5 fill-current stroke-2 text-chat-trigger"
+                      />
                     </div>
                   </Tooltip>
                 </div>
               </Button>
             )}
+            <div className="">
+              {renderIconPlayOrPauseComponents(
+                data?.build_status,
+                validationStatus
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index c499bd551..0b1afa52d 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -63,7 +63,7 @@ export default function IOInputField({
     }
   }
   return (
-    <div className="font-xl flex h-full w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex items-start h-full w-full flex-col gap-4 p-4 font-semibold">
       {inputType}
       {handleInputType()}
     </div>
diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
index fdae4b6b3..da37d34ee 100644
--- a/src/frontend/src/components/IOOutputView/index.tsx
+++ b/src/frontend/src/components/IOOutputView/index.tsx
@@ -44,7 +44,7 @@ export default function IOOutputView({
     }
   }
   return (
-    <div className="font-xl flex h-full w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex h-full items-start w-full flex-col gap-4 p-4 font-semibold">
       {outputType}
       {handleOutputType()}
     </div>
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 7e3e24f76..9fc109e21 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -10,6 +10,7 @@ import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 
 export default function IOView({ children, open, setOpen }): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
@@ -67,123 +68,147 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                 haveChat ? "w-2/6" : "w-full"
               )}
             >
-              <div className="flex w-full items-center justify-between py-2">
-                <div className="flex items-start gap-4">
-                  {inputs.length > 0 && (
-                    <Button
-                      onClick={() => setSelectedTab(1)}
-                      variant={selectedTab === 1 ? "primary" : "secondary"}
-                    >
-                      <IconComponent
-                        name="FormInput"
-                        className=" file-component-variable"
-                      />
-                      <span className="file-component-variables-span text-md">
-                        Inputs
-                      </span>
-                    </Button>
-                  )}
-                  {outputs.length > 0 && (
-                    <Button
-                      onClick={() => setSelectedTab(2)}
-                      variant={selectedTab === 2 ? "primary" : "secondary"}
-                    >
-                      <IconComponent
-                        name="ChevronRightSquare"
-                        className=" file-component-variable"
-                      />
-                      <span className="file-component-variables-span text-md">
-                        Outputs
-                      </span>
-                    </Button>
-                  )}
+              <Tabs
+                value={selectedTab.toString()}
+                className={"api-modal-tabs "}
+                onValueChange={(value) => {
+                  setSelectedTab(Number(value));
+                }}
+              >
+                <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>
-                {selectedViewField && haveChat && (
-                  <Button
-                    onClick={() => setSelectedViewField(undefined)}
-                    variant="outline"
-                    key={"chat"}
-                    className="self-end px-2.5"
-                  >
-                    <IconComponent
-                      name="MessageSquareMore"
-                      className="h-5 w-5"
-                    />
-                  </Button>
-                )}
-              </div>
-              <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
-                {selectedTab === 1 && (
-                  <>
-                    <IconComponent name={"FormInput"} />
+
+                <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
-                  </>
-                )}
-                {selectedTab === 2 && (
-                  <>
-                    <IconComponent name={"ChevronRightSquare"} />
-                    Prompt Outputs
-                  </>
-                )}
-              </div>
-              {nodes
-                .filter((node) =>
-                  selectedTab === 1
-                    ? inputs.some((input) => input.id === node.id)
-                    : outputs.some((output) => output.id === node.id)
-                )
-                .map((node, index) => {
-                  const input =
-                    selectedTab === 1
-                      ? inputs.find((input) => input.id === node.id)!
-                      : 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">
-                              {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>
+                  {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>
-                            )}
-                          </div>
-                        }
-                        key={index}
-                        keyValue={input.id}
-                      >
-                        <div className="file-component-tab-column">
-                          <div className="">
-                            {input &&
-                              (selectedTab === 1 ? (
-                                <IOInputField
-                                  inputType={input.type}
-                                  inputId={input.id}
-                                />
-                              ) : (
-                                <IOOutputView
-                                  outputType={input.type}
-                                  outputId={input.id}
-                                />
-                              ))}
-                          </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>
-                      </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>
           )}
 
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index b9422efab..c1eaa999d 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 export const priorityFields = new Set(["code", "template"]);
 
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
-export const OUTPUT_TYPES = new Set(["ChatOutput"]);
+export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 44173057f..2f7a07905 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -255,7 +255,7 @@ export default function GenericModal({
                   >
                     <div className="flex flex-wrap items-center">
                       <IconComponent
-                        name="Variable"
+                        name="Braces"
                         className=" -ml-px mr-1 flex h-4 w-4 text-primary"
                       />
                       <span className="text-md font-semibold text-primary">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 84013a34f..ff21af45f 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -25,7 +25,7 @@ import {
   expandGroupNode,
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
-import { classNames } from "../../../../utils/utils";
+import { classNames, cn } from "../../../../utils/utils";
 
 export default function NodeToolbarComponent({
   data,
@@ -60,6 +60,7 @@ export default function NodeToolbarComponent({
   const isMinimal = numberOfHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
 
+  const pinned = data.node?.pinned ?? false;
   const paste = useFlowStore((state) => state.paste);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -107,6 +108,9 @@ export default function NodeToolbarComponent({
         takeSnapshot();
         setShowNode(data.showNode ?? true ? false : true);
         break;
+      case "Share":
+        if (hasApiKey || hasStore) setShowconfirmShare(true);
+        break;
       case "Download":
         downloadNode(flowComponent!);
         break;
@@ -269,22 +273,35 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
-          {hasStore && (
-            <ShadTooltip content="Share" side="top">
-              <button
-                className={classNames(
-                  "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
+
+          <ShadTooltip content="Pin" side="top">
+            <button
+              className={classNames(
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
+              )}
+              onClick={(event) => {
+                event.preventDefault();
+                setNode(data.id, (old) => ({
+                  ...old,
+                  data: {
+                    ...old.data,
+                    node: {
+                      ...old.data.node,
+                      pinned: old.data?.node?.pinned ? false : true,
+                    },
+                  },
+                }));
+              }}
+            >
+              <IconComponent
+                name="Pin"
+                className={cn(
+                  "h-4 w-4 transition-all",
+                  pinned ? "animate-wiggle fill-current" : ""
                 )}
-                onClick={(event) => {
-                  event.preventDefault();
-                  if (hasApiKey || hasStore) setShowconfirmShare(true);
-                }}
-              >
-                <IconComponent name="Share3" className="-m-1 h-6 w-6" />
-              </button>
-            </ShadTooltip>
-          )}
+              />
+            </button>
+          </ShadTooltip>
 
           <Select onValueChange={handleSelectChange} value="">
             <ShadTooltip content="More" side="top">
@@ -340,6 +357,20 @@ export default function NodeToolbarComponent({
                   </SelectItem>
                 )
               )}
+              {hasStore && (
+                <SelectItem
+                  value={"Share"}
+                  disabled={!hasApiKey || !validApiKey}
+                >
+                  <div className="flex" data-testid="save-button-modal">
+                    <IconComponent
+                      name="Share3"
+                      className="relative top-0.5 -m-1 mr-1 h-6 w-6"
+                    />{" "}
+                    Share{" "}
+                  </div>{" "}
+                </SelectItem>
+              )}
               {!hasStore && (
                 <SelectItem value={"Download"}>
                   <div className="flex">
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 39d4769e6..a97b44b8d 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -845,7 +845,7 @@
     @apply flex h-full max-w-full flex-col overflow-hidden rounded-md border bg-muted text-center sm:w-[75vw] md:w-[75vw] lg:w-[75vw] xl:w-[76vw] 2xl:w-full;
   }
   .api-modal-tablist-div {
-    @apply flex items-center justify-between px-2;
+    @apply flex items-center justify-between px-2 py-2;
   }
   .api-modal-tabs-content {
     @apply -mt-1 h-full w-full overflow-hidden px-4 pb-4;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 38ad99bb3..5b45fc1ab 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -6,6 +6,7 @@ import {
   BookmarkPlus,
   Bot,
   Boxes,
+  Braces,
   Cable,
   Check,
   CheckCircle2,
@@ -18,6 +19,7 @@ import {
   ChevronsRight,
   ChevronsUpDown,
   Circle,
+  CircleDot,
   Clipboard,
   Code,
   Code2,
@@ -101,6 +103,7 @@ import {
   TextCursorInput,
   ToyBrick,
   Trash2,
+  Type,
   Undo,
   Ungroup,
   Unplug,
@@ -344,6 +347,7 @@ export const nodeIconsLucide: iconsType = {
   FileSearch2,
   ChevronRight,
   Circle,
+  CircleDot,
   Clipboard,
   Code2,
   Variable,
@@ -413,6 +417,8 @@ export const nodeIconsLucide: iconsType = {
   Sliders,
   ScreenShare,
   Code,
+  Type,
+  Braces,
   FlaskConical,
   AlertCircle,
   Bot,

From 891fbc897bc7bcc1c02ca435013da8ffb93292c0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:21:23 +0100
Subject: [PATCH 04/22] Changed icon

---
 src/frontend/src/components/ViewTriggers/chat/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/ViewTriggers/chat/index.tsx b/src/frontend/src/components/ViewTriggers/chat/index.tsx
index f61da2969..9610f22ff 100644
--- a/src/frontend/src/components/ViewTriggers/chat/index.tsx
+++ b/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>

From ddb04655794872928b73e26fec1b0b28fc06f8a0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:23:54 +0100
Subject: [PATCH 05/22] Change color of chat icon

---
 src/frontend/src/style/applies.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index a97b44b8d..f7685656b 100644
--- a/src/frontend/src/style/applies.css
+++ b/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;

From f294d1faac58331060d89ec6c178757d31b00d15 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:36:07 +0100
Subject: [PATCH 06/22] Fixed pause

---
 .../src/CustomNodes/GenericNode/index.tsx     | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 7464f07f7..01105e6b1 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -184,6 +184,13 @@ export default function GenericNode({
     }
   };
 
+  const renderIconStatusComponents = (
+    buildStatus: BuildStatus | undefined,
+    validationStatus: validationStatusType | null
+  ) => {
+    const className = getStatusClassName(buildStatus, validationStatus);
+    return <>{getIconPlayOrPauseComponent("CircleDot", className)}</>;
+  };
   const renderIconPlayOrPauseComponents = (
     buildStatus: BuildStatus | undefined,
     validationStatus: validationStatusType | null
@@ -191,8 +198,12 @@ export default function GenericNode({
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading />;
     } else {
-      const className = getStatusClassName(buildStatus, validationStatus);
-      return <>{getIconPlayOrPauseComponent("CircleDot", className)}</>;
+      return (
+        <IconComponent
+          name="Play"
+          className="absolute ml-0.5 h-5 fill-current stroke-2 text-chat-trigger"
+        />
+      );
     }
   };
 
@@ -468,20 +479,17 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
-                      <IconComponent
-                        name="Play"
-                        className="absolute ml-0.5 h-5 fill-current stroke-2 text-chat-trigger"
-                      />
+                      {renderIconPlayOrPauseComponents(
+                        data?.build_status,
+                        validationStatus
+                      )}
                     </div>
                   </Tooltip>
                 </div>
               </Button>
             )}
             <div className="">
-              {renderIconPlayOrPauseComponents(
-                data?.build_status,
-                validationStatus
-              )}
+              {renderIconStatusComponents(data?.build_status, validationStatus)}
             </div>
           </div>
         </div>

From 2913abb7bfceeb4f9024e5c347acf0535efb25ca Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:36:28 +0100
Subject: [PATCH 07/22] Open chat

---
 src/frontend/src/components/IOview/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 9fc109e21..2e7cc0aa9 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -27,7 +27,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       node.type !== "ChatOutput"
   );
   const haveChat = useFlowStore((state) => state.outputs).some(
-    (output) => output.type === "ChatOutput"
+    (output) => output.type === "ChatOutput" || output.type === "ChatInput"
   );
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0

From db7f5c7582f20af48040f88504a8ca4304030b0b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:53:13 +0100
Subject: [PATCH 08/22] Fixed button

---
 src/frontend/src/components/IOview/index.tsx  | 400 ++++++++++--------
 .../src/components/newChatView/index.tsx      |  63 +--
 2 files changed, 243 insertions(+), 220 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 2e7cc0aa9..f0c2defc1 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/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";
@@ -26,9 +30,13 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       node.type !== "ChatInput" &&
       node.type !== "ChatOutput"
   );
-  const haveChat = useFlowStore((state) => state.outputs).some(
-    (output) => output.type === "ChatOutput" || output.type === "ChatInput"
-  );
+  const haveChat =
+    useFlowStore((state) => state.outputs).some(
+      (output) => output.type === "ChatOutput"
+    ) ||
+    useFlowStore((state) => state.inputs).some(
+      (input) => input.type === "ChatInput"
+    );
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
@@ -36,6 +44,48 @@ 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 chatInputId = inputs
+        .map((obj) => obj.id)
+        .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,
+      });
+    }
+  }
+
   useEffect(() => {
     setSelectedViewField(undefined);
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
@@ -60,178 +110,194 @@ 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 className="px-3" onClick={() => sendMessage(1)}>
+                <IconComponent
+                  name={isBuilding ? "Loader2" : "Play"}
+                  className={cn("h-6 w-6", isBuilding ? "animate-spin" : "")}
+                />
               </Button>
             </div>
           )}
diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx
index d069ea97c..38a633444 100644
--- a/src/frontend/src/components/newChatView/index.tsx
+++ b/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((_) => {

From 5a412b33fef149a9767da6d768ba21462aecc4c7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:59:09 +0100
Subject: [PATCH 09/22] Fixed chat not getting message

---
 src/frontend/src/components/IOview/index.tsx | 28 +++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index f0c2defc1..4572ff619 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -20,23 +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"
+        outputs.some((output) => output.id === node.id))
   );
   const haveChat =
-    useFlowStore((state) => state.outputs).some(
-      (output) => output.type === "ChatOutput"
-    ) ||
-    useFlowStore((state) => state.inputs).some(
-      (input) => input.type === "ChatInput"
-    );
+    chatInput || chatOutput
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
@@ -59,14 +58,11 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       setIsBuilding(true);
       setLockChat(true);
       setChatValue("");
-      const chatInputId = inputs
-        .map((obj) => obj.id)
-        .find((inputId) => inputId.includes("ChatInput"));
-      const chatInput: NodeType = getNode(chatInputId!) as NodeType;
-      if (chatInput) {
-        let newNode = cloneDeep(chatInput);
+      const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+      if (chatInputNode) {
+        let newNode = cloneDeep(chatInputNode);
         newNode.data.node!.template["message"].value = chatValue;
-        setNode(chatInputId!, newNode);
+        setNode(chatInput!.id, newNode);
       }
       for (let i = 0; i < count; i++) {
         await buildFlow().catch((err) => {

From 9cafc09d6f9c5ef0a347af1c6b37617f33a86ae3 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 23:01:36 +0100
Subject: [PATCH 10/22] Fixed message not being displayed

---
 src/frontend/src/components/newChatView/chatMessage/index.tsx | 2 +-
 src/frontend/src/modals/formModal/index.tsx                   | 1 +
 src/frontend/src/types/components/index.ts                    | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/newChatView/chatMessage/index.tsx b/src/frontend/src/components/newChatView/chatMessage/index.tsx
index 36fb3955e..31f4f0345 100644
--- a/src/frontend/src/components/newChatView/chatMessage/index.tsx
+++ b/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);
       }
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index dfaf871ed..af6e9eace 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -576,6 +576,7 @@ export default function FormModal({
                           chatHistory.length - 1 === index ? true : false
                         }
                         key={index}
+                        updateChat={() => {}}
                       />
                     ))
                   ) : (
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 3a8563cf1..bc8582118 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -524,6 +524,7 @@ export type chatMessagePropsType = {
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
+  updateChat: (chat: ChatMessageType, message: string, stream_url: string) => void;
 };
 
 export type formModalPropsType = {

From 1ab44024c2e31f7dbdb5eb119e04694a41facf2e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 23:28:44 +0100
Subject: [PATCH 11/22] Changed Run Flow button

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +-
 src/frontend/src/components/IOview/index.tsx       | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 01105e6b1..3175c0b4a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -448,7 +448,7 @@ export default function GenericNode({
             </div>
             {showNode && (
               <Button
-                variant="outline"
+                variant="secondary"
                 className={"group h-9 px-1.5"}
                 onClick={() => {
                   if (data?.build_status === BuildStatus.BUILDING || isBuilding)
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 4572ff619..28024ad77 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -289,11 +289,13 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
           </div>
           {!haveChat && (
             <div className="flex w-full justify-end pt-6">
-              <Button className="px-3" onClick={() => sendMessage(1)}>
+              <Button variant={"outline"} className="px-3 flex gap-2" onClick={() => sendMessage(1)}>
+                
                 <IconComponent
                   name={isBuilding ? "Loader2" : "Play"}
-                  className={cn("h-6 w-6", isBuilding ? "animate-spin" : "")}
+                  className={cn("h-4 w-4", isBuilding ? "animate-spin" : "fill-current text-medium-indigo")}
                 />
+                Run Flow
               </Button>
             </div>
           )}

From 66c973ea8e0519ceaae194754005b9d2a2fc2794 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 23:32:46 +0100
Subject: [PATCH 12/22] Fixed play colors

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 3175c0b4a..c50a5c7a8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -201,7 +201,7 @@ export default function GenericNode({
       return (
         <IconComponent
           name="Play"
-          className="absolute ml-0.5 h-5 fill-current stroke-2 text-chat-trigger"
+          className="absolute ml-0.5 h-5 fill-current stroke-2 hover:text-medium-indigo text-muted-foreground"
         />
       );
     }

From 3c0957e956e16320e57e2512ce064c66b9f5da5d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 23:37:34 +0100
Subject: [PATCH 13/22] Changed size of only chat

---
 src/frontend/src/components/IOview/index.tsx | 2 +-
 src/frontend/src/modals/baseModal/index.tsx  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 28024ad77..735f543d2 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -89,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}
     >
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 860551be9..134093f5c 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/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;

From ff819bcbe98c157954c324a122bc46ce07dea352 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 23:51:04 +0100
Subject: [PATCH 14/22] Small changes

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c50a5c7a8..84be5d127 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -180,7 +180,7 @@ export default function GenericNode({
     } else if (!validationStatus) {
       return "yellow-status";
     } else {
-      return "status-build-animation";
+      return "yellow-status";
     }
   };
 

From e6b1d7a285989cc9933f881546eb1619efff48f0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 26 Feb 2024 17:19:18 +0100
Subject: [PATCH 15/22] Fixed status ball and location of tooltip

---
 .../src/CustomNodes/GenericNode/index.tsx     | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 7f9f70c2a..ef6afc464 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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";
@@ -179,8 +180,6 @@ export default function GenericNode({
       return "red-status";
     } else if (!validationStatus && buildStatus === BuildStatus.TO_BUILD) {
       return "green-status";
-    } else if (buildStatus === BuildStatus.BUILDING) {
-      return "status-build-animation";
     } else {
       return "yellow-status";
     }
@@ -203,7 +202,7 @@ export default function GenericNode({
       return (
         <IconComponent
           name="Play"
-          className="absolute ml-0.5 h-5 fill-current stroke-2 hover:text-medium-indigo text-muted-foreground"
+          className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground hover:text-medium-indigo"
         />
       );
     }
@@ -469,23 +468,7 @@ export default function GenericNode({
                 <div>
                   <Tooltip
                     title={
-                      data?.buildStatus === BuildStatus.BUILDING ? (
-                        <span>Building...</span>
-                      ) : !validationStatus ? (
-                        <span className="flex">
-                          Build 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"
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
@@ -499,7 +482,30 @@ export default function GenericNode({
               </Button>
             )}
             <div className="">
-              {renderIconStatusComponents(data?.buildStatus, validationStatus)}
+              <Tooltip
+                title={
+                  data?.buildStatus === BuildStatus.BUILDING ? (
+                    <span>Building...</span>
+                  ) : !validationStatus ? (
+                    <span className="flex">Build 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>
+                  )
+                }
+              >
+                <div>
+                  {renderIconStatusComponents(
+                    data?.buildStatus,
+                    validationStatus
+                  )}
+                </div>
+              </Tooltip>
             </div>
           </div>
         </div>

From 6b2d0c6ef1be532d4178b366dfccbaf3f7cec750 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 26 Feb 2024 18:33:51 +0100
Subject: [PATCH 16/22] Fixed Store showing that API key is invalid when it is
 valid

---
 src/frontend/src/App.tsx                      |  6 ++-
 .../components/nodeToolbarComponent/index.tsx |  8 ++--
 src/frontend/src/pages/StorePage/index.tsx    | 31 +++----------
 src/frontend/src/stores/storeStore.tsx        | 43 +++++++++----------
 src/frontend/src/types/zustand/store/index.ts |  3 +-
 5 files changed, 37 insertions(+), 54 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index bb010a844..d8b2c8b50 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -21,6 +21,7 @@ import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useTypesStore } from "./stores/typesStore";
+import { useStoreStore } from "./stores/storeStore";
 
 export default function App() {
   const errorData = useAlertStore((state) => state.errorData);
@@ -32,7 +33,6 @@ export default function App() {
   const successData = useAlertStore((state) => state.successData);
   const successOpen = useAlertStore((state) => state.successOpen);
   const setSuccessOpen = useAlertStore((state) => state.setSuccessOpen);
-  const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
@@ -122,9 +122,11 @@ export default function App() {
 
   const { isAuthenticated } = useContext(AuthContext);
   const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+  const fetchApiData = useStoreStore((state) => state.fetchApiData);
   const getTypes = useTypesStore((state) => state.getTypes);
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
+  const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
   useEffect(() => {
     refreshStars();
@@ -136,6 +138,8 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      checkHasStore();
+      fetchApiData();
     }
   }, [isAuthenticated]);
 
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index e25544bdf..ff341a967 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -172,16 +172,16 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
-          {hasStore && (
-            <ShadTooltip content="Share" side="top">
+          {hasStore &&  (
+            <ShadTooltip content={(!hasApiKey || !validApiKey) ? "Set a valid API key to share this component." : "Share"} side="top">
               <button
                 className={classNames(
                   "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
+                  (!hasApiKey || !validApiKey) ? " text-muted-foreground cursor-not-allowed" : ""
                 )}
                 onClick={(event) => {
                   event.preventDefault();
-                  if (hasApiKey || hasStore) setShowconfirmShare(true);
+                  if (hasApiKey && hasStore && validApiKey) setShowconfirmShare(true);
                 }}
               >
                 <IconComponent name="Share3" className="-m-1 h-6 w-6" />
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 8321be91d..8eeafc28f 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -39,8 +39,6 @@ export default function StorePage(): JSX.Element {
   const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
 
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
-  const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
-  const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
 
   const { apiKey } = useContext(AuthContext);
 
@@ -48,6 +46,9 @@ export default function StorePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
+  const currentFlowId = useFlowsManagerStore(
+    (state) => state.currentFlowId
+  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();
@@ -63,10 +64,6 @@ export default function StorePage(): JSX.Element {
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
 
-  useEffect(() => {
-    handleGetTags();
-  }, []);
-
   useEffect(() => {
     if (!loadingApiKey) {
       if (!hasApiKey) {
@@ -86,9 +83,10 @@ export default function StorePage(): JSX.Element {
         });
       }
     }
-  }, [loadingApiKey, validApiKey, hasApiKey]);
+  }, [loadingApiKey, validApiKey, hasApiKey, currentFlowId]);
 
   useEffect(() => {
+    handleGetTags();
     handleGetComponents();
   }, [
     tabActive,
@@ -119,7 +117,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
-    if (!hasApiKey || loadingApiKey) return;
+    if (loadingApiKey) return;
     setLoading(true);
     getStoreComponents({
       component_id: id,
@@ -176,23 +174,6 @@ export default function StorePage(): JSX.Element {
     setPageSize(12);
   }
 
-  const fetchApiData = async () => {
-    setLoadingApiKey(true);
-    try {
-      const res = await checkHasApiKey();
-      setHasApiKey(res?.has_api_key ?? false);
-      setValidApiKey(res?.is_valid ?? false);
-      setLoadingApiKey(false);
-    } catch (e) {
-      setLoadingApiKey(false);
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchApiData();
-  }, [apiKey]);
-
   return (
     <PageLayout
       betaIcon
diff --git a/src/frontend/src/stores/storeStore.tsx b/src/frontend/src/stores/storeStore.tsx
index 43d16c177..473dd09da 100644
--- a/src/frontend/src/stores/storeStore.tsx
+++ b/src/frontend/src/stores/storeStore.tsx
@@ -1,37 +1,34 @@
 import { create } from "zustand";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { StoreStoreType } from "../types/zustand/store";
+import useAlertStore from "./alertStore";
 
 export const useStoreStore = create<StoreStoreType>((set) => ({
   hasStore: true,
   validApiKey: false,
   hasApiKey: false,
   loadingApiKey: true,
-  updateHasStore: (hasStore) => set(() => ({ hasStore: hasStore })),
+  checkHasStore: () => {
+    checkHasStore().then((res) => {
+      set({ hasStore: res?.enabled ?? false });
+    });
+  },
   updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),
   updateLoadingApiKey: (loadingApiKey) =>
     set(() => ({ loadingApiKey: loadingApiKey })),
   updateHasApiKey: (hasApiKey) => set(() => ({ hasApiKey: hasApiKey })),
+  fetchApiData: async () => {
+    set({ loadingApiKey: true });
+    try {
+      const res = await checkHasApiKey();
+      set({
+        validApiKey: res?.is_valid ?? false,
+        hasApiKey: res?.has_api_key ?? false,
+        loadingApiKey: false,
+      });
+    } catch (e) {
+      set({ loadingApiKey: false });
+      console.log(e);
+    }
+  },
 }));
-
-checkHasStore().then((res) => {
-  useStoreStore.setState({ hasStore: res?.enabled ?? false });
-});
-
-const fetchApiData = async () => {
-  useStoreStore.setState({ loadingApiKey: true });
-  try {
-    const res = await checkHasApiKey();
-
-    useStoreStore.setState({
-      loadingApiKey: false,
-      validApiKey: res?.is_valid ?? false,
-      hasApiKey: res?.has_api_key ?? false,
-    });
-  } catch (e) {
-    useStoreStore.setState({ loadingApiKey: false });
-    console.log(e);
-  }
-};
-
-fetchApiData();
diff --git a/src/frontend/src/types/zustand/store/index.ts b/src/frontend/src/types/zustand/store/index.ts
index 0254c857d..34bf38ad1 100644
--- a/src/frontend/src/types/zustand/store/index.ts
+++ b/src/frontend/src/types/zustand/store/index.ts
@@ -3,8 +3,9 @@ export type StoreStoreType = {
   validApiKey: boolean;
   hasApiKey: boolean;
   loadingApiKey: boolean;
-  updateHasStore: (hasStore: boolean) => void;
+  checkHasStore: () => void;
   updateValidApiKey: (validApiKey: boolean) => void;
   updateHasApiKey: (hasApiKey: boolean) => void;
   updateLoadingApiKey: (loadingApiKey: boolean) => void;
+  fetchApiData: () => Promise<void>;
 };

From 2b7ed05ed0230693c6a768d383488b837ce7ebec Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 26 Feb 2024 14:56:30 -0300
Subject: [PATCH 17/22] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode):=20remove?=
 =?UTF-8?q?=20unnecessary=20line=20break=20in=20GenericNode=20component=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20style(applies.css):=20increase=20max-width=20of?=
 =?UTF-8?q?=20generic-node-tooltip-div=20to=20220px=20for=20better=20text?=
 =?UTF-8?q?=20truncation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 1 -
 src/frontend/src/style/applies.css                 | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c71f401dc..a0dfebcd4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -135,7 +135,6 @@ export default function GenericNode({
     const iconClassName = `generic-node-icon ${
       !showNode ? "absolute inset-x-6 h-12 w-12" : ""
     }`;
-
     if (iconElement && isEmoji) {
       return nodeIconFragment(iconElement);
     } else {
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 9d8c7df8f..9208c4b17 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -276,7 +276,7 @@
     @apply h-10 w-10 rounded p-1;
   }
   .generic-node-tooltip-div {
-    @apply ml-2 truncate;
+    @apply ml-2 max-w-[220px] truncate;
   }
   .generic-node-validation-div {
     @apply max-h-96 overflow-auto;

From b2edc81a80ed8124e202204e2d2b2633183c0834 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 26 Feb 2024 15:03:57 -0300
Subject: [PATCH 18/22] Refactor string decoding in Vertex class

---
 src/backend/langflow/graph/vertex/base.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/graph/vertex/base.py b/src/backend/langflow/graph/vertex/base.py
index f2e12d564..021a4a137 100644
--- a/src/backend/langflow/graph/vertex/base.py
+++ b/src/backend/langflow/graph/vertex/base.py
@@ -341,7 +341,10 @@ class Vertex:
                 elif value.get("type") == "str" and val is not None:
                     # val may contain escaped \n, \t, etc.
                     # so we need to unescape it
-                    params[key] = val.encode().decode("unicode_escape")
+                    if isinstance(val, list):
+                        params[key] = [v.encode().decode("unicode_escape") for v in val]
+                    elif isinstance(val, str):
+                        params[key] = val.encode().decode("unicode_escape")
                 elif val is not None and val != "":
                     params[key] = val
 

From 1f9a559483a6c93b767891757fa2ed15689d2395 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 26 Feb 2024 15:04:20 -0300
Subject: [PATCH 19/22] Remove combine_documents_chain from
 RetrievalQAWithSourcesChainComponent

---
 .../langflow/components/chains/RetrievalQAWithSourcesChain.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/backend/langflow/components/chains/RetrievalQAWithSourcesChain.py b/src/backend/langflow/components/chains/RetrievalQAWithSourcesChain.py
index 4ec1ce886..f447e831e 100644
--- a/src/backend/langflow/components/chains/RetrievalQAWithSourcesChain.py
+++ b/src/backend/langflow/components/chains/RetrievalQAWithSourcesChain.py
@@ -1,7 +1,6 @@
 from typing import Optional
 
 from langchain.chains import RetrievalQAWithSourcesChain
-from langchain.chains.combine_documents.base import BaseCombineDocumentsChain
 from langchain_core.documents import Document
 
 from langflow import CustomComponent
@@ -18,6 +17,7 @@ class RetrievalQAWithSourcesChainComponent(CustomComponent):
             "chain_type": {
                 "display_name": "Chain Type",
                 "options": ["stuff", "map_reduce", "map_rerank", "refine"],
+                "info": "The type of chain to use to combined Documents.",
             },
             "memory": {"display_name": "Memory"},
             "return_source_documents": {"display_name": "Return Source Documents"},
@@ -27,7 +27,6 @@ class RetrievalQAWithSourcesChainComponent(CustomComponent):
         self,
         retriever: BaseRetriever,
         llm: BaseLanguageModel,
-        combine_documents_chain: BaseCombineDocumentsChain,
         chain_type: str,
         memory: Optional[BaseMemory] = None,
         return_source_documents: Optional[bool] = True,
@@ -35,7 +34,6 @@ class RetrievalQAWithSourcesChainComponent(CustomComponent):
         runnable = RetrievalQAWithSourcesChain.from_chain_type(
             llm=llm,
             chain_type=chain_type,
-            combine_documents_chain=combine_documents_chain,
             memory=memory,
             return_source_documents=return_source_documents,
             retriever=retriever,

From 5785f692ec8e096afa06452da3c6aae3fa3dd981 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 26 Feb 2024 15:51:58 -0300
Subject: [PATCH 20/22] Remove unused code in WrapperCreator class

---
 src/backend/langflow/interface/wrappers/base.py | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/backend/langflow/interface/wrappers/base.py b/src/backend/langflow/interface/wrappers/base.py
index bc42f1430..5cbc943c6 100644
--- a/src/backend/langflow/interface/wrappers/base.py
+++ b/src/backend/langflow/interface/wrappers/base.py
@@ -4,7 +4,7 @@ from langchain_community.utilities import requests
 from loguru import logger
 
 from langflow.interface.base import LangChainTypeCreator
-from langflow.utils.util import build_template_from_class, build_template_from_method
+from langflow.utils.util import build_template_from_class
 
 
 class WrapperCreator(LangChainTypeCreator):
@@ -20,14 +20,6 @@ class WrapperCreator(LangChainTypeCreator):
 
     def get_signature(self, name: str) -> Optional[Dict]:
         try:
-            if name in self.from_method_nodes:
-                return build_template_from_method(
-                    name,
-                    type_to_cls_dict=self.type_to_loader_dict,
-                    add_function=True,
-                    method_name=self.from_method_nodes[name],
-                )
-
             return build_template_from_class(name, self.type_to_loader_dict)
         except ValueError as exc:
             raise ValueError("Wrapper not found") from exc

From 8cd3853e2ef2a4ddf7b111c5842f2a778d04c5a9 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 26 Feb 2024 15:52:08 -0300
Subject: [PATCH 21/22] Update chromadb and orjson versions

---
 poetry.lock    | 126 ++++++++++++++++++++++++-------------------------
 pyproject.toml |   4 +-
 2 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 3039ac668..a7ed6a921 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -875,13 +875,13 @@ numpy = "*"
 
 [[package]]
 name = "chromadb"
-version = "0.4.22"
+version = "0.4.23"
 description = "Chroma."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "chromadb-0.4.22-py3-none-any.whl", hash = "sha256:ad210b27b4cda2f09d15adc9c83c81bfa66b69f39648a27b637306e40de0680d"},
-    {file = "chromadb-0.4.22.tar.gz", hash = "sha256:c793149e1c2bbbb52d77602c6c0594c5752f04cd9be12619250ddad2082af27a"},
+    {file = "chromadb-0.4.23-py3-none-any.whl", hash = "sha256:3d3c2ffb4ff560721e3daf8c1a3729fd149c551525b6f75543eddb81a4f29e16"},
+    {file = "chromadb-0.4.23.tar.gz", hash = "sha256:54d9a770640704c6cedc15317faab9fd45beb9833e7484c00037e7a8801a349f"},
 ]
 
 [package.dependencies]
@@ -899,6 +899,7 @@ opentelemetry-api = ">=1.2.0"
 opentelemetry-exporter-otlp-proto-grpc = ">=1.2.0"
 opentelemetry-instrumentation-fastapi = ">=0.41b0"
 opentelemetry-sdk = ">=1.2.0"
+orjson = ">=3.9.12"
 overrides = ">=7.3.1"
 posthog = ">=2.4.0"
 pulsar-client = ">=3.1.0"
@@ -3432,16 +3433,17 @@ llama-index = ["llama-index (>=0.10.6,<0.11.0)"]
 
 [[package]]
 name = "langsmith"
-version = "0.1.5"
+version = "0.1.8"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 optional = false
 python-versions = ">=3.8.1,<4.0"
 files = [
-    {file = "langsmith-0.1.5-py3-none-any.whl", hash = "sha256:a1811821a923d90e53bcbacdd0988c3c366aff8f4c120d8777e7af8ecda06268"},
-    {file = "langsmith-0.1.5.tar.gz", hash = "sha256:aa7a2861aa3d9ae563a077c622953533800466c4e2e539b0d567b84d5fd5b157"},
+    {file = "langsmith-0.1.8-py3-none-any.whl", hash = "sha256:f4320fd80ec9d311a648e7d4c44e0814e6e5454772c5026f40db0307bc07e287"},
+    {file = "langsmith-0.1.8.tar.gz", hash = "sha256:ab5f1cdfb7d418109ea506d41928fb8708547db2f6c7f7da7cfe997f3c55767b"},
 ]
 
 [package.dependencies]
+orjson = ">=3.9.14,<4.0.0"
 pydantic = ">=1,<3"
 requests = ">=2,<3"
 
@@ -4791,67 +4793,61 @@ files = [
 
 [[package]]
 name = "orjson"
-version = "3.9.3"
+version = "3.9.15"
 description = "Fast, correct Python JSON library supporting dataclasses, datetimes, and numpy"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "orjson-3.9.3-cp310-cp310-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:082714b5554fcced092c45272f22a93400389733083c43f5043c4316e86f57a2"},
-    {file = "orjson-3.9.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:97ddec69ca4fa1b66d512cf4f4a3fe6a57c4bf21209295ab2f4ada415996e08a"},
-    {file = "orjson-3.9.3-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:ab7501722ec2172b1c6ea333bc47bba3bbb9b5fc0e3e891191e8447f43d3187d"},
-    {file = "orjson-3.9.3-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:5ae680163ab09f04683d35fbd63eee858019f0066640f7cbad4dba3e7422a4bc"},
-    {file = "orjson-3.9.3-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:7e5abca1e0a9d110bab7346fab0acd3b7848d2ee13318bc24a31bbfbdad974b8"},
-    {file = "orjson-3.9.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c55f42a8b07cdb7d514cfaeb56f6e9029eef1cbc8e670ac31fc377c46b993cd1"},
-    {file = "orjson-3.9.3-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:303f1324f5ea516f8e874ea0f8d15c581caabdca59fc990705fc76f3bd9f3bdf"},
-    {file = "orjson-3.9.3-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:59c444e3931ea4fe7dec26d195486a681fedc0233230c9b84848f8e60affd4a4"},
-    {file = "orjson-3.9.3-cp310-none-win32.whl", hash = "sha256:63333de96d83091023c9c99cc579973a2977b15feb5cdc8d9660104c886e9ab8"},
-    {file = "orjson-3.9.3-cp310-none-win_amd64.whl", hash = "sha256:7bce6ff507a83c6a4b6b00726f3a7d7aed0b1f0884aac0440e95b55cac0b113e"},
-    {file = "orjson-3.9.3-cp311-cp311-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:ec4421f377cce51decd6ea3869a8b41e9f05c50bf6acef8284f8906e642992c4"},
-    {file = "orjson-3.9.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7b3177bd67756e53bdbd72c79fae3507796a67b67c32a16f4b55cad48ef25c13"},
-    {file = "orjson-3.9.3-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b21908252c8a13b8f48d4cccdb7fabb592824cf39c9fa4e9076015dd65eabeba"},
-    {file = "orjson-3.9.3-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f7b795c6ac344b0c49776b7e135a9bed0cd15b1ade2a4c7b3a19e3913247702e"},
-    {file = "orjson-3.9.3-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8ac43842f5ba26e6f21b4e63312bd1137111a9b9821d7f7dfe189a4015c6c6bc"},
-    {file = "orjson-3.9.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8def4f6560c7b6dbc4b356dfd8e6624a018d920ce5a2864291a2bf1052cd6b68"},
-    {file = "orjson-3.9.3-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:bbc0dafd1de42c8dbfd6e5d1fe4deab15d2de474e11475921286bebefd109ec8"},
-    {file = "orjson-3.9.3-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:85b1870d5420292419b34002659082d77f31b13d4d8cbd67bed9d717c775a0fb"},
-    {file = "orjson-3.9.3-cp311-none-win32.whl", hash = "sha256:d6ece3f48f14a06c325181f2b9bd9a9827aac2ecdcad11eb12f561fb697eaaaa"},
-    {file = "orjson-3.9.3-cp311-none-win_amd64.whl", hash = "sha256:448feda092c681c0a5b8eec62dd4f625ad5d316dafd56c81fb3f05b5221827ff"},
-    {file = "orjson-3.9.3-cp312-cp312-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:413d7cf731f1222373360128a3d5232d52630a7355f446bf2659fc3445ec0b76"},
-    {file = "orjson-3.9.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:009a0f79804c604998b068f5f942e40546913ed45ee2f0a3d0e75695bf7543fa"},
-    {file = "orjson-3.9.3-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:ce062844255cce4d6a8a150e8e78b9fcd6c5a3f1ff3f8792922de25827c25b9c"},
-    {file = "orjson-3.9.3-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:776659e18debe5de73c30b0957cd6454fcc61d87377fcb276441fca1b9f1305d"},
-    {file = "orjson-3.9.3-cp312-none-win_amd64.whl", hash = "sha256:47b237da3818c8e546df4d2162f0a5cfd50b7b58528907919a27244141e0e48e"},
-    {file = "orjson-3.9.3-cp37-cp37m-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:f954115d8496d4ab5975438e3ce07780c1644ea0a66c78a943ef79f33769b61a"},
-    {file = "orjson-3.9.3-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:05c57100517b6dbfe34181ed2248bebfab03bd2a7aafb6fbf849c6fd3bb2fbda"},
-    {file = "orjson-3.9.3-cp37-cp37m-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:aa6017140fe487ab8fae605a2890c94c6fbe7a8e763ff33bbdb00e27ce078cfd"},
-    {file = "orjson-3.9.3-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:6fe77af2ff33c370fb06c9fdf004a66d85ea19c77f0273bbf70c70f98f832725"},
-    {file = "orjson-3.9.3-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e2fa8c385b27bab886caa098fa3ae114d56571ae6e7a5610cb624d7b0a66faed"},
-    {file = "orjson-3.9.3-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8323739e7905ae4ec4dbdebb31067d28be981f30c11b6ae88ddec2671c0b3194"},
-    {file = "orjson-3.9.3-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:ad43fd5b1ededb54fe01e67468710fcfec8a5830e4ce131f85e741ea151a18e9"},
-    {file = "orjson-3.9.3-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:42cb645780f732c829bc351346a54157d57f2bc409e671ee36b9fc1037bb77fe"},
-    {file = "orjson-3.9.3-cp37-none-win32.whl", hash = "sha256:b84542669d1b0175dc2870025b73cbd4f4a3beb17796de6ec82683663e0400f3"},
-    {file = "orjson-3.9.3-cp37-none-win_amd64.whl", hash = "sha256:1440a404ce84f43e2f8e97d8b5fe6f271458e0ffd37290dc3a9f6aa067c69930"},
-    {file = "orjson-3.9.3-cp38-cp38-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:1da8edaefb75f25b449ed4e22d00b9b49211b97dcefd44b742bdd8721d572788"},
-    {file = "orjson-3.9.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:47210746acda49febe3bb07253eb5d63d7c7511beec5fa702aad3ce64e15664f"},
-    {file = "orjson-3.9.3-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:893c62afd5b26f04e2814dffa4d9d4060583ac43dc3e79ed3eadf62a5ac37b2c"},
-    {file = "orjson-3.9.3-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:32aef33ae33901c327fd5679f91fa37199834d122dffd234416a6fe4193d1982"},
-    {file = "orjson-3.9.3-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:bd2761384ddb9de63b20795845d5cedadf052255a34c3ff1750cfc77b29d9926"},
-    {file = "orjson-3.9.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:19e2502b4af2055050dcc74718f2647b65102087c6f5b3f939e2e1a3e3099602"},
-    {file = "orjson-3.9.3-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:fa7c7a39eeb8dd171f59d96fd4610f908ac14b2f2eb268f4498e5f310bda8da7"},
-    {file = "orjson-3.9.3-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:cc3fe0c0ae7acf00d827efe2506131f1b19af3c87e3d76b0e081748984e51c26"},
-    {file = "orjson-3.9.3-cp38-none-win32.whl", hash = "sha256:5b1ff8e920518753b310034e5796f0116f7732b0b27531012d46f0b54f3c8c85"},
-    {file = "orjson-3.9.3-cp38-none-win_amd64.whl", hash = "sha256:9f2b1007174c93dd838f52e623c972df33057e3cb7ad9341b7d9bbd66b8d8fb4"},
-    {file = "orjson-3.9.3-cp39-cp39-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:cddc5b8bd7b0d1dfd36637eedbd83726b8b8a5969d3ecee70a9b54a94b8a0258"},
-    {file = "orjson-3.9.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:43c3bbf4b6f94fad2fd73c81293da8b343fbd07ce48d7836c07d0d54b58c8e93"},
-    {file = "orjson-3.9.3-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:a5cc22ef6973992db18952f8b978781e19a0c62c098f475db936284df9311df7"},
-    {file = "orjson-3.9.3-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9dcea93630986209c690f27f32398956b04ccbba8f1fa7c3d1bb88a01d9ab87a"},
-    {file = "orjson-3.9.3-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:526cb34e63faaad908c34597294507b7a4b999a436b4f206bc4e60ff4e911c20"},
-    {file = "orjson-3.9.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2f5ac6e30ee10af57f52e72f9c8b9bc4846a9343449d10ca2ae9760615da3042"},
-    {file = "orjson-3.9.3-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:b6c37ab097c062bdf535105c7156839c4e370065c476bb2393149ad31a2cdf6e"},
-    {file = "orjson-3.9.3-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:27d69628f449c52a7a34836b15ec948804254f7954457f88de53f2f4de99512f"},
-    {file = "orjson-3.9.3-cp39-none-win32.whl", hash = "sha256:5297463d8831c2327ed22bf92eb6d50347071ff1c73fb4702d50b8bc514aeac9"},
-    {file = "orjson-3.9.3-cp39-none-win_amd64.whl", hash = "sha256:69a33486b5b6e5a99939fdb13c1c0d8bcc7c89fe6083e7b9ce3c70931ca9fb71"},
-    {file = "orjson-3.9.3.tar.gz", hash = "sha256:d3da4faf6398154c1e75d32778035fa7dc284814809f76e8f8d50c4f54859399"},
+    {file = "orjson-3.9.15-cp310-cp310-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:d61f7ce4727a9fa7680cd6f3986b0e2c732639f46a5e0156e550e35258aa313a"},
+    {file = "orjson-3.9.15-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4feeb41882e8aa17634b589533baafdceb387e01e117b1ec65534ec724023d04"},
+    {file = "orjson-3.9.15-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:fbbeb3c9b2edb5fd044b2a070f127a0ac456ffd079cb82746fc84af01ef021a4"},
+    {file = "orjson-3.9.15-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b66bcc5670e8a6b78f0313bcb74774c8291f6f8aeef10fe70e910b8040f3ab75"},
+    {file = "orjson-3.9.15-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:2973474811db7b35c30248d1129c64fd2bdf40d57d84beed2a9a379a6f57d0ab"},
+    {file = "orjson-3.9.15-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9fe41b6f72f52d3da4db524c8653e46243c8c92df826ab5ffaece2dba9cccd58"},
+    {file = "orjson-3.9.15-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:4228aace81781cc9d05a3ec3a6d2673a1ad0d8725b4e915f1089803e9efd2b99"},
+    {file = "orjson-3.9.15-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:6f7b65bfaf69493c73423ce9db66cfe9138b2f9ef62897486417a8fcb0a92bfe"},
+    {file = "orjson-3.9.15-cp310-none-win32.whl", hash = "sha256:2d99e3c4c13a7b0fb3792cc04c2829c9db07838fb6973e578b85c1745e7d0ce7"},
+    {file = "orjson-3.9.15-cp310-none-win_amd64.whl", hash = "sha256:b725da33e6e58e4a5d27958568484aa766e825e93aa20c26c91168be58e08cbb"},
+    {file = "orjson-3.9.15-cp311-cp311-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:c8e8fe01e435005d4421f183038fc70ca85d2c1e490f51fb972db92af6e047c2"},
+    {file = "orjson-3.9.15-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:87f1097acb569dde17f246faa268759a71a2cb8c96dd392cd25c668b104cad2f"},
+    {file = "orjson-3.9.15-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:ff0f9913d82e1d1fadbd976424c316fbc4d9c525c81d047bbdd16bd27dd98cfc"},
+    {file = "orjson-3.9.15-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8055ec598605b0077e29652ccfe9372247474375e0e3f5775c91d9434e12d6b1"},
+    {file = "orjson-3.9.15-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:d6768a327ea1ba44c9114dba5fdda4a214bdb70129065cd0807eb5f010bfcbb5"},
+    {file = "orjson-3.9.15-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:12365576039b1a5a47df01aadb353b68223da413e2e7f98c02403061aad34bde"},
+    {file = "orjson-3.9.15-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:71c6b009d431b3839d7c14c3af86788b3cfac41e969e3e1c22f8a6ea13139404"},
+    {file = "orjson-3.9.15-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:e18668f1bd39e69b7fed19fa7cd1cd110a121ec25439328b5c89934e6d30d357"},
+    {file = "orjson-3.9.15-cp311-none-win32.whl", hash = "sha256:62482873e0289cf7313461009bf62ac8b2e54bc6f00c6fabcde785709231a5d7"},
+    {file = "orjson-3.9.15-cp311-none-win_amd64.whl", hash = "sha256:b3d336ed75d17c7b1af233a6561cf421dee41d9204aa3cfcc6c9c65cd5bb69a8"},
+    {file = "orjson-3.9.15-cp312-cp312-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:82425dd5c7bd3adfe4e94c78e27e2fa02971750c2b7ffba648b0f5d5cc016a73"},
+    {file = "orjson-3.9.15-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2c51378d4a8255b2e7c1e5cc430644f0939539deddfa77f6fac7b56a9784160a"},
+    {file = "orjson-3.9.15-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:6ae4e06be04dc00618247c4ae3f7c3e561d5bc19ab6941427f6d3722a0875ef7"},
+    {file = "orjson-3.9.15-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:bcef128f970bb63ecf9a65f7beafd9b55e3aaf0efc271a4154050fc15cdb386e"},
+    {file = "orjson-3.9.15-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:b72758f3ffc36ca566ba98a8e7f4f373b6c17c646ff8ad9b21ad10c29186f00d"},
+    {file = "orjson-3.9.15-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:10c57bc7b946cf2efa67ac55766e41764b66d40cbd9489041e637c1304400494"},
+    {file = "orjson-3.9.15-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:946c3a1ef25338e78107fba746f299f926db408d34553b4754e90a7de1d44068"},
+    {file = "orjson-3.9.15-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:2f256d03957075fcb5923410058982aea85455d035607486ccb847f095442bda"},
+    {file = "orjson-3.9.15-cp312-none-win_amd64.whl", hash = "sha256:5bb399e1b49db120653a31463b4a7b27cf2fbfe60469546baf681d1b39f4edf2"},
+    {file = "orjson-3.9.15-cp38-cp38-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:b17f0f14a9c0ba55ff6279a922d1932e24b13fc218a3e968ecdbf791b3682b25"},
+    {file = "orjson-3.9.15-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7f6cbd8e6e446fb7e4ed5bac4661a29e43f38aeecbf60c4b900b825a353276a1"},
+    {file = "orjson-3.9.15-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:76bc6356d07c1d9f4b782813094d0caf1703b729d876ab6a676f3aaa9a47e37c"},
+    {file = "orjson-3.9.15-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:fdfa97090e2d6f73dced247a2f2d8004ac6449df6568f30e7fa1a045767c69a6"},
+    {file = "orjson-3.9.15-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:7413070a3e927e4207d00bd65f42d1b780fb0d32d7b1d951f6dc6ade318e1b5a"},
+    {file = "orjson-3.9.15-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9cf1596680ac1f01839dba32d496136bdd5d8ffb858c280fa82bbfeb173bdd40"},
+    {file = "orjson-3.9.15-cp38-cp38-musllinux_1_2_aarch64.whl", hash = "sha256:809d653c155e2cc4fd39ad69c08fdff7f4016c355ae4b88905219d3579e31eb7"},
+    {file = "orjson-3.9.15-cp38-cp38-musllinux_1_2_x86_64.whl", hash = "sha256:920fa5a0c5175ab14b9c78f6f820b75804fb4984423ee4c4f1e6d748f8b22bc1"},
+    {file = "orjson-3.9.15-cp38-none-win32.whl", hash = "sha256:2b5c0f532905e60cf22a511120e3719b85d9c25d0e1c2a8abb20c4dede3b05a5"},
+    {file = "orjson-3.9.15-cp38-none-win_amd64.whl", hash = "sha256:67384f588f7f8daf040114337d34a5188346e3fae6c38b6a19a2fe8c663a2f9b"},
+    {file = "orjson-3.9.15-cp39-cp39-macosx_10_15_x86_64.macosx_11_0_arm64.macosx_10_15_universal2.whl", hash = "sha256:6fc2fe4647927070df3d93f561d7e588a38865ea0040027662e3e541d592811e"},
+    {file = "orjson-3.9.15-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:34cbcd216e7af5270f2ffa63a963346845eb71e174ea530867b7443892d77180"},
+    {file = "orjson-3.9.15-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f541587f5c558abd93cb0de491ce99a9ef8d1ae29dd6ab4dbb5a13281ae04cbd"},
+    {file = "orjson-3.9.15-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:92255879280ef9c3c0bcb327c5a1b8ed694c290d61a6a532458264f887f052cb"},
+    {file = "orjson-3.9.15-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:05a1f57fb601c426635fcae9ddbe90dfc1ed42245eb4c75e4960440cac667262"},
+    {file = "orjson-3.9.15-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ede0bde16cc6e9b96633df1631fbcd66491d1063667f260a4f2386a098393790"},
+    {file = "orjson-3.9.15-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:e88b97ef13910e5f87bcbc4dd7979a7de9ba8702b54d3204ac587e83639c0c2b"},
+    {file = "orjson-3.9.15-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:57d5d8cf9c27f7ef6bc56a5925c7fbc76b61288ab674eb352c26ac780caa5b10"},
+    {file = "orjson-3.9.15-cp39-none-win32.whl", hash = "sha256:001f4eb0ecd8e9ebd295722d0cbedf0748680fb9998d3993abaed2f40587257a"},
+    {file = "orjson-3.9.15-cp39-none-win_amd64.whl", hash = "sha256:ea0b183a5fe6b2b45f3b854b0d19c4e932d6f5934ae1f723b07cf9560edd4ec7"},
+    {file = "orjson-3.9.15.tar.gz", hash = "sha256:95cae920959d772f30ab36d3b25f83bb0f3be671e986c72ce22f8fa700dae061"},
 ]
 
 [[package]]
@@ -9030,4 +9026,4 @@ local = ["ctransformers", "llama-cpp-python", "sentence-transformers"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9,<3.12"
-content-hash = "e23f2b77e2f677167afe0fb55cd0107b2aca261786f78dccf5195fc364028271"
+content-hash = "1462954b3befc2989ae226f2214111be786eb05bade578c9c80b4ed80d5b59ff"
diff --git a/pyproject.toml b/pyproject.toml
index 44ec7d19d..339bdff5e 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -39,7 +39,7 @@ gunicorn = "^21.2.0"
 langchain = "~0.1.0"
 openai = "^1.12.0"
 pandas = "2.2.0"
-chromadb = "^0.4.0"
+chromadb = "^0.4.23"
 huggingface-hub = { version = "^0.20.0", extras = ["inference"] }
 rich = "^13.7.0"
 llama-cpp-python = { version = "~0.2.0", optional = true }
@@ -61,7 +61,7 @@ python-multipart = "^0.0.7"
 sqlmodel = "^0.0.14"
 faiss-cpu = "^1.7.4"
 anthropic = "^0.15.0"
-orjson = "3.9.3"
+orjson = "^3.9.3"
 multiprocess = "^0.70.14"
 cachetools = "^5.3.1"
 types-cachetools = "^5.3.0.5"

From 501bc33abb625001f60911e77be140e0a2d48e65 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 26 Feb 2024 16:03:46 -0300
Subject: [PATCH 22/22] Add useUpdateNodeInternals hook to nodeToolbarComponent
 fixing handle related bugs

---
 .../pages/FlowPage/components/nodeToolbarComponent/index.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 97c3e5ec2..e6a7af312 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -26,6 +26,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn } from "../../../../utils/utils";
+import { useUpdateNodeInternals } from "reactflow";
 
 export default function NodeToolbarComponent({
   data,
@@ -86,6 +87,8 @@ export default function NodeToolbarComponent({
       onCloseAdvancedModal!(false);
     }
   }, [showModalAdvanced]);
+  const updateNodeInternals = useUpdateNodeInternals();
+
 
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));
@@ -191,6 +194,7 @@ export default function NodeToolbarComponent({
 
       return newNode;
     });
+    updateNodeInternals(data.id);
   };
 
   const [openModal, setOpenModal] = useState(false);