From 07276523a350878b91ff009d0187addb4804c9e4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jul 2023 11:35:50 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(chatMessage/index.tsx):=20re?=
 =?UTF-8?q?move=20unnecessary=20div=20wrapper=20around=20matched=20text=20?=
 =?UTF-8?q?in=20AccordionContent=20=F0=9F=94=A8=20refactor(chatMessage/ind?=
 =?UTF-8?q?ex.tsx):=20simplify=20rendering=20of=20matched=20text=20in=20Ac?=
 =?UTF-8?q?cordionContent=20by=20using=20a=20span=20instead=20of=20a=20div?=
 =?UTF-8?q?=20=F0=9F=94=A8=20refactor(chatMessage/index.tsx):=20remove=20u?=
 =?UTF-8?q?nnecessary=20div=20wrapper=20around=20chat.message[chat.chatKey?=
 =?UTF-8?q?]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/formModal/chatMessage/index.tsx    | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 722365e0c..499a7bee1 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -138,15 +138,15 @@ export default function ChatMessage({
         <div className="flex w-full items-center">
           <div className="inline-block text-start">
             <span className=" break-all text-primary">
-              <Accordion type="single" collapsible className="mb-4">
+              <Accordion type="single" collapsible className="mb-2 flex">
                 <AccordionItem
                   className=" rounded-md border border-ring/60 bg-muted px-4"
                   value="prompt"
                 >
-                  <AccordionTrigger className="flex gap-4 text-base font-semibold">
+                  <AccordionTrigger className="gap-4 text-base font-semibold">
                     Initial Prompt
                   </AccordionTrigger>
-                  <AccordionContent className="max-h-96 overflow-auto break-all p-2 text-base">
+                  <AccordionContent className="max-h-96 overflow-auto break-all p-2">
                     {
                       // Make all the variables that are inside curly braces bold
                       template.split("\n").map((line, index) => {
@@ -160,24 +160,14 @@ export default function ChatMessage({
                             parts.push(line.substring(lastIndex, match.index));
                           }
                           // Push div with matched text
-                          parts.push(
-                            <div>
-                              <div className="my-1 inline-block rounded-md bg-indigo-100 px-2">
-                                <span key={match.index}>
-                                  <span className=" text-xs font-semibold text-high-indigo">
-                                    {match[1]}
-                                  </span>
-                                  {chat.message[match[1]] ? (
-                                    <span>
-                                      &nbsp;&nbsp;{chat.message[match[1]]}
-                                    </span>
-                                  ) : (
-                                    ""
-                                  )}
-                                </span>
-                              </div>
-                            </div>
-                          );
+                          if (chat.message[match[1]]) {
+                            parts.push(
+                              <span className="my-1 rounded-md bg-indigo-100">
+                                {chat.message[match[1]]}
+                              </span>
+                            );
+                          }
+
                           // Update last index
                           lastIndex = regex.lastIndex;
                         }
@@ -191,7 +181,9 @@ export default function ChatMessage({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
-              {chat.message[chat.chatKey]}
+              <span className="prose text-primary dark:prose-invert">
+                {chat.message[chat.chatKey]}
+              </span>
             </span>
           </div>
         </div>