Merge upstream into jm-production (#19)

* 🙌 a11y: Accessibility Improvements (danny-avila#4978) * 🔃 fix: Safeguard against null token in SSE refresh token handling * 🔃 fix: Update import path for AnnounceOptions in LiveAnnouncer component * 🔃 a11y: Add aria-live attribute for accessibility in error messages * fix: prevent double screen reader notification for toast * 🔃 a11y: Enhance accessibility for main menus and buttons with ARIA roles and labels * refactor: better alt text for logo on login page danny-avila#4095 * refactor: remove unused import for DropdownNoState in Voices component * fix: Focus management issue in the Export Options Modal danny-avila#4100 * 🐛 fix: Enforced Model Spec Icons/Labels and Agent Descriptions (danny-avila#4979) * fix: Previous convos missing model spec info when enforce is set to `true` danny-avila#4749 * refactor: Include description field in agent list response * 🔧 fix: Add modelLabel to OpenAIClient and PluginsClient options (danny-avila#4995) --------- Co-authored-by: Danny Avila <[email protected]>
jmaddington · Dec 15, 2024 · dd379a2 · dd379a2
1 parent ec27ff7
commit dd379a2
Show file tree

Hide file tree

Showing 23 changed files with 110 additions and 26 deletions.
diff --git a/api/app/clients/OpenAIClient.js b/api/app/clients/OpenAIClient.js
@@ -423,6 +423,7 @@ class OpenAIClient extends BaseClient {
       promptPrefix: this.options.promptPrefix,
       resendFiles: this.options.resendFiles,
       imageDetail: this.options.imageDetail,
+      modelLabel: this.options.modelLabel,
       iconURL: this.options.iconURL,
       greeting: this.options.greeting,
       spec: this.options.spec,

diff --git a/api/app/clients/PluginsClient.js b/api/app/clients/PluginsClient.js
@@ -43,6 +43,7 @@ class PluginsClient extends OpenAIClient {
     return {
       artifacts: this.options.artifacts,
       chatGptLabel: this.options.chatGptLabel,
+      modelLabel: this.options.modelLabel,
       promptPrefix: this.options.promptPrefix,
       tools: this.options.tools,
       ...this.modelOptions,

diff --git a/api/app/clients/specs/OpenAIClient.test.js b/api/app/clients/specs/OpenAIClient.test.js
@@ -412,6 +412,7 @@ describe('OpenAIClient', () => {
     it('should return the correct save options', () => {
       const options = client.getSaveOptions();
       expect(options).toHaveProperty('chatGptLabel');
+      expect(options).toHaveProperty('modelLabel');
       expect(options).toHaveProperty('promptPrefix');
     });
   });

diff --git a/api/models/Agent.js b/api/models/Agent.js
@@ -200,6 +200,7 @@ const getListAgents = async (searchParameter) => {
       avatar: 1,
       author: 1,
       projectIds: 1,
+      description: 1,
       isCollaborative: 1,
     }).lean()
   ).map((agent) => {

diff --git a/api/server/middleware/buildEndpointOption.js b/api/server/middleware/buildEndpointOption.js
@@ -63,6 +63,10 @@ async function buildEndpointOption(req, res, next) {
     }
 
     try {
+      currentModelSpec.preset.spec = spec;
+      if (currentModelSpec.iconURL != null && currentModelSpec.iconURL !== '') {
+        currentModelSpec.preset.iconURL = currentModelSpec.iconURL;
+      }
       parsedBody = parseCompactConvo({
         endpoint,
         endpointType,

diff --git a/client/src/a11y/LiveAnnouncer.tsx b/client/src/a11y/LiveAnnouncer.tsx
@@ -1,6 +1,6 @@
 // client/src/a11y/LiveAnnouncer.tsx
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import type { AnnounceOptions } from '~/Providers/AnnouncerContext';
+import type { AnnounceOptions } from '~/common';
 import AnnouncerContext from '~/Providers/AnnouncerContext';
 import useLocalize from '~/hooks/useLocalize';
 import Announcer from './Announcer';

diff --git a/client/src/components/Audio/Voices.tsx b/client/src/components/Audio/Voices.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import type { Option } from '~/common';
-import DropdownNoState from '~/components/ui/DropdownNoState';
 import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
 import { Dropdown } from '~/components/ui';
 import { logger } from '~/utils';

diff --git a/client/src/components/Auth/AuthLayout.tsx b/client/src/components/Auth/AuthLayout.tsx
@@ -9,8 +9,9 @@ import Footer from './Footer';
 const ErrorRender = ({ children }: { children: React.ReactNode }) => (
   <div className="mt-16 flex justify-center">
     <div
-      className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
       role="alert"
+      aria-live="assertive"
+      className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
     >
       {children}
     </div>
@@ -36,8 +37,9 @@ function AuthLayout({
 }) {
   const localize = useLocalize();
 
+  const hasStartupConfigError = startupConfigError !== null && startupConfigError !== undefined;
   const DisplayError = () => {
-    if (startupConfigError !== null && startupConfigError !== undefined) {
+    if (hasStartupConfigError) {
       return <ErrorRender>{localize('com_auth_error_login_server')}</ErrorRender>;
     } else if (error === 'com_auth_error_invalid_reset_token') {
       return (
@@ -49,7 +51,7 @@ function AuthLayout({
           {localize('com_auth_to_try_again')}
         </ErrorRender>
       );
-    } else if (error) {
+    } else if (error != null && error) {
       return <ErrorRender>{localize(error)}</ErrorRender>;
     }
     return null;
@@ -60,7 +62,11 @@ function AuthLayout({
       <Banner />
       <BlinkAnimation active={isFetching}>
         <div className="mt-6 h-10 w-full bg-cover">
-          <img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />
+          <img
+            src="/assets/logo.svg"
+            className="h-full w-full object-contain"
+            alt={localize('com_ui_logo', startupConfig?.appTitle ?? 'LibreChat')}
+          />
         </div>
       </BlinkAnimation>
       <DisplayError />
@@ -70,7 +76,7 @@ function AuthLayout({
 
       <div className="flex flex-grow items-center justify-center">
         <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
-          {!startupConfigError && !isFetching && (
+          {!hasStartupConfigError && !isFetching && (
             <h1
               className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
               style={{ userSelect: 'none' }}

diff --git a/client/src/components/Auth/ErrorMessage.tsx b/client/src/components/Auth/ErrorMessage.tsx
@@ -1,7 +1,8 @@
 export const ErrorMessage = ({ children }: { children: React.ReactNode }) => (
   <div
-    className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
     role="alert"
+    aria-live="assertive"
+    className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
   >
     {children}
   </div>

diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -1,11 +1,11 @@
-import { useState, useId } from 'react';
+import { useState, useId, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Ariakit from '@ariakit/react';
 import { Upload, Share2 } from 'lucide-react';
 import { ShareButton } from '~/components/Conversations/ConvoOptions';
 import { useMediaQuery, useLocalize } from '~/hooks';
+import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
 import { DropdownPopup } from '~/components/ui';
-import { ExportModal } from '../Nav';
 import store from '~/store';
 
 export default function ExportAndShareMenu({
@@ -19,6 +19,7 @@ export default function ExportAndShareMenu({
   const [showShareDialog, setShowShareDialog] = useState(false);
 
   const menuId = useId();
+  const exportButtonRef = useRef<HTMLButtonElement>(null);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const conversation = useRecoilValue(store.conversationByIndex(0));
 
@@ -68,6 +69,7 @@ export default function ExportAndShareMenu({
         setIsOpen={setIsPopoverActive}
         trigger={
           <Ariakit.MenuButton
+            ref={exportButtonRef}
             id="export-menu-button"
             aria-label="Export options"
             className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
@@ -91,7 +93,8 @@ export default function ExportAndShareMenu({
           open={showExports}
           onOpenChange={onOpenChange}
           conversation={conversation}
-          aria-label="Export conversation modal"
+          triggerRef={exportButtonRef}
+          aria-label={localize('com_ui_export_convo_modal')}
         />
       )}
     </>

diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
@@ -5,13 +5,15 @@ import type { FC } from 'react';
 import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
 import { mapEndpoints, getEntity } from '~/utils';
 import EndpointItems from './Endpoints/MenuItems';
+import useLocalize from '~/hooks/useLocalize';
 import TitleButton from './UI/TitleButton';
 
 const EndpointsMenu: FC = () => {
   const { data: endpoints = [] } = useGetEndpointsQuery({
     select: mapEndpoints,
   });
 
+  const localize = useLocalize();
   const agentsMap = useAgentsMapContext();
   const assistantMap = useAssistantsMapContext();
   const { conversation } = useChatContext();
@@ -51,6 +53,9 @@ const EndpointsMenu: FC = () => {
           <Content
             side="bottom"
             align="start"
+            role="listbox"
+            id="llm-endpoint-menu"
+            aria-label={localize('com_ui_endpoints_available')}
             className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-border-light bg-header-primary text-text-primary shadow-lg lg:max-h-[75vh]"
           >
             <EndpointItems endpoints={endpoints} selected={endpoint} />

diff --git a/client/src/components/Chat/Menus/Models/MenuButton.tsx b/client/src/components/Chat/Menus/Models/MenuButton.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Trigger } from '@radix-ui/react-popover';
 import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
 import { useLocalize } from '~/hooks';
@@ -20,6 +21,8 @@ export default function MenuButton({
   endpointsConfig: TEndpointsConfig;
 }) {
   const localize = useLocalize();
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
     <Trigger asChild>
       <button
@@ -28,7 +31,13 @@ export default function MenuButton({
           className,
         )}
         type="button"
-        aria-label={`Select ${primaryText}`}
+        aria-label={localize('com_ui_llm_menu')}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={isExpanded}
+        aria-controls="llm-menu"
+        aria-activedescendant={isExpanded ? 'selected-llm' : undefined}
+        onClick={() => setIsExpanded(!isExpanded)}
       >
         {selected && selected.showIconInHeader === true && (
           <SpecIcon currentSpec={selected} endpointsConfig={endpointsConfig} />

diff --git a/client/src/components/Chat/Menus/Models/ModelSpec.tsx b/client/src/components/Chat/Menus/Models/ModelSpec.tsx
@@ -54,7 +54,9 @@ const MenuItem: FC<MenuItemProps> = ({
   return (
     <>
       <div
-        role="menuitem"
+        id={selected ? 'selected-llm' : undefined}
+        role="option"
+        aria-selected={selected}
         className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
         tabIndex={0}
         {...rest}

diff --git a/client/src/components/Chat/Menus/Models/ModelSpecs.tsx b/client/src/components/Chat/Menus/Models/ModelSpecs.tsx
@@ -6,14 +6,14 @@ import MenuSeparator from '~/components/Chat/Menus/UI/MenuSeparator';
 import ModelSpec from './ModelSpec';
 
 const ModelSpecs: FC<{
-  specs?: TModelSpec[];
+  specs?: Array<TModelSpec | undefined>;
   selected?: TModelSpec;
   setSelected?: (spec: TModelSpec) => void;
   endpointsConfig: TEndpointsConfig;
 }> = ({ specs = [], selected, setSelected = () => ({}), endpointsConfig }) => {
   return (
     <>
-      {specs &&
+      {specs.length &&
         specs.map((spec, i) => {
           if (!spec) {
             return null;

diff --git a/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx b/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx
@@ -5,8 +5,8 @@ import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TModelSpec, TConversation, TEndpointsConfig } from 'librechat-data-provider';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { useDefaultConvo, useNewConvo, useLocalize } from '~/hooks';
 import { getConvoSwitchLogic, getModelSpecIconURL } from '~/utils';
-import { useDefaultConvo, useNewConvo } from '~/hooks';
 import MenuButton from './MenuButton';
 import ModelSpecs from './ModelSpecs';
 import store from '~/store';
@@ -15,6 +15,7 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
   const { conversation } = useChatContext();
   const { newConversation } = useNewConvo();
 
+  const localize = useLocalize();
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   const modularChat = useRecoilValue(store.modularChat);
   const getDefaultConversation = useDefaultConvo();
@@ -111,6 +112,9 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
             <Content
               side="bottom"
               align="start"
+              id="llm-menu"
+              role="listbox"
+              aria-label={localize('com_ui_llms_available')}
               className="models-scrollbar mt-2 max-h-[65vh] min-w-[340px] max-w-xs overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-[75vh]"
             >
               <ModelSpecs

diff --git a/client/src/components/Chat/Menus/UI/MenuItem.tsx b/client/src/components/Chat/Menus/UI/MenuItem.tsx
@@ -32,7 +32,9 @@ const MenuItem: FC<MenuItemProps> = ({
 }) => {
   return (
     <div
-      role="menuitem"
+      id={selected ? 'selected-endpoint' : undefined}
+      role="option"
+      aria-selected={selected}
       aria-label={title}
       data-testid="chat-menu-item"
       className={cn(

diff --git a/client/src/components/Chat/Menus/UI/TitleButton.tsx b/client/src/components/Chat/Menus/UI/TitleButton.tsx
@@ -1,18 +1,22 @@
 import { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
 import { Trigger } from '@radix-ui/react-popover';
+import useLocalize from '~/hooks/useLocalize';
 
 export default function TitleButton({ primaryText = '', secondaryText = '' }) {
+  const localize = useLocalize();
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
     <Trigger asChild>
       <button
         className="group flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors duration-200 hover:bg-surface-hover radix-state-open:bg-surface-hover"
-        aria-label={`Select ${primaryText}`}
-        aria-haspopup="dialog"
+        aria-label={localize('com_ui_endpoint_menu')}
         aria-expanded={isExpanded}
-        aria-controls="radix-:r6:"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="llm-endpoint-menu"
+        aria-activedescendant={isExpanded ? 'selected-endpoint' : undefined}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div>

diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx
@@ -56,6 +56,8 @@ export const ErrorMessage = ({
   return (
     <Container message={message}>
       <div
+        role="alert"
+        aria-live="assertive"
         className={cn(
           'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
           className,

diff --git a/client/src/components/Nav/ExportConversation/ExportModal.tsx b/client/src/components/Nav/ExportConversation/ExportModal.tsx
@@ -9,10 +9,12 @@ export default function ExportModal({
   open,
   onOpenChange,
   conversation,
+  triggerRef,
 }: {
   open: boolean;
-  onOpenChange: (open: boolean) => void;
   conversation: TConversation | null;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLButtonElement>;
 }) {
   const localize = useLocalize();
 
@@ -31,6 +33,12 @@ export default function ExportModal({
     { value: 'csv', label: 'csv (.csv)' },
   ];
 
+  useEffect(() => {
+    if (!open && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open, triggerRef]);
+
   useEffect(() => {
     setFileName(filenamify(String(conversation?.title ?? 'file')));
     setType('screenshot');
@@ -61,7 +69,7 @@ export default function ExportModal({
   });
 
   return (
-    <OGDialog open={open} onOpenChange={onOpenChange}>
+    <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
       <OGDialogTemplate
         title={localize('com_nav_export_conversation')}
         className="max-w-full sm:max-w-2xl"

diff --git a/client/src/components/ui/OriginalDialog.tsx b/client/src/components/ui/OriginalDialog.tsx
@@ -3,7 +3,28 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { cn } from '~/utils';
 
-const Dialog = DialogPrimitive.Root;
+interface OGDialogProps extends DialogPrimitive.DialogProps {
+  triggerRef?: React.RefObject<HTMLButtonElement>;
+}
+
+const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
+  ({ children, triggerRef, onOpenChange, ...props }) => {
+    const handleOpenChange = (open: boolean) => {
+      if (!open && triggerRef?.current) {
+        setTimeout(() => {
+          triggerRef.current?.focus();
+        }, 0);
+      }
+      onOpenChange?.(open);
+    };
+
+    return (
+      <DialogPrimitive.Root {...props} onOpenChange={handleOpenChange}>
+        {children}
+      </DialogPrimitive.Root>
+    );
+  },
+);
 
 const DialogTrigger = DialogPrimitive.Trigger;
 

diff --git a/client/src/components/ui/Toast.tsx b/client/src/components/ui/Toast.tsx
@@ -26,7 +26,6 @@ export default function Toast() {
           className={`alert-root pointer-events-auto inline-flex flex-row gap-2 rounded-md border px-3 py-2 text-white ${
             severityClassName[toast.severity]
           }`}
-          role="alert"
         >
           {toast.showIcon && (
             <div className="mt-1 flex-shrink-0 flex-grow-0">