✨ 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-22 19: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/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);
    },