update tabbar

src/nodes/NoteFlow.tsx

@@ -83,6 +83,7 @@ const NoteFlow = () => {
   ]);
   const [showTabBar, setShowTabBar] = useState(false);
   const [lastNodeId, setLastNodeId] = useState('1');
+  const [selectedNodeId, setSelectedNodeId] = useState(null); // Theo dõi node đã chọn
 
   const handleAddNoteClick = () => {
     setShowTabBar(true);
@@ -99,8 +100,8 @@ const NoteFlow = () => {
 
     const addNoteNode = nodes.find((node) => node.id === '2');
 
+    // Xóa node "Add Note" nếu chọn "Replied to conversation?"
     if (option.id === '4') {
-      // Xóa node "Add Note"
       setNodes((nds) => nds.filter((node) => node.id !== '2'));
 
       // Thêm node "Replied to conversation?"
@@ -113,6 +114,7 @@ const NoteFlow = () => {
       // Thêm các nhánh "Send survey" và "Contact Exists"
       const yesNode = {
         id: '5',
+        type: 'output',
         data: {
           label: (
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -126,6 +128,7 @@ const NoteFlow = () => {
 
       const noNode = {
         id: '6',
+        type: 'output',
         data: {
           label: (
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -139,11 +142,12 @@ const NoteFlow = () => {
 
       setNodes((nds) => [...nds, repliedNode, yesNode, noNode]);
 
+
       setEdges((eds) => [
         ...eds,
         { id: 'e4-5', source: '4', target: '5', label: 'yes', animated: false },
         { id: 'e4-6', source: '4', target: '6', label: 'no', animated: false },
-        { id: `e${lastNodeId}-4`, source: lastNodeId, target: '4' } // Kết nối node hiện tại với "Replied to conversation?"
+        { id: `e${lastNodeId}-4`, source: lastNodeId, target: '4' }, // Kết nối node hiện tại với "Replied to conversation?"
       ]);
     } else {
       if (addNoteNode) {
@@ -171,6 +175,9 @@ const NoteFlow = () => {
       // Cập nhật lastNodeId
       setLastNodeId(option.id);
     }
+
+    // Cập nhật selectedNodeId với ID của node được chọn
+    setSelectedNodeId(option.id);
   };
 
   const onNodeClick = (event, node) => {
@@ -203,7 +210,8 @@ const NoteFlow = () => {
               onClick={() => handleTabClick(option)}
               style={{
                 padding: '10px',
-                cursor: 'pointer',
+                cursor: selectedNodeId === option.id ? 'not-allowed' : 'pointer',
+                opacity: selectedNodeId === option.id ? 0.5 : 1, // Làm mờ các node đã chọn
                 borderBottom: '1px solid #ddd',
               }}
             >