From 0e81dafc0ea092e8f3c36398071e9a94b941e1cc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 27 Jun 2023 19:15:44 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(chatMessage.tsx):=20remove?=
 =?UTF-8?q?=20unused=20classNames=20and=20add=20primary=20color=20to=20cha?=
 =?UTF-8?q?t=20message=20text=20=F0=9F=9A=80=20feat(formModal.tsx):=20add?=
 =?UTF-8?q?=20support=20for=20multiple=20input=20keys=20and=20values=20to?=
 =?UTF-8?q?=20be=20sent=20in=20the=20chat=20message=20=F0=9F=90=9B=20fix(f?=
 =?UTF-8?q?ormModal.tsx):=20fix=20keysValue=20state=20initialization=20and?=
 =?UTF-8?q?=20message=20object=20creation=20=F0=9F=9A=80=20feat(formModal.?=
 =?UTF-8?q?tsx):=20add=20switch=20component=20to=20select=20which=20input?=
 =?UTF-8?q?=20key=20to=20send=20in=20the=20chat=20message=20=F0=9F=8E=A8?=
 =?UTF-8?q?=20style(formModal.tsx):=20add=20muted=20background=20color=20t?=
 =?UTF-8?q?o=20input=20keys=20container=20=F0=9F=90=9B=20fix(api/index.ts)?=
 =?UTF-8?q?:=20change=20message=20type=20to=20any=20to=20support=20multipl?=
 =?UTF-8?q?e=20input=20keys=20and=20values?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/formModal/chatMessage/index.tsx    |  6 ++--
 src/frontend/src/modals/formModal/index.tsx   | 33 +++++++++++++++----
 src/frontend/src/types/api/index.ts           |  2 +-
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 5078e251d..a819bc8d3 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -33,7 +33,7 @@ export default function ChatMessage({
         className={classNames(
           "w-full py-2 px-2 pl-4 flex",
           chat.isSend
-            ? "bg-input dark:bg-gray-900 "
+            ? " dark:bg-gray-900 "
             : " dark:bg-gray-800"
         )}
       >
@@ -151,9 +151,9 @@ export default function ChatMessage({
           </div>
         ) : (
           <div className="w-full flex items-center">
-            <div className="text-start inline-block text-gray-600 dark:text-white">
+            <div className="text-start inline-block">
               <span
-                className="text-gray-600 dark:text-gray-200"
+                className="text-primary"
                 dangerouslySetInnerHTML={{
                   __html: message.replace(/\n/g, "<br>"),
                 }}
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 347c61dae..f7baab69a 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -37,6 +37,7 @@ 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";
 
 export default function FormModal({
   flow,
@@ -48,6 +49,7 @@ export default function FormModal({
   flow: FlowType;
 }) {
   const [chatValue, setChatValue] = useState("");
+  const [keysValue, setKeysValue] = useState([]);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setNoticeData } = useContext(alertContext);
@@ -57,6 +59,7 @@ export default function FormModal({
   const isOpen = useRef(open);
   const messagesRef = useRef(null);
   const id = useRef(flow.id);
+  const [chatKey, setChatKey] = useState(0);
 
   useEffect(() => {
     if (messagesRef.current) {
@@ -69,7 +72,7 @@ export default function FormModal({
   }, [open]);
   useEffect(() => {
     id.current = flow.id;
-    console.log(tabsState[flow.id]);
+    setKeysValue(Array(tabsState[flow.id].formKeysData.input_keys.length).fill(""));
   }, [flow.id]);
 
   var isStream = false;
@@ -309,9 +312,15 @@ export default function FormModal({
       let nodeValidationErrors = validateNodes(reactFlowInstance);
       if (nodeValidationErrors.length === 0) {
         setLockChat(true);
-        let message = chatValue;
+        // 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) => {
+          object[key] = values[index];
+          return object;
+        }, {});
         setChatValue("");
-        addChatHistory(message, true);
+        addChatHistory(message.toString(), true);
         sendAll({
           ...reactFlowInstance.toObject(),
           message,
@@ -341,6 +350,12 @@ export default function FormModal({
   function setModalOpen(x: boolean) {
     setOpen(x);
   }
+
+  function handleOnCheckedChange(checked: boolean, index: number) {
+    if(checked === true){
+      setChatKey(index);
+    }
+  }
   return (
     <Dialog open={open} onOpenChange={setModalOpen}>
       <DialogTrigger className="hidden"></DialogTrigger>
@@ -362,8 +377,12 @@ export default function FormModal({
                 <AccordionItem key={k} value={i}>
                   <AccordionTrigger>{i}</AccordionTrigger>
                   <AccordionContent>
-                    <div className="p-1">
-                      <Textarea placeholder="Enter text..."></Textarea>
+                    <div className="p-1 flex flex-col gap-4">
+                    <div className="flex items-center space-x-2">
+                      <Switch id="airplane-mode" checked={chatKey === k } onCheckedChange={(value) => handleOnCheckedChange(value, k)}/>
+                      <Label htmlFor="airplane-mode">From Chat</Label>
+                    </div>
+                      <Textarea value={keysValue[k]} onChange={(e) => setKeysValue({...keysValue, [k]: e.target.value})} disabled={chatKey === k} placeholder="Enter text..."></Textarea>
                     </div>
                   </AccordionContent>
                 </AccordionItem>
@@ -372,14 +391,14 @@ export default function FormModal({
                 <AccordionItem key={k} value={i}>
                   <div className="flex flex-1 items-center justify-between py-4 font-medium transition-all group">
                     <div className="group-hover:underline">{i}</div>
-                    <Badge>Message Key</Badge>
+                    <Badge>Memory Key</Badge>
                   </div>
                 </AccordionItem>
               ))}
             </Accordion>
           </div>
           <div className="w-full ">
-            <div className="flex flex-col rounded-md border w-full h-full">
+            <div className="flex flex-col rounded-md border bg-muted w-full h-full">
               <div
                 ref={messagesRef}
                 className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 928a088dd..92827cc4e 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -30,7 +30,7 @@ export type sendAllProps = {
   name: string;
   description: string;
   viewport: Viewport;
-  message: string;
+  message: any;
 
   chatHistory: { message: string; isSend: boolean }[];
 };