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

🎨 refactor: Improve Mermaid Artifacts Styling (#9742)

Browse source 
* 🎨 refactor: Improve Mermaid Artifacts Styling

* refactor: Replace ArtifactMarkdown with MermaidMarkdown
This commit is contained in:
Danny Avila 2025-09-20 08:19:44 -04:00 • committed by GitHub
parent fcaf55143d
commit 0352067da2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 49 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/Artifacts/Artifacts.tsx
View file

@ -9,6 +9,7 @@ import { useEditorContext } from '~/Providers';
import ArtifactTabs from './ArtifactTabs';
import { CopyCodeButton } from './Code';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
import store from '~/store';
export default function Artifacts() {
@ -58,9 +59,10 @@ export default function Artifacts() {
<div className="flex h-full w-full items-center justify-center">
{/* Main Container */}
<div
className={`flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-500 ease-in-out ${
isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm'
}`}
className={cn(
`flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-500 ease-in-out`,
isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm',
)}
>
{/* Header */}
<div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
@ -74,16 +76,17 @@ export default function Artifacts() {
{/* Refresh button */}
{activeTab === 'preview' && (
<button
className={`mr-2 text-text-secondary transition-transform duration-500 ease-in-out ${
isRefreshing ? 'rotate-180' : ''
}`}
className={cn(
'mr-2 text-text-secondary transition-transform duration-500 ease-in-out',
isRefreshing ? 'rotate-180' : '',
)}
onClick={handleRefresh}
disabled={isRefreshing}
aria-label="Refresh"
>
<RefreshCw
size={16}
className={`transform ${isRefreshing ? 'animate-spin' : ''}`}
className={cn('transform', isRefreshing ? 'animate-spin' : '')}
/>
</button>
)}