From cc11213a0f054f26b07ad7cb7107563b71a3aa5f Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 13 Jul 2023 10:53:04 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(index.css):=20update=20col?=
 =?UTF-8?q?or=20variables=20for=20chat=20bot=20and=20user=20icons=20for=20?=
 =?UTF-8?q?better=20visual=20distinction=20=F0=9F=8E=A8=20style(index.css)?=
 =?UTF-8?q?:=20update=20class=20names=20for=20code=20block=20modal=20span?=
 =?UTF-8?q?=20and=20button=20for=20better=20readability=20=F0=9F=8E=A8=20s?=
 =?UTF-8?q?tyle(index.css):=20update=20class=20name=20for=20code=20highlig?=
 =?UTF-8?q?ht=20block=20to=20limit=20max=20height=20=F0=9F=90=9B=20fix(cha?=
 =?UTF-8?q?tMessage/index.tsx):=20update=20max=20width=20classes=20for=20m?=
 =?UTF-8?q?arkdown=20content=20to=20improve=20responsiveness=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(genericModal/index.tsx):=20add=20missing=20u?=
 =?UTF-8?q?seRef=20declarations=20for=20divRef=20and=20divRefPrompt=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(genericModal/index.tsx):=20update=20class=20?=
 =?UTF-8?q?name=20for=20code=20highlight=20textarea=20to=20fix=20styling?=
 =?UTF-8?q?=20issue=20=F0=9F=90=9B=20fix(genericModal/index.tsx):=20add=20?=
 =?UTF-8?q?missing=20ref=20prop=20to=20Textarea=20component=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(genericModal/index.tsx):=20add=20missing=20ref=20prop=20?=
 =?UTF-8?q?to=20div=20element=20for=20prompt=20variables=20=F0=9F=90=9B=20?=
 =?UTF-8?q?fix(genericModal/index.tsx):=20add=20missing=20ref=20prop=20to?=
 =?UTF-8?q?=20div=20element=20for=20prompt=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/index.css                              | 9 ++++++---
 src/frontend/src/modals/formModal/chatMessage/index.tsx | 2 +-
 src/frontend/src/modals/genericModal/index.tsx          | 9 ++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index df2cd6837..dfe862183 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -116,6 +116,9 @@
   --status-blue: #2563eb;
   --connection: #555;
 
+  --chat-bot-icon: #4f3d6e;
+  --chat-user-icon: #235d70;
+
 }}
 
 @layer base {
@@ -652,10 +655,10 @@ The cursor: default; property value restores the browser's default cursor style
     @apply flex items-center justify-between px-4 py-1.5
   }
   .code-block-modal-span {
-    @apply text-xs lowercase text-background
+    @apply text-xs lowercase text-muted-foreground
   }
   .code-block-modal-button {
-    @apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background
+    @apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-muted-foreground
   }
 
   .chat-message-modal {
@@ -930,7 +933,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply bg-white text-primary
   }
   .code-highlight{
-    @apply block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden
+    @apply block px-3 py-2 w-full max-h-[64vh] text-sm outline-0 border-0 break-all overflow-y-hidden
   }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 8cbf0877c..9affce87e 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -81,7 +81,7 @@ export default function ChatMessage({
                         remarkPlugins={[remarkGfm, remarkMath]}
                         rehypePlugins={[rehypeMathjax]}
                         className="markdown prose inline-block break-words text-primary
-                     dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]"
+                     dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw] sm:w-[30vw] lg:w-[40vw]"
                         components={{
                           code: ({
                             node,
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index b2cf02fdb..3565b1673 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -58,6 +58,8 @@ export default function GenericModal({
       closePopUp();
     }
   }
+  const divRef = useRef(null);
+  const divRefPrompt = useRef(null);
 
   function checkVariables(valueToCheck) {
     const regex = /\{([^{}]+)\}/g;
@@ -108,7 +110,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className="code-highlight"
+        className={"code-highlight"}
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);
@@ -118,6 +120,7 @@ export default function GenericModal({
     );
   };
 
+
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)
       .then((apiReturn) => {
@@ -189,7 +192,7 @@ export default function GenericModal({
           >
             {type === TypeModal.PROMPT && isEdit ? (
               <Textarea
-                ref={ref}
+                ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
                 value={inputValue}
                 onBlur={() => {
@@ -223,7 +226,7 @@ export default function GenericModal({
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
                 <div className=" mr-2">
-                  <div className="max-h-20 overflow-y-auto custom-scroll">
+                  <div ref={divRef} className="max-h-20 overflow-y-auto custom-scroll">
                     <div className="flex flex-wrap items-center">
                       <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                       <span className="text-md font-semibold text-primary">