🖼️ 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
This commit is contained in:
Marco Beretta 2025-05-16 17:50:18 +02:00 committed by Danny Avila
parent 739b0d3012
commit c79ee32006
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
44 changed files with 1452 additions and 527 deletions

View file

@ -1,20 +1,67 @@
import { cn } from '~/utils/';
export default function Spinner({ className = 'm-auto', size = '1em' }) {
interface SpinnerProps {
className?: string;
size?: string | number;
color?: string;
bgOpacity?: number;
speed?: number;
}
export default function Spinner({
className = 'm-auto',
size = 20,
color = 'currentColor',
bgOpacity = 0.1,
speed = 0.75,
}: SpinnerProps) {
const cssVars = {
'--spinner-speed': `${speed}s`,
} as React.CSSProperties;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className={cn(className, 'spinner')}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn('animate-spin', className)}
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
style={cssVars}
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
<defs>
<style type="text/css">{`
.spinner {
transform-origin: center;
overflow: visible;
animation: spinner-rotate var(--spinner-speed) linear infinite;
}
@keyframes spinner-rotate {
to { transform: rotate(360deg); }
}
`}</style>
</defs>
<circle
cx="20"
cy="20"
r="14.5"
pathLength="100"
strokeWidth="5"
fill="none"
stroke={color}
strokeOpacity={bgOpacity}
/>
<circle
cx="20"
cy="20"
r="14.5"
pathLength="100"
strokeWidth="5"
fill="none"
stroke={color}
strokeDasharray="25 75"
strokeLinecap="round"
/>
</svg>
);
}