🎨 style(index.css): update color variables for chat bot and user icons for better visual distinction

🎨 style(index.css): update class names for code block modal span and button for better readability
🎨 style(index.css): update class name for code highlight block to limit max height
🐛 fix(chatMessage/index.tsx): update max width classes for markdown content to improve responsiveness
🐛 fix(genericModal/index.tsx): add missing useRef declarations for divRef and divRefPrompt
🐛 fix(genericModal/index.tsx): update class name for code highlight textarea to fix styling issue
🐛 fix(genericModal/index.tsx): add missing ref prop to Textarea component
🐛 fix(genericModal/index.tsx): add missing ref prop to div element for prompt variables
🐛 fix(genericModal/index.tsx): add missing ref prop to div element for prompt variables

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

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,

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">