Changed chat message button to show entire prompt instead of chat input

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

@@ -10,7 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
-import { User2, MessageSquare } from "lucide-react";
+import { User2, MessageSquare, ChevronDown } from "lucide-react";
 import {
   Accordion,
   AccordionContent,
@@ -31,6 +31,7 @@ export default function ChatMessage({
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
   const [template, setTemplate] = useState(chat.template);
+  const [promptOpen, setPromptOpen] = useState(false);
   return (
     <div
       className={classNames(
@@ -135,21 +136,23 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div className="flex w-full items-center">
-          <div className="inline-block text-start">
-            <span className=" break-all text-primary">
-              <Accordion type="single" collapsible className="mb-2 flex">
-                <AccordionItem
-                  className=" rounded-md border border-ring/60 bg-muted px-4"
-                  value="prompt"
+        <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"
+            onClick={() => {
+              setPromptOpen((old) => !old);
+            }}
           >
-                  <AccordionTrigger className="gap-4 text-base font-semibold">
             Initial Prompt
-                  </AccordionTrigger>
-                  <AccordionContent className="max-h-96 overflow-auto break-all p-2">
-                    {
-                      // Make all the variables that are inside curly braces bold
-                      template.split("\n").map((line, index) => {
+            <ChevronDown
+              className={
+                "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
+              }
+            />
+          </button>
+          <span className="prose inline-block break-words text-primary dark:prose-invert">
+            {promptOpen
+              ? template.split("\n").map((line, index) => {
                   const regex = /{([^}]+)}/g;
                   let match;
                   let parts = [];
@@ -177,15 +180,8 @@ export default function ChatMessage({
                   }
                   return <p>{parts}</p>;
                 })
-                    }
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-              <span className="prose text-primary dark:prose-invert">
-                {chat.message[chat.chatKey]}
+              : chat.message[chat.chatKey]}
           </span>
-            </span>
-          </div>
         </div>
       )}
     </div>