🔧 fix(chatMessage): import Badge component to use in ChatMessage component

✨ feat(chatMessage): add support for displaying variables in bold inside curly braces in the chat message

🔧 fix(formModal): add support for template in chat history when adding a new chat message

🔧 fix(genericModal): remove redundant state for modal open/close

🔧 fix(genericModal): remove redundant state for modal open/close

🔧 fix(chat): add support for template in ChatMessageType

🔧 fix(tabs): add support for template in TabsState

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

@@ -17,6 +17,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "../../../components/ui/accordion";
+import { Badge } from "../../../components/ui/badge";
 
 export default function ChatMessage({
   chat,
@@ -29,6 +30,7 @@ export default function ChatMessage({
 }) {
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
+  const [template, setTemplate] = useState(chat.template);
   return (
     <div
       className={classNames(
@@ -141,13 +143,51 @@ export default function ChatMessage({
                   className=" rounded-md border border-ring/60 bg-muted px-4"
                   value="prompt"
                 >
-                  <AccordionTrigger className="flex gap-4 font-semibold">
+                  <AccordionTrigger className="flex gap-4 text-base 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) => chat.message[key])}
+                  <AccordionContent className="max-h-96 overflow-auto break-all p-2 text-base">
+                    {
+                      // Make all the variables that are inside curly braces bold
+                      template.split("\n").map((line, index) => {
+                        const regex = /{([^}]+)}/g;
+                        let match;
+                        let parts = [];
+                        let lastIndex = 0;
+                        while ((match = regex.exec(line)) !== null) {
+                          // Push text up to the match
+                          if (match.index !== lastIndex) {
+                            parts.push(line.substring(lastIndex, match.index));
+                          }
+                          // Push div with matched text
+                          parts.push(
+                            <div>
+                              <div className="my-1 inline-block rounded-md bg-indigo-100 px-2">
+                                <span key={match.index}>
+                                  <span className=" text-xs font-semibold text-high-indigo">
+                                    {match[1]}
+                                  </span>
+                                  {chat.message[match[1]] ? (
+                                    <span>
+                                      &nbsp;&nbsp;{chat.message[match[1]]}
+                                    </span>
+                                  ) : (
+                                    ""
+                                  )}
+                                </span>
+                              </div>
+                            </div>
+                          );
+                          // Update last index
+                          lastIndex = regex.lastIndex;
+                        }
+                        // Push text after the last match
+                        if (lastIndex !== line.length) {
+                          parts.push(line.substring(lastIndex));
+                        }
+                        return <p>{parts}</p>;
+                      })
+                    }
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>

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

@@ -94,6 +94,7 @@ export default function FormModal({
     message: string | Object,
     isSend: boolean,
     chatKey: string,
+    template?: string,
     thought?: string,
     files?: Array<any>
   ) => {
@@ -103,6 +104,8 @@ export default function FormModal({
         newChat.push({ message, isSend, files, thought, chatKey });
       } else if (thought) {
         newChat.push({ message, isSend, thought, chatKey });
+      } else if (template) {
+        newChat.push({ message, isSend, chatKey, template });
       } else {
         newChat.push({ message, isSend, chatKey });
       }
@@ -175,6 +178,7 @@ export default function FormModal({
             intermediate_steps?: string;
             is_bot: boolean;
             message: string;
+            template: string;
             type: string;
             chatKey: string;
             files?: Array<any>;
@@ -185,6 +189,7 @@ export default function FormModal({
                   ? {
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
+                      template: chatItem.template,
                       thought: chatItem.intermediate_steps,
                       files: chatItem.files,
                       chatKey: chatItem.chatKey,
@@ -192,6 +197,7 @@ export default function FormModal({
                   : {
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
+                      template: chatItem.template,
                       thought: chatItem.intermediate_steps,
                       chatKey: chatItem.chatKey,
                     }
@@ -323,19 +329,6 @@ export default function FormModal({
       ref.current.focus();
     }
   }, [open]);
-  function formatMessage(inputs: any): string {
-    if (inputs) {
-      if (typeof inputs == "string") return inputs;
-      // inputs is a object with the keys and values being input_keys and keysValue
-      // so the formated message is a string with the keys and values separated by ": "
-      let message = "";
-      for (const [key, value] of Object.entries(inputs)) {
-        message += `<b>${key}</b>: ${value}\n`;
-      }
-      return message;
-    }
-    return "";
-  }
 
   function sendMessage() {
     if (chatValue !== "") {
@@ -345,7 +338,12 @@ export default function FormModal({
         let inputs = tabsState[id.current].formKeysData.input_keys;
         setChatValue("");
         const message = inputs;
-        addChatHistory(message, true, chatKey);
+        addChatHistory(
+          message,
+          true,
+          chatKey,
+          tabsState[flow.id].formKeysData.template
+        );
         sendAll({
           ...reactFlowInstance.toObject(),
           inputs: inputs,

src/frontend/src/modals/genericModal/index.tsx

@@ -55,7 +55,6 @@ export default function GenericModal({
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
   const [myModalType] = useState(type);
-  const [open, setOpen] = useState(true);
   const [inputValue, setInputValue] = useState(value);
   const [isEdit, setIsEdit] = useState(true);
   const [wordsHighlightInvalid, setWordsHighlightInvalid] = useState([]);
@@ -66,7 +65,6 @@ export default function GenericModal({
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
   function setModalOpen(x: boolean) {
-    setOpen(x);
     if (x === false) {
       setCloseEdit("generic");
       closePopUp();
@@ -138,7 +136,6 @@ export default function GenericModal({
       .then((apiReturn) => {
         if (apiReturn.data) {
           setNodeClass(apiReturn.data.frontend_node);
-          setModalOpen(closeModal);
 
           let inputVariables = apiReturn.data.input_variables;
           if (inputVariables.length === 0) {

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

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

src/frontend/src/types/tabs/index.ts

@@ -40,6 +40,7 @@ export type TabsState = {
   [key: string]: {
     isPending: boolean;
     formKeysData: {
+      template?: string;
       input_keys?: Object;
       memory_keys?: Array<string>;
       handle_keys?: Array<string>;