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/components/parse-configuration/graph-rag-items.tsx

@@ -1,5 +1,5 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { Divider, Form, Select, Switch } from 'antd';
+import { Form, Select, Switch } from 'antd';
 import { upperFirst } from 'lodash';
 import { useCallback, useMemo } from 'react';
 import EntityTypesItem from '../entity-types-item';
@@ -50,8 +50,7 @@ const GraphRagItems = () => {
   );
 
   return (
-    <>
-      <Divider></Divider>
+    <div className="border p-2 rounded-lg bg-slate-50 dark:bg-gray-600">
       <Form.Item
         name={['parser_config', 'graphrag', 'use_graphrag']}
         label={t('useGraphRag')}
@@ -113,7 +112,7 @@ const GraphRagItems = () => {
           );
         }}
       </Form.Item>
-    </>
+    </div>
   );
 };
 

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 && (

web/src/pages/flow/hooks/use-open-document.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+
+export function useOpenDocument() {
+  const openDocument = useCallback(() => {
+    window.open(
+      'https://ragflow.io/docs/dev/category/agent-components',
+      '_blank',
+    );
+  }, []);
+
+  return openDocument;
+}