null safety working properly

src/frontend/package.json

@@ -56,5 +56,5 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://localhost:7860"
+    "proxy": "http://backend:7860"
 }

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

@@ -19,18 +19,19 @@ export default function GenericNode({
 	selected: boolean;
 }) {
 	const { setErrorData } = useContext(alertContext);
-  const showError = useRef(true)
+	const showError = useRef(true);
 	const { types, deleteNode } = useContext(typesContext);
 	const Icon = nodeIcons[types[data.type]];
 	if (!Icon) {
 		console.log(data);
-    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
-    }
+		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;
+		}
 		return;
 	}
 
@@ -45,7 +46,9 @@ export default function GenericNode({
 				<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]] }}
+						style={{
+							color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+						}}
 					/>
 					<div className="truncate">{data.type}</div>
 				</div>
@@ -80,8 +83,7 @@ export default function GenericNode({
 										data={data}
 										color={
 											nodeColors[types[data.node.template[t].type]] ??
-											nodeColors[types[data.node.template[t].type]] ??
-											"black"
+											nodeColors.unknown
 										}
 										title={snakeToNormalCase(t)}
 										name={t}
@@ -105,7 +107,7 @@ export default function GenericNode({
 					</div>
 					<ParameterComponent
 						data={data}
-						color={nodeColors[types[data.type]]}
+						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("|")}

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

@@ -55,7 +55,7 @@ export default function ExtraSidebar() {
       {Object.keys(data).map((d:keyof APIObjectType, i) => (
         <DisclosureComponent
           key={i}
-          button={{ title: nodeNames[d], Icon: nodeIcons[d] }}
+          button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }}
         >
           <div className="p-2 flex flex-col gap-2">
             {Object.keys(data[d]).map((t: string, k) => (
@@ -63,7 +63,7 @@ export default function ExtraSidebar() {
                 <div
                   draggable
                   className={" cursor-grab border-l-8 rounded-l-md"}
-                  style={{ borderLeftColor: nodeColors[d] }}
+                  style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }}
                   onDragStart={(event) =>
                     onDragStart(event, {
                       type: t,

src/frontend/src/utils.ts

@@ -8,6 +8,7 @@ import {
   ComputerDesktopIcon,
   Bars3CenterLeftIcon,
   PaperClipIcon,
+  QuestionMarkCircleIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
@@ -73,7 +74,8 @@ export const nodeColors: {[char: string]: string} = {
   advanced: "#000000",
   chat: "#454173",
   thought:"#272541",
-  docloaders:"#10B981"
+  docloaders:"#FF9135",
+  unknown:"#9CA3AF"
 };
 
 export const nodeNames:{[char: string]: string} = {
@@ -85,7 +87,8 @@ export const nodeNames:{[char: string]: string} = {
   memories: "Memories",
   advanced: "Advanced",
   chat: "Chat",
-  docloaders:"Document Loader"
+  docloaders:"Document Loader",
+  unknown:"Unknown"
 };
 
 export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
@@ -97,7 +100,8 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
   tools: WrenchScrewdriverIcon,
   advanced: ComputerDesktopIcon,
   chat: Bars3CenterLeftIcon,
-  docloaders:PaperClipIcon
+  docloaders:Bars3CenterLeftIcon,
+  unknown:QuestionMarkCircleIcon
 };
 
 export const bgColors = {