refactor[modals]: Add types to functions that didnt have it

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -1,4 +1,7 @@
-export default function CrashErrorComponent({ error, resetErrorBoundary }): JSX.Element {
+export default function CrashErrorComponent({
+  error,
+  resetErrorBoundary,
+}): JSX.Element {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
       <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">

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

@@ -8,10 +8,15 @@ import {
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants/constants";
 import { alertContext } from "../../../contexts/alertContext";
-import IconComponent from "../../genericIconComponent";
 import { chatTriggerPropType } from "../../../types/components";
+import IconComponent from "../../genericIconComponent";
 
-export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }: chatTriggerPropType): JSX.Element {
+export default function ChatTrigger({
+  open,
+  setOpen,
+  isBuilt,
+  canOpen,
+}: chatTriggerPropType): JSX.Element {
   const { setErrorData } = useContext(alertContext);
 
   function handleClick(): void {

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -13,9 +13,9 @@ import { Link, useNavigate } from "react-router-dom";
 import { alertContext } from "../../../../contexts/alertContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
+import { menuBarPropsType } from "../../../../types/components";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
-import { menuBarPropsType } from "../../../../types/components";
 
 export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);

src/frontend/src/components/loadingComponent/index.tsx

@@ -1,6 +1,8 @@
 import { LoadingComponentProps } from "../../types/components";
 
-export default function LoadingComponent({ remSize }: LoadingComponentProps): JSX.Element {
+export default function LoadingComponent({
+  remSize,
+}: LoadingComponentProps): JSX.Element {
   return (
     <div role="status" className="m-auto w-min">
       <svg

src/frontend/src/components/toggleComponent/index.tsx

@@ -8,7 +8,6 @@ export default function ToggleComponent({
   setEnabled,
   disabled,
 }: ToggleComponentType): JSX.Element {
-
   // set component state as disabled
   useEffect(() => {
     if (disabled) {

src/frontend/src/modals/ApiModal/index.tsx

@@ -53,7 +53,7 @@ import {
   getPythonApiCode,
   getPythonCode,
 } from "../../utils/utils";
-export default function ApiModal({ flow }: { flow: FlowType }) {
+export default function ApiModal({ flow }: { flow: FlowType }): JSX.Element {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -36,7 +36,11 @@ import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
 
-export default function EditNodeModal({ data }: { data: NodeDataType }) {
+export default function EditNodeModal({
+  data,
+}: {
+  data: NodeDataType;
+}): JSX.Element {
   const [open, setOpen] = useState(true);
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node.template).filter(
@@ -66,7 +70,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     closePopUp();
   }
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       closePopUp();

src/frontend/src/modals/NodeModal/index.tsx

@@ -9,7 +9,11 @@ import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, toTitleCase } from "../../utils/utils";
 import ModalField from "./components/ModalField";
 
-export default function NodeModal({ data }: { data: NodeDataType }) {
+export default function NodeModal({
+  data,
+}: {
+  data: NodeDataType;
+}): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -26,13 +26,13 @@ export default function CodeAreaModal({
   value: string;
   nodeClass: APIClassType;
   setNodeClass: (Class: APIClassType) => void;
-}) {
+}): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     if (x === false) {
       setCloseEdit("codearea");
       closePopUp();
@@ -40,7 +40,7 @@ export default function CodeAreaModal({
   }
 
   // Check for custom code errors
-  function handleClick() {
+  function handleClick(): void {
     postValidateCode(code)
       .then((apiReturn) => {
         if (apiReturn.data) {

src/frontend/src/modals/exportModal/index.tsx

@@ -18,7 +18,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 
-export default function ExportModal() {
+export default function ExportModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const ref = useRef();

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -16,7 +16,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 
-export default function FlowSettingsModal() {
+export default function FlowSettingsModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
@@ -28,7 +28,7 @@ export default function FlowSettingsModal() {
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       setTimeout(() => {
@@ -36,7 +36,7 @@ export default function FlowSettingsModal() {
       }, 300);
     }
   }
-  function handleClick() {
+  function handleClick(): void {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
     savedFlow.description = description;

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

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
+import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 
 export default function ChatInput({
@@ -9,7 +10,7 @@ export default function ChatInput({
   setChatValue,
   inputRef,
   noInput,
-}) {
+}: chatInputType): JSX.Element {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();

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

@@ -9,7 +9,7 @@ interface Props {
   value: string;
 }
 
-export function CodeBlock({ language, value }) {
+export function CodeBlock({ language, value }: Props): JSX.Element {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {

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

@@ -20,7 +20,7 @@ export default function ChatMessage({
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
-}) {
+}): JSX.Element {
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
   const template = chat.template;

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

@@ -34,7 +34,7 @@ export default function FormModal({
   open: boolean;
   setOpen: Function;
   flow: FlowType;
-}) {
+}): JSX.Element {
   const { tabsState, setTabsState } = useContext(TabsContext);
   const [chatValue, setChatValue] = useState(() => {
     try {
@@ -147,7 +147,7 @@ export default function FormModal({
     });
   }
 
-  function handleOnClose(event: CloseEvent) {
+  function handleOnClose(event: CloseEvent): void {
     if (isOpen.current) {
       setErrorData({ title: event.reason });
       setTimeout(() => {
@@ -157,7 +157,10 @@ export default function FormModal({
     }
   }
 
-  function getWebSocketUrl(chatId, isDevelopment = false) {
+  function getWebSocketUrl(
+    chatId: string,
+    isDevelopment: boolean = false
+  ): string {
     const isSecureProtocol = window.location.protocol === "https:";
     const webSocketProtocol = isSecureProtocol ? "wss" : "ws";
     const host = isDevelopment ? "localhost:7860" : window.location.host;
@@ -238,7 +241,7 @@ export default function FormModal({
     }
   }
 
-  function connectWS() {
+  function connectWS(): void {
     try {
       const urlWs = getWebSocketUrl(
         id.current,
@@ -305,7 +308,7 @@ export default function FormModal({
     // do not add connectWS on dependencies array
   }, [lockChat]);
 
-  async function sendAll(data: sendAllProps) {
+  async function sendAll(data: sendAllProps): Promise<void> {
     try {
       if (ws) {
         ws.current.send(JSON.stringify(data));
@@ -332,7 +335,7 @@ export default function FormModal({
     }
   }, [open]);
 
-  function sendMessage() {
+  function sendMessage(): void {
     let nodeValidationErrors = validateNodes(reactFlowInstance);
     if (nodeValidationErrors.length === 0) {
       setLockChat(true);
@@ -365,17 +368,17 @@ export default function FormModal({
       });
     }
   }
-  function clearChat() {
+  function clearChat(): void {
     setChatHistory([]);
     ws.current.send(JSON.stringify({ clear_history: true }));
     if (lockChat) setLockChat(false);
   }
 
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
   }
 
-  function handleOnCheckedChange(checked: boolean, i: string) {
+  function handleOnCheckedChange(checked: boolean, i: string): void {
     if (checked === true) {
       setChatKey(i);
       setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);

src/frontend/src/modals/genericModal/index.tsx

@@ -44,7 +44,7 @@ export default function GenericModal({
   type: number;
   nodeClass?: APIClassType;
   setNodeClass?: (Class: APIClassType) => void;
-}) {
+}): JSX.Element {
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
   const [myModalType] = useState(type);
@@ -56,7 +56,7 @@ export default function GenericModal({
     useContext(alertContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     if (x === false) {
       setCloseEdit("generic");
       closePopUp();
@@ -65,7 +65,7 @@ export default function GenericModal({
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
 
-  function checkVariables(valueToCheck) {
+  function checkVariables(valueToCheck: string): void {
     const regex = /\{([^{}]+)\}/g;
     const matches = [];
     let match;
@@ -111,7 +111,7 @@ export default function GenericModal({
     .replace(regexHighlight, varHighlightHTML({ name: "$1" }))
     .replace(/\n/g, "<br />");
 
-  const TextAreaContentView = () => {
+  const TextAreaContentView = (): JSX.Element => {
     return (
       <SanitizedHTMLWrapper
         className={getClassByNumberLength()}
@@ -124,7 +124,7 @@ export default function GenericModal({
     );
   };
 
-  function getClassByNumberLength() {
+  function getClassByNumberLength(): string {
     let sumOfCaracteres: number = 0;
     wordsHighlight.forEach((element) => {
       sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length;

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -19,7 +19,7 @@ export default function ButtonBox({
   textColor: string;
   deactivate?: boolean;
   size: "small" | "medium" | "big";
-}) {
+}): JSX.Element {
   let bigCircle: string;
   let smallCircle: string;
   let titleFontSize: string;

src/frontend/src/modals/importModal/index.tsx

@@ -24,7 +24,7 @@ import { FlowType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
 import ButtonBox from "./buttonBox";
 
-export default function ImportModal() {
+export default function ImportModal(): JSX.Element {
   const [open, setOpen] = useState(true);
   const { setErrorData } = useContext(alertContext);
   const { closePopUp } = useContext(PopUpContext);
@@ -33,7 +33,7 @@ export default function ImportModal() {
   const [loadingExamples, setLoadingExamples] = useState(false);
   const [examples, setExamples] = useState<FlowType[]>([]);
   const { uploadFlow, addFlow } = useContext(TabsContext);
-  function setModalOpen(x: boolean) {
+  function setModalOpen(x: boolean): void {
     setOpen(x);
     if (x === false) {
       setTimeout(() => {
@@ -42,7 +42,7 @@ export default function ImportModal() {
     }
   }
 
-  function handleExamples() {
+  function handleExamples(): void {
     setLoadingExamples(true);
     getExamples()
       .then((result) => {

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -5,7 +5,6 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { classNames } from "../../../../utils/utils";
-import { nodeToolbarType } from "../../../../types/components";
 
 const NodeToolbarComponent = (props): JSX.Element => {
   const [nodeLength, setNodeLength] = useState(

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

@@ -269,12 +269,12 @@ export type chainsType = {
   LLMCheckerChain: dataObjType;
   LLMMathChain: dataObjType;
   MidJourneyPromptChain: dataObjType;
-  RetrievalQA: dataObjType
+  RetrievalQA: dataObjType;
   RetrievalQAWithSourcesChain: dataObjType;
   SQLDatabaseChain: dataObjType;
   SeriesCharacterChain: dataObjType;
   TimeTravelGuideChain: dataObjType;
-}
+};
 
 export type embeddingsType = {
   CohereEmbeddings: dataObjType;
@@ -292,7 +292,7 @@ export type llmsTypes = {
   LlamaCpp: dataObjType;
   OpenAI: dataObjType;
   VertexAI: dataObjType;
-}
+};
 
 export type memoriesType = {
   ConversationBufferMemory: dataObjType;
@@ -316,7 +316,7 @@ export type promptsType = {
   HumanMessagePromptTemplate: dataObjType;
   PromptTemplate: dataObjType;
   SystemMessagePromptTemplate: dataObjType;
-}
+};
 
 export type retrieversType = {
   MultiQueryRetriever: dataObjType;
@@ -347,7 +347,7 @@ export type toolsType = {
   JsonSpec: dataObjType;
   ListSQLDatabaseTool: dataObjType;
   "News API": dataObjType;
-  'PAL-MATH': dataObjType;
+  "PAL-MATH": dataObjType;
   "Podcast API": dataObjType;
   PythonAstREPLTool: dataObjType;
   PythonFunction: dataObjType;
@@ -360,7 +360,7 @@ export type toolsType = {
   RequestsPostTool: dataObjType;
   RequestsPutTool: dataObjType;
   Search: dataObjType;
-  'TMDB API': dataObjType;
+  "TMDB API": dataObjType;
   Tool: dataObjType;
   WikipediaQueryRun: dataObjType;
   WolframAlphaQueryRun: dataObjType;
@@ -403,7 +403,7 @@ export type dataType = {
   retrievers?: retrieversType;
   textsplitters?: textSplittersType;
   toolkits?: toolkitsType;
-  tools?: toolsType
+  tools?: toolsType;
   utilities?: utilitiesType;
   vectorstores?: vectorStoresType;
   wrappers?: wrappersType;
@@ -414,7 +414,7 @@ export type tweakType = {
   "LLMChain-zPC3w": object;
   "PromptTemplate-iNj5W": object;
   "ConversationBufferMemory-JnodM": object;
-}
+};
 
 export type nodeToolbarType = {
   data: {
@@ -438,7 +438,7 @@ export type chatTriggerPropType = {
   isBuilt: boolean;
   canOpen: boolean;
   setOpen: (can: boolean) => void;
-}
+};
 
 export type headerFlowsType = {
   data: object;
@@ -446,9 +446,20 @@ export type headerFlowsType = {
   id: string;
   name: string;
   style?: FlowStyleType;
-}
+};
 
 export type menuBarPropsType = {
   flows: Array<headerFlowsType>;
   tabId: string;
-}
+};
+
+export type chatInputType = {
+  chatValue: string;
+  inputRef: {
+    current: any;
+  };
+  lockChat: boolean;
+  noInput: boolean;
+  sendMessage: () => void;
+  setChatValue: (value: string) => void;
+};

src/frontend/src/utils/utils.ts

@@ -1,7 +1,12 @@
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
-import { IVarHighlightType, dataType, groupedObjType, tweakType } from "../types/components";
+import {
+  IVarHighlightType,
+  dataType,
+  groupedObjType,
+  tweakType,
+} from "../types/components";
 import { FlowType } from "../types/flow";
 import { TabsState } from "../types/tabs";
 import { buildTweaks } from "./reactflowUtils";
@@ -85,7 +90,12 @@ export function checkUpperWords(str: string): string {
   return words.join(" ");
 }
 
-export function groupByFamily(data: dataType, baseClasses: string, left: boolean, type: string): groupedObjType[] {
+export function groupByFamily(
+  data: dataType,
+  baseClasses: string,
+  left: boolean,
+  type: string
+): groupedObjType[] {
   let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string; component: string }[] = [];
@@ -259,7 +269,7 @@ export function getRandomKeyByssmm(): string {
 export function varHighlightHTML({ name }: IVarHighlightType): string {
   const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
   return html;
-};
+}
 
 export function buildTweakObject(tweak: tweakType[]): string {
   tweak.forEach((el) => {
@@ -331,7 +341,7 @@ def run_flow(inputs: dict, flow_id: str, tweaks: Optional[dict] = None) -> dict:
 # Setup any tweaks you want to apply to the flow
 inputs = ${inputs}
 print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS))`;
-};
+}
 
 /**
  * Function to get the curl code for the API
@@ -357,7 +367,7 @@ export function getCurlCode(
       ? buildTweakObject(tweak)
       : JSON.stringify(tweaks, null, 2)
   }}'`;
-};
+}
 
 /**
  * Function to get the python code for the API
@@ -382,4 +392,4 @@ flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
 inputs = ${inputs}
 flow(inputs)`;
-};
+}