File size: 2,675 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import React, { useState, useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import ReactMarkdown from 'react-markdown';
import rehypeKatex from 'rehype-katex';
import rehypeHighlight from 'rehype-highlight';
import remarkMath from 'remark-math';
import supersub from 'remark-supersub';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import CodeBlock from './CodeBlock';
import store from '~/store';
import { langSubset } from '~/utils/languages.mjs';
const code = React.memo((props) => {
const { inline, className, children } = props;
const match = /language-(\w+)/.exec(className || '');
const lang = match && match[1];
if (inline) {
return <code className={className}>{children}</code>;
} else {
return <CodeBlock lang={lang || 'text'} codeChildren={children} />;
}
});
const p = React.memo((props) => {
return <p className="mb-2 whitespace-pre-wrap">{props?.children}</p>;
});
const Content = React.memo(({ content, message }) => {
const [cursor, setCursor] = useState('█');
const isSubmitting = useRecoilValue(store.isSubmitting);
const latestMessage = useRecoilValue(store.latestMessage);
const isInitializing = content === '<span className="result-streaming">█</span>';
const isLatestMessage = message?.messageId === latestMessage?.messageId;
const currentContent = content?.replace('z-index: 1;', '') ?? '';
const isIFrame = currentContent.includes('<iframe');
useEffect(() => {
let timer1, timer2;
if (isSubmitting && isLatestMessage) {
timer1 = setInterval(() => {
setCursor('ㅤ');
timer2 = setTimeout(() => {
setCursor('█');
}, 200);
}, 1000);
} else {
setCursor('ㅤ');
}
// This is the cleanup function that React will run when the component unmounts
return () => {
clearInterval(timer1);
clearTimeout(timer2);
};
}, [isSubmitting, isLatestMessage]);
let rehypePlugins = [
[rehypeKatex, { output: 'mathml' }],
[
rehypeHighlight,
{
detect: true,
ignoreMissing: true,
subset: langSubset,
},
],
[rehypeRaw],
];
if ((!isInitializing || !isLatestMessage) && !isIFrame) {
rehypePlugins.pop();
}
return (
<ReactMarkdown
remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
rehypePlugins={rehypePlugins}
linkTarget="_new"
components={{
code,
p,
}}
>
{isLatestMessage && isSubmitting && !isInitializing
? currentContent + cursor
: currentContent}
</ReactMarkdown>
);
});
export default Content;
|