🔧 fix: Dev Deployment, Mistral OCR Error, and UI Consistency (#7668)

* 🔧 fix: Update ProgressText and ToolCall components for improved error handling and localization

* 🔧 chore: Format ESLint configuration for improved readability and remove unused rule

* 🔧 refactor: Simplify ProgressText component logic for better readability and maintainability

* 🔧 refactor: Update ProgressText and ToolCall components for improved layout consistency

* 🔧 refactor: Simplify icon rendering in TTS components and enhance button rendering logic in HoverButtons

* 🔧 refactor: Update placeholder logic in VariableForm component to simply use variable name

* fix: .docx. .pptx Mistral OCR Error with `image_limit=0`

* chore: Update deploy workflow to include conditions for successful dev branch deployment and streamline deployment steps

* ci: Set image_limit to 0 in MistralOCR service tests for consistent behavior

.github/workflows/deploy-dev.yml

@@ -12,7 +12,8 @@ jobs:
     runs-on: ubuntu-latest
     if: |
       github.repository == 'danny-avila/LibreChat' &&
-      (github.event_name == 'workflow_dispatch' || github.event.workflow_run.conclusion == 'success')
+      (github.event_name == 'workflow_dispatch' || 
+       (github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_branch == 'dev'))
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
@@ -32,9 +33,13 @@ jobs:
         sudo -i -u danny bash << EEOF
         cd ~/LibreChat && \
         git fetch origin main && \
+        npm run stop:deployed && \
+        docker images -a | grep "librechat" | awk '{print \$3}' | xargs docker rmi && \
         npm run update:deployed && \
+        git checkout dev && \
+        git pull origin dev && \
         git checkout do-deploy && \
-        git rebase main && \
+        git rebase dev && \
         npm run start:deployed && \
         echo "Update completed. Application should be running now."
         EEOF

api/server/services/Files/MistralOCR/crud.js

@@ -92,6 +92,7 @@ async function performOCR({
       `${baseURL}/ocr`,
       {
         model,
+        image_limit: 0,
         include_image_base64: false,
         document: {
           type: documentType,

api/server/services/Files/MistralOCR/crud.spec.js

@@ -186,6 +186,7 @@ describe('MistralOCR Service', () => {
         {
           model: 'mistral-ocr-latest',
           include_image_base64: false,
+          image_limit: 0,
           document: {
             type: 'document_url',
             document_url: 'https://document-url.com',
@@ -221,6 +222,7 @@ describe('MistralOCR Service', () => {
         {
           model: 'mistral-ocr-latest',
           include_image_base64: false,
+          image_limit: 0,
           document: {
             type: 'image_url',
             image_url: 'https://image-url.com/image.png',

client/src/components/Audio/TTS.tsx

@@ -25,16 +25,16 @@ export function BrowserTTS({
     content,
   });
 
-  const renderIcon = (size: string) => {
+  const renderIcon = () => {
     if (isLoading === true) {
-      return <Spinner size={size} />;
+      return <Spinner className="icon-md-heavy h-[18px] w-[18px]" />;
     }
 
     if (isSpeaking === true) {
-      return <VolumeMuteIcon size={size} />;
+      return <VolumeMuteIcon className="icon-md-heavy h-[18px] w-[18px]" />;
     }
 
-    return <VolumeIcon size={size} />;
+    return <VolumeIcon className="icon-md-heavy h-[18px] w-[18px]" />;
   };
 
   useEffect(() => {
@@ -68,13 +68,13 @@ export function BrowserTTS({
         renderButton({
           onClick: handleClick,
           title: title,
-          icon: renderIcon('19'),
+          icon: renderIcon(),
           isActive: isSpeaking,
           className,
         })
       ) : (
         <button className={className} onClickCapture={handleClick} type="button" title={title}>
-          {renderIcon('19')}
+          {renderIcon()}
         </button>
       )}
       <audio
@@ -100,7 +100,14 @@ export function BrowserTTS({
   );
 }
 
-export function ExternalTTS({ isLast, index, messageId, content, className }: TMessageAudio) {
+export function ExternalTTS({
+  isLast,
+  index,
+  messageId,
+  content,
+  className,
+  renderButton,
+}: TMessageAudio) {
   const localize = useLocalize();
   const playbackRate = useRecoilValue(store.playbackRate);
 
@@ -111,16 +118,16 @@ export function ExternalTTS({ isLast, index, messageId, content, className }: TM
     content,
   });
 
-  const renderIcon = (size: string) => {
+  const renderIcon = () => {
     if (isLoading === true) {
-      return <Spinner size={size} />;
+      return <Spinner className="icon-md-heavy h-[18px] w-[18px]" />;
     }
 
     if (isSpeaking === true) {
-      return <VolumeMuteIcon size={size} />;
+      return <VolumeMuteIcon className="icon-md-heavy h-[18px] w-[18px]" />;
     }
 
-    return <VolumeIcon size={size} />;
+    return <VolumeIcon className="icon-md-heavy h-[18px] w-[18px]" />;
   };
 
   useEffect(() => {
@@ -141,8 +148,21 @@ export function ExternalTTS({ isLast, index, messageId, content, className }: TM
 
   return (
     <>
+      {renderButton ? (
+        renderButton({
+          onClick: () => {
+            if (audioRef.current) {
+              audioRef.current.muted = false;
+            }
+            toggleSpeech();
+          },
+          title: isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud'),
+          icon: renderIcon(),
+          isActive: isSpeaking,
+          className,
+        })
+      ) : (
         <button
-        className={className}
           onClickCapture={() => {
             if (audioRef.current) {
               audioRef.current.muted = false;
@@ -152,8 +172,9 @@ export function ExternalTTS({ isLast, index, messageId, content, className }: TM
           type="button"
           title={isSpeaking === true ? localize('com_ui_stop') : localize('com_ui_read_aloud')}
         >
-        {renderIcon('19')}
+          {renderIcon()}
         </button>
+      )}
       <audio
         ref={audioRef}
         controls

client/src/components/Chat/Messages/Content/ProgressText.tsx

@@ -59,7 +59,30 @@ export default function ProgressText({
   isExpanded?: boolean;
   error?: boolean;
 }) {
-  const text = progress < 1 ? (authText ?? inProgressText) : finishedText;
+  const getText = () => {
+    if (error) {
+      return finishedText;
+    }
+    if (progress < 1) {
+      return authText ?? inProgressText;
+    }
+    return finishedText;
+  };
+
+  const getIcon = () => {
+    if (error) {
+      return <CancelledIcon />;
+    }
+    if (progress < 1) {
+      return <Spinner />;
+    }
+    return <FinishedIcon />;
+  };
+
+  const text = getText();
+  const icon = getIcon();
+  const showShimmer = progress < 1 && !error;
+
   return (
     <Wrapper popover={popover}>
       <button
@@ -71,13 +94,13 @@ export default function ProgressText({
         disabled={!hasInput}
         onClick={hasInput ? onClick : undefined}
       >
-        {progress < 1 ? <Spinner /> : error ? <CancelledIcon /> : <FinishedIcon />}
+        {icon}
-        <span className={`${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
+        <span className={showShimmer ? 'shimmer' : ''}>{text}</span>
         {hasInput &&
           (isExpanded ? (
-            <ChevronUp className="size-4 translate-y-[1px]" />
+            <ChevronUp className="size-4 shrink-0 translate-y-[1px]" />
           ) : (
-            <ChevronDown className="size-4 translate-y-[1px]" />
+            <ChevronDown className="size-4 shrink-0 translate-y-[1px]" />
           ))}
       </button>
     </Wrapper>

client/src/components/Chat/Messages/Content/ToolCall.tsx

@@ -97,7 +97,7 @@ export default function ToolCall({
 
   const getFinishedText = () => {
     if (cancelled) {
-      return localize('com_ui_error');
+      return localize('com_ui_cancelled');
     }
     if (isMCPToolCall === true) {
       return localize('com_assistants_completed_function', { 0: function_name });
@@ -153,7 +153,7 @@ export default function ToolCall({
 
   return (
     <>
-      <div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
+      <div className="relative my-2.5 flex h-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={() => setShowInfo((prev) => !prev)}

client/src/components/Chat/Messages/HoverButtons.tsx

@@ -162,18 +162,6 @@ const HoverButtons = ({
 
   const { isCreatedByUser, error } = message;
 
-  const buttonStyle = cn(
-    'hover-button rounded-lg p-1.5',
-    'hover:bg-gray-100 hover:text-gray-500',
-    'dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200',
-    'disabled:dark:hover:text-gray-400',
-    'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible',
-    !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100',
-    'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
-    'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700',
-  );
-
-  // If message has an error, only show regenerate button
   if (error === true) {
     return (
       <div className="visible flex justify-center self-end lg:justify-start">
@@ -204,9 +192,9 @@ const HoverButtons = ({
       {TextToSpeech && (
         <MessageAudio
           index={index}
+          isLast={isLast}
           messageId={message.messageId}
           content={extractMessageContent(message)}
-          isLast={isLast}
           renderButton={(props) => (
             <HoverButton
               onClick={props.onClick}
@@ -214,7 +202,6 @@ const HoverButtons = ({
               icon={props.icon}
               isActive={props.isActive}
               isLast={isLast}
-              className={props.className}
             />
           )}
         />

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -168,7 +168,7 @@ export default function VariableForm({
                     return (
                       <InputCombobox
                         options={field.config.options || []}
-                        placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
+                        placeholder={field.config.variable}
                         className={cn(
                           defaultTextProps,
                           'rounded px-3 py-2 focus:bg-surface-tertiary',
@@ -191,7 +191,7 @@ export default function VariableForm({
                         defaultTextProps,
                         'rounded px-3 py-2 focus:bg-surface-tertiary',
                       )}
-                      placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
+                      placeholder={field.config.variable}
                       maxRows={8}
                     />
                   );

client/src/locales/en/translation.json

@@ -594,6 +594,7 @@
   "com_ui_bulk_delete_error": "Failed to delete shared links",
   "com_ui_callback_url": "Callback URL",
   "com_ui_cancel": "Cancel",
+  "com_ui_cancelled": "Cancelled",
   "com_ui_category": "Category",
   "com_ui_chat": "Chat",
   "com_ui_chat_history": "Chat History",
@@ -684,7 +685,6 @@
   "com_ui_enter": "Enter",
   "com_ui_enter_api_key": "Enter API Key",
   "com_ui_enter_openapi_schema": "Enter your OpenAPI schema here",
-  "com_ui_enter_var": "Enter {{0}}",
   "com_ui_error": "Error",
   "com_ui_error_connection": "Error connecting to server, try refreshing the page.",
   "com_ui_error_save_admin_settings": "There was an error saving your admin settings.",

eslint.config.mjs

@@ -188,7 +188,12 @@ export default [
     },
   },
   {
-    files: ['client/src/**/*.tsx', 'client/src/**/*.ts', 'client/src/**/*.jsx', 'client/src/**/*.js'],
+    files: [
+      'client/src/**/*.tsx',
+      'client/src/**/*.ts',
+      'client/src/**/*.jsx',
+      'client/src/**/*.js',
+    ],
     rules: {
       // Client a11y
       // TODO: maybe later to error.
@@ -285,7 +290,6 @@ export default [
       // General
       'no-constant-binary-expression': 'off',
       'import/no-cycle': 'off',
-      'no-nested-ternary': 'off',
     },
   },
   {