From cfa13df98d1ff8539ce5bb05be6d3c068ab29444 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 11 Jul 2023 16:00:56 -0300
Subject: [PATCH] refactor(chatMessage/index.tsx): improve code readability and
 fix rendering issue

The code in the `ChatMessage` component has been refactored to improve code readability and fix a rendering issue.

- In line 10, the `div` element has been updated to include the `flex flex-col` class for better styling.
- In lines 16-18, the conditional rendering of the `template` has been simplified by removing unnecessary ternary operator and curly braces.
- In lines 21-34, the rendering of the `template` has been updated to correctly split the text into lines and replace placeholders with values.
- In lines 37-39, a line break element (`<br />`) has been added for better visual separation.
- In lines 41-43, the rendering of the `chat.message[chat.chatKey]` has been moved outside the `span` element for correct rendering.

These changes improve the readability of the code and fix the rendering issue in the `ChatMessage` component.
---
 .../modals/formModal/chatMessage/index.tsx    | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 8b5453607..d75b901fe 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -150,7 +150,7 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div>
+        <div className="flex flex-col">
           {template && (
             <>
               <button
@@ -167,40 +167,40 @@ export default function ChatMessage({
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">
-                {promptOpen
-                  ? template?.split("\n")?.map((line, index) => {
-                      const regex = /{([^}]+)}/g;
-                      let match;
-                      let parts = [];
-                      let lastIndex = 0;
-                      while ((match = regex.exec(line)) !== null) {
-                        // Push text up to the match
-                        if (match.index !== lastIndex) {
-                          parts.push(line.substring(lastIndex, match.index));
-                        }
-                        // Push div with matched text
-                        if (chat.message[match[1]]) {
-                          parts.push(
-                            <span className="my-1 rounded-md bg-indigo-100">
-                              {chat.message[match[1]]}
-                            </span>
-                          );
-                        }
+                {promptOpen &&
+                  template?.split("\n")?.map((line, index) => {
+                    const regex = /{([^}]+)}/g;
+                    let match;
+                    let parts = [];
+                    let lastIndex = 0;
+                    while ((match = regex.exec(line)) !== null) {
+                      // Push text up to the match
+                      if (match.index !== lastIndex) {
+                        parts.push(line.substring(lastIndex, match.index));
+                      }
+                      // Push div with matched text
+                      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;
-                      }
-                      // Push text after the last match
-                      if (lastIndex !== line.length) {
-                        parts.push(line.substring(lastIndex));
-                      }
-                      return <p>{parts}</p>;
-                    })
-                  : chat.message[chat.chatKey]}
+                      // Update last index
+                      lastIndex = regex.lastIndex;
+                    }
+                    // Push text after the last match
+                    if (lastIndex !== line.length) {
+                      parts.push(line.substring(lastIndex));
+                    }
+                    return <p>{parts}</p>;
+                  })}
               </span>
             </>
           )}
-          {chat.message[chat.chatKey]}
+          <br />
+          <span>{chat.message[chat.chatKey]}</span>
         </div>
       )}
     </div>