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/assets/svg/qweather.svg

+<svg t="1723173310218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8139"
+    width="200" height="200">
+    <path
+        d="M953.6 736c-57.6 51.2-89.6 89.6-166.4 102.4 166.4-160 185.6-422.4 44.8-608-64-89.6-166.4-147.2-275.2-172.8-108.8-19.2-224 0-326.4 57.6-96 57.6-172.8 147.2-204.8 256-32 108.8-32 224 19.2 326.4 44.8 102.4 128 185.6 230.4 236.8 102.4 44.8 217.6 57.6 326.4 25.6 96 6.4 192-12.8 275.2-57.6 70.4-38.4 102.4-96 147.2-160l-70.4-6.4z m-537.6 172.8c-83.2-12.8-166.4-51.2-224-108.8-121.6-128-140.8-326.4-32-467.2 51.2-70.4 128-121.6 211.2-140.8 76.8-19.2 166.4-12.8 243.2 25.6 76.8 38.4 140.8 102.4 172.8 185.6 32 76.8 38.4 166.4 12.8 249.6-25.6 83.2-83.2 153.6-153.6 198.4-25.6 0-44.8-6.4-70.4-6.4-83.2-19.2-153.6-70.4-204.8-134.4-25.6-32-44.8-76.8-44.8-121.6 0-38.4 12.8-70.4 32-96 32-38.4 76.8-57.6 121.6-57.6 12.8 0 25.6 0 38.4 6.4 6.4 0 12.8 0 12.8 6.4 25.6 0 44.8 19.2 57.6 38.4 25.6 44.8 12.8 96-25.6 128-32 12.8-64 19.2-89.6 6.4h-12.8c0 6.4-6.4 6.4 0 12.8 19.2 32 51.2 51.2 89.6 51.2 25.6 0 51.2-6.4 76.8-19.2 57.6-32 96-89.6 96-153.6 0-38.4-12.8-70.4-32-102.4 0 0 0-6.4-6.4-6.4 0 0 0-6.4-6.4-6.4-51.2-64-128-102.4-217.6-102.4-83.2 0-153.6 32-211.2 89.6-83.2 83.2-102.4 211.2-44.8 320 51.2 89.6 128 160 217.6 204.8h-6.4z"
+        p-id="8140"></path>
+</svg>

web/src/locales/en.ts

         cht: 'Traditional Chinese',
         vie: 'Vietnamese',
       },
+      qWeather: 'QWeather',
+      qWeatherDescription:
+        'This component is used to get weather related information from https://www.qweather.com/. You can get weather, indices, air quality.',
+      lang: 'Language',
+      type: 'Type',
+      webApiKey: 'Web API key',
+      userType: 'User type',
+      timePeriod: 'Time period',
+      qWeatherLangOptions: {
+        zh: 'Simplified Chinese',
+        'zh-hant': 'Traditional Chinese',
+        en: 'English',
+        de: 'German',
+        es: 'Spanish',
+        fr: 'French',
+        it: 'Italian',
+        ja: 'Japanese',
+        ko: 'Korean',
+        ru: 'Russian',
+        hi: 'Hindi',
+        th: 'Thai',
+        ar: 'Arabic',
+        pt: 'Portuguese',
+        bn: 'Bengali',
+        ms: 'Malay',
+        nl: 'Dutch',
+        el: 'Greek',
+        la: 'Latin',
+        sv: 'Swedish',
+        id: 'Indonesian',
+        pl: 'Polish',
+        tr: 'Turkish',
+        cs: 'Czech',
+        et: 'Estonian',
+        vi: 'Vietnamese',
+        fil: 'Filipino',
+        fi: 'Finnish',
+        he: 'Hebrew',
+        is: 'Icelandic',
+        nb: 'Norwegian',
+      },
+      qWeatherTypeOptions: {
+        weather: 'Weather forecast',
+        indices: 'Weather life index',
+        airquality: 'Air quality',
+      },
+      qWeatherUserTypeOptions: {
+        free: 'Free subscriber',
+        paid: 'Paid subscriber',
+      },
+      qWeatherTimePeriodOptions: {
+        now: 'Now',
+        '3d': '3 days',
+        '7d': '7 days',
+        '10d': '10 days',
+        '15d': '12 days',
+        '30d': '30 days',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

         cht: '繁體中文',
         vie: '越南語',
       },
+      qWeather: '和風天氣',
+      qWeatherDescription:
+        '此元件用於從 https://www.qweather.com/ 取得天氣相關資訊。您可以獲得天氣、指數、空氣品質。',
+      lang: '語言',
+      type: '類型',
+      webApiKey: 'Web API 密鑰',
+      userType: '使用者類型',
+      timePeriod: '時間段',
+      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: '挪威語',
+      },
+      qWeatherTypeOptions: {
+        weather: '天氣預報',
+        indices: '天氣生活指數',
+        airquality: '空氣品質',
+      },
+      qWeatherUserTypeOptions: {
+        free: '免費訂閱用戶',
+        paid: '付費訂閱用戶',
+      },
+      qWeatherTimePeriodOptions: {
+        now: '現在',
+        '3d': '3天',
+        '7d': '7天',
+        '10d': '10天',
+        '15d': '12天',
+        '30d': '30天',
+      },
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

         cht: '繁体中文',
         vie: '越南语',
       },
+      qWeather: '和风天气',
+      qWeatherDescription:
+        '该组件用于从 https://www.qweather.com/ 获取天气相关信息。您可以获取天气、指数、空气质量。',
+      lang: '语言',
+      type: '类型',
+      webApiKey: 'Web API 密钥',
+      userType: '用户类型',
+      timePeriod: '时间段',
+      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: '挪威语',
+      },
+      qWeatherTypeOptions: {
+        weather: '天气预报',
+        indices: '天气生活指数',
+        airquality: '空气质量',
+      },
+      qWeatherUserTypeOptions: {
+        free: '免费订阅用户',
+        paid: '付费订阅用户',
+      },
+      qWeatherTimePeriodOptions: {
+        now: '现在',
+        '3d': '3天',
+        '7d': '7天',
+        '10d': '10天',
+        '15d': '12天',
+        '30d': '30天',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

 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';
   DeepL = 'DeepL',
   GitHub = 'GitHub',
   BaiduFanyi = 'BaiduFanyi',
+  QWeather = 'QWeather',
 }
 
 export const operatorIconMap = {
   [Operator.DeepL]: DeepLIcon,
   [Operator.GitHub]: GithubIcon,
   [Operator.BaiduFanyi]: baiduFanyiIcon,
+  [Operator.QWeather]: QWeatherIcon,
 };
 
 export const operatorMap = {
   [Operator.DeepL]: {},
   [Operator.GitHub]: {},
   [Operator.BaiduFanyi]: {},
+  [Operator.QWeather]: {},
 };
 
 export const componentMenuList = [
   {
     name: Operator.BaiduFanyi,
   },
+  {
+    name: Operator.QWeather,
+  },
 ];
 
 export const initialRetrievalValues = {
   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 },
   [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 = {
   [Operator.DeepL]: 'ragNode',
   [Operator.GitHub]: 'ragNode',
   [Operator.BaiduFanyi]: 'ragNode',
+  [Operator.QWeather]: 'ragNode',
 };
 
 export const LanguageOptions = [
   '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

 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';
   [Operator.DeepL]: DeepLForm,
   [Operator.GitHub]: GithubForm,
   [Operator.BaiduFanyi]: BaiduFanyiForm,
+  [Operator.QWeather]: QWeatherForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

   initialKeywordExtractValues,
   initialMessageValues,
   initialPubMedValues,
+  initialQWeatherValues,
   initialRelevantValues,
   initialRetrievalValues,
   initialRewriteQuestionValues,
       [Operator.DeepL]: initialDeepLValues,
       [Operator.GitHub]: initialGithubValues,
       [Operator.BaiduFanyi]: initialBaiduFanyiValues,
+      [Operator.QWeather]: initialQWeatherValues,
     };
   }, [llmId]);
 

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

+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;