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

complete copyCode for code blocks

Browse source
This commit is contained in:
Danny Avila 2023-03-03 09:45:20 -05:00
parent ac2229fbb6
commit 92648554ad
3 changed files with 28 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/Messages/Embed.jsx
View file

@ -1,20 +1,34 @@
import React from 'react';
import React, { useState } from 'react';
import Clipboard from '../svg/Clipboard';
import CheckMark from '../svg/CheckMark';
export default function Embed({ children, language = '', code, matched }) {
const [buttonText, setButtonText] = useState('Copy code');
const isClicked = buttonText === 'Copy code';
const clickHandler = () => {
navigator.clipboard.writeText(code.trim());
setButtonText('Copied!');
setTimeout(() => {
setButtonText('Copy code');
}, 3000);
};
export default function Embed({ children, language = '', matched}) {
return (
<pre>
<div className="mb-4 rounded-md bg-black">
<div className="relative flex items-center bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200 rounded-tl-md rounded-tr-md">
<span className="">{ (language === 'javascript' && !matched ? '' : language) }</span>
<button className="ml-auto flex gap-2">
<Clipboard />
Copy code
<div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200">
<span className="">{language === 'javascript' && !matched ? '' : language}</span>
<button
className="ml-auto flex gap-2"
onClick={clickHandler}
disabled={!isClicked}
>
{isClicked ? <Clipboard /> : <CheckMark />}
{buttonText}
</button>
</div>
<div className="overflow-y-auto p-4">
{ children }
</div>
<div className="overflow-y-auto p-4">{children}</div>
</div>
</pre>
);