✨ feat: Add Google Parameters, Ollama/Openrouter Reasoning, & UI Optimizations (#5456)

* feat: Google Model Parameters * fix: dynamic input number value, previously coerced by zod schema * refactor: support openrouter reasoning tokens and XML for thinking directive to conform to ollama * fix: virtualize combobox to prevent performance drop on re-renders of long model/agent/assistant lists * refactor: simplify Fork component by removing unnecessary chat context index * fix: prevent rendering of Thinking component when children are null * refactor: update Markdown component to replace <think> tags and simplify remarkPlugins configuration * refactor: reorder remarkPlugins to improve plugin configuration in Markdown component
2025-12-16 16:30:15 +01:00 · 2025-01-24 18:15:47 -05:00 · 2025-01-24 18:15:47 -05:00 · af430e46f4
commit af430e46f4
parent 7818ae5c60
12 changed files with 200 additions and 50 deletions
--- a/api/app/clients/OpenAIClient.js
+++ b/api/app/clients/OpenAIClient.js
@ -1253,6 +1253,12 @@ ${convo}
        delete modelOptions.stop;
      }

+      let reasoningKey = 'reasoning_content';
+      if (this.useOpenRouter) {
+        modelOptions.include_reasoning = true;
+        reasoningKey = 'reasoning';
+      }
+
      if (modelOptions.stream) {
        streamPromise = new Promise((resolve) => {
          streamResolve = resolve;
@ -1291,14 +1297,14 @@ ${convo}

        let reasoningCompleted = false;
        for await (const chunk of stream) {
-          if (chunk?.choices?.[0]?.delta?.reasoning_content) {
+          if (chunk?.choices?.[0]?.delta?.[reasoningKey]) {
            if (reasoningTokens.length === 0) {
-              const thinkingDirective = ':::thinking\n';
+              const thinkingDirective = '<think>\n';
              intermediateReply.push(thinkingDirective);
              reasoningTokens.push(thinkingDirective);
              onProgress(thinkingDirective);
            }
-            const reasoning_content = chunk?.choices?.[0]?.delta?.reasoning_content || '';
+            const reasoning_content = chunk?.choices?.[0]?.delta?.[reasoningKey] || '';
            intermediateReply.push(reasoning_content);
            reasoningTokens.push(reasoning_content);
            onProgress(reasoning_content);
@ -1307,7 +1313,7 @@ ${convo}
          const token = chunk?.choices?.[0]?.delta?.content || '';
          if (!reasoningCompleted && reasoningTokens.length > 0 && token) {
            reasoningCompleted = true;
-            const separatorTokens = '\n:::\n';
+            const separatorTokens = '\n</think>\n';
            reasoningTokens.push(separatorTokens);
            onProgress(separatorTokens);
          }
--- a/client/package.json
+++ b/client/package.json
@ -90,6 +90,7 @@
    "react-speech-recognition": "^3.10.0",
    "react-textarea-autosize": "^8.4.0",
    "react-transition-group": "^4.4.5",
+    "react-virtualized": "^9.22.6",
    "recoil": "^0.7.7",
    "regenerator-runtime": "^0.14.1",
    "rehype-highlight": "^6.0.0",
--- a/client/src/components/Artifacts/Thinking.tsx
+++ b/client/src/components/Artifacts/Thinking.tsx
@ -16,6 +16,10 @@ const Thinking = ({ children }: ThinkingProps) => {
    setIsExpanded(!isExpanded);
  };

+  if (children == null) {
+    return null;
+  }
+
  return (
    <div className="mb-3">
      <button
--- a/client/src/components/Chat/Messages/Content/Markdown.tsx
+++ b/client/src/components/Chat/Messages/Content/Markdown.tsx
@ -157,13 +157,13 @@ type TContentProps = {

 const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentProps) => {
  const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
-  const codeArtifacts = useRecoilValue<boolean>(store.codeArtifacts);

  const isInitializing = content === '';

  let currentContent = content;
  if (!isInitializing) {
-    currentContent = currentContent.replace('z-index: 1;', '') || '';
+    currentContent = currentContent.replace('<think>', ':::thinking') || '';
+    currentContent = currentContent.replace('</think>', ':::') || '';
    currentContent = LaTeXParsing ? preprocessLaTeX(currentContent) : currentContent;
  }

@ -189,15 +189,13 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
    );
  }

-  const remarkPlugins: Pluggable[] = codeArtifacts
-    ? [
-      supersub,
-      remarkGfm,
-      [remarkMath, { singleDollarTextMath: true }],
-      remarkDirective,
-      artifactPlugin,
-    ]
-    : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
+  const remarkPlugins: Pluggable[] = [
+    supersub,
+    remarkGfm,
+    remarkDirective,
+    artifactPlugin,
+    [remarkMath, { singleDollarTextMath: true }],
+  ];

  return (
    <ArtifactProvider>
--- a/client/src/components/Conversations/Fork.tsx
+++ b/client/src/components/Conversations/Fork.tsx
@ -12,9 +12,9 @@ import {
  HoverCardContent,
 } from '~/components/ui';
 import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
-import { useToastContext, useChatContext } from '~/Providers';
 import { useLocalize, useNavigateToConvo } from '~/hooks';
 import { useForkConvoMutation } from '~/data-provider';
+import { useToastContext } from '~/Providers';
 import { ESide } from '~/common';
 import { cn } from '~/utils';
 import store from '~/store';
@ -112,10 +112,9 @@ export default function Fork({
  latestMessageId?: string;
 }) {
  const localize = useLocalize();
-  const { index } = useChatContext();
  const { showToast } = useToastContext();
  const [remember, setRemember] = useState(false);
-  const { navigateToConvo } = useNavigateToConvo(index);
+  const { navigateToConvo } = useNavigateToConvo();
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const [forkSetting, setForkSetting] = useRecoilState(store.forkSetting);
  const [activeSetting, setActiveSetting] = useState(optionLabels.default);
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
@ -2,10 +2,10 @@ import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
 import { Label, Input, HoverCard, HoverCardTrigger } from '~/components/ui';
-import { cn, defaultTextProps } from '~/utils';
 import { useChatContext } from '~/Providers';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
+import { cn } from '~/utils';

 function DynamicInput({
  label = '',
@ -50,7 +50,7 @@ function DynamicInput({
    const value = e.target.value;
    if (type === 'number') {
      if (!isNaN(Number(value))) {
-        setInputValue(e);
+        setInputValue(e, true);
      }
    } else {
      setInputValue(e);
@ -70,7 +70,7 @@ function DynamicInput({
              htmlFor={`${settingKey}-dynamic-input`}
              className="text-left text-sm font-medium"
            >
-              {labelCode ? localize(label) ?? label : label || settingKey}{' '}
+              {labelCode ? localize(label) || label : label || settingKey}{' '}
              {showDefault && (
                <small className="opacity-40">
                  (
@ -87,7 +87,7 @@ function DynamicInput({
            disabled={readonly}
            value={inputValue ?? ''}
            onChange={handleInputChange}
-            placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
+            placeholder={placeholderCode ? localize(placeholder) || placeholder : placeholder}
            className={cn(
              'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
            )}
@ -95,7 +95,7 @@ function DynamicInput({
        </HoverCardTrigger>
        {description && (
          <OptionHover
-            description={descriptionCode ? localize(description) ?? description : description}
+            description={descriptionCode ? localize(description) || description : description}
            side={ESide.Left}
          />
        )}
--- a/client/src/components/SidePanel/Parameters/settings.ts
+++ b/client/src/components/SidePanel/Parameters/settings.ts
@ -2,6 +2,7 @@ import {
  ImageDetail,
  EModelEndpoint,
  openAISettings,
+  googleSettings,
  BedrockProviders,
  anthropicSettings,
 } from 'librechat-data-provider';
@ -352,6 +353,87 @@ const meta: Record<string, SettingDefinition> = {
  }),
 };

+const google: Record<string, SettingDefinition> = {
+  temperature: createDefinition(baseDefinitions.temperature, {
+    default: googleSettings.temperature.default,
+    range: {
+      min: googleSettings.temperature.min,
+      max: googleSettings.temperature.max,
+      step: googleSettings.temperature.step,
+    },
+  }),
+  topP: createDefinition(baseDefinitions.topP, {
+    default: googleSettings.topP.default,
+    range: {
+      min: googleSettings.topP.min,
+      max: googleSettings.topP.max,
+      step: googleSettings.topP.step,
+    },
+  }),
+  topK: {
+    key: 'topK',
+    label: 'com_endpoint_top_k',
+    labelCode: true,
+    description: 'com_endpoint_google_topk',
+    descriptionCode: true,
+    type: 'number',
+    default: googleSettings.topK.default,
+    range: {
+      min: googleSettings.topK.min,
+      max: googleSettings.topK.max,
+      step: googleSettings.topK.step,
+    },
+    component: 'slider',
+    optionType: 'model',
+    columnSpan: 4,
+  },
+  maxOutputTokens: {
+    key: 'maxOutputTokens',
+    label: 'com_endpoint_max_output_tokens',
+    labelCode: true,
+    type: 'number',
+    component: 'input',
+    description: 'com_endpoint_google_maxoutputtokens',
+    descriptionCode: true,
+    placeholder: 'com_nav_theme_system',
+    placeholderCode: true,
+    default: googleSettings.maxOutputTokens.default,
+    range: {
+      min: googleSettings.maxOutputTokens.min,
+      max: googleSettings.maxOutputTokens.max,
+      step: googleSettings.maxOutputTokens.step,
+    },
+    optionType: 'model',
+    columnSpan: 2,
+  },
+};
+
+const googleConfig: SettingsConfiguration = [
+  librechat.modelLabel,
+  librechat.promptPrefix,
+  librechat.maxContextTokens,
+  google.maxOutputTokens,
+  google.temperature,
+  google.topP,
+  google.topK,
+  librechat.resendFiles,
+];
+
+const googleCol1: SettingsConfiguration = [
+  baseDefinitions.model as SettingDefinition,
+  librechat.modelLabel,
+  librechat.promptPrefix,
+];
+
+const googleCol2: SettingsConfiguration = [
+  librechat.maxContextTokens,
+  google.maxOutputTokens,
+  google.temperature,
+  google.topP,
+  google.topK,
+  librechat.resendFiles,
+];
+
 const openAI: SettingsConfiguration = [
  openAIParams.chatGptLabel,
  librechat.promptPrefix,
@ -529,6 +611,7 @@ export const settings: Record<string, SettingsConfiguration | undefined> = {
  [`${EModelEndpoint.bedrock}-${BedrockProviders.Meta}`]: bedrockGeneral,
  [`${EModelEndpoint.bedrock}-${BedrockProviders.AI21}`]: bedrockGeneral,
  [`${EModelEndpoint.bedrock}-${BedrockProviders.Amazon}`]: bedrockGeneral,
+  [EModelEndpoint.google]: googleConfig,
 };

 const openAIColumns = {
@ -571,6 +654,10 @@ export const presetSettings: Record<
  [`${EModelEndpoint.bedrock}-${BedrockProviders.Meta}`]: bedrockGeneralColumns,
  [`${EModelEndpoint.bedrock}-${BedrockProviders.AI21}`]: bedrockGeneralColumns,
  [`${EModelEndpoint.bedrock}-${BedrockProviders.Amazon}`]: bedrockGeneralColumns,
+  [EModelEndpoint.google]: {
+    col1: googleCol1,
+    col2: googleCol2,
+  },
 };

 export const agentSettings: Record<string, SettingsConfiguration | undefined> = Object.entries(
--- a/client/src/components/ui/ControlCombobox.tsx
+++ b/client/src/components/ui/ControlCombobox.tsx
@ -1,5 +1,6 @@
 import * as Ariakit from '@ariakit/react';
 import { matchSorter } from 'match-sorter';
+import { AutoSizer, List } from 'react-virtualized';
 import { startTransition, useMemo, useState, useEffect, useRef, memo } from 'react';
 import { cn } from '~/utils';
 import type { OptionWithIcon } from '~/common';
@ -17,6 +18,8 @@ interface ControlComboboxProps {
  SelectIcon?: React.ReactNode;
 }

+const ROW_HEIGHT = 36;
+
 function ControlCombobox({
  selectedValue,
  displayValue,
@ -45,6 +48,39 @@ function ControlCombobox({
    }
  }, [isCollapsed]);

+  const rowRenderer = ({
+    index,
+    key,
+    style,
+  }: {
+    index: number;
+    key: string;
+    style: React.CSSProperties;
+  }) => {
+    const item = matches[index];
+    return (
+      <Ariakit.SelectItem
+        key={key}
+        value={`${item.value ?? ''}`}
+        aria-label={`${item.label ?? item.value ?? ''}`}
+        className={cn(
+          'flex cursor-pointer items-center px-3 text-sm',
+          'text-text-primary hover:bg-surface-tertiary',
+          'data-[active-item]:bg-surface-tertiary',
+        )}
+        render={<Ariakit.ComboboxItem />}
+        style={style}
+      >
+        {item.icon != null && (
+          <div className="assistant-item mr-2 flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
+            {item.icon}
+          </div>
+        )}
+        <span className="flex-grow truncate text-left">{item.label}</span>
+      </Ariakit.SelectItem>
+    );
+  };
+
  return (
    <div className="flex w-full items-center justify-center px-1">
      <Ariakit.ComboboxProvider
@ -93,28 +129,20 @@ function ControlCombobox({
                />
              </div>
            </div>
-            <Ariakit.ComboboxList className="max-h-[50vh] overflow-auto">
-              {matches.map((item) => (
-                <Ariakit.SelectItem
-                  key={item.value}
-                  value={`${item.value ?? ''}`}
-                  aria-label={`${item.label ?? item.value ?? ''}`}
-                  className={cn(
-                    'flex cursor-pointer items-center px-3 py-2 text-sm',
-                    'text-text-primary hover:bg-surface-tertiary',
-                    'data-[active-item]:bg-surface-tertiary',
-                  )}
-                  render={<Ariakit.ComboboxItem />}
-                >
-                  {item.icon != null && (
-                    <div className="assistant-item mr-2 flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
-                      {item.icon}
-                    </div>
-                  )}
-                  <span className="flex-grow truncate text-left">{item.label}</span>
-                </Ariakit.SelectItem>
-              ))}
-            </Ariakit.ComboboxList>
+            <div className="max-h-[50vh]">
+              <AutoSizer disableHeight>
+                {({ width }) => (
+                  <List
+                    width={width}
+                    height={Math.min(matches.length * ROW_HEIGHT, 300)}
+                    rowCount={matches.length}
+                    rowHeight={ROW_HEIGHT}
+                    rowRenderer={rowRenderer}
+                    overscanRowCount={5}
+                  />
+                )}
+              </AutoSizer>
+            </div>
          </Ariakit.SelectPopover>
        </Ariakit.SelectProvider>
      </Ariakit.ComboboxProvider>
--- a/client/src/hooks/Conversations/useDebouncedInput.ts
+++ b/client/src/hooks/Conversations/useDebouncedInput.ts
@ -20,7 +20,7 @@ function useDebouncedInput<T = unknown>({
  initialValue: T;
  delay?: number;
 }): [
-  (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => void,
+  (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T, numeric?: boolean) => void,
  T,
  SetterOrUpdater<T>,
  // (newValue: string) => void,
@ -37,12 +37,15 @@ function useDebouncedInput<T = unknown>({

  /** An onChange handler that updates the local state and the debounced option */
  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => {
-      const newValue: T =
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T, numeric?: boolean) => {
+      let newValue: T =
        typeof e !== 'object'
          ? e
          : ((e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>).target
            .value as unknown as T);
+      if (numeric === true) {
+        newValue = Number(newValue) as unknown as T;
+      }
      setValue(newValue);
      setDebouncedOption(newValue);
    },
--- a/package-lock.json
+++ b/package-lock.json
@ -952,6 +952,7 @@
        "react-speech-recognition": "^3.10.0",
        "react-textarea-autosize": "^8.4.0",
        "react-transition-group": "^4.4.5",
+        "react-virtualized": "^9.22.6",
        "recoil": "^0.7.7",
        "regenerator-runtime": "^0.14.1",
        "rehype-highlight": "^6.0.0",
@ -29460,6 +29461,11 @@
        "react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
      }
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
    "node_modules/react-markdown": {
      "version": "9.0.1",
      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
@ -29760,6 +29766,23 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/react-virtualized": {
+      "version": "9.22.6",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
+      "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -35067,7 +35090,7 @@
    },
    "packages/data-provider": {
      "name": "librechat-data-provider",
-      "version": "0.7.693",
+      "version": "0.7.694",
      "license": "ISC",
      "dependencies": {
        "axios": "^1.7.7",
--- a/packages/data-provider/package.json
+++ b/packages/data-provider/package.json
@ -1,6 +1,6 @@
 {
  "name": "librechat-data-provider",
-  "version": "0.7.693",
+  "version": "0.7.694",
  "description": "data services for librechat apps",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
--- a/packages/data-provider/src/schemas.ts
+++ b/packages/data-provider/src/schemas.ts
@ -38,6 +38,7 @@ export const paramEndpoints = new Set<EModelEndpoint | string>([
  EModelEndpoint.azureOpenAI,
  EModelEndpoint.anthropic,
  EModelEndpoint.custom,
+  EModelEndpoint.google,
 ]);

 export enum BedrockProviders {