mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
wrap code in progress, revert old message handling
This commit is contained in:
Daniel Avila
parent
0f6fcd5928
commit
ed699d2c06
6 changed files with 121 additions and 1438 deletions
1361
package-lock.json
generated
1361
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -41,7 +41,6 @@
|
|||
"openai": "^3.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^8.0.5",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-textarea-autosize": "^8.4.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
import React from 'react';
|
||||
// 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 { codeRegex, inLineRegex, markupRegex, languageMatch, newLineMatch } = wrapperRegex;
|
||||
const mdOptions = { wrapper: React.Fragment, forceWrapper: true };
|
||||
|
||||
|
||||
const inLineWrap = (parts) => {
|
||||
let previousElement = null;
|
||||
return parts.map((part, i) => {
|
||||
if (part.match(matchRegex)) {
|
||||
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 = (
|
||||
// <ReactMarkdown remarkPlugins={[supersub]} key={i}>
|
||||
<Markdown options={mdOptions} key={i}>
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
key={i}
|
||||
>
|
||||
{previousElement}
|
||||
{codeElement}
|
||||
</Markdown>
|
||||
|
|
@ -36,11 +35,17 @@ 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 += '\n```';
|
||||
let embedTest = false;
|
||||
|
||||
// to match unenclosed code blocks
|
||||
// if (text.match(/```/g)?.length === 1 && text.match(/```(\w+)/)) {
|
||||
if (text.match(/```/g)?.length === 1) {
|
||||
// const splitString = text.split('```')[1].split(/\s+/).slice(1).join('').trim();
|
||||
// embedTest = splitString.length > 0;
|
||||
embedTest = true;
|
||||
}
|
||||
|
||||
// match enclosed code blocks
|
||||
if (text.match(codeRegex)) {
|
||||
const parts = regexSplit(text);
|
||||
const codeParts = parts.map((part, i) => {
|
||||
|
|
@ -71,21 +76,58 @@ export default function TextWrapper({ text }) {
|
|||
const innerParts = part.split(inLineRegex);
|
||||
return inLineWrap(innerParts);
|
||||
} else {
|
||||
// return part;
|
||||
// return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
|
||||
return <Markdown options={mdOptions} key={i}>{part}</Markdown>
|
||||
return (
|
||||
<Markdown
|
||||
options={mdOptions}
|
||||
key={i}
|
||||
>
|
||||
{part}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return <>{codeParts}</>; // return the wrapped text
|
||||
} else if (text.match(matchRegex)) {
|
||||
} else if (embedTest) {
|
||||
const language = text.match(/```(\w+)/)[1].toLowerCase();
|
||||
const parts = text.split(text.match(/```(\w+)/)[0]);
|
||||
const codeParts = parts.map((part, i) => {
|
||||
if (i === 1) {
|
||||
part = part.replace(newLineMatch, '```');
|
||||
|
||||
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
|
||||
} else if (text.match(markupRegex)) {
|
||||
// map over the parts and wrap any text between tildes with <code> tags
|
||||
const parts = text.split(matchRegex);
|
||||
const parts = text.split(markupRegex);
|
||||
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>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,66 +36,66 @@ export default function TextChat({ messages }) {
|
|||
const messageHandler = (data) => {
|
||||
dispatch(setMessages([...messages, currentMsg, { sender: model, text: data }]));
|
||||
};
|
||||
// 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(
|
||||
setMessages([...messages, currentMsg, { 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 } = 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: data.text || data.response }]));
|
||||
// dispatch(setConversation(conversationData));
|
||||
// dispatch(setSubmitState(false));
|
||||
// };
|
||||
|
||||
const errorHandler = (event) => {
|
||||
console.log('Error:', event);
|
||||
const errorResponse = {
|
||||
|
|
|
|||
|
|
@ -44,10 +44,13 @@ export default function handleSubmit({
|
|||
let text = data.text || data.response;
|
||||
if (data.message) {
|
||||
messageHandler(text);
|
||||
} else if (data.final) {
|
||||
}
|
||||
|
||||
if (data.final) {
|
||||
convoHandler(data);
|
||||
console.log('final', data);
|
||||
} else {
|
||||
console.log('initial', data);
|
||||
console.log('dataStream', data);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const languages = [
|
|||
export const wrapperRegex = {
|
||||
codeRegex: /(```[\s\S]*?```)/g,
|
||||
inLineRegex: /(`[^`]+?`)/g,
|
||||
matchRegex: /(`[^`]+?`)/g,
|
||||
markupRegex: /(`[^`]+?`)/g,
|
||||
languageMatch: /^```(\w+)/,
|
||||
newLineMatch: /^```(\n+)/
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue