🎨 feat: UI Refresh for Enhanced UX (#6346)

* ✨ feat: Add Expand Chat functionality and improve UI components

* ✨ feat: Introduce Chat Badges feature with editing capabilities and UI enhancements

* ✨ feat: re-implement file attachment functionality with new components and improved UI

* ✨ feat: Enhance BadgeRow component with drag-and-drop functionality and add animations for better user experience

* ✨ feat: Add useChatBadges hook and enhance Badge component with animations and toggle functionality

* feat: Improve Add/Delete Badges + style and bug fixes

* ✨ feat: Refactor EditBadges component and optimize useChatBadges hook for improved performance and readability

* ✨ feat: Add type definition for LucideIcon in EditBadges component

* refactor: Clean up BadgeRow component by removing outdated comment and improving code readability

* refactor: Rename app-icon class to badge-icon for consistency and improve badge styling

* feat: Add Center Chat Input toggle and update related components for improved UI/UX

* refactor: Simplify ChatView and MessagesView components for improved readability and performance

* refactor: Improve layout and positioning of scroll button in MessagesView component

* refactor: Adjust scroll button position in MessagesView component for better visibility

* refactor: Remove redundant background class from Badge component for cleaner styling

* feat: disable chat badges

* refactor: adjust positioning of scroll button and popover for improved layout

* refactor: simplify class names in ChatForm and RemoveFile components for cleaner code

* refactor: move Switcher to HeaderOptions from SidePanel

* fix(Landing): duplicate description

* feat: add SplitText component for animated text display and update Landing component to use it

* feat(Chat): add ConversationStarters component and integrate it into ChatView; remove ConvoStarter component

* feat(Chat): enhance Message component layout and styling for improved readability

* feat(ControlCombobox, Select): enhance styling and add animation for improved UI experience

* feat(Chat): update Header and HeaderNewChat components for improved layout and styling

* feat(Chat): add ModelDropdown (now includes both endpoint and model) and refactor Menu components for improved UI

* feat(ModelDropdown): add Agent Select; removed old AgentSwitcher components

* feat(ModelDropdown): add settings button for user key configuration

* fix(ModelDropdown): the model dropdown wasn't opening automatically when opening the endpoint one

* refactor(Chat): remove unused EndpointsMenu and related components to streamline codebase

* feat: enhance greeting message and improve accessibility fro ModelDropdown

* refactor(Endpoints): add new hooks and components for endpoint management

* feat(Endpoint): add support for modelSpecs

* feat(Endpoints): add mobile support

* fix: type issues

* fix(modelSpec): type issue

* fix(EndpointMenuDropdown): double overflow scroller in mobile model list

* fix: search model on mobile

* refactor: Endpoint/Model/modelSpec dropdown

* refactor: reorganize imports in Endpoint components

* refactor: remove unused translation keys from English locale

* BREAKING: moving to ariakit with new CustomMenu

* refactor: remove unnecessary comments

* refactor: remove EndpointItem, ModelDropdownButton, SpecIcon, and SpecItem components

* 🔧 fix: AI Icon bump when regenerating message

* wip: chat UI refactoring, fix issues

* chore: add recent update to useAutoSave

* feat: add access control for agent permissions in useMentions hook

* refactor: streamline ModelSelector by removing unused endpoints logic

* refactor: enhance ModelSelector and context by integrating endpointsConfig and improving type usage

* feat: update ModelSelectorContext to utilize conversation data for initial state

* feat: add selector effects for synced endpoint handling

* feat: add guard clause for conversation endpoint in useSelectorEffects hook

* fix: safely call onSelectMention and add autofocus to mention input

* chore: typing

* refactor: ModelSelector to streamline key dialog handling and improve endpoint rendering

* refactor: extract SettingsButton component for cleaner endpoint item rendering

* wip: first pass, expand set api key

* wip: first pass, expanding set key

* refactor: update EndpointItem styles for improved layout and hover effects

* refactor: adjust padding in EndpointItem for improved layout consistency

* refactor: update preset structure in useSelectMention to include spec as null

* refactor: rename setKeyDialogOpen to onOpenChange for clarity and consistency, bring focus back to button that opened dialog

* feat: add SpecIcon component for dynamic model spec icons in menu, adjust icon styling

* refactor: update getSelectedIcon to accept additional parameters and improve icon rendering logic

* fix: adjust padding in MessageRender for improved layout

* refactor: remove inline style for menu width in CustomMenu component

* refactor: enhance layout and styling in ModelSpecItem component for better responsiveness

* refactor: update getDefaultModelSpec to accept startupConfig and improve model spec retrieval logic

* refactor: improve key management and default values in ModelSelector and related components

* refactor: adjust menu width and improve responsiveness in CustomMenu and EndpointItem components

* refactor: enhance focus styles and responsiveness in EndpointItem component

* refactor: improve layout and spacing in Header and ModelSelector components for better responsiveness

* refactor: adjust button styles for consistency and improved layout in AddMultiConvo and PresetsMenu components

* fix: initial fix of assistant names

* fix: assistants handling

* chore: update version of librechat-data-provider to 0.7.75 and add 'spec' to excludedKeys

* fix: improve endpoint filtering logic based on interface configuration and access rights

* fix: remove unused HeaderOptions import and set spec to null in presets and mentions

* fix: ensure currentExample is always an object when updating examples

* fix: update interfaceConfig checks to ensure modelSelect is considered for rendering components

* fix: update model selection logic to consider interface configuration when prioritizing model specs

* fix: add missing localizations

* fix: remove unused agent and assistant selection translations

* fix: implement debounced state updates for selected values in useSelectorEffects

* style: minor style changes related to the ModelSelector

* fix: adjust maximum height for popover and set fixed height for model item

* fix: update placeholders for model and endpoint search inputs

* fix: refactor MessageRender and ContentRender components to better match each other

* fix: remove convo fallback for iconURL in MessageRender and ContentRender components

* fix: update handling of spec, iconURL, and modelLabel in conversation presets, to allow better interchangeability

* fix: replace chatGptLabel with modelLabel in OpenAI settings configuration (fully deprecate chatGptLabel)

* fix: remove console log for assistantNames in useEndpoints hook

* refactor: add cleanInput and cleanOutput options to default conversation handling

* chore: update bun.lockb

* fix: set default value for showIconInHeader in getSelectedIcon function

* refactor: enhance error handling in message processing when latest message has existing content blocks

* chore: allow import/no-cycle for messages

* fix: adjust flex properties in BookmarkMenu for better layout

* feat: support both 'prompt' and 'q' as query parameters in useQueryParams hook

* feat: re-enable Badges components

* refactor: disable edit badge component

* chore: rename assistantMap to assistantsMap for consistency

* chore: rename assistantMap to assistantsMap for consistency in Mention component

* feat: set staleTime for various queries to improve data freshness

* feat: add spec field to tQueryParamsSchema for model specification

* feat: enhance useQueryParams to handle model specs

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/hooks/Input/useMentions.ts

@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
 import { useGetModelsQuery } from 'librechat-data-provider/react-query';
 import {
+  Permissions,
   alternateName,
   EModelEndpoint,
+  PermissionTypes,
   isAgentsEndpoint,
   getConfigDefaults,
   isAssistantsEndpoint,
@@ -18,6 +20,7 @@ import {
 import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
 import { mapEndpoints, getPresetTitle } from '~/utils';
 import { EndpointIcon } from '~/components/Endpoints';
+import useHasAccess from '~/hooks/Roles/useHasAccess';
 
 const defaultInterface = getConfigDefaults().interface;
 
@@ -53,6 +56,11 @@ export default function useMentions({
   assistantMap: TAssistantsMap;
   includeAssistants: boolean;
 }) {
+  const hasAgentAccess = useHasAccess({
+    permissionType: PermissionTypes.AGENTS,
+    permission: Permissions.USE,
+  });
+
   const { data: presets } = useGetPresetsQuery();
   const { data: modelsConfig } = useGetModelsQuery();
   const { data: startupConfig } = useGetStartupConfig();
@@ -67,7 +75,12 @@ export default function useMentions({
       description,
     })),
   );
+  const interfaceConfig = useMemo(
+    () => startupConfig?.interface ?? defaultInterface,
+    [startupConfig?.interface],
+  );
   const { data: agentsList = null } = useListAgentsQuery(undefined, {
+    enabled: hasAgentAccess && interfaceConfig.modelSelect === true,
     select: (res) => {
       const { data } = res;
       return data.map(({ id, name, avatar }) => ({
@@ -113,10 +126,6 @@ export default function useMentions({
   );
 
   const modelSpecs = useMemo(() => startupConfig?.modelSpecs?.list ?? [], [startupConfig]);
-  const interfaceConfig = useMemo(
-    () => startupConfig?.interface ?? defaultInterface,
-    [startupConfig],
-  );
 
   const options: MentionOption[] = useMemo(() => {
     let validEndpoints = endpoints;
@@ -129,6 +138,10 @@ export default function useMentions({
         return [];
       }
 
+      if (interfaceConfig.modelSelect !== true) {
+        return [];
+      }
+
       const models = (modelsConfig?.[endpoint] ?? []).map((model) => ({
         value: endpoint,
         label: model,
@@ -159,7 +172,7 @@ export default function useMentions({
         }),
         type: 'modelSpec' as const,
       })),
-      ...(interfaceConfig.endpointsMenu === true ? validEndpoints : []).map((endpoint) => ({
+      ...(interfaceConfig.modelSelect === true ? validEndpoints : []).map((endpoint) => ({
         value: endpoint,
         label: alternateName[endpoint as string] ?? endpoint ?? '',
         type: 'endpoint' as const,
@@ -170,14 +183,21 @@ export default function useMentions({
           size: 20,
         }),
       })),
-      ...(agentsList ?? []),
-      ...(endpointsConfig?.[EModelEndpoint.assistants] && includeAssistants
+      ...(interfaceConfig.modelSelect === true ? (agentsList ?? []) : []),
+      ...(endpointsConfig?.[EModelEndpoint.assistants] &&
+      includeAssistants &&
+      interfaceConfig.modelSelect === true
         ? assistantListMap[EModelEndpoint.assistants] || []
         : []),
-      ...(endpointsConfig?.[EModelEndpoint.azureAssistants] && includeAssistants
+      ...(endpointsConfig?.[EModelEndpoint.azureAssistants] &&
+      includeAssistants &&
+      interfaceConfig.modelSelect === true
         ? assistantListMap[EModelEndpoint.azureAssistants] || []
         : []),
-      ...((interfaceConfig.presets === true ? presets : [])?.map((preset, index) => ({
+      ...((interfaceConfig.modelSelect === true && interfaceConfig.presets === true
+        ? presets
+        : []
+      )?.map((preset, index) => ({
         value: preset.presetId ?? `preset-${index}`,
         label: preset.title ?? preset.modelLabel ?? preset.chatGptLabel ?? '',
         description: getPresetTitle(preset, true),

client/src/hooks/Input/useQueryParams.ts

@@ -9,9 +9,9 @@ import {
   tQueryParamsSchema,
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
-import type { TPreset, TEndpointsConfig } from 'librechat-data-provider';
+import type { TPreset, TEndpointsConfig, TStartupConfig } from 'librechat-data-provider';
 import type { ZodAny } from 'zod';
-import { getConvoSwitchLogic, removeUnavailableTools } from '~/utils';
+import { getConvoSwitchLogic, getModelSpecIconURL, removeUnavailableTools } from '~/utils';
 import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
 import { useChatContext, useChatFormContext } from '~/Providers';
 import useSubmitMessage from '~/hooks/Messages/useSubmitMessage';
@@ -87,8 +87,20 @@ export default function useQueryParams({
       if (!_newPreset) {
         return;
       }
+      let newPreset = removeUnavailableTools(_newPreset, availableTools);
+      if (newPreset.spec != null && newPreset.spec !== '') {
+        const startupConfig = queryClient.getQueryData<TStartupConfig>([QueryKeys.startupConfig]);
+        const modelSpecs = startupConfig?.modelSpecs?.list ?? [];
+        const spec = modelSpecs.find((s) => s.name === newPreset.spec);
+        if (!spec) {
+          return;
+        }
+        const { preset } = spec;
+        preset.iconURL = getModelSpecIconURL(spec);
+        preset.spec = spec.name;
+        newPreset = preset;
+      }
 
-      const newPreset = removeUnavailableTools(_newPreset, availableTools);
       let newEndpoint = newPreset.endpoint ?? '';
       const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
 
@@ -122,14 +134,28 @@ export default function useQueryParams({
         endpointsConfig,
       });
 
+      let resetParams = {};
+      if (newPreset.spec == null) {
+        template.spec = null;
+        template.iconURL = null;
+        template.modelLabel = null;
+        resetParams = { spec: null, iconURL: null, modelLabel: null };
+        newPreset = { ...newPreset, ...resetParams };
+      }
+
       const isModular = isCurrentModular && isNewModular && shouldSwitch;
       if (isExistingConversation && isModular) {
         template.endpointType = newEndpointType as EModelEndpoint | undefined;
 
         const currentConvo = getDefaultConversation({
           /* target endpointType is necessary to avoid endpoint mixing */
-          conversation: { ...(conversation ?? {}), endpointType: template.endpointType },
+          conversation: {
+            ...(conversation ?? {}),
+            endpointType: template.endpointType,
+            ...resetParams,
+          },
           preset: template,
+          cleanOutput: newPreset.spec != null && newPreset.spec !== '',
         });
 
         /* We don't reset the latest message, only when changing settings mid-converstion */
@@ -161,9 +187,11 @@ export default function useQueryParams({
         queryParams[key] = value;
       });
 
-      const decodedPrompt = queryParams.prompt || '';
+      // Support both 'prompt' and 'q' as query parameters, with 'prompt' taking precedence
+      const decodedPrompt = queryParams.prompt || queryParams.q || '';
       const shouldAutoSubmit = queryParams.submit?.toLowerCase() === 'true';
       delete queryParams.prompt;
+      delete queryParams.q;
       delete queryParams.submit;
       const validSettings = processValidSettings(queryParams);
 
@@ -184,6 +212,10 @@ export default function useQueryParams({
       if (!textAreaRef.current) {
         return;
       }
+      const startupConfig = queryClient.getQueryData<TStartupConfig>([QueryKeys.startupConfig]);
+      if (!startupConfig) {
+        return;
+      }
       const { decodedPrompt, validSettings, shouldAutoSubmit } = processQueryParams();
       const currentText = methods.getValues('text');
 

client/src/hooks/Input/useSelectMention.ts

@@ -17,15 +17,17 @@ import store from '~/store';
 export default function useSelectMention({
   presets,
   modelSpecs,
-  assistantMap,
+  assistantsMap,
   endpointsConfig,
   newConversation,
+  returnHandlers,
 }: {
   presets?: TPreset[];
   modelSpecs: TModelSpec[];
-  assistantMap?: TAssistantsMap;
+  assistantsMap?: TAssistantsMap;
   newConversation: ConvoGenerator;
   endpointsConfig: TEndpointsConfig;
+  returnHandlers?: boolean;
 }) {
   const { conversation } = useChatContext();
   const getDefaultConversation = useDefaultConvo();
@@ -69,7 +71,7 @@ export default function useSelectMention({
         preset.assistant_id != null &&
         !(preset.model ?? '')
       ) {
-        preset.model = assistantMap?.[newEndpoint]?.[preset.assistant_id]?.model;
+        preset.model = assistantsMap?.[newEndpoint]?.[preset.assistant_id]?.model;
       }
 
       const isModular = isCurrentModular && isNewModular && shouldSwitch;
@@ -80,6 +82,7 @@ export default function useSelectMention({
           /* target endpointType is necessary to avoid endpoint mixing */
           conversation: { ...(conversation ?? {}), endpointType: template.endpointType },
           preset: template,
+          cleanOutput: true,
         });
 
         /* We don't reset the latest message, only when changing settings mid-converstion */
@@ -104,7 +107,7 @@ export default function useSelectMention({
       modularChat,
       newConversation,
       endpointsConfig,
-      assistantMap,
+      assistantsMap,
     ],
   );
 
@@ -112,6 +115,7 @@ export default function useSelectMention({
     model?: string;
     agent_id?: string;
     assistant_id?: string;
+    spec?: string | null;
   };
 
   const onSelectEndpoint = useCallback(
@@ -149,12 +153,21 @@ export default function useSelectMention({
         template.agent_id = agent_id;
       }
 
+      template.spec = null;
+      template.iconURL = null;
+      template.modelLabel = null;
       if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
         template.endpointType = newEndpointType;
 
         const currentConvo = getDefaultConversation({
           /* target endpointType is necessary to avoid endpoint mixing */
-          conversation: { ...(conversation ?? {}), endpointType: template.endpointType },
+          conversation: {
+            ...(conversation ?? {}),
+            spec: null,
+            iconURL: null,
+            modelLabel: null,
+            endpointType: template.endpointType,
+          },
           preset: template,
         });
 
@@ -165,7 +178,7 @@ export default function useSelectMention({
 
       newConversation({
         template: { ...(template as Partial<TConversation>) },
-        preset: { ...kwargs, endpoint: newEndpoint },
+        preset: { ...kwargs, spec: null, iconURL: null, modelLabel: null, endpoint: newEndpoint },
       });
     },
     [conversation, getDefaultConversation, modularChat, newConversation, endpointsConfig],
@@ -194,14 +207,20 @@ export default function useSelectMention({
         endpointsConfig,
       });
 
+      newPreset.spec = null;
+      newPreset.iconURL = newPreset.iconURL ?? null;
+      newPreset.modelLabel = newPreset.modelLabel ?? null;
       const isModular = isCurrentModular && isNewModular && shouldSwitch;
       if (isExistingConversation && isModular) {
         template.endpointType = newEndpointType as EModelEndpoint | undefined;
-
+        template.spec = null;
+        template.iconURL = null;
+        template.modelLabel = null;
         const currentConvo = getDefaultConversation({
           /* target endpointType is necessary to avoid endpoint mixing */
           conversation: { ...(conversation ?? {}), endpointType: template.endpointType },
           preset: template,
+          cleanInput: true,
         });
 
         /* We don't reset the latest message, only when changing settings mid-converstion */
@@ -242,7 +261,7 @@ export default function useSelectMention({
       } else if (isAssistantsEndpoint(option.type)) {
         onSelectEndpoint(option.type, {
           assistant_id: key,
-          model: assistantMap?.[option.type]?.[key]?.model ?? '',
+          model: assistantsMap?.[option.type]?.[key]?.model ?? '',
         });
       } else if (isAgentsEndpoint(option.type)) {
         onSelectEndpoint(option.type, {
@@ -250,9 +269,16 @@ export default function useSelectMention({
         });
       }
     },
-    [modelSpecs, onSelectEndpoint, onSelectPreset, onSelectSpec, presets, assistantMap],
+    [modelSpecs, onSelectEndpoint, onSelectPreset, onSelectSpec, presets, assistantsMap],
   );
 
+  if (returnHandlers) {
+    return {
+      onSelectSpec,
+      onSelectEndpoint,
+    };
+  }
+
   return {
     onSelectMention,
   };