diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx index b435cca0b..cd6a976be 100644 --- a/src/frontend/src/components/CrashErrorComponent/index.tsx +++ b/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 (
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx index 2be327904..a390da8d2 100644 --- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx +++ b/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 { diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index 6e5560bbd..8d71162de 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/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); diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx index 406dad793..0cd3c9ef0 100644 --- a/src/frontend/src/components/loadingComponent/index.tsx +++ b/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 (
{ if (disabled) { diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index d4a5c887e..6afad22b5 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/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); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 901371d30..b9b97c97e 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/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(); diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx index 162ffcf45..1a53ec312 100644 --- a/src/frontend/src/modals/NodeModal/index.tsx +++ b/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); diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index deae92cbe..70cccf694 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -26,21 +26,21 @@ 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(); } } - // Check for custom code errors - function handleClick() { + // Check for custom code errors + function handleClick(): void { postValidateCode(code) .then((apiReturn) => { if (apiReturn.data) { diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index d9574613b..b5ce1ce84 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/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(); diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index ab5081dfc..82d663e3c 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/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; diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx index 63f224e92..1b4708549 100644 --- a/src/frontend/src/modals/formModal/chatInput/index.tsx +++ b/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(); diff --git a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx index ce121a7cf..2dd02eb05 100644 --- a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx +++ b/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(false); const copyToClipboard = () => { diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 8a64e2f58..d2e643a10 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/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; diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 48dfbc6ea..5b1f8277b 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/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 { 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]); diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 5505f38c0..eacab3eeb 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/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, "
"); - const TextAreaContentView = () => { + const TextAreaContentView = (): JSX.Element => { return ( { sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length; diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 0a998d56e..5558dd13e 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/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; diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index 8c4f8a0d2..cf621807d 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/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([]); 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) => { diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 0dd042140..18178d37f 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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( diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 6bfacc8b9..6fc218161 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -8,7 +8,7 @@ import { TabsContext } from "../../contexts/tabsContext"; export default function HomePage(): JSX.Element { const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } = useContext(TabsContext); - + // Set a null id useEffect(() => { setTabId(""); diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 81cfbcb15..17ecee167 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -226,7 +226,7 @@ export type documentloadersType = { BSHTMLLoader: dataObjType; CSVLoader: dataObjType; CoNLLULoader: dataObjType; - CollegeConfidentialLoader: dataObjType; + CollegeConfidentialLoader: dataObjType; DirectoryLoader: dataObjType; EverNoteLoader: dataObjType; FacebookChatLoader: dataObjType; @@ -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; @@ -388,7 +388,7 @@ export type vectorStoresType = { export type wrappersType = { SQLDatabase: dataObjType; - TextRequestsWrapper: dataObjType; + TextRequestsWrapper: dataObjType; }; export type dataType = { @@ -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; tabId: string; -} +}; + +export type chatInputType = { + chatValue: string; + inputRef: { + current: any; + }; + lockChat: boolean; + noInput: boolean; + sendMessage: () => void; + setChatValue: (value: string) => void; +}; diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 63efde176..bea1fcb01 100644 --- a/src/frontend/src/utils/utils.ts +++ b/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 = `{${name}}`; 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)`; -}; +}