From a4101dac536b61fcbc877c3f7c193c1fa62f708a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 27 Jun 2023 21:31:47 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20refactor(formModal):=20remove=20?=
 =?UTF-8?q?unused=20imports=20and=20variables=20=E2=9C=A8=20feat(formModal?=
 =?UTF-8?q?):=20add=20function=20to=20format=20message=20inputs=20into=20a?=
 =?UTF-8?q?=20string=20This=20commit=20removes=20unused=20imports=20and=20?=
 =?UTF-8?q?variables=20from=20the=20file.=20A=20new=20function=20was=20add?=
 =?UTF-8?q?ed=20to=20format=20the=20message=20inputs=20into=20a=20string,?=
 =?UTF-8?q?=20which=20is=20used=20to=20display=20the=20message=20in=20the?=
 =?UTF-8?q?=20chat.=20This=20improves=20the=20readability=20of=20the=20cod?=
 =?UTF-8?q?e=20and=20makes=20it=20easier=20to=20understand=20how=20the=20m?=
 =?UTF-8?q?essage=20is=20being=20constructed.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/formModal/index.tsx | 57 +++++++++++----------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index b0cdaf484..f0e5e0f5c 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -1,20 +1,10 @@
-import { Transition } from "@headlessui/react";
-import { Fragment, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import {
-  X,
-  MessagesSquare,
-  Eraser,
-  TerminalSquare,
-  MessageCircle,
-  MessageSquareDashed,
-  MessageSquare,
-  Variable,
-} from "lucide-react";
+import { TerminalSquare, MessageSquare, Variable } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -24,16 +14,11 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { dark } from "@mui/material/styles/createPalette";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
-import { postValidateCode } from "../../controllers/API";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { TabsContext } from "../../contexts/tabsContext";
 import {
@@ -42,12 +27,8 @@ import {
   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";
-import { Switch } from "../../components/ui/switch";
-import { CardTitle } from "../../components/ui/card";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 
 export default function FormModal({
@@ -83,9 +64,12 @@ export default function FormModal({
   }, [open]);
   useEffect(() => {
     id.current = flow.id;
-    setKeysValue(
-      Array(tabsState[flow.id].formKeysData.input_keys.length).fill("")
-    );
+
+    if (tabsState[flow.id].formKeysData) {
+      setKeysValue(
+        Array(tabsState[flow.id].formKeysData.input_keys.length).fill("")
+      );
+    }
   }, [flow.id, tabsState[flow.id], tabsState[flow.id].formKeysData]);
 
   var isStream = false;
@@ -303,7 +287,7 @@ export default function FormModal({
         title: "There was an error sending the message",
         list: [error.message],
       });
-      setChatValue(data.message);
+      setChatValue(data.inputs);
       connectWS();
     }
   }
@@ -319,6 +303,22 @@ export default function FormModal({
       ref.current.focus();
     }
   }, [open]);
+  function formatMessage(inputs: any): string {
+    if (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)) {
+        // make key bold
+        // dangerouslySetInnerHTML={{
+        //           __html: message.replace(/\n/g, "<br>"),
+        //         }}
+        message += `<b>${key}</b>: ${value}\n`;
+      }
+      return message;
+    }
+    return "";
+  }
 
   function sendMessage() {
     if (chatValue !== "") {
@@ -328,15 +328,16 @@ export default function FormModal({
         // Message variable makes a object with the keys being the names from tabsState[flow.id].formKeysData.input_keys and the values being the keysValue of the correspondent index
         let keys = tabsState[flow.id].formKeysData.input_keys; // array of keys
         let values = keysValue.map((k, i) => (i == chatKey ? chatValue : k)); // array of values
-        let message = keys.reduce((object, key, index) => {
+        let inputs = keys.reduce((object, key, index) => {
           object[key] = values[index];
           return object;
         }, {});
         setChatValue("");
-        addChatHistory(message.toString(), true);
+        const message = formatMessage(inputs);
+        addChatHistory(message, true);
         sendAll({
           ...reactFlowInstance.toObject(),
-          message,
+          inputs: inputs,
           chatHistory,
           name: flow.name,
           description: flow.description,