🖼️ 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/ToolCallInfo.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useLocalize } from '~/hooks';
+
+function OptimizedCodeBlock({ text, maxHeight = 320 }: { text: string; maxHeight?: number }) {
+  return (
+    <div
+      className="rounded-lg bg-surface-tertiary p-2 text-xs text-text-primary"
+      style={{
+        position: 'relative',
+        maxHeight,
+        overflow: 'auto',
+      }}
+    >
+      <pre className="m-0 whitespace-pre-wrap break-words" style={{ overflowWrap: 'break-word' }}>
+        <code>{text}</code>
+      </pre>
+    </div>
+  );
+}
+
+export default function ToolCallInfo({
+  input,
+  output,
+  domain,
+  function_name,
+  pendingAuth,
+}: {
+  input: string;
+  function_name: string;
+  output?: string | null;
+  domain?: string;
+  pendingAuth?: boolean;
+}) {
+  const localize = useLocalize();
+  const formatText = (text: string) => {
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      return text;
+    }
+  };
+
+  let title =
+    domain != null && domain
+      ? localize('com_assistants_domain_info', { 0: domain })
+      : localize('com_assistants_function_use', { 0: function_name });
+  if (pendingAuth === true) {
+    title =
+      domain != null && domain
+        ? localize('com_assistants_action_attempt', { 0: domain })
+        : localize('com_assistants_attempt_info');
+  }
+
+  return (
+    <div className="w-full p-2">
+      <div style={{ opacity: 1 }}>
+        <div className="mb-2 text-sm font-medium text-text-primary">{title}</div>
+        <div>
+          <OptimizedCodeBlock text={formatText(input)} maxHeight={250} />
+        </div>
+        {output && (
+          <>
+            <div className="my-2 text-sm font-medium text-text-primary">
+              {localize('com_ui_result')}
+            </div>
+            <div>
+              <OptimizedCodeBlock text={formatText(output)} maxHeight={250} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}