Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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

Browse source 
* ✨ 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
Download patch file Download diff file Expand all files Collapse all files

72
client/src/components/Chat/Messages/Content/DialogImage.tsx
View file

@ -1,42 +1,42 @@
import * as Dialog from '@radix-ui/react-dialog';
import { X, ArrowDownToLine } from 'lucide-react';
import { Button, OGDialog, OGDialogContent } from '~/components';
export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
export default function DialogImage({ isOpen, onOpenChange, src = '', downloadImage }) {
return (
<Dialog.Portal>
<Dialog.Overlay
className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
style={{ pointerEvents: 'auto' }}
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
<OGDialogContent
showCloseButton={false}
className="h-full w-full rounded-none bg-transparent"
disableScroll={false}
overlayClassName="bg-surface-secondary"
>
<Dialog.Close asChild>
<button
className="absolute right-4 top-4 text-gray-50 transition hover:text-gray-200"
type="button"
<div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
<Button
onClick={() => onOpenChange(false)}
variant="ghost"
className="h-10 w-10 p-0 hover:bg-surface-hover"
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-5 w-5"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</Dialog.Close>
<Dialog.Content
className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none"
tabIndex={-1}
style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
>
<img src={src} alt="Uploaded image" className="h-full w-full object-contain" />
</Dialog.Content>
</Dialog.Overlay>
</Dialog.Portal>
<X className="size-6" />
</Button>
<Button onClick={() => downloadImage()} variant="ghost" className="h-10 w-10 p-0">
<ArrowDownToLine className="size-6" />
</Button>
</div>
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
<OGDialogContent
showCloseButton={false}
className="w-11/12 overflow-x-auto rounded-none bg-transparent p-4 shadow-none sm:w-auto"
disableScroll={false}
overlayClassName="bg-transparent"
>
<img
src={src}
alt="Uploaded image"
className="max-w-screen h-full max-h-screen w-full object-contain"
/>
</OGDialogContent>
</OGDialog>
</OGDialogContent>
</OGDialog>
);
}