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
2025-12-17 17:00:15 +01:00 · 2023-12-15 02:18:07 -05:00 · 2023-12-15 02:18:07 -05:00 · 561ce8e86a
commit 561ce8e86a
parent d259431316
37 changed files with 702 additions and 219 deletions
--- a/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
+++ b/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
@ -1,8 +1,11 @@
 import React from 'react';
 import { object, string } from 'zod';
+import { AuthKeys } from 'librechat-data-provider';
 import type { TConfigProps } from '~/common';
-import FileUpload from '../EndpointMenu/FileUpload';
-import { useLocalize } from '~/hooks';
+import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
+import { useLocalize, useMultipleKeys } from '~/hooks';
+import InputWithLabel from './InputWithLabel';
+import { Label } from '~/components/ui';

 const CredentialsSchema = object({
  client_email: string().email().min(3),
@ -15,20 +18,43 @@ const validateCredentials = (credentials: Record<string, unknown>) => {
  return result.success;
 };

-const GoogleConfig = ({ setUserKey }: Pick<TConfigProps, 'setUserKey'>) => {
+const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 'setUserKey'>) => {
  const localize = useLocalize();
+  const { getMultiKey, setMultiKey } = useMultipleKeys(setUserKey);
+
  return (
-    <FileUpload
-      id="googleKey"
-      className="w-full"
-      text={localize('com_endpoint_config_key_import_json_key')}
-      successText={localize('com_endpoint_config_key_import_json_key_success')}
-      invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
-      validator={validateCredentials}
-      onFileSelected={(data) => {
-        setUserKey(JSON.stringify(data));
-      }}
-    />
+    <>
+      <div className="flex flex-row">
+        <Label htmlFor={AuthKeys.GOOGLE_SERVICE_KEY} className="text-left text-sm font-medium">
+          {localize('com_endpoint_config_google_service_key')}
+        </Label>
+        <div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">
+          {localize('com_endpoint_config_google_cloud_platform')}
+        </div>
+        <br />
+      </div>
+      <FileUpload
+        id={AuthKeys.GOOGLE_SERVICE_KEY}
+        className="w-full"
+        containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-400"
+        text={localize('com_endpoint_config_key_import_json_key')}
+        successText={localize('com_endpoint_config_key_import_json_key_success')}
+        invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
+        validator={validateCredentials}
+        onFileSelected={(data) => {
+          setMultiKey(AuthKeys.GOOGLE_SERVICE_KEY, JSON.stringify(data), userKey);
+        }}
+      />
+      <InputWithLabel
+        id={AuthKeys.GOOGLE_API_KEY}
+        value={getMultiKey(AuthKeys.GOOGLE_API_KEY, userKey) ?? ''}
+        onChange={(e: { target: { value: string } }) =>
+          setMultiKey(AuthKeys.GOOGLE_API_KEY, e.target.value ?? '', userKey)
+        }
+        label={localize('com_endpoint_config_google_api_key')}
+        subLabel={localize('com_endpoint_config_google_gemini_api')}
+      />
+    </>
  );
 };

--- a/client/src/components/Input/SetKeyDialog/HelpText.tsx
+++ b/client/src/components/Input/SetKeyDialog/HelpText.tsx
@ -55,28 +55,45 @@ function HelpText({ endpoint }: { endpoint: string }) {
      </small>
    ),
    [EModelEndpoint.google]: (
-      <small className="break-all text-gray-600">
-        {localize('com_endpoint_config_key_google_need_to')}{' '}
-        <a
-          target="_blank"
-          href="https://console.cloud.google.com/vertex-ai"
-          rel="noreferrer"
-          className="text-blue-600 underline"
-        >
-          {localize('com_endpoint_config_key_google_vertex_ai')}
-        </a>{' '}
-        {localize('com_endpoint_config_key_google_vertex_api')}{' '}
-        <a
-          target="_blank"
-          href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
-          rel="noreferrer"
-          className="text-blue-600 underline"
-        >
-          {localize('com_endpoint_config_key_google_service_account')}
-        </a>
-        {'. '}
-        {localize('com_endpoint_config_key_google_vertex_api_role')}
-      </small>
+      <>
+        <small className="break-all text-gray-600">
+          {localize('com_endpoint_config_google_service_key')}
+          {': '}
+          {localize('com_endpoint_config_key_google_need_to')}{' '}
+          <a
+            target="_blank"
+            href="https://console.cloud.google.com/vertex-ai"
+            rel="noreferrer"
+            className="text-blue-600 underline"
+          >
+            {localize('com_endpoint_config_key_google_vertex_ai')}
+          </a>{' '}
+          {localize('com_endpoint_config_key_google_vertex_api')}{' '}
+          <a
+            target="_blank"
+            href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
+            rel="noreferrer"
+            className="text-blue-600 underline"
+          >
+            {localize('com_endpoint_config_key_google_service_account')}
+          </a>
+          {'. '}
+          {localize('com_endpoint_config_key_google_vertex_api_role')}
+        </small>
+        <small className="break-all text-gray-600">
+          {localize('com_endpoint_config_google_api_key')}
+          {': '}
+          {localize('com_endpoint_config_google_api_info')}{' '}
+          <a
+            target="_blank"
+            href="https://makersuite.google.com/app/apikey"
+            rel="noreferrer"
+            className="text-blue-600 underline"
+          >
+            {localize('com_endpoint_config_click_here')}
+          </a>{' '}
+        </small>
+      </>
    ),
  };

--- a/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
+++ b/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
@ -1,23 +1,29 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Input, Label } from '~/components';
 import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
+import { Input, Label } from '~/components/ui';
 import { useLocalize } from '~/hooks';

 interface InputWithLabelProps {
  value: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  label: string;
+  subLabel?: string;
  id: string;
 }

-const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id }) => {
+const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLabel, id }) => {
  const localize = useLocalize();
  return (
    <>
-      <Label htmlFor={id} className="text-left text-sm font-medium">
-        {label}
+      <div className="flex flex-row">
+        <Label htmlFor={id} className="text-left text-sm font-medium">
+          {label}
+        </Label>
+        {subLabel && (
+          <div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">{subLabel}</div>
+        )}
        <br />
-      </Label>
+      </div>

      <Input
        id={id}
--- a/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
+++ b/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'}
          />