perf: add useMemo to chatHistory to avoid unecessary renders on Playg…

…round (#5376)

* fix uncessary renders on chat

* 📝 (chat-view.tsx): optimize rendering performance by memoizing ChatMessage component and using memoized version for chat history items

* ♻️ (chat-view.tsx): refactor memoized ChatMessage component to include additional props for improved performance and accuracy

src/frontend/src/components/common/storeCardComponent/index.tsx

@@ -1,8 +1,6 @@
 import { usePostLikeComponent } from "@/controllers/API/queries/store";
 import { useState } from "react";
 import { getComponent } from "../../../controllers/API";
-import IOModalOld from "../../../modals/IOModal";
-import IOModalNew from "../../../modals/IOModal/newModal";
 import useAlertStore from "../../../stores/alertStore";
 import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useStoreStore } from "../../../stores/storeStore";

src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx

@@ -1,6 +1,6 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
-import IOModal from "@/modals/IOModal/newModal";
+import IOModal from "@/modals/IOModal/new-modal";
 
 const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => {
   const PlayIcon = () => (

src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx → src/frontend/src/modals/IOModal/components/IOFieldView/components/csv-selected.tsx

@@ -5,7 +5,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../../../../../components/ui/select";
+} from "../../../../../components/ui/select";
 
 export default function CsvSelect({ node, handleChangeSelect }): JSX.Element {
   return (

src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx → src/frontend/src/modals/IOModal/components/IOFieldView/components/file-input.tsx

@@ -1,17 +1,17 @@
-import { Button } from "../../../../../../components/ui/button";
+import { Button } from "../../../../../components/ui/button";
 
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 import useAlertStore from "@/stores/alertStore";
 import { useEffect, useState } from "react";
-import IconComponent from "../../../../../../components/common/genericIconComponent";
+import IconComponent from "../../../../../components/common/genericIconComponent";
 import {
   ALLOWED_IMAGE_INPUT_EXTENSIONS,
   BASE_URL_API,
-} from "../../../../../../constants/constants";
-import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
-import { IOFileInputProps } from "../../../../../../types/components";
+} from "../../../../../constants/constants";
+import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
+import { IOFileInputProps } from "../../../../../types/components";
 
 export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
   //component to handle file upload from chatIO

src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx → src/frontend/src/modals/IOModal/components/IOFieldView/components/json-input.tsx

@@ -1,7 +1,7 @@
 import { IOJSONInputComponentType } from "@/types/components";
 import { useEffect, useRef } from "react";
 import JsonView from "react18-json-view";
-import { useDarkStore } from "../../../../../../stores/darkStore";
+import { useDarkStore } from "../../../../../stores/darkStore";
 
 export default function IoJsonInput({
   value = [],

src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx → src/frontend/src/modals/IOModal/components/IOFieldView/components/key-pair-input.tsx

@@ -1,8 +1,8 @@
 import _ from "lodash";
 import { useRef } from "react";
-import IconComponent from "../../../../../../components/common/genericIconComponent";
-import { Input } from "../../../../../../components/ui/input";
-import { classNames } from "../../../../../../utils/utils";
+import IconComponent from "../../../../../components/common/genericIconComponent";
+import { Input } from "../../../../../components/ui/input";
+import { classNames } from "../../../../../utils/utils";
 
 export type IOKeyPairInputProps = {
   value: any;

src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx → src/frontend/src/modals/IOModal/components/IOFieldView/io-field-view.tsx

@@ -21,10 +21,10 @@ import {
   convertValuesToNumbers,
   hasDuplicateKeys,
 } from "../../../../utils/reactflowUtils";
-import IOFileInput from "./components/FileInput";
-import IoJsonInput from "./components/JSONInput";
-import CsvSelect from "./components/csvSelect";
-import IOKeyPairInput from "./components/keyPairInput";
+import CsvSelect from "./components/csv-selected";
+import IOFileInput from "./components/file-input";
+import IoJsonInput from "./components/json-input";
+import IOKeyPairInput from "./components/key-pair-input";
 
 export default function IOFieldView({
   type,

src/frontend/src/modals/IOModal/components/chatViewWrapper/index.tsx → src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx

@@ -2,9 +2,9 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/utils/utils";
-import IconComponent from "../../../../components/common/genericIconComponent";
-import { ChatViewWrapperProps } from "../../types/chat-view-wrapper";
-import ChatView from "../chatView/newChatView";
+import IconComponent from "../../../components/common/genericIconComponent";
+import { ChatViewWrapperProps } from "../types/chat-view-wrapper";
+import ChatView from "./chatView/chat-view";
 
 export const ChatViewWrapper = ({
   selectedViewField,
@@ -19,8 +19,6 @@ export const ChatViewWrapper = ({
   messagesFetched,
   sessionId,
   sendMessage,
-  chatValue,
-  setChatValue,
   lockChat,
   setLockChat,
   canvasOpen,
@@ -95,8 +93,6 @@ export const ChatViewWrapper = ({
           <ChatView
             focusChat={sessionId}
             sendMessage={sendMessage}
-            chatValue={chatValue}
-            setChatValue={setChatValue}
             lockChat={lockChat}
             setLockChat={setLockChat}
             visibleSession={visibleSession}