refactor: rewrite/restructure chatbot modal

Author: Source-Controller

package.json

@@ -12,7 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.34",
-    "@types/react": "^18.2.8",
+    "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

src/Component/ChatFlow/TextMessageNode.tsx

@@ -10,9 +10,26 @@ const TextMessageNode = ({ data, isConnectable, id }: NodeProps) => {
   const dataLabel = data?.label
     .split("\n")
     .map((paragraph: any, index: number) => <p key={index}>{paragraph}</p>);
+
+  const color =
+    data?.type === "Start"
+      ? "bg-sky-500/80"
+      : data?.type === "Keyword"
+      ? "bg-orange-400/80"
+      : "bg-lime-600/80";
+
+  const footerColor =
+    data?.type === "Start"
+      ? "bg-sky-500/30"
+      : data?.type === "Keyword"
+      ? "bg-orange-400/30"
+      : "bg-lime-600/30";
+
   return (
-    <div className="w-[200px]">
-      <div className="py-2 px-3 flex justify-start text-white bg-lime-600/80 text-[10px] items-center gap-1 font-bold rounded-t-md">
+    <div className="w-[200px] bg-">
+      <div
+        className={`py-2 px-3 flex justify-start text-white text-[10px] items-center gap-1 font-bold rounded-t-md ${color}`}
+      >
         <WhatsAppIcon className="w-4 h-4" />
         <div>{data?.type}</div>
       </div>
@@ -33,7 +50,9 @@ const TextMessageNode = ({ data, isConnectable, id }: NodeProps) => {
         </div>
         <Handle type="source" position={Position.Bottom} />
       </div>
-      <div className="text-left py-2 px-3 flex justify-between text-white bg-blue-100 text-[10px] items-center gap-1 font-bold rounded-b-md">
+      <div
+        className={`text-left py-2 px-3 flex justify-between text-white text-[10px] items-center gap-1 font-bold rounded-b-md ${footerColor}`}
+      >
         <div id="messageID" className="italic line-clamp-1 text-blue-600">
           {id}
         </div>

src/Component/ChatFlow/index.tsx

@@ -5,8 +5,12 @@ import Navbar from "Component/Common/Navbar";
 import NodePanel from "../ChatFlow/NodePanel";
 import NodeSetting from "Component/ChatFlow/NodeSetting";
 import { nodeTypes } from "Component/ChatFlow/constant";
+import { useCallback, useEffect, useState } from "react";
+// import { useEffect, useState } from "react";
 
 const BasicFlow = () => {
+  // const [datas, setDatas] = useState([]);
+
   const {
     reactFlowWrapper,
     setReactFlowInstance,
@@ -24,9 +28,22 @@ const BasicFlow = () => {
     handleEdgeValidation,
     saveFlow,
   } = useChatFlow();
+
+  // useEffect(() => {
+  // const dataFromLocalStorage = localStorage.getItem("example-flow");
+  // const response = dataFromLocalStorage
+  //   ? JSON.parse(dataFromLocalStorage)
+  //   : null;
+  // const nodes = response?.nodes;
+  // }, []);
+
+  // console.log(edges, "On Connect");
+
   return (
     <div className="h-full">
       <Navbar
+        nodes={nodes}
+        edges={edges}
         onSave={() => {
           saveFlow();
         }}

src/Component/Common/Navbar.tsx

@@ -1,13 +1,30 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import { Save } from "@mui/icons-material";
 import WhatsAppIcon from "@mui/icons-material/WhatsApp";
 import Modal from "../Modal";
+import { Node, Edge } from "reactflow";
+import useChatFlow from "Component/ChatFlow/hook/useChatFlow";
 
 interface Props {
   onSave: () => void;
+  nodes?: Node<any, string | undefined>[] | undefined;
+  edges?: Edge<any>[] | undefined;
 }
 
-const Navbar: FunctionComponent<Props> = ({ onSave }) => {
+const Navbar: FunctionComponent<Props> = ({ onSave, nodes, edges }) => {
+  // const { edges, nodes } = useChatFlow();
+  // const [datas, setDatas] = useState([]);
+
+  useEffect(() => {
+    //   const dataFromLocalStorage = localStorage.getItem("example-flow");
+    //   const response = dataFromLocalStorage
+    //     ? JSON.parse(dataFromLocalStorage)
+    //     : null;
+    //   const nodes = response?.nodes;
+    //   setDatas(nodes);
+    console.log("Edges", edges);
+    console.log("Nodes", nodes);
+  }, [edges, nodes]);
   return (
     <div className="fixed top-0 left-0 w-full border-b border-gray-300 p-2 bg-white z-20 px-4">
       <div className="flex justify-between gap-4">
@@ -19,7 +36,7 @@ const Navbar: FunctionComponent<Props> = ({ onSave }) => {
           </div>
         </div>
         <div className="space-x-4">
-          <Modal />
+          {edges && edges.length > 0 && <Modal nodes={nodes} edges={edges} />}
           <Save
             onClick={onSave}
             className="text-gray-500 text-2xl cursor-pointer"

src/Component/CopyToClipboardButton.tsx

@@ -19,7 +19,7 @@ const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
 
   return (
     <CopyToClipboard text={text} onCopy={handleCopy}>
-      <div className="px-2 cursor-default">
+      <div className="px-1 cursor-default">
         <CopyAll className="h-3 w-3 text-blue-600" />
       </div>
     </CopyToClipboard>

src/Component/Modal/ChatsBot.js

@@ -1,23 +1,28 @@
 import { ThemeProvider } from "styled-components";
 import ChatBot from "react-simple-chatbot";
 
-const ChatsBot = () => {
-  const dataFromLocalStorage = localStorage.getItem("example-flow");
-  const response = dataFromLocalStorage
-    ? JSON.parse(dataFromLocalStorage)
-    : null;
-  const datas = response.nodes;
-
-  if (!datas || datas.length === 0) {
-    return null;
-  }
-
-  const steps = datas.flatMap((node, index) => {
+const ChatsBot = ({ nodes, edges }) => {
+  const steps = nodes?.flatMap((node, index) => {
     const dataLabel = node.data.label
       .split("\n")
       .map((paragraph, index) => <p key={index}>{paragraph}</p>);
 
-    if (index === datas.length - 1) {
+    if (index === nodes.length - 1 && nodes.length === 2) {
+      return [
+        {
+          id: node.id,
+          user: true,
+          end: true,
+          validator: (value) => {
+            if (value === node.data.label) {
+              return true;
+            } else {
+              return "Keyword yang anda masukan salah";
+            }
+          },
+        },
+      ];
+    } else if (index === nodes.length - 1 && nodes.length > 2) {
       return [
         {
           id: node.id,
@@ -32,7 +37,7 @@ const ChatsBot = () => {
           id: node.id,
           component: <div>{dataLabel}</div>,
           asMessage: true,
-          trigger: datas[index + 1].id,
+          trigger: nodes[index + 1].id,
         },
       ];
     } else {
@@ -41,7 +46,7 @@ const ChatsBot = () => {
           {
             id: node.id,
             user: true,
-            trigger: datas[index + 1].id,
+            trigger: nodes[index + 1].id,
             validator: (value) => {
               if (value === node.data.label) {
                 return true;
@@ -59,12 +64,12 @@ const ChatsBot = () => {
               {
                 value: "Nasi Padang",
                 label: "Nasi Padang",
-                trigger: datas[index + 1].id,
+                trigger: nodes[index + 1].id,
               },
               {
                 value: "Soto",
                 label: "Soto",
-                trigger: datas[index + 1].id,
+                trigger: nodes[index + 1].id,
               },
             ],
           },

src/Component/Modal/index.js src/Component/Modal/index.tsx

@@ -2,8 +2,14 @@ import * as React from "react";
 import Dialog from "@mui/material/Dialog";
 import { PlayArrowRounded } from "@mui/icons-material";
 import ChatsBot from "./ChatsBot";
+import { Edge, Node } from "reactflow";
 
-export default function AlertDialog() {
+interface Props {
+  nodes?: Node<any, string | undefined>[] | undefined;
+  edges?: Edge<any>[] | undefined;
+}
+
+const AlertDialog: React.FunctionComponent<Props> = ({ nodes, edges }) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -21,8 +27,10 @@ export default function AlertDialog() {
         onClick={handleClickOpen}
       />
       <Dialog open={open} onClose={handleClose}>
-        <ChatsBot />
+        <ChatsBot nodes={nodes} edges={edges} />
       </Dialog>
     </React.Fragment>
   );
-}
+};
+
+export default AlertDialog;