mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
merge commit
This commit is contained in:
Daniel Avila
commit
586c162404
25 changed files with 431 additions and 283 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -34,6 +34,7 @@ client/public/main.js.LICENSE.txt
|
|||
# Deployed apps should consider commenting these lines out:
|
||||
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
|
||||
node_modules/
|
||||
meili_data/
|
||||
api/node_modules/
|
||||
client/node_modules/
|
||||
bower_components/
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"@waylaidwanderer/chatgpt-api": "^1.28.2",
|
||||
"axios": "^1.3.4",
|
||||
"cors": "^2.8.5",
|
||||
"crypto": "^1.0.1",
|
||||
"dotenv": "^16.0.3",
|
||||
"express": "^4.18.2",
|
||||
"express-session": "^1.17.3",
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -117,8 +131,8 @@ const ask = async ({
|
|||
);
|
||||
conversationId = userMessage.conversationId;
|
||||
|
||||
response.text = response.response;
|
||||
delete response.response;
|
||||
response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
|
||||
// delete response.response;
|
||||
// response.id = response.details.messageId;
|
||||
response.suggestions =
|
||||
response.details.suggestedResponses &&
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -111,8 +125,8 @@ const ask = async ({
|
|||
response.conversationSignature = convo.conversationSignature
|
||||
? convo.conversationSignature
|
||||
: crypto.randomUUID();
|
||||
response.text = response.response;
|
||||
delete response.response;
|
||||
response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
|
||||
// delete response.response;
|
||||
response.suggestions =
|
||||
response.details.suggestedResponses &&
|
||||
response.details.suggestedResponses.map((s) => s.text);
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
const _ = require('lodash');
|
||||
const sanitizeHtml = require('sanitize-html');
|
||||
const citationRegex = /\[\^\d+?\^]/g;
|
||||
const { getCitations, citeText, detectCode } = require('../../app/');
|
||||
// const htmlTagRegex = /(<\/?\s*[a-zA-Z]*\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?)>|<\s*[a-zA-Z]+\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?>|<\/?>))/g;
|
||||
|
||||
const handleError = (res, message) => {
|
||||
res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
|
||||
|
|
@ -28,14 +26,6 @@ const createOnProgress = () => {
|
|||
tokens = tokens.replace(/^\n/, '');
|
||||
}
|
||||
|
||||
// const htmlTags = tokens.match(htmlTagRegex);
|
||||
// if (tokens.includes('```') && htmlTags && htmlTags.length > 0) {
|
||||
// htmlTags.forEach((tag) => {
|
||||
// const sanitizedTag = sanitizeHtml(tag);
|
||||
// tokens = tokens.replaceAll(tag, sanitizedTag);
|
||||
// });
|
||||
// }
|
||||
|
||||
if (bing) {
|
||||
tokens = citeText(tokens, true);
|
||||
}
|
||||
|
|
@ -54,7 +44,7 @@ const createOnProgress = () => {
|
|||
|
||||
const handleText = async (response, bing = false) => {
|
||||
let { text } = response;
|
||||
text = await detectCode(text);
|
||||
// text = await detectCode(text);
|
||||
response.text = text;
|
||||
|
||||
if (bing) {
|
||||
|
|
@ -66,14 +56,6 @@ const handleText = async (response, bing = false) => {
|
|||
text += links?.length > 0 ? `\n<small>${links}</small>` : '';
|
||||
}
|
||||
|
||||
// const htmlTags = text.match(htmlTagRegex);
|
||||
// if (text.includes('```') && htmlTags && htmlTags.length > 0) {
|
||||
// htmlTags.forEach((tag) => {
|
||||
// const sanitizedTag = sanitizeHtml(tag);
|
||||
// text = text.replaceAll(tag, sanitizedTag);
|
||||
// });
|
||||
// }
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<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">
|
||||
<div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
|
||||
<a
|
||||
href="https://github.com/danny-avila/chatgpt-clone"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function Landing({ title }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
|
||||
<div className="flex pt-10 md:pt-0 h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
|
||||
<div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
|
||||
<h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold md:mt-[20vh] sm:mb-16">
|
||||
ChatGPT Clone
|
||||
|
|
|
|||
|
|
@ -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,15 +7,23 @@ 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 {
|
||||
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('');
|
||||
const inputRef = useRef(null)
|
||||
const inputRef = useRef(null);
|
||||
const isComposing = useRef(false);
|
||||
const dispatch = useDispatch();
|
||||
const { user } = useSelector((state) => state.user);
|
||||
|
|
@ -24,17 +32,78 @@ 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 = latestMessage?.cancelled || latestMessage?.error;
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [convo?.conversationId,])
|
||||
}, [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 cancelHandler = (data, currentState, currentMsg) => {
|
||||
const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
|
||||
|
||||
if (isRegenerate)
|
||||
dispatch(
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
sender,
|
||||
text: data,
|
||||
parentMessageId: message?.overrideParentMessageId,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
cancelled: true
|
||||
}
|
||||
])
|
||||
);
|
||||
else
|
||||
dispatch(
|
||||
setMessages([
|
||||
...messages,
|
||||
currentMsg,
|
||||
{
|
||||
sender,
|
||||
text: data,
|
||||
parentMessageId: currentMsg?.messageId,
|
||||
messageId: currentMsg?.messageId + '_',
|
||||
cancelled: true
|
||||
}
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
const createdHandler = (data, currentState, currentMsg) => {
|
||||
|
|
@ -42,6 +111,7 @@ export default function TextChat({ messages }) {
|
|||
dispatch(
|
||||
setConversation({
|
||||
conversationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
@ -49,15 +119,16 @@ 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]));
|
||||
dispatch(setSubmitState(false));
|
||||
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
|
||||
// refresh title
|
||||
if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
|
||||
setTimeout(() => {
|
||||
dispatch(refreshConversation());
|
||||
|
|
@ -82,15 +153,15 @@ 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 (
|
||||
model === 'bingai'
|
||||
) {
|
||||
} else if (model === 'bingai') {
|
||||
console.log('Bing data:', data);
|
||||
const { title } = data;
|
||||
const { conversationSignature, clientId, conversationId, invocationId } = responseMessage;
|
||||
const { conversationSignature, clientId, conversationId, invocationId } =
|
||||
responseMessage;
|
||||
dispatch(
|
||||
setConversation({
|
||||
title,
|
||||
|
|
@ -98,7 +169,8 @@ export default function TextChat({ messages }) {
|
|||
conversationSignature,
|
||||
clientId,
|
||||
conversationId,
|
||||
invocationId
|
||||
invocationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
} else if (model === 'sydney') {
|
||||
|
|
@ -119,12 +191,11 @@ export default function TextChat({ messages }) {
|
|||
conversationSignature,
|
||||
clientId,
|
||||
conversationId,
|
||||
invocationId
|
||||
invocationId,
|
||||
latestMessage: null
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
dispatch(setSubmitState(false));
|
||||
};
|
||||
|
||||
const errorHandler = (data, currentState, currentMsg) => {
|
||||
|
|
@ -133,7 +204,7 @@ export default function TextChat({ messages }) {
|
|||
const errorResponse = {
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: currentMsg?.messageId,
|
||||
parentMessageId: currentMsg?.messageId
|
||||
};
|
||||
setErrorMessage(data?.text);
|
||||
dispatch(setSubmitState(false));
|
||||
|
|
@ -142,51 +213,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 +224,10 @@ export default function TextChat({ messages }) {
|
|||
}
|
||||
|
||||
const currentState = submission;
|
||||
let currentMsg = currentState.currentMsg;
|
||||
|
||||
let currentMsg = { ...currentState.message };
|
||||
let latestResponseText = '';
|
||||
|
||||
const { server, payload } = createPayload(submission);
|
||||
const onMessage = (e) => {
|
||||
if (stopStream) {
|
||||
|
|
@ -205,19 +236,20 @@ export default function TextChat({ messages }) {
|
|||
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
// if (data.message) {
|
||||
// messageHandler(text, currentState);
|
||||
// }
|
||||
|
||||
if (data.final) {
|
||||
convoHandler(data, currentState, currentMsg);
|
||||
console.log('final', data);
|
||||
} if (data.created) {
|
||||
}
|
||||
if (data.created) {
|
||||
currentMsg = data.message;
|
||||
createdHandler(data, currentState, currentMsg);
|
||||
} else {
|
||||
let text = data.text || data.response;
|
||||
if (data.initial) {
|
||||
console.log(data);
|
||||
}
|
||||
if (data.message) {
|
||||
latestResponseText = text;
|
||||
messageHandler(text, currentState, currentMsg);
|
||||
}
|
||||
// console.log('dataStream', data);
|
||||
|
|
@ -235,6 +267,10 @@ export default function TextChat({ messages }) {
|
|||
|
||||
events.onmessage = onMessage;
|
||||
|
||||
events.oncancel = (e) => {
|
||||
cancelHandler(latestResponseText, currentState, currentMsg);
|
||||
};
|
||||
|
||||
events.onerror = function (e) {
|
||||
console.log('error in opening conn.');
|
||||
events.close();
|
||||
|
|
@ -248,18 +284,30 @@ export default function TextChat({ messages }) {
|
|||
|
||||
return () => {
|
||||
events.removeEventListener('message', onMessage);
|
||||
const isCancelled = events.readyState <= 1;
|
||||
events.close();
|
||||
if (isCancelled) {
|
||||
const e = new Event('cancel');
|
||||
events.dispatchEvent(e);
|
||||
}
|
||||
};
|
||||
}, [submission]);
|
||||
|
||||
const handleRegenerate = () => {
|
||||
if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
|
||||
};
|
||||
|
||||
const handleStopGenerating = () => {
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (!isComposing.current)
|
||||
submitMessage();
|
||||
if (!isComposing.current) submitMessage();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -272,21 +320,21 @@ export default function TextChat({ messages }) {
|
|||
return;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleCompositionStart = (e) => {
|
||||
isComposing.current = true
|
||||
}
|
||||
isComposing.current = true;
|
||||
};
|
||||
|
||||
const handleCompositionEnd = (e) => {
|
||||
isComposing.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
const changeHandler = (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
if (isSubmitting && (value === '' || value === '\n')) {
|
||||
return;
|
||||
}
|
||||
// if (isSubmitting && (value === '' || value === '\n')) {
|
||||
// return;
|
||||
// }
|
||||
dispatch(setText(value));
|
||||
};
|
||||
|
||||
|
|
@ -296,44 +344,65 @@ export default function TextChat({ messages }) {
|
|||
};
|
||||
|
||||
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 md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
|
||||
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-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="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
|
||||
{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 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={disabled || isNotAppendable ? '' : text}
|
||||
onKeyUp={handleKeyUp}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={changeHandler}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
placeholder={
|
||||
disabled
|
||||
? 'Choose another model or customize GPT again'
|
||||
: isNotAppendable
|
||||
? 'Edit your message or Regenerate.'
|
||||
: ''
|
||||
}
|
||||
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 placeholder:text-sm focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`relative flex w-full 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 ${
|
||||
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-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton submitMessage={submitMessage} />
|
||||
</div>
|
||||
)}
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
disabled={disabled || isNotAppendable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -4,12 +4,9 @@ import MultiMessage from './MultiMessage';
|
|||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import HoverButtons from './HoverButtons';
|
||||
import SiblingSwitch from './SiblingSwitch';
|
||||
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,
|
||||
|
|
@ -28,14 +25,14 @@ export default function Message({
|
|||
const { sender, text, isCreatedByUser, error, submitting } = message;
|
||||
const textEditor = useRef(null);
|
||||
const convo = useSelector((state) => state.convo);
|
||||
const { initial } = useSelector((state) => state.models);
|
||||
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';
|
||||
const blinker = submitting && isSubmitting && last && !isCreatedByUser;
|
||||
// const blinker = submitting && isSubmitting && last && !isCreatedByUser;
|
||||
const blinker = submitting && isSubmitting;
|
||||
const generateCursor = useCallback(() => {
|
||||
if (!blinker) {
|
||||
return '';
|
||||
|
|
@ -48,11 +45,15 @@ export default function Message({
|
|||
if (blinker && !abortScroll) {
|
||||
scrollToBottom();
|
||||
}
|
||||
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
|
||||
}, [isSubmitting, blinker, text, scrollToBottom]);
|
||||
|
||||
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 +88,11 @@ 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,
|
||||
ask({
|
||||
text,
|
||||
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));
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,49 @@
|
|||
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
||||
import React, { useEffect, useState, useRef, useCallback } from 'react';
|
||||
import Spinner from '../svg/Spinner';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import ScrollToBottom from './ScrollToBottom';
|
||||
import MultiMessage from './MultiMessage';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const Messages = ({ messages, messageTree }) => {
|
||||
export default function 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;
|
||||
const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
|
||||
const diff = Math.abs(scrollHeight - scrollTop);
|
||||
const percent = Math.abs(clientHeight - diff ) / clientHeight;
|
||||
const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
|
||||
setShowScrollButton(hasScrollbar);
|
||||
}, 650);
|
||||
|
||||
// Add a listener on the window object
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [messages]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
const scrollToBottom = useCallback(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
setShowScrollButton(false);
|
||||
};
|
||||
}, [messagesEndRef]);
|
||||
|
||||
const handleScroll = () => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
|
||||
const diff = Math.abs(scrollHeight - scrollTop);
|
||||
const bottom =
|
||||
diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
|
||||
if (bottom) {
|
||||
const percent = Math.abs(clientHeight - diff ) / clientHeight;
|
||||
if (percent <= 0.2) {
|
||||
setShowScrollButton(false);
|
||||
} else {
|
||||
setShowScrollButton(true);
|
||||
|
|
@ -54,13 +63,16 @@ const Messages = ({ messages, messageTree }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 overflow-y-auto "
|
||||
className="flex-1 overflow-y-auto pt-10 md:pt-0"
|
||||
ref={scrollableRef}
|
||||
onScroll={debouncedHandleScroll}
|
||||
>
|
||||
{/* <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-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
|
||||
Model: {modelName} {customModel ? `(${customModel})` : null}
|
||||
</div>
|
||||
{messageTree.length === 0 ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -93,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
|
|||
{/* </div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Messages);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ export default function ModelMenu() {
|
|||
const { data, isLoading, mutate } = swr(`/api/customGpts`, (res) => {
|
||||
const fetchedModels = res.map((modelItem) => ({
|
||||
...modelItem,
|
||||
name: modelItem.chatGptLabel
|
||||
name: modelItem.chatGptLabel,
|
||||
model: 'chatgptCustom'
|
||||
}));
|
||||
|
||||
dispatch(setModels(fetchedModels));
|
||||
|
|
@ -100,7 +101,7 @@ export default function ModelMenu() {
|
|||
localStorage.setItem('model', JSON.stringify(model));
|
||||
}, [model]);
|
||||
|
||||
const filteredModels = models.filter(({model, _id }) => initial[model] || _id.length > 1 );
|
||||
const filteredModels = models.filter(({model, _id }) => initial[model] );
|
||||
|
||||
const onChange = (value) => {
|
||||
if (!value) {
|
||||
|
|
@ -187,9 +188,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>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default function MobileNav({ setNavVisible }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
|
||||
<div className="fixed top-0 left-0 right-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
|
||||
|
|
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const initialState = {
|
|||
pages: 1,
|
||||
refreshConvoHint: 0,
|
||||
search: false,
|
||||
latestMessage: null,
|
||||
convos: [],
|
||||
};
|
||||
|
||||
|
|
@ -53,6 +54,7 @@ const currentSlice = createSlice({
|
|||
state.chatGptLabel = null;
|
||||
state.promptPrefix = null;
|
||||
state.convosLoading = false;
|
||||
state.latestMessage = null;
|
||||
},
|
||||
setConvos: (state, action) => {
|
||||
state.convos = action.payload.sort(
|
||||
|
|
@ -67,11 +69,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,91 @@
|
|||
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';
|
||||
import { setError } from '~/store/convoSlice';
|
||||
|
||||
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 };
|
||||
|
||||
const submission = {
|
||||
convo,
|
||||
isCustomModel,
|
||||
message: {
|
||||
...currentMsg,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
overrideParentMessageId: isRegenerate?messageId:null
|
||||
},
|
||||
messages: currentMessages,
|
||||
isRegenerate,
|
||||
initialResponse,
|
||||
sender,
|
||||
};
|
||||
|
||||
console.log('User Input:', text);
|
||||
|
||||
if (isRegenerate) {
|
||||
dispatch(setMessages([...currentMessages, initialResponse]));
|
||||
} else {
|
||||
dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
|
||||
dispatch(setText(''));
|
||||
}
|
||||
dispatch(setSubmitState(true));
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -56,8 +56,6 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
|
|||
chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
|
||||
};
|
||||
|
||||
console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
|
||||
|
||||
if (isCreatedByUser)
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue