From 46be71c2c759e3c792110c3099ec8bebf9b27911 Mon Sep 17 00:00:00 2001
From: Andrey Mikus <andrey.mikus@gmail.com>
Date: Tue, 12 Dec 2023 00:12:53 +0100
Subject: [PATCH 1/2] fix: update message object from state immutably

---
 src/components/ChatbotMessage/ChatbotMessage.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatbotMessage/ChatbotMessage.tsx b/src/components/ChatbotMessage/ChatbotMessage.tsx
index 5a8ab69..ea85a71 100644
--- a/src/components/ChatbotMessage/ChatbotMessage.tsx
+++ b/src/components/ChatbotMessage/ChatbotMessage.tsx
@@ -43,11 +43,14 @@ const ChatbotMessage = ({
 
       timeoutId = setTimeout(() => {
         const newMessages = [...messages];
-        const message = newMessages.find((message) => message.id === id);
+        let message = newMessages.find((message) => message.id === id);
 
         if (!message) return;
-        message.loading = false;
-        message.delay = undefined;
+        message = {
+          ...message,
+          loading: false,
+          delay: undefined,
+        }
 
         setState((state: any) => {
           const freshMessages = state.messages;

From 2b0118dc3fa536edadffb74adeaa3cacd2025825 Mon Sep 17 00:00:00 2001
From: Andrey Mikus <andrey.mikus@gmail.com>
Date: Tue, 12 Dec 2023 00:39:22 +0100
Subject: [PATCH 2/2] fix: update entire messages array safely

---
 .../ChatbotMessage/ChatbotMessage.tsx         | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/ChatbotMessage/ChatbotMessage.tsx b/src/components/ChatbotMessage/ChatbotMessage.tsx
index ea85a71..e971ab7 100644
--- a/src/components/ChatbotMessage/ChatbotMessage.tsx
+++ b/src/components/ChatbotMessage/ChatbotMessage.tsx
@@ -42,25 +42,15 @@ const ChatbotMessage = ({
       if (delay) defaultDisableTime += delay;
 
       timeoutId = setTimeout(() => {
-        const newMessages = [...messages];
-        let message = newMessages.find((message) => message.id === id);
+        const newMessages = [...messages].map(message => {
+          if (message.id === id) {
+            return {...message, loading: false, delay: undefined};
+          }
 
-        if (!message) return;
-        message = {
-          ...message,
-          loading: false,
-          delay: undefined,
-        }
-
-        setState((state: any) => {
-          const freshMessages = state.messages;
-          const messageIdx = freshMessages.findIndex(
-            (message: any) => message.id === id
-          );
-          freshMessages[messageIdx] = message;
-
-          return { ...state, messages: freshMessages };
+          return message;
         });
+
+        setState((state: any) => ({...state, messages: newMessages}));
       }, defaultDisableTime);
     };