@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
50 lines (49 loc) • 1.84 kB
JavaScript
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { materialDesignSysPalette } from '../../../utils/materialDesign/palette';
import { chatClassNames } from '../../core/chatClassNames';
const BoxStyled = styled(Box)(({ theme }) => ({
marginTop: 8,
width: '100%',
backgroundColor: materialDesignSysPalette.surfaceBright,
position: 'relative',
'& a': {
width: 'inherit',
},
'& img': {
maxHeight: 'min(500px, 80dvh)',
objectFit: 'contain',
objectPosition: 'center',
width: 'inherit',
[theme.breakpoints.down('md')]: {
maxHeight: 'min(350px, 60dvh)',
}
},
}));
const MessageMarkdownImage = ({ rootClassName, ...props }) => {
const [size, setSize] = React.useState({ width: 0, height: 0 });
const [rejected, setRejected] = React.useState(false);
React.useEffect(() => {
const image = new Image();
image.src = props.src;
image.onload = () => {
setSize({ width: image.width, height: image.height });
};
image.onerror = () => {
setRejected(true);
};
image.onabort = () => {
setRejected(true);
};
}, [props.src]);
if (rejected)
return null;
return (React.createElement(BoxStyled, { className: rootClassName },
React.createElement("a", { href: props.src, "data-pswp-width": size.width, "data-pswp-height": size.height, target: "_blank", className: chatClassNames.markdownImage, style: {
lineHeight: 0,
display: 'block',
}, rel: "noreferrer" },
React.createElement("img", { ...props }))));
};
export default MessageMarkdownImage;