Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-06 02:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

trying different markdown library for proper list styling

Browse source
This commit is contained in:
Daniel Avila 2023-02-24 23:16:19 -05:00
parent 34ebd97c9d
commit 78c9f3dc74
8 changed files with 4352 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/Messages/TextWrapper.jsx
View file

@ -1,23 +1,14 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import supersub from 'remark-supersub'
// import ReactMarkdown from 'react-markdown';
// import supersub from 'remark-supersub'
import Markdown from 'markdown-to-jsx';
import Embed from './Embed';
import Highlight from './Highlight';
import regexSplit from '~/utils/regexSplit';
import { languages, wrapperRegex } from '~/utils';
const { codeRegex, inLineRegex, matchRegex, languageMatch, newLineMatch } = wrapperRegex;
const mdOptions = { wrapper: React.Fragment, forceWrapper: true };
// original function
// const inLineWrap = (parts) =>
// parts.map((part, i) => {
// if (part.match(matchRegex)) {
// return <code key={i} >{part.slice(1, -1)}</code>;
// } else {
// // return <p key={i}>{part}</p>;
// // return part;
// return part.includes('`') ? part : <ReactMarkdown key={i}>{part}</ReactMarkdown>;
// }
// });
const inLineWrap = (parts) => {
let previousElement = null;
@ -27,10 +18,11 @@ const inLineWrap = (parts) => {
if (previousElement && typeof previousElement !== 'string') {
// Append code element as a child to previous non-code element
previousElement = (
<ReactMarkdown remarkPlugins={[supersub]} key={i}>
// <ReactMarkdown remarkPlugins={[supersub]} key={i}>
<Markdown options={mdOptions} key={i}>
{previousElement}
{codeElement}
</ReactMarkdown>
</Markdown>
);
return previousElement;
} else {
@ -46,15 +38,11 @@ const inLineWrap = (parts) => {
export default function TextWrapper({ text }) {
// append triple backticks to the end of the text only if singular found and language found
if (text.match(/```/g)?.length === 1 && text.match(languageMatch)) {
text += '```';
text += '\n```';
}
if (text.match(codeRegex)) {
// if (text.includes('```')) {
// const parts = text.split(codeRegex);
const parts = regexSplit(text);
// console.log(parts);
const codeParts = parts.map((part, i) => {
if (part.match(codeRegex)) {
let language = 'javascript';
@ -84,15 +72,20 @@ export default function TextWrapper({ text }) {
return inLineWrap(innerParts);
} else {
// return part;
return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
// return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
return <Markdown options={mdOptions} key={i}>{part}</Markdown>
}
});
return <>{codeParts}</>; // return the wrapped text
} else {
} else if (text.match(matchRegex)) {
// map over the parts and wrap any text between tildes with <code> tags
const parts = text.split(matchRegex);
const codeParts = inLineWrap(parts);
return <>{codeParts}</>; // return the wrapped text
} else {
// return <ReactMarkdown remarkPlugins={[supersub]}>{text}</ReactMarkdown>;
// return text
return <Markdown options={mdOptions}>{text}</Markdown>;
}
}

83
src/components/main/TextChat.jsx
View file

@ -36,34 +36,63 @@ export default function TextChat({ messages }) {
const messageHandler = (data) => {
dispatch(setMessages([...messages, currentMsg, { sender: model, text: data }]));
};
const convoHandler = (data) => {
console.log('in convo handler');
if (model !== 'bingai' && convo.conversationId === null && convo.parentMessageId === null) {
const { title, conversationId, id } = data;
dispatch(
setConversation({
title,
conversationId,
parentMessageId: id,
conversationSignature: null,
clientId: null,
invocationId: null
})
);
} else if (model === 'bingai' && convo.conversationId === null && convo.invocationId === null) {
const { title, conversationSignature, clientId, conversationId, invocationId } = data;
dispatch(
setConversation({
title,
conversationSignature,
clientId,
conversationId,
invocationId,
parentMessageId: null
})
);
}
// const convoHandler = (data) => {
// dispatch(
// setMessages([...messages, { sender: model, text: data.text || data.response }])
// );
// if (
// model !== 'bingai' &&
// convo.conversationId === null &&
// convo.parentMessageId === null
// ) {
// const { title, conversationId, id } = data;
// dispatch(
// setConversation({
// title,
// conversationId,
// parentMessageId: id,
// conversationSignature: null,
// clientId: null,
// invocationId: null
// })
// );
// } else if (
// model === 'bingai' &&
// convo.conversationId === null &&
// convo.invocationId === null
// ) {
// const { title, conversationSignature, clientId, conversationId, invocationId } = data;
// dispatch(
// setConversation({
// title,
// conversationSignature,
// clientId,
// conversationId,
// invocationId,
// parentMessageId: null
// })
// );
// }
// dispatch(setSubmitState(false));
// };
const convoHandler = (data) => {
const { conversationId, id, invocationId, text } = data;
const conversationData = {
title: data.title,
conversationId,
parentMessageId:
model !== 'bingai' && !convo.conversationId && !convo.parentMessageId ? id : null,
conversationSignature:
model === 'bingai' && !convo.conversationId ? data.conversationSignature : null,
clientId: model === 'bingai' && !convo.conversationId ? data.clientId : null,
// invocationId: model === 'bingai' && !convo.conversationId ? data.invocationId : null
invocationId: invocationId ? invocationId : null
};
dispatch(setMessages([...messages, currentMsg, { sender: model, text: text || data.response }]));
dispatch(setConversation(conversationData));
dispatch(setSubmitState(false));
};