Feat: Delete unused code in the data pipeline #9869 (#9971)

### What problem does this PR solve?

Feat: Delete unused code in the data pipeline #9869
### Type of change


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

web/src/pages/agent/chat/box.tsx

@@ -21,6 +21,7 @@ import { useAwaitCompentData } from '../hooks/use-chat-logic';
 import { useIsTaskMode } from '../hooks/use-get-begin-query';
 
 function AgentChatBox() {
+  const { data: canvasInfo, refetch } = useFetchAgent();
   const {
     value,
     scrollRef,
@@ -33,13 +34,12 @@ function AgentChatBox() {
     sendFormMessage,
     findReferenceByMessageId,
     appendUploadResponseList,
-  } = useSendAgentMessage();
+  } = useSendAgentMessage({ refetch });
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
   useGetFileIcon();
   const { data: userInfo } = useFetchUserInfo();
-  const { data: canvasInfo } = useFetchAgent();
   const { id: canvasId } = useParams();
   const { uploadCanvasFile, loading } = useUploadCanvasFileWithProgress();
 

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -194,12 +194,19 @@ export const buildRequestBody = (value: string = '') => {
   return msgBody;
 };
 
-export const useSendAgentMessage = (
+export const useSendAgentMessage = ({
-  url?: string,
+  url,
-  addEventList?: (data: IEventList, messageId: string) => void,
+  addEventList,
-  beginParams?: any[],
+  beginParams,
-  isShared?: boolean,
+  isShared,
-) => {
+  refetch,
+}: {
+  url?: string;
+  addEventList?: (data: IEventList, messageId: string) => void;
+  beginParams?: any[];
+  isShared?: boolean;
+  refetch?: () => void;
+}) => {
   const { id: agentId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const inputs = useSelectBeginNodeDataInputs();
@@ -212,8 +219,6 @@ export const useSendAgentMessage = (
 
   const isTaskMode = useIsTaskMode();
 
-  // const { refetch } = useFetchAgent(); // This will cause the shared page to also send a request
-
   const { findReferenceByMessageId } = useFindMessageReference(answerList);
   const prologue = useGetBeginNodePrologue();
   const {
@@ -277,7 +282,7 @@ export const useSendAgentMessage = (
           setValue(message.content);
           removeLatestMessage();
         } else {
-          // refetch(); // pull the message list after sending the message successfully
+          refetch?.(); // pull the message list after sending the message successfully
         }
       } catch (error) {
         console.log('🚀 ~ useSendAgentMessage ~ error:', error);
@@ -293,6 +298,7 @@ export const useSendAgentMessage = (
       clearUploadResponseList,
       setValue,
       removeLatestMessage,
+      refetch,
     ],
   );
 
@@ -305,9 +311,9 @@ export const useSendAgentMessage = (
         role: MessageType.User,
       });
       await send({ ...body, session_id: sessionId });
-      // refetch();
+      refetch?.();
     },
-    [addNewestOneQuestion, send, sessionId],
+    [addNewestOneQuestion, refetch, send, sessionId],
   );
 
   // reset session

web/src/pages/agent/hooks/use-send-shared-message.ts

@@ -48,7 +48,12 @@ export const useSendNextSharedMessage = (
     showModal: showParameterDialog,
   } = useSetModalState();
 
-  const ret = useSendAgentMessage(url, addEventList, params, true);
+  const ret = useSendAgentMessage({
+    url,
+    addEventList,
+    beginParams: params,
+    isShared: true,
+  });
 
   const ok = useCallback(
     (params: any[]) => {

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

@@ -14,6 +14,7 @@ import {
   NodeTypes,
   Position,
   ReactFlow,
+  ReactFlowInstance,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { NotebookPen } from 'lucide-react';
@@ -23,11 +24,7 @@ import { AgentBackground } from '../components/background';
 import { AgentInstanceContext, HandleContext } from '../context';
 
 import FormSheet from '../form-sheet/next';
-import {
+import { useSelectCanvasData, useValidateConnection } from '../hooks';
-  useHandleDrop,
-  useSelectCanvasData,
-  useValidateConnection,
-} from '../hooks';
 import { useAddNode } from '../hooks/use-add-node';
 import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useMoveNote } from '../hooks/use-move-note';
@@ -104,8 +101,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   } = useSelectCanvasData();
   const isValidConnection = useValidateConnection();
 
-  const { onDrop, onDragOver, setReactFlowInstance, reactFlowInstance } =
+  const [reactFlowInstance, setReactFlowInstance] =
-    useHandleDrop();
+    useState<ReactFlowInstance<any, any>>();
 
   const {
     onNodeClick,
@@ -237,10 +234,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           onConnect={onConnect}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
-          onDrop={onDrop}
           onConnectStart={OnConnectStart}
           onConnectEnd={OnConnectEnd}
-          onDragOver={onDragOver}
           onNodeClick={onNodeClick}
           onPaneClick={onPaneClick}
           onInit={setReactFlowInstance}

web/src/pages/data-flow/constant.tsx

@@ -89,6 +89,9 @@ export enum Operator {
   UserFillUp = 'UserFillUp',
   StringTransform = 'StringTransform',
   SearXNG = 'SearXNG',
+  Parser = 'Parser',
+  Chunker = 'Chunker',
+  Tokenizer = 'Tokenizer',
 }
 
 export const SwitchLogicOperatorOptions = ['and', 'or'];

web/src/pages/data-flow/form-sheet/form-config-map.tsx

@@ -1,42 +1,22 @@
 import { Operator } from '../constant';
 import AgentForm from '../form/agent-form';
-import AkShareForm from '../form/akshare-form';
-import ArXivForm from '../form/arxiv-form';
-import BaiduFanyiForm from '../form/baidu-fanyi-form';
-import BaiduForm from '../form/baidu-form';
 import BeginForm from '../form/begin-form';
-import BingForm from '../form/bing-form';
 import CategorizeForm from '../form/categorize-form';
 import CodeForm from '../form/code-form';
 import CrawlerForm from '../form/crawler-form';
-import DeepLForm from '../form/deepl-form';
-import DuckDuckGoForm from '../form/duckduckgo-form';
 import EmailForm from '../form/email-form';
 import ExeSQLForm from '../form/exesql-form';
-import GithubForm from '../form/github-form';
-import GoogleForm from '../form/google-form';
-import GoogleScholarForm from '../form/google-scholar-form';
 import InvokeForm from '../form/invoke-form';
 import IterationForm from '../form/iteration-form';
 import IterationStartForm from '../form/iteration-start-from';
-import Jin10Form from '../form/jin10-form';
 import KeywordExtractForm from '../form/keyword-extract-form';
 import MessageForm from '../form/message-form';
-import PubMedForm from '../form/pubmed-form';
-import QWeatherForm from '../form/qweather-form';
 import RelevantForm from '../form/relevant-form';
 import RetrievalForm from '../form/retrieval-form/next';
 import RewriteQuestionForm from '../form/rewrite-question-form';
-import SearXNGForm from '../form/searxng-form';
 import StringTransformForm from '../form/string-transform-form';
 import SwitchForm from '../form/switch-form';
-import TavilyExtractForm from '../form/tavily-extract-form';
-import TavilyForm from '../form/tavily-form';
-import TuShareForm from '../form/tushare-form';
 import UserFillUpForm from '../form/user-fill-up-form';
-import WenCaiForm from '../form/wencai-form';
-import WikipediaForm from '../form/wikipedia-form';
-import YahooFinanceForm from '../form/yahoo-finance-form';
 
 export const FormConfigMap = {
   [Operator.Begin]: {
@@ -66,75 +46,21 @@ export const FormConfigMap = {
   [Operator.Agent]: {
     component: AgentForm,
   },
-  [Operator.Baidu]: {
-    component: BaiduForm,
-  },
-  [Operator.DuckDuckGo]: {
-    component: DuckDuckGoForm,
-  },
   [Operator.KeywordExtract]: {
     component: KeywordExtractForm,
   },
-  [Operator.Wikipedia]: {
-    component: WikipediaForm,
-  },
-  [Operator.PubMed]: {
-    component: PubMedForm,
-  },
-  [Operator.ArXiv]: {
-    component: ArXivForm,
-  },
-  [Operator.Google]: {
-    component: GoogleForm,
-  },
-  [Operator.Bing]: {
-    component: BingForm,
-  },
-  [Operator.GoogleScholar]: {
-    component: GoogleScholarForm,
-  },
-  [Operator.DeepL]: {
-    component: DeepLForm,
-  },
-  [Operator.GitHub]: {
-    component: GithubForm,
-  },
-  [Operator.BaiduFanyi]: {
-    component: BaiduFanyiForm,
-  },
-  [Operator.QWeather]: {
-    component: QWeatherForm,
-  },
   [Operator.ExeSQL]: {
     component: ExeSQLForm,
   },
   [Operator.Switch]: {
     component: SwitchForm,
   },
-  [Operator.WenCai]: {
-    component: WenCaiForm,
-  },
-  [Operator.AkShare]: {
-    component: AkShareForm,
-  },
-  [Operator.YahooFinance]: {
-    component: YahooFinanceForm,
-  },
-  [Operator.Jin10]: {
-    component: Jin10Form,
-  },
-  [Operator.TuShare]: {
-    component: TuShareForm,
-  },
   [Operator.Crawler]: {
     component: CrawlerForm,
   },
   [Operator.Invoke]: {
     component: InvokeForm,
   },
-  [Operator.SearXNG]: {
-    component: SearXNGForm,
-  },
   [Operator.Concentrator]: {
     component: () => <></>,
   },
@@ -150,16 +76,10 @@ export const FormConfigMap = {
   [Operator.IterationStart]: {
     component: IterationStartForm,
   },
-  [Operator.TavilySearch]: {
-    component: TavilyForm,
-  },
   [Operator.UserFillUp]: {
     component: UserFillUpForm,
   },
   [Operator.StringTransform]: {
     component: StringTransformForm,
   },
-  [Operator.TavilyExtract]: {
-    component: TavilyExtractForm,
-  },
 };

web/src/pages/data-flow/form/akshare-form/index.tsx

@@ -1,22 +0,0 @@
-import { TopNFormField } from '@/components/top-n-item';
-import { Form } from '@/components/ui/form';
-import { INextOperatorForm } from '../../interface';
-import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
-
-const AkShareForm = ({ form, node }: INextOperatorForm) => {
-  return (
-    <Form {...form}>
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <DynamicInputVariable node={node}></DynamicInputVariable>
-        <TopNFormField max={99}></TopNFormField>
-      </form>
-    </Form>
-  );
-};
-
-export default AkShareForm;

web/src/pages/data-flow/form/arxiv-form/index.tsx

@@ -1,96 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialArXivValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const ArXivFormPartialSchema = {
-  top_n: z.number(),
-  sort_by: z.string(),
-};
-
-export const FormSchema = z.object({
-  ...ArXivFormPartialSchema,
-  query: z.string(),
-});
-
-export function ArXivFormWidgets() {
-  const form = useFormContext();
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return ['submittedDate', 'lastUpdatedDate', 'relevance'].map((x) => ({
-      value: x,
-      label: t(x),
-    }));
-  }, [t]);
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name={`sort_by`}
-        render={({ field }) => (
-          <FormItem className="flex-1">
-            <FormLabel>{t('sortBy')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch {...field} options={options}></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialArXivValues.outputs);
-
-function ArXivForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialArXivValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <ArXivFormWidgets></ArXivFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(ArXivForm);

web/src/pages/data-flow/form/baidu-fanyi-form/index.tsx

@@ -1,71 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
-import {
-  BaiduFanyiDomainOptions,
-  BaiduFanyiSourceLangOptions,
-} from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const BaiduFanyiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const options = useMemo(() => {
-    return ['translate', 'fieldtranslate'].map((x) => ({
-      value: x,
-      label: t(`baiduSecretKeyOptions.${x}`),
-    }));
-  }, [t]);
-
-  const baiduFanyiOptions = useMemo(() => {
-    return BaiduFanyiDomainOptions.map((x) => ({
-      value: x,
-      label: t(`baiduDomainOptions.${x}`),
-    }));
-  }, [t]);
-
-  const baiduFanyiSourceLangOptions = useMemo(() => {
-    return BaiduFanyiSourceLangOptions.map((x) => ({
-      value: x,
-      label: t(`baiduSourceLangOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('appid')} name={'appid'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('secretKey')} name={'secret_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('transType')} name={'trans_type'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item noStyle dependencies={['model_type']}>
-        {({ getFieldValue }) =>
-          getFieldValue('trans_type') === 'fieldtranslate' && (
-            <Form.Item label={t('domain')} name={'domain'}>
-              <Select options={baiduFanyiOptions}></Select>
-            </Form.Item>
-          )
-        }
-      </Form.Item>
-      <Form.Item label={t('sourceLang')} name={'source_lang'}>
-        <Select options={baiduFanyiSourceLangOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('targetLang')} name={'target_lang'}>
-        <Select options={baiduFanyiSourceLangOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default BaiduFanyiForm;

web/src/pages/data-flow/form/baidu-form/index.tsx

@@ -1,22 +0,0 @@
-import { TopNFormField } from '@/components/top-n-item';
-import { Form } from '@/components/ui/form';
-import { INextOperatorForm } from '../../interface';
-import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
-
-const BaiduForm = ({ form, node }: INextOperatorForm) => {
-  return (
-    <Form {...form}>
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <DynamicInputVariable node={node}></DynamicInputVariable>
-        <TopNFormField></TopNFormField>
-      </form>
-    </Form>
-  );
-};
-
-export default BaiduForm;

web/src/pages/data-flow/form/bing-form/index.tsx

@@ -1,131 +0,0 @@
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialBingValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { BingCountryOptions, BingLanguageOptions } from '../../options';
-import { FormWrapper } from '../components/form-wrapper';
-import { QueryVariable } from '../components/query-variable';
-
-export const BingFormSchema = {
-  channel: z.string(),
-  api_key: z.string(),
-  country: z.string(),
-  language: z.string(),
-  top_n: z.number(),
-};
-
-export const FormSchema = z.object({
-  query: z.string().optional(),
-  ...BingFormSchema,
-});
-
-export function BingFormWidgets() {
-  const form = useFormContext();
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
-  }, []);
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name="channel"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('channel')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch {...field} options={options}></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="api_key"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('apiKey')}</FormLabel>
-            <FormControl>
-              <Input {...field}></Input>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="country"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('country')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch
-                {...field}
-                options={BingCountryOptions}
-              ></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="language"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('language')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch
-                {...field}
-                options={BingLanguageOptions}
-              ></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-function BingForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialBingValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues,
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <QueryVariable></QueryVariable>
-        <BingFormWidgets></BingFormWidgets>
-      </FormWrapper>
-    </Form>
-  );
-}
-
-export default memo(BingForm);

web/src/pages/data-flow/form/deepl-form/index.tsx

@@ -1,36 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { useBuildSortOptions } from '../../form-hooks';
-import { IOperatorForm } from '../../interface';
-import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const DeepLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const options = useBuildSortOptions();
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={5}></TopNItem>
-      <Form.Item label={t('authKey')} name={'auth_key'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item label={t('sourceLang')} name={'source_lang'}>
-        <Select options={DeepLSourceLangOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('targetLang')} name={'target_lang'}>
-        <Select options={DeepLTargetLangOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default DeepLForm;

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

@@ -1,91 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { RAGFlowSelect } from '@/components/ui/select';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { Channel, initialDuckValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const DuckDuckGoFormPartialSchema = {
-  top_n: z.string(),
-  channel: z.string(),
-};
-
-const FormSchema = z.object({
-  query: z.string(),
-  ...DuckDuckGoFormPartialSchema,
-});
-
-export function DuckDuckGoWidgets() {
-  const { t } = useTranslate('flow');
-  const form = useFormContext();
-
-  const options = useMemo(() => {
-    return Object.values(Channel).map((x) => ({ value: x, label: t(x) }));
-  }, [t]);
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name={'channel'}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
-            <FormControl>
-              <RAGFlowSelect {...field} options={options} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialDuckValues.outputs);
-
-function DuckDuckGoForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialDuckValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-          <DuckDuckGoWidgets></DuckDuckGoWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(DuckDuckGoForm);

web/src/pages/data-flow/form/github-form/index.tsx

@@ -1,52 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { TopNFormField } from '@/components/top-n-item';
-import { Form } from '@/components/ui/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { initialGithubValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const FormSchema = z.object({
-  query: z.string(),
-  top_n: z.number(),
-});
-
-const outputList = buildOutputList(initialGithubValues.outputs);
-
-function GithubForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialGithubValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    mode: 'onChange',
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <TopNFormField></TopNFormField>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(GithubForm);

web/src/pages/data-flow/form/google-scholar-form/index.tsx

@@ -1,166 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Switch } from '@/components/ui/switch';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { DatePicker, DatePickerProps } from 'antd';
-import dayjs from 'dayjs';
-import { memo, useCallback, useMemo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialGoogleScholarValues } from '../../constant';
-import { useBuildSortOptions } from '../../form-hooks';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-// TODO: To be replaced
-const YearPicker = ({
-  onChange,
-  value,
-}: {
-  onChange?: (val: number | undefined) => void;
-  value?: number | undefined;
-}) => {
-  const handleChange: DatePickerProps['onChange'] = useCallback(
-    (val: any) => {
-      const nextVal = val?.format('YYYY');
-      onChange?.(nextVal ? Number(nextVal) : undefined);
-    },
-    [onChange],
-  );
-  // The year needs to be converted into a number and saved to the backend
-  const nextValue = useMemo(() => {
-    if (value) {
-      return dayjs(value.toString());
-    }
-    return undefined;
-  }, [value]);
-
-  return <DatePicker picker="year" onChange={handleChange} value={nextValue} />;
-};
-
-export function GoogleScholarFormWidgets() {
-  const form = useFormContext();
-  const { t } = useTranslate('flow');
-
-  const options = useBuildSortOptions();
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name={`sort_by`}
-        render={({ field }) => (
-          <FormItem className="flex-1">
-            <FormLabel>{t('sortBy')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch {...field} options={options}></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name={`year_low`}
-        render={({ field }) => (
-          <FormItem className="flex-1">
-            <FormLabel>{t('yearLow')}</FormLabel>
-            <FormControl>
-              <YearPicker {...field}></YearPicker>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name={`year_high`}
-        render={({ field }) => (
-          <FormItem className="flex-1">
-            <FormLabel>{t('yearHigh')}</FormLabel>
-            <FormControl>
-              <YearPicker {...field}></YearPicker>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name={`patents`}
-        render={({ field }) => (
-          <FormItem className="flex-1">
-            <FormLabel>{t('patents')}</FormLabel>
-            <FormControl>
-              <Switch
-                checked={field.value}
-                onCheckedChange={field.onChange}
-              ></Switch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-export const GoogleScholarFormPartialSchema = {
-  top_n: z.number(),
-  sort_by: z.string(),
-  year_low: z.number(),
-  year_high: z.number(),
-  patents: z.boolean(),
-};
-
-export const FormSchema = z.object({
-  ...GoogleScholarFormPartialSchema,
-  query: z.string(),
-});
-
-const outputList = buildOutputList(initialGoogleScholarValues.outputs);
-
-function GoogleScholarForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialGoogleScholarValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <GoogleScholarFormWidgets></GoogleScholarFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(GoogleScholarForm);

web/src/pages/data-flow/form/jin10-form/index.tsx

@@ -1,145 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
-import {
-  Jin10CalendarDatashapeOptions,
-  Jin10CalendarTypeOptions,
-  Jin10FlashTypeOptions,
-  Jin10SymbolsDatatypeOptions,
-  Jin10SymbolsTypeOptions,
-  Jin10TypeOptions,
-} from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const Jin10Form = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const jin10TypeOptions = useMemo(() => {
-    return Jin10TypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10TypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10FlashTypeOptions = useMemo(() => {
-    return Jin10FlashTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10FlashTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10CalendarTypeOptions = useMemo(() => {
-    return Jin10CalendarTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10CalendarTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10CalendarDatashapeOptions = useMemo(() => {
-    return Jin10CalendarDatashapeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10CalendarDatashapeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10SymbolsTypeOptions = useMemo(() => {
-    return Jin10SymbolsTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10SymbolsTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10SymbolsDatatypeOptions = useMemo(() => {
-    return Jin10SymbolsDatatypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10SymbolsDatatypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('type')} name={'type'} initialValue={'flash'}>
-        <Select options={jin10TypeOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('secretKey')} name={'secret_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item noStyle dependencies={['type']}>
-        {({ getFieldValue }) => {
-          const type = getFieldValue('type');
-          switch (type) {
-            case 'flash':
-              return (
-                <>
-                  <Form.Item label={t('flashType')} name={'flash_type'}>
-                    <Select options={jin10FlashTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item label={t('contain')} name={'contain'}>
-                    <Input></Input>
-                  </Form.Item>
-                  <Form.Item label={t('filter')} name={'filter'}>
-                    <Input></Input>
-                  </Form.Item>
-                </>
-              );
-
-            case 'calendar':
-              return (
-                <>
-                  <Form.Item label={t('calendarType')} name={'calendar_type'}>
-                    <Select options={jin10CalendarTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item
-                    label={t('calendarDatashape')}
-                    name={'calendar_datashape'}
-                  >
-                    <Select options={jin10CalendarDatashapeOptions}></Select>
-                  </Form.Item>
-                </>
-              );
-
-            case 'symbols':
-              return (
-                <>
-                  <Form.Item label={t('symbolsType')} name={'symbols_type'}>
-                    <Select options={jin10SymbolsTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item
-                    label={t('symbolsDatatype')}
-                    name={'symbols_datatype'}
-                  >
-                    <Select options={jin10SymbolsDatatypeOptions}></Select>
-                  </Form.Item>
-                </>
-              );
-
-            case 'news':
-              return (
-                <>
-                  <Form.Item label={t('contain')} name={'contain'}>
-                    <Input></Input>
-                  </Form.Item>
-                  <Form.Item label={t('filter')} name={'filter'}>
-                    <Input></Input>
-                  </Form.Item>
-                </>
-              );
-
-            default:
-              return <></>;
-          }
-        }}
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Jin10Form;

web/src/pages/data-flow/form/parser-form/index.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/form';
 import { useTranslate } from '@/hooks/common-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
 import { useForm, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 import { initialGoogleValues } from '../../constant';
@@ -81,7 +82,7 @@ export function GoogleFormWidgets() {
   );
 }
 
-const GoogleForm = ({ node }: INextOperatorForm) => {
+const ParserForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslate('flow');
   const defaultValues = useFormValues(initialGoogleValues, node);
 
@@ -136,4 +137,4 @@ const GoogleForm = ({ node }: INextOperatorForm) => {
   );
 };
 
-export default GoogleForm;
+export default memo(ParserForm);

web/src/pages/data-flow/form/pubmed-form/index.tsx

@@ -1,90 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialPubMedValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const PubMedFormPartialSchema = {
-  top_n: z.number(),
-  email: z.string().email(),
-};
-
-export const FormSchema = z.object({
-  ...PubMedFormPartialSchema,
-  query: z.string(),
-});
-
-export function PubMedFormWidgets() {
-  const form = useFormContext();
-  const { t } = useTranslate('flow');
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name="email"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel tooltip={t('emailTip')}>{t('email')}</FormLabel>
-            <FormControl>
-              <Input {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialPubMedValues.outputs);
-
-function PubMedForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialPubMedValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    mode: 'onChange',
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <PubMedFormWidgets></PubMedFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(PubMedForm);

web/src/pages/data-flow/form/qweather-form/index.tsx

@@ -1,157 +0,0 @@
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { RAGFlowSelect } from '@/components/ui/select';
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { INextOperatorForm } from '../../interface';
-import {
-  QWeatherLangOptions,
-  QWeatherTimePeriodOptions,
-  QWeatherTypeOptions,
-  QWeatherUserTypeOptions,
-} from '../../options';
-import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
-
-enum FormFieldName {
-  Type = 'type',
-  UserType = 'user_type',
-}
-
-const QWeatherForm = ({ form, node }: INextOperatorForm) => {
-  const { t } = useTranslation();
-  const typeValue = form.watch(FormFieldName.Type);
-
-  const qWeatherLangOptions = useMemo(() => {
-    return QWeatherLangOptions.map((x) => ({
-      value: x,
-      label: t(`flow.qWeatherLangOptions.${x}`),
-    }));
-  }, [t]);
-
-  const qWeatherTypeOptions = useMemo(() => {
-    return QWeatherTypeOptions.map((x) => ({
-      value: x,
-      label: t(`flow.qWeatherTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const qWeatherUserTypeOptions = useMemo(() => {
-    return QWeatherUserTypeOptions.map((x) => ({
-      value: x,
-      label: t(`flow.qWeatherUserTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const getQWeatherTimePeriodOptions = useCallback(() => {
-    let options = QWeatherTimePeriodOptions;
-    const userType = form.getValues(FormFieldName.UserType);
-    if (userType === 'free') {
-      options = options.slice(0, 3);
-    }
-    return options.map((x) => ({
-      value: x,
-      label: t(`flow.qWeatherTimePeriodOptions.${x}`),
-    }));
-  }, [form, t]);
-
-  return (
-    <Form {...form}>
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <DynamicInputVariable node={node}></DynamicInputVariable>
-        <FormField
-          control={form.control}
-          name="web_apikey"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('flow.webApiKey')}</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="lang"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('flow.lang')}</FormLabel>
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  options={qWeatherLangOptions}
-                ></RAGFlowSelect>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={FormFieldName.Type}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('flow.type')}</FormLabel>
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  options={qWeatherTypeOptions}
-                ></RAGFlowSelect>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={FormFieldName.UserType}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('flow.userType')}</FormLabel>
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  options={qWeatherUserTypeOptions}
-                ></RAGFlowSelect>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        {typeValue === 'weather' && (
-          <FormField
-            control={form.control}
-            name={'time_period'}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.timePeriod')}</FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    {...field}
-                    options={getQWeatherTimePeriodOptions()}
-                  ></RAGFlowSelect>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        )}
-      </form>
-    </Form>
-  );
-};
-
-export default QWeatherForm;

web/src/pages/data-flow/form/searxng-form/index.tsx

@@ -1,73 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { initialSearXNGValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-const FormSchema = z.object({
-  query: z.string(),
-  searxng_url: z.string().min(1),
-  top_n: z.string(),
-});
-
-const outputList = buildOutputList(initialSearXNGValues.outputs);
-
-function SearXNGForm({ node }: INextOperatorForm) {
-  const { t } = useTranslate('flow');
-  const defaultValues = useFormValues(initialSearXNGValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-          <TopNFormField></TopNFormField>
-          <FormField
-            control={form.control}
-            name="searxng_url"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>SearXNG URL</FormLabel>
-                <FormControl>
-                  <Input {...field} placeholder="http://localhost:4000" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(SearXNGForm);

web/src/pages/data-flow/form/tavily-extract-form/index.tsx

@@ -1,121 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { RAGFlowSelect } from '@/components/ui/select';
-import { buildOptions } from '@/utils/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { t } from 'i18next';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import {
-  TavilyExtractDepth,
-  TavilyExtractFormat,
-  initialTavilyExtractValues,
-} from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { ApiKeyField } from '../components/api-key-field';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { PromptEditor } from '../components/prompt-editor';
-import { TavilyFormSchema } from '../tavily-form';
-
-const outputList = buildOutputList(initialTavilyExtractValues.outputs);
-
-function TavilyExtractForm({ node }: INextOperatorForm) {
-  const values = useFormValues(initialTavilyExtractValues, node);
-
-  const FormSchema = z.object({
-    ...TavilyFormSchema,
-    urls: z.string(),
-    extract_depth: z.enum([
-      TavilyExtractDepth.Advanced,
-      TavilyExtractDepth.Basic,
-    ]),
-    format: z.enum([TavilyExtractFormat.Text, TavilyExtractFormat.Markdown]),
-  });
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues: values,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <ApiKeyField></ApiKeyField>
-        </FormContainer>
-        <FormContainer>
-          <FormField
-            control={form.control}
-            name="urls"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>URL</FormLabel>
-                <FormControl>
-                  <PromptEditor
-                    {...field}
-                    multiLine={false}
-                    showToolbar={false}
-                  ></PromptEditor>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="extract_depth"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.extractDepth')}</FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    placeholder="shadcn"
-                    {...field}
-                    options={buildOptions(TavilyExtractDepth, t, 'flow')}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="format"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.format')}</FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    placeholder="shadcn"
-                    {...field}
-                    options={buildOptions(TavilyExtractFormat)}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(TavilyExtractForm);

web/src/pages/data-flow/form/tavily-form/dynamic-domain.tsx

@@ -1,60 +0,0 @@
-import { BlockButton, Button } from '@/components/ui/button';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { t } from 'i18next';
-import { X } from 'lucide-react';
-import { ReactNode } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
-
-type DynamicDomainProps = { name: string; label: ReactNode };
-
-export const DynamicDomain = ({ name, label }: DynamicDomainProps) => {
-  const form = useFormContext();
-
-  const { fields, append, remove } = useFieldArray({
-    name: name,
-    control: form.control,
-  });
-
-  return (
-    <FormItem>
-      <FormLabel>{label}</FormLabel>
-      <div className="space-y-4">
-        {fields.map((field, index) => (
-          <div key={field.id} className="flex">
-            <div className="space-y-2 flex-1">
-              <FormField
-                control={form.control}
-                name={`${name}.${index}.value`}
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormControl>
-                      <Input {...field}></Input>
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </div>
-            <Button
-              type="button"
-              variant={'ghost'}
-              onClick={() => remove(index)}
-            >
-              <X />
-            </Button>
-          </div>
-        ))}
-      </div>
-      <FormMessage />
-      <BlockButton onClick={() => append({ value: '' })}>
-        {t('common.add')}
-      </BlockButton>
-    </FormItem>
-  );
-};

web/src/pages/data-flow/form/tavily-form/index.tsx

@@ -1,214 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { RAGFlowSelect } from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { buildOptions } from '@/utils/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { t } from 'i18next';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import {
-  TavilySearchDepth,
-  TavilyTopic,
-  initialTavilyValues,
-} from '../../constant';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { ApiKeyField } from '../components/api-key-field';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-import { DynamicDomain } from './dynamic-domain';
-import { useValues } from './use-values';
-import { useWatchFormChange } from './use-watch-change';
-
-export const TavilyFormSchema = {
-  api_key: z.string(),
-};
-
-const outputList = buildOutputList(initialTavilyValues.outputs);
-
-function TavilyForm({ node }: INextOperatorForm) {
-  const values = useValues(node);
-
-  const FormSchema = z.object({
-    ...TavilyFormSchema,
-    query: z.string(),
-    search_depth: z.enum([TavilySearchDepth.Advanced, TavilySearchDepth.Basic]),
-    topic: z.enum([TavilyTopic.News, TavilyTopic.General]),
-    max_results: z.coerce.number(),
-    days: z.coerce.number(),
-    include_answer: z.boolean(),
-    include_raw_content: z.boolean(),
-    include_images: z.boolean(),
-    include_image_descriptions: z.boolean(),
-    include_domains: z.array(z.object({ value: z.any() })), // TODO: z.string should be used, but an error will be reported
-    exclude_domains: z.array(z.object({ value: z.any() })),
-  });
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues: values,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <ApiKeyField></ApiKeyField>
-        </FormContainer>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-          <FormField
-            control={form.control}
-            name="search_depth"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.searchDepth')}</FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    placeholder="shadcn"
-                    {...field}
-                    options={buildOptions(TavilySearchDepth, t, 'flow')}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="topic"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.tavilyTopic')}</FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    placeholder="shadcn"
-                    {...field}
-                    options={buildOptions(TavilyTopic, t, 'flow')}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="max_results"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.maxResults')}</FormLabel>
-                <FormControl>
-                  <Input type={'number'} {...field}></Input>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="days"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.days')}</FormLabel>
-                <FormControl>
-                  <Input type={'number'} {...field}></Input>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="include_answer"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.includeAnswer')}</FormLabel>
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  ></Switch>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="include_raw_content"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.includeRawContent')}</FormLabel>
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  ></Switch>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="include_images"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.includeImages')}</FormLabel>
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  ></Switch>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="include_image_descriptions"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('flow.includeImageDescriptions')}</FormLabel>
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  ></Switch>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <DynamicDomain
-            name="include_domains"
-            label={t('flow.includeDomains')}
-          ></DynamicDomain>
-          <DynamicDomain
-            name="exclude_domains"
-            label={t('flow.ExcludeDomains')}
-          ></DynamicDomain>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(TavilyForm);

web/src/pages/data-flow/form/tavily-form/use-values.ts

@@ -1,23 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/agent';
-import { isEmpty } from 'lodash';
-import { useMemo } from 'react';
-import { initialTavilyValues } from '../../constant';
-import { convertToObjectArray } from '../../utils';
-
-export function useValues(node?: RAGFlowNodeType) {
-  const values = useMemo(() => {
-    const formData = node?.data?.form;
-
-    if (isEmpty(formData)) {
-      return initialTavilyValues;
-    }
-
-    return {
-      ...formData,
-      include_domains: convertToObjectArray(formData.include_domains),
-      exclude_domains: convertToObjectArray(formData.exclude_domains),
-    };
-  }, [node?.data?.form]);
-
-  return values;
-}

web/src/pages/data-flow/form/tavily-form/use-watch-change.ts

@@ -1,23 +0,0 @@
-import { useEffect } from 'react';
-import { UseFormReturn, useWatch } from 'react-hook-form';
-import useGraphStore from '../../store';
-import { convertToStringArray } from '../../utils';
-
-export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
-  let values = useWatch({ control: form?.control });
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  useEffect(() => {
-    // Manually triggered form updates are synchronized to the canvas
-    if (id) {
-      values = form?.getValues();
-      let nextValues: any = {
-        ...values,
-        include_domains: convertToStringArray(values.include_domains),
-        exclude_domains: convertToStringArray(values.exclude_domains),
-      };
-
-      updateNodeForm(id, nextValues);
-    }
-  }, [form?.formState.isDirty, id, updateNodeForm, values]);
-}

web/src/pages/data-flow/form/tushare-form/index.tsx

@@ -1,83 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { DatePicker, DatePickerProps, Form, Input, Select } from 'antd';
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
-import { TuShareSrcOptions } from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const DateTimePicker = ({
-  onChange,
-  value,
-}: {
-  onChange?: (val: number | undefined) => void;
-  value?: number | undefined;
-}) => {
-  const handleChange: DatePickerProps['onChange'] = useCallback(
-    (val: any) => {
-      const nextVal = val?.format('YYYY-MM-DD HH:mm:ss');
-      onChange?.(nextVal ? nextVal : undefined);
-    },
-    [onChange],
-  );
-  // The value needs to be converted into a string and saved to the backend
-  const nextValue = useMemo(() => {
-    if (value) {
-      return dayjs(value);
-    }
-    return undefined;
-  }, [value]);
-
-  return (
-    <DatePicker
-      showTime
-      format="YYYY-MM-DD HH:mm:ss"
-      onChange={handleChange}
-      value={nextValue}
-    />
-  );
-};
-
-const TuShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const tuShareSrcOptions = useMemo(() => {
-    return TuShareSrcOptions.map((x) => ({
-      value: x,
-      label: t(`tuShareSrcOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        label={t('token')}
-        name={'token'}
-        tooltip={'Get from https://tushare.pro/'}
-      >
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('src')} name={'src'}>
-        <Select options={tuShareSrcOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('startDate')} name={'start_date'}>
-        <DateTimePicker />
-      </Form.Item>
-      <Form.Item label={t('endDate')} name={'end_date'}>
-        <DateTimePicker />
-      </Form.Item>
-      <Form.Item label={t('keyword')} name={'keyword'}>
-        <Input></Input>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default TuShareForm;

web/src/pages/data-flow/form/wencai-form/index.tsx

@@ -1,97 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { RAGFlowSelect } from '@/components/ui/select';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useMemo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { initialWenCaiValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { WenCaiQueryTypeOptions } from '../../options';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const WenCaiPartialSchema = {
-  top_n: z.number(),
-  query_type: z.string(),
-};
-
-export const FormSchema = z.object({
-  ...WenCaiPartialSchema,
-  query: z.string(),
-});
-
-export function WenCaiFormWidgets() {
-  const { t } = useTranslation();
-  const form = useFormContext();
-
-  const wenCaiQueryTypeOptions = useMemo(() => {
-    return WenCaiQueryTypeOptions.map((x) => ({
-      value: x,
-      label: t(`flow.wenCaiQueryTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <>
-      <TopNFormField max={99}></TopNFormField>
-      <FormField
-        control={form.control}
-        name="query_type"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('flow.queryType')}</FormLabel>
-            <FormControl>
-              <RAGFlowSelect {...field} options={wenCaiQueryTypeOptions} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialWenCaiValues.outputs);
-
-function WenCaiForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialWenCaiValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <WenCaiFormWidgets></WenCaiFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(WenCaiForm);

web/src/pages/data-flow/form/wikipedia-form/index.tsx

@@ -1,88 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { TopNFormField } from '@/components/top-n-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialWikipediaValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { LanguageOptions } from '../../options';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const WikipediaFormPartialSchema = {
-  top_n: z.string(),
-  language: z.string(),
-};
-
-const FormSchema = z.object({
-  query: z.string(),
-  ...WikipediaFormPartialSchema,
-});
-
-export function WikipediaFormWidgets() {
-  const { t } = useTranslate('common');
-  const form = useFormContext();
-
-  return (
-    <>
-      <TopNFormField></TopNFormField>
-      <FormField
-        control={form.control}
-        name="language"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('language')}</FormLabel>
-            <FormControl>
-              <SelectWithSearch {...field} options={LanguageOptions} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialWikipediaValues.outputs);
-
-function WikipediaForm({ node }: INextOperatorForm) {
-  const defaultValues = useFormValues(initialWikipediaValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable></QueryVariable>
-          <WikipediaFormWidgets></WikipediaFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-}
-
-export default memo(WikipediaForm);

web/src/pages/data-flow/form/yahoo-finance-form/index.tsx

@@ -1,125 +0,0 @@
-import { FormContainer } from '@/components/form-container';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Switch } from '@/components/ui/switch';
-import { useTranslate } from '@/hooks/common-hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { ReactNode } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-import { initialYahooFinanceValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
-
-export const YahooFinanceFormPartialSchema = {
-  info: z.boolean(),
-  history: z.boolean(),
-  financials: z.boolean(),
-  balance_sheet: z.boolean(),
-  cash_flow_statement: z.boolean(),
-  news: z.boolean(),
-};
-
-const FormSchema = z.object({
-  stock_code: z.string(),
-  ...YahooFinanceFormPartialSchema,
-});
-
-interface SwitchFormFieldProps {
-  name: string;
-  label: ReactNode;
-}
-function SwitchFormField({ name, label }: SwitchFormFieldProps) {
-  const form = useFormContext();
-
-  return (
-    <FormField
-      control={form.control}
-      name={name}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <Switch
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            ></Switch>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-}
-
-export function YahooFinanceFormWidgets() {
-  const { t } = useTranslate('flow');
-  return (
-    <>
-      <SwitchFormField name="info" label={t('info')}></SwitchFormField>
-      <SwitchFormField name="history" label={t('history')}></SwitchFormField>
-      <SwitchFormField
-        name="financials"
-        label={t('financials')}
-      ></SwitchFormField>
-      <SwitchFormField
-        name="balance_sheet"
-        label={t('balanceSheet')}
-      ></SwitchFormField>
-
-      <SwitchFormField
-        name="cash_flow_statement"
-        label={t('cashFlowStatement')}
-      ></SwitchFormField>
-
-      <SwitchFormField name="news" label={t('news')}></SwitchFormField>
-    </>
-  );
-}
-
-const outputList = buildOutputList(initialYahooFinanceValues.outputs);
-
-const YahooFinanceForm = ({ node }: INextOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const defaultValues = useFormValues(initialYahooFinanceValues, node);
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <FormContainer>
-          <QueryVariable
-            name="stock_code"
-            label={t('stockCode')}
-          ></QueryVariable>
-        </FormContainer>
-        <FormContainer>
-          <YahooFinanceFormWidgets></YahooFinanceFormWidgets>
-        </FormContainer>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-};
-
-export default YahooFinanceForm;

web/src/pages/data-flow/hooks.tsx

@@ -18,7 +18,6 @@ import {
   initialAkShareValues,
   initialArXivValues,
   initialBaiduFanyiValues,
-  initialBaiduValues,
   initialBeginValues,
   initialBingValues,
   initialCategorizeValues,
@@ -103,7 +102,6 @@ export const useInitializeOperatorParams = () => {
         llm_id: llmId,
       },
       [Operator.DuckDuckGo]: initialDuckValues,
-      [Operator.Baidu]: initialBaiduValues,
       [Operator.Wikipedia]: initialWikipediaValues,
       [Operator.PubMed]: initialPubMedValues,
       [Operator.ArXiv]: initialArXivValues,

web/src/pages/data-flow/hooks/use-add-node.ts

@@ -13,7 +13,6 @@ import {
   initialAkShareValues,
   initialArXivValues,
   initialBaiduFanyiValues,
-  initialBaiduValues,
   initialBeginValues,
   initialBingValues,
   initialCategorizeValues,
@@ -82,7 +81,6 @@ export const useInitializeOperatorParams = () => {
         llm_id: llmId,
       },
       [Operator.DuckDuckGo]: initialDuckValues,
-      [Operator.Baidu]: initialBaiduValues,
       [Operator.Wikipedia]: initialWikipediaValues,
       [Operator.PubMed]: initialPubMedValues,
       [Operator.ArXiv]: initialArXivValues,

web/src/pages/data-flow/hooks/use-send-shared-message.ts

@@ -1,79 +0,0 @@
-import { SharedFrom } from '@/constants/chat';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { IEventList } from '@/hooks/use-send-message';
-import {
-  buildRequestBody,
-  useSendAgentMessage,
-} from '@/pages/agent/chat/use-send-agent-message';
-import trim from 'lodash/trim';
-import { useCallback, useState } from 'react';
-import { useSearchParams } from 'umi';
-
-export const useSendButtonDisabled = (value: string) => {
-  return trim(value) === '';
-};
-
-export const useGetSharedChatSearchParams = () => {
-  const [searchParams] = useSearchParams();
-  const data_prefix = 'data_';
-  const data = Object.fromEntries(
-    searchParams
-      .entries()
-      .filter(([key]) => key.startsWith(data_prefix))
-      .map(([key, value]) => [key.replace(data_prefix, ''), value]),
-  );
-  return {
-    from: searchParams.get('from') as SharedFrom,
-    sharedId: searchParams.get('shared_id'),
-    locale: searchParams.get('locale'),
-    data: data,
-    visibleAvatar: searchParams.get('visible_avatar')
-      ? searchParams.get('visible_avatar') !== '1'
-      : true,
-  };
-};
-
-export const useSendNextSharedMessage = (
-  addEventList: (data: IEventList, messageId: string) => void,
-  isTaskMode: boolean,
-) => {
-  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
-  const url = `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`;
-
-  const [params, setParams] = useState<any[]>([]);
-
-  const {
-    visible: parameterDialogVisible,
-    hideModal: hideParameterDialog,
-    showModal: showParameterDialog,
-  } = useSetModalState();
-
-  const ret = useSendAgentMessage(url, addEventList, params, true);
-
-  const ok = useCallback(
-    (params: any[]) => {
-      if (isTaskMode) {
-        const msgBody = buildRequestBody('');
-
-        ret.sendMessage({
-          message: msgBody,
-          beginInputs: params,
-        });
-      } else {
-        setParams(params);
-      }
-
-      hideParameterDialog();
-    },
-    [hideParameterDialog, isTaskMode, ret],
-  );
-
-  return {
-    ...ret,
-    hasError: false,
-    parameterDialogVisible,
-    hideParameterDialog,
-    showParameterDialog,
-    ok,
-  };
-};

web/src/pages/data-flow/share/index.tsx

@@ -1,223 +0,0 @@
-import { EmbedContainer } from '@/components/embed-container';
-import { FileUploadProps } from '@/components/file-upload';
-import { NextMessageInput } from '@/components/message-input/next';
-import MessageItem from '@/components/next-message-item';
-import PdfDrawer from '@/components/pdf-drawer';
-import { useClickDrawer } from '@/components/pdf-drawer/hooks';
-import { MessageType } from '@/constants/chat';
-import {
-  useFetchExternalAgentInputs,
-  useUploadCanvasFileWithProgress,
-} from '@/hooks/use-agent-request';
-import { cn } from '@/lib/utils';
-import i18n from '@/locales/config';
-import DebugContent from '@/pages/agent/debug-content';
-import { useCacheChatLog } from '@/pages/agent/hooks/use-cache-chat-log';
-import { useAwaitCompentData } from '@/pages/agent/hooks/use-chat-logic';
-import { useSendButtonDisabled } from '@/pages/chat/hooks';
-import { buildMessageUuidWithRole } from '@/utils/chat';
-import { isEmpty } from 'lodash';
-import React, { forwardRef, useCallback } from 'react';
-import { AgentDialogueMode } from '../constant';
-import {
-  useGetSharedChatSearchParams,
-  useSendNextSharedMessage,
-} from '../hooks/use-send-shared-message';
-import { ParameterDialog } from './parameter-dialog';
-
-const ChatContainer = () => {
-  const {
-    sharedId: conversationId,
-    locale,
-    visibleAvatar,
-  } = useGetSharedChatSearchParams();
-  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
-    useClickDrawer();
-
-  const { uploadCanvasFile, loading } =
-    useUploadCanvasFileWithProgress(conversationId);
-  const {
-    addEventList,
-    setCurrentMessageId,
-    currentEventListWithoutMessageById,
-    clearEventList,
-  } = useCacheChatLog();
-
-  const { data: inputsData } = useFetchExternalAgentInputs();
-  const isTaskMode = inputsData.mode === AgentDialogueMode.Task;
-
-  const {
-    handlePressEnter,
-    handleInputChange,
-    value,
-    sendLoading,
-    scrollRef,
-    messageContainerRef,
-    derivedMessages,
-    hasError,
-    stopOutputMessage,
-    findReferenceByMessageId,
-    appendUploadResponseList,
-    parameterDialogVisible,
-    showParameterDialog,
-    sendFormMessage,
-    addNewestOneAnswer,
-    ok,
-    resetSession,
-  } = useSendNextSharedMessage(addEventList, isTaskMode);
-  const { buildInputList, handleOk, isWaitting } = useAwaitCompentData({
-    derivedMessages,
-    sendFormMessage,
-    canvasId: conversationId as string,
-  });
-  const sendDisabled = useSendButtonDisabled(value);
-
-  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
-    useCallback(
-      async (files, options) => {
-        const ret = await uploadCanvasFile({ files, options });
-        appendUploadResponseList(ret.data, files);
-      },
-      [appendUploadResponseList, uploadCanvasFile],
-    );
-
-  React.useEffect(() => {
-    if (locale && i18n.language !== locale) {
-      i18n.changeLanguage(locale);
-    }
-  }, [locale, visibleAvatar]);
-
-  React.useEffect(() => {
-    if (!isTaskMode && inputsData.prologue) {
-      addNewestOneAnswer({
-        answer: inputsData.prologue,
-      });
-    }
-  }, [inputsData.prologue, addNewestOneAnswer, isTaskMode]);
-
-  React.useEffect(() => {
-    if (inputsData && inputsData.inputs && !isEmpty(inputsData.inputs)) {
-      showParameterDialog();
-    }
-  }, [inputsData, showParameterDialog]);
-
-  const handleInputsModalOk = (params: any[]) => {
-    ok(params);
-  };
-  const handleReset = () => {
-    resetSession();
-    clearEventList();
-  };
-  if (!conversationId) {
-    return <div>empty</div>;
-  }
-  return (
-    <>
-      <EmbedContainer
-        title={inputsData.title}
-        avatar={inputsData.avatar}
-        handleReset={handleReset}
-      >
-        <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
-          <div
-            className={cn(
-              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-5/6',
-            )}
-            ref={messageContainerRef}
-          >
-            <div>
-              {derivedMessages?.map((message, i) => {
-                return (
-                  <MessageItem
-                    visibleAvatar={visibleAvatar}
-                    conversationId={conversationId}
-                    currentEventListWithoutMessageById={
-                      currentEventListWithoutMessageById
-                    }
-                    setCurrentMessageId={setCurrentMessageId}
-                    key={buildMessageUuidWithRole(message)}
-                    item={message}
-                    nickname="You"
-                    reference={findReferenceByMessageId(message.id)}
-                    loading={
-                      message.role === MessageType.Assistant &&
-                      sendLoading &&
-                      derivedMessages?.length - 1 === i
-                    }
-                    isShare={true}
-                    avatarDialog={inputsData.avatar}
-                    agentName={inputsData.title}
-                    index={i}
-                    clickDocumentButton={clickDocumentButton}
-                    showLikeButton={false}
-                    showLoudspeaker={false}
-                    showLog={false}
-                    sendLoading={sendLoading}
-                  >
-                    {message.role === MessageType.Assistant &&
-                      derivedMessages.length - 1 === i && (
-                        <DebugContent
-                          parameters={buildInputList(message)}
-                          message={message}
-                          ok={handleOk(message)}
-                          isNext={false}
-                          btnText={'Submit'}
-                        ></DebugContent>
-                      )}
-                    {message.role === MessageType.Assistant &&
-                      derivedMessages.length - 1 !== i && (
-                        <div>
-                          <div>{message?.data?.tips}</div>
-
-                          <div>
-                            {buildInputList(message)?.map((item) => item.value)}
-                          </div>
-                        </div>
-                      )}
-                  </MessageItem>
-                );
-              })}
-            </div>
-            <div ref={scrollRef} />
-          </div>
-          {isTaskMode || (
-            <div className="flex w-full justify-center mb-8">
-              <div className="w-5/6">
-                <NextMessageInput
-                  isShared
-                  value={value}
-                  disabled={hasError || isWaitting}
-                  sendDisabled={sendDisabled || isWaitting}
-                  conversationId={conversationId}
-                  onInputChange={handleInputChange}
-                  onPressEnter={handlePressEnter}
-                  sendLoading={sendLoading}
-                  stopOutputMessage={stopOutputMessage}
-                  onUpload={handleUploadFile}
-                  isUploading={loading || isWaitting}
-                ></NextMessageInput>
-              </div>
-            </div>
-          )}
-        </div>
-      </EmbedContainer>
-      {visible && (
-        <PdfDrawer
-          visible={visible}
-          hideModal={hideModal}
-          documentId={documentId}
-          chunk={selectedChunk}
-        ></PdfDrawer>
-      )}
-      {parameterDialogVisible && (
-        <ParameterDialog
-          // hideModal={hideParameterDialog}
-          ok={handleInputsModalOk}
-          data={inputsData.inputs}
-        ></ParameterDialog>
-      )}
-    </>
-  );
-};
-
-export default forwardRef(ChatContainer);

web/src/pages/data-flow/share/parameter-dialog.tsx

@@ -1,30 +0,0 @@
-import { Modal } from '@/components/ui/modal/modal';
-import { IModalProps } from '@/interfaces/common';
-import DebugContent from '@/pages/agent/debug-content';
-import { buildBeginInputListFromObject } from '@/pages/agent/form/begin-form/utils';
-import { BeginQuery } from '@/pages/agent/interface';
-
-interface IProps extends IModalProps<any> {
-  ok(parameters: any[]): void;
-  data: Record<string, Omit<BeginQuery, 'key'>>;
-}
-export function ParameterDialog({ ok, data }: IProps) {
-  return (
-    <Modal
-      open
-      title={'Parameter'}
-      closable={false}
-      showfooter={false}
-      maskClosable={false}
-    >
-      <div className="mb-8">
-        <DebugContent
-          parameters={buildBeginInputListFromObject(data)}
-          ok={ok}
-          isNext={false}
-          btnText={'Submit'}
-        ></DebugContent>
-      </div>
-    </Modal>
-  );
-}