@plteam/chat-ui/dist/views/message/markdown/MessageMarkdownCodeWrapper.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import { styled } from '@mui/material/styles';
import { materialDesignSysPalette } from './../../../utils/materialDesign/palette';
import Stack from '@mui/material/Stack';
import { useChatCoreSlots } from '../../../views/core/ChatSlotsContext';
import Typography from '@mui/material/Typography';
import { ContentCopyIcon } from '../../../icons';
import { useLocalizationContext } from '../../../views/core/LocalizationContext';
import { useChatContext } from '../../../views/core/ChatGlobalContext';
import { Prism } from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
const PreStyled = styled('pre')(() => ({
    '&&& div:first-child': {
        flexDirection: 'row',
    }
}));
const PrismStyled = styled(Prism)(() => ({
    maxHeight: 700,
    marginTop: '0 !important',
    borderRadius: '0 0 4px 4px !important',
}));
const MenuBar = styled(Stack)(() => ({
    backgroundColor: materialDesignSysPalette.surfaceContainerLow,
    borderRadius: '4px 4px 0 0',
}));
const MessageMarkdownCodeWrapper = ({ children, ...other }) => {
    const [codeText, setCodeText] = React.useState('');
    const coreSlots = useChatCoreSlots();
    const locale = useLocalizationContext();
    const { snackbar } = useChatContext();
    const childrenProps = React.useMemo(() => React.Children.map(children, element => {
        if (!React.isValidElement(element))
            return;
        return element.props;
    }), [children]);
    React.useEffect(() => {
        setCodeText(childrenProps?.[0]?.children || '');
    }, [children]);
    const codeLang = React.useMemo(() => {
        return (childrenProps?.[0]?.className ?? '')
            .split(' ')
            .filter(c => c.startsWith('lang-'))[0] || ''
            .replace('lang-', '');
    }, [childrenProps]);
    const handleCopy = () => {
        navigator.clipboard.writeText(codeText)
            .then(() => snackbar.show(locale.messageCopiedToClipboard, 'info'));
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(PreStyled, { ...other },
            React.createElement(MenuBar, { flexDirection: "row", padding: 1, alignItems: "center", justifyContent: "space-between" },
                React.createElement(Typography, null, codeLang),
                React.createElement(Stack, { flexDirection: "row", gap: 1 },
                    React.createElement(coreSlots.button, { size: 'small', startIcon: React.createElement(ContentCopyIcon, null), onClick: handleCopy }, locale.codeCopyButton))),
            React.createElement(PrismStyled, { showLineNumbers: true, language: codeLang, style: dracula, PreTag: "div" }, codeText))));
};
export default MessageMarkdownCodeWrapper;