mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-14 22:48:52 +01:00
c79ee32006
* ✨ 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
67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
import { cn } from '~/utils/';
|
|
|
|
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
|
|
className={cn(className, 'spinner')}
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 40 40"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={cssVars}
|
|
>
|
|
<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>
|
|
);
|
|
}
|