mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
Merge pull request #80 from wtlyu/feat-regenerate-and-cancel
Feat regenerate and cancel
This commit is contained in:
Danny Avila
GitHub
commit
ce3f03267a
18 changed files with 281 additions and 190 deletions
|
|
@ -10,7 +10,7 @@ const clientOptions = {
|
|||
proxy: process.env.PROXY || null,
|
||||
};
|
||||
|
||||
const browserClient = async ({ text, onProgress, convo }) => {
|
||||
const browserClient = async ({ text, onProgress, convo, abortController }) => {
|
||||
const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
|
||||
|
||||
const store = {
|
||||
|
|
@ -18,7 +18,7 @@ const browserClient = async ({ text, onProgress, convo }) => {
|
|||
};
|
||||
|
||||
const client = new ChatGPTBrowserClient(clientOptions, store);
|
||||
let options = { onProgress };
|
||||
let options = { onProgress, abortController };
|
||||
|
||||
if (!!convo.parentMessageId && !!convo.conversationId) {
|
||||
options = { ...options, ...convo };
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ const clientOptions = {
|
|||
debug: false
|
||||
};
|
||||
|
||||
const askClient = async ({ text, onProgress, convo }) => {
|
||||
const askClient = async ({ text, onProgress, convo, abortController }) => {
|
||||
const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
|
||||
const store = {
|
||||
store: new KeyvFile({ filename: './data/cache.json' })
|
||||
};
|
||||
|
||||
const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
|
||||
let options = { onProgress };
|
||||
let options = { onProgress, abortController };
|
||||
|
||||
if (!!convo.parentMessageId && !!convo.conversationId) {
|
||||
options = { ...options, ...convo };
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const clientOptions = {
|
|||
debug: false
|
||||
};
|
||||
|
||||
const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel }) => {
|
||||
const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel, abortController }) => {
|
||||
const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
|
||||
const store = {
|
||||
store: new KeyvFile({ filename: './data/cache.json' })
|
||||
|
|
@ -23,7 +23,7 @@ const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabe
|
|||
|
||||
const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
|
||||
|
||||
let options = { onProgress };
|
||||
let options = { onProgress, abortController };
|
||||
if (!!convo.parentMessageId && !!convo.conversationId) {
|
||||
options = { ...options, ...convo };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ router.use('/bing', askBing);
|
|||
router.use('/sydney', askSydney);
|
||||
|
||||
router.post('/', async (req, res) => {
|
||||
let { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
|
||||
let { model, text, overrideParentMessageId=null, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
|
||||
if (text.length === 0) {
|
||||
return handleError(res, { text: 'Prompt empty or too short' });
|
||||
}
|
||||
|
|
@ -36,51 +36,22 @@ router.post('/', async (req, res) => {
|
|||
...convo
|
||||
});
|
||||
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
if (!overrideParentMessageId) {
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
}
|
||||
|
||||
return await ask({
|
||||
userMessage,
|
||||
model,
|
||||
convo,
|
||||
preSendRequest: true,
|
||||
overrideParentMessageId,
|
||||
req,
|
||||
res
|
||||
});
|
||||
});
|
||||
|
||||
router.post('/regenerate', async (req, res) => {
|
||||
const { model } = req.body;
|
||||
|
||||
const oldUserMessage = await getMessages({ messageId: req.body });
|
||||
|
||||
if (oldUserMessage) {
|
||||
const convo = await getConvo(userMessage?.conversationId);
|
||||
|
||||
const userMessageId = crypto.randomUUID();
|
||||
|
||||
let userMessage = {
|
||||
...userMessage,
|
||||
messageId: userMessageId
|
||||
};
|
||||
|
||||
console.log('ask log for regeneration', {
|
||||
model,
|
||||
...userMessage,
|
||||
...convo
|
||||
});
|
||||
|
||||
return await ask({
|
||||
userMessage,
|
||||
model,
|
||||
convo,
|
||||
preSendRequest: false,
|
||||
req,
|
||||
res
|
||||
});
|
||||
} else return handleError(res, { text: 'Parent message not found' });
|
||||
});
|
||||
|
||||
const ask = async ({
|
||||
userMessage,
|
||||
overrideParentMessageId = null,
|
||||
|
|
@ -119,6 +90,14 @@ const ask = async ({
|
|||
|
||||
try {
|
||||
const progressCallback = createOnProgress();
|
||||
|
||||
const abortController = new AbortController();
|
||||
res.on('close', () => {
|
||||
console.log('The client has disconnected.');
|
||||
// 执行其他操作
|
||||
abortController.abort();
|
||||
})
|
||||
|
||||
let gptResponse = await client({
|
||||
text,
|
||||
onProgress: progressCallback.call(null, model, { res, text }),
|
||||
|
|
@ -127,7 +106,8 @@ const ask = async ({
|
|||
conversationId,
|
||||
...convo
|
||||
},
|
||||
...convo
|
||||
...convo,
|
||||
abortController
|
||||
});
|
||||
|
||||
console.log('CLIENT RESPONSE', gptResponse);
|
||||
|
|
@ -136,10 +116,10 @@ const ask = async ({
|
|||
gptResponse.text = gptResponse.response;
|
||||
// gptResponse.id = gptResponse.messageId;
|
||||
gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
|
||||
userMessage.conversationId = conversationId
|
||||
? conversationId
|
||||
: gptResponse.conversationId;
|
||||
await saveMessage(userMessage);
|
||||
// userMessage.conversationId = conversationId
|
||||
// ? conversationId
|
||||
// : gptResponse.conversationId;
|
||||
// await saveMessage(userMessage);
|
||||
delete gptResponse.response;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
|
|||
const {
|
||||
model,
|
||||
text,
|
||||
overrideParentMessageId=null,
|
||||
parentMessageId,
|
||||
conversationId: oldConversationId,
|
||||
...convo
|
||||
|
|
@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
|
|||
...convo
|
||||
});
|
||||
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
if (!overrideParentMessageId) {
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
}
|
||||
|
||||
return await ask({
|
||||
isNewConversation,
|
||||
|
|
@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
|
|||
model,
|
||||
convo,
|
||||
preSendRequest: true,
|
||||
overrideParentMessageId,
|
||||
req,
|
||||
res
|
||||
});
|
||||
|
|
@ -80,6 +84,14 @@ const ask = async ({
|
|||
|
||||
try {
|
||||
const progressCallback = createOnProgress();
|
||||
|
||||
const abortController = new AbortController();
|
||||
res.on('close', () => {
|
||||
console.log('The client has disconnected.');
|
||||
// 执行其他操作
|
||||
abortController.abort();
|
||||
})
|
||||
|
||||
let response = await askBing({
|
||||
text,
|
||||
onProgress: progressCallback.call(null, model, {
|
||||
|
|
@ -91,7 +103,8 @@ const ask = async ({
|
|||
...convo,
|
||||
parentMessageId: userParentMessageId,
|
||||
conversationId
|
||||
}
|
||||
},
|
||||
abortController
|
||||
});
|
||||
|
||||
console.log('BING RESPONSE', response);
|
||||
|
|
@ -101,7 +114,8 @@ const ask = async ({
|
|||
convo.conversationSignature || response.conversationSignature;
|
||||
userMessage.conversationId = response.conversationId || conversationId;
|
||||
userMessage.invocationId = response.invocationId;
|
||||
await saveMessage(userMessage);
|
||||
if (!overrideParentMessageId)
|
||||
await saveMessage(userMessage);
|
||||
|
||||
// Bing API will not use our conversationId at the first time,
|
||||
// so change the placeholder conversationId to the real one.
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
|
|||
const {
|
||||
model,
|
||||
text,
|
||||
overrideParentMessageId=null,
|
||||
parentMessageId,
|
||||
conversationId: oldConversationId,
|
||||
...convo
|
||||
|
|
@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
|
|||
...convo
|
||||
});
|
||||
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
if (!overrideParentMessageId) {
|
||||
await saveMessage(userMessage);
|
||||
await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
|
||||
}
|
||||
|
||||
return await ask({
|
||||
isNewConversation,
|
||||
|
|
@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
|
|||
model,
|
||||
convo,
|
||||
preSendRequest: true,
|
||||
overrideParentMessageId,
|
||||
req,
|
||||
res
|
||||
});
|
||||
|
|
@ -80,6 +84,14 @@ const ask = async ({
|
|||
|
||||
try {
|
||||
const progressCallback = createOnProgress();
|
||||
|
||||
const abortController = new AbortController();
|
||||
res.on('close', () => {
|
||||
console.log('The client has disconnected.');
|
||||
// 执行其他操作
|
||||
abortController.abort();
|
||||
})
|
||||
|
||||
let response = await askSydney({
|
||||
text,
|
||||
onProgress: progressCallback.call(null, model, {
|
||||
|
|
@ -91,7 +103,8 @@ const ask = async ({
|
|||
parentMessageId: userParentMessageId,
|
||||
conversationId,
|
||||
...convo
|
||||
}
|
||||
},
|
||||
abortController
|
||||
});
|
||||
|
||||
console.log('SYDNEY RESPONSE', response);
|
||||
|
|
@ -102,7 +115,8 @@ const ask = async ({
|
|||
userMessage.conversationId = response.conversationId || conversationId;
|
||||
userMessage.invocationId = response.invocationId;
|
||||
// Unlike gpt and bing, Sydney will never accept our given userMessage.messageId, it will generate its own one.
|
||||
await saveMessage(userMessage);
|
||||
if (!overrideParentMessageId)
|
||||
await saveMessage(userMessage);
|
||||
|
||||
// Save sydney response
|
||||
// response.id = response.messageId;
|
||||
|
|
@ -125,7 +139,8 @@ const ask = async ({
|
|||
|
||||
// Save user message
|
||||
userMessage.conversationId = response.conversationId || conversationId;
|
||||
await saveMessage(userMessage);
|
||||
if (!overrideParentMessageId)
|
||||
await saveMessage(userMessage);
|
||||
|
||||
// Bing API will not use our conversationId at the first time,
|
||||
// so change the placeholder conversationId to the real one.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="theme-color" content="#343541">
|
||||
<title>ChatGPT Clone</title>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@ export default function Conversation({
|
|||
jailbreakConversationId,
|
||||
conversationSignature,
|
||||
clientId,
|
||||
invocationId
|
||||
invocationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
} else {
|
||||
|
|
@ -69,7 +70,8 @@ export default function Conversation({
|
|||
jailbreakConversationId: null,
|
||||
conversationSignature: null,
|
||||
clientId: null,
|
||||
invocationId: null
|
||||
invocationId: null,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
export default function SubmitButton({ submitMessage }) {
|
||||
const { isSubmitting, disabled } = useSelector((state) => state.submit);
|
||||
export default function SubmitButton({ submitMessage, disabled }) {
|
||||
const { isSubmitting } = useSelector((state) => state.submit);
|
||||
const { error, latestMessage } = useSelector((state) => state.convo);
|
||||
|
||||
const clickHandler = (e) => {
|
||||
e.preventDefault();
|
||||
submitMessage();
|
||||
|
|
@ -28,7 +30,7 @@ export default function SubmitButton({ submitMessage }) {
|
|||
disabled={disabled}
|
||||
className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<div className="m-1 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@ import Footer from './Footer';
|
|||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import createPayload from '~/utils/createPayload';
|
||||
import resetConvo from '~/utils/resetConvo';
|
||||
import RegenerateIcon from '../svg/RegenerateIcon';
|
||||
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { setConversation, setNewConvo, setError, refreshConversation } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit'
|
||||
|
||||
export default function TextChat({ messages }) {
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
|
@ -24,7 +27,10 @@ export default function TextChat({ messages }) {
|
|||
const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } =
|
||||
useSelector((state) => state.submit);
|
||||
const { text } = useSelector((state) => state.text);
|
||||
const { error } = convo;
|
||||
const { error, latestMessage } = convo;
|
||||
const { ask, regenerate, stopGenerating } = useMessageHandler();
|
||||
|
||||
const isNotAppendable = (!isSubmitting && latestMessage?.submitting) || latestMessage?.error;
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
|
|
@ -32,9 +38,12 @@ export default function TextChat({ messages }) {
|
|||
}, [convo?.conversationId,])
|
||||
|
||||
const messageHandler = (data, currentState, currentMsg) => {
|
||||
const { messages, _currentMsg, message, sender } = currentState;
|
||||
const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
|
||||
|
||||
dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
|
||||
if (isRegenerate)
|
||||
dispatch(setMessages([...messages, { sender, text: data, parentMessageId: message?.overrideParentMessageId, messageId: message?.overrideParentMessageId + '_', submitting: true }]));
|
||||
else
|
||||
dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
|
||||
};
|
||||
|
||||
const createdHandler = (data, currentState, currentMsg) => {
|
||||
|
|
@ -42,6 +51,7 @@ export default function TextChat({ messages }) {
|
|||
dispatch(
|
||||
setConversation({
|
||||
conversationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
@ -49,12 +59,17 @@ export default function TextChat({ messages }) {
|
|||
const convoHandler = (data, currentState, currentMsg) => {
|
||||
const { requestMessage, responseMessage } = data;
|
||||
const { conversationId } = requestMessage;
|
||||
const { messages, _currentMsg, message, isCustomModel, sender } =
|
||||
const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
|
||||
currentState;
|
||||
const { model, chatGptLabel, promptPrefix } = message;
|
||||
dispatch(
|
||||
setMessages([...messages, requestMessage, responseMessage,])
|
||||
);
|
||||
if (isRegenerate)
|
||||
dispatch(
|
||||
setMessages([...messages, responseMessage,])
|
||||
);
|
||||
else
|
||||
dispatch(
|
||||
setMessages([...messages, requestMessage, responseMessage,])
|
||||
);
|
||||
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
|
||||
|
|
@ -82,7 +97,8 @@ export default function TextChat({ messages }) {
|
|||
clientId: null,
|
||||
invocationId: null,
|
||||
chatGptLabel: model === isCustomModel ? chatGptLabel : null,
|
||||
promptPrefix: model === isCustomModel ? promptPrefix : null
|
||||
promptPrefix: model === isCustomModel ? promptPrefix : null,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
} else if (
|
||||
|
|
@ -98,7 +114,8 @@ export default function TextChat({ messages }) {
|
|||
conversationSignature,
|
||||
clientId,
|
||||
conversationId,
|
||||
invocationId
|
||||
invocationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
} else if (model === 'sydney') {
|
||||
|
|
@ -119,7 +136,8 @@ export default function TextChat({ messages }) {
|
|||
conversationSignature,
|
||||
clientId,
|
||||
conversationId,
|
||||
invocationId
|
||||
invocationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -142,51 +160,8 @@ export default function TextChat({ messages }) {
|
|||
dispatch(setError(true));
|
||||
return;
|
||||
};
|
||||
|
||||
const submitMessage = () => {
|
||||
if (error) {
|
||||
dispatch(setError(false));
|
||||
}
|
||||
|
||||
if (!!isSubmitting || text.trim() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
const fakeMessageId = crypto.randomUUID();
|
||||
const isCustomModel = model === 'chatgptCustom' || !initial[model];
|
||||
const message = text.trim();
|
||||
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
|
||||
let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
|
||||
let currentMessages = messages;
|
||||
if (resetConvo(currentMessages, sender)) {
|
||||
parentMessageId = '00000000-0000-0000-0000-000000000000';
|
||||
dispatch(setNewConvo());
|
||||
currentMessages = [];
|
||||
}
|
||||
const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId , messageId: fakeMessageId };
|
||||
const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
|
||||
|
||||
dispatch(setSubmitState(true));
|
||||
dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
|
||||
dispatch(setText(''));
|
||||
|
||||
const submission = {
|
||||
convo,
|
||||
isCustomModel,
|
||||
message: {
|
||||
...currentMsg,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
},
|
||||
messages: currentMessages,
|
||||
currentMsg,
|
||||
initialResponse,
|
||||
sender,
|
||||
};
|
||||
console.log('User Input:', message);
|
||||
dispatch(setSubmission(submission));
|
||||
ask({ text })
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -196,7 +171,8 @@ export default function TextChat({ messages }) {
|
|||
}
|
||||
|
||||
const currentState = submission;
|
||||
let currentMsg = currentState.currentMsg;
|
||||
let currentMsg = {...currentState.message};
|
||||
|
||||
const { server, payload } = createPayload(submission);
|
||||
const onMessage = (e) => {
|
||||
if (stopStream) {
|
||||
|
|
@ -247,11 +223,21 @@ export default function TextChat({ messages }) {
|
|||
events.stream();
|
||||
|
||||
return () => {
|
||||
dispatch(setSubmitState(false));
|
||||
events.removeEventListener('message', onMessage);
|
||||
events.close();
|
||||
};
|
||||
}, [submission]);
|
||||
|
||||
const handleRegenerate = () => {
|
||||
if (latestMessage&&!latestMessage?.isCreatedByUser)
|
||||
regenerate(latestMessage)
|
||||
}
|
||||
|
||||
const handleStopGenerating = () => {
|
||||
stopGenerating()
|
||||
}
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
|
|
@ -294,23 +280,37 @@ export default function TextChat({ messages }) {
|
|||
e.preventDefault();
|
||||
dispatch(setError(false));
|
||||
};
|
||||
|
||||
isNotAppendable
|
||||
return (
|
||||
<div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
|
||||
<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="input-panel absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:bg-transparent dark:md:bg-vert-dark-gradient pt-2">
|
||||
<form className="stretch mx-2 flex flex-row gap-3 md: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" />
|
||||
{error ? (
|
||||
<Regenerate
|
||||
submitMessage={submitMessage}
|
||||
tryAgain={tryAgain}
|
||||
errorMessage={errorMessage}
|
||||
/>
|
||||
) : (
|
||||
<span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
|
||||
{isSubmitting?
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
:(latestMessage&&!latestMessage?.isCreatedByUser)?
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span>
|
||||
</button>
|
||||
:null
|
||||
}
|
||||
</span>
|
||||
<div
|
||||
className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
|
||||
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
|
||||
disabled ? 'bg-gray-100' : 'bg-white'
|
||||
} py-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
|
||||
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
|
||||
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
|
||||
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
|
||||
>
|
||||
|
|
@ -327,13 +327,12 @@ export default function TextChat({ messages }) {
|
|||
onChange={changeHandler}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
|
||||
disabled={disabled}
|
||||
placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''}
|
||||
disabled={disabled || isNotAppendable}
|
||||
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton submitMessage={submitMessage} />
|
||||
<SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import { setError } from '~/store/convoSlice';
|
|||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
import { setConversation } from '../../store/convoSlice';
|
||||
import { setConversation, setLatestMessage } from '../../store/convoSlice';
|
||||
import { getIconOfModel } from '../../utils';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit'
|
||||
|
||||
export default function Message({
|
||||
message,
|
||||
|
|
@ -32,6 +33,7 @@ export default function Message({
|
|||
const { error: convoError } = convo;
|
||||
const last = !message?.children?.length;
|
||||
const edit = message.messageId == currentEditId;
|
||||
const { ask } = useMessageHandler();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
|
||||
|
|
@ -51,8 +53,12 @@ export default function Message({
|
|||
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
|
||||
|
||||
useEffect(() => {
|
||||
if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
|
||||
}, [last]);
|
||||
if (last) {
|
||||
// TODO: stop using conversation.parentMessageId and remove it.
|
||||
dispatch(setConversation({ parentMessageId: message?.messageId }));
|
||||
dispatch(setLatestMessage({ ...message }));
|
||||
}
|
||||
}, [last, message]);
|
||||
|
||||
const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
|
||||
|
||||
|
|
@ -87,55 +93,7 @@ export default function Message({
|
|||
const resubmitMessage = () => {
|
||||
const text = textEditor.current.innerText;
|
||||
|
||||
if (convoError) {
|
||||
dispatch(setError(false));
|
||||
}
|
||||
|
||||
if (!!isSubmitting || text.trim() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
const fakeMessageId = crypto.randomUUID();
|
||||
const isCustomModel = model === 'chatgptCustom' || !initial[model];
|
||||
const currentMsg = {
|
||||
sender: 'User',
|
||||
text: text.trim(),
|
||||
current: true,
|
||||
isCreatedByUser: true,
|
||||
parentMessageId: message?.parentMessageId,
|
||||
conversationId: message?.conversationId,
|
||||
messageId: fakeMessageId
|
||||
};
|
||||
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
|
||||
|
||||
const initialResponse = {
|
||||
sender,
|
||||
text: '',
|
||||
parentMessageId: fakeMessageId,
|
||||
submitting: true
|
||||
};
|
||||
|
||||
dispatch(setSubmitState(true));
|
||||
dispatch(setMessages([...messages, currentMsg, initialResponse]));
|
||||
dispatch(setText(''));
|
||||
|
||||
const submission = {
|
||||
isCustomModel,
|
||||
message: {
|
||||
...currentMsg,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix
|
||||
},
|
||||
messages: messages,
|
||||
currentMsg,
|
||||
initialResponse,
|
||||
sender
|
||||
};
|
||||
console.log('User Input:', currentMsg?.text);
|
||||
// handleSubmit(submission);
|
||||
dispatch(setSubmission(submission));
|
||||
ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,});
|
||||
|
||||
setSiblingIdx(siblingCount - 1);
|
||||
enterEdit(true);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Message from './Message';
|
||||
|
||||
export default function MultiMessage({
|
||||
|
|
@ -14,6 +14,11 @@ export default function MultiMessage({
|
|||
setSiblingIdx(messageList?.length - value - 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// reset siblingIdx when changes, mostly a new message is submitting.
|
||||
setSiblingIdx(0);
|
||||
}, [messageList?.length])
|
||||
|
||||
// if (!messageList?.length) return null;
|
||||
if (!(messageList && messageList.length)) {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -8,10 +8,14 @@ import { useSelector } from 'react-redux';
|
|||
const Messages = ({ messages, messageTree }) => {
|
||||
const [currentEditId, setCurrentEditId] = useState(-1);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const { model, customModel, chatGptLabel } = useSelector((state) => state.submit);
|
||||
const { models } = useSelector((state) => state.models);
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
const scrollableRef = useRef(null);
|
||||
const messagesEndRef = useRef(null);
|
||||
|
||||
const modelName = models.find(element => element.model==model)?.name
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
const scrollable = scrollableRef.current;
|
||||
|
|
@ -61,6 +65,9 @@ const Messages = ({ messages, messageTree }) => {
|
|||
{/* <div className="flex-1 overflow-hidden"> */}
|
||||
<div className="dark:gpt-dark-gray h-full">
|
||||
<div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
|
||||
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm">
|
||||
Model: {modelName} {customModel?`(${customModel})`:null}
|
||||
</div>
|
||||
{messageTree.length === 0 ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -187,9 +187,9 @@ export default function ModelMenu() {
|
|||
<Button
|
||||
variant="outline"
|
||||
// style={{backgroundColor: 'rgb(16, 163, 127)'}}
|
||||
className={`absolute bottom-0.5 items-center mb-[1.75px] md:mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
|
||||
className={`absolute top-[0.25px] items-center mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
|
||||
' '
|
||||
)} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 dark:data-[state=open]:bg-opacity-50 md:bottom-1 md:left-1 md:pl-1 md:disabled:bottom-1`}
|
||||
)} focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:pl-1 md:disabled:top-1`}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
|
|
|
|||
7
client/src/components/svg/StopGeneratingIcon.jsx
Normal file
7
client/src/components/svg/StopGeneratingIcon.jsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function StopGeneratingIcon() {
|
||||
return (
|
||||
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -46,6 +46,18 @@
|
|||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.input-panel-button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.input-panel-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.input-panel {
|
||||
}
|
||||
|
||||
.nav-close-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const initialState = {
|
|||
pageNumber: 1,
|
||||
pages: 1,
|
||||
refreshConvoHint: 0,
|
||||
latestMessage: null,
|
||||
convos: [],
|
||||
};
|
||||
|
||||
|
|
@ -52,6 +53,7 @@ const currentSlice = createSlice({
|
|||
state.chatGptLabel = null;
|
||||
state.promptPrefix = null;
|
||||
state.convosLoading = false;
|
||||
state.latestMessage = null;
|
||||
},
|
||||
setConvos: (state, action) => {
|
||||
state.convos = action.payload.sort(
|
||||
|
|
@ -66,11 +68,14 @@ const currentSlice = createSlice({
|
|||
},
|
||||
removeAll: (state) => {
|
||||
state.convos = [];
|
||||
}
|
||||
},
|
||||
setLatestMessage: (state, action) => {
|
||||
state.latestMessage = action.payload;
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll } =
|
||||
export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll, setLatestMessage } =
|
||||
currentSlice.actions;
|
||||
|
||||
export default currentSlice.reducer;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,89 @@
|
|||
import { SSE } from './sse';
|
||||
// const newLineRegex = /^\n+/;
|
||||
import resetConvo from './resetConvo';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { setNewConvo } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
|
||||
const useMessageHandler = () => {
|
||||
const dispatch = useDispatch();
|
||||
const convo = useSelector((state) => state.convo);
|
||||
const { initial } = useSelector((state) => state.models);
|
||||
const { messages } = useSelector((state) => state.messages);
|
||||
const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit);
|
||||
const { text } = useSelector((state) => state.text);
|
||||
const { latestMessage, error } = convo;
|
||||
|
||||
const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => {
|
||||
if (error) {
|
||||
dispatch(setError(false));
|
||||
}
|
||||
|
||||
if (!!isSubmitting || text === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
text = text.trim();
|
||||
const fakeMessageId = crypto.randomUUID();
|
||||
const isCustomModel = model === 'chatgptCustom' || !initial[model];
|
||||
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
|
||||
parentMessageId = parentMessageId || latestMessage?.messageId || '00000000-0000-0000-0000-000000000000';
|
||||
let currentMessages = messages;
|
||||
if (resetConvo(currentMessages, sender)) {
|
||||
parentMessageId = '00000000-0000-0000-0000-000000000000';
|
||||
conversationId = null;
|
||||
dispatch(setNewConvo());
|
||||
currentMessages = [];
|
||||
}
|
||||
const currentMsg = { sender: 'User', text, current: true, isCreatedByUser: true, parentMessageId, conversationId, messageId: fakeMessageId };
|
||||
const initialResponse = { sender, text: '', parentMessageId: isRegenerate?messageId:fakeMessageId, messageId: (isRegenerate?messageId:fakeMessageId) + '_', submitting: true };
|
||||
|
||||
dispatch(setSubmitState(true));
|
||||
if (isRegenerate) {
|
||||
dispatch(setMessages([...currentMessages, initialResponse]));
|
||||
} else {
|
||||
dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
|
||||
}
|
||||
dispatch(setText(''));
|
||||
|
||||
const submission = {
|
||||
convo,
|
||||
isCustomModel,
|
||||
message: {
|
||||
...currentMsg,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
overrideParentMessageId: isRegenerate?messageId:null
|
||||
},
|
||||
messages: currentMessages,
|
||||
isRegenerate,
|
||||
initialResponse,
|
||||
sender,
|
||||
};
|
||||
console.log('User Input:', text);
|
||||
dispatch(setSubmission(submission));
|
||||
}
|
||||
|
||||
const regenerate = ({ parentMessageId }) => {
|
||||
const parentMessage = messages?.find(element => element.messageId == parentMessageId);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser)
|
||||
ask({ ...parentMessage }, { isRegenerate: true })
|
||||
else
|
||||
console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
|
||||
}
|
||||
|
||||
const stopGenerating = () => {
|
||||
dispatch(setSubmission({}));
|
||||
}
|
||||
|
||||
return { ask, regenerate, stopGenerating }
|
||||
}
|
||||
|
||||
export { useMessageHandler };
|
||||
|
||||
export default function handleSubmit({
|
||||
model,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue