From cb90abc660111fb4daaa6b7d829df2153755907d Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Wed, 30 Oct 2024 05:03:36 -0700
Subject: [PATCH] Resolve train of thought component needs unique key id error
 on web app

---
 .../web/app/components/chatHistory/chatHistory.tsx          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index 5075f382..2abe9632 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -45,7 +45,7 @@ interface TrainOfThoughtComponentProps {
     trainOfThought: string[];
     lastMessage: boolean;
     agentColor: string;
-    key: string;
+    keyId: string;
     completed?: boolean;
 }
 
@@ -56,7 +56,7 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
     return (
         <div
             className={`${!collapsed ? styles.trainOfThought + " shadow-sm" : ""}`}
-            key={props.key}
+            key={props.keyId}
         >
             {!props.completed && <InlineLoading className="float-right" />}
             {props.completed &&
@@ -333,6 +333,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                         lastMessage={false}
                                         agentColor={data?.agent?.color || "orange"}
                                         key={`${index}trainOfThought`}
+                                        keyId={`${index}trainOfThought`}
                                         completed={true}
                                     />
                                 )}
@@ -369,6 +370,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                             lastMessage={index === incompleteIncomingMessageIndex}
                                             agentColor={data?.agent?.color || "orange"}
                                             key={`${index}trainOfThought`}
+                                            keyId={`${index}trainOfThought`}
                                             completed={message.completed}
                                         />
                                     )}