mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
feat: fully multipath and resubmit
This commit is contained in:
Wentao Lyu
parent
4a39965b22
commit
a4d5f6a3f2
5 changed files with 197 additions and 89 deletions
|
|
@ -4,20 +4,59 @@ import { useSelector, useDispatch } from 'react-redux';
|
|||
import GPTIcon from '../svg/GPTIcon';
|
||||
import BingIcon from '../svg/BingIcon';
|
||||
import HoverButtons from './HoverButtons';
|
||||
import SiblingSwitch from './SiblingSwitch';
|
||||
import Spinner from '../svg/Spinner';
|
||||
import { setError } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
import { setConversation } from '../../store/convoSlice';
|
||||
|
||||
const MultiMessage = ({
|
||||
messageList,
|
||||
messages,
|
||||
scrollToBottom,
|
||||
currentEditId,
|
||||
setCurrentEditId
|
||||
}) => {
|
||||
const [siblingIdx, setSiblingIdx] = useState(0)
|
||||
|
||||
const setSiblingIdxRev = (value) => {
|
||||
setSiblingIdx(messageList?.length - value - 1)
|
||||
}
|
||||
|
||||
if (!messageList?.length) return null;
|
||||
|
||||
if (siblingIdx >= messageList?.length) {
|
||||
setSiblingIdx(0)
|
||||
return null
|
||||
}
|
||||
|
||||
return <Message
|
||||
key={messageList[messageList.length - siblingIdx - 1].messageId}
|
||||
message={messageList[messageList.length - siblingIdx - 1]}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
|
||||
siblingIdx={messageList.length - siblingIdx - 1}
|
||||
siblingCount={messageList.length}
|
||||
setSiblingIdx={setSiblingIdxRev}
|
||||
/>
|
||||
}
|
||||
|
||||
export { MultiMessage };
|
||||
|
||||
export default function Message({
|
||||
message,
|
||||
messages,
|
||||
last = false,
|
||||
scrollToBottom,
|
||||
edit,
|
||||
currentEditIdx,
|
||||
enterEdit
|
||||
currentEditId,
|
||||
setCurrentEditId,
|
||||
siblingIdx,
|
||||
siblingCount,
|
||||
setSiblingIdx
|
||||
}) {
|
||||
const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
|
||||
const [abortScroll, setAbort] = useState(false);
|
||||
|
|
@ -26,6 +65,9 @@ export default function Message({
|
|||
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 dispatch = useDispatch();
|
||||
|
||||
|
|
@ -37,11 +79,18 @@ export default function Message({
|
|||
scrollToBottom();
|
||||
}
|
||||
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (last)
|
||||
dispatch(setConversation({parentMessageId: message?.messageId}))
|
||||
}, [last, ])
|
||||
|
||||
if (sender === '') {
|
||||
return <Spinner />;
|
||||
}
|
||||
|
||||
const enterEdit = (cancel) => setCurrentEditId(cancel?-1:message.messageId)
|
||||
|
||||
const handleWheel = () => {
|
||||
if (blinker) {
|
||||
setAbort(true);
|
||||
|
|
@ -105,97 +154,109 @@ export default function Message({
|
|||
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 = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true };
|
||||
console.log(model)
|
||||
const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, messageId: fakeMessageId };
|
||||
const sender = model === 'chatgptCustom' ? chatGptLabel : model;
|
||||
|
||||
const initialResponse = { sender, text: '' };
|
||||
const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
|
||||
|
||||
dispatch(setSubmitState(true));
|
||||
dispatch(setMessages([...messages.slice(0, currentEditIdx), currentMsg, initialResponse]));
|
||||
dispatch(setMessages([...messages, currentMsg, initialResponse]));
|
||||
dispatch(setText(''));
|
||||
|
||||
const submission = {
|
||||
isCustomModel,
|
||||
message: {
|
||||
...message,
|
||||
text: text.trim(),
|
||||
...currentMsg,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
},
|
||||
messages: messages.slice(0, currentEditIdx),
|
||||
messages: messages,
|
||||
currentMsg,
|
||||
initialResponse,
|
||||
sender,
|
||||
};
|
||||
console.log('User Input:', message);
|
||||
console.log('User Input:', currentMsg?.text);
|
||||
// handleSubmit(submission);
|
||||
dispatch(setSubmission(submission));
|
||||
|
||||
setSiblingIdx(siblingCount - 1)
|
||||
enterEdit(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||
<strong className="relative flex w-[30px] flex-col items-end text-right text-xs md:text-sm">
|
||||
{typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
|
||||
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
|
||||
) : (
|
||||
icon
|
||||
)}
|
||||
</strong>
|
||||
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
|
||||
<div className="flex flex-grow flex-col gap-3">
|
||||
{error ? (
|
||||
<div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
|
||||
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
edit ? (
|
||||
<div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none"
|
||||
contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
|
||||
<>
|
||||
<div
|
||||
{...props}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||
|
||||
<div className="relative flex w-[30px] flex-col items-end text-right text-xs md:text-sm">
|
||||
{typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
|
||||
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
|
||||
) : (
|
||||
icon
|
||||
)}
|
||||
<SiblingSwitch siblingIdx={siblingIdx} siblingCount={siblingCount} setSiblingIdx={setSiblingIdx} />
|
||||
</div>
|
||||
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
|
||||
<div className="flex flex-grow flex-col gap-3">
|
||||
{error ? (
|
||||
<div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
|
||||
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
|
||||
{text}
|
||||
</div>
|
||||
<div className="text-center mt-2 flex w-full justify-center">
|
||||
<button
|
||||
className="btn relative btn-primary mr-2"
|
||||
disabled={isSubmitting}
|
||||
onClick={resubmitMessage}
|
||||
>
|
||||
Save & Submit
|
||||
</button>
|
||||
<button
|
||||
className="btn relative btn-neutral"
|
||||
onClick={() => enterEdit(true)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words">
|
||||
{!isCreatedByUser ? wrapText(text) : text}
|
||||
{blinker && <span className="result-streaming">█</span>}
|
||||
) :
|
||||
edit ? (
|
||||
<div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none"
|
||||
contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
|
||||
{text}
|
||||
</div>
|
||||
<div className="text-center mt-2 flex w-full justify-center">
|
||||
<button
|
||||
className="btn relative btn-primary mr-2"
|
||||
disabled={isSubmitting}
|
||||
onClick={resubmitMessage}
|
||||
>
|
||||
Save & Submit
|
||||
</button>
|
||||
<button
|
||||
className="btn relative btn-neutral"
|
||||
onClick={() => enterEdit(true)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words">
|
||||
{!isCreatedByUser ? wrapText(text) : text}
|
||||
{blinker && <span className="result-streaming">█</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
|
||||
</div>
|
||||
<HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MultiMessage
|
||||
messageList={message.children}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue