Fix: Generate avatar; Add knowledge graph; Modify the style of the MultiSelect component (#8952)

### What problem does this PR solve?

Fix: Generate avatar; Add knowledge graph; Modify the style of the
multi-select component
[#3221](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/knowledge-graph/constant.ts

@@ -0,0 +1,241 @@
+const nodes = [
+  {
+    type: '"ORGANIZATION"',
+    description:
+      '"厦门象屿是一家公司，其营业收入和市场占有率在2018年至2022年间有所变化。"',
+    source_id: '0',
+    id: '"厦门象屿"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"2018年是一个时间点，标志着厦门象屿营业收入和市场占有率的记录开始。"',
+    source_id: '0',
+    entity_type: '"EVENT"',
+    id: '"2018"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"2019年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
+    source_id: '0',
+    entity_type: '"EVENT"',
+    id: '"2019"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"2020年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
+    source_id: '0',
+    entity_type: '"EVENT"',
+    id: '"2020"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"2021年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
+    source_id: '0',
+    entity_type: '"EVENT"',
+    id: '"2021"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"2022年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
+    source_id: '0',
+    entity_type: '"EVENT"',
+    id: '"2022"',
+  },
+  {
+    type: '"ORGANIZATION"',
+    description:
+      '"厦门象屿股份有限公司是一家公司，中文简称为厦门象屿，外文名称为Xiamen Xiangyu Co.,Ltd.，外文名称缩写为Xiangyu，法定代表人为邓启东。"',
+    source_id: '1',
+    id: '"厦门象屿股份有限公司"',
+  },
+  {
+    type: '"PERSON"',
+    description: '"邓启东是厦门象屿股份有限公司的法定代表人。"',
+    source_id: '1',
+    entity_type: '"PERSON"',
+    id: '"邓启东"',
+  },
+  {
+    type: '"GEO"',
+    description: '"厦门是一个地理位置，与厦门象屿股份有限公司相关。"',
+    source_id: '1',
+    entity_type: '"GEO"',
+    id: '"厦门"',
+  },
+  {
+    type: '"PERSON"',
+    description:
+      '"廖杰 is the Board Secretary, responsible for handling board-related matters and communications."',
+    source_id: '2',
+    id: '"廖杰"',
+  },
+  {
+    type: '"PERSON"',
+    description:
+      '"史经洋 is the Securities Affairs Representative, responsible for handling securities-related matters and communications."',
+    source_id: '2',
+    entity_type: '"PERSON"',
+    id: '"史经洋"',
+  },
+  {
+    type: '"GEO"',
+    description:
+      '"A geographic location in Xiamen, specifically in the Free Trade Zone, where the company\'s office is situated."',
+    source_id: '2',
+    entity_type: '"GEO"',
+    id: '"厦门市湖里区自由贸易试验区厦门片区"',
+  },
+  {
+    type: '"GEO"',
+    description:
+      '"The building where the company\'s office is located, situated at Xiangyu Road, Xiamen."',
+    source_id: '2',
+    entity_type: '"GEO"',
+    id: '"象屿集团大厦"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"Refers to the year 2021, used for comparing financial metrics with the year 2022."',
+    source_id: '3',
+    id: '"2021年"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"Refers to the year 2022, used for presenting current financial metrics and comparing them with the year 2021."',
+    source_id: '3',
+    entity_type: '"EVENT"',
+    id: '"2022年"',
+  },
+  {
+    type: '"EVENT"',
+    description:
+      '"Indicates the focus on key financial metrics in the table, such as weighted averages and percentages."',
+    source_id: '3',
+    entity_type: '"EVENT"',
+    id: '"主要财务指标"',
+  },
+].map(({ type, ...x }) => ({ ...x }));
+
+const edges = [
+  {
+    weight: 2.0,
+    description: '"厦门象屿在2018年的营业收入和市场占有率被记录。"',
+    source_id: '0',
+    source: '"厦门象屿"',
+    target: '"2018"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿在2019年的营业收入和市场占有率有所变化。"',
+    source_id: '0',
+    source: '"厦门象屿"',
+    target: '"2019"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿在2020年的营业收入和市场占有率有所变化。"',
+    source_id: '0',
+    source: '"厦门象屿"',
+    target: '"2020"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿在2021年的营业收入和市场占有率有所变化。"',
+    source_id: '0',
+    source: '"厦门象屿"',
+    target: '"2021"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿在2022年的营业收入和市场占有率有所变化。"',
+    source_id: '0',
+    source: '"厦门象屿"',
+    target: '"2022"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿股份有限公司的法定代表人是邓启东。"',
+    source_id: '1',
+    source: '"厦门象屿股份有限公司"',
+    target: '"邓启东"',
+  },
+  {
+    weight: 2.0,
+    description: '"厦门象屿股份有限公司位于厦门。"',
+    source_id: '1',
+    source: '"厦门象屿股份有限公司"',
+    target: '"厦门"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"廖杰\'s office is located in the Xiangyu Group Building, indicating his workplace."',
+    source_id: '2',
+    source: '"廖杰"',
+    target: '"象屿集团大厦"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"廖杰 works in the Xiamen Free Trade Zone, a specific area within Xiamen."',
+    source_id: '2',
+    source: '"廖杰"',
+    target: '"厦门市湖里区自由贸易试验区厦门片区"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"史经洋\'s office is also located in the Xiangyu Group Building, indicating his workplace."',
+    source_id: '2',
+    source: '"史经洋"',
+    target: '"象屿集团大厦"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"史经洋 works in the Xiamen Free Trade Zone, a specific area within Xiamen."',
+    source_id: '2',
+    source: '"史经洋"',
+    target: '"厦门市湖里区自由贸易试验区厦门片区"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"The years 2021 and 2022 are related as they are used for comparing financial metrics, showing changes and adjustments over time."',
+    source_id: '3',
+    source: '"2021年"',
+    target: '"2022年"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"The \'主要财务指标\' is related to the year 2021 as it provides the basis for financial comparisons and adjustments."',
+    source_id: '3',
+    source: '"2021年"',
+    target: '"主要财务指标"',
+  },
+  {
+    weight: 2.0,
+    description:
+      '"The \'主要财务指标\' is related to the year 2022 as it presents the current financial metrics and their changes compared to 2021."',
+    source_id: '3',
+    source: '"2022年"',
+    target: '"主要财务指标"',
+  },
+];
+
+export const graphData = {
+  directed: false,
+  multigraph: false,
+  graph: {},
+  nodes,
+  edges,
+  combos: [],
+};

web/src/pages/dataset/knowledge-graph/force-graph.tsx

@@ -0,0 +1,141 @@
+import { ElementDatum, Graph, IElementEvent } from '@antv/g6';
+import isEmpty from 'lodash/isEmpty';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { buildNodesAndCombos } from './util';
+
+import styles from './index.less';
+
+const TooltipColorMap = {
+  combo: 'red',
+  node: 'black',
+  edge: 'blue',
+};
+
+interface IProps {
+  data: any;
+  show: boolean;
+}
+
+const ForceGraph = ({ data, show }: IProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const graphRef = useRef<Graph | null>(null);
+
+  const nextData = useMemo(() => {
+    if (!isEmpty(data)) {
+      const graphData = data;
+      const mi = buildNodesAndCombos(graphData.nodes);
+      return { edges: graphData.edges, ...mi };
+    }
+    return { nodes: [], edges: [] };
+  }, [data]);
+
+  const render = useCallback(() => {
+    const graph = new Graph({
+      container: containerRef.current!,
+      autoFit: 'view',
+      autoResize: true,
+      behaviors: [
+        'drag-element',
+        'drag-canvas',
+        'zoom-canvas',
+        'collapse-expand',
+        {
+          type: 'hover-activate',
+          degree: 1, // 👈🏻 Activate relations.
+        },
+      ],
+      plugins: [
+        {
+          type: 'tooltip',
+          enterable: true,
+          getContent: (e: IElementEvent, items: ElementDatum) => {
+            if (Array.isArray(items)) {
+              if (items.some((x) => x?.isCombo)) {
+                return `<p style="font-weight:600;color:red">${items?.[0]?.data?.label}</p>`;
+              }
+              let result = ``;
+              items.forEach((item) => {
+                result += `<section style="color:${TooltipColorMap[e['targetType'] as keyof typeof TooltipColorMap]};"><h3>${item?.id}</h3>`;
+                if (item?.entity_type) {
+                  result += `<div style="padding-bottom: 6px;"><b>Entity type: </b>${item?.entity_type}</div>`;
+                }
+                if (item?.weight) {
+                  result += `<div><b>Weight: </b>${item?.weight}</div>`;
+                }
+                if (item?.description) {
+                  result += `<p>${item?.description}</p>`;
+                }
+              });
+              return result + '</section>';
+            }
+            return undefined;
+          },
+        },
+      ],
+      layout: {
+        type: 'combo-combined',
+        preventOverlap: true,
+        comboPadding: 1,
+        spacing: 100,
+      },
+      node: {
+        style: {
+          size: 150,
+          labelText: (d) => d.id,
+          // labelPadding: 30,
+          labelFontSize: 40,
+          //   labelOffsetX: 20,
+          labelOffsetY: 20,
+          labelPlacement: 'center',
+          labelWordWrap: true,
+        },
+        palette: {
+          type: 'group',
+          field: (d) => {
+            return d?.entity_type as string;
+          },
+        },
+      },
+      edge: {
+        style: (model) => {
+          const weight: number = Number(model?.weight) || 2;
+          const lineWeight = weight * 4;
+          return {
+            stroke: '#99ADD1',
+            lineWidth: lineWeight > 10 ? 10 : lineWeight,
+          };
+        },
+      },
+    });
+
+    if (graphRef.current) {
+      graphRef.current.destroy();
+    }
+
+    graphRef.current = graph;
+
+    graph.setData(nextData);
+
+    graph.render();
+  }, [nextData]);
+
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      render();
+    }
+  }, [data, render]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={styles.forceContainer}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: show ? 'block' : 'none',
+      }}
+    />
+  );
+};
+
+export default ForceGraph;

web/src/pages/dataset/knowledge-graph/index.less

@@ -0,0 +1,5 @@
+.forceContainer {
+  :global(.tooltip) {
+    border-radius: 10px !important;
+  }
+}

web/src/pages/dataset/knowledge-graph/index.tsx

@@ -0,0 +1,31 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import { Button } from '@/components/ui/button';
+import { useFetchKnowledgeGraph } from '@/hooks/knowledge-hooks';
+import { Trash2 } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ForceGraph from './force-graph';
+import { useDeleteKnowledgeGraph } from './use-delete-graph';
+
+const KnowledgeGraph: React.FC = () => {
+  const { data } = useFetchKnowledgeGraph();
+  const { t } = useTranslation();
+  const { handleDeleteKnowledgeGraph } = useDeleteKnowledgeGraph();
+
+  return (
+    <section className={'w-full h-[90dvh] relative p-6'}>
+      <ConfirmDeleteDialog onOk={handleDeleteKnowledgeGraph}>
+        <Button
+          variant="outline"
+          size={'sm'}
+          className="absolute right-0 top-0 z-50"
+        >
+          <Trash2 /> {t('common.delete')}
+        </Button>
+      </ConfirmDeleteDialog>
+      <ForceGraph data={data?.graph} show></ForceGraph>
+    </section>
+  );
+};
+
+export default KnowledgeGraph;

web/src/pages/dataset/knowledge-graph/use-delete-graph.ts

@@ -0,0 +1,21 @@
+import {
+  useKnowledgeBaseId,
+  useRemoveKnowledgeGraph,
+} from '@/hooks/knowledge-hooks';
+import { useCallback } from 'react';
+import { useNavigate } from 'umi';
+
+export function useDeleteKnowledgeGraph() {
+  const { removeKnowledgeGraph, loading } = useRemoveKnowledgeGraph();
+  const navigate = useNavigate();
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const handleDeleteKnowledgeGraph = useCallback(async () => {
+    const ret = await removeKnowledgeGraph();
+    if (ret === 0) {
+      navigate(`/knowledge/dataset?id=${knowledgeBaseId}`);
+    }
+  }, [knowledgeBaseId, navigate, removeKnowledgeGraph]);
+
+  return { handleDeleteKnowledgeGraph, loading };
+}

web/src/pages/dataset/knowledge-graph/util.ts

@@ -0,0 +1,94 @@
+import { isEmpty } from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+class KeyGenerator {
+  idx = 0;
+  chars: string[] = [];
+  constructor() {
+    const chars = Array(26)
+      .fill(1)
+      .map((x, idx) => String.fromCharCode(97 + idx)); // 26 char
+    this.chars = chars;
+  }
+  generateKey() {
+    const key = this.chars[this.idx];
+    this.idx++;
+    return key;
+  }
+}
+
+// Classify nodes based on edge relationships
+export class Converter {
+  keyGenerator;
+  dict: Record<string, string> = {}; // key is node id, value is combo
+  constructor() {
+    this.keyGenerator = new KeyGenerator();
+  }
+  buildDict(edges: { source: string; target: string }[]) {
+    edges.forEach((x) => {
+      if (this.dict[x.source] && !this.dict[x.target]) {
+        this.dict[x.target] = this.dict[x.source];
+      } else if (!this.dict[x.source] && this.dict[x.target]) {
+        this.dict[x.source] = this.dict[x.target];
+      } else if (!this.dict[x.source] && !this.dict[x.target]) {
+        this.dict[x.source] = this.dict[x.target] =
+          this.keyGenerator.generateKey();
+      }
+    });
+    return this.dict;
+  }
+  buildNodesAndCombos(nodes: any[], edges: any[]) {
+    this.buildDict(edges);
+    const nextNodes = nodes.map((x) => ({ ...x, combo: this.dict[x.id] }));
+
+    const combos = Object.values(this.dict).reduce<any[]>((pre, cur) => {
+      if (pre.every((x) => x.id !== cur)) {
+        pre.push({
+          id: cur,
+          data: {
+            label: `Combo ${cur}`,
+          },
+        });
+      }
+      return pre;
+    }, []);
+
+    return { nodes: nextNodes, combos };
+  }
+}
+
+export const isDataExist = (data: any) => {
+  return (
+    data?.data && typeof data?.data !== 'boolean' && !isEmpty(data?.data?.graph)
+  );
+};
+
+const findCombo = (communities: string[]) => {
+  const combo = Array.isArray(communities) ? communities[0] : undefined;
+  return combo;
+};
+
+export const buildNodesAndCombos = (nodes: any[]) => {
+  const combos: any[] = [];
+  nodes.forEach((x) => {
+    const combo = findCombo(x?.communities);
+    if (combo && combos.every((y) => y.data.label !== combo)) {
+      combos.push({
+        isCombo: true,
+        id: uuid(),
+        data: {
+          label: combo,
+        },
+      });
+    }
+  });
+
+  const nextNodes = nodes.map((x) => {
+    return {
+      ...x,
+      combo: combos.find((y) => y.data.label === findCombo(x?.communities))?.id,
+    };
+  });
+
+  return { nodes: nextNodes, combos };
+};

web/src/pages/dataset/setting/tag-item.tsx

@@ -1,3 +1,4 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { SliderInputFormField } from '@/components/slider-input-form-field';
 import {
   FormControl,
@@ -8,8 +9,7 @@ import {
 } from '@/components/ui/form';
 import { MultiSelect } from '@/components/ui/multi-select';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Flex, Form, InputNumber, Select, Slider, Space } from 'antd';
+import { Flex, Form, InputNumber, Select, Slider, Space } from 'antd';
 import DOMPurify from 'dompurify';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -27,8 +27,11 @@ export const TagSetItem = () => {
       value: x.id,
       icon: () => (
         <Space>
-          <Avatar size={20} icon={<UserOutlined />} src={x.avatar} />
-          {x.name}
+          <RAGFlowAvatar
+            name={x.name}
+            avatar={x.avatar}
+            className="size-4"
+          ></RAGFlowAvatar>
         </Space>
       ),
     }));
@@ -61,7 +64,7 @@ export const TagSetItem = () => {
                   onValueChange={field.onChange}
                   placeholder={t('chat.knowledgeBasesMessage')}
                   variant="inverted"
-                  maxCount={0}
+                  maxCount={10}
                   {...field}
                 />
               </FormControl>

web/src/pages/dataset/sidebar/index.tsx

@@ -1,11 +1,15 @@
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { useSecondPathName } from '@/hooks/route-hook';
-import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
+import {
+  useFetchKnowledgeBaseConfiguration,
+  useFetchKnowledgeGraph,
+} from '@/hooks/use-knowledge-request';
 import { cn, formatBytes } from '@/lib/utils';
 import { Routes } from '@/routes';
 import { formatPureDate } from '@/utils/date';
-import { Banknote, Database, FileSearch2 } from 'lucide-react';
+import { isEmpty } from 'lodash';
+import { Banknote, Database, FileSearch2, GitGraph } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHandleMenuClick } from './hooks';
@@ -19,10 +23,11 @@ export function SideBar({ refreshCount }: PropType) {
   const { handleMenuClick } = useHandleMenuClick();
   // refreshCount: be for avatar img sync update on top left
   const { data } = useFetchKnowledgeBaseConfiguration(refreshCount);
+  const { data: routerData } = useFetchKnowledgeGraph();
   const { t } = useTranslation();
 
   const items = useMemo(() => {
-    return [
+    const list = [
       {
         icon: Database,
         label: t(`knowledgeDetails.dataset`),
@@ -39,7 +44,15 @@ export function SideBar({ refreshCount }: PropType) {
         key: Routes.DatasetSetting,
       },
     ];
-  }, [t]);
+    if (!isEmpty(routerData?.graph)) {
+      list.push({
+        icon: GitGraph,
+        label: t(`knowledgeDetails.knowledgeGraph`),
+        key: Routes.KnowledgeGraph,
+      });
+    }
+    return list;
+  }, [t, routerData]);
 
   return (
     <aside className="relative p-5 space-y-8">