🐛 fix(accordion.tsx): remove unnecessary hover effect on AccordionTrigger to improve styling

🐛 fix(chatMessage/index.tsx): refactor chat message rendering to improve readability and remove unnecessary code

src/frontend/src/components/ui/accordion.tsx

@@ -27,7 +27,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}

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

@@ -36,31 +36,15 @@ export default function ChatMessage({
         chat.isSend ? " bg-border" : " "
       )}
     >
-      <div
+      <div className={classNames("my-3 ml-3 mr-6 ")}>
-        className={classNames(
+        {!chat.isSend ? (
-          "mx-3 my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
+          <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
-        )}
+            🤖
-      >
+          </div>
-        {!chat.isSend && (
+        ) : (
-          <div className="relative h-8 w-8">
+          <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
-            <img
+            👨‍💻
-              className={
-                "absolute scale-150 transition-opacity duration-500 " +
-                (lockChat ? "opacity-100" : "opacity-0")
-              }
-              src={lastMessage ? AiIcon : AiIconStill}
-            />
-            <img
-              className={
-                "absolute scale-150 transition-opacity duration-500 " +
-                (lockChat ? "opacity-0" : "opacity-100")
-              }
-              src={AiIconStill}
-            />
           </div>
-        )}
-        {chat.isSend && (
-          <User2 className="h-6 w-6 text-gray-800 dark:text-gray-200" />
         )}
       </div>
       {!chat.isSend ? (
@@ -150,22 +134,22 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="flex w-full items-center">
-          <div className="inline-block w-full text-start">
+          <div className="inline-block text-start">
-            <span className="w-full break-all text-primary">
+            <span className=" break-all text-primary">
-              <Accordion
+              <Accordion type="single" collapsible className="mb-4">
-                type="multiple"
+                <AccordionItem
-                className="my-2 w-full rounded-md bg-muted p-2"
+                  className=" rounded-md border border-ring/60 bg-muted px-4"
+                  value="prompt"
                 >
+                  <AccordionTrigger className="flex gap-4 font-semibold">
+                    Initial Prompt
+                  </AccordionTrigger>
+                  <AccordionContent className="max-h-96 overflow-auto break-all p-2">
                     {Object.keys(chat.message)
                       .filter((key) => key !== chat.chatKey)
-                  .map((key) => (
+                      .map((key) => chat.message[key])}
-                    <AccordionItem value={key}>
-                      <AccordionTrigger>{key}</AccordionTrigger>
-                      <AccordionContent className="max-h-96 overflow-auto break-all">
-                        {chat.message[key]}
                   </AccordionContent>
                 </AccordionItem>
-                  ))}
               </Accordion>
               {chat.message[chat.chatKey]}
             </span>