feat: Add component Jin10 #1739 (#2563)

### What problem does this PR solve?

feat: Add component Jin10 #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/locales/en.ts

@@ -910,11 +910,57 @@ The above is the content you need to summarize.`,
       akShareDescription:
         'This component can be used to obtain news information for the corresponding stock from the Eastmoney website.',
       yahooFinance: 'YahooFinance',
+      yahooFinanceDescription:
+        'The component queries information about the company based on the provided ticker symbol.',
       info: 'Info',
       history: 'History',
       financials: 'Financials',
       balanceSheet: 'Balance sheet',
       cashFlowStatement: 'Cash flow statement',
+      jin10: 'Jin10',
+      jin10Description:
+        'This component can be used to access information in the financial sector from the Jin10 Open Platform, including quick news, calendar, quotes, reference.',
+      flashType: 'Flash type',
+      filter: 'Filter',
+      contain: 'Contain',
+      calendarType: 'Calendar type',
+      calendarDatashape: 'Calendar datashape',
+      symbolsDatatype: 'Symbols datatype',
+      symbolsType: 'Symbols type',
+      jin10TypeOptions: {
+        flash: 'Quick News',
+        calendar: 'Calendar',
+        symbols: 'quotes',
+        news: 'reference',
+      },
+      jin10FlashTypeOptions: {
+        '1': 'Market News',
+        '2': ' Futures News',
+        '3': 'US-Hong Kong News',
+        '4': 'A-Share News',
+        '5': 'Commodities & Forex News',
+      },
+      jin10CalendarTypeOptions: {
+        cj: 'Macroeconomic Data Calendar',
+        qh: ' Futures Calendar',
+        hk: 'Hong Kong Stock Market Calendar',
+        us: 'US Stock Market Calendar',
+      },
+      jin10CalendarDatashapeOptions: {
+        data: 'Data',
+        event: ' Event',
+        holiday: 'Holiday',
+      },
+      jin10SymbolsTypeOptions: {
+        GOODS: 'Commodity Quotes',
+        FOREX: ' Forex Quotes',
+        FUTURE: 'International Market Quotes',
+        CRYPTO: 'Cryptocurrency Quotes',
+      },
+      jin10SymbolsDatatypeOptions: {
+        symbols: 'Commodity List',
+        quotes: ' Latest Market Quotes',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -863,11 +863,56 @@ export default {
       akShare: 'AkShare',
       akShareDescription: '此組件可用於從東方財富網取得對應股票的新聞資訊。',
       yahooFinance: '雅虎財經',
+      yahooFinanceDescription: '該組件根據提供的股票代碼查詢有關公司的資訊。',
       info: '訊息',
       history: '歷史',
       financials: '財務',
       balanceSheet: '資產負債表',
       cashFlowStatement: '現金流量表',
+      jin10: '金十',
+      jin10Description:
+        '此組件可用於從金十開放平台獲取金融領域的信息，包括快訊、日曆、行情、參考。 ',
+      flashType: '閃光類型',
+      filter: '篩選',
+      contain: '包含',
+      calendarType: '日曆類型',
+      calendarDatashape: '日曆資料形狀',
+      symbolsDatatype: '符號資料型別',
+      symbolsType: '符號類型',
+      jin10TypeOptions: {
+        flash: '快訊',
+        calendar: '日曆',
+        symbols: '行情',
+        news: '參考',
+      },
+      jin10FlashTypeOptions: {
+        '1': '市場快訊',
+        '2': '期貨快訊',
+        '3': '美港快訊',
+        '4': 'A股快訊',
+        '5': '商品外匯快訊',
+      },
+      jin10CalendarTypeOptions: {
+        cj: '宏觀資料日曆',
+        qh: '期貨日曆',
+        hk: '港股日曆',
+        us: '美股日曆',
+      },
+      jin10CalendarDatashapeOptions: {
+        data: '資料',
+        event: ' 事件',
+        holiday: '假期',
+      },
+      jin10SymbolsTypeOptions: {
+        GOODS: '商品行情',
+        FOREX: '外匯行情',
+        FUTURE: '國際行情',
+        CRYPTO: '加密貨幣行情',
+      },
+      jin10SymbolsDatatypeOptions: {
+        symbols: '品種列表',
+        quotes: '最新行情',
+      },
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -881,11 +881,56 @@ export default {
       akShare: 'AkShare',
       akShareDescription: '该组件可用于从东方财富网站获取相应股票的新闻信息。',
       yahooFinance: '雅虎财经',
+      yahooFinanceDescription: '该组件根据提供的股票代码查询有关公司的信息。',
       info: '信息',
       history: '历史',
       financials: '财务',
       balanceSheet: '资产负债表',
       cashFlowStatement: '现金流量表',
+      jin10: '金十',
+      jin10Description:
+        '该组件可用于从金十开放平台获取金融领域的信息，包括快讯、日历、行情、参考。',
+      flashType: '闪光类型',
+      filter: '筛选',
+      contain: '包含',
+      calendarType: '日历类型',
+      calendarDatashape: '日历数据形状',
+      symbolsDatatype: '符号数据类型',
+      symbolsType: '符号类型',
+      jin10TypeOptions: {
+        flash: '快讯',
+        calendar: '日历',
+        symbols: '行情',
+        news: '参考',
+      },
+      jin10FlashTypeOptions: {
+        '1': '市场快讯',
+        '2': '期货快讯',
+        '3': '美港快讯',
+        '4': 'A股快讯',
+        '5': '商品外汇快讯',
+      },
+      jin10CalendarTypeOptions: {
+        cj: '宏观数据日历',
+        qh: '期货日历',
+        hk: '港股日历',
+        us: '美股日历',
+      },
+      jin10CalendarDatashapeOptions: {
+        data: '数据',
+        event: ' 事件',
+        holiday: '假期',
+      },
+      jin10SymbolsTypeOptions: {
+        GOODS: '商品行情',
+        FOREX: '外汇行情',
+        FUTURE: '国际行情',
+        CRYPTO: '加密货币行情',
+      },
+      jin10SymbolsDatatypeOptions: {
+        symbols: '品种列表',
+        quotes: '最新行情',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

@@ -9,6 +9,7 @@ import { ReactComponent as ExeSqlIcon } from '@/assets/svg/exesql.svg';
 import { ReactComponent as GithubIcon } from '@/assets/svg/github.svg';
 import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
 import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
+import { ReactComponent as Jin10Icon } from '@/assets/svg/jin10.svg';
 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';
@@ -65,6 +66,7 @@ export enum Operator {
   WenCai = 'WenCai',
   AkShare = 'AkShare',
   YahooFinance = 'YahooFinance',
+  Jin10 = 'Jin10',
 }
 
 export const operatorIconMap = {
@@ -94,6 +96,7 @@ export const operatorIconMap = {
   [Operator.WenCai]: WenCaiIcon,
   [Operator.AkShare]: AkShareIcon,
   [Operator.YahooFinance]: YahooFinanceIcon,
+  [Operator.Jin10]: Jin10Icon,
 };
 
 export const operatorMap: Record<
@@ -206,6 +209,7 @@ export const operatorMap: Record<
   [Operator.WenCai]: { backgroundColor: '#faac5b' },
   [Operator.AkShare]: { backgroundColor: '#8085f5' },
   [Operator.YahooFinance]: { backgroundColor: '#b474ff' },
+  [Operator.Jin10]: { backgroundColor: '#a0b9f8' },
 };
 
 export const componentMenuList = [
@@ -284,6 +288,9 @@ export const componentMenuList = [
   {
     name: Operator.YahooFinance,
   },
+  {
+    name: Operator.Jin10,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -436,6 +443,14 @@ export const initialYahooFinanceValues = {
   news: true,
 };
 
+export const initialJin10Values = {
+  type: 'flash',
+  secret_key: 'xxx',
+  flash_type: '1',
+  contain: '',
+  filter: '',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -509,6 +524,7 @@ export const RestrictedUpstreamMap = {
   [Operator.WenCai]: [Operator.Begin],
   [Operator.AkShare]: [Operator.Begin],
   [Operator.YahooFinance]: [Operator.Begin],
+  [Operator.Jin10]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -538,6 +554,7 @@ export const NodeMap = {
   [Operator.WenCai]: 'ragNode',
   [Operator.AkShare]: 'ragNode',
   [Operator.YahooFinance]: 'ragNode',
+  [Operator.Jin10]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2706,3 +2723,12 @@ export const WenCaiQueryTypeOptions = [
   'lccp',
   'foreign_exchange',
 ];
+
+export const Jin10TypeOptions = ['flash', 'calendar', 'symbols', 'news'];
+export const Jin10FlashTypeOptions = new Array(5)
+  .fill(1)
+  .map((x, idx) => (idx + 1).toString());
+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'];

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

@@ -32,6 +32,7 @@ import SwitchForm from '../switch-form';
 import WenCaiForm from '../wencai-form';
 import WikipediaForm from '../wikipedia-form';
 
+import Jin10Form from '../jin10-form';
 import YahooFinanceForm from '../yahoo-finance-form';
 import styles from './index.less';
 
@@ -66,6 +67,7 @@ const FormMap = {
   [Operator.WenCai]: WenCaiForm,
   [Operator.AkShare]: AkShareForm,
   [Operator.YahooFinance]: YahooFinanceForm,
+  [Operator.Jin10]: Jin10Form,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

@@ -45,6 +45,7 @@ import {
   initialGithubValues,
   initialGoogleScholarValues,
   initialGoogleValues,
+  initialJin10Values,
   initialKeywordExtractValues,
   initialMessageValues,
   initialPubMedValues,
@@ -119,6 +120,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.WenCai]: initialWenCaiValues,
       [Operator.AkShare]: initialAkShareValues,
       [Operator.YahooFinance]: initialYahooFinanceValues,
+      [Operator.Jin10]: initialJin10Values,
     };
   }, [llmId]);
 

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

@@ -0,0 +1,144 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import {
+  Jin10CalendarDatashapeOptions,
+  Jin10CalendarTypeOptions,
+  Jin10FlashTypeOptions,
+  Jin10SymbolsDatatypeOptions,
+  Jin10SymbolsTypeOptions,
+  Jin10TypeOptions,
+} from '../constant';
+import { IOperatorForm } from '../interface';
+
+const Jin10Form = ({ onValuesChange, form }: 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"
+      labelCol={{ span: 9 }}
+      wrapperCol={{ span: 15 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <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;