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.

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,8 +167,8 @@ export default function ChatMessage({
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">
-                {promptOpen
+                {promptOpen &&
-                  ? template?.split("\n")?.map((line, index) => {
+                  template?.split("\n")?.map((line, index) => {
                     const regex = /{([^}]+)}/g;
                     let match;
                     let parts = [];
@@ -195,12 +195,12 @@ export default function ChatMessage({
                       parts.push(line.substring(lastIndex));
                     }
                     return <p>{parts}</p>;
-                    })
+                  })}
-                  : chat.message[chat.chatKey]}
               </span>
             </>
           )}
-          {chat.message[chat.chatKey]}
+          <br />
+          <span>{chat.message[chat.chatKey]}</span>
         </div>
       )}
     </div>