feat: Add component WenCai #1739 (#2388)

### What problem does this PR solve?

feat: Add component WenCai #1739

### Type of change

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

web/src/assets/svg/wencai.svg

@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    y="0px" width="20px" height="20px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <image id="image0" width="40" height="40" x="0" y="0" xlink:href="data:image/png;base64,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
+OjMxKzAwOjAwr2m8KQAAAABJRU5ErkJggg==" />
+</svg>

web/src/locales/en.ts

@@ -875,6 +875,23 @@ The above is the content you need to summarize.`,
       operator: 'Operator',
       value: 'Value',
       useTemplate: 'Use this template',
+      wenCai: 'WenCai',
+      queryType: 'Query type',
+      wenCaiDescription:
+        'The component can be used to obtain information on a wide range of financial areas, including but not limited to stocks, funds, etc...',
+      wenCaiQueryTypeOptions: {
+        stock: 'stock',
+        zhishu: 'index',
+        fund: 'fund',
+        hkstock: 'Hong Kong shares',
+        usstock: 'US stock market',
+        threeboard: 'New OTC Market',
+        conbond: 'Convertible Bond',
+        insurance: 'insurance',
+        futures: 'futures',
+        lccp: 'Financing',
+        foreign_exchange: 'Foreign currency',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -829,6 +829,23 @@ export default {
       operator: '操作符',
       value: '值',
       useTemplate: '使用該模板',
+      wenCai: '問財',
+      queryType: '查詢類型',
+      wenCaiDescription:
+        '該組件可用於獲取廣泛的金融領域的信息，包括但不限於股票、基金等...',
+      wenCaiQueryTypeOptions: {
+        stock: '股票',
+        zhishu: '指數',
+        fund: '基金',
+        hkstock: '港股',
+        usstock: '美股',
+        threeboard: '新三板',
+        conbond: '可轉債',
+        insurance: '保險',
+        futures: '期貨',
+        lccp: '理財',
+        foreign_exchange: '股票',
+      },
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -847,6 +847,23 @@ export default {
       operator: '操作符',
       value: '值',
       useTemplate: '使用该模板',
+      wenCai: '问财',
+      queryType: '查询类型',
+      wenCaiDescription:
+        '该组件可用于获取广泛金融领域的信息，包括但不限于股票、基金等...',
+      wenCaiQueryTypeOptions: {
+        stock: '股票',
+        zhishu: '指数',
+        fund: '基金',
+        hkstock: '港股',
+        usstock: '美股',
+        threeboard: '新三板',
+        conbond: '可转债',
+        insurance: '保险',
+        futures: '期货',
+        lccp: '理财',
+        foreign_exchange: '股票',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

@@ -12,6 +12,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 WenCaiIcon } from '@/assets/svg/wencai.svg';
 import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
 
 import { variableEnabledFieldMap } from '@/constants/chat';
@@ -59,6 +60,7 @@ export enum Operator {
   QWeather = 'QWeather',
   ExeSQL = 'ExeSQL',
   Switch = 'Switch',
+  WenCai = 'WenCai',
 }
 
 export const operatorIconMap = {
@@ -85,6 +87,7 @@ export const operatorIconMap = {
   [Operator.QWeather]: QWeatherIcon,
   [Operator.ExeSQL]: ExeSqlIcon,
   [Operator.Switch]: SwitchIcon,
+  [Operator.WenCai]: WenCaiIcon,
 };
 
 export const operatorMap: Record<
@@ -194,6 +197,7 @@ export const operatorMap: Record<
   [Operator.QWeather]: { backgroundColor: '#a4bbf3' },
   [Operator.ExeSQL]: { backgroundColor: '#b9efe8' },
   [Operator.Switch]: { backgroundColor: '#dbaff6' },
+  [Operator.WenCai]: { backgroundColor: '#faac5b' },
 };
 
 export const componentMenuList = [
@@ -263,6 +267,9 @@ export const componentMenuList = [
   {
     name: Operator.ExeSQL,
   },
+  {
+    name: Operator.WenCai,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -402,6 +409,8 @@ export const initialExeSqlValues = {
 
 export const initialSwitchValues = { conditions: [] };
 
+export const initialWenCaiValues = { top_n: 20, query_type: 'stock' };
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -472,6 +481,7 @@ export const RestrictedUpstreamMap = {
   [Operator.QWeather]: [Operator.Begin, Operator.Retrieval],
   [Operator.ExeSQL]: [Operator.Begin],
   [Operator.Switch]: [Operator.Begin],
+  [Operator.WenCai]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -498,6 +508,7 @@ export const NodeMap = {
   [Operator.QWeather]: 'ragNode',
   [Operator.ExeSQL]: 'ragNode',
   [Operator.Switch]: 'categorizeNode',
+  [Operator.WenCai]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2652,3 +2663,17 @@ export const SwitchOperatorOptions = [
 ];
 
 export const SwitchLogicOperatorOptions = ['and', 'or'];
+
+export const WenCaiQueryTypeOptions = [
+  'stock',
+  'zhishu',
+  'fund',
+  'hkstock',
+  'usstock',
+  'threeboard',
+  'conbond',
+  'insurance',
+  'futures',
+  'lccp',
+  'foreign_exchange',
+];

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

@@ -28,6 +28,7 @@ import RelevantForm from '../relevant-form';
 import RetrievalForm from '../retrieval-form';
 import RewriteQuestionForm from '../rewrite-question-form';
 import SwitchForm from '../switch-form';
+import WenCaiForm from '../wencai-form';
 import WikipediaForm from '../wikipedia-form';
 
 import styles from './index.less';
@@ -60,6 +61,7 @@ const FormMap = {
   [Operator.QWeather]: QWeatherForm,
   [Operator.ExeSQL]: ExeSQLForm,
   [Operator.Switch]: SwitchForm,
+  [Operator.WenCai]: WenCaiForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

@@ -52,6 +52,7 @@ import {
   initialRetrievalValues,
   initialRewriteQuestionValues,
   initialSwitchValues,
+  initialWenCaiValues,
   initialWikipediaValues,
 } from './constant';
 import { ICategorizeForm, IRelevantForm, ISwitchForm } from './interface';
@@ -113,6 +114,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.QWeather]: initialQWeatherValues,
       [Operator.ExeSQL]: initialExeSqlValues,
       [Operator.Switch]: initialSwitchValues,
+      [Operator.WenCai]: initialWenCaiValues,
     };
   }, [llmId]);
 

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

@@ -0,0 +1,35 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Select } from 'antd';
+import { useMemo } from 'react';
+import { WenCaiQueryTypeOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+const WenCaiForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const wenCaiQueryTypeOptions = useMemo(() => {
+    return WenCaiQueryTypeOptions.map((x) => ({
+      value: x,
+      label: t(`wenCaiQueryTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10} max={99}></TopNItem>
+      <Form.Item label={t('queryType')} name={'query_type'}>
+        <Select options={wenCaiQueryTypeOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default WenCaiForm;