feat: Add bing and google operator #918 (#1745)

### What problem does this PR solve?

feat: Add bing and google operator #918

### Type of change


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

web/src/locales/en.ts

@@ -639,6 +639,15 @@ The above is the content you need to summarize.`,
       submittedDate: 'Submitted date',
       lastUpdatedDate: 'Last updated date',
       relevance: 'Relevance',
+      google: 'Google',
+      googleTip:
+        'This component is used to get search result fromhttps://www.google.com/ . Typically, it performs as a supplement to knowledgebases. Top N and SerpApi API key specifies the number of search results you need to adapt.',
+      bing: 'Bing',
+      bingTip:
+        'This component is used to get search result from https://www.bing.com/. Typically, it performs as a supplement to knowledgebases. Top N and Bing Subscription-Key specifies the number of search results you need to adapt.',
+      apiKey: 'Api Key',
+      country: 'Country',
+      language: 'Language',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -599,6 +599,15 @@ export default {
       submittedDate: '提交日期',
       lastUpdatedDate: '最後更新日期',
       relevance: '關聯',
+      google: 'Google',
+      googleTip:
+        '此元件用於從https://www.google.com/取得搜尋結果。通常，它作為知識庫的補充。 Top N 和 SerpApi API 金鑰指定您需要調整的搜尋結果數量。',
+      bing: 'Bing',
+      bingTip:
+        '此元件用於從 https://www.bing.com/ 取得搜尋結果。通常，它充當知識庫的補充。 Top N 和 Bing Subscription-Key 指定您需要適配的搜尋結果數量。',
+      apiKey: 'Api Key',
+      country: '國家',
+      language: '語言',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -617,6 +617,15 @@ export default {
       submittedDate: '提交日期',
       lastUpdatedDate: '最后更新日期',
       relevance: '关联',
+      google: 'Google',
+      googleTip:
+        '此组件用于从https://www.google.com/获取搜索结果。通常，它作为知识库的补充。Top N 和 SerpApi API 密钥指定您需要调整的搜索结果数量。',
+      bing: 'Bing',
+      bingTip:
+        '此组件用于从 https://www.bing.com/ 获取搜索结果。通常，它作为知识库的补充。Top N 和 Bing Subscription-Key 指定您需要调整的搜索结果数量。',
+      apiKey: 'Api Key',
+      country: '国家',
+      language: '语言',
     },
     footer: {
       profile: 'All rights reserved @ React',

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

@@ -0,0 +1,41 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import { BingCountryOptions, BingLanguageOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+const BingForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
+  }, []);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10}></TopNItem>
+      <Form.Item label={t('channel')} name={'channel'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item label={t('apiKey')} name={'api_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('country')} name={'country'}>
+        <Select options={BingCountryOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('language')} name={'language'}>
+        <Select options={BingLanguageOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BingForm;

web/src/pages/flow/canvas/index.tsx

@@ -24,6 +24,7 @@ import ChatDrawer from '../chat/drawer';
 import styles from './index.less';
 import { BeginNode } from './node/begin-node';
 import { CategorizeNode } from './node/categorize-node';
+import { LogicNode } from './node/logic-node';
 import { RelevantNode } from './node/relevant-node';
 
 const nodeTypes = {
@@ -31,6 +32,7 @@ const nodeTypes = {
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
   relevantNode: RelevantNode,
+  logicNode: LogicNode,
 };
 
 const edgeTypes = {

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -65,7 +65,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   return (
     <NodePopover nodeId={id}>
       <section
-        className={classNames(styles.ragNode, {
+        className={classNames(styles.logicNode, {
           [styles.selectedNode]: selected,
         })}
         style={{

web/src/pages/flow/canvas/node/index.less

@@ -8,8 +8,8 @@
   padding: 5px;
   border-radius: 5px;
   background: white;
-  width: 100px;
-  height: 100px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   display: flex;
   // align-items: center;
@@ -48,6 +48,7 @@
     white-space: nowrap;
   }
 }
+
 .selectedNode {
   border: 1px solid rgb(59, 118, 244);
 }
@@ -64,3 +65,54 @@
   max-width: 300px;
   max-height: 500px;
 }
+
+.logicNode {
+  position: relative;
+  box-shadow:
+    -6px 0 12px 0 rgba(179, 177, 177, 0.08),
+    -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+    -6px 0 16px 6px rgba(0, 0, 0, 0.05);
+
+  padding: 5px;
+  border-radius: 5px;
+  background: white;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  display: flex;
+  // align-items: center;
+  // justify-self: center;
+  justify-content: center;
+  .nodeName {
+    font-size: 10px;
+    color: black;
+  }
+  label {
+    display: block;
+    color: #777;
+    font-size: 12px;
+  }
+  .type {
+    // font-size: 12px;
+  }
+  .description {
+    font-size: 10px;
+  }
+  .bottomBox {
+    position: absolute;
+    bottom: -34px;
+    background: white;
+    padding: 2px 5px;
+    border-radius: 5px;
+    box-shadow:
+      -6px 0 12px 0 rgba(179, 177, 177, 0.08),
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      -6px 0 16px 6px rgba(0, 0, 0, 0.05);
+  }
+  .categorizeAnchorPointText {
+    position: absolute;
+    top: -4px;
+    left: 8px;
+    white-space: nowrap;
+  }
+}

web/src/pages/flow/canvas/node/index.tsx

@@ -1,7 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import lowerFirst from 'lodash/lowerFirst';
 import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
@@ -32,7 +31,9 @@ export function RagNode({
         className={classNames(styles.ragNode, {
           [styles.selectedNode]: selected,
         })}
-        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+        style={{
+          ...pick(style, ['backgroundColor', 'color']),
+        }}
       >
         <Handle
           id="c"
@@ -54,24 +55,19 @@ export function RagNode({
           vertical
           align="center"
           justify={'space-around'}
-          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
+          // gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
         >
           <Flex flex={1} justify="center" align="center">
+            <label htmlFor=""> </label>
+          </Flex>
+
+          <Flex flex={1}>
             <OperatorIcon
               name={data.label as Operator}
-              fontSize={style?.iconFontSize ?? 24}
+              fontSize={style?.iconFontSize ?? 16}
               width={style?.iconWidth}
             ></OperatorIcon>
           </Flex>
-
-          <Flex flex={1}>
-            <span
-              className={styles.type}
-              style={{ fontSize: style?.fontSize ?? 14 }}
-            >
-              {t(lowerFirst(data.label))}
-            </span>
-          </Flex>
           <Flex flex={1}>
             <NodeDropdown
               id={id}

web/src/pages/flow/canvas/node/logic-node.tsx

@@ -0,0 +1,89 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import lowerFirst from 'lodash/lowerFirst';
+import pick from 'lodash/pick';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { Operator, operatorMap } from '../../constant';
+import { NodeData } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import NodeDropdown from './dropdown';
+import styles from './index.less';
+import NodePopover from './popover';
+
+const ZeroGapOperators = [
+  Operator.RewriteQuestion,
+  Operator.KeywordExtract,
+  Operator.ArXiv,
+];
+
+export function LogicNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<NodeData>) {
+  const style = operatorMap[data.label as Operator];
+  const { t } = useTranslate('flow');
+
+  return (
+    <NodePopover nodeId={id}>
+      <section
+        className={classNames(styles.logicNode, {
+          [styles.selectedNode]: selected,
+        })}
+        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+      >
+        <Handle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+        ></Handle>
+        <Handle type="source" position={Position.Top} id="d" isConnectable />
+        <Handle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          id="b"
+        ></Handle>
+        <Handle type="source" position={Position.Bottom} id="a" isConnectable />
+        <Flex
+          vertical
+          align="center"
+          justify={'space-around'}
+          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
+        >
+          <Flex flex={1} justify="center" align="center">
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style?.iconFontSize ?? 24}
+              width={style?.iconWidth}
+            ></OperatorIcon>
+          </Flex>
+
+          <Flex flex={1}>
+            <span
+              className={styles.type}
+              style={{ fontSize: style?.fontSize ?? 14 }}
+            >
+              {t(lowerFirst(data.label))}
+            </span>
+          </Flex>
+          <Flex flex={1}>
+            <NodeDropdown
+              id={id}
+              iconFontColor={style?.moreIconColor}
+            ></NodeDropdown>
+          </Flex>
+        </Flex>
+
+        <section className={styles.bottomBox}>
+          <div className={styles.nodeName}>{data.name}</div>
+        </section>
+      </section>
+    </NodePopover>
+  );
+}

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -19,7 +19,7 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
   return (
     <NodePopover nodeId={id}>
       <section
-        className={classNames(styles.ragNode, {
+        className={classNames(styles.logicNode, {
           [styles.selectedNode]: selected,
         })}
         style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}

web/src/pages/flow/constant.tsx

@@ -1,6 +1,8 @@
-import { ReactComponent as ArxivIcon } from '@/assets/svg/arxiv.svg';
+import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.svg';
 import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
+import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
 import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
+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 WikipediaIcon } from '@/assets/svg/wikipedia.svg';
@@ -40,6 +42,8 @@ export enum Operator {
   Wikipedia = 'Wikipedia',
   PubMed = 'PubMed',
   ArXiv = 'ArXiv',
+  Google = 'Google',
+  Bing = 'Bing',
 }
 
 export const operatorIconMap = {
@@ -56,7 +60,9 @@ export const operatorIconMap = {
   [Operator.Baidu]: BaiduIcon,
   [Operator.Wikipedia]: WikipediaIcon,
   [Operator.PubMed]: PubMedIcon,
-  [Operator.ArXiv]: ArxivIcon,
+  [Operator.ArXiv]: ArXivIcon,
+  [Operator.Google]: GoogleIcon,
+  [Operator.Bing]: BingIcon,
 };
 
 export const operatorMap = {
@@ -116,7 +122,9 @@ export const operatorMap = {
     backgroundColor: '#e7e389',
     color: '#aea00c',
   },
-  [Operator.Baidu]: {},
+  [Operator.Baidu]: {
+    backgroundColor: '#d9e0f8',
+  },
   [Operator.Wikipedia]: {
     backgroundColor: '#dee0e2',
   },
@@ -133,6 +141,10 @@ export const operatorMap = {
     backgroundColor: '#b31b1b',
     color: 'white',
   },
+  [Operator.Google]: {
+    backgroundColor: 'pink',
+  },
+  [Operator.Bing]: {},
 };
 
 export const componentMenuList = [
@@ -175,6 +187,12 @@ export const componentMenuList = [
   {
     name: Operator.ArXiv,
   },
+  {
+    name: Operator.Google,
+  },
+  {
+    name: Operator.Bing,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -252,11 +270,27 @@ export const initialPubMedValues = {
   email: '',
 };
 
-export const initialArxivValues = {
+export const initialArXivValues = {
   top_n: 10,
   sort_by: 'relevance',
 };
 
+export const initialGoogleValues = {
+  top_n: 10,
+  api_key: 'Xxx(get from https://serpapi.com/manage-api-key)',
+  country: 'cn',
+  language: 'en',
+};
+
+export const initialBingValues = {
+  top_n: 10,
+  channel: 'Webpages',
+  api_key:
+    '"YOUR_ACCESS_KEY"(get from https://www.microsoft.com/en-us/bing/apis/bing-web-search-api)',
+  country: 'CH',
+  language: 'en',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -318,23 +352,27 @@ export const RestrictedUpstreamMap = {
   [Operator.Wikipedia]: [Operator.Begin, Operator.Retrieval],
   [Operator.PubMed]: [Operator.Begin, Operator.Retrieval],
   [Operator.ArXiv]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Google]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Bing]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
   [Operator.Begin]: 'beginNode',
   [Operator.Categorize]: 'categorizeNode',
-  [Operator.Retrieval]: 'ragNode',
-  [Operator.Generate]: 'ragNode',
-  [Operator.Answer]: 'ragNode',
-  [Operator.Message]: 'ragNode',
+  [Operator.Retrieval]: 'logicNode',
+  [Operator.Generate]: 'logicNode',
+  [Operator.Answer]: 'logicNode',
+  [Operator.Message]: 'logicNode',
   [Operator.Relevant]: 'relevantNode',
-  [Operator.RewriteQuestion]: 'ragNode',
-  [Operator.KeywordExtract]: 'ragNode',
+  [Operator.RewriteQuestion]: 'logicNode',
+  [Operator.KeywordExtract]: 'logicNode',
   [Operator.DuckDuckGo]: 'ragNode',
   [Operator.Baidu]: 'ragNode',
   [Operator.Wikipedia]: 'ragNode',
   [Operator.PubMed]: 'ragNode',
   [Operator.ArXiv]: 'ragNode',
+  [Operator.Google]: 'ragNode',
+  [Operator.Bing]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -619,3 +657,1684 @@ export const LanguageOptions = [
     label: '粵語',
   },
 ];
+
+export const GoogleLanguageOptions = [
+  {
+    language_code: 'af',
+    language_name: 'Afrikaans',
+  },
+  {
+    language_code: 'ak',
+    language_name: 'Akan',
+  },
+  {
+    language_code: 'sq',
+    language_name: 'Albanian',
+  },
+  {
+    language_code: 'ws',
+    language_name: 'Samoa',
+  },
+  {
+    language_code: 'am',
+    language_name: 'Amharic',
+  },
+  {
+    language_code: 'ar',
+    language_name: 'Arabic',
+  },
+  {
+    language_code: 'hy',
+    language_name: 'Armenian',
+  },
+  {
+    language_code: 'az',
+    language_name: 'Azerbaijani',
+  },
+  {
+    language_code: 'eu',
+    language_name: 'Basque',
+  },
+  {
+    language_code: 'be',
+    language_name: 'Belarusian',
+  },
+  {
+    language_code: 'bem',
+    language_name: 'Bemba',
+  },
+  {
+    language_code: 'bn',
+    language_name: 'Bengali',
+  },
+  {
+    language_code: 'bh',
+    language_name: 'Bihari',
+  },
+  {
+    language_code: 'xx-bork',
+    language_name: 'Bork, bork, bork!',
+  },
+  {
+    language_code: 'bs',
+    language_name: 'Bosnian',
+  },
+  {
+    language_code: 'br',
+    language_name: 'Breton',
+  },
+  {
+    language_code: 'bg',
+    language_name: 'Bulgarian',
+  },
+  {
+    language_code: 'bt',
+    language_name: 'Bhutanese',
+  },
+  {
+    language_code: 'km',
+    language_name: 'Cambodian',
+  },
+  {
+    language_code: 'ca',
+    language_name: 'Catalan',
+  },
+  {
+    language_code: 'chr',
+    language_name: 'Cherokee',
+  },
+  {
+    language_code: 'ny',
+    language_name: 'Chichewa',
+  },
+  {
+    language_code: 'zh-cn',
+    language_name: 'Chinese (Simplified)',
+  },
+  {
+    language_code: 'zh-tw',
+    language_name: 'Chinese (Traditional)',
+  },
+  {
+    language_code: 'co',
+    language_name: 'Corsican',
+  },
+  {
+    language_code: 'hr',
+    language_name: 'Croatian',
+  },
+  {
+    language_code: 'cs',
+    language_name: 'Czech',
+  },
+  {
+    language_code: 'da',
+    language_name: 'Danish',
+  },
+  {
+    language_code: 'nl',
+    language_name: 'Dutch',
+  },
+  {
+    language_code: 'xx-elmer',
+    language_name: 'Elmer Fudd',
+  },
+  {
+    language_code: 'en',
+    language_name: 'English',
+  },
+  {
+    language_code: 'eo',
+    language_name: 'Esperanto',
+  },
+  {
+    language_code: 'et',
+    language_name: 'Estonian',
+  },
+  {
+    language_code: 'ee',
+    language_name: 'Ewe',
+  },
+  {
+    language_code: 'fo',
+    language_name: 'Faroese',
+  },
+  {
+    language_code: 'tl',
+    language_name: 'Filipino',
+  },
+  {
+    language_code: 'fi',
+    language_name: 'Finnish',
+  },
+  {
+    language_code: 'fr',
+    language_name: 'French',
+  },
+  {
+    language_code: 'fy',
+    language_name: 'Frisian',
+  },
+  {
+    language_code: 'gaa',
+    language_name: 'Ga',
+  },
+  {
+    language_code: 'gl',
+    language_name: 'Galician',
+  },
+  {
+    language_code: 'ka',
+    language_name: 'Georgian',
+  },
+  {
+    language_code: 'de',
+    language_name: 'German',
+  },
+  {
+    language_code: 'el',
+    language_name: 'Greek',
+  },
+  {
+    language_code: 'kl',
+    language_name: 'Greenlandic',
+  },
+  {
+    language_code: 'gn',
+    language_name: 'Guarani',
+  },
+  {
+    language_code: 'gu',
+    language_name: 'Gujarati',
+  },
+  {
+    language_code: 'xx-hacker',
+    language_name: 'Hacker',
+  },
+  {
+    language_code: 'ht',
+    language_name: 'Haitian Creole',
+  },
+  {
+    language_code: 'ha',
+    language_name: 'Hausa',
+  },
+  {
+    language_code: 'haw',
+    language_name: 'Hawaiian',
+  },
+  {
+    language_code: 'iw',
+    language_name: 'Hebrew',
+  },
+  {
+    language_code: 'hi',
+    language_name: 'Hindi',
+  },
+  {
+    language_code: 'hu',
+    language_name: 'Hungarian',
+  },
+  {
+    language_code: 'is',
+    language_name: 'Icelandic',
+  },
+  {
+    language_code: 'ig',
+    language_name: 'Igbo',
+  },
+  {
+    language_code: 'id',
+    language_name: 'Indonesian',
+  },
+  {
+    language_code: 'ia',
+    language_name: 'Interlingua',
+  },
+  {
+    language_code: 'ga',
+    language_name: 'Irish',
+  },
+  {
+    language_code: 'it',
+    language_name: 'Italian',
+  },
+  {
+    language_code: 'ja',
+    language_name: 'Japanese',
+  },
+  {
+    language_code: 'jw',
+    language_name: 'Javanese',
+  },
+  {
+    language_code: 'kn',
+    language_name: 'Kannada',
+  },
+  {
+    language_code: 'kk',
+    language_name: 'Kazakh',
+  },
+  {
+    language_code: 'rw',
+    language_name: 'Kinyarwanda',
+  },
+  {
+    language_code: 'rn',
+    language_name: 'Kirundi',
+  },
+  {
+    language_code: 'xx-klingon',
+    language_name: 'Klingon',
+  },
+  {
+    language_code: 'kg',
+    language_name: 'Kongo',
+  },
+  {
+    language_code: 'ko',
+    language_name: 'Korean',
+  },
+  {
+    language_code: 'kri',
+    language_name: 'Krio (Sierra Leone)',
+  },
+  {
+    language_code: 'ku',
+    language_name: 'Kurdish',
+  },
+  {
+    language_code: 'ckb',
+    language_name: 'Kurdish (Soranî)',
+  },
+  {
+    language_code: 'ky',
+    language_name: 'Kyrgyz',
+  },
+  {
+    language_code: 'lo',
+    language_name: 'Laothian',
+  },
+  {
+    language_code: 'la',
+    language_name: 'Latin',
+  },
+  {
+    language_code: 'lv',
+    language_name: 'Latvian',
+  },
+  {
+    language_code: 'ln',
+    language_name: 'Lingala',
+  },
+  {
+    language_code: 'lt',
+    language_name: 'Lithuanian',
+  },
+  {
+    language_code: 'loz',
+    language_name: 'Lozi',
+  },
+  {
+    language_code: 'lg',
+    language_name: 'Luganda',
+  },
+  {
+    language_code: 'ach',
+    language_name: 'Luo',
+  },
+  {
+    language_code: 'mk',
+    language_name: 'Macedonian',
+  },
+  {
+    language_code: 'mg',
+    language_name: 'Malagasy',
+  },
+  {
+    language_code: 'ms',
+    language_name: 'Malay',
+  },
+  {
+    language_code: 'ml',
+    language_name: 'Malayalam',
+  },
+  {
+    language_code: 'mt',
+    language_name: 'Maltese',
+  },
+  {
+    language_code: 'mv',
+    language_name: 'Maldives',
+  },
+  {
+    language_code: 'mi',
+    language_name: 'Maori',
+  },
+  {
+    language_code: 'mr',
+    language_name: 'Marathi',
+  },
+  {
+    language_code: 'mfe',
+    language_name: 'Mauritian Creole',
+  },
+  {
+    language_code: 'mo',
+    language_name: 'Moldavian',
+  },
+  {
+    language_code: 'mn',
+    language_name: 'Mongolian',
+  },
+  {
+    language_code: 'sr-me',
+    language_name: 'Montenegrin',
+  },
+  {
+    language_code: 'my',
+    language_name: 'Myanmar',
+  },
+  {
+    language_code: 'ne',
+    language_name: 'Nepali',
+  },
+  {
+    language_code: 'pcm',
+    language_name: 'Nigerian Pidgin',
+  },
+  {
+    language_code: 'nso',
+    language_name: 'Northern Sotho',
+  },
+  {
+    language_code: 'no',
+    language_name: 'Norwegian',
+  },
+  {
+    language_code: 'nn',
+    language_name: 'Norwegian (Nynorsk)',
+  },
+  {
+    language_code: 'oc',
+    language_name: 'Occitan',
+  },
+  {
+    language_code: 'or',
+    language_name: 'Oriya',
+  },
+  {
+    language_code: 'om',
+    language_name: 'Oromo',
+  },
+  {
+    language_code: 'ps',
+    language_name: 'Pashto',
+  },
+  {
+    language_code: 'fa',
+    language_name: 'Persian',
+  },
+  {
+    language_code: 'xx-pirate',
+    language_name: 'Pirate',
+  },
+  {
+    language_code: 'pl',
+    language_name: 'Polish',
+  },
+  {
+    language_code: 'pt',
+    language_name: 'Portuguese',
+  },
+  {
+    language_code: 'pt-br',
+    language_name: 'Portuguese (Brazil)',
+  },
+  {
+    language_code: 'pt-pt',
+    language_name: 'Portuguese (Portugal)',
+  },
+  {
+    language_code: 'pa',
+    language_name: 'Punjabi',
+  },
+  {
+    language_code: 'qu',
+    language_name: 'Quechua',
+  },
+  {
+    language_code: 'ro',
+    language_name: 'Romanian',
+  },
+  {
+    language_code: 'rm',
+    language_name: 'Romansh',
+  },
+  {
+    language_code: 'nyn',
+    language_name: 'Runyakitara',
+  },
+  {
+    language_code: 'ru',
+    language_name: 'Russian',
+  },
+  {
+    language_code: 'gd',
+    language_name: 'Scots Gaelic',
+  },
+  {
+    language_code: 'sr',
+    language_name: 'Serbian',
+  },
+  {
+    language_code: 'sh',
+    language_name: 'Serbo-Croatian',
+  },
+  {
+    language_code: 'st',
+    language_name: 'Sesotho',
+  },
+  {
+    language_code: 'tn',
+    language_name: 'Setswana',
+  },
+  {
+    language_code: 'crs',
+    language_name: 'Seychellois Creole',
+  },
+  {
+    language_code: 'sn',
+    language_name: 'Shona',
+  },
+  {
+    language_code: 'sd',
+    language_name: 'Sindhi',
+  },
+  {
+    language_code: 'si',
+    language_name: 'Sinhalese',
+  },
+  {
+    language_code: 'sk',
+    language_name: 'Slovak',
+  },
+  {
+    language_code: 'sl',
+    language_name: 'Slovenian',
+  },
+  {
+    language_code: 'so',
+    language_name: 'Somali',
+  },
+  {
+    language_code: 'es',
+    language_name: 'Spanish',
+  },
+  {
+    language_code: 'es-419',
+    language_name: 'Spanish (Latin American)',
+  },
+  {
+    language_code: 'su',
+    language_name: 'Sundanese',
+  },
+  {
+    language_code: 'sw',
+    language_name: 'Swahili',
+  },
+  {
+    language_code: 'sv',
+    language_name: 'Swedish',
+  },
+  {
+    language_code: 'tg',
+    language_name: 'Tajik',
+  },
+  {
+    language_code: 'ta',
+    language_name: 'Tamil',
+  },
+  {
+    language_code: 'tt',
+    language_name: 'Tatar',
+  },
+  {
+    language_code: 'te',
+    language_name: 'Telugu',
+  },
+  {
+    language_code: 'th',
+    language_name: 'Thai',
+  },
+  {
+    language_code: 'ti',
+    language_name: 'Tigrinya',
+  },
+  {
+    language_code: 'to',
+    language_name: 'Tonga',
+  },
+  {
+    language_code: 'lua',
+    language_name: 'Tshiluba',
+  },
+  {
+    language_code: 'tum',
+    language_name: 'Tumbuka',
+  },
+  {
+    language_code: 'tr',
+    language_name: 'Turkish',
+  },
+  {
+    language_code: 'tk',
+    language_name: 'Turkmen',
+  },
+  {
+    language_code: 'tw',
+    language_name: 'Twi',
+  },
+  {
+    language_code: 'ug',
+    language_name: 'Uighur',
+  },
+  {
+    language_code: 'uk',
+    language_name: 'Ukrainian',
+  },
+  {
+    language_code: 'ur',
+    language_name: 'Urdu',
+  },
+  {
+    language_code: 'uz',
+    language_name: 'Uzbek',
+  },
+  {
+    language_code: 'vu',
+    language_name: 'Vanuatu',
+  },
+  {
+    language_code: 'vi',
+    language_name: 'Vietnamese',
+  },
+  {
+    language_code: 'cy',
+    language_name: 'Welsh',
+  },
+  {
+    language_code: 'wo',
+    language_name: 'Wolof',
+  },
+  {
+    language_code: 'xh',
+    language_name: 'Xhosa',
+  },
+  {
+    language_code: 'yi',
+    language_name: 'Yiddish',
+  },
+  {
+    language_code: 'yo',
+    language_name: 'Yoruba',
+  },
+  {
+    language_code: 'zu',
+    language_name: 'Zulu',
+  },
+].map((x) => ({ label: x.language_name, value: x.language_code }));
+export const GoogleCountryOptions = [
+  {
+    country_code: 'af',
+    country_name: 'Afghanistan',
+  },
+  {
+    country_code: 'al',
+    country_name: 'Albania',
+  },
+  {
+    country_code: 'dz',
+    country_name: 'Algeria',
+  },
+  {
+    country_code: 'as',
+    country_name: 'American Samoa',
+  },
+  {
+    country_code: 'ad',
+    country_name: 'Andorra',
+  },
+  {
+    country_code: 'ao',
+    country_name: 'Angola',
+  },
+  {
+    country_code: 'ai',
+    country_name: 'Anguilla',
+  },
+  {
+    country_code: 'aq',
+    country_name: 'Antarctica',
+  },
+  {
+    country_code: 'ag',
+    country_name: 'Antigua and Barbuda',
+  },
+  {
+    country_code: 'ar',
+    country_name: 'Argentina',
+  },
+  {
+    country_code: 'am',
+    country_name: 'Armenia',
+  },
+  {
+    country_code: 'aw',
+    country_name: 'Aruba',
+  },
+  {
+    country_code: 'au',
+    country_name: 'Australia',
+  },
+  {
+    country_code: 'at',
+    country_name: 'Austria',
+  },
+  {
+    country_code: 'az',
+    country_name: 'Azerbaijan',
+  },
+  {
+    country_code: 'bs',
+    country_name: 'Bahamas',
+  },
+  {
+    country_code: 'bh',
+    country_name: 'Bahrain',
+  },
+  {
+    country_code: 'bd',
+    country_name: 'Bangladesh',
+  },
+  {
+    country_code: 'bb',
+    country_name: 'Barbados',
+  },
+  {
+    country_code: 'by',
+    country_name: 'Belarus',
+  },
+  {
+    country_code: 'be',
+    country_name: 'Belgium',
+  },
+  {
+    country_code: 'bz',
+    country_name: 'Belize',
+  },
+  {
+    country_code: 'bj',
+    country_name: 'Benin',
+  },
+  {
+    country_code: 'bm',
+    country_name: 'Bermuda',
+  },
+  {
+    country_code: 'bt',
+    country_name: 'Bhutan',
+  },
+  {
+    country_code: 'bo',
+    country_name: 'Bolivia',
+  },
+  {
+    country_code: 'ba',
+    country_name: 'Bosnia and Herzegovina',
+  },
+  {
+    country_code: 'bw',
+    country_name: 'Botswana',
+  },
+  {
+    country_code: 'bv',
+    country_name: 'Bouvet Island',
+  },
+  {
+    country_code: 'br',
+    country_name: 'Brazil',
+  },
+  {
+    country_code: 'io',
+    country_name: 'British Indian Ocean Territory',
+  },
+  {
+    country_code: 'bn',
+    country_name: 'Brunei Darussalam',
+  },
+  {
+    country_code: 'bg',
+    country_name: 'Bulgaria',
+  },
+  {
+    country_code: 'bf',
+    country_name: 'Burkina Faso',
+  },
+  {
+    country_code: 'bi',
+    country_name: 'Burundi',
+  },
+  {
+    country_code: 'kh',
+    country_name: 'Cambodia',
+  },
+  {
+    country_code: 'cm',
+    country_name: 'Cameroon',
+  },
+  {
+    country_code: 'ca',
+    country_name: 'Canada',
+  },
+  {
+    country_code: 'cv',
+    country_name: 'Cape Verde',
+  },
+  {
+    country_code: 'ky',
+    country_name: 'Cayman Islands',
+  },
+  {
+    country_code: 'cf',
+    country_name: 'Central African Republic',
+  },
+  {
+    country_code: 'td',
+    country_name: 'Chad',
+  },
+  {
+    country_code: 'cl',
+    country_name: 'Chile',
+  },
+  {
+    country_code: 'cn',
+    country_name: 'China',
+  },
+  {
+    country_code: 'cx',
+    country_name: 'Christmas Island',
+  },
+  {
+    country_code: 'cc',
+    country_name: 'Cocos (Keeling) Islands',
+  },
+  {
+    country_code: 'co',
+    country_name: 'Colombia',
+  },
+  {
+    country_code: 'km',
+    country_name: 'Comoros',
+  },
+  {
+    country_code: 'cg',
+    country_name: 'Congo',
+  },
+  {
+    country_code: 'cd',
+    country_name: 'Congo, the Democratic Republic of the',
+  },
+  {
+    country_code: 'ck',
+    country_name: 'Cook Islands',
+  },
+  {
+    country_code: 'cr',
+    country_name: 'Costa Rica',
+  },
+  {
+    country_code: 'ci',
+    country_name: "Cote D'ivoire",
+  },
+  {
+    country_code: 'hr',
+    country_name: 'Croatia',
+  },
+  {
+    country_code: 'cu',
+    country_name: 'Cuba',
+  },
+  {
+    country_code: 'cy',
+    country_name: 'Cyprus',
+  },
+  {
+    country_code: 'cz',
+    country_name: 'Czech Republic',
+  },
+  {
+    country_code: 'dk',
+    country_name: 'Denmark',
+  },
+  {
+    country_code: 'dj',
+    country_name: 'Djibouti',
+  },
+  {
+    country_code: 'dm',
+    country_name: 'Dominica',
+  },
+  {
+    country_code: 'do',
+    country_name: 'Dominican Republic',
+  },
+  {
+    country_code: 'ec',
+    country_name: 'Ecuador',
+  },
+  {
+    country_code: 'eg',
+    country_name: 'Egypt',
+  },
+  {
+    country_code: 'sv',
+    country_name: 'El Salvador',
+  },
+  {
+    country_code: 'gq',
+    country_name: 'Equatorial Guinea',
+  },
+  {
+    country_code: 'er',
+    country_name: 'Eritrea',
+  },
+  {
+    country_code: 'ee',
+    country_name: 'Estonia',
+  },
+  {
+    country_code: 'et',
+    country_name: 'Ethiopia',
+  },
+  {
+    country_code: 'fk',
+    country_name: 'Falkland Islands (Malvinas)',
+  },
+  {
+    country_code: 'fo',
+    country_name: 'Faroe Islands',
+  },
+  {
+    country_code: 'fj',
+    country_name: 'Fiji',
+  },
+  {
+    country_code: 'fi',
+    country_name: 'Finland',
+  },
+  {
+    country_code: 'fr',
+    country_name: 'France',
+  },
+  {
+    country_code: 'gf',
+    country_name: 'French Guiana',
+  },
+  {
+    country_code: 'pf',
+    country_name: 'French Polynesia',
+  },
+  {
+    country_code: 'tf',
+    country_name: 'French Southern Territories',
+  },
+  {
+    country_code: 'ga',
+    country_name: 'Gabon',
+  },
+  {
+    country_code: 'gm',
+    country_name: 'Gambia',
+  },
+  {
+    country_code: 'ge',
+    country_name: 'Georgia',
+  },
+  {
+    country_code: 'de',
+    country_name: 'Germany',
+  },
+  {
+    country_code: 'gh',
+    country_name: 'Ghana',
+  },
+  {
+    country_code: 'gi',
+    country_name: 'Gibraltar',
+  },
+  {
+    country_code: 'gr',
+    country_name: 'Greece',
+  },
+  {
+    country_code: 'gl',
+    country_name: 'Greenland',
+  },
+  {
+    country_code: 'gd',
+    country_name: 'Grenada',
+  },
+  {
+    country_code: 'gp',
+    country_name: 'Guadeloupe',
+  },
+  {
+    country_code: 'gu',
+    country_name: 'Guam',
+  },
+  {
+    country_code: 'gt',
+    country_name: 'Guatemala',
+  },
+  {
+    country_code: 'gn',
+    country_name: 'Guinea',
+  },
+  {
+    country_code: 'gw',
+    country_name: 'Guinea-Bissau',
+  },
+  {
+    country_code: 'gy',
+    country_name: 'Guyana',
+  },
+  {
+    country_code: 'ht',
+    country_name: 'Haiti',
+  },
+  {
+    country_code: 'hm',
+    country_name: 'Heard Island and Mcdonald Islands',
+  },
+  {
+    country_code: 'va',
+    country_name: 'Holy See (Vatican City State)',
+  },
+  {
+    country_code: 'hn',
+    country_name: 'Honduras',
+  },
+  {
+    country_code: 'hk',
+    country_name: 'Hong Kong',
+  },
+  {
+    country_code: 'hu',
+    country_name: 'Hungary',
+  },
+  {
+    country_code: 'is',
+    country_name: 'Iceland',
+  },
+  {
+    country_code: 'in',
+    country_name: 'India',
+  },
+  {
+    country_code: 'id',
+    country_name: 'Indonesia',
+  },
+  {
+    country_code: 'ir',
+    country_name: 'Iran, Islamic Republic of',
+  },
+  {
+    country_code: 'iq',
+    country_name: 'Iraq',
+  },
+  {
+    country_code: 'ie',
+    country_name: 'Ireland',
+  },
+  {
+    country_code: 'il',
+    country_name: 'Israel',
+  },
+  {
+    country_code: 'it',
+    country_name: 'Italy',
+  },
+  {
+    country_code: 'jm',
+    country_name: 'Jamaica',
+  },
+  {
+    country_code: 'jp',
+    country_name: 'Japan',
+  },
+  {
+    country_code: 'jo',
+    country_name: 'Jordan',
+  },
+  {
+    country_code: 'kz',
+    country_name: 'Kazakhstan',
+  },
+  {
+    country_code: 'ke',
+    country_name: 'Kenya',
+  },
+  {
+    country_code: 'ki',
+    country_name: 'Kiribati',
+  },
+  {
+    country_code: 'kp',
+    country_name: "Korea, Democratic People's Republic of",
+  },
+  {
+    country_code: 'kr',
+    country_name: 'Korea, Republic of',
+  },
+  {
+    country_code: 'kw',
+    country_name: 'Kuwait',
+  },
+  {
+    country_code: 'kg',
+    country_name: 'Kyrgyzstan',
+  },
+  {
+    country_code: 'la',
+    country_name: "Lao People's Democratic Republic",
+  },
+  {
+    country_code: 'lv',
+    country_name: 'Latvia',
+  },
+  {
+    country_code: 'lb',
+    country_name: 'Lebanon',
+  },
+  {
+    country_code: 'ls',
+    country_name: 'Lesotho',
+  },
+  {
+    country_code: 'lr',
+    country_name: 'Liberia',
+  },
+  {
+    country_code: 'ly',
+    country_name: 'Libyan Arab Jamahiriya',
+  },
+  {
+    country_code: 'li',
+    country_name: 'Liechtenstein',
+  },
+  {
+    country_code: 'lt',
+    country_name: 'Lithuania',
+  },
+  {
+    country_code: 'lu',
+    country_name: 'Luxembourg',
+  },
+  {
+    country_code: 'mo',
+    country_name: 'Macao',
+  },
+  {
+    country_code: 'mk',
+    country_name: 'Macedonia, the Former Yugosalv Republic of',
+  },
+  {
+    country_code: 'mg',
+    country_name: 'Madagascar',
+  },
+  {
+    country_code: 'mw',
+    country_name: 'Malawi',
+  },
+  {
+    country_code: 'my',
+    country_name: 'Malaysia',
+  },
+  {
+    country_code: 'mv',
+    country_name: 'Maldives',
+  },
+  {
+    country_code: 'ml',
+    country_name: 'Mali',
+  },
+  {
+    country_code: 'mt',
+    country_name: 'Malta',
+  },
+  {
+    country_code: 'mh',
+    country_name: 'Marshall Islands',
+  },
+  {
+    country_code: 'mq',
+    country_name: 'Martinique',
+  },
+  {
+    country_code: 'mr',
+    country_name: 'Mauritania',
+  },
+  {
+    country_code: 'mu',
+    country_name: 'Mauritius',
+  },
+  {
+    country_code: 'yt',
+    country_name: 'Mayotte',
+  },
+  {
+    country_code: 'mx',
+    country_name: 'Mexico',
+  },
+  {
+    country_code: 'fm',
+    country_name: 'Micronesia, Federated States of',
+  },
+  {
+    country_code: 'md',
+    country_name: 'Moldova, Republic of',
+  },
+  {
+    country_code: 'mc',
+    country_name: 'Monaco',
+  },
+  {
+    country_code: 'mn',
+    country_name: 'Mongolia',
+  },
+  {
+    country_code: 'ms',
+    country_name: 'Montserrat',
+  },
+  {
+    country_code: 'ma',
+    country_name: 'Morocco',
+  },
+  {
+    country_code: 'mz',
+    country_name: 'Mozambique',
+  },
+  {
+    country_code: 'mm',
+    country_name: 'Myanmar',
+  },
+  {
+    country_code: 'na',
+    country_name: 'Namibia',
+  },
+  {
+    country_code: 'nr',
+    country_name: 'Nauru',
+  },
+  {
+    country_code: 'np',
+    country_name: 'Nepal',
+  },
+  {
+    country_code: 'nl',
+    country_name: 'Netherlands',
+  },
+  {
+    country_code: 'an',
+    country_name: 'Netherlands Antilles',
+  },
+  {
+    country_code: 'nc',
+    country_name: 'New Caledonia',
+  },
+  {
+    country_code: 'nz',
+    country_name: 'New Zealand',
+  },
+  {
+    country_code: 'ni',
+    country_name: 'Nicaragua',
+  },
+  {
+    country_code: 'ne',
+    country_name: 'Niger',
+  },
+  {
+    country_code: 'ng',
+    country_name: 'Nigeria',
+  },
+  {
+    country_code: 'nu',
+    country_name: 'Niue',
+  },
+  {
+    country_code: 'nf',
+    country_name: 'Norfolk Island',
+  },
+  {
+    country_code: 'mp',
+    country_name: 'Northern Mariana Islands',
+  },
+  {
+    country_code: 'no',
+    country_name: 'Norway',
+  },
+  {
+    country_code: 'om',
+    country_name: 'Oman',
+  },
+  {
+    country_code: 'pk',
+    country_name: 'Pakistan',
+  },
+  {
+    country_code: 'pw',
+    country_name: 'Palau',
+  },
+  {
+    country_code: 'ps',
+    country_name: 'Palestinian Territory, Occupied',
+  },
+  {
+    country_code: 'pa',
+    country_name: 'Panama',
+  },
+  {
+    country_code: 'pg',
+    country_name: 'Papua New Guinea',
+  },
+  {
+    country_code: 'py',
+    country_name: 'Paraguay',
+  },
+  {
+    country_code: 'pe',
+    country_name: 'Peru',
+  },
+  {
+    country_code: 'ph',
+    country_name: 'Philippines',
+  },
+  {
+    country_code: 'pn',
+    country_name: 'Pitcairn',
+  },
+  {
+    country_code: 'pl',
+    country_name: 'Poland',
+  },
+  {
+    country_code: 'pt',
+    country_name: 'Portugal',
+  },
+  {
+    country_code: 'pr',
+    country_name: 'Puerto Rico',
+  },
+  {
+    country_code: 'qa',
+    country_name: 'Qatar',
+  },
+  {
+    country_code: 're',
+    country_name: 'Reunion',
+  },
+  {
+    country_code: 'ro',
+    country_name: 'Romania',
+  },
+  {
+    country_code: 'ru',
+    country_name: 'Russian Federation',
+  },
+  {
+    country_code: 'rw',
+    country_name: 'Rwanda',
+  },
+  {
+    country_code: 'sh',
+    country_name: 'Saint Helena',
+  },
+  {
+    country_code: 'kn',
+    country_name: 'Saint Kitts and Nevis',
+  },
+  {
+    country_code: 'lc',
+    country_name: 'Saint Lucia',
+  },
+  {
+    country_code: 'pm',
+    country_name: 'Saint Pierre and Miquelon',
+  },
+  {
+    country_code: 'vc',
+    country_name: 'Saint Vincent and the Grenadines',
+  },
+  {
+    country_code: 'ws',
+    country_name: 'Samoa',
+  },
+  {
+    country_code: 'sm',
+    country_name: 'San Marino',
+  },
+  {
+    country_code: 'st',
+    country_name: 'Sao Tome and Principe',
+  },
+  {
+    country_code: 'sa',
+    country_name: 'Saudi Arabia',
+  },
+  {
+    country_code: 'sn',
+    country_name: 'Senegal',
+  },
+  {
+    country_code: 'rs',
+    country_name: 'Serbia and Montenegro',
+  },
+  {
+    country_code: 'sc',
+    country_name: 'Seychelles',
+  },
+  {
+    country_code: 'sl',
+    country_name: 'Sierra Leone',
+  },
+  {
+    country_code: 'sg',
+    country_name: 'Singapore',
+  },
+  {
+    country_code: 'sk',
+    country_name: 'Slovakia',
+  },
+  {
+    country_code: 'si',
+    country_name: 'Slovenia',
+  },
+  {
+    country_code: 'sb',
+    country_name: 'Solomon Islands',
+  },
+  {
+    country_code: 'so',
+    country_name: 'Somalia',
+  },
+  {
+    country_code: 'za',
+    country_name: 'South Africa',
+  },
+  {
+    country_code: 'gs',
+    country_name: 'South Georgia and the South Sandwich Islands',
+  },
+  {
+    country_code: 'es',
+    country_name: 'Spain',
+  },
+  {
+    country_code: 'lk',
+    country_name: 'Sri Lanka',
+  },
+  {
+    country_code: 'sd',
+    country_name: 'Sudan',
+  },
+  {
+    country_code: 'sr',
+    country_name: 'Suriname',
+  },
+  {
+    country_code: 'sj',
+    country_name: 'Svalbard and Jan Mayen',
+  },
+  {
+    country_code: 'sz',
+    country_name: 'Swaziland',
+  },
+  {
+    country_code: 'se',
+    country_name: 'Sweden',
+  },
+  {
+    country_code: 'ch',
+    country_name: 'Switzerland',
+  },
+  {
+    country_code: 'sy',
+    country_name: 'Syrian Arab Republic',
+  },
+  {
+    country_code: 'tw',
+    country_name: 'Taiwan, Province of China',
+  },
+  {
+    country_code: 'tj',
+    country_name: 'Tajikistan',
+  },
+  {
+    country_code: 'tz',
+    country_name: 'Tanzania, United Republic of',
+  },
+  {
+    country_code: 'th',
+    country_name: 'Thailand',
+  },
+  {
+    country_code: 'tl',
+    country_name: 'Timor-Leste',
+  },
+  {
+    country_code: 'tg',
+    country_name: 'Togo',
+  },
+  {
+    country_code: 'tk',
+    country_name: 'Tokelau',
+  },
+  {
+    country_code: 'to',
+    country_name: 'Tonga',
+  },
+  {
+    country_code: 'tt',
+    country_name: 'Trinidad and Tobago',
+  },
+  {
+    country_code: 'tn',
+    country_name: 'Tunisia',
+  },
+  {
+    country_code: 'tr',
+    country_name: 'Turkiye',
+  },
+  {
+    country_code: 'tm',
+    country_name: 'Turkmenistan',
+  },
+  {
+    country_code: 'tc',
+    country_name: 'Turks and Caicos Islands',
+  },
+  {
+    country_code: 'tv',
+    country_name: 'Tuvalu',
+  },
+  {
+    country_code: 'ug',
+    country_name: 'Uganda',
+  },
+  {
+    country_code: 'ua',
+    country_name: 'Ukraine',
+  },
+  {
+    country_code: 'ae',
+    country_name: 'United Arab Emirates',
+  },
+  {
+    country_code: 'uk',
+    country_name: 'United Kingdom',
+  },
+  {
+    country_code: 'gb',
+    country_name: 'United Kingdom',
+  },
+  {
+    country_code: 'us',
+    country_name: 'United States',
+  },
+  {
+    country_code: 'um',
+    country_name: 'United States Minor Outlying Islands',
+  },
+  {
+    country_code: 'uy',
+    country_name: 'Uruguay',
+  },
+  {
+    country_code: 'uz',
+    country_name: 'Uzbekistan',
+  },
+  {
+    country_code: 'vu',
+    country_name: 'Vanuatu',
+  },
+  {
+    country_code: 've',
+    country_name: 'Venezuela',
+  },
+  {
+    country_code: 'vn',
+    country_name: 'Viet Nam',
+  },
+  {
+    country_code: 'vg',
+    country_name: 'Virgin Islands, British',
+  },
+  {
+    country_code: 'vi',
+    country_name: 'Virgin Islands, U.S.',
+  },
+  {
+    country_code: 'wf',
+    country_name: 'Wallis and Futuna',
+  },
+  {
+    country_code: 'eh',
+    country_name: 'Western Sahara',
+  },
+  {
+    country_code: 'ye',
+    country_name: 'Yemen',
+  },
+  {
+    country_code: 'zm',
+    country_name: 'Zambia',
+  },
+  {
+    country_code: 'zw',
+    country_name: 'Zimbabwe',
+  },
+].map((x) => ({ label: x.country_name, value: x.country_code }));
+
+export const BingCountryOptions = [
+  { label: 'Argentina AR', value: 'AR' },
+  { label: 'Australia AU', value: 'AU' },
+  { label: 'Austria AT', value: 'AT' },
+  { label: 'Belgium BE', value: 'BE' },
+  { label: 'Brazil BR', value: 'BR' },
+  { label: 'Canada CA', value: 'CA' },
+  { label: 'Chile CL', value: 'CL' },
+  { label: 'Denmark DK', value: 'DK' },
+  { label: 'Finland FI', value: 'FI' },
+  { label: 'France FR', value: 'FR' },
+  { label: 'Germany DE', value: 'DE' },
+  { label: 'Hong Kong SAR HK', value: 'HK' },
+  { label: 'India IN', value: 'IN' },
+  { label: 'Indonesia ID', value: 'ID' },
+  { label: 'Italy IT', value: 'IT' },
+  { label: 'Japan JP', value: 'JP' },
+  { label: 'Korea KR', value: 'KR' },
+  { label: 'Malaysia MY', value: 'MY' },
+  { label: 'Mexico MX', value: 'MX' },
+  { label: 'Netherlands NL', value: 'NL' },
+  { label: 'New Zealand NZ', value: 'NZ' },
+  { label: 'Norway NO', value: 'NO' },
+  { label: "People's Republic of China CN", value: 'CN' },
+  { label: 'Poland PL', value: 'PL' },
+  { label: 'Portugal PT', value: 'PT' },
+  { label: 'Republic of the Philippines PH', value: 'PH' },
+  { label: 'Russia RU', value: 'RU' },
+  { label: 'Saudi Arabia SA', value: 'SA' },
+  { label: 'South Africa ZA', value: 'ZA' },
+  { label: 'Spain ES', value: 'ES' },
+  { label: 'Sweden SE', value: 'SE' },
+  { label: 'Switzerland CH', value: 'CH' },
+  { label: 'Taiwan TW', value: 'TW' },
+  { label: 'Türkiye TR', value: 'TR' },
+  { label: 'United Kingdom GB', value: 'GB' },
+  { label: 'United States US', value: 'US' },
+];
+
+export const BingLanguageOptions = [
+  { label: 'Arabic ar', value: 'ar' },
+  { label: 'Basque eu', value: 'eu' },
+  { label: 'Bengali bn', value: 'bn' },
+  { label: 'Bulgarian bg', value: 'bg' },
+  { label: 'Catalan ca', value: 'ca' },
+  { label: 'Chinese (Simplified) zh-hans', value: 'ns' },
+  { label: 'Chinese (Traditional) zh-hant', value: 'nt' },
+  { label: 'Croatian hr', value: 'hr' },
+  { label: 'Czech cs', value: 'cs' },
+  { label: 'Danish da', value: 'da' },
+  { label: 'Dutch nl', value: 'nl' },
+  { label: 'English en', value: 'en' },
+  { label: 'English-United Kingdom en-gb', value: 'gb' },
+  { label: 'Estonian et', value: 'et' },
+  { label: 'Finnish fi', value: 'fi' },
+  { label: 'French fr', value: 'fr' },
+  { label: 'Galician gl', value: 'gl' },
+  { label: 'German de', value: 'de' },
+  { label: 'Gujarati gu', value: 'gu' },
+  { label: 'Hebrew he', value: 'he' },
+  { label: 'Hindi hi', value: 'hi' },
+  { label: 'Hungarian hu', value: 'hu' },
+  { label: 'Icelandic is', value: 'is' },
+  { label: 'Italian it', value: 'it' },
+  { label: 'Japanese jp', value: 'jp' },
+  { label: 'Kannada kn', value: 'kn' },
+  { label: 'Korean ko', value: 'ko' },
+  { label: 'Latvian lv', value: 'lv' },
+  { label: 'Lithuanian lt', value: 'lt' },
+  { label: 'Malay ms', value: 'ms' },
+  { label: 'Malayalam ml', value: 'ml' },
+  { label: 'Marathi mr', value: 'mr' },
+  { label: 'Norwegian (Bokmål) nb', value: 'nb' },
+  { label: 'Polish pl', value: 'pl' },
+  { label: 'Portuguese (Brazil) pt-br', value: 'br' },
+  { label: 'Portuguese (Portugal) pt-pt', value: 'pt' },
+  { label: 'Punjabi pa', value: 'pa' },
+  { label: 'Romanian ro', value: 'ro' },
+  { label: 'Russian ru', value: 'ru' },
+  { label: 'Serbian (Cyrylic) sr', value: 'sr' },
+  { label: 'Slovak sk', value: 'sk' },
+  { label: 'Slovenian sl', value: 'sl' },
+  { label: 'Spanish es', value: 'es' },
+  { label: 'Swedish sv', value: 'sv' },
+  { label: 'Tamil ta', value: 'ta' },
+  { label: 'Telugu te', value: 'te' },
+  { label: 'Thai th', value: 'th' },
+  { label: 'Turkish tr', value: 'tr' },
+  { label: 'Ukrainian uk', value: 'uk' },
+  { label: 'Vietnamese vi', value: 'vi' },
+];

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

@@ -7,10 +7,12 @@ import AnswerForm from '../answer-form';
 import ArXivForm from '../arxiv-form';
 import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
+import BingForm from '../bing-form';
 import CategorizeForm from '../categorize-form';
 import { Operator } from '../constant';
 import DuckDuckGoForm from '../duckduckgo-form';
 import GenerateForm from '../generate-form';
+import GoogleForm from '../google-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
 import KeywordExtractForm from '../keyword-extract-form';
 import MessageForm from '../message-form';
@@ -42,6 +44,8 @@ const FormMap = {
   [Operator.Wikipedia]: WikipediaForm,
   [Operator.PubMed]: PubMedForm,
   [Operator.ArXiv]: ArXivForm,
+  [Operator.Google]: GoogleForm,
+  [Operator.Bing]: BingForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

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

@@ -0,0 +1,33 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { GoogleCountryOptions, GoogleLanguageOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+const GoogleForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10}></TopNItem>
+      <Form.Item label={t('apiKey')} name={'api_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('country')} name={'country'}>
+        <Select options={GoogleCountryOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('language')} name={'language'}>
+        <Select options={GoogleLanguageOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default GoogleForm;

web/src/pages/flow/hooks.ts

@@ -30,12 +30,14 @@ import {
   NodeMap,
   Operator,
   RestrictedUpstreamMap,
-  initialArxivValues,
+  initialArXivValues,
   initialBaiduValues,
   initialBeginValues,
+  initialBingValues,
   initialCategorizeValues,
   initialDuckValues,
   initialGenerateValues,
+  initialGoogleValues,
   initialKeywordExtractValues,
   initialMessageValues,
   initialPubMedValues,
@@ -92,7 +94,9 @@ export const useInitializeOperatorParams = () => {
       [Operator.Baidu]: initialBaiduValues,
       [Operator.Wikipedia]: initialWikipediaValues,
       [Operator.PubMed]: initialPubMedValues,
-      [Operator.ArXiv]: initialArxivValues,
+      [Operator.ArXiv]: initialArXivValues,
+      [Operator.Google]: initialGoogleValues,
+      [Operator.Bing]: initialBingValues,
     };
   }, [llmId]);