🖼️ feat: Tool Call and Loading UI Refresh, Image Resize Config (#7086)

* ✨ feat: Enhance Spinner component with customizable properties and improved animation

* 🔧 fix: Replace Loader with Spinner in RunCode component and update FilePreview to use Spinner for progress indication

* ✨ feat: Refactor icons in CodeProgress and CancelledIcon components; enhance animation and styling in ExecuteCode and ProgressText components

* ✨ feat: Refactor attachment handling in ExecuteCode component; replace individual attachment rendering with AttachmentGroup for improved structure

* ✨ feat: Refactor dialog components for improved accessibility and styling; integrate Skeleton loading state in Image component

* ✨ feat: Refactor ToolCall component to use ToolCallInfo for better structure; replace ToolPopover with AttachmentGroup; enhance ProgressText with error handling and improved UI elements

* 🔧 fix: Remove unnecessary whitespace in ProgressText

* 🔧 fix: Remove unnecessary margin from AgentFooter and AgentPanel components; clean up SidePanel imports

* ✨ feat: Enhance ToolCall and ToolCallInfo components with improved styling; update translations and add warning text color to Tailwind config

* 🔧 fix: Update import statement for useLocalize in ToolCallInfo component; fix: chatform transition

* ✨ feat: Refactor ToolCall and ToolCallInfo components for improved structure and styling; add optimized code block for better output display

* ✨ feat: Implement OpenAI image generation component; add progress tracking and localization for user feedback

* 🔧 fix: Adjust base duration values for image generation; optimize timing for quality settings

* chore: remove unnecessary space

* ✨ feat: Enhance OpenAI image generation with editing capabilities; update localization for progress feedback

* ✨ feat: Add download functionality to images; enhance DialogImage component with download button

* ✨ feat: Enhance image resizing functionality; support custom percentage and pixel dimensions in resizeImageBuffer

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

@@ -1,4 +1,8 @@
 import * as Popover from '@radix-ui/react-popover';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import CancelledIcon from './CancelledIcon';
+import FinishedIcon from './FinishedIcon';
+import { Spinner } from '~/components';
 import { cn } from '~/utils';
 
 const wrapperClass =
@@ -10,7 +14,7 @@ const Wrapper = ({ popover, children }: { popover: boolean; children: React.Reac
       <div className={wrapperClass}>
         <Popover.Trigger asChild>
           <div
-            className="progress-text-content absolute left-0 top-0 line-clamp-1 overflow-visible"
+            className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
             style={{ opacity: 1, transform: 'none' }}
             data-projection-id="78"
           >
@@ -24,7 +28,7 @@ const Wrapper = ({ popover, children }: { popover: boolean; children: React.Reac
   return (
     <div className={wrapperClass}>
       <div
-        className="progress-text-content absolute left-0 top-0 line-clamp-1 overflow-visible"
+        className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
         style={{ opacity: 1, transform: 'none' }}
         data-projection-id="78"
       >
@@ -43,6 +47,7 @@ export default function ProgressText({
   hasInput = true,
   popover = false,
   isExpanded = false,
+  error = false,
 }: {
   progress: number;
   onClick?: () => void;
@@ -52,33 +57,28 @@ export default function ProgressText({
   hasInput?: boolean;
   popover?: boolean;
   isExpanded?: boolean;
+  error?: boolean;
 }) {
   const text = progress < 1 ? (authText ?? inProgressText) : finishedText;
   return (
     <Wrapper popover={popover}>
       <button
         type="button"
-        className={cn('inline-flex items-center gap-1', hasInput ? '' : 'pointer-events-none')}
+        className={cn(
+          'inline-flex w-full items-center gap-2',
+          hasInput ? '' : 'pointer-events-none',
+        )}
         disabled={!hasInput}
-        onClick={onClick}
+        onClick={hasInput ? onClick : undefined}
       >
-        {text}
-        <svg
-          width="16"
-          height="17"
-          viewBox="0 0 16 17"
-          fill="none"
-          className={isExpanded ? 'rotate-180' : 'rotate-0'}
-        >
-          <path
-            className={hasInput ? '' : 'stroke-transparent'}
-            d="M11.3346 7.83203L8.00131 11.1654L4.66797 7.83203"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        {progress < 1 ? <Spinner /> : error ? <CancelledIcon /> : <FinishedIcon />}
+        <span className={`${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
+        {hasInput &&
+          (isExpanded ? (
+            <ChevronUp className="size-4 translate-y-[1px]" />
+          ) : (
+            <ChevronDown className="size-4 translate-y-[1px]" />
+          ))}
       </button>
     </Wrapper>
   );