feat: Add component QWeather #1739 (#1881)

### What problem does this PR solve?

feat: Add component QWeather #1739

### Type of change


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

web/src/pages/flow/constant.tsx

@@ -9,6 +9,7 @@ import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar
 import { ReactComponent as GoogleIcon } from '@/assets/svg/google.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';
 import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
 
 import { variableEnabledFieldMap } from '@/constants/chat';
@@ -52,6 +53,7 @@ export enum Operator {
   DeepL = 'DeepL',
   GitHub = 'GitHub',
   BaiduFanyi = 'BaiduFanyi',
+  QWeather = 'QWeather',
 }
 
 export const operatorIconMap = {
@@ -75,6 +77,7 @@ export const operatorIconMap = {
   [Operator.DeepL]: DeepLIcon,
   [Operator.GitHub]: GithubIcon,
   [Operator.BaiduFanyi]: baiduFanyiIcon,
+  [Operator.QWeather]: QWeatherIcon,
 };
 
 export const operatorMap = {
@@ -161,6 +164,7 @@ export const operatorMap = {
   [Operator.DeepL]: {},
   [Operator.GitHub]: {},
   [Operator.BaiduFanyi]: {},
+  [Operator.QWeather]: {},
 };
 
 export const componentMenuList = [
@@ -221,6 +225,9 @@ export const componentMenuList = [
   {
     name: Operator.BaiduFanyi,
   },
+  {
+    name: Operator.QWeather,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -340,6 +347,13 @@ export const initialBaiduFanyiValues = {
   trans_type: 'translate',
 };
 
+export const initialQWeatherValues = {
+  web_apikey: 'xxx',
+  type: 'weather',
+  user_type: 'free',
+  time_period: 'now',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -407,6 +421,7 @@ export const RestrictedUpstreamMap = {
   [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
   [Operator.GitHub]: [Operator.Begin, Operator.Retrieval],
   [Operator.BaiduFanyi]: [Operator.Begin, Operator.Retrieval],
+  [Operator.QWeather]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -430,6 +445,7 @@ export const NodeMap = {
   [Operator.DeepL]: 'ragNode',
   [Operator.GitHub]: 'ragNode',
   [Operator.BaiduFanyi]: 'ragNode',
+  [Operator.QWeather]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2513,3 +2529,50 @@ export const BaiduFanyiSourceLangOptions = [
   'cht',
   'vie',
 ];
+
+export const QWeatherLangOptions = [
+  'zh',
+  'zh-hant',
+  'en',
+  'de',
+  'es',
+  'fr',
+  'it',
+  'ja',
+  'ko',
+  'ru',
+  'hi',
+  'th',
+  'ar',
+  'pt',
+  'bn',
+  'ms',
+  'nl',
+  'el',
+  'la',
+  'sv',
+  'id',
+  'pl',
+  'tr',
+  'cs',
+  'et',
+  'vi',
+  'fil',
+  'fi',
+  'he',
+  'is',
+  'nb',
+];
+
+export const QWeatherTypeOptions = ['weather', 'indices', 'airquality'];
+
+export const QWeatherUserTypeOptions = ['free', 'paid'];
+
+export const QWeatherTimePeriodOptions = [
+  'now',
+  '3d',
+  '7d',
+  '10d',
+  '15d',
+  '30d',
+];

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

@@ -21,6 +21,7 @@ import KeywordExtractForm from '../keyword-extract-form';
 import MessageForm from '../message-form';
 import OperatorIcon from '../operator-icon';
 import PubMedForm from '../pubmed-form';
+import QWeatherForm from '../qweather-form';
 import RelevantForm from '../relevant-form';
 import RetrievalForm from '../retrieval-form';
 import RewriteQuestionForm from '../rewrite-question-form';
@@ -54,6 +55,7 @@ const FormMap = {
   [Operator.DeepL]: DeepLForm,
   [Operator.GitHub]: GithubForm,
   [Operator.BaiduFanyi]: BaiduFanyiForm,
+  [Operator.QWeather]: QWeatherForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

@@ -45,6 +45,7 @@ import {
   initialKeywordExtractValues,
   initialMessageValues,
   initialPubMedValues,
+  initialQWeatherValues,
   initialRelevantValues,
   initialRetrievalValues,
   initialRewriteQuestionValues,
@@ -105,6 +106,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.DeepL]: initialDeepLValues,
       [Operator.GitHub]: initialGithubValues,
       [Operator.BaiduFanyi]: initialBaiduFanyiValues,
+      [Operator.QWeather]: initialQWeatherValues,
     };
   }, [llmId]);
 

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

@@ -0,0 +1,76 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import {
+  QWeatherLangOptions,
+  QWeatherTimePeriodOptions,
+  QWeatherTypeOptions,
+  QWeatherUserTypeOptions,
+} from '../constant';
+import { IOperatorForm } from '../interface';
+
+const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const qWeatherLangOptions = useMemo(() => {
+    return QWeatherLangOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherTypeOptions = useMemo(() => {
+    return QWeatherTypeOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherUserTypeOptions = useMemo(() => {
+    return QWeatherUserTypeOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherUserTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherTimePeriodOptions = useMemo(() => {
+    return QWeatherTimePeriodOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherTimePeriodOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('webApiKey')} name={'web_apikey'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('lang')} name={'lang'}>
+        <Select options={qWeatherLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('type')} name={'type'}>
+        <Select options={qWeatherTypeOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('userType')} name={'user_type'}>
+        <Select options={qWeatherUserTypeOptions}></Select>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['type']}>
+        {({ getFieldValue }) =>
+          getFieldValue('type') === 'weather' && (
+            <Form.Item label={t('timePeriod')} name={'time_period'}>
+              <Select options={qWeatherTimePeriodOptions}></Select>
+            </Form.Item>
+          )
+        }
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default QWeatherForm;