Changed chat history to contain all keys unformatted, added accordion with all keys

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

@@ -11,6 +11,12 @@ import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
 import { User2, MessageSquare } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../../components/ui/accordion";
 
 export default function ChatMessage({
   chat,
@@ -22,16 +28,11 @@ export default function ChatMessage({
   lastMessage: boolean;
 }) {
   const convert = new Convert({ newline: true });
-  const [message, setMessage] = useState("");
-  const imgRef = useRef(null);
-  useEffect(() => {
-    setMessage(chat.message);
-  }, [chat.message]);
   const [hidden, setHidden] = useState(true);
   return (
     <div
       className={classNames(
-        "flex w-full px-2 py-2 pl-4 pr-9",
+        "flex w-full px-2 py-6 pl-4 pr-9",
         chat.isSend ? " bg-border" : " "
       )}
     >
@@ -77,14 +78,14 @@ export default function ChatMessage({
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md border
-								border-gray-300 bg-muted px-2 pb-3 pt-3 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
+								border-gray-300 bg-muted px-2 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
               ></div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full pb-3 pt-3">
+            <div className="w-full">
               <div className="w-full dark:text-white">
                 <div className="w-full">
                   <ReactMarkdown
@@ -125,7 +126,7 @@ export default function ChatMessage({
                       },
                     }}
                   >
-                    {message}
+                    {chat.message.toString()}
                   </ReactMarkdown>
                 </div>
                 {chat.files && (
@@ -148,14 +149,24 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div className="flex w-full items-center">
+        <div className="flex w-full flex-1 items-center">
           <div className="inline-block text-start">
-            <span
-              className="text-primary"
-              dangerouslySetInnerHTML={{
-                __html: message.replace(/\n/g, "<br>"),
-              }}
-            ></span>
+            <span className="text-primary">
+              <Accordion
+                type="multiple"
+                className="my-2 w-full rounded-md bg-muted p-2"
+              >
+                {Object.keys(chat.message)
+                  .filter((key) => key !== chat.chatKey)
+                  .map((key) => (
+                    <AccordionItem value={key}>
+                      <AccordionTrigger>{key}</AccordionTrigger>
+                      <AccordionContent>{chat.message[key]}</AccordionContent>
+                    </AccordionItem>
+                  ))}
+              </Accordion>
+              {chat.message[chat.chatKey]}
+            </span>
           </div>
         </div>
       )}

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

@@ -91,19 +91,20 @@ export default function FormModal({
   var isStream = false;
 
   const addChatHistory = (
-    message: string,
+    message: string | Object,
     isSend: boolean,
+    chatKey: string,
     thought?: string,
     files?: Array<any>
   ) => {
     setChatHistory((old) => {
       let newChat = _.cloneDeep(old);
       if (files) {
-        newChat.push({ message, isSend, files, thought });
+        newChat.push({ message, isSend, files, thought, chatKey });
       } else if (thought) {
-        newChat.push({ message, isSend, thought });
+        newChat.push({ message, isSend, thought, chatKey });
       } else {
-        newChat.push({ message, isSend });
+        newChat.push({ message, isSend, chatKey });
       }
       return newChat;
     });
@@ -175,6 +176,7 @@ export default function FormModal({
             is_bot: boolean;
             message: string;
             type: string;
+            chatKey: string;
             files?: Array<any>;
           }) => {
             if (chatItem.message) {
@@ -182,14 +184,16 @@ export default function FormModal({
                 chatItem.files
                   ? {
                       isSend: !chatItem.is_bot,
-                      message: formatMessage(chatItem.message),
+                      message: chatItem.message,
                       thought: chatItem.intermediate_steps,
                       files: chatItem.files,
+                      chatKey: chatItem.chatKey,
                     }
                   : {
                       isSend: !chatItem.is_bot,
-                      message: formatMessage(chatItem.message),
+                      message: chatItem.message,
                       thought: chatItem.intermediate_steps,
+                      chatKey: chatItem.chatKey,
                     }
               );
             }
@@ -199,7 +203,7 @@ export default function FormModal({
       });
     }
     if (data.type === "start") {
-      addChatHistory("", false);
+      addChatHistory("", false, chatKey);
       isStream = true;
     }
     if (data.type === "end") {
@@ -326,10 +330,6 @@ export default function FormModal({
       // so the formated message is a string with the keys and values separated by ": "
       let message = "";
       for (const [key, value] of Object.entries(inputs)) {
-        // make key bold
-        // dangerouslySetInnerHTML={{
-        //           __html: message.replace(/\n/g, "<br>"),
-        //         }}
         message += `<b>${key}</b>: ${value}\n`;
       }
       return message;
@@ -344,8 +344,8 @@ export default function FormModal({
         setLockChat(true);
         let inputs = tabsState[id.current].formKeysData.input_keys;
         setChatValue("");
-        const message = formatMessage(inputs);
-        addChatHistory(message, true);
+        const message = inputs;
+        addChatHistory(message, true, chatKey);
         sendAll({
           ...reactFlowInstance.toObject(),
           inputs: inputs,

src/frontend/src/types/api/index.ts

@@ -37,7 +37,7 @@ export type sendAllProps = {
   viewport: Viewport;
   inputs: any;
 
-  chatHistory: { message: string; isSend: boolean }[];
+  chatHistory: { message: string | object; isSend: boolean }[];
 };
 export type errorsTypeAPI = {
   function: { errors: Array<string> };

src/frontend/src/types/chat/index.ts

@@ -3,8 +3,9 @@ import { FlowType } from "../flow";
 
 export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance };
 export type ChatMessageType = {
-  message: string;
+  message: string | Object;
   isSend: boolean;
   thought?: string;
   files?: Array<{ data: string; type: string; data_type: string }>;
+  chatKey: string;
 };