From ae584cf970311f3058288da39190bf0fd8e94a77 Mon Sep 17 00:00:00 2001
From: MXerFix <maksim2003003@gmail.com>
Date: Fri, 26 Jul 2024 10:16:24 +0300
Subject: [PATCH] feat: text response improvements

---
 frontend/src/modals/NodeModal/NodeModal.tsx   |  2 +
 .../modals/ResponseModal/ResponseModal.tsx    | 30 ++++++----
 .../ResponseModal/components/TextResponse.tsx | 55 +++++++++++++++++++
 3 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/modals/ResponseModal/components/TextResponse.tsx

diff --git a/frontend/src/modals/NodeModal/NodeModal.tsx b/frontend/src/modals/NodeModal/NodeModal.tsx
index c87437f..f4721dd 100644
--- a/frontend/src/modals/NodeModal/NodeModal.tsx
+++ b/frontend/src/modals/NodeModal/NodeModal.tsx
@@ -115,6 +115,7 @@ const NodeModal = ({ data, isOpen, onClose, size = "3xl" }: NodeModalProps) => {
                   placeholder="Enter node's response here"
                   name='response'
                   variant='bordered'
+                  disabled
                   value={nodeDataState.response?.data[0].text ?? "No text response"}
                   onChange={setTextResponseValue}
                 />
@@ -171,6 +172,7 @@ const NodeModal = ({ data, isOpen, onClose, size = "3xl" }: NodeModalProps) => {
         </ModalContent>
         <ResponseModal
           data={nodeDataState}
+          setData={setNodeDataState}
           isOpen={isResponseModalOpen}
           onClose={onResponseModalClose}
           response={nodeDataState.response!}
diff --git a/frontend/src/modals/ResponseModal/ResponseModal.tsx b/frontend/src/modals/ResponseModal/ResponseModal.tsx
index 0765732..1851361 100644
--- a/frontend/src/modals/ResponseModal/ResponseModal.tsx
+++ b/frontend/src/modals/ResponseModal/ResponseModal.tsx
@@ -17,22 +17,24 @@ import { flowContext } from "../../contexts/flowContext"
 import { NodeDataType } from "../../types/NodeTypes"
 import { responseType, responseTypeType } from "../../types/ResponseTypes"
 import PythonResponse from "./components/PythonResponse"
+import TextResponse from "./components/TextResponse"
 
-type ResponseModalTab = "Using LLM" | "Python code" | "Custom"
+type ResponseModalTab = "Using LLM" | "Python code" | "Custom" | "Text"
 
 type ResponseModalProps = {
   data: NodeDataType
+  setData: React.Dispatch<React.SetStateAction<NodeDataType>>
   response: responseType
   size?: ModalProps["size"]
   isOpen: boolean
   onClose: () => void
 }
 
-const ResponseModal = ({ isOpen, onClose, data, response, size = "3xl" }: ResponseModalProps) => {
+const ResponseModal = ({ isOpen, onClose, data, setData, response, size = "3xl" }: ResponseModalProps) => {
   const { getNode, setNodes, getNodes } = useReactFlow()
-  const { flows, quietSaveFlows } = useContext(flowContext)
+  const { flows, quietSaveFlows, updateFlow } = useContext(flowContext)
   const { flowId } = useParams()
-  const [selected, setSelected] = useState<responseTypeType>("python")
+  const [selected, setSelected] = useState<responseTypeType>(response.type ?? "python")
   // const [nodeDataState, setNodeDataState] = useState(data)
   const [currentResponse, setCurrentResponse] = useState(response)
   const setSelectedHandler = (key: responseTypeType) => {
@@ -45,17 +47,17 @@ const ResponseModal = ({ isOpen, onClose, data, response, size = "3xl" }: Respon
     value: responseTypeType
   }[] = useMemo(
     () => [
-      {
-        title: "Using LLM",
-        value: "llm",
-      },
       {
         title: "Python code",
         value: "python",
       },
       {
-        title: "Custom",
-        value: "custom",
+        title: "Text",
+        value: "text",
+      },
+      {
+        title: "Using LLM",
+        value: "llm",
       },
     ],
     []
@@ -71,7 +73,12 @@ const ResponseModal = ({ isOpen, onClose, data, response, size = "3xl" }: Respon
         />
       ),
       custom: <div>Custom</div>,
-      text: <div>text</div>,
+      text: (
+        <TextResponse
+          response={currentResponse}
+          setData={setCurrentResponse}
+        />
+      ),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentResponse]
@@ -91,6 +98,7 @@ const ResponseModal = ({ isOpen, onClose, data, response, size = "3xl" }: Respon
       }
       const new_nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
       setNodes(() => new_nodes)
+      setData(new_node.data)
       // currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
       // updateFlow(currentFlow)
       quietSaveFlows()
diff --git a/frontend/src/modals/ResponseModal/components/TextResponse.tsx b/frontend/src/modals/ResponseModal/components/TextResponse.tsx
new file mode 100644
index 0000000..7bd1c47
--- /dev/null
+++ b/frontend/src/modals/ResponseModal/components/TextResponse.tsx
@@ -0,0 +1,55 @@
+import { Textarea } from "@nextui-org/react"
+import { useEffect } from "react"
+import { responseType } from "../../../types/ResponseTypes"
+
+const TextResponse = ({
+  response,
+  setData,
+}: {
+  response: responseType
+  setData: React.Dispatch<React.SetStateAction<responseType>>
+}) => {
+  useEffect(() => {
+    if (!response.data[0].text) {
+      setData({
+        ...response,
+        type: "text",
+        data: [
+          {
+            priority: 1,
+            text: "",
+          },
+        ],
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const changeResponseValue = (value: string) => {
+    setData({
+      ...response,
+      type: "text",
+      data: [
+        {
+          priority: 1,
+          text: value,
+        },
+      ],
+    })
+  }
+
+  return (
+    <div>
+      <Textarea
+        placeholder="Enter text response"
+        variant="bordered"
+        value={response.data[0].text}
+        onChange={(e) => changeResponseValue(e.target.value)}
+        minRows={8}
+        maxRows={14}
+      />
+    </div>
+  )
+}
+
+export default TextResponse