mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 03:10:15 +01:00
Merge pull request #133 from HyunggyuJang/refactor/markdown
Use react markdown as default, cleanup dependencies
This commit is contained in:
Danny Avila
GitHub
commit
ee9419cb0b
18 changed files with 27 additions and 838 deletions
|
|
@ -8,7 +8,7 @@ import rehypeRaw from 'rehype-raw'
|
|||
import CodeBlock from './CodeBlock';
|
||||
import { langSubset } from '~/utils/languages';
|
||||
|
||||
const Content = React.memo(({ content, isCreatedByUser = true }) => {
|
||||
const Content = React.memo(({ content }) => {
|
||||
let rehypePlugins = [
|
||||
[rehypeKatex, { output: 'mathml' }],
|
||||
[
|
||||
|
|
@ -22,23 +22,19 @@ const Content = React.memo(({ content, isCreatedByUser = true }) => {
|
|||
[rehypeRaw],
|
||||
];
|
||||
|
||||
rehypePlugins = isCreatedByUser ? rehypePlugins.slice(0, -1) : rehypePlugins;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
|
||||
rehypePlugins={rehypePlugins}
|
||||
linkTarget="_new"
|
||||
components={{
|
||||
code,
|
||||
p,
|
||||
// em,
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
|
||||
rehypePlugins={rehypePlugins}
|
||||
linkTarget="_new"
|
||||
components={{
|
||||
code,
|
||||
p,
|
||||
// em,
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import Clipboard from '~/components/svg/Clipboard';
|
||||
import CheckMark from '~/components/svg/CheckMark';
|
||||
|
||||
const Embed = React.memo(({ children, lang = '', 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);
|
||||
};
|
||||
|
||||
return (
|
||||
<pre>
|
||||
<div className="mb-4 rounded-md bg-black">
|
||||
<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="">{lang === 'javascript' && !matched ? '' : lang}</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>
|
||||
</pre>
|
||||
);
|
||||
});
|
||||
|
||||
export default Embed;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import Highlighter from 'react-highlight';
|
||||
import hljs from 'highlight.js';
|
||||
import { languages } from '~/utils/languages';
|
||||
|
||||
const Highlight = React.memo(({ language, code }) => {
|
||||
const [highlightedCode, setHighlightedCode] = useState(code);
|
||||
const lang = languages.has(language) ? language : 'javascript';
|
||||
|
||||
useEffect(() => {
|
||||
setHighlightedCode(hljs.highlight(code, { language: lang }).value);
|
||||
}, [code, lang]);
|
||||
|
||||
return (
|
||||
<pre>
|
||||
{!highlightedCode ? (
|
||||
// <code className={`hljs !whitespace-pre language-${lang ? lang: 'javascript'}`}>
|
||||
<Highlighter className={`hljs !whitespace-pre language-${lang ? lang : 'javascript'}`}>
|
||||
{code}
|
||||
</Highlighter>
|
||||
) : (
|
||||
<code
|
||||
className={`hljs language-${lang}`}
|
||||
dangerouslySetInnerHTML={{ __html: highlightedCode }}
|
||||
/>
|
||||
)}
|
||||
</pre>
|
||||
);
|
||||
});
|
||||
|
||||
export default Highlight;
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function TabLink(a) {
|
||||
return (
|
||||
<a
|
||||
href={a.href}
|
||||
title={a.title}
|
||||
className={a.className}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{a.children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
import React from 'react';
|
||||
import TabLink from './TabLink';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import Embed from './Embed';
|
||||
import Highlight from './Highlight';
|
||||
import regexSplit from '~/utils/regexSplit';
|
||||
import { wrapperRegex } from '~/utils';
|
||||
const { codeRegex, inLineRegex, markupRegex, languageMatch, newLineMatch } = wrapperRegex;
|
||||
const mdOptions = {
|
||||
wrapper: React.Fragment,
|
||||
forceWrapper: true,
|
||||
overrides: {
|
||||
a: {
|
||||
component: TabLink,
|
||||
// props: {
|
||||
// className: 'foo'
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const inLineWrap = (parts) => {
|
||||
let previousElement = null;
|
||||
return parts.map((part, i) => {
|
||||
if (part.match(markupRegex)) {
|
||||
const codeElement = <code key={i}>{part.slice(1, -1)}</code>;
|
||||
if (previousElement && typeof previousElement !== 'string') {
|
||||
// Append code element as a child to previous non-code element
|
||||
previousElement = (
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
key={i}
|
||||
>
|
||||
{previousElement}
|
||||
{codeElement}
|
||||
</Markdown>
|
||||
);
|
||||
return previousElement;
|
||||
} else {
|
||||
return codeElement;
|
||||
}
|
||||
} else {
|
||||
previousElement = part;
|
||||
return previousElement;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function TextWrapper({ text, generateCursor }) {
|
||||
let embedTest = false;
|
||||
let result = null;
|
||||
|
||||
// to match unenclosed code blocks
|
||||
if (text.match(/```/g)?.length === 1) {
|
||||
embedTest = true;
|
||||
}
|
||||
|
||||
// match enclosed code blocks
|
||||
if (text.match(codeRegex)) {
|
||||
const parts = regexSplit(text);
|
||||
// console.log(parts);
|
||||
const codeParts = parts.map((part, i) => {
|
||||
if (part.match(codeRegex)) {
|
||||
let language = 'javascript';
|
||||
let matched = false;
|
||||
|
||||
if (part.match(languageMatch)) {
|
||||
language = part.match(languageMatch)[1].toLowerCase();
|
||||
part = part.replace(languageMatch, '```');
|
||||
matched = true;
|
||||
// highlight.js language validation
|
||||
// const validLanguage = languages.some((lang) => language === lang);
|
||||
// part = validLanguage ? part.replace(languageMatch, '```') : part;
|
||||
// language = validLanguage ? language : 'javascript';
|
||||
}
|
||||
|
||||
part = part.replace(newLineMatch, '```');
|
||||
|
||||
return (
|
||||
<Embed
|
||||
key={i}
|
||||
language={language}
|
||||
code={part.slice(3, -3)}
|
||||
matched={matched}
|
||||
>
|
||||
<Highlight
|
||||
language={language}
|
||||
code={part.slice(3, -3)}
|
||||
/>
|
||||
</Embed>
|
||||
);
|
||||
} else if (part.match(inLineRegex)) {
|
||||
const innerParts = part.split(inLineRegex);
|
||||
return inLineWrap(innerParts);
|
||||
} else {
|
||||
return (
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
key={i}
|
||||
>
|
||||
{part}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return <>{codeParts}</>; // return the wrapped text
|
||||
} else if (embedTest) {
|
||||
const language = text.match(/```(\w+)/)?.[1].toLowerCase() || 'javascript';
|
||||
const parts = text.split(text.match(/```(\w+)/)?.[0] || '```');
|
||||
const codeParts = parts.map((part, i) => {
|
||||
if (i === 1) {
|
||||
part = part.replace(/^\n+/, '');
|
||||
|
||||
return (
|
||||
<Embed
|
||||
key={i}
|
||||
language={language}
|
||||
>
|
||||
<Highlight
|
||||
code={part}
|
||||
language={language}
|
||||
/>
|
||||
</Embed>
|
||||
);
|
||||
} else if (part.match(inLineRegex)) {
|
||||
const innerParts = part.split(inLineRegex);
|
||||
return inLineWrap(innerParts);
|
||||
} else {
|
||||
return (
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
key={i}
|
||||
>
|
||||
{part}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// return <>{codeParts}</>; // return the wrapped text
|
||||
result = <>{codeParts}</>;
|
||||
} else if (text.match(markupRegex)) {
|
||||
// map over the parts and wrap any text between tildes with <code> tags
|
||||
const parts = text.split(markupRegex);
|
||||
const codeParts = inLineWrap(parts);
|
||||
// return <>{codeParts}</>; // return the wrapped text
|
||||
result = <>{codeParts}</>;
|
||||
} else {
|
||||
// return <Markdown options={mdOptions}>{text}</Markdown>;
|
||||
result = <Markdown options={mdOptions}>{text}</Markdown>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{result}
|
||||
{generateCursor()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(TextWrapper);
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import React from 'react';
|
||||
import TextWrapper from './TextWrapper';
|
||||
import Content from './Content';
|
||||
|
||||
const Wrapper = React.memo(({ text, generateCursor, isCreatedByUser, searchResult }) => {
|
||||
if (searchResult) {
|
||||
return (
|
||||
<Content
|
||||
content={text}
|
||||
isCreatedByUser={isCreatedByUser}
|
||||
/>
|
||||
);
|
||||
} else if (!isCreatedByUser) {
|
||||
return (
|
||||
<TextWrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
/>
|
||||
);
|
||||
} else if (isCreatedByUser) {
|
||||
return <>{text}</>;
|
||||
}
|
||||
});
|
||||
|
||||
export default Wrapper;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import SubRow from './Content/SubRow';
|
||||
import Wrapper from './Content/Wrapper';
|
||||
import Content from './Content/Content';
|
||||
import MultiMessage from './MultiMessage';
|
||||
import HoverButtons from './HoverButtons';
|
||||
import SiblingSwitch from './SiblingSwitch';
|
||||
|
|
@ -199,12 +199,17 @@ export default function Message({
|
|||
<div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words">
|
||||
<Wrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
isCreatedByUser={isCreatedByUser}
|
||||
searchResult={searchResult}
|
||||
/>
|
||||
{!isCreatedByUser ?
|
||||
<>
|
||||
<Content
|
||||
content={text}
|
||||
/>
|
||||
{generateCursor()}
|
||||
</> :
|
||||
<>
|
||||
{text}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue