made model names reader friendly

Author: MichielMAnalytics

client/src/components/Chat/Input/Mention.tsx

@@ -8,6 +8,7 @@ import { useAssistantsMapContext } from '~/Providers';
 import useMentions from '~/hooks/Input/useMentions';
 import { useLocalize, useCombobox, TranslationKeys } from '~/hooks';
 import { removeCharIfLast } from '~/utils';
+import { formatModelDisplayName } from '~/utils/modelNames';
 import MentionItem from './MentionItem';
 
 const ROW_HEIGHT = 40;
@@ -90,7 +91,7 @@ export default function Mention({
     } else if (mention.type === 'endpoint') {
       const models = (modelsConfig?.[mention.value || ''] ?? []).map((model) => ({
         value: mention.value,
-        label: model,
+        label: formatModelDisplayName(model),
         type: 'model',
       }));
 

client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx

@@ -113,27 +113,36 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
       isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)
         ? localize('com_endpoint_search_var', { 0: endpoint.label })
         : localize('com_endpoint_search_endpoint_models', { 0: endpoint.label });
+    
+    // Only show search bar if there are 5 or more models
+    const modelCount = endpoint.models?.length || 0;
+    const showSearchBar = modelCount >= 5;
+    
+    const menuProps = {
+      id: `endpoint-${endpoint.value}-menu`,
+      key: `endpoint-${endpoint.value}-item`,
+      className: "transition-opacity duration-200 ease-in-out",
+      defaultOpen: endpoint.value === selectedEndpoint,
+      label: (
+        <div
+          onClick={() => handleSelectEndpoint(endpoint)}
+          className="group flex w-full flex-shrink cursor-pointer items-center justify-between rounded-xl px-1 py-1 text-sm"
+        >
+          {renderIconLabel()}
+          {isUserProvided && (
+            <SettingsButton endpoint={endpoint} handleOpenKeyDialog={handleOpenKeyDialog} />
+          )}
+        </div>
+      ),
+      ...(showSearchBar && {
+        searchValue,
+        onSearch: (value) => setEndpointSearchValue(endpoint.value, value),
+        combobox: <input placeholder={placeholder} />
+      })
+    };
+
     return (
-      <Menu
-        id={`endpoint-${endpoint.value}-menu`}
-        key={`endpoint-${endpoint.value}-item`}
-        className="transition-opacity duration-200 ease-in-out"
-        defaultOpen={endpoint.value === selectedEndpoint}
-        searchValue={searchValue}
-        onSearch={(value) => setEndpointSearchValue(endpoint.value, value)}
-        combobox={<input placeholder={placeholder} />}
-        label={
-          <div
-            onClick={() => handleSelectEndpoint(endpoint)}
-            className="group flex w-full flex-shrink cursor-pointer items-center justify-between rounded-xl px-1 py-1 text-sm"
-          >
-            {renderIconLabel()}
-            {isUserProvided && (
-              <SettingsButton endpoint={endpoint} handleOpenKeyDialog={handleOpenKeyDialog} />
-            )}
-          </div>
-        }
-      >
+      <Menu {...menuProps}>
         {isAssistantsEndpoint(endpoint.value) && endpoint.models === undefined ? (
           <div className="flex items-center justify-center p-2">
             <Spinner />

client/src/components/Chat/Menus/Endpoints/components/EndpointModelItem.tsx

@@ -4,6 +4,7 @@ import { isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider'
 import type { Endpoint } from '~/common';
 import { useModelSelectorContext } from '../ModelSelectorContext';
 import { CustomMenuItem as MenuItem } from '../CustomMenu';
+import { formatModelDisplayName } from '~/utils/modelNames';
 
 interface EndpointModelItemProps {
   modelId: string | null;
@@ -30,6 +31,9 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
     endpoint.assistantNames?.[modelId]
   ) {
     modelName = endpoint.assistantNames[modelId];
+  } else if (modelName) {
+    // For regular models, format the display name
+    modelName = formatModelDisplayName(modelName);
   }
 
   return (

client/src/components/Chat/Menus/Endpoints/utils.ts

@@ -10,6 +10,7 @@ import type {
 import type { useLocalize } from '~/hooks';
 import SpecIcon from '~/components/Chat/Menus/Endpoints/components/SpecIcon';
 import { Endpoint, SelectedValues } from '~/common';
+import { formatModelDisplayName } from '~/utils/modelNames';
 
 export function filterItems<
   T extends {
@@ -92,6 +93,9 @@ export function filterModels(
       const assistant = assistantsMap[endpoint.value][modelId];
       modelName =
         typeof assistant.name === 'string' && assistant.name ? (assistant.name as string) : modelId;
+    } else {
+      // For regular models, use the formatted display name for search
+      modelName = formatModelDisplayName(modelId);
     }
 
     return modelName.toLowerCase().includes(searchTermLower);
@@ -200,7 +204,7 @@ export const getDisplayValue = ({
       return endpoint.assistantNames[selectedValues.model];
     }
 
-    return selectedValues.model;
+    return formatModelDisplayName(selectedValues.model);
   }
 
   if (selectedValues.endpoint) {

client/src/components/SidePanel/Agents/ModelPanel.tsx

@@ -13,6 +13,7 @@ import { componentMapping } from '~/components/SidePanel/Parameters/components';
 import ControlCombobox from '~/components/ui/ControlCombobox';
 import { useGetEndpointsQuery } from '~/data-provider';
 import { getEndpointField, cn } from '~/utils';
+import { formatModelDisplayName } from '~/utils/modelNames';
 import { useLocalize } from '~/hooks';
 import { Panel } from '~/common';
 import keyBy from 'lodash/keyBy';
@@ -180,6 +181,7 @@ export default function ModelPanel({
                 <>
                   <ControlCombobox
                     selectedValue={field.value || ''}
+                    displayValue={field.value ? formatModelDisplayName(field.value) : ''}
                     selectPlaceholder={
                       provider
                         ? localize('com_ui_select_model')
@@ -188,14 +190,15 @@ export default function ModelPanel({
                     searchPlaceholder={localize('com_ui_select_model')}
                     setValue={field.onChange}
                     items={models.map((model) => ({
-                      label: model,
+                      label: formatModelDisplayName(model),
                       value: model,
                     }))}
                     disabled={!provider}
                     className={cn('disabled:opacity-50', error ? 'border-2 border-red-500' : '')}
                     ariaLabel={localize('com_ui_model')}
                     isCollapsed={false}
                     showCarat={true}
+                    hideSearchWhenFewItems={true}
                   />
                   {provider && error && (
                     <span className="text-sm text-red-500 transition duration-300 ease-in-out">

client/src/components/ui/ControlCombobox.tsx

@@ -23,6 +23,7 @@ interface ControlComboboxProps {
   disabled?: boolean;
   iconSide?: 'left' | 'right';
   selectId?: string;
+  hideSearchWhenFewItems?: boolean;
 }
 
 const ROW_HEIGHT = 36;
@@ -44,10 +45,14 @@ function ControlCombobox({
   iconClassName,
   iconSide = 'left',
   selectId,
+  hideSearchWhenFewItems = false,
 }: ControlComboboxProps) {
   const [searchValue, setSearchValue] = useState('');
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [buttonWidth, setButtonWidth] = useState<number | null>(null);
+  
+  // Determine if search should be shown
+  const showSearch = !hideSearchWhenFewItems || items.length >= 5;
 
   const getItem = (option: OptionWithIcon) => ({
     id: `item-${option.value}`,
@@ -160,17 +165,19 @@ function ControlCombobox({
         )}
         style={{ width: dropdownWidth }}
       >
-        <div className="py-1.5">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-primary" />
-            <Ariakit.Combobox
-              store={combobox}
-              autoSelect
-              placeholder={searchPlaceholder}
-              className="w-full rounded-md bg-surface-secondary py-2 pl-9 pr-3 text-sm text-text-primary focus:outline-none"
-            />
+        {showSearch && (
+          <div className="py-1.5">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-primary" />
+              <Ariakit.Combobox
+                store={combobox}
+                autoSelect
+                placeholder={searchPlaceholder}
+                className="w-full rounded-md bg-surface-secondary py-2 pl-9 pr-3 text-sm text-text-primary focus:outline-none"
+              />
+            </div>
           </div>
-        </div>
+        )}
         <div className="max-h-[300px] overflow-auto">
           <Ariakit.ComboboxList store={combobox}>
             <SelectRenderer store={select} items={matches} itemSize={ROW_HEIGHT} overscan={5}>

client/src/hooks/Input/useMentions.ts

@@ -21,6 +21,7 @@ import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
 import { mapEndpoints, getPresetTitle } from '~/utils';
 import { EndpointIcon } from '~/components/Endpoints';
 import useHasAccess from '~/hooks/Roles/useHasAccess';
+import { formatModelDisplayName } from '~/utils/modelNames';
 
 const defaultInterface = getConfigDefaults().interface;
 
@@ -144,7 +145,7 @@ export default function useMentions({
 
       const models = (modelsConfig?.[endpoint] ?? []).map((model) => ({
         value: endpoint,
-        label: model,
+        label: formatModelDisplayName(model),
         type: 'model' as const,
         icon: EndpointIcon({
           conversation: { endpoint, model },

client/src/locales/en/translation.json

@@ -255,7 +255,7 @@
   "com_endpoint_save_as_preset": "Save As Preset",
   "com_endpoint_search": "Search endpoint by name",
   "com_endpoint_search_endpoint_models": "Search {{0}} models...",
-  "com_endpoint_search_models": "Search models...",
+  "com_endpoint_search_models": "Search...",
   "com_endpoint_search_var": "Search {{0}}...",
   "com_endpoint_set_custom_name": "Set a custom name, in case you can find this preset",
   "com_endpoint_skip_hover": "Enable skipping the completion step, which reviews the final answer and generated steps",

client/src/utils/modelNames.ts

@@ -0,0 +1,28 @@
+/**
+ * Formats model names for display by removing unnecessary suffixes and dates
+ * while preserving the original model name for API calls
+ */
+
+/**
+ * Cleans up model names for display purposes
+ * @param modelName - The original model name
+ * @returns A cleaned up display name
+ */
+export function formatModelDisplayName(modelName: string): string {
+  if (!modelName) return modelName;
+
+  // For Google models: remove everything from '-preview' onwards
+  if (modelName.includes('-preview')) {
+    return modelName.split('-preview')[0];
+  }
+
+  // For Anthropic models: remove date patterns (YYYYMMDD or YYYY-MM-DD)
+  // Matches patterns like -20250514, -2025-02-19, -20241022
+  const datePattern = /-(?:\d{4}-\d{2}-\d{2}|\d{8})$/;
+  if (datePattern.test(modelName)) {
+    return modelName.replace(datePattern, '');
+  }
+
+  // Return original name if no patterns match
+  return modelName;
+}