@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
40 lines (39 loc) • 1.91 kB
JavaScript
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { v4 as uuid } from 'uuid';
import MessageMarkdown from './MessageMarkdown';
import clsx from 'clsx';
import { chatClassNames } from '../../core/chatClassNames';
import { useChatContext } from '../../core/ChatGlobalContext';
import { useResolvedSpeed } from '../../core/useResolvedSpeed';
export const ChatMarkdownBlockRoot = styled(Box)(({ theme }) => ({
...theme.typography.body2,
width: '100%',
wordWrap: 'break-word',
'& ol, p, ul': {
margin: 0,
},
'& div:first-child': {
display: 'flex',
flexDirection: 'column',
gap: 16,
},
'& code': {
whiteSpace: 'pre-line',
},
'& table': {
borderCollapse: 'collapse',
},
}));
const MessageMarkdownBlock = ({ text, messageId, inProgress, ...otherProps }) => {
const { processAssistantText, customMarkdownComponents } = useChatContext();
const { typing: typingSpeed, stagger } = useResolvedSpeed();
// Prefix with `md-` so the DOM id never starts with a digit (invalid for CSS selectors).
// Empty deps: keep the id stable for the component's lifetime — the message id can
// change mid-stream, and re-generating the id would break the DOM node.
const markdownId = React.useMemo(() => `md-${messageId}-${uuid()}`, []);
return (React.createElement(otherProps.rootComponent, { ...otherProps.rootComponentProps, className: clsx(otherProps.rootComponentProps?.className, chatClassNames.markdownParentRoot), id: markdownId },
React.createElement(MessageMarkdown, { inProgress: inProgress, text: text, processAssistantText: processAssistantText, customMarkdownComponents: customMarkdownComponents, stagger: stagger, typingSpeed: typingSpeed })));
};
export default MessageMarkdownBlock;