Feat: Add background color to GraphRag configuration #4980 (#4981)

### What problem does this PR solve?

Feat: Add background color to GraphRag configuration #4980

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/index.tsx

@@ -12,7 +12,7 @@ import {
   ReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { FolderInput, FolderOutput } from 'lucide-react';
+import { Book, FolderInput, FolderOutput } from 'lucide-react';
 import ChatDrawer from '../chat/drawer';
 import FormDrawer from '../flow-drawer';
 import {
@@ -23,6 +23,7 @@ import {
 } from '../hooks';
 import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useHandleExportOrImportJsonFile } from '../hooks/use-export-json';
+import { useOpenDocument } from '../hooks/use-open-document';
 import { useShowDrawer } from '../hooks/use-show-drawer';
 import JsonUploadModal from '../json-upload-modal';
 import RunDrawer from '../run-drawer';
@@ -97,6 +98,8 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideFileUploadModal,
   } = useHandleExportOrImportJsonFile();
 
+  const openDocument = useOpenDocument();
+
   const {
     onNodeClick,
     onPaneClick,
@@ -189,6 +192,14 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
               <TooltipContent>Export</TooltipContent>
             </Tooltip>
           </ControlButton>
+          <ControlButton onClick={openDocument}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Book className={controlIconClassname} />
+              </TooltipTrigger>
+              <TooltipContent>Document</TooltipContent>
+            </Tooltip>
+          </ControlButton>
         </Controls>
       </ReactFlow>
       {formDrawerVisible && (