From 4c2f3b80dc2443da8c326857dd4bbd9ec186ac98 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 4 May 2023 19:25:24 -0300
Subject: [PATCH 01/45] update ws error handle

---
 .../chatComponent/chatTrigger/index.tsx       |   2 +-
 .../src/components/chatComponent/index.tsx    |   2 +-
 src/frontend/src/modals/chatModal/index.tsx   | 655 +++++++++---------
 3 files changed, 318 insertions(+), 341 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 9d5f67e0c..61c1b4a3e 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -5,7 +5,7 @@ import { PopUpContext } from "../../../contexts/popUpContext";
 import { useContext } from "react";
 import ChatModal from "../../../modals/chatModal";
 
-export default function ChatTrigger({open, setOpen,flow}){
+export default function ChatTrigger({open, setOpen}){
     const {openPopUp} = useContext(PopUpContext)
     return(<Transition
         show={!open}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 1eeddb191..c2dfa2260 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -26,7 +26,7 @@ export default function Chat({ flow }: ChatType) {
   return (
     <>
       <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-      <ChatTrigger open={open} setOpen={setOpen} flow={flow} />
+      <ChatTrigger open={open} setOpen={setOpen} />
     </>
   );
 }
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index dd82ae313..04cf416d3 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -1,13 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
-import {
-  ChatBubbleOvalLeftEllipsisIcon,
-  LockClosedIcon,
-  PaperAirplaneIcon,
-} from "@heroicons/react/24/outline";
+import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { FlowType, NodeType } from "../../types/flow";
-import { TabsContext } from "../../contexts/tabsContext";
 import { alertContext } from "../../contexts/alertContext";
 import { toNormalCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
@@ -20,356 +14,339 @@ import ChatInput from "./chatInput";
 const _ = require("lodash");
 
 export default function ChatModal({
-  flow,
-  open,
-  setOpen,
+	flow,
+	open,
+	setOpen,
 }: {
-  open: boolean;
-  setOpen: Function;
-  flow: FlowType;
+	open: boolean;
+	setOpen: Function;
+	flow: FlowType;
 }) {
-  const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-  const { reactFlowInstance } = useContext(typesContext);
-  const { setErrorData, setNoticeData } = useContext(alertContext);
-  const [ws, setWs] = useState<WebSocket | null>(null);
-  const [lockChat, setLockChat] = useState(false);
-  const addChatHistory = (
-    message: string,
-    isSend: boolean,
-    thought?: string,
-    files?: Array<any>
-  ) => {
-    setChatHistory((old) => {
-      let newChat = _.cloneDeep(old);
-      if (files) {
-        newChat.push({ message, isSend, files, thought });
-      } else if (thought) {
-        newChat.push({ message, isSend, thought });
-      } else {
-        newChat.push({ message, isSend });
-      }
-      return newChat;
-    });
-  };
+	const [chatValue, setChatValue] = useState("");
+	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+	const { reactFlowInstance } = useContext(typesContext);
+	const { setErrorData, setNoticeData } = useContext(alertContext);
+	const [ws, setWs] = useState<WebSocket | null>(null);
+	const [lockChat, setLockChat] = useState(false);
+	const addChatHistory = (
+		message: string,
+		isSend: boolean,
+		thought?: string,
+		files?: Array<any>
+	) => {
+		setChatHistory((old) => {
+			let newChat = _.cloneDeep(old);
+			if (files) {
+				newChat.push({ message, isSend, files, thought });
+			} else if (thought) {
+				newChat.push({ message, isSend, thought });
+			} else {
+				newChat.push({ message, isSend });
+			}
+			return newChat;
+		});
+	};
 
-  function connectWS() {
-    console.log("conectou");
-    try {
-      const urlWs =
-        process.env.NODE_ENV === "development"
-          ? `ws://localhost:7860/chat/${flow.id}`
-          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-              window.location.host
-            }/chat/${flow.id}`;
+	function connectWS() {
+		try {
+			const urlWs =
+				process.env.NODE_ENV === "development"
+					? `ws://localhost:7860/chat/${flow.id}`
+					: `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+							window.location.host
+					  }/chat/${flow.id}`;
 
-      const newWs = new WebSocket(urlWs);
-      newWs.onopen = () => {
-        console.log("WebSocket connection established!");
-      };
-      newWs.onmessage = (event) => {
-        try {
-          setLockChat(false);
-          const data = JSON.parse(event.data);
-          console.log("Received data:", data);
-          //get chat history
-          if (Array.isArray(data)) {
-            console.log(data);
+			const newWs = new WebSocket(urlWs);
+			newWs.onopen = () => {
+				console.log("WebSocket connection established!");
+			};
+			newWs.onmessage = (event) => {
+				setLockChat(false);
+				const data = JSON.parse(event.data);
+				console.log("Received data:", data);
+				//get chat history
+				if (Array.isArray(data)) {
+					console.log(data);
 
-            setChatHistory((_) => {
-              let newChatHistory: ChatMessageType[] = [];
-              data.forEach(
-                (chatItem: {
-                  intermediate_steps?: "string";
-                  is_bot: boolean;
-                  message: string;
-                  type: string;
-                  files?: Array<any>;
-                }) => {
-                  if (chatItem.message) {
-                    newChatHistory.push(
-                      chatItem.files
-                        ? {
-                            isSend: !chatItem.is_bot,
-                            message: chatItem.message,
-                            thought: chatItem.intermediate_steps,
-                            files: chatItem.files,
-                          }
-                        : {
-                            isSend: !chatItem.is_bot,
-                            message: chatItem.message,
-                            thought: chatItem.intermediate_steps,
-                          }
-                    );
-                  }
-                }
-              );
-              return newChatHistory;
-            });
-          }
-          if (data.type === "end") {
-            if (data.files) {
-              addChatHistory(
-                data.message,
-                false,
-                data.intermediate_steps,
-                data.files
-              );
-            } else {
-              addChatHistory(data.message, false, data.intermediate_steps);
-            }
-          }
-          if (data.type == "file") {
-            console.log(data);
-          }
-        } catch (error) {
-          if (event.data !== "Error: 1005") {
-            setErrorData({ title: event.data });
-            newWs.close();
-            connectWS();
-          }
-        }
-      };
-      newWs.onclose = (_) => {
-        if (open) {
-          setLockChat(false);
-          setTimeout(() => {
-            connectWS();
-          }, 1000);
-        }
-      };
-      newWs.onerror = (ev) => {
-        console.log(ev, "error");
-      };
-      setWs(newWs);
+					setChatHistory((_) => {
+						let newChatHistory: ChatMessageType[] = [];
+						data.forEach(
+							(chatItem: {
+								intermediate_steps?: "string";
+								is_bot: boolean;
+								message: string;
+								type: string;
+								files?: Array<any>;
+							}) => {
+								if (chatItem.message) {
+									newChatHistory.push(
+										chatItem.files
+											? {
+													isSend: !chatItem.is_bot,
+													message: chatItem.message,
+													thought: chatItem.intermediate_steps,
+													files: chatItem.files,
+											  }
+											: {
+													isSend: !chatItem.is_bot,
+													message: chatItem.message,
+													thought: chatItem.intermediate_steps,
+											  }
+									);
+								}
+							}
+						);
+						return newChatHistory;
+					});
+				}
+				if (data.type === "end") {
+					if (data.files) {
+						addChatHistory(
+							data.message,
+							false,
+							data.intermediate_steps,
+							data.files
+						);
+					} else {
+						addChatHistory(data.message, false, data.intermediate_steps);
+					}
+				}
+				if (data.type === "file") {
+					console.log(data);
+				}
+			};
+			newWs.onclose = (_) => {
+				setLockChat(false);
+				setTimeout(() => {
+					connectWS();
+				}, 1000);
+			};
+			newWs.onerror = (ev) => {
+				console.log(ev, "error");
+			};
+			setWs(newWs);
 
-      return newWs;
-    } catch {
-      setErrorData({
-        title: "There was an error on web connection, please: ",
-        list: [
-          "refresh the page",
-          "use a new flow tab",
-          "check if the backend is up",
-        ],
-      });
-    }
-  }
+			return newWs;
+		} catch {
+			setErrorData({
+				title: "There was an error on web connection, please: ",
+				list: [
+					"Refresh the page",
+					"Use a new flow tab",
+					"Check if the backend is up",
+				],
+			});
+		}
+	}
 
-  useEffect(() => {
-    if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) {
-      let newWs = connectWS();
-      return () => {
-        console.log("trigger");
-        newWs.close();
-      };
-    }
-  }, [lockChat]);
+	useEffect(() => {
+		let newWs = connectWS();
+		return () => {
+			console.log("trigger");
+			newWs.close();
+		};
+	}, []);
 
-  useEffect(() => {
-    let newWs = connectWS();
-    return () => {
-      console.log("trigger");
-      newWs.close();
-    };
-  }, []);
+	useEffect(() => {
+		if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) {
+			let newWs = connectWS();
+			return () => {
+				console.log("trigger");
+				newWs.close();
+			};
+		}
+	}, [lockChat]);
 
-  async function sendAll(data: sendAllProps) {
-    try {
-      if (ws) {
-        ws.send(JSON.stringify(data));
-      }
-    } catch (error) {
-      setErrorData({
-        title: "There was an erro sending the message",
-        list: [error.message],
-      });
-      setChatValue(data.message);
-      connectWS();
-    }
-  }
+	async function sendAll(data: sendAllProps) {
+		try {
+			if (ws) {
+				ws.send(JSON.stringify(data));
+			}
+		} catch (error) {
+			setErrorData({
+				title: "There was an erro sending the message",
+				list: [error.message],
+			});
+			setChatValue(data.message);
+			connectWS();
+		}
+	}
 
-  useEffect(() => {
-    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-  }, [chatHistory]);
+	useEffect(() => {
+		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
+	}, [chatHistory]);
 
-  useEffect(() => {
-    if (ws && ws.readyState === ws.CLOSED) {
-      setLockChat(false);
-    }
-  }, [lockChat]);
+	useEffect(() => {
+		if (ws && ws.readyState === ws.CLOSED) {
+			setLockChat(false);
+		}
+	}, [lockChat]);
 
-  function validateNode(n: NodeType): Array<string> {
-    if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
-      setNoticeData({
-        title:
-          "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
-      });
-      return [];
-    }
+	function validateNode(n: NodeType): Array<string> {
+		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
+			setNoticeData({
+				title:
+					"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
+			});
+			return [];
+		}
 
-    const {
-      type,
-      node: { template },
-    } = n.data;
+		const {
+			type,
+			node: { template },
+		} = n.data;
 
-    return Object.keys(template).reduce(
-      (errors: Array<string>, t) =>
-        errors.concat(
-          template[t].required &&
-            template[t].show &&
-            (!template[t].value || template[t].value === "") &&
-            !reactFlowInstance
-              .getEdges()
-              .some(
-                (e) =>
-                  e.targetHandle.split("|")[1] === t &&
-                  e.targetHandle.split("|")[2] === n.id
-              )
-            ? [
-                `${type} is missing ${
-                  template.display_name
-                    ? template.display_name
-                    : toNormalCase(template[t].name)
-                }.`,
-              ]
-            : []
-        ),
-      [] as string[]
-    );
-  }
+		return Object.keys(template).reduce(
+			(errors: Array<string>, t) =>
+				errors.concat(
+					template[t].required &&
+						template[t].show &&
+						(!template[t].value || template[t].value === "") &&
+						!reactFlowInstance
+							.getEdges()
+							.some(
+								(e) =>
+									e.targetHandle.split("|")[1] === t &&
+									e.targetHandle.split("|")[2] === n.id
+							)
+						? [
+								`${type} is missing ${
+									template.display_name
+										? template.display_name
+										: toNormalCase(template[t].name)
+								}.`,
+						  ]
+						: []
+				),
+			[] as string[]
+		);
+	}
 
-  function validateNodes() {
-    return reactFlowInstance
-      .getNodes()
-      .flatMap((n: NodeType) => validateNode(n));
-  }
+	function validateNodes() {
+		return reactFlowInstance
+			.getNodes()
+			.flatMap((n: NodeType) => validateNode(n));
+	}
 
-  const ref = useRef(null);
+	const ref = useRef(null);
 
-  function sendMessage() {
-    if (chatValue !== "") {
-      let nodeValidationErrors = validateNodes();
-      if (nodeValidationErrors.length === 0) {
-        setLockChat(true);
-        let message = chatValue;
-        setChatValue("");
-        addChatHistory(message, true);
+	function sendMessage() {
+		if (chatValue !== "") {
+			let nodeValidationErrors = validateNodes();
+			if (nodeValidationErrors.length === 0) {
+				setLockChat(true);
+				let message = chatValue;
+				setChatValue("");
+				addChatHistory(message, true);
 
-        sendAll({
-          ...reactFlowInstance.toObject(),
-          message,
-          chatHistory,
-          name: flow.name,
-          description: flow.description,
-        });
-      } else {
-        setErrorData({
-          title: "Oops! Looks like you missed some required information:",
-          list: nodeValidationErrors,
-        });
-      }
-    } else {
-      setErrorData({
-        title: "Error sending message",
-        list: ["The message cannot be empty."],
-      });
-    }
-  }
-  function clearChat() {
-    setChatHistory([]);
-    ws.send(JSON.stringify({ clear_history: true }));
-  }
+				sendAll({
+					...reactFlowInstance.toObject(),
+					message,
+					chatHistory,
+					name: flow.name,
+					description: flow.description,
+				});
+			} else {
+				setErrorData({
+					title: "Oops! Looks like you missed some required information:",
+					list: nodeValidationErrors,
+				});
+			}
+		} else {
+			setErrorData({
+				title: "Error sending message",
+				list: ["The message cannot be empty."],
+			});
+		}
+	}
+	function clearChat() {
+		setChatHistory([]);
+		ws.send(JSON.stringify({ clear_history: true }));
+	}
 
-  const { closePopUp } = useContext(PopUpContext);
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
-  return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
-        </Transition.Child>
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+	}
+	return (
+		<Transition.Root show={open} appear={open} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
-                <div className="relative w-full">
-                  <button
-                    onClick={() => clearChat()}
-                    className="absolute top-2 right-2 hover:text-red-500"
-                  >
-                    <FaEraser className="w-4 h-4" />
-                  </button>
-                </div>
-                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-                  {chatHistory.length > 0 ? (
-                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
-                  ) : (
-                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
-                      <span>
-                        👋{" "}
-                        <span className="text-gray-600 text-lg">
-                          LangFlow Chat
-                        </span>
-                      </span>
-                      <br />
-                      <div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
-                        <span className="text-base text-gray-500">
-                          Start a conversation and click the agent’s thoughts{" "}
-                          <span>
-                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
-                          </span>{" "}
-                          to inspect the chaining process.
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                  <div ref={ref}></div>
-                </div>
-                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-                  <div className="relative w-full mt-1 rounded-md shadow-sm">
-                    <ChatInput
-                      chatValue={chatValue}
-                      lockChat={lockChat}
-                      sendMessage={sendMessage}
-                      setChatValue={setChatValue}
-                    />
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+								<div className="relative w-full">
+									<button
+										onClick={() => clearChat()}
+										className="absolute top-2 right-2 hover:text-red-500"
+									>
+										<FaEraser className="w-4 h-4" />
+									</button>
+								</div>
+								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
+									{chatHistory.length > 0 ? (
+										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+									) : (
+										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
+											<span>
+												👋{" "}
+												<span className="text-gray-600 text-lg">
+													LangFlow Chat
+												</span>
+											</span>
+											<br />
+											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+												<span className="text-base text-gray-500">
+													Start a conversation and click the agent’s thoughts{" "}
+													<span>
+														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+													</span>{" "}
+													to inspect the chaining process.
+												</span>
+											</div>
+										</div>
+									)}
+									<div ref={ref}></div>
+								</div>
+								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+									<div className="relative w-full mt-1 rounded-md shadow-sm">
+										<ChatInput
+											chatValue={chatValue}
+											lockChat={lockChat}
+											sendMessage={sendMessage}
+											setChatValue={setChatValue}
+										/>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }

From 474e14efaf98b6ddcac97d42812aa4a3f1aadf27 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 5 May 2023 11:55:25 -0300
Subject: [PATCH 02/45] refactor(langflow): replace langchain_object.run with
 langchain_object.acall in get_result_and_steps function feat(langflow): add
 support for streaming intermediate steps to the client via websockets

---
 src/backend/langflow/api/callback.py     |  3 ++-
 src/backend/langflow/api/chat.py         |  8 ++------
 src/backend/langflow/api/chat_manager.py | 15 ++++++++-------
 src/backend/langflow/interface/run.py    | 11 +++++++----
 src/backend/langflow/interface/utils.py  | 11 ++---------
 5 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/backend/langflow/api/callback.py b/src/backend/langflow/api/callback.py
index baab596a4..a6590673e 100644
--- a/src/backend/langflow/api/callback.py
+++ b/src/backend/langflow/api/callback.py
@@ -1,6 +1,7 @@
+import asyncio
 from typing import Any
 
-from langchain.callbacks.base import AsyncCallbackHandler
+from langchain.callbacks.base import AsyncCallbackHandler, BaseCallbackHandler
 
 from langflow.api.schemas import ChatResponse
 
diff --git a/src/backend/langflow/api/chat.py b/src/backend/langflow/api/chat.py
index e25d0d2f1..48a195179 100644
--- a/src/backend/langflow/api/chat.py
+++ b/src/backend/langflow/api/chat.py
@@ -10,9 +10,5 @@ chat_manager = ChatManager()
 @router.websocket("/chat/{client_id}")
 async def websocket_endpoint(client_id: str, websocket: WebSocket):
     """Websocket endpoint for chat."""
-    try:
-        await chat_manager.handle_websocket(client_id, websocket)
-    except Exception as e:
-        # Log stack trace
-        logger.exception(e)
-        raise e
+
+    await chat_manager.handle_websocket(client_id, websocket)
diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 2dab12e34..eff60cadd 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -5,6 +5,7 @@ from typing import Dict, List
 
 from fastapi import WebSocket
 
+from langflow.api.callback import StreamingLLMCallbackHandler
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
 from langflow.cache.manager import Subject
@@ -175,12 +176,11 @@ class ChatManager:
             # Handle any exceptions that might occur
             logger.exception(e)
             # send a message to the client
-            await self.send_message(client_id, str(e))
-            raise e
+            await self.active_connections[client_id].close(code=1000, reason=str(e))
         finally:
-            await self.active_connections[client_id].close(
-                code=1000, reason="Client disconnected"
-            )
+            # await self.active_connections[client_id].close(
+            #     code=1000, reason="Client disconnected"
+            # )
             self.disconnect(client_id)
 
 
@@ -203,8 +203,9 @@ async def process_graph(
     # Generate result and thought
     try:
         logger.debug("Generating result and thought")
-        result, intermediate_steps = get_result_and_steps(
-            langchain_object, chat_message.message or ""
+        stream_handler = StreamingLLMCallbackHandler(websocket)
+        result, intermediate_steps = await get_result_and_steps(
+            langchain_object, chat_message.message or "", callbacks=[stream_handler]
         )
         logger.debug("Generated result and intermediate_steps")
         return result, intermediate_steps
diff --git a/src/backend/langflow/interface/run.py b/src/backend/langflow/interface/run.py
index 68639785c..a8d55d3be 100644
--- a/src/backend/langflow/interface/run.py
+++ b/src/backend/langflow/interface/run.py
@@ -185,8 +185,11 @@ def fix_memory_inputs(langchain_object):
             update_memory_keys(langchain_object, possible_new_mem_key)
 
 
-def get_result_and_steps(langchain_object, message: str):
+async def get_result_and_steps(langchain_object, message: str, callbacks=None):
     """Get result and thought from extracted json"""
+
+    if callbacks is None:
+        callbacks = []
     try:
         if hasattr(langchain_object, "verbose"):
             langchain_object.verbose = True
@@ -206,17 +209,17 @@ def get_result_and_steps(langchain_object, message: str):
             # https://github.com/hwchase17/langchain/issues/2068
             # Deactivating until we have a frontend solution
             # to display intermediate steps
-            langchain_object.return_intermediate_steps = False
+            langchain_object.return_intermediate_steps = True
 
         fix_memory_inputs(langchain_object)
 
         with io.StringIO() as output_buffer, contextlib.redirect_stdout(output_buffer):
             try:
-                output = langchain_object(chat_input)
+                output = await langchain_object.acall(chat_input, callbacks=callbacks)
             except ValueError as exc:
                 # make the error message more informative
                 logger.debug(f"Error: {str(exc)}")
-                output = langchain_object.run(chat_input)
+                output = langchain_object.run(chat_input, callbacks=callbacks)
 
             intermediate_steps = (
                 output.get("intermediate_steps", []) if isinstance(output, dict) else []
diff --git a/src/backend/langflow/interface/utils.py b/src/backend/langflow/interface/utils.py
index e8b3e417e..7368fda3e 100644
--- a/src/backend/langflow/interface/utils.py
+++ b/src/backend/langflow/interface/utils.py
@@ -4,13 +4,9 @@ import os
 from io import BytesIO
 
 import yaml
-from langchain.callbacks.manager import AsyncCallbackManager
-from langchain.chat_models import AzureChatOpenAI, ChatOpenAI
-from langchain.llms import AzureOpenAI, OpenAI
+from langchain.base_language import BaseLanguageModel
 from PIL.Image import Image
 
-from langflow.api.callback import StreamingLLMCallbackHandler
-
 
 def load_file_into_dict(file_path: str) -> dict:
     if not os.path.exists(file_path):
@@ -48,10 +44,7 @@ def try_setting_streaming_options(langchain_object, websocket):
         langchain_object.llm_chain, "llm"
     ):
         llm = langchain_object.llm_chain.llm
-    if isinstance(llm, (OpenAI, ChatOpenAI, AzureOpenAI, AzureChatOpenAI)):
+    if isinstance(llm, BaseLanguageModel):
         llm.streaming = bool(hasattr(llm, "streaming"))
-        stream_handler = StreamingLLMCallbackHandler(websocket)
-        stream_manager = AsyncCallbackManager([stream_handler])
-        llm.callback_manager = stream_manager
 
     return langchain_object

From c032e2a0d12600dabb74ec5a9c5d498a846d30b3 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 5 May 2023 12:22:51 -0300
Subject: [PATCH 03/45] refactor(chat_manager.py): remove unused variable
 'result' and set message to empty string

---
 src/backend/langflow/api/chat_manager.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index eff60cadd..280f51b3a 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -144,7 +144,7 @@ class ChatManager:
                     break
 
         response = ChatResponse(
-            message=result or "",
+            message="",
             intermediate_steps=intermediate_steps.strip(),
             type="end",
             files=file_responses,

From dd4803180c33f98b42a108cef92b8d01ce0d6f24 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 5 May 2023 12:42:52 -0300
Subject: [PATCH 04/45] update lock

---
 poetry.lock | 375 ++++++++++++++++++++++++++--------------------------
 1 file changed, 188 insertions(+), 187 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index a8c7132bc..11009b370 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -551,77 +551,77 @@ colorama = {version = "*", markers = "platform_system == \"Windows\""}
 
 [[package]]
 name = "clickhouse-connect"
-version = "0.5.22"
+version = "0.5.23"
 description = "ClickHouse core driver, SqlAlchemy, and Superset libraries"
 category = "main"
 optional = false
 python-versions = "~=3.7"
 files = [
-    {file = "clickhouse-connect-0.5.22.tar.gz", hash = "sha256:cc8f01ff88d30b118cf2efc33ac34c89a1e332900396da249df7d0f36ac199d7"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:09b461047dfc18c9b6ebfc94fb6022c5fc0ee7a343e1e691ee70294dce532909"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:a0ac953ecd231d311f0c1a0576f164c1e6034358eb28cddcf5a2304d570a211d"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:02629304d233df14cd7df5dfb37dd5f87feaa95a7506f984a565e3b8fb185210"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:327452ed2622c1b6433ab6a1032813b3bf14a33959d47a2b896b2ab5e1a58e07"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7b7e9f5f9332c5ae51a0f1aecb99117222cc739a8b430b1961261e2cc9dca215"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:5ad201756d2d2d7269c747835ba4f24da3d744bc2801e813f8b33fec897ffe10"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:c577bcc2b7e1f71073cf4f87600fd6f06ebfc9cd6ae8a98b28ebed9ebcfb80dd"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:83b4efc0f7db5b02348a97dba2b2fcd089d6eb45457049d49ed795a084dd7832"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-win32.whl", hash = "sha256:83b613dcab009ff1b18d5bd3cb9e8c2fe2cdd6b67cd1309389c04f11d3621713"},
-    {file = "clickhouse_connect-0.5.22-cp310-cp310-win_amd64.whl", hash = "sha256:6954b98df0c2624f9933530eabdc1ad3bf143633e2c5328a3f1e167344f8a9c8"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:45972e1a37269b3d9ecbcd3eee4f7cbed4a1311d867ce45a6a30a707b31cb6b6"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:436eadecdcf8685a5d1f8654b1a7f689f3933db2eae799f1ec6f183e91f2a5a9"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9610d103f42a45362d1c95dc7ef356c5da86359538f9d30e6298f83d407bb643"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:25996d9868b79a4f1442ca4200a44882f192466399c767f010e169ca4328cd80"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7562e357debe460dd29c8b5bc457fab9e3c1ab5ff20531aa2a43a0f05d429ed4"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:8a3ad2a4d216572067611add9ba285b1aaaf464cd67d57a1d0980c2491bde361"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:6c6beacd96bf7eb0a0eb9e33c1d92b8b9dec642916a630332cc599f6c7441064"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:c82b5ea7a2814e19b01c192a32ae705d462be7c27fb8759623b6c03e117d4635"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-win32.whl", hash = "sha256:1cc5fde42bbad4739a6c308bc75fba6d9b817529149447f4393c4092bce01aca"},
-    {file = "clickhouse_connect-0.5.22-cp311-cp311-win_amd64.whl", hash = "sha256:f82269d18fdc25a2d92378ffd5ecb90658cb0748d14819f129a501c660cbdbe8"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:0d135ae71723b28f3e250ff030583fd6f5f16af19b7d14bf6bec98be630c2e3b"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e8fc12861461a5b88fd8826c500300ef48b18fa820b9c94be9233198475de67a"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3c83e8c0b7596ddb255b98e01a3bc9f7ed9f4bde4d072794be217a73d8c6e7c6"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:92a903b8ee52dc65da422ecb2b23b27b469cd076c313a2dd69237f06f642e719"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:ee4beb12c6ca9bd5cbdf6661750d7d20b532abb360cd9e93d684114a2e4c0f9d"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:4dcda1e33e64537d7b3969c0dec15bdf67a56a5f0801e85f7fd7cb0717a4ce45"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:9b1627800be5148ceee872de67b6483f89c89557b9032ea3c09b68b5fa5e1422"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-win32.whl", hash = "sha256:c0cc27d041c994d61b3a5065734b65c0fe9d578fb6dcf614e46f1893b4259e9f"},
-    {file = "clickhouse_connect-0.5.22-cp37-cp37m-win_amd64.whl", hash = "sha256:5ea78955374abe704c10f0fcb012a954087d45513e3abceefd8d50311b91e72f"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:f96ad0d9ab681b2c9d5b1ea622f1446c30267639dce452cf09733af8b70cc565"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:2c3bc819b930755599d9ef9d58f353f1b6e4013115b793870768de8027738846"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7125ad73427597fb0aecf9983eb69870242788dfb134dfec2e5bc24795b757ce"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:995567a46488b51b68070320c90c4dede2e1315b3ae99f8b519889ecff1e0497"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:19e593a63bc6d081b2e11714de14a8b7509fb86e721489349034cf98412225f0"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:621e2e49af7d8e62dca25eb0663db493af4b26fd25e7c3a4b30a4fdf51b08c87"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:00354463177fcf15ce075205b54ae2f8321f72fa5511e4894bfcc4aab430e6f4"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:8d93b85eb6bc809a82b592bbe1244b63c2708478eb751a65f250203e6afa72e7"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-win32.whl", hash = "sha256:56fdf98ccdd1a7536b3066479b832a339285e0c806c056e7192547d31d14cbb2"},
-    {file = "clickhouse_connect-0.5.22-cp38-cp38-win_amd64.whl", hash = "sha256:ef0e233fcccd48398d378e631ca4582725e816e1cd87e38352703969da72815f"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:4e00a47fb565ed0f24e048457c67b4ab63676be5b0fe2334a7c43938e6d0a4b9"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:44dc02467f3a9c0d91174d09fcdc4c33ed03aa43cdacbb34fd5bb16db3d1b380"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f6f020238fbb7e9e0800ef0e3661dc220ef7427a5942732797b189fb5c563274"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:251ce0491f06e0bb50f8bb006296fbe30efa111748b276b654fc39cb4fd6e4b4"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:88abb8ef9e7d48258c17f02d62f0d9a29f09073a0a1628c6024f68ed1670606b"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:24292e0bb742d328c66f38838c3fe1654552e2817d470f8ad040a985b8d1a799"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:4c7baf4b535e9cb063568616aaac183c8bb611575ed515d1b55794122feda60b"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:7f413cf98d7d99087be993573e8e0d441131fb8d30b62a50af5b6a75a6f7af66"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-win32.whl", hash = "sha256:76087148e9f7632321b39d582f13050820290d8d233721413ebd131d12e70e76"},
-    {file = "clickhouse_connect-0.5.22-cp39-cp39-win_amd64.whl", hash = "sha256:6b69c9bd695e8129452bb9f0456f6e16caf12592eec3d4f677e626bdde42724a"},
-    {file = "clickhouse_connect-0.5.22-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:719fb63118147ae5c03db85bc5fa0b6b30ab1e51da7eb64bcbf5b7d03dc405b5"},
-    {file = "clickhouse_connect-0.5.22-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4a04b409b7907cc0f9e70329f6f5ff42fb3ad5a345db9b56a05f55194071d0f1"},
-    {file = "clickhouse_connect-0.5.22-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:77fa7929b7859300be57a2e182aed51efcdba39c8995a19600c746c749d72e00"},
-    {file = "clickhouse_connect-0.5.22-pp37-pypy37_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:311921fb37625f885fa0c957490cd3189afdf2d9ea314d3fad61e26d8932d61b"},
-    {file = "clickhouse_connect-0.5.22-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:13ed25c3173af67642cc1553e8bc6583a870227b685bbea5897efc3bc78addfd"},
-    {file = "clickhouse_connect-0.5.22-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:4f745384cd6d02d00c5186f9c36d2cd27634fd41d3de4705a7de59d47d6976d0"},
-    {file = "clickhouse_connect-0.5.22-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2b9cb52f22bb438326503d20e54d68b378076e842abc5345da0b1822a01a309b"},
-    {file = "clickhouse_connect-0.5.22-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2fceb764177f24b9808039ef75e2b2f31e93971cf8d2bc9b8249a268a742190a"},
-    {file = "clickhouse_connect-0.5.22-pp38-pypy38_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:03ec3990efac7e11dcb66dff64456c255e5f2eaad7f12ae111c97915dd51a84c"},
-    {file = "clickhouse_connect-0.5.22-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:a924e87f568eeac25dc39b97bba09ecf9fca2e57bf414bc3c5f2282358af7a67"},
-    {file = "clickhouse_connect-0.5.22-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:89a0f649eb49398708c632336bcbc2f762e26e258a693a844570c003407d9869"},
-    {file = "clickhouse_connect-0.5.22-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8abf10e0f5cb913df5d80c609cb95850aae436d31095208c3d938df2c4d0524a"},
-    {file = "clickhouse_connect-0.5.22-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d06ee767384ab7c84f96a1825cdc4dd5dcd41c25dd69bf4a56233e2bbc05ee7b"},
-    {file = "clickhouse_connect-0.5.22-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:ed4e041398246a474c295e55c10ccda42df6a2af9922cffe775c3c0dd93a50c8"},
-    {file = "clickhouse_connect-0.5.22-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:2f444b4af4327747e43fe8abdd31af64e9fef425c7554a6d04ebca4acd114c71"},
+    {file = "clickhouse-connect-0.5.23.tar.gz", hash = "sha256:d4c48f2b05807720a638df4e8f8e71d45a6eb548c6183b44782270631a34b849"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:df35ab8af6d46cce12552d7bd25fe657d3ad8c8b4956a1067441c25c1e63cc61"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:addb0a933821b68984dff82345846a6c5fd161e471cfdfc22933d3c33dafe545"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:181670af78bd4186d8b250ad25a2afedf4a50a938e2f10dc945b291d7956f6bc"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4e1ac16086a3f247943aea2fceaec6fddcfaf00f87376dede2199ca26a41aa28"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f8de0e470329eb1f26c9a3feba38e13732ca91b11f414f76c91d52ff4a5ff4f8"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:e68dad117e7b27ae3ba30ae7b5c8a8ce9a7f34703aea04e18dba5b09e353f38d"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:2d8aadd1508d9acb2f7a604662aa6987efb87ea9e51cd2e3413d61c69f1fdd50"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:1a8f3887c2422ee28512aa944e3bc642c9dd6c2749d8c204c25a90989bf4a430"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-win32.whl", hash = "sha256:d1909c6359855dd42225709672bb61e3fbc2c8ab5e6cbb48582136df3d57d216"},
+    {file = "clickhouse_connect-0.5.23-cp310-cp310-win_amd64.whl", hash = "sha256:95eff3b153a5fd810f54dfc1b3043a86218db0a31f17c926eacca262a269cfac"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:72d75a02a1caa3fdb5edbab988e4d3abfcf2f380df3ea68275047c40f39e562e"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:bc23c24b2aabdd81366c9a90c6262ecfcb64b22e16b5704d29dc648c732ac8fd"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:99f0f72bccbf55578ab34c7ad9a76f803db1eb778ed7ca0e4f4b867c75a41c16"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:842150ff73575cfe9cc295ccb4c205ec5a8907c3290d2a99460427993c7a6a03"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3703d8ff05b2d9ff30bb1fc4eaff5349cc1017a193e6d5746fc35393d2f80899"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:af3f83a85341bd5d8525533c83a9dfe64676df7e0ede517639b96746ce50a57d"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:58f95eff87c4d437f39b8192532fcf4e05dee2601b6313e2ad2c4913bef312e2"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:db6b9ad563d5fbc1729249fed60c657f4844eb27105241f5142dae77c007641a"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-win32.whl", hash = "sha256:ca9ebf6d5a86e336f61c0b9364fb9ae944b6b38195d3b92db2bf712a50f1c213"},
+    {file = "clickhouse_connect-0.5.23-cp311-cp311-win_amd64.whl", hash = "sha256:e432a51dd58e0c0921e51df53f33ec0c8740109bb84b65beb0b1702914356a0e"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:76927edeab12e2539e41e64b8b8923fe636e9a52a6edf58f4c588e5948d0c2bd"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:97902396d33a4b02a9515b37fb56e4dac392f2421e1e53874524a3829a861595"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ef8edec9769656346e74f02948f9565d9f3ba0ca1021d879fb410e30a54f8478"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:acb72211fad7ea02d16baca6a57a184142b58e8604de32faf4cdb19e18930110"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:d14331736b32c14a8d432ea4785c3a56c12c669ecb0c4049b3a2567a3d10ae18"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:df465815aba293ed2f96885491c900ab34a2a6b98ff9b446d777938802ac127d"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:1245ad0cb77871b3f3bc87d55bbbc8137125cb71a073d4a522f12707fed1f3a3"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-win32.whl", hash = "sha256:e939f6429784d175863bbf321f781510aa165b01e5442a7fb7fa7885071d1846"},
+    {file = "clickhouse_connect-0.5.23-cp37-cp37m-win_amd64.whl", hash = "sha256:79f5863afcbad0b9bd37a080be4a710c3562a658d474df4e07be29b33c324cc0"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:7652dd19953cffd51c75cdfef70c763d6dc631af89c4988c29d20e129f391b10"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:596012ec214b5f4b07e148686669e2be10b83522cd7c72cdb38f8b9bcd181d62"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:91c355f7a203c77aad56cc9c73f1d570446e4ed5bb57b3c90e8c74956bf7c305"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:dc67f14f1d6eaa65a48e1170407b1cedd9cdc3b90506c090ea67ba4c4307e1cb"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:6ec68ed44ab02ce4d97998bdd215efca5e863dab0819427057bb5ec0e97ca8a6"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:602fcac024b6314f96f39b3ff0fb1aa54bfe9d2de1d3958ddcedb19616129535"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:3c636c9154d2d9b57188b20ec42524e2258029874442259a605171a420ca0d52"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:46fd5427353690b68cb41e808919819f376ab503297fbfc59b51506181cd4410"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-win32.whl", hash = "sha256:6594d3189f4f67e49775aec12ef593052b056aa338d0b7a27905a1176979ae5f"},
+    {file = "clickhouse_connect-0.5.23-cp38-cp38-win_amd64.whl", hash = "sha256:69cd6eb7c220cc55f3e9ff6391f7d02fa789740983863acd7e68bdd3956163c6"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:1afd4089296678ed20d38e100b121ea9caa05a24f9cdc66b72ded8ed06d705b8"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:381279e5382086ae07e988770e38b601342165a577c606589616315324545135"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a3cbf47331b7c220a558be6c6667599f53fc0070c0abdcc27d7bbc215b56da61"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7a924dd889c7c740f7cd8cbb7f4d3fa3e7f794400d50adaa1190f1cd8786f238"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:37069cf6aa4fd18e7daaa7be52afebe51ae57ebdc001d1c0c1784bfa474cebda"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:c3a29c3473f1c0c60a8639c48487c0ba220636c79a1f37a7fdb1a3ee2392b8a1"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:52c469867ce021a1b0e831a0c2544062ecc6df4cae93f51895c993c09e9092ee"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:da233d6584109ee96b1e35137ac5866d38a1ec3b62b36cd0ed05d573729f5234"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-win32.whl", hash = "sha256:5cb9564f0634f3a1f78ba122c7d05288b46a4c2fc464b378e138b8c7d02f188a"},
+    {file = "clickhouse_connect-0.5.23-cp39-cp39-win_amd64.whl", hash = "sha256:22ba7629e2f96b22c41ea018386d1295a379d993c9a8db8721f0fd1c3903e2c0"},
+    {file = "clickhouse_connect-0.5.23-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:0af8c5162c7c0dbf0be46d0ac5ab32a2e30b9e2581c0c90b51abcbac7a1959d9"},
+    {file = "clickhouse_connect-0.5.23-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f4624e496b709d55ae76f469040f5ea98a281045adf4bd7f717812a3273fcffa"},
+    {file = "clickhouse_connect-0.5.23-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e5b812c30283d54e09cb66d33a69352e06a520a0798c51ea2c9b164c9328880b"},
+    {file = "clickhouse_connect-0.5.23-pp37-pypy37_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:a0ff4b37b994fb82e525e4c0ac3e645964efb8ee78499dfbf4bbe7cda4299399"},
+    {file = "clickhouse_connect-0.5.23-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:7d595f2b6c7dbbc20f78c0191bb14b186b049069a1249460e912514601818bd8"},
+    {file = "clickhouse_connect-0.5.23-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:944ec9e9f7bf5cdb35f077d641dd5dd2ce4fd33ca032c3908f1cccba1a54ae31"},
+    {file = "clickhouse_connect-0.5.23-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e59893f62fa538cbcdd61793672ecf6866f2842212f19efecf1d117c0ccd1460"},
+    {file = "clickhouse_connect-0.5.23-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0f02750cd9d1a9c5a83a94d347caef9cf15109574e374dddf3e541ab4f9272ea"},
+    {file = "clickhouse_connect-0.5.23-pp38-pypy38_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:21c5909075514df1cee78d7b854426df15af0a6fc7f6f24626f9d0b928a7a5a0"},
+    {file = "clickhouse_connect-0.5.23-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:b289d8fc4ed0a71821f23c10acc10f013c7bed96e8fb6ee81ad8f5a6c8fe0ee2"},
+    {file = "clickhouse_connect-0.5.23-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:f27bcc8709799d35a8e5b0050db746883cf94077b7f5f31f4fb8d86096cf272c"},
+    {file = "clickhouse_connect-0.5.23-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:60c659f95364617dec828c5fd64b1ec24712bc1b81dab104b118ea2802c8ff70"},
+    {file = "clickhouse_connect-0.5.23-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:520cd348dde41c3f43e3ce035c5db7d18e0a0b810d8d1cd08b21e2cc6abb7928"},
+    {file = "clickhouse_connect-0.5.23-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4aa370480010ab4b24a28b07533d123e99ca789369c5e8a3cff9bd96cdcea56e"},
+    {file = "clickhouse_connect-0.5.23-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:90b3dfcdd92cc42bb14a3f2d98ddfee772c0951bcc2443a178d84c27c9850d30"},
 ]
 
 [package.dependencies]
@@ -1573,14 +1573,14 @@ test = ["flaky", "ipyparallel", "pre-commit", "pytest (>=7.0)", "pytest-asyncio"
 
 [[package]]
 name = "ipython"
-version = "8.13.1"
+version = "8.13.2"
 description = "IPython: Productive Interactive Computing"
 category = "dev"
 optional = false
 python-versions = ">=3.9"
 files = [
-    {file = "ipython-8.13.1-py3-none-any.whl", hash = "sha256:1c80d08f04144a1994cda25569eab07fbdc4989bd8d8793e3a4ff643065ccb51"},
-    {file = "ipython-8.13.1.tar.gz", hash = "sha256:9c8487ac18f330c8a683fc50ab6d7bc0fcf9ef1d7a9f6ce7926938261067b81f"},
+    {file = "ipython-8.13.2-py3-none-any.whl", hash = "sha256:ffca270240fbd21b06b2974e14a86494d6d29290184e788275f55e0b55914926"},
+    {file = "ipython-8.13.2.tar.gz", hash = "sha256:7dff3fad32b97f6488e02f87b970f309d082f758d7b7fc252e3b19ee0e432dbb"},
 ]
 
 [package.dependencies]
@@ -1708,14 +1708,14 @@ test = ["ipykernel", "pre-commit", "pytest", "pytest-cov", "pytest-timeout"]
 
 [[package]]
 name = "langchain"
-version = "0.0.155"
+version = "0.0.158"
 description = "Building applications with LLMs through composability"
 category = "main"
 optional = false
 python-versions = ">=3.8.1,<4.0"
 files = [
-    {file = "langchain-0.0.155-py3-none-any.whl", hash = "sha256:70ec87a7b28932a1dc804d6fbf868349ba1ae5ae064ba6fcbbe2c831c0ba5bd2"},
-    {file = "langchain-0.0.155.tar.gz", hash = "sha256:8019c9548dd3fccc9fa4cd5e622eb29e709b6dfc19e8d905c287b7d1da0414a1"},
+    {file = "langchain-0.0.158-py3-none-any.whl", hash = "sha256:2121874e3c72db8987467e77c1890d53e146e5f90ab249e82194187568285e43"},
+    {file = "langchain-0.0.158.tar.gz", hash = "sha256:29b578a6c3ccb97b63ffa93451c590e03aa55c19a834c0a2d2f8573139ca5e90"},
 ]
 
 [package.dependencies]
@@ -1733,7 +1733,7 @@ tenacity = ">=8.1.0,<9.0.0"
 tqdm = ">=4.48.0"
 
 [package.extras]
-all = ["aleph-alpha-client (>=2.15.0,<3.0.0)", "anthropic (>=0.2.6,<0.3.0)", "arxiv (>=1.4,<2.0)", "atlassian-python-api (>=3.36.0,<4.0.0)", "azure-cosmos (>=4.4.0b1,<5.0.0)", "azure-identity (>=1.12.0,<2.0.0)", "beautifulsoup4 (>=4,<5)", "clickhouse-connect (>=0.5.14,<0.6.0)", "cohere (>=3,<4)", "deeplake (>=3.3.0,<4.0.0)", "duckduckgo-search (>=2.8.6,<3.0.0)", "elasticsearch (>=8,<9)", "faiss-cpu (>=1,<2)", "google-api-python-client (==2.70.0)", "google-search-results (>=2,<3)", "gptcache (>=0.1.7)", "html2text (>=2020.1.16,<2021.0.0)", "huggingface_hub (>=0,<1)", "jina (>=3.14,<4.0)", "jinja2 (>=3,<4)", "lancedb (>=0.1,<0.2)", "lark (>=1.1.5,<2.0.0)", "manifest-ml (>=0.0.1,<0.0.2)", "networkx (>=2.6.3,<3.0.0)", "nlpcloud (>=1,<2)", "nltk (>=3,<4)", "nomic (>=1.0.43,<2.0.0)", "openai (>=0,<1)", "opensearch-py (>=2.0.0,<3.0.0)", "pexpect (>=4.8.0,<5.0.0)", "pgvector (>=0.1.6,<0.2.0)", "pinecone-client (>=2,<3)", "pinecone-text (>=0.4.2,<0.5.0)", "psycopg2-binary (>=2.9.5,<3.0.0)", "pyowm (>=3.3.0,<4.0.0)", "pypdf (>=3.4.0,<4.0.0)", "pytesseract (>=0.3.10,<0.4.0)", "pyvespa (>=0.33.0,<0.34.0)", "qdrant-client (>=1.1.2,<2.0.0)", "redis (>=4,<5)", "sentence-transformers (>=2,<3)", "spacy (>=3,<4)", "tensorflow-text (>=2.11.0,<3.0.0)", "tiktoken (>=0.3.2,<0.4.0)", "torch (>=1,<3)", "transformers (>=4,<5)", "weaviate-client (>=3,<4)", "wikipedia (>=1,<2)", "wolframalpha (==5.0.0)"]
+all = ["O365 (>=2.0.26,<3.0.0)", "aleph-alpha-client (>=2.15.0,<3.0.0)", "anthropic (>=0.2.6,<0.3.0)", "arxiv (>=1.4,<2.0)", "atlassian-python-api (>=3.36.0,<4.0.0)", "azure-cosmos (>=4.4.0b1,<5.0.0)", "azure-identity (>=1.12.0,<2.0.0)", "beautifulsoup4 (>=4,<5)", "clickhouse-connect (>=0.5.14,<0.6.0)", "cohere (>=3,<4)", "deeplake (>=3.3.0,<4.0.0)", "duckduckgo-search (>=2.8.6,<3.0.0)", "elasticsearch (>=8,<9)", "faiss-cpu (>=1,<2)", "google-api-python-client (==2.70.0)", "google-search-results (>=2,<3)", "gptcache (>=0.1.7)", "html2text (>=2020.1.16,<2021.0.0)", "huggingface_hub (>=0,<1)", "jina (>=3.14,<4.0)", "jinja2 (>=3,<4)", "lancedb (>=0.1,<0.2)", "lark (>=1.1.5,<2.0.0)", "manifest-ml (>=0.0.1,<0.0.2)", "networkx (>=2.6.3,<3.0.0)", "nlpcloud (>=1,<2)", "nltk (>=3,<4)", "nomic (>=1.0.43,<2.0.0)", "openai (>=0,<1)", "opensearch-py (>=2.0.0,<3.0.0)", "pexpect (>=4.8.0,<5.0.0)", "pgvector (>=0.1.6,<0.2.0)", "pinecone-client (>=2,<3)", "pinecone-text (>=0.4.2,<0.5.0)", "psycopg2-binary (>=2.9.5,<3.0.0)", "pyowm (>=3.3.0,<4.0.0)", "pypdf (>=3.4.0,<4.0.0)", "pytesseract (>=0.3.10,<0.4.0)", "pyvespa (>=0.33.0,<0.34.0)", "qdrant-client (>=1.1.2,<2.0.0)", "redis (>=4,<5)", "sentence-transformers (>=2,<3)", "spacy (>=3,<4)", "tensorflow-text (>=2.11.0,<3.0.0)", "tiktoken (>=0.3.2,<0.4.0)", "torch (>=1,<3)", "transformers (>=4,<5)", "weaviate-client (>=3,<4)", "wikipedia (>=1,<2)", "wolframalpha (==5.0.0)"]
 azure = ["azure-core (>=1.26.4,<2.0.0)", "azure-cosmos (>=4.4.0b1,<5.0.0)", "azure-identity (>=1.12.0,<2.0.0)", "openai (>=0,<1)"]
 cohere = ["cohere (>=3,<4)"]
 embeddings = ["sentence-transformers (>=2,<3)"]
@@ -2921,25 +2921,25 @@ wcwidth = "*"
 
 [[package]]
 name = "protobuf"
-version = "4.22.3"
+version = "4.22.4"
 description = ""
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "protobuf-4.22.3-cp310-abi3-win32.whl", hash = "sha256:8b54f56d13ae4a3ec140076c9d937221f887c8f64954673d46f63751209e839a"},
-    {file = "protobuf-4.22.3-cp310-abi3-win_amd64.whl", hash = "sha256:7760730063329d42a9d4c4573b804289b738d4931e363ffbe684716b796bde51"},
-    {file = "protobuf-4.22.3-cp37-abi3-macosx_10_9_universal2.whl", hash = "sha256:d14fc1a41d1a1909998e8aff7e80d2a7ae14772c4a70e4bf7db8a36690b54425"},
-    {file = "protobuf-4.22.3-cp37-abi3-manylinux2014_aarch64.whl", hash = "sha256:70659847ee57a5262a65954538088a1d72dfc3e9882695cab9f0c54ffe71663b"},
-    {file = "protobuf-4.22.3-cp37-abi3-manylinux2014_x86_64.whl", hash = "sha256:13233ee2b9d3bd9a5f216c1fa2c321cd564b93d8f2e4f521a85b585447747997"},
-    {file = "protobuf-4.22.3-cp37-cp37m-win32.whl", hash = "sha256:ecae944c6c2ce50dda6bf76ef5496196aeb1b85acb95df5843cd812615ec4b61"},
-    {file = "protobuf-4.22.3-cp37-cp37m-win_amd64.whl", hash = "sha256:d4b66266965598ff4c291416be429cef7989d8fae88b55b62095a2331511b3fa"},
-    {file = "protobuf-4.22.3-cp38-cp38-win32.whl", hash = "sha256:f08aa300b67f1c012100d8eb62d47129e53d1150f4469fd78a29fa3cb68c66f2"},
-    {file = "protobuf-4.22.3-cp38-cp38-win_amd64.whl", hash = "sha256:f2f4710543abec186aee332d6852ef5ae7ce2e9e807a3da570f36de5a732d88e"},
-    {file = "protobuf-4.22.3-cp39-cp39-win32.whl", hash = "sha256:7cf56e31907c532e460bb62010a513408e6cdf5b03fb2611e4b67ed398ad046d"},
-    {file = "protobuf-4.22.3-cp39-cp39-win_amd64.whl", hash = "sha256:e0e630d8e6a79f48c557cd1835865b593d0547dce221c66ed1b827de59c66c97"},
-    {file = "protobuf-4.22.3-py3-none-any.whl", hash = "sha256:52f0a78141078077cfe15fe333ac3e3a077420b9a3f5d1bf9b5fe9d286b4d881"},
-    {file = "protobuf-4.22.3.tar.gz", hash = "sha256:23452f2fdea754a8251d0fc88c0317735ae47217e0d27bf330a30eec2848811a"},
+    {file = "protobuf-4.22.4-cp310-abi3-win32.whl", hash = "sha256:a4e661247896c2ffea4b894bca2d8657e752bedb8f3c66d7befa2557291be1e8"},
+    {file = "protobuf-4.22.4-cp310-abi3-win_amd64.whl", hash = "sha256:7b42086d6027be2730151b49f27b2f5be40f3b036adf7b8da5917f4567f268c3"},
+    {file = "protobuf-4.22.4-cp37-abi3-macosx_10_9_universal2.whl", hash = "sha256:4bfb28d48628deacdb66a95aaa7b6640f3dc82b4edd34db444c7a3cdd90b01fb"},
+    {file = "protobuf-4.22.4-cp37-abi3-manylinux2014_aarch64.whl", hash = "sha256:e98e26328d7c668541d1052b02de4205b1094ef6b2ce57167440d3e39876db48"},
+    {file = "protobuf-4.22.4-cp37-abi3-manylinux2014_x86_64.whl", hash = "sha256:8fd329e5dd7b6c4b878cab4b85bb6cec880e2adaf4e8aa2c75944dcbb05e1ff1"},
+    {file = "protobuf-4.22.4-cp37-cp37m-win32.whl", hash = "sha256:b7728b5da9eee15c0aa3baaee79e94fa877ddcf7e3d2f34b1eab586cd26eea89"},
+    {file = "protobuf-4.22.4-cp37-cp37m-win_amd64.whl", hash = "sha256:f4a711588c3a79b6f9c44af4d7f4a2ae868e27063654683932ab6462f90e9656"},
+    {file = "protobuf-4.22.4-cp38-cp38-win32.whl", hash = "sha256:11b28b4e779d7f275e3ea0efa3938f4d4e8ed3ca818f9fec3b193f8e9ada99fd"},
+    {file = "protobuf-4.22.4-cp38-cp38-win_amd64.whl", hash = "sha256:144d5b46df5e44f914f715accaadf88d617242ba5a40cacef4e8de7effa79954"},
+    {file = "protobuf-4.22.4-cp39-cp39-win32.whl", hash = "sha256:5128b4d5efcaef92189e076077ae389700606ff81d2126b8361dc01f3e026197"},
+    {file = "protobuf-4.22.4-cp39-cp39-win_amd64.whl", hash = "sha256:9537ae27d43318acf8ce27d0359fe28e6ebe4179c3350bc055bb60ff4dc4fcd3"},
+    {file = "protobuf-4.22.4-py3-none-any.whl", hash = "sha256:3b21074b7fb748d8e123acaef9fa63a84fdc1436dc71199d2317b139f77dd6f4"},
+    {file = "protobuf-4.22.4.tar.gz", hash = "sha256:21fbaef7f012232eb8d6cb8ba334e931fc6ff8570f5aaedc77d5b22a439aa909"},
 ]
 
 [[package]]
@@ -3568,119 +3568,119 @@ cffi = {version = "*", markers = "implementation_name == \"pypy\""}
 
 [[package]]
 name = "regex"
-version = "2023.5.4"
+version = "2023.5.5"
 description = "Alternative regular expression module, to replace re."
 category = "main"
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "regex-2023.5.4-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:c1fa9651141caaafa0d6048695a4a04bc4bf39c75f250a36b1a05c9588a403a9"},
-    {file = "regex-2023.5.4-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:dbc47670e0424a566084e15af9a253b85f90fa26e60fa07e1b10c90df4c8fd07"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b7eb07d60c385aec906b82d48447907a2bbf454d0e9ead62168de111accabaf8"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:376fa2ef6a02a004b6fe4ebaa5ba370e7532ec6915efd12e33aa434517f8bbee"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:3965a9ab13f1bf3e4af021c7dbe9678dd9f8dc5cc9097b3d3cbbf3ad00574b5d"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3633a07ffeabc14f3cd531f11794bb603267d86e4109cb811a34aee020622d3f"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:9322797fddd51ec0312a8b649d9a3ebfabf4826a204ef8e1cc11801013005323"},
-    {file = "regex-2023.5.4-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:b48820071a49b68ca8734e8b2bd1f26632512154816b261b614e62cc724d9f8a"},
-    {file = "regex-2023.5.4-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:8418b0ee315555ca9786daab00ec8aaf47dfb2698a5be689676e83e88b949f22"},
-    {file = "regex-2023.5.4-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:2095acff95df0bf6ec3dee672a03d3d78606b4ca419d53fbd606c559cebedf45"},
-    {file = "regex-2023.5.4-cp310-cp310-musllinux_1_1_ppc64le.whl", hash = "sha256:ebf0776fdc7a5e0ac11b6db2d69ac77479411b627a96119ffa4427ba32f3bb66"},
-    {file = "regex-2023.5.4-cp310-cp310-musllinux_1_1_s390x.whl", hash = "sha256:ac402ac165f42f41b3aef9e8a9c6fb204dac31faad65b3b0ae6bff4bc9d0dad2"},
-    {file = "regex-2023.5.4-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:99780a0880d3dab2bb6f863492d38ab90ffdc9daf4fbefb505524f6f3a1c9dbe"},
-    {file = "regex-2023.5.4-cp310-cp310-win32.whl", hash = "sha256:c455d886838dd5a248e7f06e5573275fc854febd206eb937cf632082a06a939f"},
-    {file = "regex-2023.5.4-cp310-cp310-win_amd64.whl", hash = "sha256:e87450db3c444f41e3ac6a09b7a10ddfe54fa1e98bf60ee299fe6d11097540cd"},
-    {file = "regex-2023.5.4-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:1ef51012493837263236781ac9598f059dc4e5a4d72627bd3ac85cbd5d1b0ee1"},
-    {file = "regex-2023.5.4-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:5fda1fc36dd923aee070d7aab3a85b448c8b62930900c615bb67db829281103b"},
-    {file = "regex-2023.5.4-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d28933aa1242814ed737b569b2baf96e4d236c52be454b5dc17afd36bf893c12"},
-    {file = "regex-2023.5.4-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:3d8cc797f87c07372e7d300198e1423c2b7bd35b68f375cc6700e26158940c9a"},
-    {file = "regex-2023.5.4-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:63a92f28a3f285dae06aae83227cb66cc87256db040aaf26c1c48ae5221eccde"},
-    {file = "regex-2023.5.4-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4c2ae89c92a04b057b412f88a3359e77600ce966a740e2da212667ce795e1bdc"},
-    {file = "regex-2023.5.4-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0d5a0edefdf800aeef6cf559af75e614fb2eb2d0388f0b132af805fdefcf8ec6"},
-    {file = "regex-2023.5.4-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:fbc5b23b569d96b8c831574c93098b68c6d7ff2509f31268c968152ca4f2ecd0"},
-    {file = "regex-2023.5.4-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:db5d5c9c7bbcf9cbc541f8adba8c92a7a7abd0de4f0343da4e96fb78ffe9d1a1"},
-    {file = "regex-2023.5.4-cp311-cp311-musllinux_1_1_ppc64le.whl", hash = "sha256:ccd0c918971f79bd9a883f13f91343dd2eaefbafd4344aadfe5134a65fb821c3"},
-    {file = "regex-2023.5.4-cp311-cp311-musllinux_1_1_s390x.whl", hash = "sha256:861ed1249302664f96b2e968216486a02af0a143e0f3cc6fd92b78f11aa18579"},
-    {file = "regex-2023.5.4-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f576b8dec95456ba0157943a57f5f88c076cf96cc363ef1bf5027c2976fd487a"},
-    {file = "regex-2023.5.4-cp311-cp311-win32.whl", hash = "sha256:21b653c1538cbbc1c58f6d6f3ccb4a5ce56491f0ab370ec057c1c64a152eb48c"},
-    {file = "regex-2023.5.4-cp311-cp311-win_amd64.whl", hash = "sha256:336fb3f585e239362d4f26dd6f904b15d91febfc980f47ed706858f5cee20ce6"},
-    {file = "regex-2023.5.4-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:6ccd0d7557c4e76303a6429ec9de55cd87334809cda66c0f101831e2ce9073c1"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f3e20cf2575b1330687d3dd6242f82278b3bdc09a9f36cc7ac4d45b7dd63c1f5"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:eaff21326bc5d9be0c2f400931d39274105bd5d06650f0b0215392d1b050d404"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:ad84e1d4be3504e7dcd6370b3e847eaf05d5d35cb0818d0bd2d1a26b58c0abd2"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:770f825c7751ce43aae2088fee94f2e60f95e181223642a0bb35cbaeea92001c"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:70bd0c121b3c4e641e5c4e633c4581059acad774a1a62bcb15fea3470c2a61cc"},
-    {file = "regex-2023.5.4-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:460672c6ec94997755bd37b00302853b9d85a5a433121c198359958e8c10ced5"},
-    {file = "regex-2023.5.4-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:953ba37dd83c424c2cf699c64a8477645fc7c7403ffd2eb1417189eddbbfb4a7"},
-    {file = "regex-2023.5.4-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:77b3333a6cd1161b81bcf018a9bdb3cc567074a913aa69b98b9c8c79be28565c"},
-    {file = "regex-2023.5.4-cp36-cp36m-musllinux_1_1_ppc64le.whl", hash = "sha256:c1155571edd498b6274f969517db6781500fbb24fc91ff740ea5a37c4735b3ba"},
-    {file = "regex-2023.5.4-cp36-cp36m-musllinux_1_1_s390x.whl", hash = "sha256:1d98e4748a60c9902ad504e862756c43cc707404fc3025f82ef5bbe50bee3b9e"},
-    {file = "regex-2023.5.4-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:12be293d718e05f7304f715980b1a25b16e34a1ff2121740592559d066f91e67"},
-    {file = "regex-2023.5.4-cp36-cp36m-win32.whl", hash = "sha256:8d5bc5035989852a4ae7dacf8dc99db7c4f21c852486777a98b8efe37af4d8d7"},
-    {file = "regex-2023.5.4-cp36-cp36m-win_amd64.whl", hash = "sha256:027d4962340dbd84979fd1c40bfd7ca8362030abfbbff25f1327bbf4867f047c"},
-    {file = "regex-2023.5.4-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:b132e4507c6404faece005329de7b2b97653ddfeeaf84f058fe820791160dcda"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c300461ed8159f61d979971ba51f1acd1e6f9907d86888e9275165e06ea90f06"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a419384c6c80d58532016c3cf6a3aca009bfb7661f33e119ba7f77ec0e28222a"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:b365b8fa0d5fd0208db5b0e94582edb796dde07d1f99c5a9c1ff6be172c374ee"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6686256d1d435ed782ff12ef11e074705911a40d3907b986e53ca9a996e88489"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:c10b1388106447db0cdb8e340d06fa2d49b822368a049c36928d3c24296c2e37"},
-    {file = "regex-2023.5.4-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:5d321dd059fd00482537aaba919e29189ea4ab6a03528881267982bb7707f610"},
-    {file = "regex-2023.5.4-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:5f82d4e0725788787216c9ae53116e6e477b2d97f29ec1e5086f5afbab5716b0"},
-    {file = "regex-2023.5.4-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:24db1c0fc20850db47977824a99fdae81d6764adaf8192dd874185d9e7166dbb"},
-    {file = "regex-2023.5.4-cp37-cp37m-musllinux_1_1_ppc64le.whl", hash = "sha256:89f54d4bbd452a5ee01dc31ec918f7b1f32483f13d3598af1acf5ea82ad82ad3"},
-    {file = "regex-2023.5.4-cp37-cp37m-musllinux_1_1_s390x.whl", hash = "sha256:797bab57e1317c940030f3c15d48c01e1f16d12ba0f6a807ee0bebdc1cfe3f2d"},
-    {file = "regex-2023.5.4-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:1ad00c9aae6090d052c0ee16a2737a7154031793e6c7b58a629eed8d8aa77e31"},
-    {file = "regex-2023.5.4-cp37-cp37m-win32.whl", hash = "sha256:06fe9870165d4975a8a3e27a83919b9014b35dd2ee7061a5f2be8e579294cedc"},
-    {file = "regex-2023.5.4-cp37-cp37m-win_amd64.whl", hash = "sha256:6469c2baf450fd1e648752b113a1fc1d67dfbad359f6171be954bacf7b09d126"},
-    {file = "regex-2023.5.4-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:5cc67b3562aada6682ae45f2ea40819baa6bffe38155883100f8779c22c8c087"},
-    {file = "regex-2023.5.4-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:5a98814d42282153c30d674ee34ea114a03ea8d32fd5d9b924d46fbeb2c7eb15"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8c704e7062c59d2f7e2eebda2c0c0b69bd807ca6579c3a21fc4b1d8505cfc090"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f2bc7249840faacfff6196e5b5ffeb3fdaf078986521a1cda34e9be5607e773b"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:d0ac14c36d91b191d1cb073fb5ac49937d88a5c8b051ced3875321a525202c34"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ea2d66c1fd898d81b8ce0f95afab9ba0ab522cf08810f11fa28ad958706cd2b2"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0130a2fdd6f033c3e3710d0b950cc6abd3133c5af88c40c78e77641cb6f6cf8a"},
-    {file = "regex-2023.5.4-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:ff8fef88029d0420315935041db517855ea022889fa8d54959943e39fffebf59"},
-    {file = "regex-2023.5.4-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:2762750332f57820c0f38ade87ce4ebe671b178892faed0112f574f0b42801cf"},
-    {file = "regex-2023.5.4-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:dbcb49036a6a6065035ac2acc1ad6a918f9e09ef2d0f9392dc90b8756f789f95"},
-    {file = "regex-2023.5.4-cp38-cp38-musllinux_1_1_ppc64le.whl", hash = "sha256:c40f7e8c02b287550166a3e36dbb89f9387db86a71101f6242668e3ef979cd2a"},
-    {file = "regex-2023.5.4-cp38-cp38-musllinux_1_1_s390x.whl", hash = "sha256:1dc5e9a847613679ac8bd0386a0e54f2958441a0fcc123778637e433041aa763"},
-    {file = "regex-2023.5.4-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:aa92f9ad481108a7e4c5a5234608f7c718f8b67003ce4719a4d2735d82b54167"},
-    {file = "regex-2023.5.4-cp38-cp38-win32.whl", hash = "sha256:00f6f26e748c797a041ab6957f4cacc66a7fbd5dc5f627760985f5c5b7de2af6"},
-    {file = "regex-2023.5.4-cp38-cp38-win_amd64.whl", hash = "sha256:6f02105d4a511f550dcd63f750937d1607a1f6dc253c798c4adf36aba89215a3"},
-    {file = "regex-2023.5.4-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:49a77f0b62a4122cf578d1194658973c435e6d2a9611013be11b6750056a5930"},
-    {file = "regex-2023.5.4-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:0a664857dd9b1076942c4d73c54a031066ee0ae88a438e7a1e0e79c1c5ddf47a"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9b887d87188489859411d0c7e741f7dfe8a3ca5946b0db8b3c9e5daecc089b62"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:037f4be6a240a11a6d3397e932ef5d3ec5855858910792a0ab7d351bd0333533"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:bda905e040e6c2875a7dde9652a9e0c426aaac6058568cc064f8128b061439ee"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:91f47522688955cb33190f8354ccaa1cc058d05e73f99afe9ace40db36c159e8"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5a7ab3440f0c653dee8b42af858da6e07615c64ba86a6b3509a0ecf44eabdb11"},
-    {file = "regex-2023.5.4-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:04a825fd9f5931263eccd0cbdbf171a9792fa1bf2642ca62800b57689ca1b660"},
-    {file = "regex-2023.5.4-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:0eee66c4ce6ced2e9d5d4497a569bab6257a6d118eb43dd57cceb61ba00b62d8"},
-    {file = "regex-2023.5.4-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:e708e69c4d3bc41df29efb94aadc5578c841b2cd02f8cbb1bcfbf280f2801238"},
-    {file = "regex-2023.5.4-cp39-cp39-musllinux_1_1_ppc64le.whl", hash = "sha256:b87d38717ed855583ae1693f6095fc9c06b7dde4ddec782b41aa92931dd60e7c"},
-    {file = "regex-2023.5.4-cp39-cp39-musllinux_1_1_s390x.whl", hash = "sha256:50e00ab84396bfbeb1bede61eff6641f957b6532e74e02be480d71914e20e2ac"},
-    {file = "regex-2023.5.4-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:0c731522eaf74166066fcf91fe7fe3c3617cc5e8df0c150132282d0dd5225afc"},
-    {file = "regex-2023.5.4-cp39-cp39-win32.whl", hash = "sha256:97fd2885df308edcdf96baa632192a4291f3ed5b072c0bc3f29dc1e6de40ffa4"},
-    {file = "regex-2023.5.4-cp39-cp39-win_amd64.whl", hash = "sha256:cb22580ce5e2eee138a78df40444151ff51c91acd11be546216a046677c75593"},
-    {file = "regex-2023.5.4.tar.gz", hash = "sha256:9e1b4b0b4baff934ef3c0ac56578a6b773f7f90ad1db3ff843ee40d83bdae09f"},
+    {file = "regex-2023.5.5-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:48c9ec56579d4ba1c88f42302194b8ae2350265cb60c64b7b9a88dcb7fbde309"},
+    {file = "regex-2023.5.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:02f4541550459c08fdd6f97aa4e24c6f1932eec780d58a2faa2068253df7d6ff"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:53e22e4460f0245b468ee645156a4f84d0fc35a12d9ba79bd7d79bdcd2f9629d"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:4b870b6f632fc74941cadc2a0f3064ed8409e6f8ee226cdfd2a85ae50473aa94"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:171c52e320fe29260da550d81c6b99f6f8402450dc7777ef5ced2e848f3b6f8f"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:aad5524c2aedaf9aa14ef1bc9327f8abd915699dea457d339bebbe2f0d218f86"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5a0f874ee8c0bc820e649c900243c6d1e6dc435b81da1492046716f14f1a2a96"},
+    {file = "regex-2023.5.5-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:e645c757183ee0e13f0bbe56508598e2d9cd42b8abc6c0599d53b0d0b8dd1479"},
+    {file = "regex-2023.5.5-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:a4c5da39bca4f7979eefcbb36efea04471cd68db2d38fcbb4ee2c6d440699833"},
+    {file = "regex-2023.5.5-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:5e3f4468b8c6fd2fd33c218bbd0a1559e6a6fcf185af8bb0cc43f3b5bfb7d636"},
+    {file = "regex-2023.5.5-cp310-cp310-musllinux_1_1_ppc64le.whl", hash = "sha256:59e4b729eae1a0919f9e4c0fc635fbcc9db59c74ad98d684f4877be3d2607dd6"},
+    {file = "regex-2023.5.5-cp310-cp310-musllinux_1_1_s390x.whl", hash = "sha256:ba73a14e9c8f9ac409863543cde3290dba39098fc261f717dc337ea72d3ebad2"},
+    {file = "regex-2023.5.5-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:0bbd5dcb19603ab8d2781fac60114fb89aee8494f4505ae7ad141a3314abb1f9"},
+    {file = "regex-2023.5.5-cp310-cp310-win32.whl", hash = "sha256:40005cbd383438aecf715a7b47fe1e3dcbc889a36461ed416bdec07e0ef1db66"},
+    {file = "regex-2023.5.5-cp310-cp310-win_amd64.whl", hash = "sha256:59597cd6315d3439ed4b074febe84a439c33928dd34396941b4d377692eca810"},
+    {file = "regex-2023.5.5-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:8f08276466fedb9e36e5193a96cb944928301152879ec20c2d723d1031cd4ddd"},
+    {file = "regex-2023.5.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:cd46f30e758629c3ee91713529cfbe107ac50d27110fdcc326a42ce2acf4dafc"},
+    {file = "regex-2023.5.5-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f2910502f718828cecc8beff004917dcf577fc5f8f5dd40ffb1ea7612124547b"},
+    {file = "regex-2023.5.5-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:445d6f4fc3bd9fc2bf0416164454f90acab8858cd5a041403d7a11e3356980e8"},
+    {file = "regex-2023.5.5-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:18196c16a584619c7c1d843497c069955d7629ad4a3fdee240eb347f4a2c9dbe"},
+    {file = "regex-2023.5.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:33d430a23b661629661f1fe8395be2004006bc792bb9fc7c53911d661b69dd7e"},
+    {file = "regex-2023.5.5-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:72a28979cc667e5f82ef433db009184e7ac277844eea0f7f4d254b789517941d"},
+    {file = "regex-2023.5.5-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:f764e4dfafa288e2eba21231f455d209f4709436baeebb05bdecfb5d8ddc3d35"},
+    {file = "regex-2023.5.5-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:23d86ad2121b3c4fc78c58f95e19173790e22ac05996df69b84e12da5816cb17"},
+    {file = "regex-2023.5.5-cp311-cp311-musllinux_1_1_ppc64le.whl", hash = "sha256:690a17db524ee6ac4a27efc5406530dd90e7a7a69d8360235323d0e5dafb8f5b"},
+    {file = "regex-2023.5.5-cp311-cp311-musllinux_1_1_s390x.whl", hash = "sha256:1ecf3dcff71f0c0fe3e555201cbe749fa66aae8d18f80d2cc4de8e66df37390a"},
+    {file = "regex-2023.5.5-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:811040d7f3dd9c55eb0d8b00b5dcb7fd9ae1761c454f444fd9f37fe5ec57143a"},
+    {file = "regex-2023.5.5-cp311-cp311-win32.whl", hash = "sha256:c8c143a65ce3ca42e54d8e6fcaf465b6b672ed1c6c90022794a802fb93105d22"},
+    {file = "regex-2023.5.5-cp311-cp311-win_amd64.whl", hash = "sha256:586a011f77f8a2da4b888774174cd266e69e917a67ba072c7fc0e91878178a80"},
+    {file = "regex-2023.5.5-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:b6365703e8cf1644b82104cdd05270d1a9f043119a168d66c55684b1b557d008"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a56c18f21ac98209da9c54ae3ebb3b6f6e772038681d6cb43b8d53da3b09ee81"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b8b942d8b3ce765dbc3b1dad0a944712a89b5de290ce8f72681e22b3c55f3cc8"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:844671c9c1150fcdac46d43198364034b961bd520f2c4fdaabfc7c7d7138a2dd"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c2ce65bdeaf0a386bb3b533a28de3994e8e13b464ac15e1e67e4603dd88787fa"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:fee0016cc35a8a91e8cc9312ab26a6fe638d484131a7afa79e1ce6165328a135"},
+    {file = "regex-2023.5.5-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:18f05d14f14a812fe9723f13afafefe6b74ca042d99f8884e62dbd34dcccf3e2"},
+    {file = "regex-2023.5.5-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:941b3f1b2392f0bcd6abf1bc7a322787d6db4e7457be6d1ffd3a693426a755f2"},
+    {file = "regex-2023.5.5-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:921473a93bcea4d00295799ab929522fc650e85c6b9f27ae1e6bb32a790ea7d3"},
+    {file = "regex-2023.5.5-cp36-cp36m-musllinux_1_1_ppc64le.whl", hash = "sha256:e2205a81f815b5bb17e46e74cc946c575b484e5f0acfcb805fb252d67e22938d"},
+    {file = "regex-2023.5.5-cp36-cp36m-musllinux_1_1_s390x.whl", hash = "sha256:385992d5ecf1a93cb85adff2f73e0402dd9ac29b71b7006d342cc920816e6f32"},
+    {file = "regex-2023.5.5-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:890a09cb0a62198bff92eda98b2b507305dd3abf974778bae3287f98b48907d3"},
+    {file = "regex-2023.5.5-cp36-cp36m-win32.whl", hash = "sha256:821a88b878b6589c5068f4cc2cfeb2c64e343a196bc9d7ac68ea8c2a776acd46"},
+    {file = "regex-2023.5.5-cp36-cp36m-win_amd64.whl", hash = "sha256:7918a1b83dd70dc04ab5ed24c78ae833ae8ea228cef84e08597c408286edc926"},
+    {file = "regex-2023.5.5-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:338994d3d4ca4cf12f09822e025731a5bdd3a37aaa571fa52659e85ca793fb67"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0a69cf0c00c4d4a929c6c7717fd918414cab0d6132a49a6d8fc3ded1988ed2ea"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8f5e06df94fff8c4c85f98c6487f6636848e1dc85ce17ab7d1931df4a081f657"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a8906669b03c63266b6a7693d1f487b02647beb12adea20f8840c1a087e2dfb5"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9fda3e50abad8d0f48df621cf75adc73c63f7243cbe0e3b2171392b445401550"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5ac2b7d341dc1bd102be849d6dd33b09701223a851105b2754339e390be0627a"},
+    {file = "regex-2023.5.5-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:fb2b495dd94b02de8215625948132cc2ea360ae84fe6634cd19b6567709c8ae2"},
+    {file = "regex-2023.5.5-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:aa7d032c1d84726aa9edeb6accf079b4caa87151ca9fabacef31fa028186c66d"},
+    {file = "regex-2023.5.5-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:3d45864693351c15531f7e76f545ec35000d50848daa833cead96edae1665559"},
+    {file = "regex-2023.5.5-cp37-cp37m-musllinux_1_1_ppc64le.whl", hash = "sha256:21e90a288e6ba4bf44c25c6a946cb9b0f00b73044d74308b5e0afd190338297c"},
+    {file = "regex-2023.5.5-cp37-cp37m-musllinux_1_1_s390x.whl", hash = "sha256:10250a093741ec7bf74bcd2039e697f519b028518f605ff2aa7ac1e9c9f97423"},
+    {file = "regex-2023.5.5-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:6b8d0c153f07a953636b9cdb3011b733cadd4178123ef728ccc4d5969e67f3c2"},
+    {file = "regex-2023.5.5-cp37-cp37m-win32.whl", hash = "sha256:10374c84ee58c44575b667310d5bbfa89fb2e64e52349720a0182c0017512f6c"},
+    {file = "regex-2023.5.5-cp37-cp37m-win_amd64.whl", hash = "sha256:9b320677521aabf666cdd6e99baee4fb5ac3996349c3b7f8e7c4eee1c00dfe3a"},
+    {file = "regex-2023.5.5-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:afb1c70ec1e594a547f38ad6bf5e3d60304ce7539e677c1429eebab115bce56e"},
+    {file = "regex-2023.5.5-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:cf123225945aa58b3057d0fba67e8061c62d14cc8a4202630f8057df70189051"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a99757ad7fe5c8a2bb44829fc57ced11253e10f462233c1255fe03888e06bc19"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a623564d810e7a953ff1357f7799c14bc9beeab699aacc8b7ab7822da1e952b8"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:ced02e3bd55e16e89c08bbc8128cff0884d96e7f7a5633d3dc366b6d95fcd1d6"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d1cbe6b5be3b9b698d8cc4ee4dee7e017ad655e83361cd0ea8e653d65e469468"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:4a6e4b0e0531223f53bad07ddf733af490ba2b8367f62342b92b39b29f72735a"},
+    {file = "regex-2023.5.5-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:2e9c4f778514a560a9c9aa8e5538bee759b55f6c1dcd35613ad72523fd9175b8"},
+    {file = "regex-2023.5.5-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:256f7f4c6ba145f62f7a441a003c94b8b1af78cee2cccacfc1e835f93bc09426"},
+    {file = "regex-2023.5.5-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:bd7b68fd2e79d59d86dcbc1ccd6e2ca09c505343445daaa4e07f43c8a9cc34da"},
+    {file = "regex-2023.5.5-cp38-cp38-musllinux_1_1_ppc64le.whl", hash = "sha256:4a5059bd585e9e9504ef9c07e4bc15b0a621ba20504388875d66b8b30a5c4d18"},
+    {file = "regex-2023.5.5-cp38-cp38-musllinux_1_1_s390x.whl", hash = "sha256:6893544e06bae009916a5658ce7207e26ed17385149f35a3125f5259951f1bbe"},
+    {file = "regex-2023.5.5-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:c64d5abe91a3dfe5ff250c6bb267ef00dbc01501518225b45a5f9def458f31fb"},
+    {file = "regex-2023.5.5-cp38-cp38-win32.whl", hash = "sha256:7923470d6056a9590247ff729c05e8e0f06bbd4efa6569c916943cb2d9b68b91"},
+    {file = "regex-2023.5.5-cp38-cp38-win_amd64.whl", hash = "sha256:4035d6945cb961c90c3e1c1ca2feb526175bcfed44dfb1cc77db4fdced060d3e"},
+    {file = "regex-2023.5.5-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:50fd2d9b36938d4dcecbd684777dd12a407add4f9f934f235c66372e630772b0"},
+    {file = "regex-2023.5.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:d19e57f888b00cd04fc38f5e18d0efbd91ccba2d45039453ab2236e6eec48d4d"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bd966475e963122ee0a7118ec9024388c602d12ac72860f6eea119a3928be053"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:db09e6c18977a33fea26fe67b7a842f706c67cf8bda1450974d0ae0dd63570df"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:6164d4e2a82f9ebd7752a06bd6c504791bedc6418c0196cd0a23afb7f3e12b2d"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:84397d3f750d153ebd7f958efaa92b45fea170200e2df5e0e1fd4d85b7e3f58a"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:9c3efee9bb53cbe7b285760c81f28ac80dc15fa48b5fe7e58b52752e642553f1"},
+    {file = "regex-2023.5.5-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:144b5b017646b5a9392a5554a1e5db0000ae637be4971c9747566775fc96e1b2"},
+    {file = "regex-2023.5.5-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:1189fbbb21e2c117fda5303653b61905aeeeea23de4a94d400b0487eb16d2d60"},
+    {file = "regex-2023.5.5-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:f83fe9e10f9d0b6cf580564d4d23845b9d692e4c91bd8be57733958e4c602956"},
+    {file = "regex-2023.5.5-cp39-cp39-musllinux_1_1_ppc64le.whl", hash = "sha256:72aa4746993a28c841e05889f3f1b1e5d14df8d3daa157d6001a34c98102b393"},
+    {file = "regex-2023.5.5-cp39-cp39-musllinux_1_1_s390x.whl", hash = "sha256:de2f780c3242ea114dd01f84848655356af4dd561501896c751d7b885ea6d3a1"},
+    {file = "regex-2023.5.5-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:290fd35219486dfbc00b0de72f455ecdd63e59b528991a6aec9fdfc0ce85672e"},
+    {file = "regex-2023.5.5-cp39-cp39-win32.whl", hash = "sha256:732176f5427e72fa2325b05c58ad0b45af341c459910d766f814b0584ac1f9ac"},
+    {file = "regex-2023.5.5-cp39-cp39-win_amd64.whl", hash = "sha256:1307aa4daa1cbb23823d8238e1f61292fd07e4e5d8d38a6efff00b67a7cdb764"},
+    {file = "regex-2023.5.5.tar.gz", hash = "sha256:7d76a8a1fc9da08296462a18f16620ba73bcbf5909e42383b253ef34d9d5141e"},
 ]
 
 [[package]]
 name = "requests"
-version = "2.29.0"
+version = "2.30.0"
 description = "Python HTTP for Humans."
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "requests-2.29.0-py3-none-any.whl", hash = "sha256:e8f3c9be120d3333921d213eef078af392fba3933ab7ed2d1cba3b56f2568c3b"},
-    {file = "requests-2.29.0.tar.gz", hash = "sha256:f2e34a75f4749019bb0e3effb66683630e4ffeaf75819fb51bebef1bf5aef059"},
+    {file = "requests-2.30.0-py3-none-any.whl", hash = "sha256:10e94cc4f3121ee6da529d358cdaeaff2f1c409cd377dbc72b825852f2f7e294"},
+    {file = "requests-2.30.0.tar.gz", hash = "sha256:239d7d4458afcb28a692cdd298d87542235f4ca8d36d03a15bfc128a6559a2f4"},
 ]
 
 [package.dependencies]
 certifi = ">=2017.4.17"
 charset-normalizer = ">=2,<4"
 idna = ">=2.5,<4"
-urllib3 = ">=1.21.1,<1.27"
+urllib3 = ">=1.21.1,<3"
 
 [package.extras]
 socks = ["PySocks (>=1.5.6,!=1.5.7)"]
@@ -4662,20 +4662,21 @@ files = [
 
 [[package]]
 name = "urllib3"
-version = "1.26.15"
+version = "2.0.2"
 description = "HTTP library with thread-safe connection pooling, file post, and more."
 category = "main"
 optional = false
-python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*, !=3.4.*, !=3.5.*"
+python-versions = ">=3.7"
 files = [
-    {file = "urllib3-1.26.15-py2.py3-none-any.whl", hash = "sha256:aa751d169e23c7479ce47a0cb0da579e3ede798f994f5816a74e4f4500dcea42"},
-    {file = "urllib3-1.26.15.tar.gz", hash = "sha256:8a388717b9476f934a21484e8c8e61875ab60644d29b9b39e11e4b9dc1c6b305"},
+    {file = "urllib3-2.0.2-py3-none-any.whl", hash = "sha256:d055c2f9d38dc53c808f6fdc8eab7360b6fdbbde02340ed25cfbcd817c62469e"},
+    {file = "urllib3-2.0.2.tar.gz", hash = "sha256:61717a1095d7e155cdb737ac7bb2f4324a858a1e2e6466f6d03ff630ca68d3cc"},
 ]
 
 [package.extras]
-brotli = ["brotli (>=1.0.9)", "brotlicffi (>=0.8.0)", "brotlipy (>=0.6.0)"]
-secure = ["certifi", "cryptography (>=1.3.4)", "idna (>=2.0.0)", "ipaddress", "pyOpenSSL (>=0.14)", "urllib3-secure-extra"]
-socks = ["PySocks (>=1.5.6,!=1.5.7,<2.0)"]
+brotli = ["brotli (>=1.0.9)", "brotlicffi (>=0.8.0)"]
+secure = ["certifi", "cryptography (>=1.9)", "idna (>=2.0.0)", "pyopenssl (>=17.1.0)", "urllib3-secure-extra"]
+socks = ["pysocks (>=1.5.6,!=1.5.7,<2.0)"]
+zstd = ["zstandard (>=0.18.0)"]
 
 [[package]]
 name = "uvicorn"

From 8758dd85d5c1fd50c49f8b30c1f346d0c021b66f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 5 May 2023 12:42:59 -0300
Subject: [PATCH 05/45] fixed double ws bug

---
 src/frontend/src/modals/chatModal/index.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 04cf416d3..8b94fb141 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -26,6 +26,7 @@ export default function ChatModal({
 	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 	const { reactFlowInstance } = useContext(typesContext);
 	const { setErrorData, setNoticeData } = useContext(alertContext);
+	const [isStreaming,setIsStreaming] = useState()
 	const [ws, setWs] = useState<WebSocket | null>(null);
 	const [lockChat, setLockChat] = useState(false);
 	const addChatHistory = (
@@ -47,6 +48,10 @@ export default function ChatModal({
 		});
 	};
 
+	function checkOpenFunction(){
+		return open
+	}
+
 	function connectWS() {
 		try {
 			const urlWs =
@@ -60,6 +65,7 @@ export default function ChatModal({
 			newWs.onopen = () => {
 				console.log("WebSocket connection established!");
 			};
+			console.log(flow.id)
 			newWs.onmessage = (event) => {
 				setLockChat(false);
 				const data = JSON.parse(event.data);
@@ -116,10 +122,12 @@ export default function ChatModal({
 				}
 			};
 			newWs.onclose = (_) => {
-				setLockChat(false);
-				setTimeout(() => {
-					connectWS();
-				}, 1000);
+				if(checkOpenFunction){
+					setLockChat(false);
+					setTimeout(() => {
+						connectWS();
+					}, 1000);
+				}
 			};
 			newWs.onerror = (ev) => {
 				console.log(ev, "error");
@@ -142,7 +150,6 @@ export default function ChatModal({
 	useEffect(() => {
 		let newWs = connectWS();
 		return () => {
-			console.log("trigger");
 			newWs.close();
 		};
 	}, []);
@@ -151,7 +158,6 @@ export default function ChatModal({
 		if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) {
 			let newWs = connectWS();
 			return () => {
-				console.log("trigger");
 				newWs.close();
 			};
 		}

From a99a434c1263d358e2b23a5e1066dab0e9d73a68 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 5 May 2023 12:43:39 -0300
Subject: [PATCH 06/45] update ws error handle

---
 src/backend/langflow/api/chat_manager.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 2dab12e34..7f84e8f01 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -175,8 +175,10 @@ class ChatManager:
             # Handle any exceptions that might occur
             logger.exception(e)
             # send a message to the client
-            await self.send_message(client_id, str(e))
-            raise e
+            await self.active_connections[client_id].close(
+                code=1011, reason=str(e)
+            )
+
         finally:
             await self.active_connections[client_id].close(
                 code=1000, reason="Client disconnected"

From 9a67a496226269477c7f9b1d0bb0043e323bad5f Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Fri, 5 May 2023 16:38:40 -0300
Subject: [PATCH 07/45] feat(chat.py, chat_manager.py): add try-except block to
 handle WebSocketException and WebSocketDisconnect

This commit adds a try-except block to handle WebSocketException and WebSocketDisconnect in the `websocket_endpoint` function in `chat.py` and `handle_websocket` function in `chat_manager.py`. If an exception occurs, the function logs the error and closes the websocket connection with the appropriate status code and reason.

Additionally, the `handle_websocket` function in `chat_manager.py` now waits for a final message after sending a message to the client. If the message is a string, it is a chat message, which is then added to the chat history.
---
 src/backend/langflow/api/chat.py         | 11 +++++++++--
 src/backend/langflow/api/chat_manager.py | 25 ++++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/backend/langflow/api/chat.py b/src/backend/langflow/api/chat.py
index 48a195179..436f64f7c 100644
--- a/src/backend/langflow/api/chat.py
+++ b/src/backend/langflow/api/chat.py
@@ -2,6 +2,7 @@ from fastapi import APIRouter, WebSocket
 
 from langflow.api.chat_manager import ChatManager
 from langflow.utils.logger import logger
+from fastapi import status, WebSocketDisconnect, WebSocketException
 
 router = APIRouter()
 chat_manager = ChatManager()
@@ -10,5 +11,11 @@ chat_manager = ChatManager()
 @router.websocket("/chat/{client_id}")
 async def websocket_endpoint(client_id: str, websocket: WebSocket):
     """Websocket endpoint for chat."""
-
-    await chat_manager.handle_websocket(client_id, websocket)
+    try:
+        await chat_manager.handle_websocket(client_id, websocket)
+    except WebSocketException as exc:
+        logger.error(exc)
+        await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=str(exc))
+    except WebSocketDisconnect as exc:
+        logger.error(exc)
+        await websocket.close(code=status.WS_1000_NORMAL_CLOSURE, reason=str(exc))
diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 280f51b3a..e4a4a1b4e 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -106,18 +106,18 @@ class ChatManager:
         # Process the graph data and chat message
         chat_message = payload.pop("message", "")
         chat_message = ChatMessage(message=chat_message)
-        self.chat_history.add_message(client_id, chat_message)
+        await self.send_json(client_id, chat_message)
 
         graph_data = payload
         start_resp = ChatResponse(message=None, type="start", intermediate_steps="")
-        self.chat_history.add_message(client_id, start_resp)
+        await self.send_json(client_id, start_resp)
 
         is_first_message = len(self.chat_history.get_history(client_id=client_id)) == 0
         # Generate result and thought
         try:
             logger.debug("Generating result and thought")
 
-            result, intermediate_steps = await process_graph(
+            _, intermediate_steps = await process_graph(
                 graph_data=graph_data,
                 is_first_message=is_first_message,
                 chat_message=chat_message,
@@ -149,7 +149,7 @@ class ChatManager:
             type="end",
             files=file_responses,
         )
-        self.chat_history.add_message(client_id, response)
+        await self.send_json(client_id, response)
 
     async def handle_websocket(self, client_id: str, websocket: WebSocket):
         await self.connect(client_id, websocket)
@@ -172,15 +172,24 @@ class ChatManager:
 
                 with self.cache_manager.set_client_id(client_id):
                     await self.process_message(client_id, payload)
+                # After the message is sent, wait for message built
+                final_message = await websocket.receive_json()
+                # If the message is a string, it is a chat message
+                chat_response = ChatResponse.parse_obj(final_message)
+                self.chat_history.add_message(client_id, chat_response)
+
         except Exception as e:
             # Handle any exceptions that might occur
             logger.exception(e)
             # send a message to the client
-            await self.active_connections[client_id].close(code=1000, reason=str(e))
+            raise e
         finally:
-            # await self.active_connections[client_id].close(
-            #     code=1000, reason="Client disconnected"
-            # )
+            try:
+                await self.active_connections[client_id].close(
+                    code=1000, reason="Client disconnected"
+                )
+            except Exception as e:
+                logger.exception(e)
             self.disconnect(client_id)
 
 

From 7f9651a3053cb94fe51284eb9e6fb152036a42ca Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 5 May 2023 18:49:00 -0300
Subject: [PATCH 08/45] fixed onClose method websocket, streaming for text
 working

---
 src/frontend/src/modals/chatModal/index.tsx | 192 +++++++++++---------
 1 file changed, 108 insertions(+), 84 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 8b94fb141..40f0e88a2 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -26,9 +26,15 @@ export default function ChatModal({
 	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 	const { reactFlowInstance } = useContext(typesContext);
 	const { setErrorData, setNoticeData } = useContext(alertContext);
-	const [isStreaming,setIsStreaming] = useState()
-	const [ws, setWs] = useState<WebSocket | null>(null);
+	const ws = useRef<WebSocket|null>(null)
 	const [lockChat, setLockChat] = useState(false);
+	const isOpen = useRef(open);
+
+	useEffect(() => {
+		isOpen.current = open;
+	}, [open]);
+	var isStream = false;
+
 	const addChatHistory = (
 		message: string,
 		isSend: boolean,
@@ -47,9 +53,86 @@ export default function ChatModal({
 			return newChat;
 		});
 	};
+	
 
-	function checkOpenFunction(){
-		return open
+	function updateLastMessage(str: string) {
+		console.log(str);
+		setChatHistory((old) => {
+			let newChat = [...old];
+			newChat[newChat.length - 1].message =
+				newChat[newChat.length - 1].message + str;
+			return newChat;
+		});
+	}
+
+	function handleOnClose(event: CloseEvent) {
+		if (isOpen.current) {
+			setLockChat(false);
+			setTimeout(() => {
+				connectWS()
+			}, 1000);
+		}
+	}
+
+	function handleWsMessage(data: any) {
+		if (Array.isArray(data)) {
+			//set chat history
+			setChatHistory((_) => {
+				let newChatHistory: ChatMessageType[] = [];
+				data.forEach(
+					(chatItem: {
+						intermediate_steps?: "string";
+						is_bot: boolean;
+						message: string;
+						type: string;
+						files?: Array<any>;
+					}) => {
+						if (chatItem.message) {
+							newChatHistory.push(
+								chatItem.files
+									? {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+											files: chatItem.files,
+									  }
+									: {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+									  }
+							);
+						}
+					}
+				);
+				return newChatHistory;
+			});
+		}
+		if (data.type === "start") {
+			console.log("start");
+			addChatHistory("", false);
+			isStream = true;
+		}
+		if (data.type === "end") {
+			setLockChat(false);
+			isStream = false;
+			// if (data.files) {
+			// 	addChatHistory(
+			// 		data.message,
+			// 		false,
+			// 		data.intermediate_steps,
+			// 		data.files
+			// 	);
+			// } else {
+			// 	addChatHistory(data.message, false, data.intermediate_steps);
+			// }
+		}
+		if (data.type === "file") {
+			console.log(data);
+		}
+		if (data.type === "stream" && isStream) {
+			updateLastMessage(data.message);
+		}
 	}
 
 	function connectWS() {
@@ -65,76 +148,28 @@ export default function ChatModal({
 			newWs.onopen = () => {
 				console.log("WebSocket connection established!");
 			};
-			console.log(flow.id)
+			console.log(flow.id);
 			newWs.onmessage = (event) => {
-				setLockChat(false);
 				const data = JSON.parse(event.data);
 				console.log("Received data:", data);
+				handleWsMessage(data);
 				//get chat history
-				if (Array.isArray(data)) {
-					console.log(data);
-
-					setChatHistory((_) => {
-						let newChatHistory: ChatMessageType[] = [];
-						data.forEach(
-							(chatItem: {
-								intermediate_steps?: "string";
-								is_bot: boolean;
-								message: string;
-								type: string;
-								files?: Array<any>;
-							}) => {
-								if (chatItem.message) {
-									newChatHistory.push(
-										chatItem.files
-											? {
-													isSend: !chatItem.is_bot,
-													message: chatItem.message,
-													thought: chatItem.intermediate_steps,
-													files: chatItem.files,
-											  }
-											: {
-													isSend: !chatItem.is_bot,
-													message: chatItem.message,
-													thought: chatItem.intermediate_steps,
-											  }
-									);
-								}
-							}
-						);
-						return newChatHistory;
-					});
-				}
-				if (data.type === "end") {
-					if (data.files) {
-						addChatHistory(
-							data.message,
-							false,
-							data.intermediate_steps,
-							data.files
-						);
-					} else {
-						addChatHistory(data.message, false, data.intermediate_steps);
-					}
-				}
-				if (data.type === "file") {
-					console.log(data);
-				}
 			};
-			newWs.onclose = (_) => {
-				if(checkOpenFunction){
-					setLockChat(false);
-					setTimeout(() => {
-						connectWS();
-					}, 1000);
-				}
+			newWs.onclose = (event) => {
+				handleOnClose(event);
 			};
 			newWs.onerror = (ev) => {
 				console.log(ev, "error");
+				setErrorData({
+					title: "There was an error on web connection, please: ",
+					list: [
+						"Refresh the page",
+						"Use a new flow tab",
+						"Check if the backend is up",
+					],
+				});
 			};
-			setWs(newWs);
-
-			return newWs;
+			ws.current=newWs
 		} catch {
 			setErrorData({
 				title: "There was an error on web connection, please: ",
@@ -148,25 +183,21 @@ export default function ChatModal({
 	}
 
 	useEffect(() => {
-		let newWs = connectWS();
+		connectWS();
 		return () => {
-			newWs.close();
+			console.log("unmount")
+			console.log(ws)
+			if (ws) {
+				ws.current.close();
+			}
 		};
 	}, []);
 
-	useEffect(() => {
-		if (ws && (ws.readyState === ws.CLOSED || ws.readyState === ws.CLOSING)) {
-			let newWs = connectWS();
-			return () => {
-				newWs.close();
-			};
-		}
-	}, [lockChat]);
 
 	async function sendAll(data: sendAllProps) {
 		try {
 			if (ws) {
-				ws.send(JSON.stringify(data));
+				ws.current.send(JSON.stringify(data));
 			}
 		} catch (error) {
 			setErrorData({
@@ -182,12 +213,6 @@ export default function ChatModal({
 		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
 	}, [chatHistory]);
 
-	useEffect(() => {
-		if (ws && ws.readyState === ws.CLOSED) {
-			setLockChat(false);
-		}
-	}, [lockChat]);
-
 	function validateNode(n: NodeType): Array<string> {
 		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
 			setNoticeData({
@@ -244,7 +269,6 @@ export default function ChatModal({
 				let message = chatValue;
 				setChatValue("");
 				addChatHistory(message, true);
-
 				sendAll({
 					...reactFlowInstance.toObject(),
 					message,
@@ -267,7 +291,7 @@ export default function ChatModal({
 	}
 	function clearChat() {
 		setChatHistory([]);
-		ws.send(JSON.stringify({ clear_history: true }));
+		ws.current.send(JSON.stringify({ clear_history: true }));
 	}
 
 	function setModalOpen(x: boolean) {

From 88c5cd91472c5e5f30121e4bd5a794ca317a0a55 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 5 May 2023 19:06:07 -0300
Subject: [PATCH 09/45] added stream thought

---
 src/frontend/src/modals/chatModal/index.tsx | 31 +++++++++++++--------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 40f0e88a2..a9d72264e 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -26,7 +26,7 @@ export default function ChatModal({
 	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 	const { reactFlowInstance } = useContext(typesContext);
 	const { setErrorData, setNoticeData } = useContext(alertContext);
-	const ws = useRef<WebSocket|null>(null)
+	const ws = useRef<WebSocket | null>(null);
 	const [lockChat, setLockChat] = useState(false);
 	const isOpen = useRef(open);
 
@@ -53,14 +53,19 @@ export default function ChatModal({
 			return newChat;
 		});
 	};
-	
 
-	function updateLastMessage(str: string) {
-		console.log(str);
+	//add proper type signature for function
+
+	function updateLastMessage({str,thought}:{str?: string, thought?: string}) {
 		setChatHistory((old) => {
 			let newChat = [...old];
-			newChat[newChat.length - 1].message =
-				newChat[newChat.length - 1].message + str;
+			if (str) {
+				newChat[newChat.length - 1].message =
+					newChat[newChat.length - 1].message + str;
+			}
+			if(thought){
+				newChat[newChat.length - 1].thought = thought
+			}
 			return newChat;
 		});
 	}
@@ -69,7 +74,7 @@ export default function ChatModal({
 		if (isOpen.current) {
 			setLockChat(false);
 			setTimeout(() => {
-				connectWS()
+				connectWS();
 			}, 1000);
 		}
 	}
@@ -114,6 +119,9 @@ export default function ChatModal({
 			isStream = true;
 		}
 		if (data.type === "end") {
+			if(data.intermediate_steps){
+				updateLastMessage({thought:data.intermediate_steps});
+			}
 			setLockChat(false);
 			isStream = false;
 			// if (data.files) {
@@ -131,7 +139,7 @@ export default function ChatModal({
 			console.log(data);
 		}
 		if (data.type === "stream" && isStream) {
-			updateLastMessage(data.message);
+			updateLastMessage({str:data.message});
 		}
 	}
 
@@ -169,7 +177,7 @@ export default function ChatModal({
 					],
 				});
 			};
-			ws.current=newWs
+			ws.current = newWs;
 		} catch {
 			setErrorData({
 				title: "There was an error on web connection, please: ",
@@ -185,15 +193,14 @@ export default function ChatModal({
 	useEffect(() => {
 		connectWS();
 		return () => {
-			console.log("unmount")
-			console.log(ws)
+			console.log("unmount");
+			console.log(ws);
 			if (ws) {
 				ws.current.close();
 			}
 		};
 	}, []);
 
-
 	async function sendAll(data: sendAllProps) {
 		try {
 			if (ws) {

From 234358bc6e1bfa4fae4a61cb37cbb15834f2025d Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 6 May 2023 08:28:54 -0300
Subject: [PATCH 10/45] fix: if streaming did not work, get message from end

---
 src/frontend/src/modals/chatModal/index.tsx | 718 ++++++++++----------
 1 file changed, 367 insertions(+), 351 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index a9d72264e..d08a3e8b0 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -14,376 +14,392 @@ import ChatInput from "./chatInput";
 const _ = require("lodash");
 
 export default function ChatModal({
-	flow,
-	open,
-	setOpen,
+  flow,
+  open,
+  setOpen,
 }: {
-	open: boolean;
-	setOpen: Function;
-	flow: FlowType;
+  open: boolean;
+  setOpen: Function;
+  flow: FlowType;
 }) {
-	const [chatValue, setChatValue] = useState("");
-	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-	const { reactFlowInstance } = useContext(typesContext);
-	const { setErrorData, setNoticeData } = useContext(alertContext);
-	const ws = useRef<WebSocket | null>(null);
-	const [lockChat, setLockChat] = useState(false);
-	const isOpen = useRef(open);
+  const [chatValue, setChatValue] = useState("");
+  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+  const { reactFlowInstance } = useContext(typesContext);
+  const { setErrorData, setNoticeData } = useContext(alertContext);
+  const ws = useRef<WebSocket | null>(null);
+  const [lockChat, setLockChat] = useState(false);
+  const isOpen = useRef(open);
 
-	useEffect(() => {
-		isOpen.current = open;
-	}, [open]);
-	var isStream = false;
+  useEffect(() => {
+    isOpen.current = open;
+  }, [open]);
+  var isStream = false;
 
-	const addChatHistory = (
-		message: string,
-		isSend: boolean,
-		thought?: string,
-		files?: Array<any>
-	) => {
-		setChatHistory((old) => {
-			let newChat = _.cloneDeep(old);
-			if (files) {
-				newChat.push({ message, isSend, files, thought });
-			} else if (thought) {
-				newChat.push({ message, isSend, thought });
-			} else {
-				newChat.push({ message, isSend });
-			}
-			return newChat;
-		});
-	};
+  const addChatHistory = (
+    message: string,
+    isSend: boolean,
+    thought?: string,
+    files?: Array<any>
+  ) => {
+    setChatHistory((old) => {
+      let newChat = _.cloneDeep(old);
+      if (files) {
+        newChat.push({ message, isSend, files, thought });
+      } else if (thought) {
+        newChat.push({ message, isSend, thought });
+      } else {
+        newChat.push({ message, isSend });
+      }
+      return newChat;
+    });
+  };
 
-	//add proper type signature for function
+  //add proper type signature for function
 
-	function updateLastMessage({str,thought}:{str?: string, thought?: string}) {
-		setChatHistory((old) => {
-			let newChat = [...old];
-			if (str) {
-				newChat[newChat.length - 1].message =
-					newChat[newChat.length - 1].message + str;
-			}
-			if(thought){
-				newChat[newChat.length - 1].thought = thought
-			}
-			return newChat;
-		});
-	}
+  function updateLastMessage({
+    str,
+    thought,
+    end = false,
+  }: {
+    str?: string;
+    thought?: string;
+    // end param default is false
+    end?: boolean;
+  }) {
+    setChatHistory((old) => {
+      let newChat = [...old];
+      if (str) {
+        if (end && !newChat[newChat.length - 1].message) {
+          newChat[newChat.length - 1].message = str;
+        }
+        newChat[newChat.length - 1].message =
+          newChat[newChat.length - 1].message + str;
+      }
+      if (thought) {
+        newChat[newChat.length - 1].thought = thought;
+      }
+      return newChat;
+    });
+  }
 
-	function handleOnClose(event: CloseEvent) {
-		if (isOpen.current) {
-			setLockChat(false);
-			setTimeout(() => {
-				connectWS();
-			}, 1000);
-		}
-	}
+  function handleOnClose(event: CloseEvent) {
+    if (isOpen.current) {
+      setLockChat(false);
+      setTimeout(() => {
+        connectWS();
+      }, 1000);
+    }
+  }
 
-	function handleWsMessage(data: any) {
-		if (Array.isArray(data)) {
-			//set chat history
-			setChatHistory((_) => {
-				let newChatHistory: ChatMessageType[] = [];
-				data.forEach(
-					(chatItem: {
-						intermediate_steps?: "string";
-						is_bot: boolean;
-						message: string;
-						type: string;
-						files?: Array<any>;
-					}) => {
-						if (chatItem.message) {
-							newChatHistory.push(
-								chatItem.files
-									? {
-											isSend: !chatItem.is_bot,
-											message: chatItem.message,
-											thought: chatItem.intermediate_steps,
-											files: chatItem.files,
-									  }
-									: {
-											isSend: !chatItem.is_bot,
-											message: chatItem.message,
-											thought: chatItem.intermediate_steps,
-									  }
-							);
-						}
-					}
-				);
-				return newChatHistory;
-			});
-		}
-		if (data.type === "start") {
-			console.log("start");
-			addChatHistory("", false);
-			isStream = true;
-		}
-		if (data.type === "end") {
-			if(data.intermediate_steps){
-				updateLastMessage({thought:data.intermediate_steps});
-			}
-			setLockChat(false);
-			isStream = false;
-			// if (data.files) {
-			// 	addChatHistory(
-			// 		data.message,
-			// 		false,
-			// 		data.intermediate_steps,
-			// 		data.files
-			// 	);
-			// } else {
-			// 	addChatHistory(data.message, false, data.intermediate_steps);
-			// }
-		}
-		if (data.type === "file") {
-			console.log(data);
-		}
-		if (data.type === "stream" && isStream) {
-			updateLastMessage({str:data.message});
-		}
-	}
+  function handleWsMessage(data: any) {
+    if (Array.isArray(data)) {
+      //set chat history
+      setChatHistory((_) => {
+        let newChatHistory: ChatMessageType[] = [];
+        data.forEach(
+          (chatItem: {
+            intermediate_steps?: "string";
+            is_bot: boolean;
+            message: string;
+            type: string;
+            files?: Array<any>;
+          }) => {
+            if (chatItem.message) {
+              newChatHistory.push(
+                chatItem.files
+                  ? {
+                      isSend: !chatItem.is_bot,
+                      message: chatItem.message,
+                      thought: chatItem.intermediate_steps,
+                      files: chatItem.files,
+                    }
+                  : {
+                      isSend: !chatItem.is_bot,
+                      message: chatItem.message,
+                      thought: chatItem.intermediate_steps,
+                    }
+              );
+            }
+          }
+        );
+        return newChatHistory;
+      });
+    }
+    if (data.type === "start") {
+      console.log("start");
+      addChatHistory("", false);
+      isStream = true;
+    }
+    if (data.type === "end") {
+      if (data.intermediate_steps) {
+        updateLastMessage({
+          str: data.message,
+          thought: data.intermediate_steps,
+          end: true,
+        });
+      }
+      setLockChat(false);
+      isStream = false;
+      // if (data.files) {
+      // 	addChatHistory(
+      // 		data.message,
+      // 		false,
+      // 		data.intermediate_steps,
+      // 		data.files
+      // 	);
+      // } else {
+      // 	addChatHistory(data.message, false, data.intermediate_steps);
+      // }
+    }
+    if (data.type === "file") {
+      console.log(data);
+    }
+    if (data.type === "stream" && isStream) {
+      updateLastMessage({ str: data.message });
+    }
+  }
 
-	function connectWS() {
-		try {
-			const urlWs =
-				process.env.NODE_ENV === "development"
-					? `ws://localhost:7860/chat/${flow.id}`
-					: `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-							window.location.host
-					  }/chat/${flow.id}`;
+  function connectWS() {
+    try {
+      const urlWs =
+        process.env.NODE_ENV === "development"
+          ? `ws://localhost:7860/chat/${flow.id}`
+          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+              window.location.host
+            }/chat/${flow.id}`;
 
-			const newWs = new WebSocket(urlWs);
-			newWs.onopen = () => {
-				console.log("WebSocket connection established!");
-			};
-			console.log(flow.id);
-			newWs.onmessage = (event) => {
-				const data = JSON.parse(event.data);
-				console.log("Received data:", data);
-				handleWsMessage(data);
-				//get chat history
-			};
-			newWs.onclose = (event) => {
-				handleOnClose(event);
-			};
-			newWs.onerror = (ev) => {
-				console.log(ev, "error");
-				setErrorData({
-					title: "There was an error on web connection, please: ",
-					list: [
-						"Refresh the page",
-						"Use a new flow tab",
-						"Check if the backend is up",
-					],
-				});
-			};
-			ws.current = newWs;
-		} catch {
-			setErrorData({
-				title: "There was an error on web connection, please: ",
-				list: [
-					"Refresh the page",
-					"Use a new flow tab",
-					"Check if the backend is up",
-				],
-			});
-		}
-	}
+      const newWs = new WebSocket(urlWs);
+      newWs.onopen = () => {
+        console.log("WebSocket connection established!");
+      };
+      console.log(flow.id);
+      newWs.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        console.log("Received data:", data);
+        handleWsMessage(data);
+        //get chat history
+      };
+      newWs.onclose = (event) => {
+        handleOnClose(event);
+      };
+      newWs.onerror = (ev) => {
+        console.log(ev, "error");
+        setErrorData({
+          title: "There was an error on web connection, please: ",
+          list: [
+            "Refresh the page",
+            "Use a new flow tab",
+            "Check if the backend is up",
+          ],
+        });
+      };
+      ws.current = newWs;
+    } catch {
+      setErrorData({
+        title: "There was an error on web connection, please: ",
+        list: [
+          "Refresh the page",
+          "Use a new flow tab",
+          "Check if the backend is up",
+        ],
+      });
+    }
+  }
 
-	useEffect(() => {
-		connectWS();
-		return () => {
-			console.log("unmount");
-			console.log(ws);
-			if (ws) {
-				ws.current.close();
-			}
-		};
-	}, []);
+  useEffect(() => {
+    connectWS();
+    return () => {
+      console.log("unmount");
+      console.log(ws);
+      if (ws) {
+        ws.current.close();
+      }
+    };
+  }, []);
 
-	async function sendAll(data: sendAllProps) {
-		try {
-			if (ws) {
-				ws.current.send(JSON.stringify(data));
-			}
-		} catch (error) {
-			setErrorData({
-				title: "There was an erro sending the message",
-				list: [error.message],
-			});
-			setChatValue(data.message);
-			connectWS();
-		}
-	}
+  async function sendAll(data: sendAllProps) {
+    try {
+      if (ws) {
+        ws.current.send(JSON.stringify(data));
+      }
+    } catch (error) {
+      setErrorData({
+        title: "There was an erro sending the message",
+        list: [error.message],
+      });
+      setChatValue(data.message);
+      connectWS();
+    }
+  }
 
-	useEffect(() => {
-		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-	}, [chatHistory]);
+  useEffect(() => {
+    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
+  }, [chatHistory]);
 
-	function validateNode(n: NodeType): Array<string> {
-		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
-			setNoticeData({
-				title:
-					"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
-			});
-			return [];
-		}
+  function validateNode(n: NodeType): Array<string> {
+    if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
+      setNoticeData({
+        title:
+          "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
+      });
+      return [];
+    }
 
-		const {
-			type,
-			node: { template },
-		} = n.data;
+    const {
+      type,
+      node: { template },
+    } = n.data;
 
-		return Object.keys(template).reduce(
-			(errors: Array<string>, t) =>
-				errors.concat(
-					template[t].required &&
-						template[t].show &&
-						(!template[t].value || template[t].value === "") &&
-						!reactFlowInstance
-							.getEdges()
-							.some(
-								(e) =>
-									e.targetHandle.split("|")[1] === t &&
-									e.targetHandle.split("|")[2] === n.id
-							)
-						? [
-								`${type} is missing ${
-									template.display_name
-										? template.display_name
-										: toNormalCase(template[t].name)
-								}.`,
-						  ]
-						: []
-				),
-			[] as string[]
-		);
-	}
+    return Object.keys(template).reduce(
+      (errors: Array<string>, t) =>
+        errors.concat(
+          template[t].required &&
+            template[t].show &&
+            (!template[t].value || template[t].value === "") &&
+            !reactFlowInstance
+              .getEdges()
+              .some(
+                (e) =>
+                  e.targetHandle.split("|")[1] === t &&
+                  e.targetHandle.split("|")[2] === n.id
+              )
+            ? [
+                `${type} is missing ${
+                  template.display_name
+                    ? template.display_name
+                    : toNormalCase(template[t].name)
+                }.`,
+              ]
+            : []
+        ),
+      [] as string[]
+    );
+  }
 
-	function validateNodes() {
-		return reactFlowInstance
-			.getNodes()
-			.flatMap((n: NodeType) => validateNode(n));
-	}
+  function validateNodes() {
+    return reactFlowInstance
+      .getNodes()
+      .flatMap((n: NodeType) => validateNode(n));
+  }
 
-	const ref = useRef(null);
+  const ref = useRef(null);
 
-	function sendMessage() {
-		if (chatValue !== "") {
-			let nodeValidationErrors = validateNodes();
-			if (nodeValidationErrors.length === 0) {
-				setLockChat(true);
-				let message = chatValue;
-				setChatValue("");
-				addChatHistory(message, true);
-				sendAll({
-					...reactFlowInstance.toObject(),
-					message,
-					chatHistory,
-					name: flow.name,
-					description: flow.description,
-				});
-			} else {
-				setErrorData({
-					title: "Oops! Looks like you missed some required information:",
-					list: nodeValidationErrors,
-				});
-			}
-		} else {
-			setErrorData({
-				title: "Error sending message",
-				list: ["The message cannot be empty."],
-			});
-		}
-	}
-	function clearChat() {
-		setChatHistory([]);
-		ws.current.send(JSON.stringify({ clear_history: true }));
-	}
+  function sendMessage() {
+    if (chatValue !== "") {
+      let nodeValidationErrors = validateNodes();
+      if (nodeValidationErrors.length === 0) {
+        setLockChat(true);
+        let message = chatValue;
+        setChatValue("");
+        addChatHistory(message, true);
+        sendAll({
+          ...reactFlowInstance.toObject(),
+          message,
+          chatHistory,
+          name: flow.name,
+          description: flow.description,
+        });
+      } else {
+        setErrorData({
+          title: "Oops! Looks like you missed some required information:",
+          list: nodeValidationErrors,
+        });
+      }
+    } else {
+      setErrorData({
+        title: "Error sending message",
+        list: ["The message cannot be empty."],
+      });
+    }
+  }
+  function clearChat() {
+    setChatHistory([]);
+    ws.current.send(JSON.stringify({ clear_history: true }));
+  }
 
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-	}
-	return (
-		<Transition.Root show={open} appear={open} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
-				</Transition.Child>
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+  }
+  return (
+    <Transition.Root show={open} appear={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
-								<div className="relative w-full">
-									<button
-										onClick={() => clearChat()}
-										className="absolute top-2 right-2 hover:text-red-500"
-									>
-										<FaEraser className="w-4 h-4" />
-									</button>
-								</div>
-								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-									{chatHistory.length > 0 ? (
-										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
-									) : (
-										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
-											<span>
-												👋{" "}
-												<span className="text-gray-600 text-lg">
-													LangFlow Chat
-												</span>
-											</span>
-											<br />
-											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
-												<span className="text-base text-gray-500">
-													Start a conversation and click the agent’s thoughts{" "}
-													<span>
-														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
-													</span>{" "}
-													to inspect the chaining process.
-												</span>
-											</div>
-										</div>
-									)}
-									<div ref={ref}></div>
-								</div>
-								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-									<div className="relative w-full mt-1 rounded-md shadow-sm">
-										<ChatInput
-											chatValue={chatValue}
-											lockChat={lockChat}
-											sendMessage={sendMessage}
-											setChatValue={setChatValue}
-										/>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+                <div className="relative w-full">
+                  <button
+                    onClick={() => clearChat()}
+                    className="absolute top-2 right-2 hover:text-red-500"
+                  >
+                    <FaEraser className="w-4 h-4" />
+                  </button>
+                </div>
+                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
+                  {chatHistory.length > 0 ? (
+                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+                  ) : (
+                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
+                      <span>
+                        👋{" "}
+                        <span className="text-gray-600 text-lg">
+                          LangFlow Chat
+                        </span>
+                      </span>
+                      <br />
+                      <div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+                        <span className="text-base text-gray-500">
+                          Start a conversation and click the agent’s thoughts{" "}
+                          <span>
+                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+                          </span>{" "}
+                          to inspect the chaining process.
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  <div ref={ref}></div>
+                </div>
+                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+                  <div className="relative w-full mt-1 rounded-md shadow-sm">
+                    <ChatInput
+                      chatValue={chatValue}
+                      lockChat={lockChat}
+                      sendMessage={sendMessage}
+                      setChatValue={setChatValue}
+                    />
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }

From 5cf531b5200fd44f87ae8e58978a745d6db32bb8 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 6 May 2023 08:29:06 -0300
Subject: [PATCH 11/45] refactor(callback.py): rename
 StreamingLLMCallbackHandler to AsyncStreamingLLMCallbackHandler and add new
 StreamingLLMCallbackHandler fix(chat_manager.py): assign result to result
 variable instead of empty string in ChatResponse refactor(run.py): add
 AsyncStreamingLLMCallbackHandler and StreamingLLMCallbackHandler imports and
 use kwargs instead of callbacks in get_result_and_steps function

---
 src/backend/langflow/api/callback.py     | 16 +++++++++++++++-
 src/backend/langflow/api/chat_manager.py |  7 +++----
 src/backend/langflow/interface/run.py    | 17 ++++++++++-------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/backend/langflow/api/callback.py b/src/backend/langflow/api/callback.py
index a6590673e..d63e107c4 100644
--- a/src/backend/langflow/api/callback.py
+++ b/src/backend/langflow/api/callback.py
@@ -7,7 +7,7 @@ from langflow.api.schemas import ChatResponse
 
 
 # https://github.com/hwchase17/chat-langchain/blob/master/callback.py
-class StreamingLLMCallbackHandler(AsyncCallbackHandler):
+class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
     """Callback handler for streaming LLM responses."""
 
     def __init__(self, websocket):
@@ -16,3 +16,17 @@ class StreamingLLMCallbackHandler(AsyncCallbackHandler):
     async def on_llm_new_token(self, token: str, **kwargs: Any) -> None:
         resp = ChatResponse(message=token, type="stream", intermediate_steps="")
         await self.websocket.send_json(resp.dict())
+
+
+class StreamingLLMCallbackHandler(BaseCallbackHandler):
+    """Callback handler for streaming LLM responses."""
+
+    def __init__(self, websocket):
+        self.websocket = websocket
+
+    def on_llm_new_token(self, token: str, **kwargs: Any) -> None:
+        resp = ChatResponse(message=token, type="stream", intermediate_steps="")
+
+        loop = asyncio.get_event_loop()
+        coroutine = self.websocket.send_json(resp.dict())
+        asyncio.run_coroutine_threadsafe(coroutine, loop)
diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index e4a4a1b4e..73d9ad6da 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -117,7 +117,7 @@ class ChatManager:
         try:
             logger.debug("Generating result and thought")
 
-            _, intermediate_steps = await process_graph(
+            result, intermediate_steps = await process_graph(
                 graph_data=graph_data,
                 is_first_message=is_first_message,
                 chat_message=chat_message,
@@ -144,7 +144,7 @@ class ChatManager:
                     break
 
         response = ChatResponse(
-            message="",
+            message=result,
             intermediate_steps=intermediate_steps.strip(),
             type="end",
             files=file_responses,
@@ -212,9 +212,8 @@ async def process_graph(
     # Generate result and thought
     try:
         logger.debug("Generating result and thought")
-        stream_handler = StreamingLLMCallbackHandler(websocket)
         result, intermediate_steps = await get_result_and_steps(
-            langchain_object, chat_message.message or "", callbacks=[stream_handler]
+            langchain_object, chat_message.message or "", websocket=websocket
         )
         logger.debug("Generated result and intermediate_steps")
         return result, intermediate_steps
diff --git a/src/backend/langflow/interface/run.py b/src/backend/langflow/interface/run.py
index a8d55d3be..7bc1bbb0c 100644
--- a/src/backend/langflow/interface/run.py
+++ b/src/backend/langflow/interface/run.py
@@ -2,7 +2,8 @@ import contextlib
 import io
 from typing import Any, Dict
 
-from chromadb.errors import NotEnoughElementsException  # type: ignore
+from chromadb.errors import NotEnoughElementsException
+from langflow.api.callback import AsyncStreamingLLMCallbackHandler, StreamingLLMCallbackHandler  # type: ignore
 
 from langflow.cache.base import compute_dict_hash, load_cache, memoize_dict
 from langflow.graph.graph import Graph
@@ -185,11 +186,9 @@ def fix_memory_inputs(langchain_object):
             update_memory_keys(langchain_object, possible_new_mem_key)
 
 
-async def get_result_and_steps(langchain_object, message: str, callbacks=None):
+async def get_result_and_steps(langchain_object, message: str, **kwargs):
     """Get result and thought from extracted json"""
 
-    if callbacks is None:
-        callbacks = []
     try:
         if hasattr(langchain_object, "verbose"):
             langchain_object.verbose = True
@@ -215,11 +214,15 @@ async def get_result_and_steps(langchain_object, message: str, callbacks=None):
 
         with io.StringIO() as output_buffer, contextlib.redirect_stdout(output_buffer):
             try:
-                output = await langchain_object.acall(chat_input, callbacks=callbacks)
-            except ValueError as exc:
+                async_callbacks = [AsyncStreamingLLMCallbackHandler(**kwargs)]
+                output = await langchain_object.acall(
+                    chat_input, callbacks=async_callbacks
+                )
+            except Exception as exc:
                 # make the error message more informative
                 logger.debug(f"Error: {str(exc)}")
-                output = langchain_object.run(chat_input, callbacks=callbacks)
+                sync_callbacks = [StreamingLLMCallbackHandler(**kwargs)]
+                output = langchain_object(chat_input, callbacks=sync_callbacks)
 
             intermediate_steps = (
                 output.get("intermediate_steps", []) if isinstance(output, dict) else []

From bb41f5af5db9a2262bd3df4a51a4354a7dec1e44 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 6 May 2023 08:29:38 -0300
Subject: [PATCH 12/45] refactor(loading.py): add try-except block to handle
 KeyError when removing 'model' from params dictionary

---
 src/backend/langflow/interface/loading.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/interface/loading.py b/src/backend/langflow/interface/loading.py
index 49cf9f698..737d06297 100644
--- a/src/backend/langflow/interface/loading.py
+++ b/src/backend/langflow/interface/loading.py
@@ -74,7 +74,12 @@ def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
         return loaded_toolkit
     elif base_type == "embeddings":
         # ? Why remove model from params?
-        params.pop("model")
+
+        try:
+            params.pop("model")
+        except KeyError:
+            pass
+
         # remove all params that are not in class_object.__fields__
         try:
             return class_object(**params)

From 055b68a2a29519d6b0803c9e6e555c83f3ab7c27 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 8 May 2023 15:15:22 -0300
Subject: [PATCH 13/45] basic markdown implemented

---
 src/frontend/package-lock.json                | 902 ++++++++++++++++++
 src/frontend/package.json                     |   3 +-
 .../modals/chatModal/chatMessage/index.tsx    |   5 +-
 src/frontend/src/modals/chatModal/index.tsx   |  10 -
 4 files changed, 907 insertions(+), 13 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 9b90b435e..ab6f60fc0 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -34,6 +34,7 @@
                 "react-error-boundary": "^4.0.2",
                 "react-icons": "^4.8.0",
                 "react-laag": "^2.0.5",
+                "react-markdown": "^8.0.7",
                 "react-router-dom": "^6.8.1",
                 "react-scripts": "5.0.1",
                 "react-tabs": "^6.0.0",
@@ -4455,6 +4456,14 @@
                 "@types/d3-selection": "*"
             }
         },
+        "node_modules/@types/debug": {
+            "version": "4.1.7",
+            "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
+            "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
+            "dependencies": {
+                "@types/ms": "*"
+            }
+        },
         "node_modules/@types/eslint": {
             "version": "8.21.0",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.0.tgz",
@@ -4512,6 +4521,14 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/hast": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
+            "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
+            "dependencies": {
+                "@types/unist": "*"
+            }
+        },
         "node_modules/@types/hoist-non-react-statics": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -4574,11 +4591,24 @@
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
         },
+        "node_modules/@types/mdast": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
+            "integrity": "sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==",
+            "dependencies": {
+                "@types/unist": "*"
+            }
+        },
         "node_modules/@types/mime": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
             "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
         },
+        "node_modules/@types/ms": {
+            "version": "0.7.31",
+            "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
+            "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
+        },
         "node_modules/@types/node": {
             "version": "16.18.12",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
@@ -4714,6 +4744,11 @@
             "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
             "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
         },
+        "node_modules/@types/unist": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+            "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
+        },
         "node_modules/@types/ws": {
             "version": "8.5.4",
             "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -5858,6 +5893,15 @@
                 "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
             }
         },
+        "node_modules/bail": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+            "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6180,6 +6224,15 @@
                 "node": ">=10"
             }
         },
+        "node_modules/character-entities": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+            "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/check-types": {
             "version": "11.2.2",
             "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
@@ -6357,6 +6410,15 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/comma-separated-tokens": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+            "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/commander": {
             "version": "8.3.0",
             "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -7081,6 +7143,18 @@
             "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
             "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
         },
+        "node_modules/decode-named-character-reference": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+            "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+            "dependencies": {
+                "character-entities": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/dedent": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -7184,6 +7258,14 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/destroy": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -7256,6 +7338,14 @@
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
             "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
         },
+        "node_modules/diff": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+            "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+            "engines": {
+                "node": ">=0.3.1"
+            }
+        },
         "node_modules/diff-match-patch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
@@ -8541,6 +8631,11 @@
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
             "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         },
+        "node_modules/extend": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+            "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+        },
         "node_modules/fast-deep-equal": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9356,6 +9451,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hast-util-whitespace": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
+            "integrity": "sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9734,6 +9838,11 @@
             "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
             "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
         },
+        "node_modules/inline-style-parser": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+            "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+        },
         "node_modules/internal-slot": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
@@ -9825,6 +9934,28 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-buffer": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+            "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/is-callable": {
             "version": "1.2.7",
             "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -12568,6 +12699,74 @@
                 "tmpl": "1.0.5"
             }
         },
+        "node_modules/mdast-util-definitions": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
+            "integrity": "sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "@types/unist": "^2.0.0",
+                "unist-util-visit": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-from-markdown": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
+            "integrity": "sha512-HN3W1gRIuN/ZW295c7zi7g9lVBllMgZE40RxCX37wrTPWXCWtpvOZdfnuK+1WNpvZje6XuJeI3Wnb4TJEUem+g==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "@types/unist": "^2.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "mdast-util-to-string": "^3.1.0",
+                "micromark": "^3.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-decode-string": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "unist-util-stringify-position": "^3.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-to-hast": {
+            "version": "12.3.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
+            "integrity": "sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/mdast": "^3.0.0",
+                "mdast-util-definitions": "^5.0.0",
+                "micromark-util-sanitize-uri": "^1.1.0",
+                "trim-lines": "^3.0.0",
+                "unist-util-generated": "^2.0.0",
+                "unist-util-position": "^4.0.0",
+                "unist-util-visit": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-to-string": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
+            "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdn-data": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -12618,6 +12817,428 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/micromark": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.1.0.tgz",
+            "integrity": "sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "@types/debug": "^4.0.0",
+                "debug": "^4.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-core-commonmark": "^1.0.1",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-core-commonmark": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz",
+            "integrity": "sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-factory-destination": "^1.0.0",
+                "micromark-factory-label": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-factory-title": "^1.0.0",
+                "micromark-factory-whitespace": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-html-tag-name": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-factory-destination": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz",
+            "integrity": "sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-factory-label": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz",
+            "integrity": "sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-factory-space": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz",
+            "integrity": "sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-factory-title": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz",
+            "integrity": "sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-factory-whitespace": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz",
+            "integrity": "sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-character": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz",
+            "integrity": "sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-chunked": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz",
+            "integrity": "sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-classify-character": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz",
+            "integrity": "sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-combine-extensions": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz",
+            "integrity": "sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-decode-numeric-character-reference": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz",
+            "integrity": "sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-decode-string": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz",
+            "integrity": "sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-encode": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz",
+            "integrity": "sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-html-tag-name": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz",
+            "integrity": "sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-normalize-identifier": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz",
+            "integrity": "sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-resolve-all": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz",
+            "integrity": "sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-sanitize-uri": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.1.0.tgz",
+            "integrity": "sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-subtokenize": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz",
+            "integrity": "sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-util-symbol": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz",
+            "integrity": "sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-types": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.0.2.tgz",
+            "integrity": "sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
         "node_modules/micromatch": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -12786,6 +13407,14 @@
                 "mkdirp": "bin/cmd.js"
             }
         },
+        "node_modules/mri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+            "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14705,6 +15334,15 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "node_modules/property-information": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+            "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15084,6 +15722,41 @@
                 "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
             }
         },
+        "node_modules/react-markdown": {
+            "version": "8.0.7",
+            "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
+            "integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/prop-types": "^15.0.0",
+                "@types/unist": "^2.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "hast-util-whitespace": "^2.0.0",
+                "prop-types": "^15.0.0",
+                "property-information": "^6.0.0",
+                "react-is": "^18.0.0",
+                "remark-parse": "^10.0.0",
+                "remark-rehype": "^10.0.0",
+                "space-separated-tokens": "^2.0.0",
+                "style-to-object": "^0.4.0",
+                "unified": "^10.0.0",
+                "unist-util-visit": "^4.0.0",
+                "vfile": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            },
+            "peerDependencies": {
+                "@types/react": ">=16",
+                "react": ">=16"
+            }
+        },
+        "node_modules/react-markdown/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        },
         "node_modules/react-refresh": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15396,6 +16069,35 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/remark-parse": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
+            "integrity": "sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-from-markdown": "^1.0.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-rehype": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-10.1.0.tgz",
+            "integrity": "sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-hast": "^12.1.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/renderkid": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -15650,6 +16352,17 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/sade": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+            "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+            "dependencies": {
+                "mri": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/safe-buffer": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -16086,6 +16799,15 @@
             "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
             "deprecated": "Please use @jridgewell/sourcemap-codec instead"
         },
+        "node_modules/space-separated-tokens": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+            "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/spdy": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -16340,6 +17062,14 @@
                 "webpack": "^5.0.0"
             }
         },
+        "node_modules/style-to-object": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
+            "integrity": "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==",
+            "dependencies": {
+                "inline-style-parser": "0.1.1"
+            }
+        },
         "node_modules/stylehacks": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16760,6 +17490,24 @@
                 "node": ">=8"
             }
         },
+        "node_modules/trim-lines": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+            "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/trough": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
+            "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/tryer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -16944,6 +17692,35 @@
                 "node": ">=4"
             }
         },
+        "node_modules/unified": {
+            "version": "10.1.2",
+            "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
+            "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "bail": "^2.0.0",
+                "extend": "^3.0.0",
+                "is-buffer": "^2.0.0",
+                "is-plain-obj": "^4.0.0",
+                "trough": "^2.0.0",
+                "vfile": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unified/node_modules/is-plain-obj": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+            "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/unique-string": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -16955,6 +17732,78 @@
                 "node": ">=8"
             }
         },
+        "node_modules/unist-util-generated": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz",
+            "integrity": "sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-is": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+            "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+            "dependencies": {
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-position": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-4.0.4.tgz",
+            "integrity": "sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==",
+            "dependencies": {
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-stringify-position": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
+            "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
+            "dependencies": {
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-visit": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
+            "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "unist-util-is": "^5.0.0",
+                "unist-util-visit-parents": "^5.1.1"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/unist-util-visit-parents": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+            "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "unist-util-is": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/universal-cookie": {
             "version": "4.0.4",
             "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
@@ -17092,6 +17941,31 @@
                 "uuid": "dist/bin/uuid"
             }
         },
+        "node_modules/uvu": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
+            "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+            "dependencies": {
+                "dequal": "^2.0.0",
+                "diff": "^5.0.0",
+                "kleur": "^4.0.3",
+                "sade": "^1.7.3"
+            },
+            "bin": {
+                "uvu": "bin.js"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/uvu/node_modules/kleur": {
+            "version": "4.1.5",
+            "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+            "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/v8-to-istanbul": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
@@ -17113,6 +17987,34 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/vfile": {
+            "version": "5.3.7",
+            "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
+            "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "is-buffer": "^2.0.0",
+                "unist-util-stringify-position": "^3.0.0",
+                "vfile-message": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/vfile-message": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
+            "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "unist-util-stringify-position": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/w3c-hr-time": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 7b20bb596..ca41faff3 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -29,6 +29,7 @@
         "react-error-boundary": "^4.0.2",
         "react-icons": "^4.8.0",
         "react-laag": "^2.0.5",
+        "react-markdown": "^8.0.7",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
         "react-tabs": "^6.0.0",
@@ -62,4 +63,4 @@
         ]
     },
     "proxy": "http://127.0.0.1:7860"
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 70f224f88..06b702571 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -5,6 +5,7 @@ import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
+import ReactMarkdown from "react-markdown";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
@@ -50,7 +51,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="w-full px-4 pb-3 pt-3 pr-8">
               <span className="dark:text-white">
-                {chat.message}
+              <ReactMarkdown>{chat.message}</ReactMarkdown>
                 {chat.files && (
                   <div className="my-2 w-full">
                     {chat.files.map((file, index) => {
@@ -73,7 +74,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
       ) : (
         <div className="w-full flex items-center">
           <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-            {chat.message}
+            <ReactMarkdown>{chat.message}</ReactMarkdown>
           </div>
         </div>
       )}
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index a9d72264e..c9e139a14 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -124,16 +124,6 @@ export default function ChatModal({
 			}
 			setLockChat(false);
 			isStream = false;
-			// if (data.files) {
-			// 	addChatHistory(
-			// 		data.message,
-			// 		false,
-			// 		data.intermediate_steps,
-			// 		data.files
-			// 	);
-			// } else {
-			// 	addChatHistory(data.message, false, data.intermediate_steps);
-			// }
 		}
 		if (data.type === "file") {
 			console.log(data);

From 7f162789a15ee4efd6a6373fec405e7515c21c20 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 8 May 2023 18:16:51 -0300
Subject: [PATCH 14/45] improve on markdwon, but image from bot is comming as
 code block

---
 src/frontend/package-lock.json                |  43 +++++
 src/frontend/package.json                     |   5 +-
 src/frontend/src/index.css                    |   2 +-
 .../modals/chatModal/chatMessage/index.tsx    | 148 +++++++++---------
 src/frontend/tailwind.config.js               |   2 +-
 5 files changed, 127 insertions(+), 73 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index ab6f60fc0..909669c65 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -42,6 +42,9 @@
                 "tailwindcss": "^3.2.6",
                 "typescript": "^4.9.5",
                 "web-vitals": "^2.1.4"
+            },
+            "devDependencies": {
+                "@tailwindcss/typography": "^0.5.9"
             }
         },
         "node_modules/@adobe/css-tools": {
@@ -3941,6 +3944,34 @@
                 "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
             }
         },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.9",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+            "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+            "dev": true,
+            "dependencies": {
+                "lodash.castarray": "^4.4.0",
+                "lodash.isplainobject": "^4.0.6",
+                "lodash.merge": "^4.6.2",
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/@testing-library/dom": {
             "version": "8.20.0",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -12591,6 +12622,12 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "node_modules/lodash.castarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+            "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+            "dev": true
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -12606,6 +12643,12 @@
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
             "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
         },
+        "node_modules/lodash.isplainobject": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+            "dev": true
+        },
         "node_modules/lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index ca41faff3..3c9bc5116 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -62,5 +62,8 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://127.0.0.1:7860"
+    "proxy": "http://127.0.0.1:7860",
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9"
+    }
 }
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 95681f059..67c0d3279 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -12,4 +12,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 06b702571..3f11ad785 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,5 +1,5 @@
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
@@ -10,74 +10,82 @@ var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
-  const [hidden, setHidden] = useState(true);
-  return (
-    <div
-      className={classNames(
-        "w-full py-2 pl-2 flex",
-        chat.isSend ? "bg-white dark:bg-gray-800 " : "bg-gray-200  dark:bg-gray-700"
-      )}
-    >
-      <div
-        className={classNames(
-          "rounded-full w-8 h-8 flex items-center my-3 justify-center",
-          chat.isSend ? "bg-gray-900" : "bg-gray-200"
-        )}
-      >
-        {!chat.isSend && <img className="scale-150" src={AiIcon} />}
-        {chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
-      </div>
-      {!chat.isSend ? (
-        <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
-            {hidden && chat.thought && chat.thought !== "" && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
-                className="absolute -top-1 -left-2 cursor-pointer"
-              >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
-              </div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md  h-full border border-gray-300
+  const [message,setMessage] = useState("");
+  useEffect(() => {
+    setMessage(chat.message)
+  },[chat.message])
+	const [hidden, setHidden] = useState(true);
+	return (
+		<div
+			className={classNames(
+				"w-full py-2 pl-2 flex",
+				chat.isSend
+					? "bg-white dark:bg-gray-800 "
+					: "bg-gray-200  dark:bg-gray-700"
+			)}
+		>
+			<div
+				className={classNames(
+					"rounded-full w-8 h-8 flex items-center my-3 justify-center",
+					chat.isSend ? "bg-gray-900" : "bg-gray-200"
+				)}
+			>
+				{!chat.isSend && <img className="scale-150" src={AiIcon} />}
+				{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
+			</div>
+			{!chat.isSend ? (
+				<div className="w-full text-start flex items-center">
+					<div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
+						{hidden && chat.thought && chat.thought !== "" && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className="absolute -top-1 -left-2 cursor-pointer"
+							>
+								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+							</div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className=" text-start inline-block rounded-md  h-full border border-gray-300
 								bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
-                dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
-                }}
-              ></div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full px-4 pb-3 pt-3 pr-8">
-              <span className="dark:text-white">
-              <ReactMarkdown>{chat.message}</ReactMarkdown>
-                {chat.files && (
-                  <div className="my-2 w-full">
-                    {chat.files.map((file, index) => {
-                      return (
-                        <div key={index} className="my-2 w-full">
-                          <FileCard
-                            fileName={"Generated File"}
-                            fileType={file.data_type}
-                            content={file.data}
-                          />
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </span>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-            <ReactMarkdown>{chat.message}</ReactMarkdown>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+								dangerouslySetInnerHTML={{
+									__html: convert.toHtml(chat.thought),
+								}}
+							></div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
+						<div className="w-full px-4 pb-3 pt-3 pr-8">
+							<div className="dark:text-white">
+                <div>
+                <ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
+                </div>
+								{chat.files && (
+									<div className="my-2 w-full">
+										{chat.files.map((file, index) => {
+											return (
+												<div key={index} className="my-2 w-full">
+													<FileCard
+														fileName={"Generated File"}
+														fileType={file.data_type}
+														content={file.data}
+													/>
+												</div>
+											);
+										})}
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+			) : (
+				<div className="w-full flex items-center">
+					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+						<ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
+					</div>
+				</div>
+			)}
+		</div>
+	);
 }
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index c679a87bc..84571cb5f 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -73,6 +73,6 @@ module.exports = {
         }
       }
     })
-    }),require('@tailwindcss/line-clamp')
+    }),require('@tailwindcss/line-clamp'),require('@tailwindcss/typography'),
   ],
 };

From 956b28b6e99a825815063b12ebb40fa27ad75506 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Tue, 9 May 2023 11:52:01 -0300
Subject: [PATCH 15/45] refactor(chatModal): add condition to concatenate
 message string only if end is false

---
 src/frontend/src/modals/chatModal/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index ffc78cdcc..9ea3f0fb2 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -71,9 +71,10 @@ export default function ChatModal({
       if (str) {
         if (end && !newChat[newChat.length - 1].message) {
           newChat[newChat.length - 1].message = str;
+        } else if (!end) {
+          newChat[newChat.length - 1].message =
+            newChat[newChat.length - 1].message + str;
         }
-        newChat[newChat.length - 1].message =
-          newChat[newChat.length - 1].message + str;
       }
       if (thought) {
         newChat[newChat.length - 1].thought = thought;

From f6bc152dabfb4fe6fd0524e6705dbb6f9edc2fce Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Tue, 9 May 2023 12:37:15 -0300
Subject: [PATCH 16/45] fix(chat_manager.py): add missing import statement
 feat(chat_manager.py): add chat message to chat history when received and
 sent

---
 src/backend/langflow/api/chat_manager.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 73d9ad6da..0ea430688 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -5,7 +5,7 @@ from typing import Dict, List
 
 from fastapi import WebSocket
 
-from langflow.api.callback import StreamingLLMCallbackHandler
+
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
 from langflow.cache.manager import Subject
@@ -107,6 +107,7 @@ class ChatManager:
         chat_message = payload.pop("message", "")
         chat_message = ChatMessage(message=chat_message)
         await self.send_json(client_id, chat_message)
+        self.chat_history.add_message(client_id, chat_message)
 
         graph_data = payload
         start_resp = ChatResponse(message=None, type="start", intermediate_steps="")
@@ -150,6 +151,7 @@ class ChatManager:
             files=file_responses,
         )
         await self.send_json(client_id, response)
+        self.chat_history.add_message(client_id, chat_message)
 
     async def handle_websocket(self, client_id: str, websocket: WebSocket):
         await self.connect(client_id, websocket)

From 79fb02130768021cb721e99a02312e8374315b91 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Tue, 9 May 2023 16:52:04 -0300
Subject: [PATCH 17/45] refactor(chat_manager.py): remove unused code block in
 ChatManager class

---
 src/backend/langflow/api/chat_manager.py | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 0ea430688..ac77509b1 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -174,11 +174,6 @@ class ChatManager:
 
                 with self.cache_manager.set_client_id(client_id):
                     await self.process_message(client_id, payload)
-                # After the message is sent, wait for message built
-                final_message = await websocket.receive_json()
-                # If the message is a string, it is a chat message
-                chat_response = ChatResponse.parse_obj(final_message)
-                self.chat_history.add_message(client_id, chat_response)
 
         except Exception as e:
             # Handle any exceptions that might occur

From aafb14add38c09f3545d0cd98f19102b59935b24 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 17:31:30 -0300
Subject: [PATCH 18/45] added markdown github extension and latex sintax to the
 chat

---
 src/frontend/package-lock.json                | 785 ++++++++++++++++++
 src/frontend/package.json                     |   3 +
 .../modals/chatModal/chatMessage/index.tsx    |  23 +-
 src/frontend/src/modals/chatModal/index.tsx   |   1 +
 4 files changed, 805 insertions(+), 7 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 909669c65..54ce182d1 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -39,6 +39,9 @@
                 "react-scripts": "5.0.1",
                 "react-tabs": "^6.0.0",
                 "reactflow": "^11.5.5",
+                "rehype-mathjax": "^4.0.2",
+                "remark-gfm": "^3.0.1",
+                "remark-math": "^5.1.1",
                 "tailwindcss": "^3.2.6",
                 "typescript": "^4.9.5",
                 "web-vitals": "^2.1.4"
@@ -4622,6 +4625,16 @@
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
         },
+        "node_modules/@types/katex": {
+            "version": "0.16.0",
+            "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",
+            "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="
+        },
+        "node_modules/@types/mathjax": {
+            "version": "0.0.37",
+            "resolved": "https://registry.npmjs.org/@types/mathjax/-/mathjax-0.0.37.tgz",
+            "integrity": "sha512-y0WSZBtBNQwcYipTU/BhgeFu1EZNlFvUNCmkMXV9kBQZq7/o5z82dNVyH3yy2Xv5zzeNeQoHSL4Xm06+EQiH+g=="
+        },
         "node_modules/@types/mdast": {
             "version": "3.0.11",
             "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
@@ -4780,6 +4793,11 @@
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
             "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
         },
+        "node_modules/@types/web": {
+            "version": "0.0.46",
+            "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.46.tgz",
+            "integrity": "sha512-ki0OmbjSdAEfvmy5AYWFpMkRsPW+6h4ibQ4tzk8SJsS9dkrrD3B/U1eVvdNNWxAzntjq6o2sjSia6UBCoPH+Yg=="
+        },
         "node_modules/@types/ws": {
             "version": "8.5.4",
             "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -6234,6 +6252,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/ccount": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+            "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/chalk": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -8467,6 +8494,14 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/esm": {
+            "version": "3.2.25",
+            "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+            "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/espree": {
             "version": "9.4.1",
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
@@ -9482,6 +9517,59 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hast-util-from-dom": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-4.2.0.tgz",
+            "integrity": "sha512-t1RJW/OpJbCAJQeKi3Qrj1cAOLA0+av/iPFori112+0X7R3wng+jxLA+kXec8K4szqPRGI8vPxbbpEYvvpwaeQ==",
+            "dependencies": {
+                "hastscript": "^7.0.0",
+                "web-namespaces": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-is-element": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+            "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-parse-selector": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+            "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+            "dependencies": {
+                "@types/hast": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-to-text": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+            "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/unist": "^2.0.0",
+                "hast-util-is-element": "^2.0.0",
+                "unist-util-find-after": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/hast-util-whitespace": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -9491,6 +9579,22 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/hastscript": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+            "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "hast-util-parse-selector": "^3.0.0",
+                "property-information": "^6.0.0",
+                "space-separated-tokens": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -12512,6 +12616,21 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/katex": {
+            "version": "0.16.7",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
+            "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
         "node_modules/kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -12669,6 +12788,15 @@
             "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
             "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
         },
+        "node_modules/longest-streak": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+            "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/loose-envify": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -12742,6 +12870,26 @@
                 "tmpl": "1.0.5"
             }
         },
+        "node_modules/markdown-table": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+            "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/mathjax-full": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz",
+            "integrity": "sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==",
+            "dependencies": {
+                "esm": "^3.2.25",
+                "mhchemparser": "^4.1.0",
+                "mj-context-menu": "^0.6.1",
+                "speech-rule-engine": "^4.0.6"
+            }
+        },
         "node_modules/mdast-util-definitions": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
@@ -12756,6 +12904,32 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-find-and-replace": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz",
+            "integrity": "sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "escape-string-regexp": "^5.0.0",
+                "unist-util-is": "^5.0.0",
+                "unist-util-visit-parents": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+            "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/mdast-util-from-markdown": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
@@ -12779,6 +12953,121 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-gfm": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-2.0.2.tgz",
+            "integrity": "sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==",
+            "dependencies": {
+                "mdast-util-from-markdown": "^1.0.0",
+                "mdast-util-gfm-autolink-literal": "^1.0.0",
+                "mdast-util-gfm-footnote": "^1.0.0",
+                "mdast-util-gfm-strikethrough": "^1.0.0",
+                "mdast-util-gfm-table": "^1.0.0",
+                "mdast-util-gfm-task-list-item": "^1.0.0",
+                "mdast-util-to-markdown": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-autolink-literal": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz",
+            "integrity": "sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "ccount": "^2.0.0",
+                "mdast-util-find-and-replace": "^2.0.0",
+                "micromark-util-character": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-footnote": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.2.tgz",
+            "integrity": "sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0",
+                "micromark-util-normalize-identifier": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-strikethrough": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.3.tgz",
+            "integrity": "sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-table": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.7.tgz",
+            "integrity": "sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "markdown-table": "^3.0.0",
+                "mdast-util-from-markdown": "^1.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-task-list-item": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.2.tgz",
+            "integrity": "sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-math": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-2.0.2.tgz",
+            "integrity": "sha512-8gmkKVp9v6+Tgjtq6SYx9kGPpTf6FVYRa53/DLh479aldR9AyP48qeVOgNZ5X7QUK7nOy4yw7vg6mbiGcs9jWQ==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-to-markdown": "^1.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-phrasing": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
+            "integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "unist-util-is": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-to-hast": {
             "version": "12.3.0",
             "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
@@ -12798,6 +13087,25 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-to-markdown": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
+            "integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "@types/unist": "^2.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-phrasing": "^3.0.0",
+                "mdast-util-to-string": "^3.0.0",
+                "micromark-util-decode-string": "^1.0.0",
+                "unist-util-visit": "^4.0.0",
+                "zwitch": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-to-string": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
@@ -12860,6 +13168,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mhchemparser": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/mhchemparser/-/mhchemparser-4.1.1.tgz",
+            "integrity": "sha512-R75CUN6O6e1t8bgailrF1qPq+HhVeFTM3XQ0uzI+mXTybmphy3b6h4NbLOYhemViQ3lUs+6CKRkC3Ws1TlYREA=="
+        },
         "node_modules/micromark": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.1.0.tgz",
@@ -12927,6 +13240,138 @@
                 "uvu": "^0.5.0"
             }
         },
+        "node_modules/micromark-extension-gfm": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz",
+            "integrity": "sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==",
+            "dependencies": {
+                "micromark-extension-gfm-autolink-literal": "^1.0.0",
+                "micromark-extension-gfm-footnote": "^1.0.0",
+                "micromark-extension-gfm-strikethrough": "^1.0.0",
+                "micromark-extension-gfm-table": "^1.0.0",
+                "micromark-extension-gfm-tagfilter": "^1.0.0",
+                "micromark-extension-gfm-task-list-item": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-autolink-literal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.4.tgz",
+            "integrity": "sha512-WCssN+M9rUyfHN5zPBn3/f0mIA7tqArHL/EKbv3CZK+LT2rG77FEikIQEqBkv46fOqXQK4NEW/Pc7Z27gshpeg==",
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-footnote": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.0.tgz",
+            "integrity": "sha512-RWYce7j8+c0n7Djzv5NzGEGitNNYO3uj+h/XYMdS/JinH1Go+/Qkomg/rfxExFzYTiydaV6GLeffGO5qcJbMPA==",
+            "dependencies": {
+                "micromark-core-commonmark": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-strikethrough": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.5.tgz",
+            "integrity": "sha512-X0oI5eYYQVARhiNfbETy7BfLSmSilzN1eOuoRnrf9oUNsPRrWOAe9UqSizgw1vNxQBfOwL+n2610S3bYjVNi7w==",
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-table": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz",
+            "integrity": "sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-tagfilter": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz",
+            "integrity": "sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==",
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-task-list-item": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.4.tgz",
+            "integrity": "sha512-9XlIUUVnYXHsFF2HZ9jby4h3npfX10S1coXTnV035QGPgrtNYQq3J6IfIvcCIUAJrrqBVi5BqA/LmaOMJqPwMQ==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-math": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-2.1.0.tgz",
+            "integrity": "sha512-WH+fJkveMvM3ZN+deb/jT3UW623x8xO9ycfJNDC+UQXX+V72RO6hT9KqxA7c8XFwozAFJ7tufOeG+x/CVSXHUw==",
+            "dependencies": {
+                "@types/katex": "^0.16.0",
+                "katex": "^0.16.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/micromark-factory-destination": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz",
@@ -13439,6 +13884,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/mj-context-menu": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
+            "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
+        },
         "node_modules/mkdirp": {
             "version": "0.5.6",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -16104,6 +16554,246 @@
                 "jsesc": "bin/jsesc"
             }
         },
+        "node_modules/rehype-mathjax": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/rehype-mathjax/-/rehype-mathjax-4.0.2.tgz",
+            "integrity": "sha512-9q4Q4icTIbM5RtvQ4XquvEApGV2oDMaSVa5G3DwXomWU4fAPWYcOOt+iQRNaIH3RBMbFF239QbE5K7hm7rxMPQ==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "@types/mathjax": "^0.0.37",
+                "@types/web": "^0.0.46",
+                "hast-util-from-dom": "^4.0.0",
+                "hast-util-to-text": "^3.1.0",
+                "jsdom": "^18.0.0",
+                "mathjax-full": "^3.0.0",
+                "unified": "^10.0.0",
+                "unist-util-visit": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/@tootallnate/once": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+            "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/cssom": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+            "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+        },
+        "node_modules/rehype-mathjax/node_modules/data-urls": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+            "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+            "dependencies": {
+                "abab": "^2.0.6",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^11.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/data-urls/node_modules/whatwg-url": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+            "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+            "dependencies": {
+                "tr46": "^3.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/domexception": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+            "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+            "dependencies": {
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dependencies": {
+                "whatwg-encoding": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/http-proxy-agent": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+            "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+            "dependencies": {
+                "@tootallnate/once": "2",
+                "agent-base": "6",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/jsdom": {
+            "version": "18.1.1",
+            "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-18.1.1.tgz",
+            "integrity": "sha512-NmJQbjQ/gpS/1at/ce3nCx89HbXL/f5OcenBe8wU1Eik0ROhyUc3LtmG3567dEHAGXkN8rmILW/qtCOPxPHQJw==",
+            "dependencies": {
+                "abab": "^2.0.5",
+                "acorn": "^8.5.0",
+                "acorn-globals": "^6.0.0",
+                "cssom": "^0.5.0",
+                "cssstyle": "^2.3.0",
+                "data-urls": "^3.0.1",
+                "decimal.js": "^10.3.1",
+                "domexception": "^4.0.0",
+                "escodegen": "^2.0.0",
+                "form-data": "^4.0.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy-agent": "^5.0.0",
+                "https-proxy-agent": "^5.0.0",
+                "is-potential-custom-element-name": "^1.0.1",
+                "nwsapi": "^2.2.0",
+                "parse5": "6.0.1",
+                "saxes": "^5.0.1",
+                "symbol-tree": "^3.2.4",
+                "tough-cookie": "^4.0.0",
+                "w3c-hr-time": "^1.0.2",
+                "w3c-xmlserializer": "^3.0.0",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^2.0.0",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^10.0.0",
+                "ws": "^8.2.3",
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "canvas": "^2.5.0"
+            },
+            "peerDependenciesMeta": {
+                "canvas": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/tr46": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+            "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+            "dependencies": {
+                "punycode": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/w3c-xmlserializer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
+            "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
+            "dependencies": {
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/webidl-conversions": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+            "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-mimetype": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+            "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/whatwg-url": {
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz",
+            "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
+            "dependencies": {
+                "tr46": "^3.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/ws": {
+            "version": "8.13.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+            "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rehype-mathjax/node_modules/xml-name-validator": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+            "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/relateurl": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -16112,6 +16802,36 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/remark-gfm": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
+            "integrity": "sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-gfm": "^2.0.0",
+                "micromark-extension-gfm": "^2.0.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/remark-math": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-5.1.1.tgz",
+            "integrity": "sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "mdast-util-math": "^2.0.0",
+                "micromark-extension-math": "^2.0.0",
+                "unified": "^10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/remark-parse": {
             "version": "10.0.1",
             "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -16879,6 +17599,27 @@
                 "wbuf": "^1.7.3"
             }
         },
+        "node_modules/speech-rule-engine": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz",
+            "integrity": "sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==",
+            "dependencies": {
+                "commander": "9.2.0",
+                "wicked-good-xpath": "1.3.0",
+                "xmldom-sre": "0.1.31"
+            },
+            "bin": {
+                "sre": "bin/sre"
+            }
+        },
+        "node_modules/speech-rule-engine/node_modules/commander": {
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
+            "integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
+            "engines": {
+                "node": "^12.20.0 || >=14"
+            }
+        },
         "node_modules/sprintf-js": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -17775,6 +18516,19 @@
                 "node": ">=8"
             }
         },
+        "node_modules/unist-util-find-after": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+            "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "unist-util-is": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/unist-util-generated": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz",
@@ -18106,6 +18860,15 @@
                 "minimalistic-assert": "^1.0.0"
             }
         },
+        "node_modules/web-namespaces": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+            "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/web-vitals": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
@@ -18552,6 +19315,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/wicked-good-xpath": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
+            "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
+        },
         "node_modules/word-wrap": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -18946,6 +19714,14 @@
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
             "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
         },
+        "node_modules/xmldom-sre": {
+            "version": "0.1.31",
+            "resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz",
+            "integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==",
+            "engines": {
+                "node": ">=0.1"
+            }
+        },
         "node_modules/xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -19033,6 +19809,15 @@
                     "optional": true
                 }
             }
+        },
+        "node_modules/zwitch": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+            "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
         }
     }
 }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 3c9bc5116..ee859b882 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -34,6 +34,9 @@
         "react-scripts": "5.0.1",
         "react-tabs": "^6.0.0",
         "reactflow": "^11.5.5",
+        "rehype-mathjax": "^4.0.2",
+        "remark-gfm": "^3.0.1",
+        "remark-math": "^5.1.1",
         "tailwindcss": "^3.2.6",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 3f11ad785..50edca443 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -6,14 +6,17 @@ import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
-  const [message,setMessage] = useState("");
-  useEffect(() => {
-    setMessage(chat.message)
-  },[chat.message])
+	const [message, setMessage] = useState("");
+	useEffect(() => {
+		setMessage(chat.message);
+	}, [chat.message]);
 	const [hidden, setHidden] = useState(true);
 	return (
 		<div
@@ -57,9 +60,15 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
 						<div className="w-full px-4 pb-3 pt-3 pr-8">
 							<div className="dark:text-white">
-                <div>
-                <ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
-                </div>
+								<div>
+									<ReactMarkdown
+										remarkPlugins={[remarkGfm, remarkMath]}
+										rehypePlugins={[rehypeMathjax]}
+										className="markdown prose"
+									>
+										{message}
+									</ReactMarkdown>
+								</div>
 								{chat.files && (
 									<div className="my-2 w-full">
 										{chat.files.map((file, index) => {
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index ffc78cdcc..c6caffb26 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -137,6 +137,7 @@ export default function ChatModal({
           thought: data.intermediate_steps,
           end: true,
         });
+		
       }
       setLockChat(false);
       isStream = false;

From bb5dae166faf5ea62c3d67b3c9b864d65bfd7abb Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 17:31:56 -0300
Subject: [PATCH 19/45] added markdown github extension and latex sintax to the
 user message

---
 src/frontend/src/modals/chatModal/chatMessage/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 50edca443..033d02b48 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -91,7 +91,13 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 			) : (
 				<div className="w-full flex items-center">
 					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
-						<ReactMarkdown className="markdown prose">{message}</ReactMarkdown>
+						<ReactMarkdown
+							remarkPlugins={[remarkGfm, remarkMath]}
+							rehypePlugins={[rehypeMathjax]}
+							className="markdown prose"
+						>
+							{message}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}

From 4ca064ebdcc97908f2b3714467531791cad9765d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 18:02:43 -0300
Subject: [PATCH 20/45] fixed duplicated message

---
 .../chatModal/chatMessage/codeBlock/index.tsx |   8 +
 .../modals/chatModal/chatMessage/index.tsx    |   8 +
 src/frontend/src/modals/chatModal/index.tsx   | 716 +++++++++---------
 3 files changed, 374 insertions(+), 358 deletions(-)
 create mode 100644 src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx

diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
new file mode 100644
index 000000000..2e699a5c7
--- /dev/null
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -0,0 +1,8 @@
+export default function codeBlock() {
+	// a html custom element for code blocks in markdown texts, it will allow to download the code as a file or copy it to the clipboard
+    return (
+        <div>
+            <h1>Code Block</h1>
+        </div>
+    )
+}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 033d02b48..3ae1c6b6a 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -65,6 +65,14 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 										remarkPlugins={[remarkGfm, remarkMath]}
 										rehypePlugins={[rehypeMathjax]}
 										className="markdown prose"
+										// components={{
+										// 	code: (props) => (
+										// 		<code
+										// 			className="bg-pink-600 dark:bg-gray-700 rounded-md p-1"
+										// 			{...props}
+										// 		/>
+										// 	),
+										// }}
 									>
 										{message}
 									</ReactMarkdown>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index c6caffb26..8070569e2 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -14,383 +14,383 @@ import ChatInput from "./chatInput";
 const _ = require("lodash");
 
 export default function ChatModal({
-  flow,
-  open,
-  setOpen,
+	flow,
+	open,
+	setOpen,
 }: {
-  open: boolean;
-  setOpen: Function;
-  flow: FlowType;
+	open: boolean;
+	setOpen: Function;
+	flow: FlowType;
 }) {
-  const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-  const { reactFlowInstance } = useContext(typesContext);
-  const { setErrorData, setNoticeData } = useContext(alertContext);
-  const ws = useRef<WebSocket | null>(null);
-  const [lockChat, setLockChat] = useState(false);
-  const isOpen = useRef(open);
+	const [chatValue, setChatValue] = useState("");
+	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+	const { reactFlowInstance } = useContext(typesContext);
+	const { setErrorData, setNoticeData } = useContext(alertContext);
+	const ws = useRef<WebSocket | null>(null);
+	const [lockChat, setLockChat] = useState(false);
+	const isOpen = useRef(open);
 
-  useEffect(() => {
-    isOpen.current = open;
-  }, [open]);
-  var isStream = false;
+	useEffect(() => {
+		isOpen.current = open;
+	}, [open]);
+	var isStream = false;
 
-  const addChatHistory = (
-    message: string,
-    isSend: boolean,
-    thought?: string,
-    files?: Array<any>
-  ) => {
-    setChatHistory((old) => {
-      let newChat = _.cloneDeep(old);
-      if (files) {
-        newChat.push({ message, isSend, files, thought });
-      } else if (thought) {
-        newChat.push({ message, isSend, thought });
-      } else {
-        newChat.push({ message, isSend });
-      }
-      return newChat;
-    });
-  };
+	const addChatHistory = (
+		message: string,
+		isSend: boolean,
+		thought?: string,
+		files?: Array<any>
+	) => {
+		setChatHistory((old) => {
+			let newChat = _.cloneDeep(old);
+			if (files) {
+				newChat.push({ message, isSend, files, thought });
+			} else if (thought) {
+				newChat.push({ message, isSend, thought });
+			} else {
+				newChat.push({ message, isSend });
+			}
+			return newChat;
+		});
+	};
 
-  //add proper type signature for function
+	//add proper type signature for function
 
-  function updateLastMessage({
-    str,
-    thought,
-    end = false,
-  }: {
-    str?: string;
-    thought?: string;
-    // end param default is false
-    end?: boolean;
-  }) {
-    setChatHistory((old) => {
-      let newChat = [...old];
-      if (str) {
-        if (end && !newChat[newChat.length - 1].message) {
-          newChat[newChat.length - 1].message = str;
-        }
-        newChat[newChat.length - 1].message =
-          newChat[newChat.length - 1].message + str;
-      }
-      if (thought) {
-        newChat[newChat.length - 1].thought = thought;
-      }
-      return newChat;
-    });
-  }
+	function updateLastMessage({
+		str,
+		thought,
+		end = false,
+	}: {
+		str?: string;
+		thought?: string;
+		// end param default is false
+		end?: boolean;
+	}) {
+		setChatHistory((old) => {
+			let newChat = [...old];
+			if (str) {
+				if (end) {
+					newChat[newChat.length - 1].message = str;
+				} else {
+					newChat[newChat.length - 1].message =
+						newChat[newChat.length - 1].message + str;
+				}
+			}
+			if (thought) {
+				newChat[newChat.length - 1].thought = thought;
+			}
+			return newChat;
+		});
+	}
 
-  function handleOnClose(event: CloseEvent) {
-    if (isOpen.current) {
-      setLockChat(false);
-      setTimeout(() => {
-        connectWS();
-      }, 1000);
-    }
-  }
+	function handleOnClose(event: CloseEvent) {
+		if (isOpen.current) {
+			setLockChat(false);
+			setTimeout(() => {
+				connectWS();
+			}, 1000);
+		}
+	}
 
-  function handleWsMessage(data: any) {
-    if (Array.isArray(data)) {
-      //set chat history
-      setChatHistory((_) => {
-        let newChatHistory: ChatMessageType[] = [];
-        data.forEach(
-          (chatItem: {
-            intermediate_steps?: "string";
-            is_bot: boolean;
-            message: string;
-            type: string;
-            files?: Array<any>;
-          }) => {
-            if (chatItem.message) {
-              newChatHistory.push(
-                chatItem.files
-                  ? {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                      files: chatItem.files,
-                    }
-                  : {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                    }
-              );
-            }
-          }
-        );
-        return newChatHistory;
-      });
-    }
-    if (data.type === "start") {
-      console.log("start");
-      addChatHistory("", false);
-      isStream = true;
-    }
-    if (data.type === "end") {
-      if (data.intermediate_steps) {
-        updateLastMessage({
-          str: data.message,
-          thought: data.intermediate_steps,
-          end: true,
-        });
-		
-      }
-      setLockChat(false);
-      isStream = false;
-    }
-    if (data.type === "file") {
-      console.log(data);
-    }
-    if (data.type === "stream" && isStream) {
-      updateLastMessage({ str: data.message });
-    }
-  }
+	function handleWsMessage(data: any) {
+		if (Array.isArray(data)) {
+			//set chat history
+			setChatHistory((_) => {
+				let newChatHistory: ChatMessageType[] = [];
+				data.forEach(
+					(chatItem: {
+						intermediate_steps?: "string";
+						is_bot: boolean;
+						message: string;
+						type: string;
+						files?: Array<any>;
+					}) => {
+						if (chatItem.message) {
+							newChatHistory.push(
+								chatItem.files
+									? {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+											files: chatItem.files,
+									  }
+									: {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+									  }
+							);
+						}
+					}
+				);
+				return newChatHistory;
+			});
+		}
+		if (data.type === "start") {
+			console.log("start");
+			addChatHistory("", false);
+			isStream = true;
+		}
+		if (data.type === "end") {
+			if (data.intermediate_steps) {
+				updateLastMessage({
+					str: data.message,
+					thought: data.intermediate_steps,
+					end: true,
+				});
+			}
+			setLockChat(false);
+			isStream = false;
+		}
+		if (data.type === "file") {
+			console.log(data);
+		}
+		if (data.type === "stream" && isStream) {
+			updateLastMessage({ str: data.message });
+		}
+	}
 
-  function connectWS() {
-    try {
-      const urlWs =
-        process.env.NODE_ENV === "development"
-          ? `ws://localhost:7860/chat/${flow.id}`
-          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-              window.location.host
-            }/chat/${flow.id}`;
+	function connectWS() {
+		try {
+			const urlWs =
+				process.env.NODE_ENV === "development"
+					? `ws://localhost:7860/chat/${flow.id}`
+					: `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+							window.location.host
+					  }/chat/${flow.id}`;
 
-      const newWs = new WebSocket(urlWs);
-      newWs.onopen = () => {
-        console.log("WebSocket connection established!");
-      };
-      console.log(flow.id);
-      newWs.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log("Received data:", data);
-        handleWsMessage(data);
-        //get chat history
-      };
-      newWs.onclose = (event) => {
-        handleOnClose(event);
-      };
-      newWs.onerror = (ev) => {
-        console.log(ev, "error");
-        setErrorData({
-          title: "There was an error on web connection, please: ",
-          list: [
-            "Refresh the page",
-            "Use a new flow tab",
-            "Check if the backend is up",
-          ],
-        });
-      };
-      ws.current = newWs;
-    } catch {
-      setErrorData({
-        title: "There was an error on web connection, please: ",
-        list: [
-          "Refresh the page",
-          "Use a new flow tab",
-          "Check if the backend is up",
-        ],
-      });
-    }
-  }
+			const newWs = new WebSocket(urlWs);
+			newWs.onopen = () => {
+				console.log("WebSocket connection established!");
+			};
+			console.log(flow.id);
+			newWs.onmessage = (event) => {
+				const data = JSON.parse(event.data);
+				console.log("Received data:", data);
+				handleWsMessage(data);
+				//get chat history
+			};
+			newWs.onclose = (event) => {
+				handleOnClose(event);
+			};
+			newWs.onerror = (ev) => {
+				console.log(ev, "error");
+				setErrorData({
+					title: "There was an error on web connection, please: ",
+					list: [
+						"Refresh the page",
+						"Use a new flow tab",
+						"Check if the backend is up",
+					],
+				});
+			};
+			ws.current = newWs;
+		} catch {
+			setErrorData({
+				title: "There was an error on web connection, please: ",
+				list: [
+					"Refresh the page",
+					"Use a new flow tab",
+					"Check if the backend is up",
+				],
+			});
+		}
+	}
 
-  useEffect(() => {
-    connectWS();
-    return () => {
-      console.log("unmount");
-      console.log(ws);
-      if (ws) {
-        ws.current.close();
-      }
-    };
-  }, []);
+	useEffect(() => {
+		connectWS();
+		return () => {
+			console.log("unmount");
+			console.log(ws);
+			if (ws) {
+				ws.current.close();
+			}
+		};
+	}, []);
 
-  async function sendAll(data: sendAllProps) {
-    try {
-      if (ws) {
-        ws.current.send(JSON.stringify(data));
-      }
-    } catch (error) {
-      setErrorData({
-        title: "There was an erro sending the message",
-        list: [error.message],
-      });
-      setChatValue(data.message);
-      connectWS();
-    }
-  }
+	async function sendAll(data: sendAllProps) {
+		try {
+			if (ws) {
+				ws.current.send(JSON.stringify(data));
+			}
+		} catch (error) {
+			setErrorData({
+				title: "There was an erro sending the message",
+				list: [error.message],
+			});
+			setChatValue(data.message);
+			connectWS();
+		}
+	}
 
-  useEffect(() => {
-    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-  }, [chatHistory]);
+	useEffect(() => {
+		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
+	}, [chatHistory]);
 
-  function validateNode(n: NodeType): Array<string> {
-    if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
-      setNoticeData({
-        title:
-          "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
-      });
-      return [];
-    }
+	function validateNode(n: NodeType): Array<string> {
+		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
+			setNoticeData({
+				title:
+					"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
+			});
+			return [];
+		}
 
-    const {
-      type,
-      node: { template },
-    } = n.data;
+		const {
+			type,
+			node: { template },
+		} = n.data;
 
-    return Object.keys(template).reduce(
-      (errors: Array<string>, t) =>
-        errors.concat(
-          template[t].required &&
-            template[t].show &&
-            (!template[t].value || template[t].value === "") &&
-            !reactFlowInstance
-              .getEdges()
-              .some(
-                (e) =>
-                  e.targetHandle.split("|")[1] === t &&
-                  e.targetHandle.split("|")[2] === n.id
-              )
-            ? [
-                `${type} is missing ${
-                  template.display_name
-                    ? template.display_name
-                    : toNormalCase(template[t].name)
-                }.`,
-              ]
-            : []
-        ),
-      [] as string[]
-    );
-  }
+		return Object.keys(template).reduce(
+			(errors: Array<string>, t) =>
+				errors.concat(
+					template[t].required &&
+						template[t].show &&
+						(!template[t].value || template[t].value === "") &&
+						!reactFlowInstance
+							.getEdges()
+							.some(
+								(e) =>
+									e.targetHandle.split("|")[1] === t &&
+									e.targetHandle.split("|")[2] === n.id
+							)
+						? [
+								`${type} is missing ${
+									template.display_name
+										? template.display_name
+										: toNormalCase(template[t].name)
+								}.`,
+						  ]
+						: []
+				),
+			[] as string[]
+		);
+	}
 
-  function validateNodes() {
-    return reactFlowInstance
-      .getNodes()
-      .flatMap((n: NodeType) => validateNode(n));
-  }
+	function validateNodes() {
+		return reactFlowInstance
+			.getNodes()
+			.flatMap((n: NodeType) => validateNode(n));
+	}
 
-  const ref = useRef(null);
+	const ref = useRef(null);
 
-  function sendMessage() {
-    if (chatValue !== "") {
-      let nodeValidationErrors = validateNodes();
-      if (nodeValidationErrors.length === 0) {
-        setLockChat(true);
-        let message = chatValue;
-        setChatValue("");
-        addChatHistory(message, true);
-        sendAll({
-          ...reactFlowInstance.toObject(),
-          message,
-          chatHistory,
-          name: flow.name,
-          description: flow.description,
-        });
-      } else {
-        setErrorData({
-          title: "Oops! Looks like you missed some required information:",
-          list: nodeValidationErrors,
-        });
-      }
-    } else {
-      setErrorData({
-        title: "Error sending message",
-        list: ["The message cannot be empty."],
-      });
-    }
-  }
-  function clearChat() {
-    setChatHistory([]);
-    ws.current.send(JSON.stringify({ clear_history: true }));
-  }
+	function sendMessage() {
+		if (chatValue !== "") {
+			let nodeValidationErrors = validateNodes();
+			if (nodeValidationErrors.length === 0) {
+				setLockChat(true);
+				let message = chatValue;
+				setChatValue("");
+				addChatHistory(message, true);
+				sendAll({
+					...reactFlowInstance.toObject(),
+					message,
+					chatHistory,
+					name: flow.name,
+					description: flow.description,
+				});
+			} else {
+				setErrorData({
+					title: "Oops! Looks like you missed some required information:",
+					list: nodeValidationErrors,
+				});
+			}
+		} else {
+			setErrorData({
+				title: "Error sending message",
+				list: ["The message cannot be empty."],
+			});
+		}
+	}
+	function clearChat() {
+		setChatHistory([]);
+		ws.current.send(JSON.stringify({ clear_history: true }));
+	}
 
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-  }
-  return (
-    <Transition.Root show={open} appear={open} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
-        </Transition.Child>
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+	}
+	return (
+		<Transition.Root show={open} appear={open} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
-                <div className="relative w-full">
-                  <button
-                    onClick={() => clearChat()}
-                    className="absolute top-2 right-2 hover:text-red-500"
-                  >
-                    <FaEraser className="w-4 h-4" />
-                  </button>
-                </div>
-                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-                  {chatHistory.length > 0 ? (
-                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
-                  ) : (
-                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
-                      <span>
-                        👋{" "}
-                        <span className="text-gray-600 text-lg">
-                          LangFlow Chat
-                        </span>
-                      </span>
-                      <br />
-                      <div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
-                        <span className="text-base text-gray-500">
-                          Start a conversation and click the agent’s thoughts{" "}
-                          <span>
-                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
-                          </span>{" "}
-                          to inspect the chaining process.
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                  <div ref={ref}></div>
-                </div>
-                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-                  <div className="relative w-full mt-1 rounded-md shadow-sm">
-                    <ChatInput
-                      chatValue={chatValue}
-                      lockChat={lockChat}
-                      sendMessage={sendMessage}
-                      setChatValue={setChatValue}
-                    />
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+								<div className="relative w-full">
+									<button
+										onClick={() => clearChat()}
+										className="absolute top-2 right-2 hover:text-red-500 z-30"
+									>
+										<FaEraser className="w-4 h-4" />
+									</button>
+								</div>
+								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
+									{chatHistory.length > 0 ? (
+										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+									) : (
+										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
+											<span>
+												👋{" "}
+												<span className="text-gray-600 text-lg">
+													LangFlow Chat
+												</span>
+											</span>
+											<br />
+											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+												<span className="text-base text-gray-500">
+													Start a conversation and click the agent’s thoughts{" "}
+													<span>
+														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+													</span>{" "}
+													to inspect the chaining process.
+												</span>
+											</div>
+										</div>
+									)}
+									<div ref={ref}></div>
+								</div>
+								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+									<div className="relative w-full mt-1 rounded-md shadow-sm">
+										<ChatInput
+											chatValue={chatValue}
+											lockChat={lockChat}
+											sendMessage={sendMessage}
+											setChatValue={setChatValue}
+										/>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }

From 5c2c9b943b61064146ebba9d346fef1e417aa42b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 19:33:44 -0300
Subject: [PATCH 21/45] fancy code block implemmented

---
 src/frontend/package-lock.json                | 252 ++++++++++++++++++
 src/frontend/package.json                     |   2 +
 .../chatModal/chatMessage/codeBlock/index.tsx |  90 ++++++-
 .../modals/chatModal/chatMessage/index.tsx    |  35 ++-
 src/frontend/src/utils.ts                     |  32 +++
 5 files changed, 396 insertions(+), 15 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 54ce182d1..a85623dc7 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -13,6 +13,7 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@tabler/icons-react": "^2.17.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/line-clamp": "^0.4.4",
                 "@testing-library/jest-dom": "^5.16.5",
@@ -37,6 +38,7 @@
                 "react-markdown": "^8.0.7",
                 "react-router-dom": "^6.8.1",
                 "react-scripts": "5.0.1",
+                "react-syntax-highlighter": "^15.5.0",
                 "react-tabs": "^6.0.0",
                 "reactflow": "^11.5.5",
                 "rehype-mathjax": "^4.0.2",
@@ -3928,6 +3930,31 @@
                 "url": "https://github.com/sponsors/gregberge"
             }
         },
+        "node_modules/@tabler/icons": {
+            "version": "2.17.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.17.0.tgz",
+            "integrity": "sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            }
+        },
+        "node_modules/@tabler/icons-react": {
+            "version": "2.17.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.17.0.tgz",
+            "integrity": "sha512-kuEW+qNwRqcK5iMl7qTapzX2NiMOwPg4Az01d+IZ1DIMwaZ7iKPJaIor2ihKFLPYrT9D5BZHXB8R5mSkw0FETg==",
+            "dependencies": {
+                "@tabler/icons": "2.17.0",
+                "prop-types": "^15.7.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            },
+            "peerDependencies": {
+                "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -6291,6 +6318,24 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/character-entities-legacy": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+            "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-reference-invalid": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+            "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/check-types": {
             "version": "11.2.2",
             "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
@@ -8751,6 +8796,18 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fault": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+            "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+            "dependencies": {
+                "format": "^0.2.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/faye-websocket": {
             "version": "0.11.4",
             "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -9125,6 +9182,14 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/format": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+            "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+            "engines": {
+                "node": ">=0.4.x"
+            }
+        },
         "node_modules/forwarded": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9603,6 +9668,14 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/highlight.js": {
+            "version": "10.7.3",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+            "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/hoist-non-react-statics": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -9999,6 +10072,28 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/is-alphabetical": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+            "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-alphanumerical": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+            "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+            "dependencies": {
+                "is-alphabetical": "^1.0.0",
+                "is-decimal": "^1.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-arguments": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -10127,6 +10222,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-decimal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+            "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-docker": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -10176,6 +10280,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-hexadecimal": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+            "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-map": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -12816,6 +12929,19 @@
                 "tslib": "^2.0.3"
             }
         },
+        "node_modules/lowlight": {
+            "version": "1.20.0",
+            "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+            "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+            "dependencies": {
+                "fault": "^1.0.0",
+                "highlight.js": "~10.7.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/lru-cache": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -14324,6 +14450,32 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-entities": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+            "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+            "dependencies": {
+                "character-entities": "^1.0.0",
+                "character-entities-legacy": "^1.0.0",
+                "character-reference-invalid": "^1.0.0",
+                "is-alphanumerical": "^1.0.0",
+                "is-decimal": "^1.0.0",
+                "is-hexadecimal": "^1.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/parse-entities/node_modules/character-entities": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+            "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/parse-json": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -15787,6 +15939,14 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -16360,6 +16520,21 @@
                 }
             }
         },
+        "node_modules/react-syntax-highlighter": {
+            "version": "15.5.0",
+            "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+            "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+            "dependencies": {
+                "@babel/runtime": "^7.3.1",
+                "highlight.js": "^10.4.1",
+                "lowlight": "^1.17.0",
+                "prismjs": "^1.27.0",
+                "refractor": "^3.6.0"
+            },
+            "peerDependencies": {
+                "react": ">= 0.14.0"
+            }
+        },
         "node_modules/react-tabs": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
@@ -16458,6 +16633,83 @@
                 "node": ">=8"
             }
         },
+        "node_modules/refractor": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+            "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+            "dependencies": {
+                "hastscript": "^6.0.0",
+                "parse-entities": "^2.0.0",
+                "prismjs": "~1.27.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/comma-separated-tokens": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+            "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/hast-util-parse-selector": {
+            "version": "2.2.5",
+            "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+            "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/refractor/node_modules/hastscript": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+            "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+            "dependencies": {
+                "@types/hast": "^2.0.0",
+                "comma-separated-tokens": "^1.0.0",
+                "hast-util-parse-selector": "^2.0.0",
+                "property-information": "^5.0.0",
+                "space-separated-tokens": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/refractor/node_modules/prismjs": {
+            "version": "1.27.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+            "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/refractor/node_modules/property-information": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+            "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+            "dependencies": {
+                "xtend": "^4.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/refractor/node_modules/space-separated-tokens": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+            "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/regenerate": {
             "version": "1.4.2",
             "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index ee859b882..316eb97a1 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -8,6 +8,7 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@tabler/icons-react": "^2.17.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@testing-library/jest-dom": "^5.16.5",
@@ -32,6 +33,7 @@
         "react-markdown": "^8.0.7",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
+        "react-syntax-highlighter": "^15.5.0",
         "react-tabs": "^6.0.0",
         "reactflow": "^11.5.5",
         "rehype-mathjax": "^4.0.2",
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
index 2e699a5c7..0c2c1ea73 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -1,8 +1,84 @@
-export default function codeBlock() {
-	// a html custom element for code blocks in markdown texts, it will allow to download the code as a file or copy it to the clipboard
-    return (
-        <div>
-            <h1>Code Block</h1>
-        </div>
-    )
+import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
+import { FC, memo, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { programmingLanguages } from '../../../../utils';
+
+interface Props {
+  language: string;
+  value: string;
 }
+
+export const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || '.file';
+    const suggestedFileName = `${"generated-code"}${fileExtension}`;
+    const fileName = window.prompt(
+      "enter file name",
+      suggestedFileName,
+    );
+
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
+
+    const blob = new Blob([value], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = fileName;
+    link.href = url;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <div className="codeblock relative font-sans text-[16px]">
+      <div className="flex items-center justify-between py-1.5 px-4">
+        <span className="text-xs lowercase text-white">{language}</span>
+
+        <div className="flex items-center">
+          <button
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            onClick={copyToClipboard}
+          >
+            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
+            {isCopied ? 'Copied!' : 'Copy code'}
+          </button>
+          <button
+            className="flex items-center rounded bg-none p-1 text-xs text-white"
+            onClick={downloadAsFile}
+          >
+            <IconDownload size={18} />
+          </button>
+        </div>
+      </div>
+
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{ margin: 0 }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+CodeBlock.displayName = 'CodeBlock';
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 3ae1c6b6a..41a9d2fc9 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -9,6 +9,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import { CodeBlock } from "./codeBlock";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
@@ -65,14 +66,32 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 										remarkPlugins={[remarkGfm, remarkMath]}
 										rehypePlugins={[rehypeMathjax]}
 										className="markdown prose"
-										// components={{
-										// 	code: (props) => (
-										// 		<code
-										// 			className="bg-pink-600 dark:bg-gray-700 rounded-md p-1"
-										// 			{...props}
-										// 		/>
-										// 	),
-										// }}
+										components={{
+											code({ node, inline, className, children, ...props }) {
+												if (children.length) {
+												  if (children[0] == '▍') {
+													return <span className="animate-pulse cursor-default mt-1">▍</span>
+												  }
+							
+												  children[0] = (children[0] as string).replace("`▍`", "▍")
+												}
+							
+												const match = /language-(\w+)/.exec(className || '');
+							
+												return !inline ? (
+												  <CodeBlock
+													key={Math.random()}
+													language={(match && match[1]) || ''}
+													value={String(children).replace(/\n$/, '')}
+													{...props}
+												  />
+												) : (
+												  <code className={className} {...props}>
+													{children}
+												  </code>
+												);
+											  }
+										}}
 									>
 										{message}
 									</ReactMarkdown>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 4ac16ce07..c1d5b69a0 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -454,3 +454,35 @@ export function updateTemplate(
 	}
 	return clonedObject;
 }
+
+interface languageMap {
+	[key: string]: string | undefined;
+  }
+  
+  export const programmingLanguages: languageMap = {
+	javascript: '.js',
+	python: '.py',
+	java: '.java',
+	c: '.c',
+	cpp: '.cpp',
+	'c++': '.cpp',
+	'c#': '.cs',
+	ruby: '.rb',
+	php: '.php',
+	swift: '.swift',
+	'objective-c': '.m',
+	kotlin: '.kt',
+	typescript: '.ts',
+	go: '.go',
+	perl: '.pl',
+	rust: '.rs',
+	scala: '.scala',
+	haskell: '.hs',
+	lua: '.lua',
+	shell: '.sh',
+	sql: '.sql',
+	html: '.html',
+	css: '.css',
+	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+  };
+  
\ No newline at end of file

From 08dacd70424bdfc3299a98a24eb4c45f64271aba Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 20:07:48 -0300
Subject: [PATCH 22/45] handle files on end

---
 src/frontend/src/modals/chatModal/index.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 8070569e2..3d24b1cc0 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -60,11 +60,14 @@ export default function ChatModal({
 		str,
 		thought,
 		end = false,
+		files
+	
 	}: {
 		str?: string;
 		thought?: string;
 		// end param default is false
 		end?: boolean;
+		files?: Array<any>
 	}) {
 		setChatHistory((old) => {
 			let newChat = [...old];
@@ -79,6 +82,9 @@ export default function ChatModal({
 			if (thought) {
 				newChat[newChat.length - 1].thought = thought;
 			}
+			if(files){
+				newChat[newChat.length - 1].files = files;
+			}
 			return newChat;
 		});
 	}
@@ -133,18 +139,23 @@ export default function ChatModal({
 		}
 		if (data.type === "end") {
 			if (data.intermediate_steps) {
+				
 				updateLastMessage({
 					str: data.message,
 					thought: data.intermediate_steps,
 					end: true,
 				});
 			}
+			if(data.files){
+				updateLastMessage({
+					end: true,
+					files: data.files
+				});
+			}
+
 			setLockChat(false);
 			isStream = false;
 		}
-		if (data.type === "file") {
-			console.log(data);
-		}
 		if (data.type === "stream" && isStream) {
 			updateLastMessage({ str: data.message });
 		}

From eb4ebc4b3de9e729311fcbeedd26c5faebed406d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 9 May 2023 22:29:31 -0300
Subject: [PATCH 23/45] first version image

---
 .../modals/chatModal/fileComponent/index.tsx  | 42 +++++++++++--------
 src/frontend/src/modals/chatModal/index.tsx   |  1 +
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index a7b492c95..05a7859eb 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -1,19 +1,20 @@
-import {  CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
-import * as base64js from 'base64-js';
+import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
+import * as base64js from "base64-js";
+import Tooltip from "../../../components/TooltipComponent";
 
 export default function FileCard({ fileName, content, fileType }) {
-    const handleDownload = () => {
-        const byteArray = new Uint8Array(base64js.toByteArray(content));
-        const blob = new Blob([byteArray], { type: 'application/octet-stream' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = fileName+".png";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      };
+	const handleDownload = () => {
+		const byteArray = new Uint8Array(base64js.toByteArray(content));
+		const blob = new Blob([byteArray], { type: "application/octet-stream" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = fileName + ".png";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
 
 	return (
 		<button
@@ -22,12 +23,19 @@ export default function FileCard({ fileName, content, fileType }) {
 		>
 			<div className="flex gap-2 text-current items-center w-full mr-2">
 				{" "}
-				<DocumentIcon className="w-8 h-8" />
+				{fileType === "image" ? (
+					<img
+						src={`data:image/png;base64,${content}`}
+						alt=""
+						className="w-8 h-8"
+					/>
+				) : (
+					<DocumentIcon className="w-8 h-8" />
+				)}
 				<div className="flex flex-col items-start">
 					{" "}
 					<div className="truncate text-sm text-current">{fileName}</div>
-                    <div className="truncate text-xs  text-gray-500">{fileType}</div>
-
+					<div className="truncate text-xs  text-gray-500">{fileType}</div>
 				</div>
 				<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
 			</div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 3d24b1cc0..bd8b931e6 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -91,6 +91,7 @@ export default function ChatModal({
 
 	function handleOnClose(event: CloseEvent) {
 		if (isOpen.current) {
+			console.log(event)
 			setLockChat(false);
 			setTimeout(() => {
 				connectWS();

From 222bb119d39d36c9cf4667a21408a05674d8f89d Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 11:30:46 -0300
Subject: [PATCH 24/45] refactor(chat_manager.py): remove unused code and
 method call in ChatManager constructor refactor(chat_manager.py): remove
 unused method call in ChatManager.handle_message()

---
 src/backend/langflow/api/chat_manager.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index ac77509b1..90ad2632b 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -48,7 +48,6 @@ class ChatManager:
     def __init__(self):
         self.active_connections: Dict[str, WebSocket] = {}
         self.chat_history = ChatHistory()
-        self.chat_history.attach(self.on_chat_history_update)
         self.cache_manager = cache_manager
         self.cache_manager.attach(self.update)
 
@@ -106,7 +105,6 @@ class ChatManager:
         # Process the graph data and chat message
         chat_message = payload.pop("message", "")
         chat_message = ChatMessage(message=chat_message)
-        await self.send_json(client_id, chat_message)
         self.chat_history.add_message(client_id, chat_message)
 
         graph_data = payload

From 31062f2a8cfb465ac6ee167fd4a7258dc23c6a94 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 11:31:06 -0300
Subject: [PATCH 25/45] refactor(run.py): remove unused process_graph function
 refactor(test_graph.py): update get_result_and_steps to
 get_result_and_thought function name

---
 src/backend/langflow/interface/run.py | 34 ---------------------------
 tests/test_graph.py                   |  4 ++--
 2 files changed, 2 insertions(+), 36 deletions(-)

diff --git a/src/backend/langflow/interface/run.py b/src/backend/langflow/interface/run.py
index 48ba918a8..bab211c2a 100644
--- a/src/backend/langflow/interface/run.py
+++ b/src/backend/langflow/interface/run.py
@@ -67,40 +67,6 @@ def build_langchain_object(data_graph):
     return graph.build()
 
 
-def process_graph(data_graph: Dict[str, Any]):
-    """
-    Process graph by extracting input variables and replacing ZeroShotPrompt
-    with PromptTemplate,then run the graph and return the result and thought.
-    """
-    # Load langchain object
-    logger.debug("Loading langchain object")
-    message = data_graph.pop("message", "")
-    is_first_message = len(data_graph.get("chatHistory", [])) == 0
-    computed_hash, langchain_object = load_langchain_object(
-        data_graph, is_first_message
-    )
-    logger.debug("Loaded langchain object")
-
-    if langchain_object is None:
-        # Raise user facing error
-        raise ValueError(
-            "There was an error loading the langchain_object. Please, check all the nodes and try again."
-        )
-
-    # Generate result and thought
-    logger.debug("Generating result and thought")
-    result, thought = get_result_and_steps(langchain_object, message)
-    logger.debug("Generated result and thought")
-
-    # Save langchain_object to cache
-    # We have to save it here because if the
-    # memory is updated we need to keep the new values
-    logger.debug("Saving langchain object to cache")
-    # save_cache(computed_hash, langchain_object, is_first_message)
-    logger.debug("Saved langchain object to cache")
-    return {"result": str(result), "thought": thought.strip()}
-
-
 def process_graph_cached(data_graph: Dict[str, Any], message: str):
     """
     Process graph by extracting input variables and replacing ZeroShotPrompt
diff --git a/tests/test_graph.py b/tests/test_graph.py
index 73c05099f..a0f5945fc 100644
--- a/tests/test_graph.py
+++ b/tests/test_graph.py
@@ -14,7 +14,7 @@ from langflow.graph.nodes import (
     ToolNode,
     WrapperNode,
 )
-from langflow.interface.run import get_result_and_steps
+from langflow.interface.run import get_result_and_thought
 from langflow.utils.payload import get_root_node
 
 # Test cases for the graph module
@@ -335,7 +335,7 @@ def test_get_result_and_thought(basic_graph):
     # now build again and check if FakeListLLM was used
 
     # Get the result and thought
-    result, thought = get_result_and_steps(langchain_object, message)
+    result, thought = get_result_and_thought(langchain_object, message)
     # The result should be a str
     assert isinstance(result, str)
     # The thought should be a Thought

From 7c1c5131065e8bc7effc2f0e120b394bea77cd28 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 11:41:34 -0300
Subject: [PATCH 26/45] refactor(loading.py): refactor instantiate_class
 function to improve readability and maintainability

---
 src/backend/langflow/interface/loading.py | 183 ++++++++++++----------
 1 file changed, 104 insertions(+), 79 deletions(-)

diff --git a/src/backend/langflow/interface/loading.py b/src/backend/langflow/interface/loading.py
index a2d9a799c..0e23c2b45 100644
--- a/src/backend/langflow/interface/loading.py
+++ b/src/backend/langflow/interface/loading.py
@@ -13,9 +13,9 @@ from langchain.agents.load_tools import (
 )
 from langchain.agents.loading import load_agent_from_config
 from langchain.agents.tools import Tool
+from langchain.base_language import BaseLanguageModel
 from langchain.callbacks.base import BaseCallbackManager
 from langchain.chains.loading import load_chain_from_config
-from langchain.base_language import BaseLanguageModel
 from langchain.llms.loading import load_llm_from_config
 from pydantic import ValidationError
 
@@ -30,88 +30,19 @@ from langflow.utils import util, validate
 
 def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
     """Instantiate class from module type and key, and params"""
+    params = convert_params_to_sets(params)
+
     if node_type in CUSTOM_AGENTS:
-        if custom_agent := CUSTOM_AGENTS.get(node_type):
-            return custom_agent.initialize(**params)  # type: ignore
-    params = process_params(params)
+        custom_agent = CUSTOM_AGENTS.get(node_type)
+        if custom_agent:
+            return custom_agent.initialize(**params)
+
     class_object = import_by_type(_type=base_type, name=node_type)
-    # check if it is a class before using issubclass
-
-    # if isinstance(class_object, type) and issubclass(class_object, BaseModel):
-    #     # validate params
-    #     fields = class_object.__fields__
-    #     params = {key: value for key, value in params.items() if key in fields}
-
-    if base_type == "agents":
-        # We need to initialize it differently
-        return load_agent_executor(class_object, params)
-    elif base_type == "prompts":
-        if node_type == "ZeroShotPrompt":
-            if "tools" not in params:
-                params["tools"] = []
-            return ZeroShotAgent.create_prompt(**params)
-    elif base_type == "tools":
-        if node_type == "JsonSpec":
-            params["dict_"] = load_file_into_dict(params.pop("path"))
-            return class_object(**params)
-        elif node_type == "PythonFunction":
-            # If the node_type is "PythonFunction"
-            # we need to get the function from the params
-            # which will be a str containing a python function
-            # and then we need to compile it and return the function
-            # as the instance
-            function_string = params["code"]
-            if isinstance(function_string, str):
-                return validate.eval_function(function_string)
-            raise ValueError("Function should be a string")
-        elif node_type.lower() == "tool":
-            return class_object(**params)
-    elif base_type == "toolkits":
-        loaded_toolkit = class_object(**params)
-        # Check if node_type has a loader
-        if toolkits_creator.has_create_function(node_type):
-            return load_toolkits_executor(node_type, loaded_toolkit, params)
-        return loaded_toolkit
-    elif base_type == "embeddings":
-        # ? Why remove model from params?
-        try:
-            params.pop("model")
-        except KeyError:
-            pass
-        # remove all params that are not in class_object.__fields__
-        try:
-            return class_object(**params)
-        except ValidationError:
-            params = {
-                key: value
-                for key, value in params.items()
-                if key in class_object.__fields__
-            }
-            return class_object(**params)
-    elif base_type == "vectorstores":
-        if len(params.get("documents", [])) == 0:
-            # Error when the pdf or other source was not correctly
-            # loaded.
-            raise ValueError(
-                "The source you provided did not load correctly or was empty."
-                "This may cause an error in the vectorstore."
-            )
-        return class_object.from_documents(**params)
-    elif base_type == "documentloaders":
-        return class_object(**params).load()
-    elif base_type == "textsplitters":
-        documents = params.pop("documents")
-        text_splitter = class_object(**params)
-        return text_splitter.split_documents(documents)
-    elif base_type == "utilities":
-        if node_type == "SQLDatabase":
-            return class_object.from_uri(params.pop("uri"))
-
-    return class_object(**params)
+    return instantiate_based_on_type(class_object, base_type, node_type, params)
 
 
-def process_params(params):
-    """Process params"""
+def convert_params_to_sets(params):
+    """Convert certain params to sets"""
     if "allowed_special" in params:
         params["allowed_special"] = set(params["allowed_special"])
     if "disallowed_special" in params:
@@ -119,6 +50,100 @@ def process_params(params):
     return params
 
 
+def instantiate_based_on_type(class_object, base_type, node_type, params):
+    if base_type == "agents":
+        return instantiate_agent(class_object, params)
+    elif base_type == "prompts":
+        return instantiate_prompt(node_type, params)
+    elif base_type == "tools":
+        return instantiate_tool(node_type, class_object, params)
+    elif base_type == "toolkits":
+        return instantiate_toolkit(node_type, class_object, params)
+    elif base_type == "embeddings":
+        return instantiate_embedding(class_object, params)
+    elif base_type == "vectorstores":
+        return instantiate_vectorstore(class_object, params)
+    elif base_type == "documentloaders":
+        return instantiate_documentloader(class_object, params)
+    elif base_type == "textsplitters":
+        return instantiate_textsplitter(class_object, params)
+    elif base_type == "utilities":
+        return instantiate_utility(node_type, class_object, params)
+    else:
+        return class_object(**params)
+
+
+def instantiate_agent(class_object, params):
+    return load_agent_executor(class_object, params)
+
+
+def instantiate_prompt(node_type, params):
+    if node_type == "ZeroShotPrompt":
+        if "tools" not in params:
+            params["tools"] = []
+        return ZeroShotAgent.create_prompt(**params)
+    return None  # Or some other default action
+
+
+def instantiate_tool(node_type, class_object, params):
+    if node_type == "JsonSpec":
+        params["dict_"] = load_file_into_dict(params.pop("path"))
+        return class_object(**params)
+    elif node_type == "PythonFunction":
+        function_string = params["code"]
+        if isinstance(function_string, str):
+            return validate.eval_function(function_string)
+        raise ValueError("Function should be a string")
+    elif node_type.lower() == "tool":
+        return class_object(**params)
+    return None  # Or some other default action
+
+
+def instantiate_toolkit(node_type, class_object, params):
+    loaded_toolkit = class_object(**params)
+    if toolkits_creator.has_create_function(node_type):
+        return load_toolkits_executor(node_type, loaded_toolkit, params)
+    return loaded_toolkit
+
+
+def instantiate_embedding(class_object, params):
+    params.pop("model", None)
+    try:
+        return class_object(**params)
+    except ValidationError:
+        params = {
+            key: value
+            for key, value in params.items()
+            if key in class_object.__fields__
+        }
+        return class_object(**params)
+
+
+def instantiate_vectorstore(class_object, params):
+    if len(params.get("documents", [])) == 0:
+        raise ValueError(
+            "The source you provided did not load correctly or was empty."
+            "This may cause an error in the vectorstore."
+        )
+    return class_object.from_documents(**params)
+
+
+def instantiate_documentloader(class_object, params):
+    return class_object(**params).load()
+
+
+def instantiate_textsplitter(class_object, params):
+    documents = params.pop("documents")
+    text_splitter = class_object(**params)
+    return text_splitter.split_documents(documents)
+
+
+def instantiate_utility(node_type, class_object, params):
+    if node_type == "SQLDatabase":
+        return class_object.from_uri(params.pop("uri"))
+    return class_object(**params)
+
+
 def load_flow_from_json(path: str, build=True):
     # This is done to avoid circular imports
     from langflow.graph import Graph

From f83160cf21f4e381e254432cff7fcde0c8f0d3be Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 11:42:36 -0300
Subject: [PATCH 27/45] refactor(langflow): organize imports in multiple files

This commit organizes imports in multiple files to follow PEP8 guidelines
and improve code readability. No functionality changes were made.
---
 src/backend/langflow/api/chat.py                  | 3 +--
 src/backend/langflow/api/chat_manager.py          | 1 -
 src/backend/langflow/api/endpoints.py             | 4 ++--
 src/backend/langflow/api/schemas.py               | 2 +-
 src/backend/langflow/interface/agents/custom.py   | 1 -
 src/backend/langflow/interface/importing/utils.py | 2 +-
 src/backend/langflow/interface/run.py             | 2 +-
 7 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/backend/langflow/api/chat.py b/src/backend/langflow/api/chat.py
index 436f64f7c..490aed12c 100644
--- a/src/backend/langflow/api/chat.py
+++ b/src/backend/langflow/api/chat.py
@@ -1,8 +1,7 @@
-from fastapi import APIRouter, WebSocket
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect, WebSocketException, status
 
 from langflow.api.chat_manager import ChatManager
 from langflow.utils.logger import logger
-from fastapi import status, WebSocketDisconnect, WebSocketException
 
 router = APIRouter()
 chat_manager = ChatManager()
diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 90ad2632b..6a4111fb4 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -5,7 +5,6 @@ from typing import Dict, List
 
 from fastapi import WebSocket
 
-
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
 from langflow.cache.manager import Subject
diff --git a/src/backend/langflow/api/endpoints.py b/src/backend/langflow/api/endpoints.py
index d4e592901..64973e163 100644
--- a/src/backend/langflow/api/endpoints.py
+++ b/src/backend/langflow/api/endpoints.py
@@ -3,14 +3,14 @@ from typing import Any, Dict
 
 from fastapi import APIRouter, HTTPException
 
-from langflow.interface.run import process_graph_cached
-from langflow.interface.types import build_langchain_types_dict
 from langflow.api.schemas import (
     ExportedFlow,
     GraphData,
     PredictRequest,
     PredictResponse,
 )
+from langflow.interface.run import process_graph_cached
+from langflow.interface.types import build_langchain_types_dict
 
 # build router
 router = APIRouter()
diff --git a/src/backend/langflow/api/schemas.py b/src/backend/langflow/api/schemas.py
index 2d14bad50..f73b0642d 100644
--- a/src/backend/langflow/api/schemas.py
+++ b/src/backend/langflow/api/schemas.py
@@ -1,4 +1,4 @@
-from typing import Any, Union, Dict, List
+from typing import Any, Dict, List, Union
 
 from pydantic import BaseModel, validator
 
diff --git a/src/backend/langflow/interface/agents/custom.py b/src/backend/langflow/interface/agents/custom.py
index 6d2efed68..5fab9bf77 100644
--- a/src/backend/langflow/interface/agents/custom.py
+++ b/src/backend/langflow/interface/agents/custom.py
@@ -27,7 +27,6 @@ from langchain.agents.agent_toolkits.vectorstore.prompt import (
 from langchain.agents.mrkl.prompt import FORMAT_INSTRUCTIONS
 from langchain.agents.mrkl.prompt import FORMAT_INSTRUCTIONS as SQL_FORMAT_INSTRUCTIONS
 from langchain.base_language import BaseLanguageModel
-
 from langchain.memory.chat_memory import BaseChatMemory
 from langchain.sql_database import SQLDatabase
 from langchain.tools.python.tool import PythonAstREPLTool
diff --git a/src/backend/langflow/interface/importing/utils.py b/src/backend/langflow/interface/importing/utils.py
index 0d14249cb..8c65bf60e 100644
--- a/src/backend/langflow/interface/importing/utils.py
+++ b/src/backend/langflow/interface/importing/utils.py
@@ -5,9 +5,9 @@ from typing import Any, Type
 
 from langchain import PromptTemplate
 from langchain.agents import Agent
+from langchain.base_language import BaseLanguageModel
 from langchain.chains.base import Chain
 from langchain.chat_models.base import BaseChatModel
-from langchain.base_language import BaseLanguageModel
 from langchain.tools import BaseTool
 
 
diff --git a/src/backend/langflow/interface/run.py b/src/backend/langflow/interface/run.py
index bab211c2a..05e4b49d6 100644
--- a/src/backend/langflow/interface/run.py
+++ b/src/backend/langflow/interface/run.py
@@ -3,8 +3,8 @@ import io
 from typing import Any, Dict
 
 from chromadb.errors import NotEnoughElementsException
-from langflow.api.callback import AsyncStreamingLLMCallbackHandler, StreamingLLMCallbackHandler  # type: ignore
 
+from langflow.api.callback import AsyncStreamingLLMCallbackHandler, StreamingLLMCallbackHandler  # type: ignore
 from langflow.cache.base import compute_dict_hash, load_cache, memoize_dict
 from langflow.graph.graph import Graph
 from langflow.interface import loading

From 55d18426fcb3732d45e1ce22b3e603c2a5844572 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 11:57:29 -0300
Subject: [PATCH 28/45] fix(chat_manager.py): fix chat history message to add
 response instead of request message

---
 src/backend/langflow/api/chat_manager.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 6a4111fb4..7ada67793 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -148,7 +148,7 @@ class ChatManager:
             files=file_responses,
         )
         await self.send_json(client_id, response)
-        self.chat_history.add_message(client_id, chat_message)
+        self.chat_history.add_message(client_id, response)
 
     async def handle_websocket(self, client_id: str, websocket: WebSocket):
         await self.connect(client_id, websocket)

From 6b6ac171675627729586dd6049af7b05f4c2581e Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 12:09:14 -0300
Subject: [PATCH 29/45] fix(chat_manager.py): close websocket connection with
 status code 1011 and error message on exception

---
 src/backend/langflow/api/chat_manager.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 7ada67793..1d5cc2406 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -3,7 +3,7 @@ import json
 from collections import defaultdict
 from typing import Dict, List
 
-from fastapi import WebSocket
+from fastapi import WebSocket, status
 
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
@@ -176,7 +176,9 @@ class ChatManager:
             # Handle any exceptions that might occur
             logger.exception(e)
             # send a message to the client
-            raise e
+            await self.active_connections[client_id].close(
+                code=status.WS_1011_INTERNAL_ERROR, reason=str(e)
+            )
         finally:
             try:
                 await self.active_connections[client_id].close(

From 7fde19b36ad1e0f5ce18a24e5fcbcdad464c16d4 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 12:17:52 -0300
Subject: [PATCH 30/45] fix(chat_manager.py): handle case where client is not
 in active_connections dictionary and remove duplicate code in finally block

---
 src/backend/langflow/api/chat_manager.py | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 1d5cc2406..2141b405b 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -4,6 +4,7 @@ from collections import defaultdict
 from typing import Dict, List
 
 from fastapi import WebSocket, status
+from fastapi.websockets import WebSocketState
 
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
@@ -179,11 +180,13 @@ class ChatManager:
             await self.active_connections[client_id].close(
                 code=status.WS_1011_INTERNAL_ERROR, reason=str(e)
             )
+            self.disconnect(client_id)
         finally:
             try:
-                await self.active_connections[client_id].close(
-                    code=1000, reason="Client disconnected"
-                )
+                connection = self.active_connections.get(client_id)
+                if connection:
+                    await connection.close(code=1000, reason="Client disconnected")
+                    self.disconnect(client_id)
             except Exception as e:
                 logger.exception(e)
             self.disconnect(client_id)

From 6431392576f90d04d5c6eab66967424cd92dd116 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 10 May 2023 19:44:41 -0300
Subject: [PATCH 31/45]  implemented image setup

---
 .../modals/chatModal/fileComponent/index.tsx  | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 05a7859eb..6c20d58b1 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -1,6 +1,6 @@
 import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
 import * as base64js from "base64-js";
-import Tooltip from "../../../components/TooltipComponent";
+import { useState } from "react";
 
 export default function FileCard({ fileName, content, fileType }) {
 	const handleDownload = () => {
@@ -15,6 +15,38 @@ export default function FileCard({ fileName, content, fileType }) {
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
 	};
+	const [isHovered, setIsHovered] = useState(false);
+	function handleMouseEnter() {
+		setIsHovered(true);
+	}
+	function handleMouseLeave() {
+		setIsHovered(false);
+	}
+
+	if (fileType === "image") {
+		return (
+			<div
+				className="relative w-1/4 h-1/4"
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+			>
+				<img
+					src={`data:image/png;base64,${content}`}
+					alt="generated image"
+					className="rounded-lg  w-full h-full"
+				/>
+				{isHovered && (
+					<div
+						className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold`}
+					>
+						<button className="hover:scale-125 text-blue-500 py-1 px-2" onClick={handleDownload}>
+							<CloudArrowDownIcon className="w-5 h-5 text-current"></CloudArrowDownIcon>
+						</button>
+					</div>
+				)}
+			</div>
+		);
+	}
 
 	return (
 		<button

From 32972b0f8a70a3ee8b2a51c7aef5d5931f40f2ae Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 10 May 2023 20:30:14 -0300
Subject: [PATCH 32/45] added error handling

---
 src/frontend/src/modals/chatModal/index.tsx | 733 ++++++++++----------
 1 file changed, 366 insertions(+), 367 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index a2ae56548..e89400eb6 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -14,393 +14,392 @@ import ChatInput from "./chatInput";
 const _ = require("lodash");
 
 export default function ChatModal({
-  flow,
-  open,
-  setOpen,
+	flow,
+	open,
+	setOpen,
 }: {
-  open: boolean;
-  setOpen: Function;
-  flow: FlowType;
+	open: boolean;
+	setOpen: Function;
+	flow: FlowType;
 }) {
-  const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-  const { reactFlowInstance } = useContext(typesContext);
-  const { setErrorData, setNoticeData } = useContext(alertContext);
-  const ws = useRef<WebSocket | null>(null);
-  const [lockChat, setLockChat] = useState(false);
-  const isOpen = useRef(open);
+	const [chatValue, setChatValue] = useState("");
+	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+	const { reactFlowInstance } = useContext(typesContext);
+	const { setErrorData, setNoticeData } = useContext(alertContext);
+	const ws = useRef<WebSocket | null>(null);
+	const [lockChat, setLockChat] = useState(false);
+	const isOpen = useRef(open);
 
-  useEffect(() => {
-    isOpen.current = open;
-  }, [open]);
-  var isStream = false;
+	useEffect(() => {
+		isOpen.current = open;
+	}, [open]);
+	var isStream = false;
 
-  const addChatHistory = (
-    message: string,
-    isSend: boolean,
-    thought?: string,
-    files?: Array<any>
-  ) => {
-    setChatHistory((old) => {
-      let newChat = _.cloneDeep(old);
-      if (files) {
-        newChat.push({ message, isSend, files, thought });
-      } else if (thought) {
-        newChat.push({ message, isSend, thought });
-      } else {
-        newChat.push({ message, isSend });
-      }
-      return newChat;
-    });
-  };
+	const addChatHistory = (
+		message: string,
+		isSend: boolean,
+		thought?: string,
+		files?: Array<any>
+	) => {
+		setChatHistory((old) => {
+			let newChat = _.cloneDeep(old);
+			if (files) {
+				newChat.push({ message, isSend, files, thought });
+			} else if (thought) {
+				newChat.push({ message, isSend, thought });
+			} else {
+				newChat.push({ message, isSend });
+			}
+			return newChat;
+		});
+	};
 
-  //add proper type signature for function
+	//add proper type signature for function
 
-  function updateLastMessage({
-    str,
-    thought,
-    end = false,
-    files,
-  }: {
-    str?: string;
-    thought?: string;
-    // end param default is false
-    end?: boolean;
-    files?: Array<any>;
-  }) {
-    setChatHistory((old) => {
-      let newChat = [...old];
-      if (str) {
-        if (end) {
-          newChat[newChat.length - 1].message = str;
-        } else {
-          newChat[newChat.length - 1].message =
-            newChat[newChat.length - 1].message + str;
-        }
-      }
-      if (thought) {
-        newChat[newChat.length - 1].thought = thought;
-      }
-      if (files) {
-        newChat[newChat.length - 1].files = files;
-      }
-      return newChat;
-    });
-  }
+	function updateLastMessage({
+		str,
+		thought,
+		end = false,
+		files,
+	}: {
+		str?: string;
+		thought?: string;
+		// end param default is false
+		end?: boolean;
+		files?: Array<any>;
+	}) {
+		setChatHistory((old) => {
+			let newChat = [...old];
+			if (str) {
+				if (end) {
+					newChat[newChat.length - 1].message = str;
+				} else {
+					newChat[newChat.length - 1].message =
+						newChat[newChat.length - 1].message + str;
+				}
+			}
+			if (thought) {
+				newChat[newChat.length - 1].thought = thought;
+			}
+			if (files) {
+				newChat[newChat.length - 1].files = files;
+			}
+			return newChat;
+		});
+	}
 
-  function handleOnClose(event: CloseEvent) {
-    if (isOpen.current) {
-      console.log(event);
-      setLockChat(false);
-      setTimeout(() => {
-        connectWS();
-      }, 1000);
-    }
-  }
+	function handleOnClose(event: CloseEvent) {
+		if (isOpen.current) {
+			setErrorData({ title: event.reason });
+			setLockChat(false);
+			setTimeout(() => {
+				connectWS();
+			}, 1000);
+		}
+	}
 
-  function handleWsMessage(data: any) {
-    if (Array.isArray(data)) {
-      //set chat history
-      setChatHistory((_) => {
-        let newChatHistory: ChatMessageType[] = [];
-        data.forEach(
-          (chatItem: {
-            intermediate_steps?: "string";
-            is_bot: boolean;
-            message: string;
-            type: string;
-            files?: Array<any>;
-          }) => {
-            if (chatItem.message) {
-              newChatHistory.push(
-                chatItem.files
-                  ? {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                      files: chatItem.files,
-                    }
-                  : {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                    }
-              );
-            }
-          }
-        );
-        return newChatHistory;
-      });
-    }
-    if (data.type === "start") {
-      console.log("start");
-      addChatHistory("", false);
-      isStream = true;
-    }
-    if (data.type === "end") {
-      if (data.intermediate_steps) {
-        updateLastMessage({
-          str: data.message,
-          thought: data.intermediate_steps,
-          end: true,
-        });
-      }
-      if (data.files) {
-        updateLastMessage({
-          end: true,
-          files: data.files,
-        });
-      }
+	function handleWsMessage(data: any) {
+		if (Array.isArray(data)) {
+			//set chat history
+			setChatHistory((_) => {
+				let newChatHistory: ChatMessageType[] = [];
+				data.forEach(
+					(chatItem: {
+						intermediate_steps?: "string";
+						is_bot: boolean;
+						message: string;
+						type: string;
+						files?: Array<any>;
+					}) => {
+						if (chatItem.message) {
+							newChatHistory.push(
+								chatItem.files
+									? {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+											files: chatItem.files,
+									  }
+									: {
+											isSend: !chatItem.is_bot,
+											message: chatItem.message,
+											thought: chatItem.intermediate_steps,
+									  }
+							);
+						}
+					}
+				);
+				return newChatHistory;
+			});
+		}
+		if (data.type === "start") {
+			addChatHistory("", false);
+			isStream = true;
+		}
+		if (data.type === "end") {
+			if (data.intermediate_steps) {
+				updateLastMessage({
+					str: data.message,
+					thought: data.intermediate_steps,
+					end: true,
+				});
+			}
+			if (data.files) {
+				updateLastMessage({
+					end: true,
+					files: data.files,
+				});
+			}
 
-      setLockChat(false);
-      isStream = false;
-    }
-    if (data.type === "stream" && isStream) {
-      updateLastMessage({ str: data.message });
-    }
-  }
+			setLockChat(false);
+			isStream = false;
+		}
+		if (data.type === "stream" && isStream) {
+			updateLastMessage({ str: data.message });
+		}
+	}
 
-  function connectWS() {
-    try {
-      const urlWs =
-        process.env.NODE_ENV === "development"
-          ? `ws://localhost:7860/chat/${flow.id}`
-          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-              window.location.host
-            }/chat/${flow.id}`;
+	function connectWS() {
+		try {
+			const urlWs =
+				process.env.NODE_ENV === "development"
+					? `ws://localhost:7860/chat/${flow.id}`
+					: `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+							window.location.host
+					  }/chat/${flow.id}`;
 
-      const newWs = new WebSocket(urlWs);
-      newWs.onopen = () => {
-        console.log("WebSocket connection established!");
-      };
-      console.log(flow.id);
-      newWs.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log("Received data:", data);
-        handleWsMessage(data);
-        //get chat history
-      };
-      newWs.onclose = (event) => {
-        handleOnClose(event);
-      };
-      newWs.onerror = (ev) => {
-        console.log(ev, "error");
-        setErrorData({
-          title: "There was an error on web connection, please: ",
-          list: [
-            "Refresh the page",
-            "Use a new flow tab",
-            "Check if the backend is up",
-          ],
-        });
-      };
-      ws.current = newWs;
-    } catch {
-      setErrorData({
-        title: "There was an error on web connection, please: ",
-        list: [
-          "Refresh the page",
-          "Use a new flow tab",
-          "Check if the backend is up",
-        ],
-      });
-    }
-  }
+			const newWs = new WebSocket(urlWs);
+			newWs.onopen = () => {
+				console.log("WebSocket connection established!");
+			};
+			console.log(flow.id);
+			newWs.onmessage = (event) => {
+				const data = JSON.parse(event.data);
+				console.log("Received data:", data);
+				handleWsMessage(data);
+				//get chat history
+			};
+			newWs.onclose = (event) => {
+				handleOnClose(event);
+			};
+			newWs.onerror = (ev) => {
+				console.log(ev, "error");
+				setErrorData({
+					title: "There was an error on web connection, please: ",
+					list: [
+						"Refresh the page",
+						"Use a new flow tab",
+						"Check if the backend is up",
+					],
+				});
+			};
+			ws.current = newWs;
+		} catch {
+			setErrorData({
+				title: "There was an error on web connection, please: ",
+				list: [
+					"Refresh the page",
+					"Use a new flow tab",
+					"Check if the backend is up",
+				],
+			});
+		}
+	}
 
-  useEffect(() => {
-    connectWS();
-    return () => {
-      console.log("unmount");
-      console.log(ws);
-      if (ws) {
-        ws.current.close();
-      }
-    };
-  }, []);
+	useEffect(() => {
+		connectWS();
+		return () => {
+			console.log("unmount");
+			console.log(ws);
+			if (ws) {
+				ws.current.close();
+			}
+		};
+	}, []);
 
-  async function sendAll(data: sendAllProps) {
-    try {
-      if (ws) {
-        ws.current.send(JSON.stringify(data));
-      }
-    } catch (error) {
-      setErrorData({
-        title: "There was an erro sending the message",
-        list: [error.message],
-      });
-      setChatValue(data.message);
-      connectWS();
-    }
-  }
+	async function sendAll(data: sendAllProps) {
+		try {
+			if (ws) {
+				ws.current.send(JSON.stringify(data));
+			}
+		} catch (error) {
+			setErrorData({
+				title: "There was an erro sending the message",
+				list: [error.message],
+			});
+			setChatValue(data.message);
+			connectWS();
+		}
+	}
 
-  useEffect(() => {
-    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-  }, [chatHistory]);
+	useEffect(() => {
+		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
+	}, [chatHistory]);
 
-  function validateNode(n: NodeType): Array<string> {
-    if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
-      setNoticeData({
-        title:
-          "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
-      });
-      return [];
-    }
+	function validateNode(n: NodeType): Array<string> {
+		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
+			setNoticeData({
+				title:
+					"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
+			});
+			return [];
+		}
 
-    const {
-      type,
-      node: { template },
-    } = n.data;
+		const {
+			type,
+			node: { template },
+		} = n.data;
 
-    return Object.keys(template).reduce(
-      (errors: Array<string>, t) =>
-        errors.concat(
-          template[t].required &&
-            template[t].show &&
-            (!template[t].value || template[t].value === "") &&
-            !reactFlowInstance
-              .getEdges()
-              .some(
-                (e) =>
-                  e.targetHandle.split("|")[1] === t &&
-                  e.targetHandle.split("|")[2] === n.id
-              )
-            ? [
-                `${type} is missing ${
-                  template.display_name
-                    ? template.display_name
-                    : toNormalCase(template[t].name)
-                }.`,
-              ]
-            : []
-        ),
-      [] as string[]
-    );
-  }
+		return Object.keys(template).reduce(
+			(errors: Array<string>, t) =>
+				errors.concat(
+					template[t].required &&
+						template[t].show &&
+						(!template[t].value || template[t].value === "") &&
+						!reactFlowInstance
+							.getEdges()
+							.some(
+								(e) =>
+									e.targetHandle.split("|")[1] === t &&
+									e.targetHandle.split("|")[2] === n.id
+							)
+						? [
+								`${type} is missing ${
+									template.display_name
+										? template.display_name
+										: toNormalCase(template[t].name)
+								}.`,
+						  ]
+						: []
+				),
+			[] as string[]
+		);
+	}
 
-  function validateNodes() {
-    return reactFlowInstance
-      .getNodes()
-      .flatMap((n: NodeType) => validateNode(n));
-  }
+	function validateNodes() {
+		return reactFlowInstance
+			.getNodes()
+			.flatMap((n: NodeType) => validateNode(n));
+	}
 
-  const ref = useRef(null);
+	const ref = useRef(null);
 
-  function sendMessage() {
-    if (chatValue !== "") {
-      let nodeValidationErrors = validateNodes();
-      if (nodeValidationErrors.length === 0) {
-        setLockChat(true);
-        let message = chatValue;
-        setChatValue("");
-        addChatHistory(message, true);
-        sendAll({
-          ...reactFlowInstance.toObject(),
-          message,
-          chatHistory,
-          name: flow.name,
-          description: flow.description,
-        });
-      } else {
-        setErrorData({
-          title: "Oops! Looks like you missed some required information:",
-          list: nodeValidationErrors,
-        });
-      }
-    } else {
-      setErrorData({
-        title: "Error sending message",
-        list: ["The message cannot be empty."],
-      });
-    }
-  }
-  function clearChat() {
-    setChatHistory([]);
-    ws.current.send(JSON.stringify({ clear_history: true }));
-  }
+	function sendMessage() {
+		if (chatValue !== "") {
+			let nodeValidationErrors = validateNodes();
+			if (nodeValidationErrors.length === 0) {
+				setLockChat(true);
+				let message = chatValue;
+				setChatValue("");
+				addChatHistory(message, true);
+				sendAll({
+					...reactFlowInstance.toObject(),
+					message,
+					chatHistory,
+					name: flow.name,
+					description: flow.description,
+				});
+			} else {
+				setErrorData({
+					title: "Oops! Looks like you missed some required information:",
+					list: nodeValidationErrors,
+				});
+			}
+		} else {
+			setErrorData({
+				title: "Error sending message",
+				list: ["The message cannot be empty."],
+			});
+		}
+	}
+	function clearChat() {
+		setChatHistory([]);
+		ws.current.send(JSON.stringify({ clear_history: true }));
+	}
 
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-  }
-  return (
-    <Transition.Root show={open} appear={open} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
-        </Transition.Child>
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+	}
+	return (
+		<Transition.Root show={open} appear={open} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
-                <div className="relative w-full">
-                  <button
-                    onClick={() => clearChat()}
-                    className="absolute top-2 right-2 hover:text-red-500 z-30"
-                  >
-                    <FaEraser className="w-4 h-4" />
-                  </button>
-                </div>
-                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-                  {chatHistory.length > 0 ? (
-                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
-                  ) : (
-                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
-                      <span>
-                        👋{" "}
-                        <span className="text-gray-600 text-lg">
-                          LangFlow Chat
-                        </span>
-                      </span>
-                      <br />
-                      <div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
-                        <span className="text-base text-gray-500">
-                          Start a conversation and click the agent’s thoughts{" "}
-                          <span>
-                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
-                          </span>{" "}
-                          to inspect the chaining process.
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                  <div ref={ref}></div>
-                </div>
-                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-                  <div className="relative w-full mt-1 rounded-md shadow-sm">
-                    <ChatInput
-                      chatValue={chatValue}
-                      lockChat={lockChat}
-                      sendMessage={sendMessage}
-                      setChatValue={setChatValue}
-                    />
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+								<div className="relative w-full">
+									<button
+										onClick={() => clearChat()}
+										className="absolute top-2 right-2 hover:text-red-500 z-30"
+									>
+										<FaEraser className="w-4 h-4" />
+									</button>
+								</div>
+								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
+									{chatHistory.length > 0 ? (
+										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+									) : (
+										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
+											<span>
+												👋{" "}
+												<span className="text-gray-600 text-lg">
+													LangFlow Chat
+												</span>
+											</span>
+											<br />
+											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+												<span className="text-base text-gray-500">
+													Start a conversation and click the agent’s thoughts{" "}
+													<span>
+														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+													</span>{" "}
+													to inspect the chaining process.
+												</span>
+											</div>
+										</div>
+									)}
+									<div ref={ref}></div>
+								</div>
+								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+									<div className="relative w-full mt-1 rounded-md shadow-sm">
+										<ChatInput
+											chatValue={chatValue}
+											lockChat={lockChat}
+											sendMessage={sendMessage}
+											setChatValue={setChatValue}
+										/>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }

From b1e5e4fd194cf30df26bb8175f678a82db200d3c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 10 May 2023 21:18:29 -0300
Subject: [PATCH 33/45] formated all code inside the src folder

---
 src/frontend/src/App.css                      |  50 +-
 .../components/parameterComponent/index.tsx   |   4 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 378 ++++++++--------
 .../components/singleAlertComponent/index.tsx | 286 ++++++------
 .../src/alerts/alertDropDown/index.tsx        | 106 ++---
 .../alerts/hooks/useOnClickOutside/index.ts   |  50 +-
 .../components/CrashErrorComponent/index.tsx  |  12 +-
 .../ExtraSidebarComponent/index.tsx           | 230 +++++-----
 .../LightTooltipComponent/index.tsx           |  28 +-
 .../src/components/TooltipComponent/index.tsx |  12 +-
 .../chatComponent/chatMessage/index.tsx       |  19 +-
 .../chatComponent/chatTrigger/index.tsx       |  70 +--
 .../src/components/chatComponent/index.tsx    |  44 +-
 .../components/dropdownComponent/index.tsx    | 166 +++----
 .../src/components/floatComponent/index.tsx   |  53 ++-
 .../src/components/inputComponent/index.tsx   | 158 +++----
 .../components/inputFileComponent/index.tsx   |  16 +-
 .../components/inputListComponent/index.tsx   | 116 +++--
 .../src/components/intComponent/index.tsx     |  19 +-
 .../src/components/loadingComponent/index.tsx |  43 +-
 .../components/textAreaComponent/index.tsx    |  79 ++--
 .../src/components/toggleComponent/index.tsx  | 145 +++---
 src/frontend/src/contexts/alertContext.tsx    | 109 ++---
 src/frontend/src/contexts/darkContext.tsx     |   8 +-
 src/frontend/src/contexts/locationContext.tsx |   4 +-
 src/frontend/src/contexts/popUpContext.tsx    |  32 +-
 src/frontend/src/contexts/tabsContext.tsx     | 408 ++++++++---------
 src/frontend/src/contexts/typesContext.tsx    |  30 +-
 src/frontend/src/controllers/API/index.ts     |  36 +-
 src/frontend/src/index.css                    |  20 +-
 src/frontend/src/index.tsx                    |   3 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  61 +--
 .../src/modals/chatModal/chatInput/index.tsx  |   4 +-
 .../chatModal/chatMessage/codeBlock/index.tsx | 139 +++---
 .../modals/chatModal/chatMessage/index.tsx    |  43 +-
 .../modals/chatModal/fileComponent/index.tsx  |   5 +-
 .../src/modals/codeAreaModal/index.tsx        |   4 +-
 src/frontend/src/modals/exportModal/index.tsx | 334 +++++++-------
 src/frontend/src/modals/importModal/index.tsx | 426 +++++++++---------
 src/frontend/src/modals/promptModal/index.tsx |   3 +-
 .../src/modals/textAreaModal/index.tsx        | 217 +++++----
 .../ConnectionLineComponent/index.tsx         |   8 +-
 .../components/DisclosureComponent/index.tsx  |   7 +-
 .../extraSidebarComponent/index.tsx           |  87 ++--
 .../components/tabComponent/index.tsx         |  16 +-
 .../components/tabsManagerComponent/index.tsx |   4 +-
 src/frontend/src/pages/FlowPage/index.tsx     | 292 ++++++------
 src/frontend/src/reportWebVitals.ts           |  18 +-
 src/frontend/src/svg.d.ts                     |   4 +-
 src/frontend/src/types/alerts/index.ts        |  36 +-
 src/frontend/src/types/api/index.ts           |  46 +-
 src/frontend/src/types/chat/index.ts          |   8 +-
 src/frontend/src/types/components/index.ts    | 118 ++---
 src/frontend/src/types/entities/index.ts      |   8 +-
 src/frontend/src/types/flow/index.ts          |  24 +-
 src/frontend/src/types/tabs/index.ts          |  29 +-
 .../src/types/templatesContext/index.ts       |   5 +-
 src/frontend/src/types/typesContext/index.ts  |   9 +-
 src/frontend/src/utils.ts                     | 110 ++---
 59 files changed, 2468 insertions(+), 2331 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 319e2ba39..be7173d7f 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -3,45 +3,45 @@
 @tailwind utilities;
 
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
-@font-face{
-  font-family: text-security-disc;
-  src: url("assets/text-security-disc.woff") format("woff");
-}
\ No newline at end of file
+@font-face {
+	font-family: text-security-disc;
+	src: url("assets/text-security-disc.woff") format("woff");
+}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 1a2eeb9e6..c79904661 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -198,7 +198,9 @@ export default function ParameterComponent({
 							save();
 						}}
 					/>
-				):(<></>)}
+				) : (
+					<></>
+				)}
 			</>
 		</div>
 	);
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index cc6738dcb..8af96387c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,10 +1,5 @@
 import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/24/outline";
-import {
-  classNames,
-  nodeColors,
-  nodeIcons,
-  toNormalCase,
-} from "../../utils";
+import { classNames, nodeColors, nodeIcons, toNormalCase } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
 import { useContext, useState, useEffect, useRef } from "react";
@@ -16,149 +11,148 @@ import { useCallback } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { debounce } from "../../utils";
 export default function GenericNode({
-  data,
-  selected,
+	data,
+	selected,
 }: {
-  data: NodeDataType;
-  selected: boolean;
+	data: NodeDataType;
+	selected: boolean;
 }) {
-  const { setErrorData } = useContext(alertContext);
-  const showError = useRef(true);
-  const { types, deleteNode } = useContext(typesContext);
-  const { openPopUp } = useContext(PopUpContext);
-  const Icon = nodeIcons[types[data.type]];
-  const [validationStatus, setValidationStatus] = useState("idle");
-  // State for outline color
-  const [isValid, setIsValid] = useState(false);
-  const { save } = useContext(TabsContext);
-  const { reactFlowInstance } = useContext(typesContext);
-  const [params, setParams] = useState([]);
+	const { setErrorData } = useContext(alertContext);
+	const showError = useRef(true);
+	const { types, deleteNode } = useContext(typesContext);
+	const { openPopUp } = useContext(PopUpContext);
+	const Icon = nodeIcons[types[data.type]];
+	const [validationStatus, setValidationStatus] = useState("idle");
+	// State for outline color
+	const [isValid, setIsValid] = useState(false);
+	const { save } = useContext(TabsContext);
+	const { reactFlowInstance } = useContext(typesContext);
+	const [params, setParams] = useState([]);
 
+	useEffect(() => {
+		if (reactFlowInstance) {
+			setParams(Object.values(reactFlowInstance.toObject()));
+		}
+	}, [save]);
 
-  useEffect(() => {
-    if (reactFlowInstance) {
-      setParams(Object.values(reactFlowInstance.toObject()));
-    }
-  }, [save]);
+	const validateNode = useCallback(
+		debounce(async () => {
+			try {
+				const response = await fetch(`/validate/node/${data.id}`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(reactFlowInstance.toObject()),
+				});
 
-  const validateNode = useCallback(
-    debounce(async () => {
-      try {
-        const response = await fetch(`/validate/node/${data.id}`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(reactFlowInstance.toObject()),
-        });
+				if (response.status === 200) {
+					setValidationStatus("success");
+				} else if (response.status === 500) {
+					setValidationStatus("error");
+				}
+			} catch (error) {
+				// console.error("Error validating node:", error);
+				setValidationStatus("error");
+			}
+		}, 1000), // Adjust the debounce delay (500ms) as needed
+		[reactFlowInstance, data.id]
+	);
+	useEffect(() => {
+		if (params.length > 0) {
+			validateNode();
+		}
+	}, [params, validateNode]);
 
-        if (response.status === 200) {
-          setValidationStatus("success");
-        } else if (response.status === 500) {
-          setValidationStatus("error");
-        }
-      } catch (error) {
-        // console.error("Error validating node:", error);
-        setValidationStatus("error");
-      }
-    }, 1000), // Adjust the debounce delay (500ms) as needed
-    [reactFlowInstance, data.id]
-  );
-  useEffect(() => {
-    if (params.length > 0) {
-      validateNode();
-    }
-  }, [params, validateNode]);
+	useEffect(() => {
+		if (validationStatus === "success") {
+			setIsValid(true);
+		} else {
+			setIsValid(false);
+		}
+	}, [validationStatus]);
 
-  useEffect(() => {
-    if (validationStatus === "success") {
-      setIsValid(true);
-    } else {
-      setIsValid(false);
-    }
-  }, [validationStatus]);
+	if (!Icon) {
+		if (showError.current) {
+			setErrorData({
+				title: data.type
+					? `The ${data.type} node could not be rendered, please review your json file`
+					: "There was a node that can't be rendered, please review your json file",
+			});
+			showError.current = false;
+		}
+		deleteNode(data.id);
+		return;
+	}
 
-  if (!Icon) {
-    if (showError.current) {
-      setErrorData({
-        title: data.type
-          ? `The ${data.type} node could not be rendered, please review your json file`
-          : "There was a node that can't be rendered, please review your json file",
-      });
-      showError.current = false;
-    }
-    deleteNode(data.id);
-    return;
-  }
+	return (
+		<div
+			className={classNames(
+				isValid ? "animate-pulse-green" : "border-red-outline",
+				selected ? "border border-blue-500" : "border dark:border-gray-700",
+				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+			)}
+		>
+			<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
+				<div className="w-full flex items-center truncate gap-4 text-lg">
+					<Icon
+						className="w-10 h-10 p-1 rounded"
+						style={{
+							color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+						}}
+					/>
+					<div className="truncate">{data.type}</div>
+				</div>
+				<div className="flex gap-3">
+					<button
+						className="relative"
+						onClick={(event) => {
+							event.preventDefault();
+							openPopUp(<NodeModal data={data} />);
+						}}
+					>
+						<div className=" absolute text-red-600 -top-2 -right-1">
+							{Object.keys(data.node.template).some(
+								(t) =>
+									data.node.template[t].advanced &&
+									data.node.template[t].required
+							)
+								? " *"
+								: ""}
+						</div>
+						<Cog6ToothIcon
+							className={classNames(
+								Object.keys(data.node.template).some(
+									(t) =>
+										data.node.template[t].advanced && data.node.template[t].show
+								)
+									? ""
+									: "hidden",
+								"w-6 h-6  dark:text-gray-500  hover:animate-spin"
+							)}
+						></Cog6ToothIcon>
+					</button>
+					<button
+						onClick={() => {
+							deleteNode(data.id);
+						}}
+					>
+						<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
+					</button>
+				</div>
+			</div>
 
-  return (
-    <div
-      className={classNames(
-        isValid ? "animate-pulse-green" : "border-red-outline",
-        selected ? "border border-blue-500" : "border dark:border-gray-700",
-        "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
-      )}
-    >
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
-        <div className="w-full flex items-center truncate gap-4 text-lg">
-          <Icon
-            className="w-10 h-10 p-1 rounded"
-            style={{
-              color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-            }}
-          />
-          <div className="truncate">{data.type}</div>
-        </div>
-        <div className="flex gap-3">
-          <button
-            className="relative"
-            onClick={(event) => {
-              event.preventDefault();
-              openPopUp(<NodeModal data={data} />);
-            }}
-          >
-            <div className=" absolute text-red-600 -top-2 -right-1">
-              {Object.keys(data.node.template).some(
-                (t) =>
-                  data.node.template[t].advanced &&
-                  data.node.template[t].required
-              )
-                ? " *"
-                : ""}
-            </div>
-            <Cog6ToothIcon
-              className={classNames(
-                Object.keys(data.node.template).some(
-                  (t) =>
-                    data.node.template[t].advanced && data.node.template[t].show
-                )
-                  ? ""
-                  : "hidden",
-                "w-6 h-6  dark:text-gray-500  hover:animate-spin"
-              )}
-            ></Cog6ToothIcon>
-          </button>
-          <button
-            onClick={() => {
-              deleteNode(data.id);
-            }}
-          >
-            <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
-          </button>
-        </div>
-      </div>
+			<div className="w-full h-full py-5">
+				<div className="w-full text-gray-500 px-5 pb-3 text-sm">
+					{data.node.description}
+				</div>
 
-      <div className="w-full h-full py-5">
-        <div className="w-full text-gray-500 px-5 pb-3 text-sm">
-          {data.node.description}
-        </div>
-
-        <>
-          {Object.keys(data.node.template)
-            .filter((t) => t.charAt(0) !== "_")
-            .map((t: string, idx) => (
-              <div key={idx}>
-                {/* {idx === 0 ? (
+				<>
+					{Object.keys(data.node.template)
+						.filter((t) => t.charAt(0) !== "_")
+						.map((t: string, idx) => (
+							<div key={idx}>
+								{/* {idx === 0 ? (
 									<div
 										className={classNames(
 											"px-5 py-2 mt-2 dark:text-white text-center",
@@ -177,59 +171,59 @@ export default function GenericNode({
 								) : (
 									<></>
 								)} */}
-                {data.node.template[t].show &&
-                !data.node.template[t].advanced ? (
-                  <ParameterComponent
-                    data={data}
-                    color={
-                      nodeColors[types[data.node.template[t].type]] ??
-                      nodeColors.unknown
-                    }
-                    title={
-                      data.node.template[t].display_name
-                        ? data.node.template[t].display_name
-                        : data.node.template[t].name
-                        ? toNormalCase(data.node.template[t].name)
-                        : toNormalCase(t)
-                    }
-                    name={t}
-                    tooltipTitle={
-                      "Type: " +
-                      data.node.template[t].type +
-                      (data.node.template[t].list ? " list" : "")
-                    }
-                    required={data.node.template[t].required}
-                    id={data.node.template[t].type + "|" + t + "|" + data.id}
-                    left={true}
-                    type={data.node.template[t].type}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            ))}
-          <div
-            className={classNames(
-              Object.keys(data.node.template).length < 1 ? "hidden" : "",
-              "w-full flex justify-center"
-            )}
-          >
-            {" "}
-          </div>
-          {/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
+								{data.node.template[t].show &&
+								!data.node.template[t].advanced ? (
+									<ParameterComponent
+										data={data}
+										color={
+											nodeColors[types[data.node.template[t].type]] ??
+											nodeColors.unknown
+										}
+										title={
+											data.node.template[t].display_name
+												? data.node.template[t].display_name
+												: data.node.template[t].name
+												? toNormalCase(data.node.template[t].name)
+												: toNormalCase(t)
+										}
+										name={t}
+										tooltipTitle={
+											"Type: " +
+											data.node.template[t].type +
+											(data.node.template[t].list ? " list" : "")
+										}
+										required={data.node.template[t].required}
+										id={data.node.template[t].type + "|" + t + "|" + data.id}
+										left={true}
+										type={data.node.template[t].type}
+									/>
+								) : (
+									<></>
+								)}
+							</div>
+						))}
+					<div
+						className={classNames(
+							Object.keys(data.node.template).length < 1 ? "hidden" : "",
+							"w-full flex justify-center"
+						)}
+					>
+						{" "}
+					</div>
+					{/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
 						Output
 					</div> */}
-          <ParameterComponent
-            data={data}
-            color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-            title={data.type}
-            tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
-            id={[data.type, data.id, ...data.node.base_classes].join("|")}
-            type={data.node.base_classes.join("|")}
-            left={false}
-          />
-        </>
-      </div>
-    </div>
-  );
+					<ParameterComponent
+						data={data}
+						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+						title={data.type}
+						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+						id={[data.type, data.id, ...data.node.base_classes].join("|")}
+						type={data.node.base_classes.join("|")}
+						left={false}
+					/>
+				</>
+			</div>
+		</div>
+	);
 }
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index d9428a34b..6bf9bee57 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -1,8 +1,8 @@
 import {
-  XCircleIcon,
-  XMarkIcon,
-  InformationCircleIcon,
-  CheckCircleIcon,
+	XCircleIcon,
+	XMarkIcon,
+	InformationCircleIcon,
+	CheckCircleIcon,
 } from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
@@ -10,145 +10,145 @@ import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
 export default function SingleAlert({
-  dropItem,
-  removeAlert,
+	dropItem,
+	removeAlert,
 }: SingleAlertComponentType) {
-  const [show, setShow] = useState(true);
-  const type = dropItem.type;
+	const [show, setShow] = useState(true);
+	const type = dropItem.type;
 
-  return (
-    <Transition
-      className="relative"
-      show={show}
-      appear={true}
-      enter="transition-transform duration-500 ease-out"
-      enterFrom={"transform translate-x-[-100%]"}
-      enterTo={"transform translate-x-0"}
-      leave="transition-transform duration-500 ease-in"
-      leaveFrom={"transform translate-x-0"}
-      leaveTo={"transform translate-x-[-100%]"}
-    >
-      {type === "error" ? (
-        <div
-          className="flex bg-red-50 rounded-md p-3 mb-2 mx-2"
-          key={dropItem.id}
-        >
-          <div className="flex-shrink-0">
-            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
-          </div>
-          <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-800">
-              {dropItem.title}
-            </h3>
-            {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700">
-                <ul className="list-disc space-y-1 pl-5">
-                  {dropItem.list.map((item, idx) => (
-                    <li key={idx}>{item}</li>
-                  ))}
-                </ul>
-              </div>
-            ) : (
-              <></>
-            )}
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={() => {
-                  setShow(false);
-                  setTimeout(() => {
-                    removeAlert(dropItem.id);
-                  }, 500);
-                }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : type === "notice" ? (
-        <div
-          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
-          key={dropItem.id}
-        >
-          <div className="flex-shrink-0">
-            <InformationCircleIcon
-              className="h-5 w-5 text-blue-400"
-              aria-hidden="true"
-            />
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">{dropItem.title}</p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
-              {dropItem.link ? (
-                <Link
-                  to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
-                >
-                  Details
-                </Link>
-              ) : (
-                <></>
-              )}
-            </p>
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={() => {
-                  setShow(false);
-                  setTimeout(() => {
-                    removeAlert(dropItem.id);
-                  }, 500);
-                }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div
-          className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md"
-          key={dropItem.id}
-        >
-          <div className="flex-shrink-0">
-            <CheckCircleIcon
-              className="h-5 w-5 text-green-400"
-              aria-hidden="true"
-            />
-          </div>
-          <div className="ml-3">
-            <p className="text-sm font-medium text-green-800">
-              {dropItem.title}
-            </p>
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={() => {
-                  setShow(false);
-                  setTimeout(() => {
-                    removeAlert(dropItem.id);
-                  }, 500);
-                }}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </Transition>
-  );
+	return (
+		<Transition
+			className="relative"
+			show={show}
+			appear={true}
+			enter="transition-transform duration-500 ease-out"
+			enterFrom={"transform translate-x-[-100%]"}
+			enterTo={"transform translate-x-0"}
+			leave="transition-transform duration-500 ease-in"
+			leaveFrom={"transform translate-x-0"}
+			leaveTo={"transform translate-x-[-100%]"}
+		>
+			{type === "error" ? (
+				<div
+					className="flex bg-red-50 rounded-md p-3 mb-2 mx-2"
+					key={dropItem.id}
+				>
+					<div className="flex-shrink-0">
+						<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+					</div>
+					<div className="ml-3">
+						<h3 className="text-sm font-medium text-red-800">
+							{dropItem.title}
+						</h3>
+						{dropItem.list ? (
+							<div className="mt-2 text-sm text-red-700">
+								<ul className="list-disc space-y-1 pl-5">
+									{dropItem.list.map((item, idx) => (
+										<li key={idx}>{item}</li>
+									))}
+								</ul>
+							</div>
+						) : (
+							<></>
+						)}
+					</div>
+					<div className="ml-auto pl-3">
+						<div className="-mx-1.5 -my-1.5">
+							<button
+								type="button"
+								onClick={() => {
+									setShow(false);
+									setTimeout(() => {
+										removeAlert(dropItem.id);
+									}, 500);
+								}}
+								className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+							>
+								<span className="sr-only">Dismiss</span>
+								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
+							</button>
+						</div>
+					</div>
+				</div>
+			) : type === "notice" ? (
+				<div
+					className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
+					key={dropItem.id}
+				>
+					<div className="flex-shrink-0">
+						<InformationCircleIcon
+							className="h-5 w-5 text-blue-400"
+							aria-hidden="true"
+						/>
+					</div>
+					<div className="ml-3 flex-1 md:flex md:justify-between">
+						<p className="text-sm text-blue-700">{dropItem.title}</p>
+						<p className="mt-3 text-sm md:mt-0 md:ml-6">
+							{dropItem.link ? (
+								<Link
+									to={dropItem.link}
+									className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
+								>
+									Details
+								</Link>
+							) : (
+								<></>
+							)}
+						</p>
+					</div>
+					<div className="ml-auto pl-3">
+						<div className="-mx-1.5 -my-1.5">
+							<button
+								type="button"
+								onClick={() => {
+									setShow(false);
+									setTimeout(() => {
+										removeAlert(dropItem.id);
+									}, 500);
+								}}
+								className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
+							>
+								<span className="sr-only">Dismiss</span>
+								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
+							</button>
+						</div>
+					</div>
+				</div>
+			) : (
+				<div
+					className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md"
+					key={dropItem.id}
+				>
+					<div className="flex-shrink-0">
+						<CheckCircleIcon
+							className="h-5 w-5 text-green-400"
+							aria-hidden="true"
+						/>
+					</div>
+					<div className="ml-3">
+						<p className="text-sm font-medium text-green-800">
+							{dropItem.title}
+						</p>
+					</div>
+					<div className="ml-auto pl-3">
+						<div className="-mx-1.5 -my-1.5">
+							<button
+								type="button"
+								onClick={() => {
+									setShow(false);
+									setTimeout(() => {
+										removeAlert(dropItem.id);
+									}, 500);
+								}}
+								className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
+							>
+								<span className="sr-only">Dismiss</span>
+								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</Transition>
+	);
 }
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 73ee9413c..84a376aaf 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -7,60 +7,60 @@ import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
 export default function AlertDropdown({}: AlertDropdownType) {
-  const { closePopUp } = useContext(PopUpContext);
-  const componentRef = useRef<HTMLDivElement>(null);
+	const { closePopUp } = useContext(PopUpContext);
+	const componentRef = useRef<HTMLDivElement>(null);
 
-  // Use the custom hook
-  useOnClickOutside(componentRef, () => {
-    closePopUp();
-  });
+	// Use the custom hook
+	useOnClickOutside(componentRef, () => {
+		closePopUp();
+	});
 
-  const {
-    notificationList,
-    clearNotificationList,
-    removeFromNotificationList,
-  } = useContext(alertContext);
+	const {
+		notificationList,
+		clearNotificationList,
+		removeFromNotificationList,
+	} = useContext(alertContext);
 
-  return (
-    <div
-      ref={componentRef}
-      className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
-    >
-      <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
-        Notifications
-        <div className="flex gap-2 pr-3 ">
-          <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
-            onClick={() => {
-              closePopUp();
-              setTimeout(clearNotificationList, 100);
-            }}
-          >
-            <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
-          </button>
-          <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
-            onClick={closePopUp}
-          >
-            <XMarkIcon className="h-5 w-5" />
-          </button>
-        </div>
-      </div>
-      <div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
-        {notificationList.length !== 0 ? (
-          notificationList.map((alertItem, index) => (
-            <SingleAlert
-              key={alertItem.id}
-              dropItem={alertItem}
-              removeAlert={removeFromNotificationList}
-            />
-          ))
-        ) : (
-          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
-            No new notifications
-          </div>
-        )}
-      </div>
-    </div>
-  );
+	return (
+		<div
+			ref={componentRef}
+			className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
+		>
+			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
+				Notifications
+				<div className="flex gap-2 pr-3 ">
+					<button
+						className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+						onClick={() => {
+							closePopUp();
+							setTimeout(clearNotificationList, 100);
+						}}
+					>
+						<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+					</button>
+					<button
+						className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+						onClick={closePopUp}
+					>
+						<XMarkIcon className="h-5 w-5" />
+					</button>
+				</div>
+			</div>
+			<div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+				{notificationList.length !== 0 ? (
+					notificationList.map((alertItem, index) => (
+						<SingleAlert
+							key={alertItem.id}
+							dropItem={alertItem}
+							removeAlert={removeFromNotificationList}
+						/>
+					))
+				) : (
+					<div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+						No new notifications
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }
diff --git a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
index 249133d96..3046d41a4 100644
--- a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
+++ b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
@@ -1,33 +1,33 @@
 import { useEffect } from "react";
 
 export function useOnClickOutside(ref, handler) {
-  useEffect(() => {
-    const listener = (event) => {
-      // Do nothing if clicking ref's element or its children
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
+	useEffect(() => {
+		const listener = (event) => {
+			// Do nothing if clicking ref's element or its children
+			if (!ref.current || ref.current.contains(event.target)) {
+				return;
+			}
 
-      handler(event);
-    };
+			handler(event);
+		};
 
-    // Attach the listener to the document
-    document.addEventListener("mousedown", listener, { passive: true });
+		// Attach the listener to the document
+		document.addEventListener("mousedown", listener, { passive: true });
 
-    // Attach the listener to the react-flow instance
-    const reactFlowContainer = document.querySelector(".react-flow");
-    if (reactFlowContainer) {
-      reactFlowContainer.addEventListener("mousedown", listener, {
-        passive: true,
-      });
-    }
+		// Attach the listener to the react-flow instance
+		const reactFlowContainer = document.querySelector(".react-flow");
+		if (reactFlowContainer) {
+			reactFlowContainer.addEventListener("mousedown", listener, {
+				passive: true,
+			});
+		}
 
-    // Clean up the listener when the component is unmounted
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      if (reactFlowContainer) {
-        reactFlowContainer.removeEventListener("mousedown", listener);
-      }
-    };
-  }, [ref, handler]); // Rerun only if ref or handler changes
+		// Clean up the listener when the component is unmounted
+		return () => {
+			document.removeEventListener("mousedown", listener);
+			if (reactFlowContainer) {
+				reactFlowContainer.removeEventListener("mousedown", listener);
+			}
+		};
+	}, [ref, handler]); // Rerun only if ref or handler changes
 }
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index 7864e6d65..de3cea182 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -2,12 +2,14 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
 	return (
 		<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
 			<div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-				<h1 className="text-red-500 text-3xl mb-4">Oops! An unknown error has occurred.</h1>
+				<h1 className="text-red-500 text-3xl mb-4">
+					Oops! An unknown error has occurred.
+				</h1>
 				<p className="text-gray-700 mb-4 text-xl">
-					Please click the 'Reset Application' button
-					to restore the application's state. If the error persists, please
-					create an issue on our GitHub page. We apologize for any inconvenience
-					this may have caused.   
+					Please click the 'Reset Application' button to restore the
+					application's state. If the error persists, please create an issue on
+					our GitHub page. We apologize for any inconvenience this may have
+					caused.
 				</p>
 				<div className="flex justify-center">
 					<button
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index f5acd5a23..317f025ae 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -6,119 +6,119 @@ import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
 
 export default function ExtraSidebar() {
-  const {
-    current,
-    isStackedOpen,
-    setIsStackedOpen,
-    extraNavigation,
-    extraComponent,
-  } = useContext(locationContext);
-  return (
-    <>
-      <aside
-        className={` ${
-          isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
-      >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex pt-1 px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
-              {extraNavigation.title}
-            </span>
-          </div>
-          <div className="flex flex-grow flex-col w-full">
-            {extraNavigation.options ? (
-              <div className="p-4">
-                <nav className="flex-1 space-y-1">
-                  {extraNavigation.options.map((item) =>
-                    !item.children ? (
-                      <div key={item.name}>
-                        <Link
-                          to={item.href}
-                          className={classNames(
-                            item.href.split("/")[2] === current[4]
-                              ? "bg-gray-100 text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
-                          )}
-                        >
-                          <item.icon
-                            className={classNames(
-                              item.href.split("/")[2] === current[4]
-                                ? "text-gray-500"
-                                : "text-gray-400 group-hover:text-gray-500",
-                              "mr-3 flex-shrink-0 h-6 w-6"
-                            )}
-                          />
-                          {item.name}
-                        </Link>
-                      </div>
-                    ) : (
-                      <Disclosure
-                        as="div"
-                        key={item.name}
-                        className="space-y-1"
-                      >
-                        {({ open }) => (
-                          <>
-                            <Disclosure.Button
-                              className={classNames(
-                                item.href.split("/")[2] === current[4]
-                                  ? "bg-gray-100 text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                              )}
-                            >
-                              <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                                aria-hidden="true"
-                              />
-                              <span className="flex-1">{item.name}</span>
-                              <svg
-                                className={classNames(
-                                  open
-                                    ? "text-gray-400 rotate-90"
-                                    : "text-gray-300",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
-                                )}
-                                viewBox="0 0 20 20"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  d="M6 6L14 10L6 14V6Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </Disclosure.Button>
-                            <Disclosure.Panel className="space-y-1">
-                              {item.children.map((subItem) => (
-                                <Link
-                                  key={subItem.name}
-                                  to={subItem.href}
-                                  className={classNames(
-                                    subItem.href.split("/")[3] === current[5]
-                                      ? "bg-gray-100 text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
-                                  )}
-                                >
-                                  {subItem.name}
-                                </Link>
-                              ))}
-                            </Disclosure.Panel>
-                          </>
-                        )}
-                      </Disclosure>
-                    )
-                  )}
-                </nav>
-              </div>
-            ) : (
-              extraComponent
-            )}
-          </div>
-        </div>
-      </aside>
-    </>
-  );
+	const {
+		current,
+		isStackedOpen,
+		setIsStackedOpen,
+		extraNavigation,
+		extraComponent,
+	} = useContext(locationContext);
+	return (
+		<>
+			<aside
+				className={` ${
+					isStackedOpen ? "w-52" : "w-0 "
+				} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
+			>
+				<div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+					<div className="flex pt-1 px-4 justify-between align-middle w-full">
+						<span className="text-gray-900 dark:text-white py-[2px] font-medium ">
+							{extraNavigation.title}
+						</span>
+					</div>
+					<div className="flex flex-grow flex-col w-full">
+						{extraNavigation.options ? (
+							<div className="p-4">
+								<nav className="flex-1 space-y-1">
+									{extraNavigation.options.map((item) =>
+										!item.children ? (
+											<div key={item.name}>
+												<Link
+													to={item.href}
+													className={classNames(
+														item.href.split("/")[2] === current[4]
+															? "bg-gray-100 text-gray-900"
+															: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+														"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
+													)}
+												>
+													<item.icon
+														className={classNames(
+															item.href.split("/")[2] === current[4]
+																? "text-gray-500"
+																: "text-gray-400 group-hover:text-gray-500",
+															"mr-3 flex-shrink-0 h-6 w-6"
+														)}
+													/>
+													{item.name}
+												</Link>
+											</div>
+										) : (
+											<Disclosure
+												as="div"
+												key={item.name}
+												className="space-y-1"
+											>
+												{({ open }) => (
+													<>
+														<Disclosure.Button
+															className={classNames(
+																item.href.split("/")[2] === current[4]
+																	? "bg-gray-100 text-gray-900"
+																	: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+																"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+															)}
+														>
+															<item.icon
+																className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+																aria-hidden="true"
+															/>
+															<span className="flex-1">{item.name}</span>
+															<svg
+																className={classNames(
+																	open
+																		? "text-gray-400 rotate-90"
+																		: "text-gray-300",
+																	"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+																)}
+																viewBox="0 0 20 20"
+																aria-hidden="true"
+															>
+																<path
+																	d="M6 6L14 10L6 14V6Z"
+																	fill="currentColor"
+																/>
+															</svg>
+														</Disclosure.Button>
+														<Disclosure.Panel className="space-y-1">
+															{item.children.map((subItem) => (
+																<Link
+																	key={subItem.name}
+																	to={subItem.href}
+																	className={classNames(
+																		subItem.href.split("/")[3] === current[5]
+																			? "bg-gray-100 text-gray-900"
+																			: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+																		"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+																	)}
+																>
+																	{subItem.name}
+																</Link>
+															))}
+														</Disclosure.Panel>
+													</>
+												)}
+											</Disclosure>
+										)
+									)}
+								</nav>
+							</div>
+						) : (
+							extraComponent
+						)}
+					</div>
+				</div>
+			</aside>
+		</>
+	);
 }
diff --git a/src/frontend/src/components/LightTooltipComponent/index.tsx b/src/frontend/src/components/LightTooltipComponent/index.tsx
index ae4a2ffd4..334fc0e71 100644
--- a/src/frontend/src/components/LightTooltipComponent/index.tsx
+++ b/src/frontend/src/components/LightTooltipComponent/index.tsx
@@ -1,17 +1,17 @@
-import { styled } from '@mui/material/styles';
-import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from "@mui/material/styles";
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 
 export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} />
+	<Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.white,
-    color: 'rgba(0, 0, 0, 0.87)',
-    boxShadow: theme.shadows[2],
-    fontSize: 14,
-  },
-  [`& .${tooltipClasses.arrow}:before`]: {
-    color: theme.palette.common.white,
-    boxShadow: theme.shadows[1],
-  },
-}));
\ No newline at end of file
+	[`& .${tooltipClasses.tooltip}`]: {
+		backgroundColor: theme.palette.common.white,
+		color: "rgba(0, 0, 0, 0.87)",
+		boxShadow: theme.shadows[2],
+		fontSize: 14,
+	},
+	[`& .${tooltipClasses.arrow}:before`]: {
+		color: theme.palette.common.white,
+		boxShadow: theme.shadows[1],
+	},
+}));
diff --git a/src/frontend/src/components/TooltipComponent/index.tsx b/src/frontend/src/components/TooltipComponent/index.tsx
index 65c8d0e5f..f0a4eb8e6 100644
--- a/src/frontend/src/components/TooltipComponent/index.tsx
+++ b/src/frontend/src/components/TooltipComponent/index.tsx
@@ -2,6 +2,14 @@ import { ReactElement } from "react";
 import { LightTooltip } from "../LightTooltipComponent";
 import { TooltipComponentType } from "../../types/components";
 
-export default function Tooltip({ children, title,placement }:TooltipComponentType) {
-  return <LightTooltip  placement={placement} title={title} arrow>{children}</LightTooltip>;
+export default function Tooltip({
+	children,
+	title,
+	placement,
+}: TooltipComponentType) {
+	return (
+		<LightTooltip placement={placement} title={title} arrow>
+			{children}
+		</LightTooltip>
+	);
 }
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index aa2a0d080..d155ed8ab 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -1,9 +1,13 @@
-import { ChatBubbleLeftEllipsisIcon, ChatBubbleOvalLeftEllipsisIcon, PlusSmallIcon } from "@heroicons/react/24/outline";
+import {
+	ChatBubbleLeftEllipsisIcon,
+	ChatBubbleOvalLeftEllipsisIcon,
+	PlusSmallIcon,
+} from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
-var Convert = require('ansi-to-html');
-var convert = new Convert({newline:true});
+var Convert = require("ansi-to-html");
+var convert = new Convert({ newline: true });
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 	const [hidden, setHidden] = useState(true);
@@ -29,13 +33,16 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 								style={{ backgroundColor: nodeColors["thought"] }}
 								className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
 								dangerouslySetInnerHTML={{
-									__html: convert.toHtml(chat.thought)
+									__html: convert.toHtml(chat.thought),
 								}}
 							></div>
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
-						<div  className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8" style={{ backgroundColor: nodeColors["chat"] }}>
-						{chat.message}
+						<div
+							className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
+							style={{ backgroundColor: nodeColors["chat"] }}
+						>
+							{chat.message}
 						</div>
 					</div>
 				</div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 61c1b4a3e..2759b13a5 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -1,37 +1,45 @@
 import { Transition } from "@headlessui/react";
-import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import {
+	Bars3CenterLeftIcon,
+	ChatBubbleBottomCenterTextIcon,
+} from "@heroicons/react/24/outline";
 import { nodeColors } from "../../../utils";
 import { PopUpContext } from "../../../contexts/popUpContext";
 import { useContext } from "react";
 import ChatModal from "../../../modals/chatModal";
 
-export default function ChatTrigger({open, setOpen}){
-    const {openPopUp} = useContext(PopUpContext)
-    return(<Transition
-        show={!open}
-        appear={true}
-        enter="transition ease-out duration-300"
-        enterFrom="translate-y-96"
-        enterTo="translate-y-0"
-        leave="transition ease-in duration-300"
-        leaveFrom="translate-y-0"
-        leaveTo="translate-y-96"
-    >
-        <div className="absolute bottom-2 right-3">
-            <div style={{backgroundColor:nodeColors['chat']}} className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full dark:bg-gray-800 dark:border-gray-600 dark:text-white">
-                <button
-                    onClick={() => {
-                        setOpen(true);
-                    }}
-                >
-                    <div className="flex gap-3  items-center">
-                        <ChatBubbleBottomCenterTextIcon
-                            className="h-6 w-6 mt-1"
-                            style={{ color: "white" }}
-                        />
-                    </div>
-                </button>
-            </div>
-        </div>
-    </Transition>)
-}
\ No newline at end of file
+export default function ChatTrigger({ open, setOpen }) {
+	const { openPopUp } = useContext(PopUpContext);
+	return (
+		<Transition
+			show={!open}
+			appear={true}
+			enter="transition ease-out duration-300"
+			enterFrom="translate-y-96"
+			enterTo="translate-y-0"
+			leave="transition ease-in duration-300"
+			leaveFrom="translate-y-0"
+			leaveTo="translate-y-96"
+		>
+			<div className="absolute bottom-2 right-3">
+				<div
+					style={{ backgroundColor: nodeColors["chat"] }}
+					className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
+				>
+					<button
+						onClick={() => {
+							setOpen(true);
+						}}
+					>
+						<div className="flex gap-3  items-center">
+							<ChatBubbleBottomCenterTextIcon
+								className="h-6 w-6 mt-1"
+								style={{ color: "white" }}
+							/>
+						</div>
+					</button>
+				</div>
+			</div>
+		</Transition>
+	);
+}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index c2dfa2260..940a9341b 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -7,26 +7,26 @@ import ChatModal from "../../modals/chatModal";
 const _ = require("lodash");
 
 export default function Chat({ flow }: ChatType) {
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.key === "K" || event.key === "k") &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault();
-        setOpen((oldState) => !oldState);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-  return (
-    <>
-      <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-      <ChatTrigger open={open} setOpen={setOpen} />
-    </>
-  );
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				(event.key === "K" || event.key === "k") &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				setOpen((oldState) => !oldState);
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, []);
+	return (
+		<>
+			<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
+			<ChatTrigger open={open} setOpen={setOpen} />
+		</>
+	);
 }
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index bb4cd621c..92085d8b8 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -5,90 +5,90 @@ import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
 export default function Dropdown({
-  value,
-  options,
-  onSelect,
+	value,
+	options,
+	onSelect,
 }: DropDownComponentType) {
-  let [internalValue, setInternalValue] = useState(
-    value === "" || !value ? "Choose an option" : value
-  );
-  return (
-    <>
-      <Listbox
-        value={internalValue}
-        onChange={(value) => {
-          setInternalValue(value);
-          onSelect(value);
-        }}
-      >
-        {({ open }) => (
-          <>
-            <div className="relative mt-1">
-              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
-                <span className="block w-max truncate">{internalValue}</span>
-                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                  <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
-                </span>
-              </Listbox.Button>
+	let [internalValue, setInternalValue] = useState(
+		value === "" || !value ? "Choose an option" : value
+	);
+	return (
+		<>
+			<Listbox
+				value={internalValue}
+				onChange={(value) => {
+					setInternalValue(value);
+					onSelect(value);
+				}}
+			>
+				{({ open }) => (
+					<>
+						<div className="relative mt-1">
+							<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+								<span className="block w-max truncate">{internalValue}</span>
+								<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+									<ChevronUpDownIcon
+										className="h-5 w-5 text-gray-400"
+										aria-hidden="true"
+									/>
+								</span>
+							</Listbox.Button>
 
-              <Transition
-                show={open}
-                as={Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                  {options.map((option, id) => (
-                    <Listbox.Option
-                      key={id}
-                      className={({ active }) =>
-                        classNames(
-                          active
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500"
-                            : "text-gray-900",
-                          "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
-                        )
-                      }
-                      value={option}
-                    >
-                      {({ selected, active }) => (
-                        <>
-                          <span
-                            className={classNames(
-                              selected ? "font-semibold" : "font-normal",
-                              "block truncate"
-                            )}
-                          >
-                            {option}
-                          </span>
+							<Transition
+								show={open}
+								as={Fragment}
+								leave="transition ease-in duration-100"
+								leaveFrom="opacity-100"
+								leaveTo="opacity-0"
+							>
+								<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+									{options.map((option, id) => (
+										<Listbox.Option
+											key={id}
+											className={({ active }) =>
+												classNames(
+													active
+														? "text-white bg-indigo-600 dark:bg-indigo-500"
+														: "text-gray-900",
+													"relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+												)
+											}
+											value={option}
+										>
+											{({ selected, active }) => (
+												<>
+													<span
+														className={classNames(
+															selected ? "font-semibold" : "font-normal",
+															"block truncate"
+														)}
+													>
+														{option}
+													</span>
 
-                          {selected ? (
-                            <span
-                              className={classNames(
-                                active ? "text-white" : "text-indigo-600",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
-                              )}
-                            >
-                              <CheckIcon
-                                className="h-5 w-5"
-                                aria-hidden="true"
-                              />
-                            </span>
-                          ) : null}
-                        </>
-                      )}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-    </>
-  );
+													{selected ? (
+														<span
+															className={classNames(
+																active ? "text-white" : "text-indigo-600",
+																"absolute inset-y-0 right-0 flex items-center pr-4"
+															)}
+														>
+															<CheckIcon
+																className="h-5 w-5"
+																aria-hidden="true"
+															/>
+														</span>
+													) : null}
+												</>
+											)}
+										</Listbox.Option>
+									))}
+								</Listbox.Options>
+							</Transition>
+						</div>
+					</>
+				)}
+			</Listbox>
+		</>
+	);
 }
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index adce64ba5..3a09527da 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -1,26 +1,33 @@
 import { useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 
-export default function FloatComponent({value, onChange, disabled}: FloatComponentType){
-    const [myValue, setMyValue] = useState(value ?? "");
-    useEffect(()=> {
-        if(disabled){
-            setMyValue("");
-            onChange("");
-        }
-    }, [disabled, onChange])
-    return (
-        <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-            <input
-            type="number"
-            value={myValue}
-            className={"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-gray-700" : "")}
-            placeholder="Type a number from zero to one"
-            onChange={(e) => {
-                setMyValue(e.target.value);
-                onChange(e.target.value);
-            }}
-            />
-        </div>
-    );
-}
\ No newline at end of file
+export default function FloatComponent({
+	value,
+	onChange,
+	disabled,
+}: FloatComponentType) {
+	const [myValue, setMyValue] = useState(value ?? "");
+	useEffect(() => {
+		if (disabled) {
+			setMyValue("");
+			onChange("");
+		}
+	}, [disabled, onChange]);
+	return (
+		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+			<input
+				type="number"
+				value={myValue}
+				className={
+					"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+					(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+				}
+				placeholder="Type a number from zero to one"
+				onChange={(e) => {
+					setMyValue(e.target.value);
+					onChange(e.target.value);
+				}}
+			/>
+		</div>
+	);
+}
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index f28d82307..05be68532 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -3,84 +3,84 @@ import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
 export default function InputComponent({
-  value,
-  onChange,
-  disabled,
-  password,
+	value,
+	onChange,
+	disabled,
+	password,
 }: InputComponentType) {
-  const [myValue, setMyValue] = useState(value ?? "");
-  const [pwdVisible, setPwdVisible] = useState(false);
-  useEffect(() => {
-    if (disabled) {
-      setMyValue("");
-      onChange("");
-    }
-  }, [disabled, onChange]);
-  return (
-    <div
-      className={
-        disabled
-          ? "relative pointer-events-none cursor-not-allowed"
-          : "relative"
-      }
-    >
-      <input
-        value={myValue}
-        className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
-          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
-          password && !pwdVisible && myValue!=="" ? "password" : ""
-        )}
-        placeholder="Type a text"
-        onChange={(e) => {
-          setMyValue(e.target.value);
-          onChange(e.target.value);
-        }}
-      />
-      <button
-        className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
-        onClick={() => {
-          setPwdVisible(!pwdVisible);
-        }}
-      >
-        {password &&
-          (pwdVisible ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-5 h-5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-              />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-5 h-5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-            </svg>
-          ))}
-      </button>
-    </div>
-  );
+	const [myValue, setMyValue] = useState(value ?? "");
+	const [pwdVisible, setPwdVisible] = useState(false);
+	useEffect(() => {
+		if (disabled) {
+			setMyValue("");
+			onChange("");
+		}
+	}, [disabled, onChange]);
+	return (
+		<div
+			className={
+				disabled
+					? "relative pointer-events-none cursor-not-allowed"
+					: "relative"
+			}
+		>
+			<input
+				value={myValue}
+				className={classNames(
+					"block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+					disabled ? " bg-gray-200 dark:bg-gray-700" : "",
+					password && !pwdVisible && myValue !== "" ? "password" : ""
+				)}
+				placeholder="Type a text"
+				onChange={(e) => {
+					setMyValue(e.target.value);
+					onChange(e.target.value);
+				}}
+			/>
+			<button
+				className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+				onClick={() => {
+					setPwdVisible(!pwdVisible);
+				}}
+			>
+				{password &&
+					(pwdVisible ? (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							strokeWidth={1.5}
+							stroke="currentColor"
+							className="w-5 h-5"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+							/>
+						</svg>
+					) : (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							strokeWidth={1.5}
+							stroke="currentColor"
+							className="w-5 h-5"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+							/>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+					))}
+			</button>
+		</div>
+	);
 }
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index cb915bce5..d20044571 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -9,7 +9,7 @@ export default function InputFileComponent({
 	disabled,
 	suffixes,
 	fileTypes,
-	onFileChange
+	onFileChange,
 }: FileComponentType) {
 	const [myValue, setMyValue] = useState(value);
 	const { setErrorData } = useContext(alertContext);
@@ -17,23 +17,23 @@ export default function InputFileComponent({
 		if (disabled) {
 			setMyValue("");
 			onChange("");
-			onFileChange("")
+			onFileChange("");
 		}
 	}, [disabled, onChange]);
 
 	function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
 		fileReadEvent.preventDefault();
 		const file = fileReadEvent.target.result;
-		onFileChange(file as string)
+		onFileChange(file as string);
 	}
 
-	function checkFileType(fileName:string):boolean{
+	function checkFileType(fileName: string): boolean {
 		for (let index = 0; index < suffixes.length; index++) {
-			if(fileName.endsWith(suffixes[index])){
-				return true
+			if (fileName.endsWith(suffixes[index])) {
+				return true;
 			}
 		}
-		return false
+		return false;
 	}
 
 	const handleButtonClick = () => {
@@ -69,7 +69,7 @@ export default function InputFileComponent({
 		>
 			<div className="w-full flex items-center gap-3">
 				<span
-				onClick={handleButtonClick}
+					onClick={handleButtonClick}
 					className={
 						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
 						(disabled ? " bg-gray-200" : "")
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index ae583b1f6..5381074a2 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -4,51 +4,73 @@ import { InputListComponentType } from "../../types/components";
 
 var _ = require("lodash");
 
-export default function InputListComponent({ value, onChange, disabled}:InputListComponentType) {
-  const [inputList, setInputList] = useState(value ?? [""]);
-  useEffect(()=> {
-    if(disabled){
-        setInputList([""]);
-        onChange([""]);
-    }
-}, [disabled, onChange])
-  return (
-    <div className={(disabled ? "pointer-events-none cursor-not-allowed" : "") + "flex flex-col gap-3"}>
-      {inputList.map((i, idx) => (
-        <div key={idx} className="w-full flex gap-3">
-          <input
-            type="text"
-            value={i}
-            className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
-            placeholder="Type a text"
-            onChange={(e) => {
-              setInputList((old) => {
-                let newInputList = _.cloneDeep(old);
-                newInputList[idx] = e.target.value;
-                return newInputList;
-              });
-              onChange(inputList);
-            }}
-          />
-          {idx === inputList.length - 1 ? 
-          <button onClick={() => {setInputList((old) => {
-            let newInputList = _.cloneDeep(old);
-            newInputList.push('');
-            return newInputList;
-          });
-          onChange(inputList);}}>
-            <PlusIcon className="w-4 h-4 hover:text-blue-600" />
-          </button> 
-          : <button onClick={() => {setInputList((old) => {
-            let newInputList = _.cloneDeep(old);
-            newInputList.splice(idx, 1);
-            return newInputList;
-          });
-          onChange(inputList);}}>
-            <XMarkIcon className="w-4 h-4 hover:text-red-600" />
-            </button>}
-        </div>
-      ))}
-    </div>
-  );
+export default function InputListComponent({
+	value,
+	onChange,
+	disabled,
+}: InputListComponentType) {
+	const [inputList, setInputList] = useState(value ?? [""]);
+	useEffect(() => {
+		if (disabled) {
+			setInputList([""]);
+			onChange([""]);
+		}
+	}, [disabled, onChange]);
+	return (
+		<div
+			className={
+				(disabled ? "pointer-events-none cursor-not-allowed" : "") +
+				"flex flex-col gap-3"
+			}
+		>
+			{inputList.map((i, idx) => (
+				<div key={idx} className="w-full flex gap-3">
+					<input
+						type="text"
+						value={i}
+						className={
+							"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+							(disabled ? " bg-gray-200" : "")
+						}
+						placeholder="Type a text"
+						onChange={(e) => {
+							setInputList((old) => {
+								let newInputList = _.cloneDeep(old);
+								newInputList[idx] = e.target.value;
+								return newInputList;
+							});
+							onChange(inputList);
+						}}
+					/>
+					{idx === inputList.length - 1 ? (
+						<button
+							onClick={() => {
+								setInputList((old) => {
+									let newInputList = _.cloneDeep(old);
+									newInputList.push("");
+									return newInputList;
+								});
+								onChange(inputList);
+							}}
+						>
+							<PlusIcon className="w-4 h-4 hover:text-blue-600" />
+						</button>
+					) : (
+						<button
+							onClick={() => {
+								setInputList((old) => {
+									let newInputList = _.cloneDeep(old);
+									newInputList.splice(idx, 1);
+									return newInputList;
+								});
+								onChange(inputList);
+							}}
+						>
+							<XMarkIcon className="w-4 h-4 hover:text-red-600" />
+						</button>
+					)}
+				</div>
+			))}
+		</div>
+	);
 }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 520a78c0d..cc435c897 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -14,12 +14,23 @@ export default function IntComponent({
 		}
 	}, [disabled, onChange]);
 	return (
-		<div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"}>
+		<div
+			className={
+				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+			}
+		>
 			<input
 				onKeyDown={(event) => {
-                    if (event.key !== 'Backspace' && event.key !== 'Enter' && event.key !== 'Delete' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && !/^[-]?\d*$/.test(event.key)) {
-                        event.preventDefault();
-                    }
+					if (
+						event.key !== "Backspace" &&
+						event.key !== "Enter" &&
+						event.key !== "Delete" &&
+						event.key !== "ArrowLeft" &&
+						event.key !== "ArrowRight" &&
+						!/^[-]?\d*$/.test(event.key)
+					) {
+						event.preventDefault();
+					}
 				}}
 				type="number"
 				value={myValue}
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 6181fd7cc..43d6d9d75 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -1,17 +1,28 @@
-type LoadingComponentProps={
-    remSize:number
+type LoadingComponentProps = {
+	remSize: number;
+};
+
+export default function LoadingComponent({ remSize }: LoadingComponentProps) {
+	return (
+		<div role="status" className="w-min m-auto">
+			<svg
+				aria-hidden="true"
+				className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+				viewBox="0 0 100 101"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+					fill="currentFill"
+				/>
+			</svg>
+			<br></br>
+			<span className="animate-pulse text-blue-600 text-lg">Loading...</span>
+		</div>
+	);
 }
-
-
-export default function LoadingComponent({remSize}:LoadingComponentProps){
-    return(
-        <div role="status" className="w-min m-auto">
-            <svg aria-hidden="true" className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-            </svg>
-            <br></br>
-            <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 153de4ffa..93b0ddb62 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -4,30 +4,57 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
-export default function TextAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
-  const [myValue, setMyValue] = useState(value);
-  const { openPopUp } = useContext(PopUpContext);
-  useEffect(() => {
-    if (disabled) {
-      setMyValue("");
-      onChange("");
-    }
-  }, [disabled, onChange]);
-  return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-      <div className="w-full flex items-center gap-3">
-        <span onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}
-          className={
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-            (disabled ? " bg-gray-200" : "")
-          }
-        >
-            {myValue !== "" ? myValue : 'Text empty'}
-        </span>
-        <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
-        </button>
-      </div>
-    </div>
-  );
+export default function TextAreaComponent({
+	value,
+	onChange,
+	disabled,
+}: TextAreaComponentType) {
+	const [myValue, setMyValue] = useState(value);
+	const { openPopUp } = useContext(PopUpContext);
+	useEffect(() => {
+		if (disabled) {
+			setMyValue("");
+			onChange("");
+		}
+	}, [disabled, onChange]);
+	return (
+		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+			<div className="w-full flex items-center gap-3">
+				<span
+					onClick={() => {
+						openPopUp(
+							<TextAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
+					className={
+						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+						(disabled ? " bg-gray-200" : "")
+					}
+				>
+					{myValue !== "" ? myValue : "Text empty"}
+				</span>
+				<button
+					onClick={() => {
+						openPopUp(
+							<TextAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
+				>
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+				</button>
+			</div>
+		</div>
+	);
 }
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 4cd6ee615..102512ab3 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -3,73 +3,80 @@ import { classNames } from "../../utils";
 import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
 
-export default function ToggleComponent({ enabled, setEnabled, disabled }:ToggleComponentType) {
-  useEffect(()=> {
-    if(disabled){
-        setEnabled(false);
-    }
-}, [disabled, setEnabled])
-  return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-      <Switch
-        checked={enabled}
-        onChange={(x:boolean) => {
-          setEnabled(x);
-        }}
-        className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
-        )}
-      >
-        <span className="sr-only">Use setting</span>
-        <span
-          className={classNames(
-            enabled ? "translate-x-5" : "translate-x-0",
-            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-gray-600" : "bg-white dark:bg-gray-800"
-          )}
-        >
-          <span
-            className={classNames(
-              enabled
-                ? "opacity-0 ease-out duration-100"
-                : "opacity-100 ease-in duration-200",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
-            )}
-            aria-hidden="true"
-          >
-            <svg
-              className="h-3 w-3 text-gray-400"
-              fill="none"
-              viewBox="0 0 12 12"
-            >
-              <path
-                d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                stroke="currentColor"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </span>
-          <span
-            className={classNames(
-              enabled
-                ? "opacity-100 ease-in duration-200"
-                : "opacity-0 ease-out duration-100",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
-            )}
-            aria-hidden="true"
-          >
-            <svg
-              className="h-3 w-3 text-indigo-600"
-              fill="currentColor"
-              viewBox="0 0 12 12"
-            >
-              <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
-            </svg>
-          </span>
-        </span>
-      </Switch>
-    </div>
-  );
+export default function ToggleComponent({
+	enabled,
+	setEnabled,
+	disabled,
+}: ToggleComponentType) {
+	useEffect(() => {
+		if (disabled) {
+			setEnabled(false);
+		}
+	}, [disabled, setEnabled]);
+	return (
+		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+			<Switch
+				checked={enabled}
+				onChange={(x: boolean) => {
+					setEnabled(x);
+				}}
+				className={classNames(
+					enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
+					"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+				)}
+			>
+				<span className="sr-only">Use setting</span>
+				<span
+					className={classNames(
+						enabled ? "translate-x-5" : "translate-x-0",
+						"pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
+						disabled
+							? "bg-gray-200 dark:bg-gray-600"
+							: "bg-white dark:bg-gray-800"
+					)}
+				>
+					<span
+						className={classNames(
+							enabled
+								? "opacity-0 ease-out duration-100"
+								: "opacity-100 ease-in duration-200",
+							"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+						)}
+						aria-hidden="true"
+					>
+						<svg
+							className="h-3 w-3 text-gray-400"
+							fill="none"
+							viewBox="0 0 12 12"
+						>
+							<path
+								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+								stroke="currentColor"
+								strokeWidth={2}
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							/>
+						</svg>
+					</span>
+					<span
+						className={classNames(
+							enabled
+								? "opacity-100 ease-in duration-200"
+								: "opacity-0 ease-out duration-100",
+							"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+						)}
+						aria-hidden="true"
+					>
+						<svg
+							className="h-3 w-3 text-indigo-600"
+							fill="currentColor"
+							viewBox="0 0 12 12"
+						>
+							<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
+						</svg>
+					</span>
+				</span>
+			</Switch>
+		</div>
+	);
 }
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index 0fba6f65e..ad2110217 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -20,13 +20,13 @@ type alertContextType = {
 	notificationCenter: boolean;
 	setNotificationCenter: (newState: boolean) => void;
 	notificationList: Array<AlertItemType>;
-	pushNotificationList: (Object:AlertItemType) => void;
+	pushNotificationList: (Object: AlertItemType) => void;
 	clearNotificationList: () => void;
 	removeFromNotificationList: (index: string) => void;
 };
 
 //initial values to alertContextType
-const initialValue:alertContextType = {
+const initialValue: alertContextType = {
 	errorData: { title: "", list: [] },
 	setErrorData: () => {},
 	errorOpen: false,
@@ -49,7 +49,7 @@ const initialValue:alertContextType = {
 
 export const alertContext = createContext<alertContextType>(initialValue);
 
-export function AlertProvider({ children }:{children:ReactNode}) {
+export function AlertProvider({ children }: { children: ReactNode }) {
 	const [errorData, setErrorDataState] = useState<{
 		title: string;
 		list?: Array<string>;
@@ -73,68 +73,69 @@ export function AlertProvider({ children }:{children:ReactNode}) {
 			return newNotificationList;
 		});
 	};
-/**
- * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
- * @param newState An object containing the new error data, including title and optional list of error messages
- */
-function setErrorData(newState: { title: string; list?: Array<string> }) {
-	setErrorDataState(newState);
-	setErrorOpen(true);
-	if (newState.title) {
-		setNotificationCenter(true);
-		pushNotificationList({
-			type: "error",
-			title: newState.title,
-			list: newState.list,
-			id: _.uniqueId(),
-		});
+	/**
+	 * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
+	 * @param newState An object containing the new error data, including title and optional list of error messages
+	 */
+	function setErrorData(newState: { title: string; list?: Array<string> }) {
+		setErrorDataState(newState);
+		setErrorOpen(true);
+		if (newState.title) {
+			setNotificationCenter(true);
+			pushNotificationList({
+				type: "error",
+				title: newState.title,
+				list: newState.list,
+				id: _.uniqueId(),
+			});
+		}
 	}
-}
-/**
- * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
- * @param newState An object containing the title of the notice and optionally a link.
- */
-function setNoticeData(newState: { title: string; link?: string }) {
-	setNoticeDataState(newState);
-	setNoticeOpen(true);
-	if (newState.title) {
-		// Add new notice to notification center
-		setNotificationCenter(true);
-		pushNotificationList({
-			type: "notice",
-			title: newState.title,
-			link: newState.link,
-			id: _.uniqueId(),
-		});
+	/**
+	 * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
+	 * @param newState An object containing the title of the notice and optionally a link.
+	 */
+	function setNoticeData(newState: { title: string; link?: string }) {
+		setNoticeDataState(newState);
+		setNoticeOpen(true);
+		if (newState.title) {
+			// Add new notice to notification center
+			setNotificationCenter(true);
+			pushNotificationList({
+				type: "notice",
+				title: newState.title,
+				link: newState.link,
+				id: _.uniqueId(),
+			});
+		}
 	}
-}
-/**
- * Update the success data state and show a success alert notification.
- * @param newState - A state object with a "title" property to set in the success data state.
- */
-function setSuccessData(newState: { title: string }) {
-	setSuccessDataState(newState); // update the success data state with the provided new state
-	setSuccessOpen(true); // open the success alert
+	/**
+	 * Update the success data state and show a success alert notification.
+	 * @param newState - A state object with a "title" property to set in the success data state.
+	 */
+	function setSuccessData(newState: { title: string }) {
+		setSuccessDataState(newState); // update the success data state with the provided new state
+		setSuccessOpen(true); // open the success alert
 
-	// If the new state has a "title" property, add a new success notification to the list
-	if (newState.title) {
-		setNotificationCenter(true); // show the notification center
-		pushNotificationList({ // add the new notification to the list
-			type: "success",
-			title: newState.title,
-			id: _.uniqueId(),
-		});
+		// If the new state has a "title" property, add a new success notification to the list
+		if (newState.title) {
+			setNotificationCenter(true); // show the notification center
+			pushNotificationList({
+				// add the new notification to the list
+				type: "success",
+				title: newState.title,
+				id: _.uniqueId(),
+			});
+		}
 	}
-}
 	function clearNotificationList() {
 		setNotificationList([]);
 	}
 	function removeFromNotificationList(index: string) {
 		// set the notification list to a new array that filters out the alert with the matching id
 		setNotificationList((prevAlertsList) =>
-		  prevAlertsList.filter((alert) => alert.id !== index)
+			prevAlertsList.filter((alert) => alert.id !== index)
 		);
-	  }
+	}
 	return (
 		<alertContext.Provider
 			value={{
diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx
index fcdb73cc4..c383fb1e3 100644
--- a/src/frontend/src/contexts/darkContext.tsx
+++ b/src/frontend/src/contexts/darkContext.tsx
@@ -14,13 +14,13 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
 	const [dark, setDark] = useState(false);
-	useEffect(()=>{
-		if(dark){
+	useEffect(() => {
+		if (dark) {
 			document.getElementById("body").classList.add("dark");
 		} else {
 			document.getElementById("body").classList.remove("dark");
 		}
-	}, [dark])
+	}, [dark]);
 	return (
 		<darkContext.Provider
 			value={{
@@ -31,4 +31,4 @@ export function DarkProvider({ children }) {
 			{children}
 		</darkContext.Provider>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx
index dbefaa7c9..a73db24fe 100644
--- a/src/frontend/src/contexts/locationContext.tsx
+++ b/src/frontend/src/contexts/locationContext.tsx
@@ -32,7 +32,7 @@ type locationContextType = {
 
 //initial value for location context
 const initialValue = {
-    //actual
+	//actual
 	current: window.location.pathname.replace(/\/$/g, "").split("/"),
 	isStackedOpen:
 		window.innerWidth > 1024 && window.location.pathname.split("/")[1]
@@ -50,7 +50,7 @@ const initialValue = {
 
 export const locationContext = createContext<locationContextType>(initialValue);
 
-export function LocationProvider({ children }:{children:ReactNode}) {
+export function LocationProvider({ children }: { children: ReactNode }) {
 	const [current, setCurrent] = useState(initialValue.current);
 	const [isStackedOpen, setIsStackedOpen] = useState(
 		initialValue.isStackedOpen
diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx
index efa263146..b8c47dea2 100644
--- a/src/frontend/src/contexts/popUpContext.tsx
+++ b/src/frontend/src/contexts/popUpContext.tsx
@@ -3,31 +3,31 @@ import React, { useState } from "react";
 
 // context to set JSX element on the DOM
 export const PopUpContext = createContext({
-  openPopUp: (popUpElement: JSX.Element) => {},
-  closePopUp: () => {},
+	openPopUp: (popUpElement: JSX.Element) => {},
+	closePopUp: () => {},
 });
 
 interface PopUpProviderProps {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 const PopUpProvider = ({ children }: PopUpProviderProps) => {
-  const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
+	const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
 
-  const openPopUp = (element: JSX.Element) => {
-    setPopUpElements(prevPopUps => [element, ...prevPopUps]);
-  };
+	const openPopUp = (element: JSX.Element) => {
+		setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
+	};
 
-  const closePopUp = () => {
-    setPopUpElements(prevPopUps => prevPopUps.slice(1));
-  };
+	const closePopUp = () => {
+		setPopUpElements((prevPopUps) => prevPopUps.slice(1));
+	};
 
-  return (
-    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
-      {children}
-      {popUpElements[0]}
-    </PopUpContext.Provider>
-  );
+	return (
+		<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+			{children}
+			{popUpElements[0]}
+		</PopUpContext.Provider>
+	);
 };
 
 export default PopUpProvider;
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 3384ab479..9905051b2 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -1,10 +1,10 @@
 import {
-  createContext,
-  useEffect,
-  useState,
-  useRef,
-  ReactNode,
-  useContext,
+	createContext,
+	useEffect,
+	useState,
+	useRef,
+	ReactNode,
+	useContext,
 } from "react";
 import { FlowType } from "../types/flow";
 import { LangFlowState, TabsContextType } from "../types/tabs";
@@ -15,221 +15,221 @@ import { APITemplateType, TemplateVariableType } from "../types/api";
 const { v4: uuidv4 } = require("uuid");
 
 const TabsContextInitialValue: TabsContextType = {
-  save: () => {},
-  tabIndex: 0,
-  setTabIndex: (index: number) => {},
-  flows: [],
-  removeFlow: (id: string) => {},
-  addFlow: (flowData?: any) => {},
-  updateFlow: (newFlow: FlowType) => {},
-  incrementNodeId: () => 0,
-  downloadFlow: (flow: FlowType) => {},
-  uploadFlow: () => {},
-  hardReset: () => {},
+	save: () => {},
+	tabIndex: 0,
+	setTabIndex: (index: number) => {},
+	flows: [],
+	removeFlow: (id: string) => {},
+	addFlow: (flowData?: any) => {},
+	updateFlow: (newFlow: FlowType) => {},
+	incrementNodeId: () => 0,
+	downloadFlow: (flow: FlowType) => {},
+	uploadFlow: () => {},
+	hardReset: () => {},
 };
 
 export const TabsContext = createContext<TabsContextType>(
-  TabsContextInitialValue
+	TabsContextInitialValue
 );
 
 export function TabsProvider({ children }: { children: ReactNode }) {
-  const { setNoticeData } = useContext(alertContext);
-  const [tabIndex, setTabIndex] = useState(0);
-  const [flows, setFlows] = useState<Array<FlowType>>([]);
-  const [id, setId] = useState("");
-  const { templates } = useContext(typesContext);
+	const { setNoticeData } = useContext(alertContext);
+	const [tabIndex, setTabIndex] = useState(0);
+	const [flows, setFlows] = useState<Array<FlowType>>([]);
+	const [id, setId] = useState("");
+	const { templates } = useContext(typesContext);
 
-  const newNodeId = useRef(0);
-  function incrementNodeId() {
-    newNodeId.current = newNodeId.current + 1;
-    return newNodeId.current;
-  }
-  function save() {
-    if (flows.length !== 0)
-      window.localStorage.setItem(
-        "tabsData",
-        JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
-      );
-  }
-  useEffect(() => {
-    //save tabs locally
-    save();
-  }, [flows, id, tabIndex, newNodeId]);
+	const newNodeId = useRef(0);
+	function incrementNodeId() {
+		newNodeId.current = newNodeId.current + 1;
+		return newNodeId.current;
+	}
+	function save() {
+		if (flows.length !== 0)
+			window.localStorage.setItem(
+				"tabsData",
+				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+			);
+	}
+	useEffect(() => {
+		//save tabs locally
+		save();
+	}, [flows, id, tabIndex, newNodeId]);
 
-  useEffect(() => {
-    //get tabs locally saved
-    let cookie = window.localStorage.getItem("tabsData");
-    if (cookie && Object.keys(templates).length > 0) {
-      let cookieObject: LangFlowState = JSON.parse(cookie);
-      cookieObject.flows.forEach((flow) => {
-        flow.data.nodes.forEach((node) => {
-          if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-            node.data.node.template = updateTemplate(
-              templates[node.data.type][
-                "template"
-              ] as unknown as APITemplateType,
+	useEffect(() => {
+		//get tabs locally saved
+		let cookie = window.localStorage.getItem("tabsData");
+		if (cookie && Object.keys(templates).length > 0) {
+			let cookieObject: LangFlowState = JSON.parse(cookie);
+			cookieObject.flows.forEach((flow) => {
+				flow.data.nodes.forEach((node) => {
+					if (Object.keys(templates[node.data.type]["template"]).length > 0) {
+						node.data.node.template = updateTemplate(
+							templates[node.data.type][
+								"template"
+							] as unknown as APITemplateType,
 
-              node.data.node.template as APITemplateType
-            );
-          }
-        });
-      });
-      setTabIndex(cookieObject.tabIndex);
-      setFlows(cookieObject.flows);
-      setId(cookieObject.id);
-      newNodeId.current = cookieObject.nodeId;
-    }
-  }, [templates]);
-  function hardReset() {
-    newNodeId.current = 0;
-    setTabIndex(0);
-    setFlows([]);
-    setId("");
-  }
+							node.data.node.template as APITemplateType
+						);
+					}
+				});
+			});
+			setTabIndex(cookieObject.tabIndex);
+			setFlows(cookieObject.flows);
+			setId(cookieObject.id);
+			newNodeId.current = cookieObject.nodeId;
+		}
+	}, [templates]);
+	function hardReset() {
+		newNodeId.current = 0;
+		setTabIndex(0);
+		setFlows([]);
+		setId("");
+	}
 
-  /**
-   * Downloads the current flow as a JSON file
-   */
-  function downloadFlow(flow: FlowType) {
-    // create a data URI with the current flow data
-    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flow)
-    )}`;
+	/**
+	 * Downloads the current flow as a JSON file
+	 */
+	function downloadFlow(flow: FlowType) {
+		// create a data URI with the current flow data
+		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+			JSON.stringify(flow)
+		)}`;
 
-    // create a link element and set its properties
-    const link = document.createElement("a");
-    link.href = jsonString;
-    link.download = `${flows[tabIndex].name}.json`;
+		// create a link element and set its properties
+		const link = document.createElement("a");
+		link.href = jsonString;
+		link.download = `${flows[tabIndex].name}.json`;
 
-    // simulate a click on the link element to trigger the download
-    link.click();
-    setNoticeData({
-      title: "Warning: Critical data,JSON file may including API keys.",
-    });
-  }
+		// simulate a click on the link element to trigger the download
+		link.click();
+		setNoticeData({
+			title: "Warning: Critical data,JSON file may including API keys.",
+		});
+	}
 
-  /**
-   * Creates a file input and listens to a change event to upload a JSON flow file.
-   * If the file type is application/json, the file is read and parsed into a JSON object.
-   * The resulting JSON object is passed to the addFlow function.
-   */
-  function uploadFlow() {
-    // create a file input
-    const input = document.createElement("input");
-    input.type = "file";
-    // add a change event listener to the file input
-    input.onchange = (e: Event) => {
-      // check if the file type is application/json
-      if ((e.target as HTMLInputElement).files[0].type === "application/json") {
-        // get the file from the file input
-        const file = (e.target as HTMLInputElement).files[0];
-        // read the file as text
-        file.text().then((text) => {
-          // parse the text into a JSON object
-          let flow: FlowType = JSON.parse(text);
+	/**
+	 * Creates a file input and listens to a change event to upload a JSON flow file.
+	 * If the file type is application/json, the file is read and parsed into a JSON object.
+	 * The resulting JSON object is passed to the addFlow function.
+	 */
+	function uploadFlow() {
+		// create a file input
+		const input = document.createElement("input");
+		input.type = "file";
+		// add a change event listener to the file input
+		input.onchange = (e: Event) => {
+			// check if the file type is application/json
+			if ((e.target as HTMLInputElement).files[0].type === "application/json") {
+				// get the file from the file input
+				const file = (e.target as HTMLInputElement).files[0];
+				// read the file as text
+				file.text().then((text) => {
+					// parse the text into a JSON object
+					let flow: FlowType = JSON.parse(text);
 
-          addFlow(flow);
-        });
-      }
-    };
-    // trigger the file input click event to open the file dialog
-    input.click();
-  }
-  /**
-   * Removes a flow from an array of flows based on its id.
-   * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
-   * @param {string} id - The id of the flow to remove.
-   */
-  function removeFlow(id: string) {
-    setFlows((prevState) => {
-      const newFlows = [...prevState];
-      const index = newFlows.findIndex((flow) => flow.id === id);
-      if (index >= 0) {
-        if (index === tabIndex) {
-          setTabIndex(flows.length - 2);
-          newFlows.splice(index, 1);
-        } else {
-          let flowId = flows[tabIndex].id;
-          newFlows.splice(index, 1);
-          setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
-        }
-      }
-      return newFlows;
-    });
-  }
-  /**
-   * Add a new flow to the list of flows.
-   * @param flow Optional flow to add.
-   */
-  function addFlow(flow?: FlowType) {
-    // Get data from the flow or set it to null if there's no flow provided.
-    const data = flow?.data ? flow.data : null;
-    const description = flow?.description ? flow.description : "";
+					addFlow(flow);
+				});
+			}
+		};
+		// trigger the file input click event to open the file dialog
+		input.click();
+	}
+	/**
+	 * Removes a flow from an array of flows based on its id.
+	 * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
+	 * @param {string} id - The id of the flow to remove.
+	 */
+	function removeFlow(id: string) {
+		setFlows((prevState) => {
+			const newFlows = [...prevState];
+			const index = newFlows.findIndex((flow) => flow.id === id);
+			if (index >= 0) {
+				if (index === tabIndex) {
+					setTabIndex(flows.length - 2);
+					newFlows.splice(index, 1);
+				} else {
+					let flowId = flows[tabIndex].id;
+					newFlows.splice(index, 1);
+					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
+				}
+			}
+			return newFlows;
+		});
+	}
+	/**
+	 * Add a new flow to the list of flows.
+	 * @param flow Optional flow to add.
+	 */
+	function addFlow(flow?: FlowType) {
+		// Get data from the flow or set it to null if there's no flow provided.
+		const data = flow?.data ? flow.data : null;
+		const description = flow?.description ? flow.description : "";
 
-    if (data) {
-      data.nodes.forEach((node) => {
-        if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-          node.data.node.template = updateTemplate(
-            templates[node.data.type]["template"] as unknown as APITemplateType,
-            node.data.node.template as APITemplateType
-          );
-        }
-      });
-    }
-    // Create a new flow with a default name if no flow is provided.
-    let newFlow: FlowType = {
-      description,
-      name: flow?.name ?? "New Flow",
-      id: id.toString(),
-      data,
-    };
+		if (data) {
+			data.nodes.forEach((node) => {
+				if (Object.keys(templates[node.data.type]["template"]).length > 0) {
+					node.data.node.template = updateTemplate(
+						templates[node.data.type]["template"] as unknown as APITemplateType,
+						node.data.node.template as APITemplateType
+					);
+				}
+			});
+		}
+		// Create a new flow with a default name if no flow is provided.
+		let newFlow: FlowType = {
+			description,
+			name: flow?.name ?? "New Flow",
+			id: id.toString(),
+			data,
+		};
 
-    // Increment the ID counter.
-    setId(uuidv4());
+		// Increment the ID counter.
+		setId(uuidv4());
 
-    // Add the new flow to the list of flows.
-    setFlows((prevState) => {
-      const newFlows = [...prevState, newFlow];
-      return newFlows;
-    });
+		// Add the new flow to the list of flows.
+		setFlows((prevState) => {
+			const newFlows = [...prevState, newFlow];
+			return newFlows;
+		});
 
-    // Set the tab index to the new flow.
-    setTabIndex(flows.length);
-  }
-  /**
-   * Updates an existing flow with new data
-   * @param newFlow - The new flow object containing the updated data
-   */
-  function updateFlow(newFlow: FlowType) {
-    setFlows((prevState) => {
-      const newFlows = [...prevState];
-      const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
-      if (index !== -1) {
-        newFlows[index].description = newFlow.description ?? "";
-        newFlows[index].data = newFlow.data;
-        newFlows[index].name = newFlow.name;
-      }
-      return newFlows;
-    });
-  }
+		// Set the tab index to the new flow.
+		setTabIndex(flows.length);
+	}
+	/**
+	 * Updates an existing flow with new data
+	 * @param newFlow - The new flow object containing the updated data
+	 */
+	function updateFlow(newFlow: FlowType) {
+		setFlows((prevState) => {
+			const newFlows = [...prevState];
+			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+			if (index !== -1) {
+				newFlows[index].description = newFlow.description ?? "";
+				newFlows[index].data = newFlow.data;
+				newFlows[index].name = newFlow.name;
+			}
+			return newFlows;
+		});
+	}
 
-  return (
-    <TabsContext.Provider
-      value={{
-        save,
-        hardReset,
-        tabIndex,
-        setTabIndex,
-        flows,
-        incrementNodeId,
-        removeFlow,
-        addFlow,
-        updateFlow,
-        downloadFlow,
-        uploadFlow,
-      }}
-    >
-      {children}
-    </TabsContext.Provider>
-  );
+	return (
+		<TabsContext.Provider
+			value={{
+				save,
+				hardReset,
+				tabIndex,
+				setTabIndex,
+				flows,
+				incrementNodeId,
+				removeFlow,
+				addFlow,
+				updateFlow,
+				downloadFlow,
+				uploadFlow,
+			}}
+		>
+			{children}
+		</TabsContext.Provider>
+	);
 }
diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index ad86d4699..2ab1eb057 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -1,12 +1,12 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
-import { Node} from "reactflow";
+import { Node } from "reactflow";
 import { typesContextType } from "../types/typesContext";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
 
 //context to share types adn functions from nodes to flow
 
-const initialValue:typesContextType = {
+const initialValue: typesContextType = {
 	reactFlowInstance: null,
 	setReactFlowInstance: () => {},
 	deleteNode: () => {},
@@ -14,13 +14,13 @@ const initialValue:typesContextType = {
 	setTypes: () => {},
 	templates: {},
 	setTemplates: () => {},
-	data:{},
-	setData:()=>{}
+	data: {},
+	setData: () => {},
 };
 
 export const typesContext = createContext<typesContextType>(initialValue);
 
-export function TypesProvider({ children }:{children:ReactNode}) {
+export function TypesProvider({ children }: { children: ReactNode }) {
 	const [types, setTypes] = useState({});
 	const [reactFlowInstance, setReactFlowInstance] = useState(null);
 	const [templates, setTemplates] = useState({});
@@ -35,11 +35,11 @@ export function TypesProvider({ children }:{children:ReactNode}) {
 			setData(result.data);
 			setTemplates(
 				Object.keys(result.data).reduce((acc, curr) => {
-					Object.keys(result.data[curr]).forEach((c: keyof APIKindType)=>{
-						acc[c] = result.data[curr][c]
-					})
+					Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
+						acc[c] = result.data[curr][c];
+					});
 					return acc;
-				},{})
+				}, {})
 			);
 			// Set the types by reducing over the keys of the result data and updating the accumulator.
 			setTypes(
@@ -59,11 +59,15 @@ export function TypesProvider({ children }:{children:ReactNode}) {
 		getTypes();
 	}, [setTypes]);
 
-	function deleteNode(idx:string) {
+	function deleteNode(idx: string) {
 		reactFlowInstance.setNodes(
-			reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
+			reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
+		);
+		reactFlowInstance.setEdges(
+			reactFlowInstance
+				.getEdges()
+				.filter((ns) => ns.source !== idx && ns.target !== idx)
 		);
-		reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== idx && ns.target !== idx));
 	}
 	return (
 		<typesContext.Provider
@@ -76,7 +80,7 @@ export function TypesProvider({ children }:{children:ReactNode}) {
 				setTemplates,
 				templates,
 				data,
-				setData
+				setData,
 			}}
 		>
 			{children}
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index f6f46404b..9a93a9b36 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -4,40 +4,40 @@ import axios, { AxiosResponse } from "axios";
 import { FlowType } from "../../types/flow";
 
 export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
-  return await axios.get(`/all`);
+	return await axios.get(`/all`);
 }
 
 export async function sendAll(data: sendAllProps) {
-  return await axios.post(`/predict`, data);
+	return await axios.post(`/predict`, data);
 }
 
 export async function checkCode(
-  code: string
+	code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
-  return await axios.post("/validate/code", { code });
+	return await axios.post("/validate/code", { code });
 }
 
 export async function checkPrompt(
-  template: string
+	template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
-  return await axios.post("/validate/prompt", { template });
+	return await axios.post("/validate/prompt", { template });
 }
 
 export async function getExamples(): Promise<FlowType[]> {
-  const url =
-    "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
-  const response = await axios.get(url);
+	const url =
+		"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
+	const response = await axios.get(url);
 
-  const jsonFiles = response.data.filter((file: any) => {
-    return file.name.endsWith(".json");
-  });
+	const jsonFiles = response.data.filter((file: any) => {
+		return file.name.endsWith(".json");
+	});
 
-  const contentsPromises = jsonFiles.map(async (file: any) => {
-    const contentResponse = await axios.get(file.download_url);
-    return contentResponse.data;
-  });
+	const contentsPromises = jsonFiles.map(async (file: any) => {
+		const contentResponse = await axios.get(file.download_url);
+		return contentResponse.data;
+	});
 
-  const contents = await Promise.all(contentsPromises);
+	const contents = await Promise.all(contentsPromises);
 
-  return contents;
+	return contents;
 }
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 67c0d3279..e0684378d 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1,15 +1,13 @@
-
-
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
\ No newline at end of file
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
+}
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index c71219a94..c98d24378 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -11,8 +11,7 @@ const root = ReactDOM.createRoot(
 root.render(
 	<ContextWrapper>
 		<BrowserRouter>
-
-				<App />
+			<App />
 		</BrowserRouter>
 	</ContextWrapper>
 );
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index aad549a83..68e1ed2d2 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -87,37 +87,38 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 										<div className="flex h-full w-full">
 											<div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
 												<div className="flex flex-col h-full gap-5">
-													{
-														Object.keys(data.node.template)
-															.filter((t) => t.charAt(0) !== "_"&& data.node.template[t].advanced && data.node.template[t].show)
-															.map((t: string, idx) => {
-																return (
-																	<ModalField
+													{Object.keys(data.node.template)
+														.filter(
+															(t) =>
+																t.charAt(0) !== "_" &&
+																data.node.template[t].advanced &&
+																data.node.template[t].show
+														)
+														.map((t: string, idx) => {
+															return (
+																<ModalField
 																	key={idx}
-																		data={data}
-																		title={
-																			data.node.template[t].display_name
-																				? data.node.template[t].display_name
-																				: data.node.template[t].name
-																				? toNormalCase(
-																						data.node.template[t].name
-																				  )
-																				: toNormalCase(t)
-																		}
-																		required={data.node.template[t].required}
-																		id={
-																			data.node.template[t].type +
-																			"|" +
-																			t +
-																			"|" +
-																			data.id
-																		}
-																		name={t}
-																		type={data.node.template[t].type}
-																	/>
-																);
-															})
-													}
+																	data={data}
+																	title={
+																		data.node.template[t].display_name
+																			? data.node.template[t].display_name
+																			: data.node.template[t].name
+																			? toNormalCase(data.node.template[t].name)
+																			: toNormalCase(t)
+																	}
+																	required={data.node.template[t].required}
+																	id={
+																		data.node.template[t].type +
+																		"|" +
+																		t +
+																		"|" +
+																		data.id
+																	}
+																	name={t}
+																	type={data.node.template[t].type}
+																/>
+															);
+														})}
 												</div>
 											</div>
 										</div>
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index a05ef1ef3..9e59709fd 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -24,9 +24,9 @@ export default function ChatInput({
 				}}
 				ref={inputRef}
 				disabled={lockChat}
-				style={{resize: "none" }}
+				style={{ resize: "none" }}
 				value={lockChat ? "Thinking..." : chatValue}
-				onChange={(e) => {							
+				onChange={(e) => {
 					setChatValue(e.target.value);
 				}}
 				className={classNames(
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
index 0c2c1ea73..d9a20579a 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -1,84 +1,81 @@
-import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
-import { FC, memo, useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { programmingLanguages } from '../../../../utils';
+import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
+import { FC, memo, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { programmingLanguages } from "../../../../utils";
 
 interface Props {
-  language: string;
-  value: string;
+	language: string;
+	value: string;
 }
 
 export const CodeBlock: FC<Props> = memo(({ language, value }) => {
-  const [isCopied, setIsCopied] = useState<Boolean>(false);
+	const [isCopied, setIsCopied] = useState<Boolean>(false);
 
-  const copyToClipboard = () => {
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      return;
-    }
+	const copyToClipboard = () => {
+		if (!navigator.clipboard || !navigator.clipboard.writeText) {
+			return;
+		}
 
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
+		navigator.clipboard.writeText(value).then(() => {
+			setIsCopied(true);
 
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    });
-  };
-  const downloadAsFile = () => {
-    const fileExtension = programmingLanguages[language] || '.file';
-    const suggestedFileName = `${"generated-code"}${fileExtension}`;
-    const fileName = window.prompt(
-      "enter file name",
-      suggestedFileName,
-    );
+			setTimeout(() => {
+				setIsCopied(false);
+			}, 2000);
+		});
+	};
+	const downloadAsFile = () => {
+		const fileExtension = programmingLanguages[language] || ".file";
+		const suggestedFileName = `${"generated-code"}${fileExtension}`;
+		const fileName = window.prompt("enter file name", suggestedFileName);
 
-    if (!fileName) {
-      // user pressed cancel on prompt
-      return;
-    }
+		if (!fileName) {
+			// user pressed cancel on prompt
+			return;
+		}
 
-    const blob = new Blob([value], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.download = fileName;
-    link.href = url;
-    link.style.display = 'none';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-  return (
-    <div className="codeblock relative font-sans text-[16px]">
-      <div className="flex items-center justify-between py-1.5 px-4">
-        <span className="text-xs lowercase text-white">{language}</span>
+		const blob = new Blob([value], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.download = fileName;
+		link.href = url;
+		link.style.display = "none";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
+	return (
+		<div className="codeblock relative font-sans text-[16px]">
+			<div className="flex items-center justify-between py-1.5 px-4">
+				<span className="text-xs lowercase text-white">{language}</span>
 
-        <div className="flex items-center">
-          <button
-            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
-            onClick={copyToClipboard}
-          >
-            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
-            {isCopied ? 'Copied!' : 'Copy code'}
-          </button>
-          <button
-            className="flex items-center rounded bg-none p-1 text-xs text-white"
-            onClick={downloadAsFile}
-          >
-            <IconDownload size={18} />
-          </button>
-        </div>
-      </div>
+				<div className="flex items-center">
+					<button
+						className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+						onClick={copyToClipboard}
+					>
+						{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
+						{isCopied ? "Copied!" : "Copy code"}
+					</button>
+					<button
+						className="flex items-center rounded bg-none p-1 text-xs text-white"
+						onClick={downloadAsFile}
+					>
+						<IconDownload size={18} />
+					</button>
+				</div>
+			</div>
 
-      <SyntaxHighlighter
-        language={language}
-        style={oneDark}
-        customStyle={{ margin: 0 }}
-      >
-        {value}
-      </SyntaxHighlighter>
-    </div>
-  );
+			<SyntaxHighlighter
+				language={language}
+				style={oneDark}
+				customStyle={{ margin: 0 }}
+			>
+				{value}
+			</SyntaxHighlighter>
+		</div>
+	);
 });
-CodeBlock.displayName = 'CodeBlock';
+CodeBlock.displayName = "CodeBlock";
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 41a9d2fc9..e836fd887 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -69,28 +69,35 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 										components={{
 											code({ node, inline, className, children, ...props }) {
 												if (children.length) {
-												  if (children[0] == '▍') {
-													return <span className="animate-pulse cursor-default mt-1">▍</span>
-												  }
-							
-												  children[0] = (children[0] as string).replace("`▍`", "▍")
+													if (children[0] == "▍") {
+														return (
+															<span className="animate-pulse cursor-default mt-1">
+																▍
+															</span>
+														);
+													}
+
+													children[0] = (children[0] as string).replace(
+														"`▍`",
+														"▍"
+													);
 												}
-							
-												const match = /language-(\w+)/.exec(className || '');
-							
+
+												const match = /language-(\w+)/.exec(className || "");
+
 												return !inline ? (
-												  <CodeBlock
-													key={Math.random()}
-													language={(match && match[1]) || ''}
-													value={String(children).replace(/\n$/, '')}
-													{...props}
-												  />
+													<CodeBlock
+														key={Math.random()}
+														language={(match && match[1]) || ""}
+														value={String(children).replace(/\n$/, "")}
+														{...props}
+													/>
 												) : (
-												  <code className={className} {...props}>
-													{children}
-												  </code>
+													<code className={className} {...props}>
+														{children}
+													</code>
 												);
-											  }
+											},
 										}}
 									>
 										{message}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 6c20d58b1..3e3349136 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -39,7 +39,10 @@ export default function FileCard({ fileName, content, fileType }) {
 					<div
 						className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold`}
 					>
-						<button className="hover:scale-125 text-blue-500 py-1 px-2" onClick={handleDownload}>
+						<button
+							className="hover:scale-125 text-blue-500 py-1 px-2"
+							onClick={handleDownload}
+						>
 							<CloudArrowDownIcon className="w-5 h-5 text-current"></CloudArrowDownIcon>
 						</button>
 					</div>
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index db4de60f4..d2c539b28 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -134,7 +134,7 @@ export default function CodeAreaModal({
 																	title: "Code is ready to run",
 																});
 																setModalOpen(false);
-																setValue(code)
+																setValue(code);
 															} else {
 																if (funcErrors.length !== 0) {
 																	setErrorData({
@@ -142,7 +142,7 @@ export default function CodeAreaModal({
 																		list: funcErrors,
 																	});
 																}
-																if(importsErrors.length!==0){
+																if (importsErrors.length !== 0) {
 																	setErrorData({
 																		title: "There is an error in your imports",
 																		list: importsErrors,
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 10494bc58..e2761e0fd 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,9 +1,9 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
+	XMarkIcon,
+	ArrowDownTrayIcon,
+	DocumentDuplicateIcon,
+	ComputerDesktopIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
@@ -12,169 +12,169 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 
 export default function ExportModal() {
-  const [open, setOpen] = useState(true);
-  const { closePopUp } = useContext(PopUpContext);
-  const ref = useRef();
-  const { setErrorData } = useContext(alertContext);
-  const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
-  const [checked, setChecked] = useState(true);
-  const [name, setName] = useState(flows[tabIndex].name);
-  return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+	const [open, setOpen] = useState(true);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	const { setErrorData } = useContext(alertContext);
+	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	const [checked, setChecked] = useState(true);
+	const [name, setName] = useState(flows[tabIndex].name);
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <ArrowDownTrayIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        Export as
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
-                    <div className="w-full">
-                      <label
-                        htmlFor="name"
-                        className="block mb-2 font-medium text-gray-700 dark:text-white"
-                      >
-                        Name
-                      </label>
-                      <input
-                        onChange={(event) => {
-                          if (event.target.value != "") {
-                            let newFlow = flows[tabIndex];
-                            newFlow.name = event.target.value;
-                            setName(event.target.value);
-                            updateFlow(newFlow);
-                          } else {
-                            setName(event.target.value);
-                          }
-                        }}
-                        type="text"
-                        name="name"
-                        value={name ?? null}
-                        placeholder="File name"
-                        id="name"
-                        className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
-                      />
-                    </div>
-                    <div className="w-full">
-                      <label
-                        htmlFor="description"
-                        className="block mb-2 font-medium text-gray-700 dark:text-white"
-                      >
-                        Description{" "}
-                        <span className="text-gray-400 text-sm">
-                          {" "}
-                          (optional)
-                        </span>
-                      </label>
-                      <textarea
-                        name="description"
-                        id="description"
-                        onChange={(event) => {
-                          let newFlow = flows[tabIndex];
-                          newFlow.description = event.target.value;
-                          updateFlow(newFlow);
-                        }}
-                        value={flows[tabIndex].description ?? null}
-                        placeholder="Flow description"
-                        rows={3}
-                        className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-                      ></textarea>
-                    </div>
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ArrowDownTrayIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Export as
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
+										<div className="w-full">
+											<label
+												htmlFor="name"
+												className="block mb-2 font-medium text-gray-700 dark:text-white"
+											>
+												Name
+											</label>
+											<input
+												onChange={(event) => {
+													if (event.target.value != "") {
+														let newFlow = flows[tabIndex];
+														newFlow.name = event.target.value;
+														setName(event.target.value);
+														updateFlow(newFlow);
+													} else {
+														setName(event.target.value);
+													}
+												}}
+												type="text"
+												name="name"
+												value={name ?? null}
+												placeholder="File name"
+												id="name"
+												className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
+											/>
+										</div>
+										<div className="w-full">
+											<label
+												htmlFor="description"
+												className="block mb-2 font-medium text-gray-700 dark:text-white"
+											>
+												Description{" "}
+												<span className="text-gray-400 text-sm">
+													{" "}
+													(optional)
+												</span>
+											</label>
+											<textarea
+												name="description"
+												id="description"
+												onChange={(event) => {
+													let newFlow = flows[tabIndex];
+													newFlow.description = event.target.value;
+													updateFlow(newFlow);
+												}}
+												value={flows[tabIndex].description ?? null}
+												placeholder="Flow description"
+												rows={3}
+												className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+											></textarea>
+										</div>
 
-                    <div>
-                      <label htmlFor="checkbox" className="flex items-center">
-                        <input
-                          onChange={(event) => {
-                            setChecked(event.target.checked);
-                          }}
-                          checked={checked}
-                          id="checkbox"
-                          type="checkbox"
-                          className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-                        />
-                        <span className="ml-2 font-medium text-gray-700 dark:text-white">
-                          Save with my API keys
-                        </span>
-                      </label>
-                    </div>
-                    <div className="w-full flex justify-end">
-                      <button
-                        onClick={() => {
-                          if (checked) downloadFlow(flows[tabIndex]);
-                          else downloadFlow(removeApiKeys(flows[tabIndex]));
-                        }}
-                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                      >
-                        Download Flow
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+										<div>
+											<label htmlFor="checkbox" className="flex items-center">
+												<input
+													onChange={(event) => {
+														setChecked(event.target.checked);
+													}}
+													checked={checked}
+													id="checkbox"
+													type="checkbox"
+													className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+												/>
+												<span className="ml-2 font-medium text-gray-700 dark:text-white">
+													Save with my API keys
+												</span>
+											</label>
+										</div>
+										<div className="w-full flex justify-end">
+											<button
+												onClick={() => {
+													if (checked) downloadFlow(flows[tabIndex]);
+													else downloadFlow(removeApiKeys(flows[tabIndex]));
+												}}
+												className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+											>
+												Download Flow
+											</button>
+										</div>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 0ad655bf1..d351b847a 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -1,11 +1,11 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
-  ArrowUpTrayIcon,
-  ArrowLeftIcon,
+	XMarkIcon,
+	ArrowDownTrayIcon,
+	DocumentDuplicateIcon,
+	ComputerDesktopIcon,
+	ArrowUpTrayIcon,
+	ArrowLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -19,214 +19,214 @@ import { FlowType } from "../../types/flow";
 import { classNames, toNormalCase } from "../../utils";
 
 export default function ImportModal() {
-  const [open, setOpen] = useState(true);
-  const { setErrorData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
-  const ref = useRef();
-  const [showExamples, setShowExamples] = useState(false);
-  const [loadingExamples, setLoadingExamples] = useState(false);
-  const [examples, setExamples] = useState<FlowType[]>([]);
-  const { uploadFlow, addFlow } = useContext(TabsContext);
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
+	const [open, setOpen] = useState(true);
+	const { setErrorData } = useContext(alertContext);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	const [showExamples, setShowExamples] = useState(false);
+	const [loadingExamples, setLoadingExamples] = useState(false);
+	const [examples, setExamples] = useState<FlowType[]>([]);
+	const { uploadFlow, addFlow } = useContext(TabsContext);
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
 
-  function handleExamples() {
-    setLoadingExamples(true);
-    getExamples()
-      .then((result) => {
-        setLoadingExamples(false);
-        setExamples(result);
-      })
-      .catch((error) =>
-        setErrorData({
-          title: "there was an error loading examples, please try again",
-          list: [error.message],
-        })
-      );
-  }
+	function handleExamples() {
+		setLoadingExamples(true);
+		getExamples()
+			.then((result) => {
+				setLoadingExamples(false);
+				setExamples(result);
+			})
+			.catch((error) =>
+				setErrorData({
+					title: "there was an error loading examples, please try again",
+					list: [error.message],
+				})
+			);
+	}
 
-  return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                {showExamples && (
-                  <>
-                    <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
-                      <button
-                        type="button"
-                        className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                        onClick={() => {
-                          setShowExamples(false);
-                        }}
-                      >
-                        <span className="sr-only">Close</span>
-                        <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
-                      </button>
-                    </div>
-                    <div className="z-50 absolute bottom-2 left-1/2 transform -translate-x-1/2 hidden pt-4 pl-2 sm:block text-center">
-                      <a
-                        href="https://github.com/logspace-ai/langflow_examples"
-                        target="_blank"
-                        className="flex items-center justify-center"
-                        rel="noreferrer"
-                      >
-                        <svg
-                          width="24"
-                          viewBox="0 0 98 96"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
-                            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                            fill="#24292f"
-                          />
-                        </svg>
-                        <span className="ml-2">LangFlow Examples</span>
-                      </a>
-                    </div>
-                  </>
-                )}
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <ArrowUpTrayIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        {showExamples ? "Select an example" : "Import from"}
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div
-                    className={classNames(
-                      "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
-                      showExamples && !loadingExamples
-                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
-                        : "flex flex-row justify-center items-center p-4"
-                    )}
-                  >
-                    {!showExamples && (
-                      <div className="flex h-full w-full justify-evenly items-center">
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-emerald-500"
-                          description="Prebuilt Examples"
-                          icon={
-                            <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            setShowExamples(true);
-                            handleExamples();
-                          }}
-                          textColor="text-emerald-400"
-                          title="Examples"
-                        ></ButtonBox>
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-blue-500"
-                          description="Import from Local"
-                          icon={
-                            <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            uploadFlow();
-                            setModalOpen(false);
-                          }}
-                          textColor="text-blue-500"
-                          title="Local file"
-                        ></ButtonBox>
-                      </div>
-                    )}
-                    {showExamples && loadingExamples && (
-                      <div className="flex align-middle justify-center items-center">
-                        <LoadingComponent remSize={30} />
-                      </div>
-                    )}
-                    {showExamples &&
-                      !loadingExamples &&
-                      examples.map((example, index) => {
-                        return (
-                          <div id="index">
-                            {" "}
-                            <ButtonBox
-                              size="small"
-                              bgColor="bg-emerald-500"
-                              description={
-                                example.description ?? "Prebuilt Examples"
-                              }
-                              icon={
-                                <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
-                              }
-                              onClick={() => {
-                                addFlow(example);
-                                setModalOpen(false);
-                              }}
-                              textColor="text-emerald-400"
-                              title={toNormalCase(example.name)}
-                            ></ButtonBox>
-                          </div>
-                        );
-                      })}
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								{showExamples && (
+									<>
+										<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
+											<button
+												type="button"
+												className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+												onClick={() => {
+													setShowExamples(false);
+												}}
+											>
+												<span className="sr-only">Close</span>
+												<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
+											</button>
+										</div>
+										<div className="z-50 absolute bottom-2 left-1/2 transform -translate-x-1/2 hidden pt-4 pl-2 sm:block text-center">
+											<a
+												href="https://github.com/logspace-ai/langflow_examples"
+												target="_blank"
+												className="flex items-center justify-center"
+												rel="noreferrer"
+											>
+												<svg
+													width="24"
+													viewBox="0 0 98 96"
+													xmlns="http://www.w3.org/2000/svg"
+												>
+													<path
+														fill-rule="evenodd"
+														clip-rule="evenodd"
+														d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+														fill="#24292f"
+													/>
+												</svg>
+												<span className="ml-2">LangFlow Examples</span>
+											</a>
+										</div>
+									</>
+								)}
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ArrowUpTrayIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												{showExamples ? "Select an example" : "Import from"}
+											</Dialog.Title>
+										</div>
+									</div>
+									<div
+										className={classNames(
+											"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
+											showExamples && !loadingExamples
+												? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
+												: "flex flex-row justify-center items-center p-4"
+										)}
+									>
+										{!showExamples && (
+											<div className="flex h-full w-full justify-evenly items-center">
+												<ButtonBox
+													size="big"
+													bgColor="bg-emerald-500"
+													description="Prebuilt Examples"
+													icon={
+														<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+													}
+													onClick={() => {
+														setShowExamples(true);
+														handleExamples();
+													}}
+													textColor="text-emerald-400"
+													title="Examples"
+												></ButtonBox>
+												<ButtonBox
+													size="big"
+													bgColor="bg-blue-500"
+													description="Import from Local"
+													icon={
+														<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+													}
+													onClick={() => {
+														uploadFlow();
+														setModalOpen(false);
+													}}
+													textColor="text-blue-500"
+													title="Local file"
+												></ButtonBox>
+											</div>
+										)}
+										{showExamples && loadingExamples && (
+											<div className="flex align-middle justify-center items-center">
+												<LoadingComponent remSize={30} />
+											</div>
+										)}
+										{showExamples &&
+											!loadingExamples &&
+											examples.map((example, index) => {
+												return (
+													<div id="index">
+														{" "}
+														<ButtonBox
+															size="small"
+															bgColor="bg-emerald-500"
+															description={
+																example.description ?? "Prebuilt Examples"
+															}
+															icon={
+																<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+															}
+															onClick={() => {
+																addFlow(example);
+																setModalOpen(false);
+															}}
+															textColor="text-emerald-400"
+															title={toNormalCase(example.name)}
+														></ButtonBox>
+													</div>
+												);
+											})}
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 10dab2c2c..63edfeb94 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -135,7 +135,8 @@ export default function PromptAreaModal({
 														return setErrorData({
 															title:
 																"There is something wrong with this prompt, please review it",
-														list:[error.response.data.detail]});
+															list: [error.response.data.detail],
+														});
 													});
 											}}
 										>
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 8cfcebcd1..10e4555a4 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -1,104 +1,123 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon, ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
+import {
+	XMarkIcon,
+	ClipboardDocumentListIcon,
+} from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
-export default function TextAreaModal({value, setValue}:{setValue:(value:string)=>void,value:string|string[]}){
-    const [open, setOpen] = useState(true);
-    const [myValue, setMyValue] = useState(value);
-    const { closePopUp } = useContext(PopUpContext);
-    const ref = useRef();
-    function setModalOpen(x:boolean){
-        setOpen(x);
-        if(x === false){
-            setTimeout(() => {closePopUp()}, 300);
-        }
-    }
-    return (
-        <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+export default function TextAreaModal({
+	value,
+	setValue,
+}: {
+	setValue: (value: string) => void;
+	value: string | string[];
+}) {
+	const [open, setOpen] = useState(true);
+	const [myValue, setMyValue] = useState(value);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <ClipboardDocumentListIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        Edit text
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
-                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-                    <button
-                      type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      Finish editing
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-    )
-}
\ No newline at end of file
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ClipboardDocumentListIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Edit text
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+										<div className="flex h-full w-full">
+											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+												<textarea
+													ref={ref}
+													className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+													value={myValue}
+													onChange={(e) => {
+														setMyValue(e.target.value);
+														setValue(e.target.value);
+													}}
+												/>
+											</div>
+										</div>
+									</div>
+									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+										<button
+											type="button"
+											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+											onClick={() => {
+												setModalOpen(false);
+											}}
+										>
+											Finish editing
+										</button>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index 102cd4d38..9eae07286 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -1,14 +1,12 @@
-import { ConnectionLineComponentProps } from 'reactflow';
-
-
+import { ConnectionLineComponentProps } from "reactflow";
 
 const ConnectionLineComponent = ({
 	fromX,
 	fromY,
 	toX,
 	toY,
-	connectionLineStyle = {} // provide a default value for connectionLineStyle
-}:ConnectionLineComponentProps) => {
+	connectionLineStyle = {}, // provide a default value for connectionLineStyle
+}: ConnectionLineComponentProps) => {
 	return (
 		<g>
 			<path
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 5cddda2f8..f904e08c5 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -1,14 +1,11 @@
-import {
-	ChevronRightIcon,
-} from "@heroicons/react/24/solid";
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Disclosure } from "@headlessui/react";
 import { DisclosureComponentType } from "../../../../types/components";
 
 export default function DisclosureComponent({
 	button: { title, Icon, buttons = [] },
 	children,
-}: DisclosureComponentType
-) {
+}: DisclosureComponentType) {
 	return (
 		<Disclosure as="div" key={title}>
 			{({ open }) => (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index fc02e31d5..37bf096dd 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -3,13 +3,10 @@ import DisclosureComponent from "../DisclosureComponent";
 import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
-import {
-	APIClassType,
-	APIObjectType,
-} from "../../../../types/api";
+import { APIClassType, APIObjectType } from "../../../../types/api";
 
 export default function ExtraSidebar() {
-	const {data} = useContext(typesContext)
+	const { data } = useContext(typesContext);
 
 	function onDragStart(
 		event: React.DragEvent<any>,
@@ -22,45 +19,49 @@ export default function ExtraSidebar() {
 
 	return (
 		<div className="mt-1 w-full">
-			{Object.keys(data).sort().map((d: keyof APIObjectType, i) => (
-				<DisclosureComponent
-					key={i}
-					button={{
-						title: nodeNames[d] ?? nodeNames.unknown,
-						Icon: nodeIcons[d] ?? nodeIcons.unknown,
-					}}
-				>
-					<div className="p-2 flex flex-col gap-2">
-						{Object.keys(data[d]).sort().map((t: string, k) => (
-							<div key={k}>
-								<div
-									draggable
-									className={" cursor-grab border-l-8 rounded-l-md"}
-									style={{
-										borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-									}}
-									onDragStart={(event) =>
-										onDragStart(event, {
-											type: t,
-											node: data[d][t],
-										})
-									}
-								>
-									<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-										<span className="text-black dark:text-white w-36 truncate text-xs">
-											{t}
-										</span>
-										<Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+			{Object.keys(data)
+				.sort()
+				.map((d: keyof APIObjectType, i) => (
+					<DisclosureComponent
+						key={i}
+						button={{
+							title: nodeNames[d] ?? nodeNames.unknown,
+							Icon: nodeIcons[d] ?? nodeIcons.unknown,
+						}}
+					>
+						<div className="p-2 flex flex-col gap-2">
+							{Object.keys(data[d])
+								.sort()
+								.map((t: string, k) => (
+									<div key={k}>
+										<div
+											draggable
+											className={" cursor-grab border-l-8 rounded-l-md"}
+											style={{
+												borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+											}}
+											onDragStart={(event) =>
+												onDragStart(event, {
+													type: t,
+													node: data[d][t],
+												})
+											}
+										>
+											<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+												<span className="text-black dark:text-white w-36 truncate text-xs">
+													{t}
+												</span>
+												<Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+											</div>
+										</div>
 									</div>
-								</div>
-							</div>
-						))}
-						{Object.keys(data[d]).length === 0 && (
-							<div className="text-gray-400 text-center">Coming soon</div>
-						)}
-					</div>
-				</DisclosureComponent>
-			))}
+								))}
+							{Object.keys(data[d]).length === 0 && (
+								<div className="text-gray-400 text-center">Coming soon</div>
+							)}
+						</div>
+					</DisclosureComponent>
+				))}
 		</div>
 	);
 }
diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index a8d098c32..964ab440c 100644
--- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -5,9 +5,16 @@ import { FlowType } from "../../../../types/flow";
 
 var _ = require("lodash");
 
-export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,selected:boolean,onClick:()=>void}) {
-	const { removeFlow, updateFlow, flows } =
-		useContext(TabsContext);
+export default function TabComponent({
+	selected,
+	flow,
+	onClick,
+}: {
+	flow: FlowType;
+	selected: boolean;
+	onClick: () => void;
+}) {
+	const { removeFlow, updateFlow, flows } = useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
 	return (
@@ -19,7 +26,7 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
 						onClick={onClick}
 					>
 						<span className="w-32 truncate text-left">{flow.name}</span>
-						
+
 						<button
 							onClick={(e) => {
 								e.stopPropagation();
@@ -85,4 +92,3 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
 		</>
 	);
 }
-
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 7a7526906..4873c9a6d 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -94,9 +94,7 @@ export default function TabsManagerComponent() {
 									>
 										<AlertDropdown />
 									</div>
-                  <div className="h-screen w-screen fixed top-0 left-0">
-                    
-                  </div>
+									<div className="h-screen w-screen fixed top-0 left-0"></div>
 								</>
 							);
 						}}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index be168d6d4..0c7e46d06 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -1,15 +1,15 @@
 import { useCallback, useContext, useEffect, useRef } from "react";
 import ReactFlow, {
-  Background,
-  Controls,
-  addEdge,
-  useEdgesState,
-  useNodesState,
-  useReactFlow,
-  updateEdge,
-  EdgeChange,
-  Connection,
-  Edge,
+	Background,
+	Controls,
+	addEdge,
+	useEdgesState,
+	useNodesState,
+	useReactFlow,
+	updateEdge,
+	EdgeChange,
+	Connection,
+	Edge,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -24,167 +24,166 @@ import { APIClassType } from "../../types/api";
 import { isValidConnection } from "../../utils";
 
 const nodeTypes = {
-  genericNode: GenericNode,
+	genericNode: GenericNode,
 };
 
 var _ = require("lodash");
 
-export default function FlowPage({ flow }:{flow:FlowType}) {
-	let { updateFlow, incrementNodeId} =
-		useContext(TabsContext);
+export default function FlowPage({ flow }: { flow: FlowType }) {
+	let { updateFlow, incrementNodeId } = useContext(TabsContext);
 	const { types, reactFlowInstance, setReactFlowInstance, templates } =
 		useContext(typesContext);
 	const reactFlowWrapper = useRef(null);
 
-  const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
-  const { setErrorData } = useContext(alertContext);
-  const [nodes, setNodes, onNodesChange] = useNodesState(
-    flow.data?.nodes ?? []
-  );
-  const [edges, setEdges, onEdgesChange] = useEdgesState(
-    flow.data?.edges ?? []
-  );
-  const { setViewport } = useReactFlow();
-  const edgeUpdateSuccessful = useRef(true);
+	const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
+	const { setErrorData } = useContext(alertContext);
+	const [nodes, setNodes, onNodesChange] = useNodesState(
+		flow.data?.nodes ?? []
+	);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(
+		flow.data?.edges ?? []
+	);
+	const { setViewport } = useReactFlow();
+	const edgeUpdateSuccessful = useRef(true);
 
-  useEffect(() => {
-    if (reactFlowInstance && flow) {
-      flow.data = reactFlowInstance.toObject();
-      updateFlow(flow);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodes, edges]);
-  //update flow when tabs change
-  useEffect(() => {
-    setNodes(flow?.data?.nodes ?? []);
-    setEdges(flow?.data?.edges ?? []);
-    if (reactFlowInstance) {
-      setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
-    }
-  }, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
-  //set extra sidebar
-  useEffect(() => {
-    setExtraComponent(<ExtraSidebar />);
-    setExtraNavigation({ title: "Components" });
-  }, [setExtraComponent, setExtraNavigation]);
+	useEffect(() => {
+		if (reactFlowInstance && flow) {
+			flow.data = reactFlowInstance.toObject();
+			updateFlow(flow);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [nodes, edges]);
+	//update flow when tabs change
+	useEffect(() => {
+		setNodes(flow?.data?.nodes ?? []);
+		setEdges(flow?.data?.edges ?? []);
+		if (reactFlowInstance) {
+			setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
+		}
+	}, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
+	//set extra sidebar
+	useEffect(() => {
+		setExtraComponent(<ExtraSidebar />);
+		setExtraNavigation({ title: "Components" });
+	}, [setExtraComponent, setExtraNavigation]);
 
-  const onEdgesChangeMod = useCallback(
-    (s: EdgeChange[]) => {
-      onEdgesChange(s);
-      setNodes((x) => {
-        let newX = _.cloneDeep(x);
-        return newX;
-      });
-    },
-    [onEdgesChange, setNodes]
-  );
+	const onEdgesChangeMod = useCallback(
+		(s: EdgeChange[]) => {
+			onEdgesChange(s);
+			setNodes((x) => {
+				let newX = _.cloneDeep(x);
+				return newX;
+			});
+		},
+		[onEdgesChange, setNodes]
+	);
 
-  const onConnect = useCallback(
-    (params: Connection) => {
-      setEdges((eds) =>
-        addEdge({ ...params, className: "animate-pulse" }, eds)
-      );
-      setNodes((x) => {
-        let newX = _.cloneDeep(x);
-        return newX;
-      });
-    },
-    [setEdges, setNodes]
-  );
+	const onConnect = useCallback(
+		(params: Connection) => {
+			setEdges((eds) =>
+				addEdge({ ...params, className: "animate-pulse" }, eds)
+			);
+			setNodes((x) => {
+				let newX = _.cloneDeep(x);
+				return newX;
+			});
+		},
+		[setEdges, setNodes]
+	);
 
-  const onDragOver = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-  }, []);
+	const onDragOver = useCallback((event: React.DragEvent) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+	}, []);
 
-  const onDrop = useCallback(
-    (event: React.DragEvent) => {
-      event.preventDefault();
+	const onDrop = useCallback(
+		(event: React.DragEvent) => {
+			event.preventDefault();
 
-      // Helper function to generate a unique node ID
-      function getId() {
-        return `dndnode_` + incrementNodeId();
-      }
+			// Helper function to generate a unique node ID
+			function getId() {
+				return `dndnode_` + incrementNodeId();
+			}
 
-      // Get the current bounds of the ReactFlow wrapper element
-      const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
+			// Get the current bounds of the ReactFlow wrapper element
+			const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
 
-      // Extract the data from the drag event and parse it as a JSON object
-      let data: { type: string; node?: APIClassType } = JSON.parse(
-        event.dataTransfer.getData("json")
-      );
+			// Extract the data from the drag event and parse it as a JSON object
+			let data: { type: string; node?: APIClassType } = JSON.parse(
+				event.dataTransfer.getData("json")
+			);
 
-      // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
-      if (
-        data.type !== "chatInput" ||
-        (data.type === "chatInput" &&
-          !reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
-      ) {
-        // Calculate the position where the node should be created
-        const position = reactFlowInstance.project({
-          x: event.clientX - reactflowBounds.left,
-          y: event.clientY - reactflowBounds.top,
-        });
+			// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
+			if (
+				data.type !== "chatInput" ||
+				(data.type === "chatInput" &&
+					!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
+			) {
+				// Calculate the position where the node should be created
+				const position = reactFlowInstance.project({
+					x: event.clientX - reactflowBounds.left,
+					y: event.clientY - reactflowBounds.top,
+				});
 
-        // Generate a unique node ID
-        let newId = getId();
+				// Generate a unique node ID
+				let newId = getId();
 
-        // Create a new node object
-        const newNode: NodeType = {
-          id: newId,
-          type: "genericNode",
-          position,
-          data: {
-            ...data,
-            id: newId,
-            value: null,
-          },
-        };
+				// Create a new node object
+				const newNode: NodeType = {
+					id: newId,
+					type: "genericNode",
+					position,
+					data: {
+						...data,
+						id: newId,
+						value: null,
+					},
+				};
 
-        // Add the new node to the list of nodes in state
-        setNodes((nds) => nds.concat(newNode));
-      } else {
-        // If a chat input node already exists, set an error message
-        setErrorData({
-          title: "Error creating node",
-          list: ["There can't be more than one chat input."],
-        });
-      }
-    },
-    // Specify dependencies for useCallback
-    [incrementNodeId, reactFlowInstance, setErrorData, setNodes]
-  );
+				// Add the new node to the list of nodes in state
+				setNodes((nds) => nds.concat(newNode));
+			} else {
+				// If a chat input node already exists, set an error message
+				setErrorData({
+					title: "Error creating node",
+					list: ["There can't be more than one chat input."],
+				});
+			}
+		},
+		// Specify dependencies for useCallback
+		[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
+	);
 
-  const onDelete = (mynodes) => {
-    setEdges(
-      edges.filter(
-        (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
-      )
-    );
-  };
+	const onDelete = (mynodes) => {
+		setEdges(
+			edges.filter(
+				(ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
+			)
+		);
+	};
 
-  const onEdgeUpdateStart = useCallback(() => {
-    edgeUpdateSuccessful.current = false;
-  }, []);
+	const onEdgeUpdateStart = useCallback(() => {
+		edgeUpdateSuccessful.current = false;
+	}, []);
 
-  const onEdgeUpdate = useCallback(
-    (oldEdge: Edge, newConnection: Connection) => {
-      if (isValidConnection(newConnection, reactFlowInstance)) {
-        edgeUpdateSuccessful.current = true;
-        setEdges((els) => updateEdge(oldEdge, newConnection, els));
-      }
-    },
-    []
-  );
+	const onEdgeUpdate = useCallback(
+		(oldEdge: Edge, newConnection: Connection) => {
+			if (isValidConnection(newConnection, reactFlowInstance)) {
+				edgeUpdateSuccessful.current = true;
+				setEdges((els) => updateEdge(oldEdge, newConnection, els));
+			}
+		},
+		[]
+	);
 
 	const onEdgeUpdateEnd = useCallback((_, edge) => {
 		if (!edgeUpdateSuccessful.current) {
-		  setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+			setEdges((eds) => eds.filter((e) => e.id !== edge.id));
 		}
-	
+
 		edgeUpdateSuccessful.current = true;
-	  }, []);
-	  
+	}, []);
+
 	return (
 		<div className="w-full h-full" ref={reactFlowWrapper}>
 			{Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
@@ -208,11 +207,10 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
 						onDragOver={onDragOver}
 						onDrop={onDrop}
 						onNodesDelete={onDelete}
-            selectNodesOnDrag={false}
+						selectNodesOnDrag={false}
 					>
-						<Background className="dark:bg-gray-900"/>
-						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
-						</Controls>
+						<Background className="dark:bg-gray-900" />
+						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
 				</>
diff --git a/src/frontend/src/reportWebVitals.ts b/src/frontend/src/reportWebVitals.ts
index 5fa3583b7..e48d8f3ca 100644
--- a/src/frontend/src/reportWebVitals.ts
+++ b/src/frontend/src/reportWebVitals.ts
@@ -1,15 +1,15 @@
 import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+	if (onPerfEntry && onPerfEntry instanceof Function) {
+		import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+			getCLS(onPerfEntry);
+			getFID(onPerfEntry);
+			getFCP(onPerfEntry);
+			getLCP(onPerfEntry);
+			getTTFB(onPerfEntry);
+		});
+	}
 };
 
 export default reportWebVitals;
diff --git a/src/frontend/src/svg.d.ts b/src/frontend/src/svg.d.ts
index 1a3dd3c2a..d071d8e9e 100644
--- a/src/frontend/src/svg.d.ts
+++ b/src/frontend/src/svg.d.ts
@@ -1,4 +1,4 @@
 declare module "*.svg" {
-  const content: any;
-  export default content;
+	const content: any;
+	export default content;
 }
diff --git a/src/frontend/src/types/alerts/index.ts b/src/frontend/src/types/alerts/index.ts
index 7033d99eb..91b6444b2 100644
--- a/src/frontend/src/types/alerts/index.ts
+++ b/src/frontend/src/types/alerts/index.ts
@@ -1,29 +1,29 @@
 export type ErrorAlertType = {
-  title: string;
-  list: Array<string>;
-  id: string;
-  removeAlert: (id: string) => void;
+	title: string;
+	list: Array<string>;
+	id: string;
+	removeAlert: (id: string) => void;
 };
 export type NoticeAlertType = {
-  title: string;
-  link: string;
-  id: string;
-  removeAlert: (id: string) => void;
+	title: string;
+	link: string;
+	id: string;
+	removeAlert: (id: string) => void;
 };
 export type SuccessAlertType = {
-  title: string;
-  id: string;
-  removeAlert: (id: string) => void;
+	title: string;
+	id: string;
+	removeAlert: (id: string) => void;
 };
 export type SingleAlertComponentType = {
-  dropItem: AlertItemType;
-  removeAlert: (index: string) => void;
+	dropItem: AlertItemType;
+	removeAlert: (index: string) => void;
 };
 export type AlertDropdownType = {};
 export type AlertItemType = {
-  type: "notice" | "error" | "success";
-  title: string;
-  link?: string;
-  list?: Array<string>;
-  id: string;
+	type: "notice" | "error" | "success";
+	title: string;
+	link?: string;
+	list?: Array<string>;
+	id: string;
 };
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 8d26c4e15..333e3d39a 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -4,37 +4,37 @@ import { Node, Edge, Viewport } from "reactflow";
 export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
 export type APIKindType = { class: APIClassType; [key: string]: APIClassType };
 export type APITemplateType = {
-  variable: TemplateVariableType;
-  [key: string]: TemplateVariableType;
+	variable: TemplateVariableType;
+	[key: string]: TemplateVariableType;
 };
 export type APIClassType = {
-  base_classes: Array<string>;
-  description: string;
-  template: APITemplateType;
-  [key: string]: Array<string> | string | APITemplateType;
+	base_classes: Array<string>;
+	description: string;
+	template: APITemplateType;
+	[key: string]: Array<string> | string | APITemplateType;
 };
 export type TemplateVariableType = {
-  type: string;
-  required: boolean;
-  placeholder?: string;
-  list: boolean;
-  show: boolean;
-  multiline?: boolean;
-  value?: any;
-  [key: string]: any;
+	type: string;
+	required: boolean;
+	placeholder?: string;
+	list: boolean;
+	show: boolean;
+	multiline?: boolean;
+	value?: any;
+	[key: string]: any;
 };
 export type sendAllProps = {
-  nodes: Node[];
-  edges: Edge[];
-  name: string;
-  description: string;
-  viewport: Viewport;
-  message: string;
+	nodes: Node[];
+	edges: Edge[];
+	name: string;
+	description: string;
+	viewport: Viewport;
+	message: string;
 
-  chatHistory: { message: string; isSend: boolean }[];
+	chatHistory: { message: string; isSend: boolean }[];
 };
 export type errorsTypeAPI = {
-  function: { errors: Array<string> };
-  imports: { errors: Array<string> };
+	function: { errors: Array<string> };
+	imports: { errors: Array<string> };
 };
 export type PromptTypeAPI = { input_variables: Array<string> };
diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts
index e4e0c1627..13ca1db67 100644
--- a/src/frontend/src/types/chat/index.ts
+++ b/src/frontend/src/types/chat/index.ts
@@ -3,8 +3,8 @@ import { FlowType } from "../flow";
 
 export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance };
 export type ChatMessageType = {
-  message: string;
-  isSend: boolean;
-  thought?: string;
-  files?: Array<{ data: string; type: string; data_type: string }>;
+	message: string;
+	isSend: boolean;
+	thought?: string;
+	files?: Array<{ data: string; type: string; data_type: string }>;
 };
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index e8c682724..564ba31d2 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,85 +1,85 @@
 import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
 import { NodeDataType } from "../flow/index";
 export type InputComponentType = {
-  value: string;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-  password: boolean;
+	value: string;
+	disabled?: boolean;
+	onChange: (value: string) => void;
+	password: boolean;
 };
 export type ToggleComponentType = {
-  enabled: boolean;
-  setEnabled: (state: boolean) => void;
-  disabled: boolean;
+	enabled: boolean;
+	setEnabled: (state: boolean) => void;
+	disabled: boolean;
 };
 export type DropDownComponentType = {
-  value: string;
-  options: string[];
-  onSelect: (value: string) => void;
+	value: string;
+	options: string[];
+	onSelect: (value: string) => void;
 };
 export type ParameterComponentType = {
-  data: NodeDataType;
-  title: string;
-  id: string;
-  color: string;
-  left: boolean;
-  type: string;
-  required?: boolean;
-  name?: string;
-  tooltipTitle: string;
+	data: NodeDataType;
+	title: string;
+	id: string;
+	color: string;
+	left: boolean;
+	type: string;
+	required?: boolean;
+	name?: string;
+	tooltipTitle: string;
 };
 export type InputListComponentType = {
-  value: string[];
-  onChange: (value: string[]) => void;
-  disabled: boolean;
+	value: string[];
+	onChange: (value: string[]) => void;
+	disabled: boolean;
 };
 
 export type TextAreaComponentType = {
-  disabled: boolean;
-  onChange: (value: string[] | string) => void;
-  value: string;
+	disabled: boolean;
+	onChange: (value: string[] | string) => void;
+	value: string;
 };
 
 export type FileComponentType = {
-  disabled: boolean;
-  onChange: (value: string[] | string) => void;
-  value: string;
-  suffixes: Array<string>;
-  fileTypes: Array<string>;
-  onFileChange: (value: string) => void;
+	disabled: boolean;
+	onChange: (value: string[] | string) => void;
+	value: string;
+	suffixes: Array<string>;
+	fileTypes: Array<string>;
+	onFileChange: (value: string) => void;
 };
 
 export type DisclosureComponentType = {
-  children: ReactNode;
-  button: {
-    title: string;
-    Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
-    buttons?: {
-      Icon: ReactElement;
-      title: string;
-      onClick: (event?: React.MouseEvent) => void;
-    }[];
-  };
+	children: ReactNode;
+	button: {
+		title: string;
+		Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+		buttons?: {
+			Icon: ReactElement;
+			title: string;
+			onClick: (event?: React.MouseEvent) => void;
+		}[];
+	};
 };
 export type FloatComponentType = {
-  value: string;
-  disabled?: boolean;
-  onChange: (value: string) => void;
+	value: string;
+	disabled?: boolean;
+	onChange: (value: string) => void;
 };
 
 export type TooltipComponentType = {
-  children: ReactElement;
-  title: string;
-  placement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
+	children: ReactElement;
+	title: string;
+	placement?:
+		| "bottom-end"
+		| "bottom-start"
+		| "bottom"
+		| "left-end"
+		| "left-start"
+		| "left"
+		| "right-end"
+		| "right-start"
+		| "right"
+		| "top-end"
+		| "top-start"
+		| "top";
 };
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 3c0877579..0a395f64e 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,8 +1,8 @@
 import { HomeIcon } from "@heroicons/react/24/outline";
 
 export type sidebarNavigationItemType = {
-  name: string;
-  href: string;
-  icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
-  current: boolean;
+	name: string;
+	href: string;
+	icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+	current: boolean;
 };
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 6c118aa49..e4c43a2aa 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -3,20 +3,20 @@ import { APIClassType } from "../api/index";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 
 export type FlowType = {
-  name: string;
-  id: string;
-  data: ReactFlowJsonObject;
-  description: string;
+	name: string;
+	id: string;
+	data: ReactFlowJsonObject;
+	description: string;
 };
 export type NodeType = {
-  id: string;
-  type?: string;
-  position: XYPosition;
-  data: NodeDataType;
+	id: string;
+	type?: string;
+	position: XYPosition;
+	data: NodeDataType;
 };
 export type NodeDataType = {
-  type: string;
-  node?: APIClassType;
-  id: string;
-  value: any;
+	type: string;
+	node?: APIClassType;
+	id: string;
+	value: any;
 };
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 7297b06ec..6cf3d2cd1 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -1,17 +1,22 @@
 import { FlowType } from "../flow";
 
 export type TabsContextType = {
-  save: () => void;
-  tabIndex: number;
-  setTabIndex: (index: number) => void;
-  flows: Array<FlowType>;
-  removeFlow: (id: string) => void;
-  addFlow: (flowData?: FlowType) => void;
-  updateFlow: (newFlow: FlowType) => void;
-  incrementNodeId: () => number;
-  downloadFlow: (flow: FlowType) => void;
-  uploadFlow: () => void;
-  hardReset: () => void;
+	save: () => void;
+	tabIndex: number;
+	setTabIndex: (index: number) => void;
+	flows: Array<FlowType>;
+	removeFlow: (id: string) => void;
+	addFlow: (flowData?: FlowType) => void;
+	updateFlow: (newFlow: FlowType) => void;
+	incrementNodeId: () => number;
+	downloadFlow: (flow: FlowType) => void;
+	uploadFlow: () => void;
+	hardReset: () => void;
 };
 
-export type LangFlowState={ tabIndex:number, flows:FlowType[], id:string, nodeId:number }
\ No newline at end of file
+export type LangFlowState = {
+	tabIndex: number;
+	flows: FlowType[];
+	id: string;
+	nodeId: number;
+};
diff --git a/src/frontend/src/types/templatesContext/index.ts b/src/frontend/src/types/templatesContext/index.ts
index 88e2dd07c..7e2f82890 100644
--- a/src/frontend/src/types/templatesContext/index.ts
+++ b/src/frontend/src/types/templatesContext/index.ts
@@ -1,7 +1,6 @@
-
-const template:{[char: string]: string}={}
+const template: { [char: string]: string } = {};
 
 export type TemplateContextType = {
 	templates: typeof template;
 	setTemplates: (newState: {}) => void;
-};
\ No newline at end of file
+};
diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts
index 0868bfa59..6754e605c 100644
--- a/src/frontend/src/types/typesContext/index.ts
+++ b/src/frontend/src/types/typesContext/index.ts
@@ -1,12 +1,11 @@
 import { ReactFlowInstance } from "reactflow";
 
-const types:{[char: string]: string}={};
-const template:{[char: string]: string}={}
-const data:{[char: string]: string}={}
-
+const types: { [char: string]: string } = {};
+const template: { [char: string]: string } = {};
+const data: { [char: string]: string } = {};
 
 export type typesContextType = {
-	reactFlowInstance: ReactFlowInstance|null;
+	reactFlowInstance: ReactFlowInstance | null;
 	setReactFlowInstance: any;
 	deleteNode: (idx: string) => void;
 	types: typeof types;
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index c1d5b69a0..65579cdfe 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -317,24 +317,25 @@ export function toFirstUpperCase(str: string) {
 }
 
 export function toNormalCase(str: string) {
-  let result =  str
-    .split("_")
-    .map((word, index) => {
-      if (index === 0) {
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
-      }
-      return word.toLowerCase();
-    })
-    .join(" ");
+	let result = str
+		.split("_")
+		.map((word, index) => {
+			if (index === 0) {
+				return word[0].toUpperCase() + word.slice(1).toLowerCase();
+			}
+			return word.toLowerCase();
+		})
+		.join(" ");
 
-  return result.split("-")
-  .map((word, index) => {
-    if (index === 0) {
-      return word[0].toUpperCase() + word.slice(1).toLowerCase();
-    }
-    return word.toLowerCase();
-  })
-  .join(" ");
+	return result
+		.split("-")
+		.map((word, index) => {
+			if (index === 0) {
+				return word[0].toUpperCase() + word.slice(1).toLowerCase();
+			}
+			return word.toLowerCase();
+		})
+		.join(" ");
 }
 
 export function normalCaseToSnakeCase(str: string) {
@@ -397,15 +398,15 @@ export function isValidConnection(
 }
 
 export function removeApiKeys(flow: FlowType): FlowType {
-  let cleanFLow = _.cloneDeep(flow);
-  cleanFLow.data.nodes.forEach((node) => {
-    for (const key in node.data.node.template) {
-      if (key.includes("api")) {
-        node.data.node.template[key].value = "";
-      }
-    }
-  });
-  return cleanFLow;
+	let cleanFLow = _.cloneDeep(flow);
+	cleanFLow.data.nodes.forEach((node) => {
+		for (const key in node.data.node.template) {
+			if (key.includes("api")) {
+				node.data.node.template[key].value = "";
+			}
+		}
+	});
+	return cleanFLow;
 }
 
 export function updateObject<T extends Record<string, any>>(
@@ -443,7 +444,7 @@ export function updateTemplate(
 	reference: APITemplateType,
 	objectToUpdate: APITemplateType
 ): APITemplateType {
-	let clonedObject:APITemplateType = _.cloneDeep(reference);
+	let clonedObject: APITemplateType = _.cloneDeep(reference);
 
 	// Loop through each key in the reference object
 	for (const key in clonedObject) {
@@ -457,32 +458,31 @@ export function updateTemplate(
 
 interface languageMap {
 	[key: string]: string | undefined;
-  }
-  
-  export const programmingLanguages: languageMap = {
-	javascript: '.js',
-	python: '.py',
-	java: '.java',
-	c: '.c',
-	cpp: '.cpp',
-	'c++': '.cpp',
-	'c#': '.cs',
-	ruby: '.rb',
-	php: '.php',
-	swift: '.swift',
-	'objective-c': '.m',
-	kotlin: '.kt',
-	typescript: '.ts',
-	go: '.go',
-	perl: '.pl',
-	rust: '.rs',
-	scala: '.scala',
-	haskell: '.hs',
-	lua: '.lua',
-	shell: '.sh',
-	sql: '.sql',
-	html: '.html',
-	css: '.css',
+}
+
+export const programmingLanguages: languageMap = {
+	javascript: ".js",
+	python: ".py",
+	java: ".java",
+	c: ".c",
+	cpp: ".cpp",
+	"c++": ".cpp",
+	"c#": ".cs",
+	ruby: ".rb",
+	php: ".php",
+	swift: ".swift",
+	"objective-c": ".m",
+	kotlin: ".kt",
+	typescript: ".ts",
+	go: ".go",
+	perl: ".pl",
+	rust: ".rs",
+	scala: ".scala",
+	haskell: ".hs",
+	lua: ".lua",
+	shell: ".sh",
+	sql: ".sql",
+	html: ".html",
+	css: ".css",
 	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-  };
-  
\ No newline at end of file
+};

From 9a63329dc7356765998ece5338abcbbdbdd5c281 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 10 May 2023 22:09:57 -0300
Subject: [PATCH 34/45] fix spacing

---
 src/frontend/src/modals/chatModal/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index e89400eb6..fcb8a936f 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -351,7 +351,7 @@ export default function ChatModal({
 							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 						>
-							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-[690px]">
 								<div className="relative w-full">
 									<button
 										onClick={() => clearChat()}
@@ -385,7 +385,7 @@ export default function ChatModal({
 									)}
 									<div ref={ref}></div>
 								</div>
-								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-2">
 									<div className="relative w-full mt-1 rounded-md shadow-sm">
 										<ChatInput
 											chatValue={chatValue}

From 1f4f734dc304232ce9b02ed9b0abe57a884f98d2 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:31:10 -0300
Subject: [PATCH 35/45] changed padding button, and chat

---
 src/frontend/src/modals/chatModal/index.tsx | 732 ++++++++++----------
 1 file changed, 366 insertions(+), 366 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index fcb8a936f..6dd5bb456 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -14,392 +14,392 @@ import ChatInput from "./chatInput";
 const _ = require("lodash");
 
 export default function ChatModal({
-	flow,
-	open,
-	setOpen,
+  flow,
+  open,
+  setOpen,
 }: {
-	open: boolean;
-	setOpen: Function;
-	flow: FlowType;
+  open: boolean;
+  setOpen: Function;
+  flow: FlowType;
 }) {
-	const [chatValue, setChatValue] = useState("");
-	const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-	const { reactFlowInstance } = useContext(typesContext);
-	const { setErrorData, setNoticeData } = useContext(alertContext);
-	const ws = useRef<WebSocket | null>(null);
-	const [lockChat, setLockChat] = useState(false);
-	const isOpen = useRef(open);
+  const [chatValue, setChatValue] = useState("");
+  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
+  const { reactFlowInstance } = useContext(typesContext);
+  const { setErrorData, setNoticeData } = useContext(alertContext);
+  const ws = useRef<WebSocket | null>(null);
+  const [lockChat, setLockChat] = useState(false);
+  const isOpen = useRef(open);
 
-	useEffect(() => {
-		isOpen.current = open;
-	}, [open]);
-	var isStream = false;
+  useEffect(() => {
+    isOpen.current = open;
+  }, [open]);
+  var isStream = false;
 
-	const addChatHistory = (
-		message: string,
-		isSend: boolean,
-		thought?: string,
-		files?: Array<any>
-	) => {
-		setChatHistory((old) => {
-			let newChat = _.cloneDeep(old);
-			if (files) {
-				newChat.push({ message, isSend, files, thought });
-			} else if (thought) {
-				newChat.push({ message, isSend, thought });
-			} else {
-				newChat.push({ message, isSend });
-			}
-			return newChat;
-		});
-	};
+  const addChatHistory = (
+    message: string,
+    isSend: boolean,
+    thought?: string,
+    files?: Array<any>
+  ) => {
+    setChatHistory((old) => {
+      let newChat = _.cloneDeep(old);
+      if (files) {
+        newChat.push({ message, isSend, files, thought });
+      } else if (thought) {
+        newChat.push({ message, isSend, thought });
+      } else {
+        newChat.push({ message, isSend });
+      }
+      return newChat;
+    });
+  };
 
-	//add proper type signature for function
+  //add proper type signature for function
 
-	function updateLastMessage({
-		str,
-		thought,
-		end = false,
-		files,
-	}: {
-		str?: string;
-		thought?: string;
-		// end param default is false
-		end?: boolean;
-		files?: Array<any>;
-	}) {
-		setChatHistory((old) => {
-			let newChat = [...old];
-			if (str) {
-				if (end) {
-					newChat[newChat.length - 1].message = str;
-				} else {
-					newChat[newChat.length - 1].message =
-						newChat[newChat.length - 1].message + str;
-				}
-			}
-			if (thought) {
-				newChat[newChat.length - 1].thought = thought;
-			}
-			if (files) {
-				newChat[newChat.length - 1].files = files;
-			}
-			return newChat;
-		});
-	}
+  function updateLastMessage({
+    str,
+    thought,
+    end = false,
+    files,
+  }: {
+    str?: string;
+    thought?: string;
+    // end param default is false
+    end?: boolean;
+    files?: Array<any>;
+  }) {
+    setChatHistory((old) => {
+      let newChat = [...old];
+      if (str) {
+        if (end) {
+          newChat[newChat.length - 1].message = str;
+        } else {
+          newChat[newChat.length - 1].message =
+            newChat[newChat.length - 1].message + str;
+        }
+      }
+      if (thought) {
+        newChat[newChat.length - 1].thought = thought;
+      }
+      if (files) {
+        newChat[newChat.length - 1].files = files;
+      }
+      return newChat;
+    });
+  }
 
-	function handleOnClose(event: CloseEvent) {
-		if (isOpen.current) {
-			setErrorData({ title: event.reason });
-			setLockChat(false);
-			setTimeout(() => {
-				connectWS();
-			}, 1000);
-		}
-	}
+  function handleOnClose(event: CloseEvent) {
+    if (isOpen.current) {
+      setErrorData({ title: event.reason });
+      setLockChat(false);
+      setTimeout(() => {
+        connectWS();
+      }, 1000);
+    }
+  }
 
-	function handleWsMessage(data: any) {
-		if (Array.isArray(data)) {
-			//set chat history
-			setChatHistory((_) => {
-				let newChatHistory: ChatMessageType[] = [];
-				data.forEach(
-					(chatItem: {
-						intermediate_steps?: "string";
-						is_bot: boolean;
-						message: string;
-						type: string;
-						files?: Array<any>;
-					}) => {
-						if (chatItem.message) {
-							newChatHistory.push(
-								chatItem.files
-									? {
-											isSend: !chatItem.is_bot,
-											message: chatItem.message,
-											thought: chatItem.intermediate_steps,
-											files: chatItem.files,
-									  }
-									: {
-											isSend: !chatItem.is_bot,
-											message: chatItem.message,
-											thought: chatItem.intermediate_steps,
-									  }
-							);
-						}
-					}
-				);
-				return newChatHistory;
-			});
-		}
-		if (data.type === "start") {
-			addChatHistory("", false);
-			isStream = true;
-		}
-		if (data.type === "end") {
-			if (data.intermediate_steps) {
-				updateLastMessage({
-					str: data.message,
-					thought: data.intermediate_steps,
-					end: true,
-				});
-			}
-			if (data.files) {
-				updateLastMessage({
-					end: true,
-					files: data.files,
-				});
-			}
+  function handleWsMessage(data: any) {
+    if (Array.isArray(data)) {
+      //set chat history
+      setChatHistory((_) => {
+        let newChatHistory: ChatMessageType[] = [];
+        data.forEach(
+          (chatItem: {
+            intermediate_steps?: "string";
+            is_bot: boolean;
+            message: string;
+            type: string;
+            files?: Array<any>;
+          }) => {
+            if (chatItem.message) {
+              newChatHistory.push(
+                chatItem.files
+                  ? {
+                      isSend: !chatItem.is_bot,
+                      message: chatItem.message,
+                      thought: chatItem.intermediate_steps,
+                      files: chatItem.files,
+                    }
+                  : {
+                      isSend: !chatItem.is_bot,
+                      message: chatItem.message,
+                      thought: chatItem.intermediate_steps,
+                    }
+              );
+            }
+          }
+        );
+        return newChatHistory;
+      });
+    }
+    if (data.type === "start") {
+      addChatHistory("", false);
+      isStream = true;
+    }
+    if (data.type === "end") {
+      if (data.intermediate_steps) {
+        updateLastMessage({
+          str: data.message,
+          thought: data.intermediate_steps,
+          end: true,
+        });
+      }
+      if (data.files) {
+        updateLastMessage({
+          end: true,
+          files: data.files,
+        });
+      }
 
-			setLockChat(false);
-			isStream = false;
-		}
-		if (data.type === "stream" && isStream) {
-			updateLastMessage({ str: data.message });
-		}
-	}
+      setLockChat(false);
+      isStream = false;
+    }
+    if (data.type === "stream" && isStream) {
+      updateLastMessage({ str: data.message });
+    }
+  }
 
-	function connectWS() {
-		try {
-			const urlWs =
-				process.env.NODE_ENV === "development"
-					? `ws://localhost:7860/chat/${flow.id}`
-					: `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-							window.location.host
-					  }/chat/${flow.id}`;
+  function connectWS() {
+    try {
+      const urlWs =
+        process.env.NODE_ENV === "development"
+          ? `ws://localhost:7860/chat/${flow.id}`
+          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+              window.location.host
+            }/chat/${flow.id}`;
 
-			const newWs = new WebSocket(urlWs);
-			newWs.onopen = () => {
-				console.log("WebSocket connection established!");
-			};
-			console.log(flow.id);
-			newWs.onmessage = (event) => {
-				const data = JSON.parse(event.data);
-				console.log("Received data:", data);
-				handleWsMessage(data);
-				//get chat history
-			};
-			newWs.onclose = (event) => {
-				handleOnClose(event);
-			};
-			newWs.onerror = (ev) => {
-				console.log(ev, "error");
-				setErrorData({
-					title: "There was an error on web connection, please: ",
-					list: [
-						"Refresh the page",
-						"Use a new flow tab",
-						"Check if the backend is up",
-					],
-				});
-			};
-			ws.current = newWs;
-		} catch {
-			setErrorData({
-				title: "There was an error on web connection, please: ",
-				list: [
-					"Refresh the page",
-					"Use a new flow tab",
-					"Check if the backend is up",
-				],
-			});
-		}
-	}
+      const newWs = new WebSocket(urlWs);
+      newWs.onopen = () => {
+        console.log("WebSocket connection established!");
+      };
+      console.log(flow.id);
+      newWs.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        console.log("Received data:", data);
+        handleWsMessage(data);
+        //get chat history
+      };
+      newWs.onclose = (event) => {
+        handleOnClose(event);
+      };
+      newWs.onerror = (ev) => {
+        console.log(ev, "error");
+        setErrorData({
+          title: "There was an error on web connection, please: ",
+          list: [
+            "Refresh the page",
+            "Use a new flow tab",
+            "Check if the backend is up",
+          ],
+        });
+      };
+      ws.current = newWs;
+    } catch {
+      setErrorData({
+        title: "There was an error on web connection, please: ",
+        list: [
+          "Refresh the page",
+          "Use a new flow tab",
+          "Check if the backend is up",
+        ],
+      });
+    }
+  }
 
-	useEffect(() => {
-		connectWS();
-		return () => {
-			console.log("unmount");
-			console.log(ws);
-			if (ws) {
-				ws.current.close();
-			}
-		};
-	}, []);
+  useEffect(() => {
+    connectWS();
+    return () => {
+      console.log("unmount");
+      console.log(ws);
+      if (ws) {
+        ws.current.close();
+      }
+    };
+  }, []);
 
-	async function sendAll(data: sendAllProps) {
-		try {
-			if (ws) {
-				ws.current.send(JSON.stringify(data));
-			}
-		} catch (error) {
-			setErrorData({
-				title: "There was an erro sending the message",
-				list: [error.message],
-			});
-			setChatValue(data.message);
-			connectWS();
-		}
-	}
+  async function sendAll(data: sendAllProps) {
+    try {
+      if (ws) {
+        ws.current.send(JSON.stringify(data));
+      }
+    } catch (error) {
+      setErrorData({
+        title: "There was an erro sending the message",
+        list: [error.message],
+      });
+      setChatValue(data.message);
+      connectWS();
+    }
+  }
 
-	useEffect(() => {
-		if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-	}, [chatHistory]);
+  useEffect(() => {
+    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
+  }, [chatHistory]);
 
-	function validateNode(n: NodeType): Array<string> {
-		if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
-			setNoticeData({
-				title:
-					"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
-			});
-			return [];
-		}
+  function validateNode(n: NodeType): Array<string> {
+    if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
+      setNoticeData({
+        title:
+          "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
+      });
+      return [];
+    }
 
-		const {
-			type,
-			node: { template },
-		} = n.data;
+    const {
+      type,
+      node: { template },
+    } = n.data;
 
-		return Object.keys(template).reduce(
-			(errors: Array<string>, t) =>
-				errors.concat(
-					template[t].required &&
-						template[t].show &&
-						(!template[t].value || template[t].value === "") &&
-						!reactFlowInstance
-							.getEdges()
-							.some(
-								(e) =>
-									e.targetHandle.split("|")[1] === t &&
-									e.targetHandle.split("|")[2] === n.id
-							)
-						? [
-								`${type} is missing ${
-									template.display_name
-										? template.display_name
-										: toNormalCase(template[t].name)
-								}.`,
-						  ]
-						: []
-				),
-			[] as string[]
-		);
-	}
+    return Object.keys(template).reduce(
+      (errors: Array<string>, t) =>
+        errors.concat(
+          template[t].required &&
+            template[t].show &&
+            (!template[t].value || template[t].value === "") &&
+            !reactFlowInstance
+              .getEdges()
+              .some(
+                (e) =>
+                  e.targetHandle.split("|")[1] === t &&
+                  e.targetHandle.split("|")[2] === n.id
+              )
+            ? [
+                `${type} is missing ${
+                  template.display_name
+                    ? template.display_name
+                    : toNormalCase(template[t].name)
+                }.`,
+              ]
+            : []
+        ),
+      [] as string[]
+    );
+  }
 
-	function validateNodes() {
-		return reactFlowInstance
-			.getNodes()
-			.flatMap((n: NodeType) => validateNode(n));
-	}
+  function validateNodes() {
+    return reactFlowInstance
+      .getNodes()
+      .flatMap((n: NodeType) => validateNode(n));
+  }
 
-	const ref = useRef(null);
+  const ref = useRef(null);
 
-	function sendMessage() {
-		if (chatValue !== "") {
-			let nodeValidationErrors = validateNodes();
-			if (nodeValidationErrors.length === 0) {
-				setLockChat(true);
-				let message = chatValue;
-				setChatValue("");
-				addChatHistory(message, true);
-				sendAll({
-					...reactFlowInstance.toObject(),
-					message,
-					chatHistory,
-					name: flow.name,
-					description: flow.description,
-				});
-			} else {
-				setErrorData({
-					title: "Oops! Looks like you missed some required information:",
-					list: nodeValidationErrors,
-				});
-			}
-		} else {
-			setErrorData({
-				title: "Error sending message",
-				list: ["The message cannot be empty."],
-			});
-		}
-	}
-	function clearChat() {
-		setChatHistory([]);
-		ws.current.send(JSON.stringify({ clear_history: true }));
-	}
+  function sendMessage() {
+    if (chatValue !== "") {
+      let nodeValidationErrors = validateNodes();
+      if (nodeValidationErrors.length === 0) {
+        setLockChat(true);
+        let message = chatValue;
+        setChatValue("");
+        addChatHistory(message, true);
+        sendAll({
+          ...reactFlowInstance.toObject(),
+          message,
+          chatHistory,
+          name: flow.name,
+          description: flow.description,
+        });
+      } else {
+        setErrorData({
+          title: "Oops! Looks like you missed some required information:",
+          list: nodeValidationErrors,
+        });
+      }
+    } else {
+      setErrorData({
+        title: "Error sending message",
+        list: ["The message cannot be empty."],
+      });
+    }
+  }
+  function clearChat() {
+    setChatHistory([]);
+    ws.current.send(JSON.stringify({ clear_history: true }));
+  }
 
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-	}
-	return (
-		<Transition.Root show={open} appear={open} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
-				</Transition.Child>
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+  }
+  return (
+    <Transition.Root show={open} appear={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-[690px]">
-								<div className="relative w-full">
-									<button
-										onClick={() => clearChat()}
-										className="absolute top-2 right-2 hover:text-red-500 z-30"
-									>
-										<FaEraser className="w-4 h-4" />
-									</button>
-								</div>
-								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-									{chatHistory.length > 0 ? (
-										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
-									) : (
-										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
-											<span>
-												👋{" "}
-												<span className="text-gray-600 text-lg">
-													LangFlow Chat
-												</span>
-											</span>
-											<br />
-											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
-												<span className="text-base text-gray-500">
-													Start a conversation and click the agent’s thoughts{" "}
-													<span>
-														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
-													</span>{" "}
-													to inspect the chaining process.
-												</span>
-											</div>
-										</div>
-									)}
-									<div ref={ref}></div>
-								</div>
-								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-2">
-									<div className="relative w-full mt-1 rounded-md shadow-sm">
-										<ChatInput
-											chatValue={chatValue}
-											lockChat={lockChat}
-											sendMessage={sendMessage}
-											setChatValue={setChatValue}
-										/>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-[690px]">
+                <div className="relative w-full p-4">
+                  <button
+                    onClick={() => clearChat()}
+                    className="absolute top-2 right-3 hover:text-red-500 z-30"
+                  >
+                    <FaEraser className="w-4 h-4" />
+                  </button>
+                </div>
+                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide p-3">
+                  {chatHistory.length > 0 ? (
+                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+                  ) : (
+                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
+                      <span>
+                        👋{" "}
+                        <span className="text-gray-600 text-lg">
+                          LangFlow Chat
+                        </span>
+                      </span>
+                      <br />
+                      <div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+                        <span className="text-base text-gray-500">
+                          Start a conversation and click the agent’s thoughts{" "}
+                          <span>
+                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+                          </span>{" "}
+                          to inspect the chaining process.
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  <div ref={ref}></div>
+                </div>
+                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+                  <div className="relative w-full mt-1 rounded-md shadow-sm">
+                    <ChatInput
+                      chatValue={chatValue}
+                      lockChat={lockChat}
+                      sendMessage={sendMessage}
+                      setChatValue={setChatValue}
+                    />
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }

From 2ffc8b266f03ab56c333b3ed33f993441cf6d7a9 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:31:16 -0300
Subject: [PATCH 36/45] feat(nodes.py): add optional memory field to
 MidJourneyPromptChainNode class constructor

---
 src/backend/langflow/template/nodes.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/backend/langflow/template/nodes.py b/src/backend/langflow/template/nodes.py
index 61a41589b..6ce08e57b 100644
--- a/src/backend/langflow/template/nodes.py
+++ b/src/backend/langflow/template/nodes.py
@@ -123,6 +123,13 @@ class MidJourneyPromptChainNode(FrontendNode):
                 multiline=False,
                 name="llm",
             ),
+            TemplateField(
+                field_type="BaseChatMemory",
+                required=False,
+                show=True,
+                name="memory",
+                advanced=False,
+            ),
         ],
     )
     description: str = "MidJourneyPromptChain is a chain you can use to generate new MidJourney prompts."

From 84d0c28c2f50dae83719c5b316277d88abb6263b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 10 May 2023 22:38:20 -0300
Subject: [PATCH 37/45] fixed padding

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

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 6dd5bb456..6057da223 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -360,7 +360,7 @@ export default function ChatModal({
                     <FaEraser className="w-4 h-4" />
                   </button>
                 </div>
-                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide p-3">
+                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
                   ) : (

From 374a6c8f46bdc5bc09f8d4f2f6b450153f94a052 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:41:28 -0300
Subject: [PATCH 38/45] style(fileComponent): add dark mode support to file
 download button and tooltip background color and text color

---
 src/frontend/src/modals/chatModal/fileComponent/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 3e3349136..1ffb1da01 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,13 +37,13 @@ export default function FileCard({ fileName, content, fileType }) {
 				/>
 				{isHovered && (
 					<div
-						className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold`}
+						className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
 					>
 						<button
-							className="hover:scale-125 text-blue-500 py-1 px-2"
+							className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
 							onClick={handleDownload}
 						>
-							<CloudArrowDownIcon className="w-5 h-5 text-current"></CloudArrowDownIcon>
+							<CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
 						</button>
 					</div>
 				)}

From 4046a7b1e54a9f336f89969e5734626e178cb247 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:48:49 -0300
Subject: [PATCH 39/45] refactor(agents/custom.py): create CustomAgentExecutor
 abstract class and make all agents inherit from it fix(agents/custom.py): fix
 import error for NotEnoughElementsException refactor(run.py): remove unused
 import statement for loading module

---
 .../langflow/interface/agents/custom.py       | 31 +++++++++++++++----
 src/backend/langflow/interface/run.py         |  3 +-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/backend/langflow/interface/agents/custom.py b/src/backend/langflow/interface/agents/custom.py
index 5fab9bf77..d85ba8a56 100644
--- a/src/backend/langflow/interface/agents/custom.py
+++ b/src/backend/langflow/interface/agents/custom.py
@@ -1,3 +1,4 @@
+from abc import ABC
 from typing import Any, List, Optional
 
 from langchain import LLMChain
@@ -33,7 +34,25 @@ from langchain.tools.python.tool import PythonAstREPLTool
 from langchain.tools.sql_database.prompt import QUERY_CHECKER
 
 
-class JsonAgent(AgentExecutor):
+class CustomAgentExecutor(AgentExecutor, ABC):
+    """Custom agent executor"""
+
+    @staticmethod
+    def function_name():
+        return "CustomAgentExecutor"
+
+    @classmethod
+    def initialize(cls, *args, **kwargs):
+        pass
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+    def run(self, *args, **kwargs):
+        return super().run(*args, **kwargs)
+
+
+class JsonAgent(CustomAgentExecutor):
     """Json agent"""
 
     @staticmethod
@@ -69,7 +88,7 @@ class JsonAgent(AgentExecutor):
         return super().run(*args, **kwargs)
 
 
-class CSVAgent(AgentExecutor):
+class CSVAgent(CustomAgentExecutor):
     """CSV agent"""
 
     @staticmethod
@@ -117,7 +136,7 @@ class CSVAgent(AgentExecutor):
         return super().run(*args, **kwargs)
 
 
-class VectorStoreAgent(AgentExecutor):
+class VectorStoreAgent(CustomAgentExecutor):
     """Vector Store agent"""
 
     @staticmethod
@@ -155,7 +174,7 @@ class VectorStoreAgent(AgentExecutor):
         return super().run(*args, **kwargs)
 
 
-class SQLAgent(AgentExecutor):
+class SQLAgent(CustomAgentExecutor):
     """SQL agent"""
 
     @staticmethod
@@ -227,7 +246,7 @@ class SQLAgent(AgentExecutor):
         return super().run(*args, **kwargs)
 
 
-class VectorStoreRouterAgent(AgentExecutor):
+class VectorStoreRouterAgent(CustomAgentExecutor):
     """Vector Store Router Agent"""
 
     @staticmethod
@@ -266,7 +285,7 @@ class VectorStoreRouterAgent(AgentExecutor):
         return super().run(*args, **kwargs)
 
 
-class InitializeAgent(AgentExecutor):
+class InitializeAgent(CustomAgentExecutor):
     """Implementation of initialize_agent function"""
 
     @staticmethod
diff --git a/src/backend/langflow/interface/run.py b/src/backend/langflow/interface/run.py
index 05e4b49d6..af80b7acd 100644
--- a/src/backend/langflow/interface/run.py
+++ b/src/backend/langflow/interface/run.py
@@ -2,12 +2,11 @@ import contextlib
 import io
 from typing import Any, Dict
 
-from chromadb.errors import NotEnoughElementsException
+from chromadb.errors import NotEnoughElementsException  # type: ignore
 
 from langflow.api.callback import AsyncStreamingLLMCallbackHandler, StreamingLLMCallbackHandler  # type: ignore
 from langflow.cache.base import compute_dict_hash, load_cache, memoize_dict
 from langflow.graph.graph import Graph
-from langflow.interface import loading
 from langflow.utils.logger import logger
 
 

From e50e9b187c600c0214b234916eb94ebea06e9118 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:49:01 -0300
Subject: [PATCH 40/45] style(chat.py): format imports using PEP8 style guide

---
 src/backend/langflow/api/chat.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat.py b/src/backend/langflow/api/chat.py
index 490aed12c..4afa6c22f 100644
--- a/src/backend/langflow/api/chat.py
+++ b/src/backend/langflow/api/chat.py
@@ -1,4 +1,10 @@
-from fastapi import APIRouter, WebSocket, WebSocketDisconnect, WebSocketException, status
+from fastapi import (
+    APIRouter,
+    WebSocket,
+    WebSocketDisconnect,
+    WebSocketException,
+    status,
+)
 
 from langflow.api.chat_manager import ChatManager
 from langflow.utils.logger import logger

From fd5f5784b8ae88c6cfdf56b6beb77b66fc0f9f12 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Wed, 10 May 2023 22:50:43 -0300
Subject: [PATCH 41/45] refactor(api): remove unused imports in chat_manager.py
 and endpoints.py

---
 src/backend/langflow/api/chat_manager.py | 1 -
 src/backend/langflow/api/endpoints.py    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 2141b405b..395d32740 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -4,7 +4,6 @@ from collections import defaultdict
 from typing import Dict, List
 
 from fastapi import WebSocket, status
-from fastapi.websockets import WebSocketState
 
 from langflow.api.schemas import ChatMessage, ChatResponse, FileResponse
 from langflow.cache import cache_manager
diff --git a/src/backend/langflow/api/endpoints.py b/src/backend/langflow/api/endpoints.py
index 64973e163..eae0e9f60 100644
--- a/src/backend/langflow/api/endpoints.py
+++ b/src/backend/langflow/api/endpoints.py
@@ -1,5 +1,4 @@
 import logging
-from typing import Any, Dict
 
 from fastapi import APIRouter, HTTPException
 

From 03e9edd8b79b619e47e96f9d042f70b577b6d52b Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 11 May 2023 09:31:28 -0300
Subject: [PATCH 42/45] Merge branch 'dev' of
 https://github.com/logspace-ai/langflow into streaming

---
 .../src/pages/FlowPage/hooks/useUndoRedo.ts   | 109 ++++++++++++++
 src/frontend/src/pages/FlowPage/index.tsx     | 142 ++++++++++++++++--
 2 files changed, 238 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts

diff --git a/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
new file mode 100644
index 000000000..72dc6699c
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Edge, Node, useReactFlow } from 'reactflow';
+
+type UseUndoRedoOptions = {
+  maxHistorySize: number;
+  enableShortcuts: boolean;
+};
+
+type UseUndoRedo = (options?: UseUndoRedoOptions) => {
+  undo: () => void;
+  redo: () => void;
+  takeSnapshot: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+};
+
+type HistoryItem = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+const defaultOptions: UseUndoRedoOptions = {
+  maxHistorySize: 100,
+  enableShortcuts: true,
+};
+
+// https://redux.js.org/usage/implementing-undo-history
+export const useUndoRedo: UseUndoRedo = ({
+  maxHistorySize = defaultOptions.maxHistorySize,
+  enableShortcuts = defaultOptions.enableShortcuts,
+} = defaultOptions) => {
+  // the past and future arrays store the states that we can jump to
+  const [past, setPast] = useState<HistoryItem[]>([]);
+  const [future, setFuture] = useState<HistoryItem[]>([]);
+
+  const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
+
+  const takeSnapshot = useCallback(() => {
+    // push the current graph to the past state
+    setPast((past) => [
+      ...past.slice(past.length - maxHistorySize + 1, past.length),
+      { nodes: getNodes(), edges: getEdges() },
+    ]);
+
+    // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
+    setFuture([]);
+  }, [getNodes, getEdges, maxHistorySize]);
+
+  const undo = useCallback(() => {
+    // get the last state that we want to go back to
+    const pastState = past[past.length - 1];
+
+    if (pastState) {
+      // first we remove the state from the history
+      setPast((past) => past.slice(0, past.length - 1));
+      // we store the current graph for the redo operation
+      setFuture((future) => [...future, { nodes: getNodes(), edges: getEdges() }]);
+      // now we can set the graph to the past state
+      setNodes(pastState.nodes);
+      setEdges(pastState.edges);
+    }
+  }, [setNodes, setEdges, getNodes, getEdges, past]);
+
+  const redo = useCallback(() => {
+    const futureState = future[future.length - 1];
+
+    if (futureState) {
+      setFuture((future) => future.slice(0, future.length - 1));
+      setPast((past) => [...past, { nodes: getNodes(), edges: getEdges() }]);
+      setNodes(futureState.nodes);
+      setEdges(futureState.edges);
+    }
+  }, [setNodes, setEdges, getNodes, getEdges, future]);
+
+  useEffect(() => {
+    // this effect is used to attach the global event handlers
+    if (!enableShortcuts) {
+      return;
+    }
+
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+        redo();
+      } 
+      else if (event.key === 'y' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault(); // prevent the default action
+        redo();
+      } else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) {
+        undo();
+      }
+    };
+
+    document.addEventListener('keydown', keyDownHandler);
+
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [undo, redo, enableShortcuts]);
+
+  return {
+    undo,
+    redo,
+    takeSnapshot,
+    canUndo: !!past.length,
+    canRedo: !!future.length,
+  };
+};
+
+export default useUndoRedo;
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 0c7e46d06..ce28e0305 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ReactFlow, {
 	Background,
 	Controls,
@@ -10,6 +10,12 @@ import ReactFlow, {
 	EdgeChange,
 	Connection,
 	Edge,
+	useKeyPress,
+	useOnSelectionChange,
+	NodeDragHandler,
+	OnEdgesDelete,
+	OnNodesDelete,
+	SelectionDragHandler,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -22,6 +28,7 @@ import ConnectionLineComponent from "./components/ConnectionLineComponent";
 import { FlowType, NodeType } from "../../types/flow";
 import { APIClassType } from "../../types/api";
 import { isValidConnection } from "../../utils";
+import useUndoRedo from "./hooks/useUndoRedo";
 
 const nodeTypes = {
 	genericNode: GenericNode,
@@ -30,11 +37,96 @@ const nodeTypes = {
 var _ = require("lodash");
 
 export default function FlowPage({ flow }: { flow: FlowType }) {
-	let { updateFlow, incrementNodeId } = useContext(TabsContext);
+	let { updateFlow, incrementNodeId } =
+		useContext(TabsContext);
 	const { types, reactFlowInstance, setReactFlowInstance, templates } =
 		useContext(typesContext);
 	const reactFlowWrapper = useRef(null);
 
+	const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
+
+	const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		if ((event.ctrlKey || event.metaKey) && (event.key === 'c') && lastSelection) {
+			event.preventDefault();
+			setLastCopiedSelection(lastSelection);
+		}
+		if ((event.ctrlKey || event.metaKey) && (event.key === 'v') && lastCopiedSelection) {
+			event.preventDefault();
+			paste();
+		}
+	}
+
+	const [lastSelection, setLastSelection] = useState(null);
+	const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
+
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+
+	const handleMouseMove = (event) => {
+		setPosition({ x: event.clientX, y: event.clientY });
+	};
+
+	useOnSelectionChange({
+		onChange: (flow) => { setLastSelection(flow); },
+	})
+
+	let paste = () => {
+		let minimumX = Infinity;
+		let minimumY = Infinity;
+		let idsMap = {};
+		lastCopiedSelection.nodes.forEach((n) => {
+			if (n.position.y < minimumY) {
+				minimumY = n.position.y
+			}
+			if (n.position.x < minimumX) {
+				minimumX = n.position.x;
+			}
+		});
+
+		const bounds = reactFlowWrapper.current.getBoundingClientRect();
+		const insidePosition = reactFlowInstance.project({
+			x: position.x - bounds.left,
+			y: position.y - bounds.top
+		});
+
+		lastCopiedSelection.nodes.forEach((n) => {
+
+			// Generate a unique node ID
+			let newId = getId();
+			idsMap[n.id] = newId;
+
+			// Create a new node object
+			const newNode: NodeType = {
+				id: newId,
+				type: "genericNode",
+				position: {
+					x: insidePosition.x + n.position.x - minimumX,
+					y: insidePosition.y + n.position.y - minimumY,
+				},
+				data: {
+					...n.data,
+					id: newId,
+				},
+			};
+
+			// Add the new node to the list of nodes in state
+			setNodes((nds) => nds.map((e) => ({ ...e, selected: false })).concat({ ...newNode, selected: false }));
+		})
+
+		lastCopiedSelection.edges.forEach((e) => {
+			let source = idsMap[e.source];
+			let target = idsMap[e.target];
+			let sourceHandleSplitted = e.sourceHandle.split('|');
+			let sourceHandle = sourceHandleSplitted[0] + '|' + source + '|' + sourceHandleSplitted.slice(2).join('|');
+			let targetHandleSplitted = e.targetHandle.split('|');
+			let targetHandle = targetHandleSplitted.slice(0, -1).join('|') + '|' + target;
+			let id = "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle;
+			setEdges((eds) =>
+				addEdge({ source, target, sourceHandle, targetHandle, id, className: "animate-pulse", selected: false }, eds.map((e) => ({ ...e, selected: false })))
+			);
+		})
+	}
+
+
 	const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
 	const { setErrorData } = useContext(alertContext);
 	const [nodes, setNodes, onNodesChange] = useNodesState(
@@ -46,6 +138,10 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 	const { setViewport } = useReactFlow();
 	const edgeUpdateSuccessful = useRef(true);
 
+	function getId() {
+		return `dndnode_` + incrementNodeId();
+	}
+
 	useEffect(() => {
 		if (reactFlowInstance && flow) {
 			flow.data = reactFlowInstance.toObject();
@@ -80,6 +176,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 
 	const onConnect = useCallback(
 		(params: Connection) => {
+			takeSnapshot();
 			setEdges((eds) =>
 				addEdge({ ...params, className: "animate-pulse" }, eds)
 			);
@@ -88,9 +185,26 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 				return newX;
 			});
 		},
-		[setEdges, setNodes]
+		[setEdges, setNodes, takeSnapshot]
 	);
 
+	const onNodeDragStart: NodeDragHandler = useCallback(() => {
+		// 👇 make dragging a node undoable
+		takeSnapshot();
+		// 👉 you can place your event handlers here
+	}, [takeSnapshot]);
+
+	const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
+		// 👇 make dragging a selection undoable
+		takeSnapshot();
+	}, [takeSnapshot]);
+
+
+	const onEdgesDelete: OnEdgesDelete = useCallback(() => {
+		// 👇 make deleting edges undoable
+		takeSnapshot();
+	}, [takeSnapshot]);
+
 	const onDragOver = useCallback((event: React.DragEvent) => {
 		event.preventDefault();
 		event.dataTransfer.dropEffect = "move";
@@ -99,11 +213,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 	const onDrop = useCallback(
 		(event: React.DragEvent) => {
 			event.preventDefault();
-
-			// Helper function to generate a unique node ID
-			function getId() {
-				return `dndnode_` + incrementNodeId();
-			}
+			takeSnapshot();
 
 			// Get the current bounds of the ReactFlow wrapper element
 			const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
@@ -151,16 +261,17 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 			}
 		},
 		// Specify dependencies for useCallback
-		[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
+		[incrementNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
 	);
 
-	const onDelete = (mynodes) => {
+	const onDelete = useCallback((mynodes) => {
+		takeSnapshot();
 		setEdges(
 			edges.filter(
 				(ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
 			)
 		);
-	};
+	}, [takeSnapshot, edges, setEdges]);
 
 	const onEdgeUpdateStart = useCallback(() => {
 		edgeUpdateSuccessful.current = false;
@@ -185,7 +296,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 	}, []);
 
 	return (
-		<div className="w-full h-full" ref={reactFlowWrapper}>
+		<div className="w-full h-full" onMouseMove={handleMouseMove} ref={reactFlowWrapper}>
 			{Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
 				<>
 					<ReactFlow
@@ -196,6 +307,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 						edges={edges}
 						onNodesChange={onNodesChange}
 						onEdgesChange={onEdgesChangeMod}
+						onKeyDown={(e) => onKeyDown(e)}
 						onConnect={onConnect}
 						onLoad={setReactFlowInstance}
 						onInit={setReactFlowInstance}
@@ -203,6 +315,9 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 						onEdgeUpdate={onEdgeUpdate}
 						onEdgeUpdateStart={onEdgeUpdateStart}
 						onEdgeUpdateEnd={onEdgeUpdateEnd}
+						onNodeDragStart={onNodeDragStart}
+						onSelectionDragStart={onSelectionDragStart}
+						onEdgesDelete={onEdgesDelete}
 						connectionLineComponent={ConnectionLineComponent}
 						onDragOver={onDragOver}
 						onDrop={onDrop}
@@ -210,7 +325,8 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 						selectNodesOnDrag={false}
 					>
 						<Background className="dark:bg-gray-900" />
-						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
+						</Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
 				</>

From b16084d9272f843cbbfb0f21b9eca759aa4580a1 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 11 May 2023 10:18:07 -0300
Subject: [PATCH 43/45] fix(chat_manager.py): limit the length of the exception
 message to 120 characters

---
 src/backend/langflow/api/chat_manager.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 395d32740..03c2f09b7 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -177,7 +177,7 @@ class ChatManager:
             logger.exception(e)
             # send a message to the client
             await self.active_connections[client_id].close(
-                code=status.WS_1011_INTERNAL_ERROR, reason=str(e)
+                code=status.WS_1011_INTERNAL_ERROR, reason=str(e)[:120]
             )
             self.disconnect(client_id)
         finally:

From 2e16618e4773f9865dd2324138b75bc3f48f01da Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 11 May 2023 11:15:51 -0300
Subject: [PATCH 44/45] refactor(chat_manager.py): use dict.pop() method to
 remove client_id from active_connections dictionary

---
 src/backend/langflow/api/chat_manager.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/langflow/api/chat_manager.py b/src/backend/langflow/api/chat_manager.py
index 03c2f09b7..3636a94f3 100644
--- a/src/backend/langflow/api/chat_manager.py
+++ b/src/backend/langflow/api/chat_manager.py
@@ -90,7 +90,7 @@ class ChatManager:
         self.active_connections[client_id] = websocket
 
     def disconnect(self, client_id: str):
-        del self.active_connections[client_id]
+        self.active_connections.pop(client_id, None)
 
     async def send_message(self, client_id: str, message: str):
         websocket = self.active_connections[client_id]

From 7fbce31a508d3a2a570f6ddd44774ad488b5bded Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 11 May 2023 11:28:12 -0300
Subject: [PATCH 45/45] refactor(chatModal): improve code readability and
 formatting

---
 src/frontend/src/modals/chatModal/index.tsx | 36 ++++++++++-----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 6057da223..50ad42b23 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -115,16 +115,16 @@ export default function ChatModal({
               newChatHistory.push(
                 chatItem.files
                   ? {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                      files: chatItem.files,
-                    }
+                    isSend: !chatItem.is_bot,
+                    message: chatItem.message,
+                    thought: chatItem.intermediate_steps,
+                    files: chatItem.files,
+                  }
                   : {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                    }
+                    isSend: !chatItem.is_bot,
+                    message: chatItem.message,
+                    thought: chatItem.intermediate_steps,
+                  }
               );
             }
           }
@@ -164,9 +164,8 @@ export default function ChatModal({
       const urlWs =
         process.env.NODE_ENV === "development"
           ? `ws://localhost:7860/chat/${flow.id}`
-          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-              window.location.host
-            }/chat/${flow.id}`;
+          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host
+          }/chat/${flow.id}`;
 
       const newWs = new WebSocket(urlWs);
       newWs.onopen = () => {
@@ -224,7 +223,7 @@ export default function ChatModal({
       }
     } catch (error) {
       setErrorData({
-        title: "There was an erro sending the message",
+        title: "There was an error sending the message",
         list: [error.message],
       });
       setChatValue(data.message);
@@ -264,12 +263,11 @@ export default function ChatModal({
                   e.targetHandle.split("|")[2] === n.id
               )
             ? [
-                `${type} is missing ${
-                  template.display_name
-                    ? template.display_name
-                    : toNormalCase(template[t].name)
-                }.`,
-              ]
+              `${type} is missing ${template.display_name
+                ? template.display_name
+                : toNormalCase(template[t].name)
+              }.`,
+            ]
             : []
         ),
       [] as string[]