Fix more type errors

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

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -40,8 +40,8 @@ export default function ParameterComponent({
   info = "",
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
-  const refHtml = useRef<HTMLDivElement>(null);
+  const refHtml = useRef<HTMLDivElement & ReactNode>(null);
-  const infoHtml = useRef<HTMLDivElement>(null);
+  const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { setTabsState, tabId, save, flows } = useContext(TabsContext);
@@ -86,6 +86,7 @@ export default function ParameterComponent({
 
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
+    // @ts-ignore
     infoHtml.current = (
       <div className="h-full w-full break-words">
         {info.split("\n").map((line, i) => (
@@ -98,9 +99,10 @@ export default function ParameterComponent({
   }, [info]);
 
   function renderTooltips() {
-    let groupedObj = groupByFamily(myData, tooltipTitle, left, flow);
+    let groupedObj = groupByFamily(myData, tooltipTitle!, left, flow!);
 
     if (groupedObj && groupedObj.length > 0) {
+      //@ts-ignore
       refHtml.current = groupedObj.map((item, i) => {
         const Icon: any =
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
@@ -148,6 +150,7 @@ export default function ParameterComponent({
         );
       });
     } else {
+      //@ts-ignore
       refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
     }
   }

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

@@ -44,10 +44,10 @@ export default function Chat({ flow }: ChatType): JSX.Element {
   }, [flow]);
 
   const prevNodesRef = useRef<any[] | undefined>();
-  const nodes = useNodes();
+  const nodes: NodeType[] = useNodes();
   useEffect(() => {
     const prevNodes = prevNodesRef.current;
-    const currentNodes = nodes.map((node: NodeType) =>
+    const currentNodes = nodes.map((node: NodeType) => 
       _.cloneDeep(node.data.node?.template)
     );
     if (

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

@@ -26,12 +26,12 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
 
   function handleAddFlow() {
     try {
-      addFlow(null!, true).then((id) => {
+      addFlow(null, true).then((id) => {
         navigate("/flow/" + id);
       });
       // saveFlowStyleInDataBase();
     } catch (err) {
-      setErrorData(err);
+      setErrorData(err as { title: string; list?: Array<string> });
     }
   }
   let current_flow = flows.find((flow) => flow.id === tabId);

src/frontend/src/components/ui/rename-label.tsx

@@ -30,7 +30,7 @@ export default function RenameLabel(props) {
     resizeInput();
   }, [isRename]);
 
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const resizeInput = () => {
     const input = inputRef.current;

src/frontend/src/contexts/alertContext.tsx

@@ -44,7 +44,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   });
   const [successOpen, setSuccessOpen] = useState(false);
   const [notificationCenter, setNotificationCenter] = useState(false);
-  const [notificationList, setNotificationList] = useState([]);
+  const [notificationList, setNotificationList] = useState<AlertItemType[]>([]);
   const pushNotificationList = (notification: AlertItemType) => {
     setNotificationList((old) => {
       let newNotificationList = _.cloneDeep(old);

src/frontend/src/contexts/tabsContext.tsx

@@ -382,8 +382,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         id: newId,
         type: "genericNode",
         position: {
-          x: insidePosition.x + n.position.x - minimumX,
+          x: insidePosition.x + n.position!.x - minimumX,
-          y: insidePosition.y + n.position.y - minimumY,
+          y: insidePosition.y + n.position!.y - minimumY,
         },
         data: {
           ..._.cloneDeep(n.data),

src/frontend/src/contexts/typesContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
-import { Node } from "reactflow";
+import { Node, ReactFlowInstance } from "reactflow";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
@@ -22,13 +22,13 @@ export const typesContext = createContext<typesContextType>(initialValue);
 
 export function TypesProvider({ children }: { children: ReactNode }) {
   const [types, setTypes] = useState({});
-  const [reactFlowInstance, setReactFlowInstance] = useState(null);
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
   const [templates, setTemplates] = useState({});
   const [data, setData] = useState({});
 
   useEffect(() => {
     let delay = 1000; // Start delay of 1 second
-    let intervalId = null;
+    let intervalId;
     let retryCount = 0; // Count of retry attempts
     const maxRetryCount = 5; // Max retry attempts
 

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

@@ -24,6 +24,7 @@ import {
   getWidgetCode,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import { tweakType } from "../../types/components";
 
 const ApiModal = forwardRef(
   (
@@ -40,7 +41,7 @@ const ApiModal = forwardRef(
   ) => {
     const [open, setOpen] = useState(false);
     const [activeTab, setActiveTab] = useState("0");
-    const tweak = useRef([]);
+    const tweak = useRef<tweakType[]>([]);
     const tweaksList = useRef([]);
     const { setTweak, getTweak, tabsState } = useContext(TabsContext);
     const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);

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

@@ -14,7 +14,7 @@ export default function FlowSettingsModal({
 }: FlowSettingsPropsType): JSX.Element {
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
-  const { flows, tabId, updateFlow, setTabsState, saveFlow } =
+  const { flows, tabId, updateFlow, saveFlow } =
     useContext(TabsContext);
   const maxLength = 50;
   const [name, setName] = useState(flows.find((f) => f.id === tabId)!.name);

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

@@ -189,7 +189,7 @@ export default function ChatMessage({
                   ? template?.split("\n")?.map((line, index) => {
                       const regex = /{([^}]+)}/g;
                       let match;
-                      let parts = [];
+                      let parts: Array<JSX.Element | string> = [];
                       let lastIndex = 0;
                       while ((match = regex.exec(line)) !== null) {
                         // Push text up to the match

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

@@ -63,7 +63,7 @@ export default function FormModal({
   const ws = useRef<WebSocket | null>(null);
   const [lockChat, setLockChat] = useState(false);
   const isOpen = useRef(open);
-  const messagesRef = useRef(null);
+  const messagesRef = useRef<HTMLDivElement | null>(null);
   const id = useRef(flow.id);
   const tabsStateFlowId = tabsState[flow.id];
   const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
@@ -326,7 +326,7 @@ export default function FormModal({
     if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
   }, [chatHistory]);
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (open && ref.current) {
@@ -348,8 +348,8 @@ export default function FormModal({
         tabsState[flow.id].formKeysData.template
       );
       sendAll({
-        ...reactFlowInstance?.toObject(),
+        ...reactFlowInstance?.toObject()!,
-        inputs: inputs,
+        inputs: inputs!,
         chatHistory,
         name: flow.name,
         description: flow.description,
@@ -579,7 +579,7 @@ export default function FormModal({
                         setTabsState((old) => {
                           let newTabsState = _.cloneDeep(old);
                           newTabsState[id.current].formKeysData.input_keys![
-                            chatKey
+                            chatKey!
                           ] = value;
                           return newTabsState;
                         });

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

@@ -42,7 +42,7 @@ export default function GenericModal({
   const [wordsHighlight, setWordsHighlight] = useState<string[]>([]);
   const { setErrorData, setSuccessData, setNoticeData } =
     useContext(alertContext);
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement>();
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
 

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

@@ -59,7 +59,7 @@ export default function ExtraSidebar(): JSX.Element {
   const flow = flows.find((f) => f.id === tabId);
   useEffect(() => {
     // show components with error on load
-    let errors = [];
+    let errors: string[] = [];
     Object.keys(templates).forEach((component) => {
       if (templates[component].error) {
         errors.push(component);

src/frontend/src/types/api/index.ts

@@ -37,7 +37,7 @@ export type sendAllProps = {
   name: string;
   description: string;
   viewport: Viewport;
-  inputs: { text: string };
+  inputs: { text?: string };
 
   chatHistory: { message: string | object; isSend: boolean }[];
 };

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

@@ -145,7 +145,7 @@ export type ShadTooltipProps = {
   style?: string;
 };
 export type ShadToolTipType = {
-  content?: ReactNode;
+  content?: ReactNode | null;
   side?: "top" | "right" | "bottom" | "left";
   asChild?: boolean;
   children?: ReactElement;
@@ -383,7 +383,7 @@ type tabsArrayType = {
   language: string;
   mode: string;
   name: string;
-  description: string;
+  description?: string;
 };
 
 type getValueNodeType = {

src/frontend/src/types/flow/index.ts

@@ -14,6 +14,7 @@ export type NodeType = {
   position: XYPosition | undefined;
   data: NodeDataType;
 };
+
 export type NodeDataType = {
   type: string;
   node?: APIClassType;

src/frontend/src/types/tabs/index.ts

@@ -8,7 +8,7 @@ export type TabsContextType = {
   setTabId: (index: string) => void;
   flows: Array<FlowType>;
   removeFlow: (id: string) => void;
-  addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>;
+  addFlow: (flowData?: FlowType | undefined | null, newProject?: boolean) => Promise<String>;
   updateFlow: (newFlow: FlowType) => void;
   incrementNodeId: () => string;
   downloadFlow: (
@@ -24,12 +24,12 @@ export type TabsContextType = {
   hardReset: () => void;
   getNodeId: (nodeType: string) => string;
   tabsState: TabsState;
-  setTabsState: Dispatch<SetStateAction<TabsState>>;
+  setTabsState: (state: TabsState) => void;
   paste: (
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => void;
-  lastCopiedSelection: { nodes: any; edges: any };
+  lastCopiedSelection: { nodes: any; edges: any } | null;
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
   setTweak: (tweak: TweaksType) => void;
   getTweak: TweaksType[];

src/frontend/src/utils/utils.ts

@@ -129,7 +129,7 @@ export function groupByFamily(data, baseClasses: string, left: boolean, flow?: N
     let tempInputs: string[] = [],
       tempOutputs: string[] = [];
 
-    for (const [n, node] of Object.entries(nodes)) {
+    for (const [n, node] of Object.entries(nodes!)) {
       let foundNode = checkedNodes.get(n);
       if (!foundNode) {
         foundNode = {
@@ -147,7 +147,7 @@ export function groupByFamily(data, baseClasses: string, left: boolean, flow?: N
       if (foundNode.hasBaseClassInBaseClasses) tempOutputs.push(n);
     }
 
-    const totalNodes = Object.keys(nodes).length;
+    const totalNodes = Object.keys(nodes!).length;
     if (tempInputs.length)
       arrOfPossibleInputs.push({
         category: d,