From 5bea0c705bfefe54a1e754d832ff64da4a2cc24f Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Mon, 28 Oct 2024 15:36:06 -0700
Subject: [PATCH] Use break-words in the train of thought for better formatting

---
 src/interface/web/app/components/chatMessage/chatMessage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 207835bf..6d82fe1d 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -312,10 +312,10 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
     markdownRendered = markdownRendered.replace(/<h[1-6].*?<\/h[1-6]>/g, "");
     return (
         <div
-            className={`${styles.trainOfThoughtElement} break-all items-center ${props.primary ? "text-gray-400" : "text-gray-300"} ${styles.trainOfThought} ${props.primary ? styles.primary : ""}`}
+            className={`${styles.trainOfThoughtElement} break-words items-center ${props.primary ? "text-gray-400" : "text-gray-300"} ${styles.trainOfThought} ${props.primary ? styles.primary : ""}`}
         >
             {icon}
-            <div dangerouslySetInnerHTML={{ __html: markdownRendered }} />
+            <div dangerouslySetInnerHTML={{ __html: markdownRendered }} className="break-words" />
         </div>
     );
 }