🪙 feat: Configure Max Context and Output Tokens (#2648)

* chore: make frequent 'error' log into 'debug' log

* feat: add maxContextTokens as a conversation field

* refactor(settings): increase popover height

* feat: add DynamicInputNumber and maxContextTokens to all endpoints that support it (frontend), fix schema

* feat: maxContextTokens handling (backend)

* style: revert popover height

* feat: max tokens

* fix: Ollama Vision firebase compatibility

* fix: Ollama Vision, use message_file_map to determine multimodal request

* refactor: bring back MobileNav and improve title styling

client/src/components/SidePanel/Parameters/DynamicInputNumber.tsx

@@ -0,0 +1,108 @@
+import { OptionTypes } from 'librechat-data-provider';
+import type { DynamicSettingProps } from 'librechat-data-provider';
+import type { ValueType } from '@rc-component/mini-decimal';
+import { Label, HoverCard, InputNumber, HoverCardTrigger } from '~/components/ui';
+import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
+import { cn, defaultTextProps, optionText } from '~/utils';
+import { ESide } from '~/common';
+import { useChatContext } from '~/Providers';
+import OptionHover from './OptionHover';
+
+function DynamicInputNumber({
+  label,
+  settingKey,
+  defaultValue,
+  description,
+  columnSpan,
+  setOption,
+  optionType,
+  readonly = false,
+  showDefault = true,
+  labelCode,
+  descriptionCode,
+  placeholderCode,
+  placeholder,
+  conversation,
+  range,
+  className = '',
+  inputClassName = '',
+}: DynamicSettingProps) {
+  const localize = useLocalize();
+  const { preset } = useChatContext();
+
+  const [setInputValue, inputValue] = useDebouncedInput<ValueType | null>({
+    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
+    initialValue:
+      optionType !== OptionTypes.Custom
+        ? (conversation?.[settingKey] as number)
+        : (defaultValue as number),
+    setter: () => ({}),
+    setOption,
+  });
+
+  useParameterEffects({
+    preset,
+    settingKey,
+    defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
+    conversation,
+    inputValue,
+    setInputValue,
+  });
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-start gap-6',
+        columnSpan ? `col-span-${columnSpan}` : 'col-span-full',
+        className,
+      )}
+    >
+      <HoverCard openDelay={300}>
+        <HoverCardTrigger className="grid w-full items-center gap-2">
+          <div className="flex justify-between">
+            <Label
+              htmlFor={`${settingKey}-dynamic-setting`}
+              className="text-left text-sm font-medium"
+            >
+              {labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
+              {showDefault && (
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default')}: {defaultValue})
+                </small>
+              )}
+            </Label>
+            <InputNumber
+              id={`${settingKey}-dynamic-setting-input-number`}
+              disabled={readonly}
+              value={inputValue}
+              onChange={setInputValue}
+              min={range?.min}
+              max={range?.max}
+              step={range?.step}
+              placeholder={
+                placeholderCode ? localize(placeholder ?? '') || placeholder : placeholder
+              }
+              controls={false}
+              className={cn(
+                defaultTextProps,
+                cn(
+                  optionText,
+                  'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                ),
+                inputClassName,
+              )}
+            />
+          </div>
+        </HoverCardTrigger>
+        {description && (
+          <OptionHover
+            description={descriptionCode ? localize(description) || description : description}
+            side={ESide.Left}
+          />
+        )}
+      </HoverCard>
+    </div>
+  );
+}
+
+export default DynamicInputNumber;

client/src/components/SidePanel/Parameters/index.ts

@@ -1,3 +1,4 @@
+export { default as DynamicInputNumber } from './DynamicInputNumber';
 export { default as DynamicDropdown } from './DynamicDropdown';
 export { default as DynamicCheckbox } from './DynamicCheckbox';
 export { default as DynamicTextarea } from './DynamicTextarea';