feat: Google Gemini ❇️ (#1355)

* refactor: add gemini-pro to google Models list; use defaultModels for central model listing

* refactor(SetKeyDialog): create useMultipleKeys hook to use for Azure, export `isJson` from utils, use EModelEndpoint

* refactor(useUserKey): change variable names to make keyName setting more clear

* refactor(FileUpload): allow passing container className string

* feat(GoogleClient): Gemini support

* refactor(GoogleClient): alternate stream speed for Gemini models

* feat(Gemini): styling/settings configuration for Gemini

* refactor(GoogleClient): substract max response tokens from max context tokens if context is above 32k (I/O max is combined between the two)

* refactor(tokens): correct google max token counts and subtract max response tokens when input/output count are combined towards max context count

* feat(google/initializeClient): handle both local and user_provided credentials and write tests

* fix(GoogleClient): catch if credentials are undefined, handle if serviceKey is string or object correctly, handle no examples passed, throw error if not a Generative Language model and no service account JSON key is provided, throw error if it is a Generative m
odel, but not google API key was provided

* refactor(loadAsyncEndpoints/google): activate Google endpoint if either the service key JSON file is provided in /api/data, or a GOOGLE_KEY is defined.

* docs: updated Google configuration

* fix(ci): Mock import of Service Account Key JSON file (auth.json)

* Update apis_and_tokens.md

* feat: increase max output tokens slider for gemini pro

* refactor(GoogleSettings): handle max and default maxOutputTokens on model change

* chore: add sensitive redact regex

* docs: add warning about data privacy

* Update apis_and_tokens.md

client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx

@@ -3,20 +3,14 @@ import React, { useEffect, useState } from 'react';
 // TODO: Temporarily remove checkbox until Plugins solution for Azure is figured out
 // import * as Checkbox from '@radix-ui/react-checkbox';
 // import { CheckIcon } from '@radix-ui/react-icons';
+import { useMultipleKeys } from '~/hooks/Input';
 import InputWithLabel from './InputWithLabel';
 import type { TConfigProps } from '~/common';
-
-function isJson(str: string) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
+import { isJson } from '~/utils/json';
 
 const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
   const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
+  const { getMultiKey: getAzure, setMultiKey: setAzure } = useMultipleKeys(setUserKey);
 
   useEffect(() => {
     if (isJson(userKey)) {
@@ -31,24 +25,6 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
     }
   }, [showPanel]);
 
-  function getAzure(name: string) {
-    if (isJson(userKey)) {
-      const newKey = JSON.parse(userKey);
-      return newKey[name];
-    } else {
-      return '';
-    }
-  }
-
-  function setAzure(name: string, value: number | string | boolean) {
-    let newKey = {};
-    if (isJson(userKey)) {
-      newKey = JSON.parse(userKey);
-    }
-    newKey[name] = value;
-
-    setUserKey(JSON.stringify(newKey));
-  }
   return (
     <>
       {!showPanel ? (
@@ -64,36 +40,36 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
         <>
           <InputWithLabel
             id={'instanceNameLabel'}
-            value={getAzure('azureOpenAIApiInstanceName') ?? ''}
+            value={getAzure('azureOpenAIApiInstanceName', userKey) ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiInstanceName', e.target.value ?? '')
+              setAzure('azureOpenAIApiInstanceName', e.target.value ?? '', userKey)
             }
             label={'Azure OpenAI Instance Name'}
           />
 
           <InputWithLabel
             id={'deploymentNameLabel'}
-            value={getAzure('azureOpenAIApiDeploymentName') ?? ''}
+            value={getAzure('azureOpenAIApiDeploymentName', userKey) ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '')
+              setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '', userKey)
             }
             label={'Azure OpenAI Deployment Name'}
           />
 
           <InputWithLabel
             id={'versionLabel'}
-            value={getAzure('azureOpenAIApiVersion') ?? ''}
+            value={getAzure('azureOpenAIApiVersion', userKey) ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiVersion', e.target.value ?? '')
+              setAzure('azureOpenAIApiVersion', e.target.value ?? '', userKey)
             }
             label={'Azure OpenAI API Version'}
           />
 
           <InputWithLabel
             id={'apiKeyLabel'}
-            value={getAzure('azureOpenAIApiKey') ?? ''}
+            value={getAzure('azureOpenAIApiKey', userKey) ?? ''}
             onChange={(e: { target: { value: string } }) =>
-              setAzure('azureOpenAIApiKey', e.target.value ?? '')
+              setAzure('azureOpenAIApiKey', e.target.value ?? '', userKey)
             }
             label={'Azure OpenAI API Key'}
           />