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/.umirc.ts

@@ -30,7 +30,7 @@ export default defineConfig({
   copy: ['src/conf.json'],
   proxy: {
     '/v1': {
-      target: 'http://127.0.0.1:9380/',
+      target: 'http://127.0.0.1:9456/',
       changeOrigin: true,
       ws: true,
       logger: console,

web/src/locales/en.ts

@@ -968,6 +968,23 @@ The above is the content you need to summarize.`,
       concentrator: 'Concentrator',
       concentratorDescription:
         'A component that receives the output from the upstream component and passes it on as input to the downstream components.',
+      tuShare: 'TuShare',
+      tuShareDescription:
+        'This component can be used to obtain financial news briefs from mainstream financial websites, aiding industry and quantitative research.',
+      tuShareSrcOptions: {
+        sina: 'Sina',
+        wallstreetcn: 'wallstreetcn',
+        '10jqka': 'Straight flush',
+        eastmoney: 'Eastmoney',
+        yuncaijing: 'YUNCAIJING',
+        fenghuang: 'FENGHUANG',
+        jinrongjie: 'JRJ',
+      },
+      token: 'Token',
+      src: 'Source',
+      startDate: 'Start date',
+      endDate: 'End date',
+      keyword: 'Keyword',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -920,6 +920,23 @@ export default {
       concentrator: '集線器',
       concentratorDescription:
         '此組件可用於連接多個下游組件。它接收來自上游組件的輸入並將其傳遞給每個下游組件。 ',
+      tuShare: 'TuShare',
+      tuShareDescription:
+        '該組件可用於從主流金融網站獲取金融新聞簡報，輔助行業和量化研究。 ',
+      tuShareSrcOptions: {
+        sina: '新浪財經',
+        wallstreetcn: '華爾街見聞',
+        '10jqka': '同花順',
+        eastmoney: '東方財富',
+        yuncaijing: '雲財經',
+        fenghuang: '鳳凰新聞',
+        jinrongjie: '金融界',
+      },
+      token: 'Token',
+      src: '來源',
+      startDate: '開始日期',
+      endDate: '結束日期',
+      keyword: '關鍵字',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -938,6 +938,23 @@ export default {
       concentrator: '集线器',
       concentratorDescription:
         '该组件可用于连接多个下游组件。它接收来自上游组件的输入并将其传递给每个下游组件。',
+      tuShare: 'TuShare',
+      tuShareDescription:
+        '该组件可用于从主流金融网站获取金融新闻简报，辅助行业和量化研究。',
+      tuShareSrcOptions: {
+        sina: '新浪财经',
+        wallstreetcn: '华尔街见闻',
+        '10jqka': '同花顺',
+        eastmoney: '东方财富',
+        yuncaijing: '云财经',
+        fenghuang: '凤凰新闻',
+        jinrongjie: '金融界',
+      },
+      token: 'Token',
+      src: '源',
+      startDate: '开始日期',
+      endDate: '结束日期',
+      keyword: '关键字',
     },
     footer: {
       profile: 'All rights reserved @ React',

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;