feat: modify DuckDuckGo's style #918 (#1485)

### What problem does this PR solve? feat: modify DuckDuckGo's style #918 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-08-12 23:09:04 +08:00 · 2024-07-12 15:04:45 +08:00 · 2024-07-12 15:04:45 +08:00 · 013db9410f
commit 013db9410f
parent b96ba6f831
5 changed files with 72 additions and 50 deletions
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -598,7 +598,7 @@ The above is the content you need to summarize.`,
      addItem: 'Add Item',
      nameRequiredMsg: 'Name is required',
      nameRepeatedMsg: 'The name cannot be repeated',
-      keywordExtract: 'KeywordExtract',
+      keywordExtract: 'Keyword',
      keywordExtractDescription: `This component is used to extract keywords from user's question. Top N specifies the number of keywords you need to extract.`,
      baidu: 'Baidu',
      baiduDescription: `This component is used to get search result from www.baidu.com. Typically, it performs as a supplement to knowledgebases. Top N specifies the number of search results you need to adopt.`,
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/web/src/pages/flow/canvas/node/index.tsx
@ -11,6 +11,8 @@ import NodeDropdown from './dropdown';
 import styles from './index.less';
 import NodePopover from './popover';

+const ZeroGapOperators = [Operator.RewriteQuestion, Operator.KeywordExtract];
+
 export function RagNode({
  id,
  data,
@ -47,20 +49,29 @@ export function RagNode({
        <Flex
          vertical
          align="center"
-          justify={'center'}
-          gap={data.label === Operator.RewriteQuestion ? 0 : 6}
+          justify={'space-around'}
+          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
        >
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={style?.iconFontSize ?? 24}
-          ></OperatorIcon>
-          <span
-            className={styles.type}
-            style={{ fontSize: style?.fontSize ?? 14 }}
-          >
-            {t(lowerFirst(data.label))}
-          </span>
-          <NodeDropdown id={id}></NodeDropdown>
+          <Flex flex={1} justify="center" align="center">
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style?.iconFontSize ?? 24}
+              width={style?.iconWidth}
+            ></OperatorIcon>
+          </Flex>
+
+          <Flex flex={1}>
+            <span
+              className={styles.type}
+              style={{ fontSize: style?.fontSize ?? 14 }}
+            >
+              {t(lowerFirst(data.label))}
+            </span>
+          </Flex>
+          <Flex flex={1}>
+            {' '}
+            <NodeDropdown id={id}></NodeDropdown>
+          </Flex>
        </Flex>

        <section className={styles.bottomBox}>
--- a/web/src/pages/flow/canvas/node/relevant-node.tsx
+++ b/web/src/pages/flow/canvas/node/relevant-node.tsx
@ -47,18 +47,24 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
        ></Handle>
        <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
        <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
-        <Flex vertical align="center" justify="center">
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={style.iconFontSize}
-          ></OperatorIcon>
-          <span
-            className={styles.type}
-            style={{ fontSize: style.fontSize ?? 14 }}
-          >
-            {t(lowerFirst(data.label))}
-          </span>
-          <NodeDropdown id={id}></NodeDropdown>
+        <Flex vertical align="center" justify="center" gap={0}>
+          <Flex flex={1}>
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style.iconFontSize}
+            ></OperatorIcon>
+          </Flex>
+          <Flex flex={1}>
+            <span
+              className={styles.type}
+              style={{ fontSize: style.fontSize ?? 14 }}
+            >
+              {t(lowerFirst(data.label))}
+            </span>
+          </Flex>
+          <Flex flex={1}>
+            <NodeDropdown id={id}></NodeDropdown>
+          </Flex>
        </Flex>
        <section className={styles.bottomBox}>
          <div className={styles.nodeName}>{data.name}</div>
--- a/web/src/pages/flow/constant.tsx
+++ b/web/src/pages/flow/constant.tsx
@ -43,12 +43,10 @@ export const operatorIconMap = {

 export const operatorMap = {
  [Operator.Retrieval]: {
-    description: 'This is where the flow begin',
    backgroundColor: '#cad6e0',
    color: '#385974',
  },
  [Operator.Generate]: {
-    description: 'Generate description',
    backgroundColor: '#ebd6d6',
    width: 150,
    height: 150,
@ -57,27 +55,21 @@ export const operatorMap = {
    color: '#996464',
  },
  [Operator.Answer]: {
-    description:
-      'This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.',
    backgroundColor: '#f4816d',
    color: 'white',
  },
  [Operator.Begin]: {
-    description: 'Begin description',
    backgroundColor: '#4f51d6',
  },
  [Operator.Categorize]: {
-    description: 'Categorize description',
    backgroundColor: '#ffebcd',
    color: '#cc8a26',
  },
  [Operator.Message]: {
-    description: 'Message description',
    backgroundColor: '#c5ddc7',
    color: 'green',
  },
  [Operator.Relevant]: {
-    description: 'BranchesOutlined description',
    backgroundColor: '#9fd94d',
    color: 'white',
    width: 70,
@ -86,7 +78,6 @@ export const operatorMap = {
    iconFontSize: 16,
  },
  [Operator.RewriteQuestion]: {
-    description: 'RewriteQuestion description',
    backgroundColor: '#f8c7f8',
    color: 'white',
    width: 70,
@ -94,48 +85,52 @@ export const operatorMap = {
    fontSize: 12,
    iconFontSize: 16,
  },
+  [Operator.KeywordExtract]: {
+    width: 70,
+    height: 70,
+    backgroundColor: '#0f0e0f',
+    color: '#e1dcdc',
+    fontSize: 12,
+    iconWidth: 16,
+    // iconFontSize: 16,
+  },
+  [Operator.DuckDuckGo]: {
+    backgroundColor: '#e7e389',
+    color: '#aea00c',
+  },
+  [Operator.Baidu]: {},
 };

 export const componentMenuList = [
  {
    name: Operator.Retrieval,
-    description: operatorMap[Operator.Retrieval].description,
  },
  {
    name: Operator.Generate,
-    description: operatorMap[Operator.Generate].description,
  },
  {
    name: Operator.Answer,
-    description: operatorMap[Operator.Answer].description,
  },
  {
    name: Operator.Categorize,
-    description: operatorMap[Operator.Categorize].description,
  },
  {
    name: Operator.Message,
-    description: operatorMap[Operator.Message].description,
  },
  {
    name: Operator.Relevant,
-    description: operatorMap[Operator.Relevant].description,
  },
  {
    name: Operator.RewriteQuestion,
-    description: operatorMap[Operator.RewriteQuestion].description,
  },
  {
    name: Operator.KeywordExtract,
-    description: operatorMap[Operator.Message].description,
  },
  {
    name: Operator.DuckDuckGo,
-    description: operatorMap[Operator.Relevant].description,
  },
  {
    name: Operator.Baidu,
-    description: operatorMap[Operator.RewriteQuestion].description,
  },
 ];

@ -254,9 +249,13 @@ export const RestrictedUpstreamMap = {
    Operator.Categorize,
    Operator.Relevant,
  ],
-  [Operator.KeywordExtract]: [Operator.Begin],
-  [Operator.Baidu]: [Operator.Begin],
-  [Operator.DuckDuckGo]: [Operator.Begin],
+  [Operator.KeywordExtract]: [
+    Operator.Begin,
+    Operator.Message,
+    Operator.Relevant,
+  ],
+  [Operator.Baidu]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
 };

 export const NodeMap = {
@ -268,4 +267,7 @@ export const NodeMap = {
  [Operator.Message]: 'ragNode',
  [Operator.Relevant]: 'relevantNode',
  [Operator.RewriteQuestion]: 'ragNode',
+  [Operator.KeywordExtract]: 'ragNode',
+  [Operator.DuckDuckGo]: 'ragNode',
+  [Operator.Baidu]: 'ragNode',
 };
--- a/web/src/pages/flow/operator-icon/index.tsx
+++ b/web/src/pages/flow/operator-icon/index.tsx
@ -6,11 +6,14 @@ import styles from './index.less';
 interface IProps {
  name: Operator;
  fontSize?: number;
+  width?: number;
 }

-const OperatorIcon = ({ name, fontSize }: IProps) => {
+const OperatorIcon = ({ name, fontSize, width }: IProps) => {
  const Icon = operatorIconMap[name] || React.Fragment;
-  return <Icon className={styles.icon} style={{ fontSize }}></Icon>;
+  return (
+    <Icon className={styles.icon} style={{ fontSize }} width={width}></Icon>
+  );
 };

 export default OperatorIcon;