🎨 style(chatMessage): refactor chat message component styles to improve readability and remove unnecessary code

✨ feat(formModal): add accordion component to display form keys and memory keys in the chat form modal

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -29,18 +29,12 @@ export default function ChatMessage({
   }, [chat.message]);
   const [hidden, setHidden] = useState(true);
   return (
-    <div
-      className={classNames(
-        "w-full flex",
-        chat.isSend ? "justify-end" : "justify-start"
-      )}
-    >
       <div
         className={classNames(
-          "w-3/4 py-2 px-2 mb-4 flex",
+          "w-full py-2 px-2 pl-4 flex",
           chat.isSend
-            ? "bg-input pl-4 flex-row-reverse rounded-xl rounded-tr-none dark:bg-gray-900 "
+            ? "bg-input dark:bg-gray-900 "
-            : "bg-foreground pr-4 rounded-xl rounded-tl-none dark:bg-gray-800"
+            : " dark:bg-gray-800"
         )}
       >
         <div
@@ -72,7 +66,7 @@ export default function ChatMessage({
         </div>
         {!chat.isSend ? (
           <div className="w-full text-start flex items-center">
-            <div className="w-full relative text-start inline-block text-background text-sm font-normal">
+            <div className="w-full relative text-start inline-block text-primary text-sm font-normal">
               {hidden && chat.thought && chat.thought !== "" && (
                 <div
                   onClick={() => setHidden((prev) => !prev)}
@@ -84,7 +78,7 @@ export default function ChatMessage({
               {chat.thought && chat.thought !== "" && !hidden && (
                 <div
                   onClick={() => setHidden((prev) => !prev)}
-                  className=" text-start inline-block rounded-md text-background h-full border border-gray-300 dark:border-gray-500
+                  className=" text-start inline-block rounded-md text-primary h-full border border-gray-300 dark:border-gray-500
 								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                   dangerouslySetInnerHTML={{
                     __html: convert.toHtml(chat.thought),
@@ -98,7 +92,7 @@ export default function ChatMessage({
                     <ReactMarkdown
                       remarkPlugins={[remarkGfm, remarkMath]}
                       rehypePlugins={[rehypeMathjax]}
-                      className="markdown prose dark:prose-invert text-background"
+                      className="markdown prose dark:prose-invert text-primary"
                       components={{
                         code({ node, inline, className, children, ...props }) {
                           if (children.length) {
@@ -168,6 +162,5 @@ export default function ChatMessage({
           </div>
         )}
       </div>
-    </div>
   );
 }

src/frontend/src/modals/formModal/index.tsx

@@ -27,6 +27,16 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { TabsContext } from "../../contexts/tabsContext";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { AccordionHeader } from "@radix-ui/react-accordion";
+import { Textarea } from "../../components/ui/textarea";
+import { Badge } from "../../components/ui/badge";
+import { Separator } from "../../components/ui/separator";
 
 export default function FormModal({
   flow,
@@ -334,7 +344,7 @@ export default function FormModal({
   return (
     <Dialog open={open} onOpenChange={setModalOpen}>
       <DialogTrigger className="hidden"></DialogTrigger>
-      <DialogContent className="min-w-[1000px]">
+      <DialogContent className="min-w-[95vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Chat Form</span>
@@ -345,11 +355,31 @@ export default function FormModal({
           </DialogTitle>
         </DialogHeader>
 
-        <div className="flex h-[600px] w-full mt-2">
+        <div className="flex h-[80vh] w-full mt-2">
-          <div className="w-96 h-full flex flex-col justify-start">
+          <div className="w-2/5 h-full flex flex-col justify-start mr-6">
+            <Accordion type="single" collapsible className="w-full">
+              {tabsState[id.current].formKeysData.input_keys.map((i, k) => (
+                <AccordionItem key={k} value={i}>
+                  <AccordionTrigger>{i}</AccordionTrigger>
+                  <AccordionContent>
+                    <div className="p-1">
+                      <Textarea placeholder="Enter text..."></Textarea>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+              {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
+                <AccordionItem key={k} value={i}>
+                  <div className="flex flex-1 items-center justify-between py-4 font-medium transition-all group">
+                    <div className="group-hover:underline">{i}</div>
+                    <Badge>Message Key</Badge>
+                  </div>
+                </AccordionItem>
+              ))}
+            </Accordion>
           </div>
-          <div className="w-full pl-6">
+          <div className="w-full ">
-            <div className="flex flex-col rounded-md w-full h-full">
+            <div className="flex flex-col rounded-md border w-full h-full">
               <div
                 ref={messagesRef}
                 className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
@@ -385,8 +415,8 @@ export default function FormModal({
                 )}
                 <div ref={ref}></div>
               </div>
-              <div className="w-full bg-background flex-col flex items-center justify-between">
+              <div className="w-full p-2 flex-col flex items-center justify-between">
-                <div className="relative w-full mt-1 rounded-md shadow-sm">
+                <div className="relative w-full rounded-md shadow-sm">
                   <ChatInput
                     chatValue={chatValue}
                     lockChat={lockChat}