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

client error handling, regen response without saving messages

Browse source
This commit is contained in:
Danny Avila 2023-02-08 15:26:42 -05:00
parent 87685c3791
commit 217bdb4865
11 changed files with 261 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

18
models/Message.js
View file

@ -46,6 +46,20 @@ module.exports = {
return { message: 'Error saving message' };
}
},
getMessages: async (filter) => await Message.find(filter).exec(),
deleteMessages: async (filter) => await Message.deleteMany(filter).exec()
getMessages: async (filter) => {
try {
return await Message.find(filter).exec()
} catch (error) {
console.error(error);
return { message: 'Error getting messages' };
}
},
deleteMessages: async (filter) => {
try {
return await Message.deleteMany(filter).exec()
} catch (error) {
console.error(error);
return { message: 'Error deleting messages' };
}
}
}

13
server/index.js
View file

@ -1,7 +1,7 @@
const express = require('express');
const dbConnect = require('../models/dbConnect');
const { ask, titleConversation } = require('../app/chatgpt');
const { saveMessage, getMessages } = require('../models/Message');
const { saveMessage, getMessages, deleteMessages } = require('../models/Message');
const { saveConvo, getConvos, deleteConvos } = require('../models/Conversation');
const crypto = require('crypto');
const path = require('path');
@ -62,11 +62,9 @@ app.post('/ask', async (req, res) => {
'X-Accel-Buffering': 'no'
});
// res.write(`event: message\ndata: ${JSON.stringify('')}\n\n`);
try {
let i = 0;
const progressCallback = async (partial) => {
// console.log('partial', partial);
if (i === 0) {
userMessage.parentMessageId = parentMessageId ? parentMessageId : partial.id;
userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
@ -87,8 +85,12 @@ app.post('/ask', async (req, res) => {
gptResponse.title = await titleConversation(text, gptResponse.text);
}
if (gptResponse.text.includes('2023')) {
res.status(500).write('event: error\ndata: empty string error?');
if (
gptResponse.text.includes('2023') ||
gptResponse.text.toLowerCase().includes('no response') ||
gptResponse.text.toLowerCase().includes('no answer')
) {
res.status(500).write('event: error\ndata: Prompt empty or too short');
res.end();
return;
}
@ -101,6 +103,7 @@ app.post('/ask', async (req, res) => {
res.end();
} catch (error) {
console.log(error);
await deleteMessages({ id: userMessageId });
res.status(500).write('event: error\ndata: ' + error.message);
res.end();
}

19
src/App.jsx
View file

@ -15,18 +15,17 @@ const App = () => {
return (
<div className="flex h-screen">
{/* <div className="w-80 bg-slate-800"></div> */}
<Nav conversations={data} />
{/* <div className="flex h-full flex-1 flex-col md:pl-[260px]"> */}
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
<div className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1">
<MobileNav />
<Messages messages={messages} />
<TextChat
messages={messages}
reloadConvos={mutate}
/>
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden">
<div className="h-full dark:bg-gray-800">
<MobileNav />
<Messages messages={messages} />
<TextChat
messages={messages}
reloadConvos={mutate}
/>
</div>
</div>
</div>
</div>

10
src/components/Conversations/Conversation.jsx
View file

@ -4,11 +4,12 @@ import DeleteButton from './DeleteButton';
import { useSelector, useDispatch } from 'react-redux';
import { setConversation } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setText } from '~/store/textSlice';
import manualSWR from '~/utils/fetchers';
export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
const dispatch = useDispatch();
const conversationId = useSelector((state) => state.convo.conversationId);
const { conversationId } = useSelector((state) => state.convo);
const { trigger, isMutating } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
const clickHandler = async () => {
@ -16,9 +17,10 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
return;
}
dispatch(setConversation({ conversationId: id, parentMessageId }));
dispatch(setConversation({ error: false, conversationId: id, parentMessageId }));
const data = await trigger();
dispatch(setMessages(data));
dispatch(setText(''));
};
const aProps = {
@ -53,11 +55,13 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
{title}
</div>
{conversationId === id && (
{conversationId === id ? (
<div className="visible absolute right-1 z-10 flex text-gray-300">
<RenameButton conversationId={id} />
<DeleteButton conversationId={id} />
</div>
) : (
<div className="absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32]" />
)}
</a>
);

2
src/components/Nav/ClearConvos.jsx
View file

@ -13,7 +13,7 @@ export default function ClearConvos() {
'post',
() => {
dispatch(setMessages([]));
dispatch(setConversation({ conversationId: null, parentMessageId: null }));
dispatch(setConversation({ error: false, conversationId: null, parentMessageId: null }));
}
);

4
src/components/Nav/NewChat.jsx
View file

@ -2,13 +2,15 @@ import React from 'react';
import { useDispatch } from 'react-redux';
import { setConversation } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setText } from '~/store/textSlice';
export default function NewChat() {
const dispatch = useDispatch();
const clickHandler = () => {
dispatch(setText(''));
dispatch(setMessages([]));
dispatch(setConversation({ conversationId: null, parentMessageId: null }));
dispatch(setConversation({ error: false, conversationId: null, parentMessageId: null }));
};
return (

2
src/components/main/Message.jsx
View file

@ -11,7 +11,7 @@ export default function Message({ sender, text, last = false, error = false }) {
if (sender === 'GPT') {
props.className =
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]';
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
}
return (

34
src/components/main/Messages.jsx
View file

@ -19,25 +19,25 @@ export default function Messages({ messages }) {
scrollToBottom();
}, [messages]);
// <div className="flex-1 overflow-hidden">
// <div className="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
// </div>
// <div className="flex h-full text-sm dark:bg-gray-800"></div>;
return (
// <div className="flex-1 overflow-y-auto ">
<div className="flex-1 overflow-hidden">
<div className="h-full dark:bg-gray-800">
<div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
{messages.map((message, i) => (
<Message
key={i}
sender={message.sender}
text={message.text}
last={i === messages.length - 1}
error={!!message.error ? true : false}
<div className="flex-1 overflow-y-auto ">
<div className="flex-1 overflow-hidden">
<div className="h-full dark:bg-gray-800">
<div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
{messages.map((message, i) => (
<Message
key={i}
sender={message.sender}
text={message.text}
last={i === messages.length - 1}
error={!!message.error ? true : false}
/>
))}
<div
className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
ref={messagesEndRef}
/>
))}
<div ref={messagesEndRef} />
</div>
</div>
</div>
</div>

16
src/components/main/Regenerate.jsx
View file

@ -1,17 +1,20 @@
import React from 'react';
export default function Regenerate({ submitMessage }) {
const clickHandler = (e) => {
e.preventDefault();
submitMessage();
};
return (
<span className="mb-3 block text-xs md:mb-auto">
<>
<span className="mb-auto block flex justify-center text-xs md:mb-auto">
There was an error generating a response
</span>
<button onClick={clickHandler} className="btn btn-primary m-auto flex justify-center gap-2">
<button
onClick={clickHandler}
className="btn btn-primary m-auto flex justify-center gap-2"
>
<svg
stroke="currentColor"
fill="none"
@ -24,11 +27,12 @@ export default function Regenerate({ submitMessage }) {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<polyline points="1 4 1 10 7 10"/>
<polyline points="23 20 23 14 17 14"/>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
<polyline points="1 4 1 10 7 10" />
<polyline points="23 20 23 14 17 14" />
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
</svg>
Regenerate response
</button>
</>
);
}

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

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import SubmitButton from './SubmitButton';
import Regenerate from './Regenerate';
import TextareaAutosize from 'react-textarea-autosize';
import handleSubmit from '~/utils/handleSubmit';
import { useSelector, useDispatch } from 'react-redux';
import { setConversation } from '~/store/convoSlice';
import { setConversation, setError } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setSubmitState } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
@ -13,8 +14,13 @@ export default function TextChat({ messages, reloadConvos }) {
const convo = useSelector((state) => state.convo);
const { isSubmitting } = useSelector((state) => state.submit);
const { text } = useSelector((state) => state.text);
const { error } = convo;
const submitMessage = () => {
if (!!error) {
dispatch(setError(false));
}
if (!!isSubmitting || text.trim() === '') {
return;
}
@ -45,8 +51,9 @@ export default function TextChat({ messages, reloadConvos }) {
error: true
};
dispatch(setSubmitState(false));
dispatch(setMessages([...messages, currentMsg, errorResponse]));
dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
dispatch(setText(payload));
dispatch(setError(true));
return;
};
console.log('User Input:', payload);
@ -86,20 +93,27 @@ export default function TextChat({ messages, reloadConvos }) {
<form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col">
<div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
<TextareaAutosize
tabIndex="0"
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
placeholder=""
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
/>
<SubmitButton submitMessage={submitMessage} />
</div>
{/* removed this prop shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] */}
{!!error ? (
<Regenerate submitMessage={submitMessage} />
) : (
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-md dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-lg md:py-3 md:pl-4">
<TextareaAutosize
tabIndex="0"
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
placeholder=""
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
/>
<SubmitButton submitMessage={submitMessage} />
</div>
)}
</div>
</form>
<div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">

159
src/style.css
View file

@ -36,3 +36,162 @@
opacity: 1;
}
}
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: linear-gradient(180deg, rgba(53, 55, 64, 0), #353740 58.85%);
}
.md\:bg-vert-light-gradient {
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 13.94%, #fff 54.73%);
}
.md\:\!bg-transparent {
background-color: transparent !important;
}
[role='button'],
button {
cursor: pointer;
}
.btn {
align-items: center;
border-color: transparent;
border-radius: 0.25rem;
border-width: 1px;
display: inline-flex;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem 0.75rem;
pointer-events: auto;
}
.btn:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-primary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity));
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.btn-primary:hover {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity));
}
.btn-primary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 transparent);
}
.btn-primary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity));
}
.btn-primary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity));
}
.btn-primary:disabled:hover {
--tw-bg-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity));
}
.btn-secondary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
color: rgba(67, 56, 202, var(--tw-text-opacity));
font-size: 0.875rem;
line-height: 1.25rem;
}
.btn-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
}
.btn-secondary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 transparent);
}
.btn-secondary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-secondary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-neutral {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
border-color: rgba(0, 0, 0, 0.1);
border-width: 1px;
color: rgba(64, 65, 79, var(--tw-text-opacity));
font-size: 0.875rem;
line-height: 1.25rem;
}
.btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
}
.btn-neutral:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 transparent);
}
.btn-neutral.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-neutral:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.dark .btn-neutral {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
color: rgba(217, 217, 227, var(--tw-text-opacity));
}
.dark .btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
}
.btn-dark {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
border-width: 1px;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.btn-dark:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
}
.btn-small {
padding: 0.25rem 0.5rem;
}