Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-10 12:38:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

📋 feat: Add Floating Copy Button to Code Blocks (#11113)
Some checks failed
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Has been cancelled
Details
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Has been cancelled
Details
Docker Dev Images Build / build (Dockerfile, librechat-dev, node) (push) Has been cancelled
Details
Docker Dev Images Build / build (Dockerfile.multi, librechat-dev-api, api-build) (push) Has been cancelled
Details
Sync Locize Translations & Create Translation PR / Sync Translation Keys with Locize (push) Has been cancelled
Details
Sync Locize Translations & Create Translation PR / Create Translation PR on Version Published (push) Has been cancelled
Details

Browse source 
* feat: Add MermaidErrorBoundary for handling rendering errors in Mermaid diagrams

* feat: Implement FloatingCodeBar for enhanced code block interaction and copy functionality

* feat: Add zoom-level bar copy functionality to Mermaid component

* feat: Enhance button styles in FloatingCodeBar and RunCode components for improved user interaction

* refactor: copy button rendering in CodeBar and FloatingCodeBar for improved accessibility and clarity

* chore: linting

* chore: import order
This commit is contained in:
Danny Avila 2025-12-26 20:56:06 -05:00 • committed by GitHub
parent 3503b7caeb
commit daed6d9c0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 244 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/Chat/Messages/Content/MarkdownComponents.tsx
View file

@ -2,6 +2,7 @@ import React, { memo, useMemo, useRef, useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { useToastContext } from '@librechat/client';
import { PermissionTypes, Permissions, apiBaseUrl } from 'librechat-data-provider';
import MermaidErrorBoundary from '~/components/Messages/Content/MermaidErrorBoundary';
import CodeBlock from '~/components/Messages/Content/CodeBlock';
import Mermaid from '~/components/Messages/Content/Mermaid';
import useHasAccess from '~/hooks/Roles/useHasAccess';
@ -39,7 +40,11 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
return <>{children}</>;
} else if (isMermaid) {
const content = typeof children === 'string' ? children : String(children);
return <Mermaid id={`mermaid-${blockIndex}`}>{content}</Mermaid>;
return (
<MermaidErrorBoundary code={content}>
<Mermaid id={`mermaid-${blockIndex}`}>{content}</Mermaid>
</MermaidErrorBoundary>
);
} else if (isSingleLine) {
return (
<code onDoubleClick={handleDoubleClick} className={className}>