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, "
"), + // }} + message += `${key}: ${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,