mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-27 21:58:51 +01:00
b8b1217c34
* ✨ feat: Enhance Artifact Management with Version Control and UI Improvements ✨ feat: Improve mobile layout and responsiveness in Artifacts component ✨ feat: Refactor imports and remove unnecessary props in Artifact components ✨ feat: Enhance Artifacts and SidePanel components with improved mobile responsiveness and layout transitions feat: Enhance artifact panel animations and improve UI responsiveness - Updated Thinking component button styles for smoother transitions. - Implemented dynamic rendering for artifacts panel with animation effects. - Refactored localization keys for consistency across multiple languages. - Added new CSS animations for iOS-inspired smooth transitions. - Improved Tailwind CSS configuration to support enhanced animation effects. ✨ feat: Add fullWidth and icon support to Radio component for enhanced flexibility refactor: Remove unused PreviewProps import in ArtifactPreview component refactor: Improve button class handling and blur effect constants in Artifact components ✨ feat: Refactor Artifacts component structure and add mobile/desktop variants for improved UI chore: Bump @librechat/client version to 0.3.2 refactor: Update button styles and transition durations for improved UI responsiveness refactor: revert back localization key refactor: remove unused scaling and animation properties for cleaner CSS refactor: remove unused animation properties for cleaner configuration * ✨ refactor: Simplify className usage in ArtifactTabs, ArtifactsHeader, and SidePanelGroup components * refactor: Remove cycleArtifact function from useArtifacts hook * ✨ feat: Implement Chromium resize lag fix with performance optimizations and new ArtifactsPanel component * ✨ feat: Update Badge component for responsive design and improve tap scaling behavior * chore: Update react-resizable-panels dependency to version 3.0.6 * ✨ feat: Refactor Artifacts components for improved structure and performance; remove unused files and optimize styles * ✨ style: Update text color for improved visibility in Artifacts component * ✨ style: Remove text color class for improved Spinner styling in Artifacts component * refactor: Split EditorContext into MutationContext and CodeContext to optimize re-renders; update related components to use new hooks * refactor: Optimize debounced mutation handling in CodeEditor component using refs to maintain current values and reduce re-renders * fix: Correct endpoint for message artifacts by changing URL segment from 'artifacts' to 'artifact' * feat: Enhance useEditArtifact mutation with optimistic updates and rollback on error; improve type safety with context management * fix: proper switch to preview as soon as artifact becomes enclosed * refactor: Remove optimistic updates from useEditArtifact mutation to prevent errors; simplify onMutate logic * test: Add comprehensive unit tests for useArtifacts hook to validate artifact handling, tab switching, and state management * test: Enhance unit tests for useArtifacts hook to cover new conversation transitions and null message handling --------- Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
import { GripVertical } from 'lucide-react';
|
|
import * as ResizablePrimitive from 'react-resizable-panels';
|
|
|
|
import { cn } from '~/utils';
|
|
|
|
const ResizablePanelGroup = ({
|
|
className = '',
|
|
...props
|
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
|
<ResizablePrimitive.PanelGroup
|
|
className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
const ResizablePanel = ResizablePrimitive.Panel;
|
|
|
|
const ResizableHandle = ({
|
|
withHandle,
|
|
className = '',
|
|
...props
|
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
|
withHandle?: boolean;
|
|
}) => (
|
|
<ResizablePrimitive.PanelResizeHandle
|
|
className={cn(
|
|
'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{withHandle && (
|
|
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
|
<GripVertical className="h-2.5 w-2.5" />
|
|
</div>
|
|
)}
|
|
</ResizablePrimitive.PanelResizeHandle>
|
|
);
|
|
|
|
const ResizableHandleAlt = ({
|
|
withHandle,
|
|
className = '',
|
|
...props
|
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
|
withHandle?: boolean;
|
|
}) => (
|
|
<ResizablePrimitive.PanelResizeHandle
|
|
className={cn(
|
|
'group relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{withHandle && (
|
|
<div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border group-hover:visible group-active:visible group-data-[resize-handle-active]:visible">
|
|
<GripVertical className="h-2.5 w-2.5" />
|
|
</div>
|
|
)}
|
|
</ResizablePrimitive.PanelResizeHandle>
|
|
);
|
|
|
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle, ResizableHandleAlt };
|