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/Endpoints/Icon.tsx

@@ -6,6 +6,7 @@ import {
   AzureMinimalIcon,
   PaLMIcon,
   CodeyIcon,
+  GeminiIcon,
 } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { IconProps } from '~/common';
@@ -59,12 +60,18 @@ const Icon: React.FC<IconProps> = (props) => {
         name: 'Plugins',
       },
       [EModelEndpoint.google]: {
-        icon: model?.includes('code') ? (
+        icon: model?.toLowerCase()?.includes('code') ? (
           <CodeyIcon size={size * 0.75} />
+        ) : model?.toLowerCase()?.includes('gemini') ? (
+          <GeminiIcon size={size * 0.7} />
         ) : (
           <PaLMIcon size={size * 0.7} />
         ),
-        name: model?.includes('code') ? 'Codey' : 'PaLM2',
+        name: model?.toLowerCase()?.includes('code')
+          ? 'Codey'
+          : model?.toLowerCase()?.includes('gemini')
+            ? 'Gemini'
+            : 'PaLM2',
       },
       [EModelEndpoint.anthropic]: {
         icon: <AnthropicIcon size={size * 0.5555555555555556} />,

client/src/components/Endpoints/Settings/Google.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { EModelEndpoint, endpointSettings } from 'librechat-data-provider';
 import type { TModelSelectProps } from '~/common';
@@ -18,11 +18,32 @@ import { useLocalize } from '~/hooks';
 
 export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
+  const google = endpointSettings[EModelEndpoint.google];
+  const { model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens } =
+    conversation ?? {};
+
+  const isGeminiPro = model?.toLowerCase()?.includes('gemini-pro');
+
+  const maxOutputTokensMax = isGeminiPro
+    ? google.maxOutputTokens.maxGeminiPro
+    : google.maxOutputTokens.max;
+  const maxOutputTokensDefault = isGeminiPro
+    ? google.maxOutputTokens.defaultGeminiPro
+    : google.maxOutputTokens.default;
+
+  useEffect(
+    () => {
+      if (model) {
+        setOption('maxOutputTokens')(Math.min(Number(maxOutputTokens) ?? 0, maxOutputTokensMax));
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model],
+  );
+
   if (!conversation) {
     return null;
   }
-  const { model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens } =
-    conversation;
 
   const setModel = setOption('model');
   const setModelLabel = setOption('modelLabel');
@@ -32,8 +53,9 @@ export default function Settings({ conversation, setOption, models, readonly }:
   const setTopK = setOption('topK');
   const setMaxOutputTokens = setOption('maxOutputTokens');
 
-  const isTextModel = !model?.includes('chat') && /code|text/.test(model ?? '');
-  const google = endpointSettings[EModelEndpoint.google];
+  const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
+  const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
+  const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
 
   return (
     <div className="grid grid-cols-5 gap-6">
@@ -216,15 +238,15 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_max_output_tokens')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', google.maxOutputTokens.default + '')})
+                  ({localize('com_endpoint_default_with_num', maxOutputTokensDefault + '')})
                 </small>
               </Label>
               <InputNumber
                 id="max-tokens-int"
                 disabled={readonly}
                 value={maxOutputTokens}
-                onChange={(value) => setMaxOutputTokens(value ?? google.maxOutputTokens.default)}
-                max={google.maxOutputTokens.max}
+                onChange={(value) => setMaxOutputTokens(value ?? maxOutputTokensDefault)}
+                max={maxOutputTokensMax}
                 min={google.maxOutputTokens.min}
                 step={google.maxOutputTokens.step}
                 controls={false}
@@ -239,10 +261,10 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[maxOutputTokens ?? google.maxOutputTokens.default]}
+              value={[maxOutputTokens ?? maxOutputTokensDefault]}
               onValueChange={(value) => setMaxOutputTokens(value[0])}
-              doubleClickHandler={() => setMaxOutputTokens(google.maxOutputTokens.default)}
-              max={google.maxOutputTokens.max}
+              doubleClickHandler={() => setMaxOutputTokens(maxOutputTokensDefault)}
+              max={maxOutputTokensMax}
               min={google.maxOutputTokens.min}
               step={google.maxOutputTokens.step}
               className="flex h-4 w-full"

client/src/components/Endpoints/Settings/MultiView/GoogleSettings.tsx

@@ -12,9 +12,12 @@ export default function GoogleView({ conversation, models, isPreset = false }) {
     return null;
   }
 
-  const { examples } = conversation;
-  const { showExamples, isCodeChat } = optionSettings;
-  return showExamples && !isCodeChat ? (
+  const { examples, model } = conversation;
+  const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
+  const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
+  const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
+  const { showExamples } = optionSettings;
+  return showExamples && isChatModel && !isTextModel ? (
     <Examples
       examples={examples ?? [{ input: { content: '' }, output: { content: '' } }]}
       setExample={setExample}