From 46abfa26c2ea85780c682324ff6c3f99368c8281 Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Mon, 6 Oct 2025 13:52:07 +0100
Subject: [PATCH] Added background toggle functionality across multiple
 components (AgentflowCanvas, MarketplaceCanvas, Canvas) with new icons for
 enabling/disabling background.

---
 packages/ui/src/views/account/index.jsx           |  2 --
 packages/ui/src/views/agentflowsv2/Canvas.jsx     | 15 +++++++++++++--
 .../src/views/agentflowsv2/MarketplaceCanvas.jsx  | 15 +++++++++++++--
 packages/ui/src/views/canvas/index.jsx            | 15 +++++++++++++--
 .../src/views/marketplaces/MarketplaceCanvas.jsx  | 15 +++++++++++++--
 5 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/views/account/index.jsx b/packages/ui/src/views/account/index.jsx
index 6eb3d8f34..8a0c78338 100644
--- a/packages/ui/src/views/account/index.jsx
+++ b/packages/ui/src/views/account/index.jsx
@@ -72,7 +72,6 @@ const AccountSettings = () => {
     const [isLoading, setLoading] = useState(true)
     const [profileName, setProfileName] = useState('')
     const [email, setEmail] = useState('')
-    const [migrateEmail, setMigrateEmail] = useState('')
     const [newPassword, setNewPassword] = useState('')
     const [confirmPassword, setConfirmPassword] = useState('')
     const [usage, setUsage] = useState(null)
@@ -125,7 +124,6 @@ const AccountSettings = () => {
             if (getUserByIdApi.data) {
                 setProfileName(getUserByIdApi.data?.name || '')
                 setEmail(getUserByIdApi.data?.email || '')
-                setMigrateEmail(getUserByIdApi.data?.email || '')
             }
         } catch (e) {
             console.error(e)
diff --git a/packages/ui/src/views/agentflowsv2/Canvas.jsx b/packages/ui/src/views/agentflowsv2/Canvas.jsx
index 3a724666f..07bf57df5 100644
--- a/packages/ui/src/views/agentflowsv2/Canvas.jsx
+++ b/packages/ui/src/views/agentflowsv2/Canvas.jsx
@@ -42,7 +42,7 @@ import useApi from '@/hooks/useApi'
 import useConfirm from '@/hooks/useConfirm'
 
 // icons
-import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
+import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
 
 // utils
 import {
@@ -101,6 +101,7 @@ const AgentflowCanvas = () => {
     const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
     const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
     const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
+    const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
 
     const reactFlowWrapper = useRef(null)
 
@@ -742,6 +743,16 @@ const AgentflowCanvas = () => {
                                     >
                                         {isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
                                     </button>
+                                    <button
+                                        className='react-flow__controls-button react-flow__controls-interactive'
+                                        onClick={() => {
+                                            setIsBackgroundEnabled(!isBackgroundEnabled)
+                                        }}
+                                        title='toggle background'
+                                        aria-label='toggle background'
+                                    >
+                                        {isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
+                                    </button>
                                 </Controls>
                                 <MiniMap
                                     nodeStrokeWidth={3}
@@ -752,7 +763,7 @@ const AgentflowCanvas = () => {
                                         backgroundColor: customization.isDarkMode ? theme.palette.background.default : '#fff'
                                     }}
                                 />
-                                <Background color='#aaa' gap={16} />
+                                {isBackgroundEnabled && <Background color='#aaa' gap={16} />}
                                 <AddNodes
                                     isAgentCanvas={true}
                                     isAgentflowv2={true}
diff --git a/packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx b/packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx
index a63cd184a..aa62363c4 100644
--- a/packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx
+++ b/packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx
@@ -20,7 +20,7 @@ import EditNodeDialog from '@/views/agentflowsv2/EditNodeDialog'
 import { flowContext } from '@/store/context/ReactFlowContext'
 
 // icons
-import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
+import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
 
 const nodeTypes = { agentFlow: AgentFlowNode, stickyNote: StickyNote, iteration: IterationNode }
 const edgeTypes = { agentFlow: AgentFlowEdge }
@@ -42,6 +42,7 @@ const MarketplaceCanvasV2 = () => {
     const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
     const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
     const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
+    const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
 
     const reactFlowWrapper = useRef(null)
     const { setReactFlowInstance } = useContext(flowContext)
@@ -136,8 +137,18 @@ const MarketplaceCanvasV2 = () => {
                                     >
                                         {isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
                                     </button>
+                                    <button
+                                        className='react-flow__controls-button react-flow__controls-interactive'
+                                        onClick={() => {
+                                            setIsBackgroundEnabled(!isBackgroundEnabled)
+                                        }}
+                                        title='toggle background'
+                                        aria-label='toggle background'
+                                    >
+                                        {isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
+                                    </button>
                                 </Controls>
-                                <Background color='#aaa' gap={16} />
+                                {isBackgroundEnabled && <Background color='#aaa' gap={16} />}
                                 <EditNodeDialog
                                     show={editNodeDialogOpen}
                                     dialogProps={editNodeDialogProps}
diff --git a/packages/ui/src/views/canvas/index.jsx b/packages/ui/src/views/canvas/index.jsx
index ebfbd0506..8835706ec 100644
--- a/packages/ui/src/views/canvas/index.jsx
+++ b/packages/ui/src/views/canvas/index.jsx
@@ -38,7 +38,7 @@ import useConfirm from '@/hooks/useConfirm'
 import { useAuth } from '@/hooks/useAuth'
 
 // icons
-import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
+import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
 
 // utils
 import {
@@ -98,6 +98,7 @@ const Canvas = () => {
     const [isUpsertButtonEnabled, setIsUpsertButtonEnabled] = useState(false)
     const [isSyncNodesButtonEnabled, setIsSyncNodesButtonEnabled] = useState(false)
     const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
+    const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
 
     const reactFlowWrapper = useRef(null)
 
@@ -621,8 +622,18 @@ const Canvas = () => {
                                     >
                                         {isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
                                     </button>
+                                    <button
+                                        className='react-flow__controls-button react-flow__controls-interactive'
+                                        onClick={() => {
+                                            setIsBackgroundEnabled(!isBackgroundEnabled)
+                                        }}
+                                        title='toggle background'
+                                        aria-label='toggle background'
+                                    >
+                                        {isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
+                                    </button>
                                 </Controls>
-                                <Background color='#aaa' gap={16} />
+                                {isBackgroundEnabled && <Background color='#aaa' gap={16} />}
                                 <AddNodes isAgentCanvas={isAgentCanvas} nodesData={getNodesApi.data} node={selectedNode} />
                                 {isSyncNodesButtonEnabled && (
                                     <Fab
diff --git a/packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx b/packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx
index 8144496b2..b1b9c2b11 100644
--- a/packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx
+++ b/packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx
@@ -16,7 +16,7 @@ import MarketplaceCanvasHeader from './MarketplaceCanvasHeader'
 import StickyNote from '../canvas/StickyNote'
 
 // icons
-import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
+import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
 
 const nodeTypes = { customNode: MarketplaceCanvasNode, stickyNote: StickyNote }
 const edgeTypes = { buttonedge: '' }
@@ -36,6 +36,7 @@ const MarketplaceCanvas = () => {
     const [nodes, setNodes, onNodesChange] = useNodesState()
     const [edges, setEdges, onEdgesChange] = useEdgesState()
     const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
+    const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
 
     const reactFlowWrapper = useRef(null)
 
@@ -114,8 +115,18 @@ const MarketplaceCanvas = () => {
                                     >
                                         {isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
                                     </button>
+                                    <button
+                                        className='react-flow__controls-button react-flow__controls-interactive'
+                                        onClick={() => {
+                                            setIsBackgroundEnabled(!isBackgroundEnabled)
+                                        }}
+                                        title='toggle background'
+                                        aria-label='toggle background'
+                                    >
+                                        {isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
+                                    </button>
                                 </Controls>
-                                <Background color='#aaa' gap={16} />
+                                {isBackgroundEnabled && <Background color='#aaa' gap={16} />}
                             </ReactFlow>
                         </div>
                     </div>