🔧 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

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 />}
-        <span className={`${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
+        {icon}
+        <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}
             />
           )}
         />