diff --git a/web/src/assets/svg/qweather.svg b/web/src/assets/svg/qweather.svg new file mode 100644 index 00000000000..78c00d56e2a --- /dev/null +++ b/web/src/assets/svg/qweather.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 93d5002a807..0a80be56fc7 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -725,6 +725,64 @@ The above is the content you need to summarize.`, 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', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 2096a8dea55..e8ff4ba1677 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -683,6 +683,64 @@ export default { 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”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index dfdc378eab7..c3f54bf3dce 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -701,6 +701,64 @@ export default { 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', diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx index 53e0c1eef87..7bb30001014 100644 --- a/web/src/pages/flow/constant.tsx +++ b/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', +]; diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx index 766d23da2ce..2253a54f261 100644 --- a/web/src/pages/flow/flow-drawer/index.tsx +++ b/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 = () =>
empty
; diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts index 204cfc0004e..1eb0101a8c1 100644 --- a/web/src/pages/flow/hooks.ts +++ b/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]); diff --git a/web/src/pages/flow/qweather-form/index.tsx b/web/src/pages/flow/qweather-form/index.tsx new file mode 100644 index 00000000000..b86b0fc4398 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + + + + + {({ getFieldValue }) => + getFieldValue('type') === 'weather' && ( + + + + ) + } + +
+ ); +}; + +export default QWeatherForm;