From dc415e22f528ca4d380eb57b9c347727f6cd249c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jul 2023 12:46:56 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(chatMessage/index.tsx):=20re?=
 =?UTF-8?q?move=20unnecessary=20class=20name=20"bg-border"=20to=20fix=20st?=
 =?UTF-8?q?yling=20issue=20=E2=9C=A8=20feat(chatMessage/index.tsx):=20add?=
 =?UTF-8?q?=20labels=20for=20chatbot=20and=20user=20avatars=20to=20improve?=
 =?UTF-8?q?=20accessibility=20and=20user=20experience=20=F0=9F=90=9B=20fix?=
 =?UTF-8?q?(chatMessage/index.tsx):=20adjust=20styling=20of=20chat=20messa?=
 =?UTF-8?q?ge=20content=20to=20prevent=20overflow=20and=20improve=20readab?=
 =?UTF-8?q?ility=20=F0=9F=90=9B=20fix(chatMessage/index.tsx):=20adjust=20b?=
 =?UTF-8?q?utton=20background=20color=20to=20match=20the=20background=20co?=
 =?UTF-8?q?lor=20of=20the=20chat=20message=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/formModal/chatMessage/index.tsx    | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 092d33092..deaa4a6ef 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -36,22 +36,28 @@ export default function ChatMessage({
     <div
       className={classNames(
         "flex w-full px-2 py-6 pl-4 pr-9",
-        chat.isSend ? " bg-border" : " "
+        chat.isSend ? "" : " "
       )}
     >
-      <div className={classNames("mb-3 ml-3 mr-6 mt-1 ")}>
+      <div className={classNames("mb-3 mr-3 mt-1 w-20 ")}>
         {!chat.isSend ? (
-          <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
-            🤖
+          <div className="flex flex-col items-center gap-1">
+            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
+              🤖
+            </div>
+            <span className="text-xs">Chatbot</span>
           </div>
         ) : (
-          <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
-            👨‍💻
+          <div className="flex flex-col items-center gap-1">
+            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
+              👨‍💻
+            </div>
+            <span className="text-xs">User</span>
           </div>
         )}
       </div>
       {!chat.isSend ? (
-        <div className="flex w-full items-center text-start">
+        <div className="flex w-full flex-1 items-center text-start">
           <div className="relative inline-block w-full text-start text-sm font-normal text-primary">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
@@ -78,7 +84,8 @@ export default function ChatMessage({
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose max-w-full text-primary dark:prose-invert"
+                    className="markdown prose inline-block break-words text-primary
+                     dark:prose-invert"
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -138,7 +145,7 @@ export default function ChatMessage({
       ) : (
         <div>
           <button
-            className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-muted px-4 py-3 text-base font-semibold"
+            className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-3 text-base font-semibold"
             onClick={() => {
               setPromptOpen((old) => !old);
             }}