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: cancellable api request

Browse source
This commit is contained in:
Wentao Lyu 2023-03-17 03:13:42 +08:00
parent 66ad54168a
commit ef9f1ee1cf
11 changed files with 93 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

4
api/app/chatgpt-browser.js
View file

@ -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 };

4
api/app/chatgpt-client.js
View file

@ -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 };

4
api/app/chatgpt-custom.js
View file

@ -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 };
}

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

@ -90,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 }),
@ -98,7 +106,8 @@ const ask = async ({
conversationId,
...convo
},
...convo
...convo,
abortController
});
console.log('CLIENT RESPONSE', gptResponse);

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

@ -84,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, {
@ -95,7 +103,8 @@ const ask = async ({
...convo,
parentMessageId: userParentMessageId,
conversationId
}
},
abortController
});
console.log('BING RESPONSE', response);

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

@ -84,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, {
@ -95,7 +103,8 @@ const ask = async ({
parentMessageId: userParentMessageId,
conversationId,
...convo
}
},
abortController
});
console.log('SYDNEY RESPONSE', response);

6
client/src/components/Main/SubmitButton.jsx
View file

@ -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();

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

@ -28,7 +28,9 @@ export default function TextChat({ messages }) {
useSelector((state) => state.submit);
const { text } = useSelector((state) => state.text);
const { error, latestMessage } = convo;
const { ask, regenerate } = useMessageHandler();
const { ask, regenerate, stopGenerating } = useMessageHandler();
const isNotAppendable = (!isSubmitting && latestMessage?.submitting) || latestMessage?.error;
// auto focus to input, when enter a conversation.
useEffect(() => {
@ -231,6 +233,10 @@ export default function TextChat({ messages }) {
regenerate(latestMessage)
}
const handleStopGenerating = () => {
stopGenerating()
}
const handleKeyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
@ -273,31 +279,23 @@ 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="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">
{(latestMessage&&!latestMessage?.isCreatedByUser)?
isSubmitting?
<button
onClick={null}
className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button"
>
<StopGeneratingIcon />
Stop Generating
</button>:
<span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center">
{isSubmitting?
<button
onClick={handleStopGenerating}
className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button"
>
<StopGeneratingIcon />
Stop generating
</button>
:(latestMessage&&!latestMessage?.isCreatedByUser)?
<button
onClick={handleRegenerate}
className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
@ -307,36 +305,34 @@ export default function TextChat({ messages }) {
Regenerate response
</button>
:null
}
</span>
<div
className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white'
} 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`}
>
<ModelMenu />
<TextareaAutosize
tabIndex="0"
autoFocus
ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
disabled={disabled}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
/>
<SubmitButton submitMessage={submitMessage} />
</div>
</>
)}
}
</span>
<div
className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white'
} 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`}
>
<ModelMenu />
<TextareaAutosize
tabIndex="0"
autoFocus
ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
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-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
/>
<SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
</div>
</div>
</form>
<Footer />

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

@ -58,7 +58,7 @@ export default function Message({
dispatch(setConversation({ parentMessageId: message?.messageId }));
dispatch(setLatestMessage({ ...message }));
}
}, [last]);
}, [last, message]);
const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);

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

@ -67,7 +67,7 @@ const Messages = ({ messages, messageTree }) => {
<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>
<div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
<div className="dark:gpt-dark-gray flex flex-col items-center text-sm">
{messageTree.length === 0 ? (
<Spinner />
) : (

7
client/src/utils/handleSubmit.js
View file

@ -42,10 +42,8 @@ const useMessageHandler = () => {
dispatch(setSubmitState(true));
if (isRegenerate) {
console.log([...currentMessages, initialResponse])
dispatch(setMessages([...currentMessages, initialResponse]));
} else {
console.log([...currentMessages, currentMsg, initialResponse])
dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
}
dispatch(setText(''));
@ -78,8 +76,11 @@ const useMessageHandler = () => {
console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
}
const stopGenerating = () => {
dispatch(setSubmission({}));
}
return { ask, regenerate }
return { ask, regenerate, stopGenerating }
}
export { useMessageHandler };