Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: support resubmit.

Browse source 
TODO: basic implementation. should add multi-path record in future.

feat: add deleteMessahesSince
feat: saveMessage will do createOrSave
feat: reorginazed submission
This commit is contained in:
Wentao Lyu 2023-03-13 05:26:17 +08:00
parent b9975ac283
commit bdfc895800
10 changed files with 189 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

23
api/models/Message.js
View file

@ -42,21 +42,32 @@ const messageSchema = mongoose.Schema({
const Message = mongoose.models.Message || mongoose.model('Message', messageSchema);
module.exports = {
saveMessage: async ({ id, conversationId, parentMessageId, sender, text }) => {
saveMessage: async ({ id, conversationId, parentMessageId, sender, text, isCreatedByUser=false }) => {
try {
await Message.create({
id,
await Message.findOneAndUpdate({ id }, {
conversationId,
parentMessageId,
sender,
text
});
return { id, conversationId, parentMessageId, sender, text };
text,
isCreatedByUser
}, { upsert: true, new: true });
return { id, conversationId, parentMessageId, sender, text, isCreatedByUser };
} catch (error) {
console.error(error);
return { message: 'Error saving message' };
}
},
deleteMessagesSince: async ({ id, conversationId }) => {
try {
message = await Message.findOne({ id }).exec()
if (message)
return await Message.find({ conversationId }).deleteMany({ createdAt: { $gt: message.createdAt } }).exec();
} catch (error) {
console.error(error);
return { message: 'Error deleting messages' };
}
},
getMessages: async (filter) => {
try {
return await Message.find(filter).sort({createdAt: 1}).exec()

3
api/models/index.js
View file

@ -1,9 +1,10 @@
const { saveMessage, deleteMessages } = require('./Message');
const { saveMessage, deleteMessagesSince, deleteMessages } = require('./Message');
const { getCustomGpts, updateCustomGpt, updateByLabel, deleteCustomGpts } = require('./CustomGpt');
const { getConvoTitle, getConvo, saveConvo } = require('./Conversation');
module.exports = {
saveMessage,
deleteMessagesSince,
deleteMessages,
getConvoTitle,
getConvo,

14
api/server/routes/ask.js
View file

@ -10,20 +10,20 @@ const {
customClient,
detectCode
} = require('../../app/');
const { getConvo, saveMessage, deleteMessages, saveConvo } = require('../../models');
const { getConvo, saveMessage, deleteMessagesSince, deleteMessages, saveConvo } = require('../../models');
const { handleError, sendMessage } = require('./handlers');
router.use('/bing', askBing);
router.use('/sydney', askSydney);
router.post('/', async (req, res) => {
let { model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
let { id, model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
if (text.length === 0) {
return handleError(res, 'Prompt empty or too short');
}
const userMessageId = crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text };
const userMessageId = id || crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text, parentMessageId, conversationId, isCreatedByUser: true };
console.log('ask log', {
model,
@ -53,6 +53,12 @@ router.post('/', async (req, res) => {
}
}
if (id) {
// existing conversation
await saveMessage(userMessage);
await deleteMessagesSince(userMessage);
} else {}
res.writeHead(200, {
Connection: 'keep-alive',
'Content-Type': 'text/event-stream',

14
api/server/routes/askBing.js
View file

@ -2,21 +2,27 @@ const express = require('express');
const crypto = require('crypto');
const router = express.Router();
const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
const { saveMessage, deleteMessages, saveConvo } = require('../../models');
const { saveMessage, deleteMessages, deleteMessagesSince, saveConvo } = require('../../models');
const { handleError, sendMessage } = require('./handlers');
const citationRegex = /\[\^\d+?\^]/g;
router.post('/', async (req, res) => {
const { model, text, ...convo } = req.body;
const { id, model, text, ...convo } = req.body;
if (text.length === 0) {
return handleError(res, 'Prompt empty or too short');
}
const userMessageId = crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text };
const userMessageId = id || crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
console.log('ask log', { model, ...userMessage, ...convo });
if (id) {
// existing conversation
await saveMessage(userMessage);
await deleteMessagesSince(userMessage);
} else {}
res.writeHead(200, {
Connection: 'keep-alive',
'Content-Type': 'text/event-stream',

14
api/server/routes/askSydney.js
View file

@ -2,21 +2,27 @@ const express = require('express');
const crypto = require('crypto');
const router = express.Router();
const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
const { saveMessage, deleteMessages, saveConvo, getConvoTitle } = require('../../models');
const { saveMessage, deleteMessages, saveConvo, deleteMessagesSince, getConvoTitle } = require('../../models');
const { handleError, sendMessage } = require('./handlers');
const citationRegex = /\[\^\d+?\^]/g;
router.post('/', async (req, res) => {
const { model, text, ...convo } = req.body;
const { id, model, text, ...convo } = req.body;
if (text.length === 0) {
return handleError(res, 'Prompt empty or too short');
}
const userMessageId = crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text };
const userMessageId = id || crypto.randomUUID();
let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
console.log('ask log', { model, ...userMessage, ...convo });
if (id) {
// existing conversation
await saveMessage(userMessage);
await deleteMessagesSince(userMessage);
} else {}
res.writeHead(200, {
Connection: 'keep-alive',
'Content-Type': 'text/event-stream',

48
client/src/components/Main/TextChat.jsx
View file

@ -29,13 +29,14 @@ export default function TextChat({ messages }) {
}, [convo?.conversationId, ])
const messageHandler = (data, currentState) => {
const { messages, currentMsg, sender } = currentState;
const { messages, currentMsg, message, sender } = currentState;
dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
};
const convoHandler = (data, currentState) => {
const { messages, currentMsg, sender, isCustomModel, model, chatGptLabel, promptPrefix } =
const { messages, currentMsg, message, isCustomModel, sender } =
currentState;
const { model, chatGptLabel, promptPrefix } = message;
dispatch(
setMessages([...messages, currentMsg, { sender, text: data.text || data.response }])
);
@ -111,7 +112,7 @@ export default function TextChat({ messages }) {
setErrorMessage(event.data);
dispatch(setSubmitState(false));
dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
dispatch(setText(message));
dispatch(setText(message?.text));
dispatch(setError(true));
return;
};
@ -127,7 +128,7 @@ export default function TextChat({ messages }) {
const isCustomModel = model === 'chatgptCustom' || !initial[model];
const message = text.trim();
const currentMsg = { sender: 'User', text: message, current: true };
const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true };
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
const initialResponse = { sender, text: '' };
@ -136,36 +137,41 @@ export default function TextChat({ messages }) {
dispatch(setText(''));
const submission = {
model,
text: message,
convo,
chatGptLabel,
promptPrefix,
isCustomModel,
message,
message: {
sender: 'User',
text: message,
isCreatedByUser: true,
model,
chatGptLabel,
promptPrefix,
},
messages,
currentMsg,
initialResponse,
sender,
initialResponse
};
console.log('User Input:', message);
// handleSubmit(submission);
dispatch(setSubmission(submission));
};
const createPayload = ({ model, text, convo, chatGptLabel, promptPrefix }) => {
const createPayload = ({ convo, message }) => {
const endpoint = `/api/ask`;
let payload = { model, text, chatGptLabel, promptPrefix };
if (convo.conversationId && convo.parentMessageId) {
payload = {
...payload,
conversationId: convo.conversationId,
parentMessageId: convo.parentMessageId
};
}
let payload = { ...message };
const { model } = message
if (!payload.conversationId)
if (convo?.conversationId && convo?.parentMessageId) {
payload = {
...payload,
conversationId: convo.conversationId,
parentMessageId: convo.parentMessageId
};
}
const isBing = model === 'bingai' || model === 'sydney';
if (isBing && convo.conversationId) {
if (isBing && convo?.conversationId) {
payload = {
...payload,
jailbreakConversationId: convo.jailbreakConversationId,

4
client/src/components/Messages/HoverButtons.jsx
View file

@ -2,11 +2,11 @@ import React from 'react';
// import Clipboard from '../svg/Clipboard';
import EditIcon from '../svg/EditIcon';
export default function HoverButtons({ user }) {
export default function HoverButtons({ user, onClick }) {
return (
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
{user && (
<button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible">
<button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible" onClick={onClick}>
{/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
<EditIcon />
</button>

124
client/src/components/Messages/Message.jsx
View file

@ -1,22 +1,36 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import TextWrapper from './TextWrapper';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import GPTIcon from '../svg/GPTIcon';
import BingIcon from '../svg/BingIcon';
import HoverButtons from './HoverButtons';
import Spinner from '../svg/Spinner';
import { setError } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setSubmitState, setSubmission } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
export default function Message({
sender,
text,
message,
messages,
last = false,
error = false,
scrollToBottom
scrollToBottom,
edit,
currentEditIdx,
enterEdit
}) {
const { isSubmitting } = useSelector((state) => state.submit);
const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
const [abortScroll, setAbort] = useState(false);
const notUser = sender.toLowerCase() !== 'user';
const blinker = isSubmitting && last && notUser;
const { sender, text, isCreatedByUser, error } = message
const textEditor = useRef(null)
const convo = useSelector((state) => state.convo);
const { initial } = useSelector((state) => state.models);
const { error: convoError } = convo;
const dispatch = useDispatch();
// const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
const blinker = isSubmitting && last && !isCreatedByUser;
useEffect(() => {
if (blinker && !abortScroll) {
@ -53,12 +67,12 @@ export default function Message({
let icon = `${sender}:`;
let backgroundColor = bgColors[sender];
if (notUser) {
if (!isCreatedByUser) {
props.className =
'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
}
if ((notUser && backgroundColor) || isBing) {
if ((!isCreatedByUser && backgroundColor) || isBing) {
icon = (
<div
style={
@ -80,6 +94,49 @@ export default function Message({
const wrapText = (text) => <TextWrapper text={text} />;
const resubmitMessage = () => {
const text = textEditor.current.innerHTML
if (convoError) {
dispatch(setError(false));
}
if (!!isSubmitting || text.trim() === '') {
return;
}
const isCustomModel = model === 'chatgptCustom' || !initial[model];
const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true };
console.log(model)
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
const initialResponse = { sender, text: '' };
dispatch(setSubmitState(true));
dispatch(setMessages([...messages.slice(0, currentEditIdx), currentMsg, initialResponse]));
dispatch(setText(''));
const submission = {
isCustomModel,
message: {
...message,
text: text.trim(),
model,
chatGptLabel,
promptPrefix,
},
messages: messages.slice(0, currentEditIdx),
currentMsg,
initialResponse,
sender,
};
console.log('User Input:', message);
// handleSubmit(submission);
dispatch(setSubmission(submission));
enterEdit(true);
};
return (
<div
{...props}
@ -96,22 +153,47 @@ export default function Message({
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3">
{error ? (
<div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
<div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
{text}
</div>
</div>
) : (
<div className="flex min-h-[20px] 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">
{notUser ? wrapText(text) : text}
{blinker && <span className="result-streaming">█</span>}
) :
edit ? (
<div className="flex min-h-[20px] flex-col flex-grow 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 border-none"
contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
{text}
</div>
<div className="text-center mt-2 flex w-full justify-center">
<button
className="btn relative btn-primary mr-2"
disabled={isSubmitting}
onClick={resubmitMessage}
>
Save & Submit
</button>
<button
className="btn relative btn-neutral"
onClick={() => enterEdit(true)}
>
Cancel
</button>
</div>
</div>
</div>
)}
) : (
<div className="flex min-h-[20px] flex-col flex-grow 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">
{!isCreatedByUser ? wrapText(text) : text}
{blinker && <span className="result-streaming">█</span>}
</div>
</div>
)}
</div>
<HoverButtons user={!notUser} />
<HoverButtons user={!error && isCreatedByUser} onClick={() => enterEdit()}/>
</div>
</div>
</div>

10
client/src/components/Messages/index.jsx
View file

@ -4,10 +4,12 @@ import ScrollToBottom from './ScrollToBottom';
import Message from './Message';
const Messages = ({ messages }) => {
const [currentEditIdx, setCurrentEditIdx] = useState(-1)
const [showScrollButton, setShowScrollButton] = useState(false);
const scrollableRef = useRef(null);
const messagesEndRef = useRef(null);
useEffect(() => {
const timeoutId = setTimeout(() => {
const scrollable = scrollableRef.current;
@ -60,11 +62,13 @@ const Messages = ({ messages }) => {
{messages.map((message, i) => (
<Message
key={i}
sender={message.sender}
text={message.text}
message={message}
messages={messages}
last={i === messages.length - 1}
error={message.error ? true : false}
scrollToBottom={i === messages.length - 1 ? scrollToBottom : null}
edit={i===currentEditIdx}
currentEditIdx={currentEditIdx}
enterEdit={(cancel) => setCurrentEditIdx(cancel?-1:i)}
/>
))}
<CSSTransition

2
client/src/store/convoSlice.js
View file

@ -48,7 +48,7 @@ const currentSlice = createSlice({
return !state.convos.some((c) => c.conversationId === convo.conversationId);
});
state.convos = [...state.convos, ...newConvos].sort(
(a, b) => new Date(b.created) - new Date(a.created)
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
);
},
removeConvo: (state, action) => {