feat: Add component TuShare #1739 (#2745)

### What problem does this PR solve?

feat: Add component  TuShare  #1739

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/constant.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as KeywordIcon } from '@/assets/svg/keyword.svg';
 import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
 import { ReactComponent as QWeatherIcon } from '@/assets/svg/qweather.svg';
 import { ReactComponent as SwitchIcon } from '@/assets/svg/switch.svg';
+import { ReactComponent as TuShareIcon } from '@/assets/svg/tushare.svg';
 import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
 import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
 import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
@@ -69,6 +70,7 @@ export enum Operator {
   YahooFinance = 'YahooFinance',
   Jin10 = 'Jin10',
   Concentrator = 'Concentrator',
+  TuShare = 'TuShare',
 }
 
 export const operatorIconMap = {
@@ -100,6 +102,7 @@ export const operatorIconMap = {
   [Operator.YahooFinance]: YahooFinanceIcon,
   [Operator.Jin10]: Jin10Icon,
   [Operator.Concentrator]: ConcentratorIcon,
+  [Operator.TuShare]: TuShareIcon,
 };
 
 export const operatorMap: Record<
@@ -221,6 +224,7 @@ export const operatorMap: Record<
     fontSize: 10,
     iconFontSize: 16,
   },
+  [Operator.TuShare]: { backgroundColor: '#f8cfa0' },
 };
 
 export const componentMenuList = [
@@ -305,6 +309,9 @@ export const componentMenuList = [
   {
     name: Operator.Jin10,
   },
+  {
+    name: Operator.TuShare,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -467,6 +474,12 @@ export const initialJin10Values = {
 
 export const initialConcentratorValues = {};
 
+export const initialTuShareValues = {
+  token: 'xxx',
+  src: 'eastmoney',
+  start_date: '2024-01-01 09:00:00',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -542,6 +555,7 @@ export const RestrictedUpstreamMap = {
   [Operator.YahooFinance]: [Operator.Begin],
   [Operator.Jin10]: [Operator.Begin],
   [Operator.Concentrator]: [Operator.Begin],
+  [Operator.TuShare]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -573,6 +587,7 @@ export const NodeMap = {
   [Operator.AkShare]: 'ragNode',
   [Operator.YahooFinance]: 'ragNode',
   [Operator.Jin10]: 'ragNode',
+  [Operator.TuShare]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2750,3 +2765,12 @@ export const Jin10CalendarTypeOptions = ['cj', 'qh', 'hk', 'us'];
 export const Jin10CalendarDatashapeOptions = ['data', 'event', 'holiday'];
 export const Jin10SymbolsTypeOptions = ['GOODS', 'FOREX', 'FUTURE', 'CRYPTO'];
 export const Jin10SymbolsDatatypeOptions = ['symbols', 'quotes'];
+export const TuShareSrcOptions = [
+  'sina',
+  'wallstreetcn',
+  '10jqka',
+  'eastmoney',
+  'yuncaijing',
+  'fenghuang',
+  'jinrongjie',
+];

web/src/pages/flow/flow-drawer/index.tsx

@@ -29,6 +29,7 @@ import RelevantForm from '../relevant-form';
 import RetrievalForm from '../retrieval-form';
 import RewriteQuestionForm from '../rewrite-question-form';
 import SwitchForm from '../switch-form';
+import TuShareForm from '../tushare-form';
 import WenCaiForm from '../wencai-form';
 import WikipediaForm from '../wikipedia-form';
 
@@ -68,6 +69,7 @@ const FormMap = {
   [Operator.AkShare]: AkShareForm,
   [Operator.YahooFinance]: YahooFinanceForm,
   [Operator.Jin10]: Jin10Form,
+  [Operator.TuShare]: TuShareForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

@@ -55,6 +55,7 @@ import {
   initialRetrievalValues,
   initialRewriteQuestionValues,
   initialSwitchValues,
+  initialTuShareValues,
   initialWenCaiValues,
   initialWikipediaValues,
   initialYahooFinanceValues,
@@ -123,6 +124,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.YahooFinance]: initialYahooFinanceValues,
       [Operator.Jin10]: initialJin10Values,
       [Operator.Concentrator]: initialConcentratorValues,
+      [Operator.TuShare]: initialTuShareValues,
     };
   }, [llmId]);
 

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

@@ -0,0 +1,82 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { DatePicker, DatePickerProps, Form, Input, Select } from 'antd';
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { TuShareSrcOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+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 }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const tuShareSrcOptions = useMemo(() => {
+    return TuShareSrcOptions.map((x) => ({
+      value: x,
+      label: t(`tuShareSrcOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <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;