fix: fixed the issue where parameters of DuckDuckGo could not be saved to the backend after being dragged to the canvas #918 (#1503)

### What problem does this PR solve?

fix: fixed the issue where parameters of DuckDuckGo could not be saved
to the backend after being dragged to the canvas #918

### Type of change

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

web/src/pages/flow/constant.tsx

@@ -4,6 +4,12 @@ import { ReactComponent as KeywordIcon } from '@/assets/svg/keyword.svg';
 import { variableEnabledFieldMap } from '@/constants/chat';
 import i18n from '@/locales/config';
 
+// DuckDuckGo's channel options
+export enum Channel {
+  Text = 'text',
+  News = 'news',
+}
+
 import {
   BranchesOutlined,
   DatabaseOutlined,
@@ -192,17 +198,13 @@ export const initialKeywordExtractValues = {
   ...initialLlmBaseValues,
   top_n: 1,
 };
+export const initialDuckValues = {
+  top_n: 10,
+  channel: Channel.Text,
+};
 
-export const initialFormValuesMap = {
+export const initialBaiduValues = {
-  [Operator.Begin]: initialBeginValues,
+  top_n: 10,
-  [Operator.Retrieval]: initialRetrievalValues,
-  [Operator.Generate]: initialGenerateValues,
-  [Operator.Answer]: {},
-  [Operator.Categorize]: initialCategorizeValues,
-  [Operator.Relevant]: initialRelevantValues,
-  [Operator.RewriteQuestion]: initialRewriteQuestionValues,
-  [Operator.Message]: initialMessageValues,
-  [Operator.KeywordExtract]: initialKeywordExtractValues,
 };
 
 export const CategorizeAnchorPointPositions = [

web/src/pages/flow/duckduckgo-form/index.tsx

@@ -1,11 +1,17 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/commonHooks';
 import { Form, Select } from 'antd';
+import { useMemo } from 'react';
+import { Channel } from '../constant';
 import { IOperatorForm } from '../interface';
 
 const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
+  const options = useMemo(() => {
+    return Object.values(Channel).map((x) => ({ value: x, label: t(x) }));
+  }, [t]);
+
   return (
     <Form
       name="basic"
@@ -22,12 +28,7 @@ const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
         tooltip={t('channelTip')}
         initialValue={'text'}
       >
-        <Select
+        <Select options={options}></Select>
-          options={[
-            { value: 'text', label: t('text') },
-            { value: 'news', label: t('news') },
-          ]}
-        ></Select>
       </Form.Item>
     </Form>
   );

web/src/pages/flow/hooks.ts

@@ -8,6 +8,7 @@ import React, {
   KeyboardEventHandler,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { Connection, Edge, Node, Position, ReactFlowInstance } from 'reactflow';
@@ -30,9 +31,12 @@ import {
   NodeMap,
   Operator,
   RestrictedUpstreamMap,
+  initialBaiduValues,
   initialBeginValues,
   initialCategorizeValues,
+  initialDuckValues,
   initialGenerateValues,
+  initialKeywordExtractValues,
   initialMessageValues,
   initialRelevantValues,
   initialRetrievalValues,
@@ -65,24 +69,30 @@ export const useSelectCanvasData = () => {
 export const useInitializeOperatorParams = () => {
   const llmId = useFetchModelId(true);
 
+  const initialFormValuesMap = useMemo(() => {
+    return {
+      [Operator.Begin]: initialBeginValues,
+      [Operator.Retrieval]: initialRetrievalValues,
+      [Operator.Generate]: { ...initialGenerateValues, llm_id: llmId },
+      [Operator.Answer]: {},
+      [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
+      [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
+      [Operator.RewriteQuestion]: {
+        ...initialRewriteQuestionValues,
+        llm_id: llmId,
+      },
+      [Operator.Message]: initialMessageValues,
+      [Operator.KeywordExtract]: initialKeywordExtractValues,
+      [Operator.DuckDuckGo]: initialDuckValues,
+      [Operator.Baidu]: initialBaiduValues,
+    };
+  }, [llmId]);
+
   const initializeOperatorParams = useCallback(
     (operatorName: Operator) => {
-      const initialFormValuesMap = {
-        [Operator.Begin]: initialBeginValues,
-        [Operator.Retrieval]: initialRetrievalValues,
-        [Operator.Generate]: { ...initialGenerateValues, llm_id: llmId },
-        [Operator.Answer]: {},
-        [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
-        [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
-        [Operator.RewriteQuestion]: {
-          ...initialRewriteQuestionValues,
-          llm_id: llmId,
-        },
-        [Operator.Message]: initialMessageValues,
-      };
       return initialFormValuesMap[operatorName];
     },
-    [llmId],
+    [initialFormValuesMap],
   );
 
   return initializeOperatorParams;