mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
refactor: basic message and send message. as well as model
THIS IS NOT FINISHED. DONT USE THIS
This commit is contained in:
Wentao Lyu
parent
de8f519742
commit
c7c30d8bb5
24 changed files with 1057 additions and 1035 deletions
454
client/src/components/Input/index.jsx
Normal file
454
client/src/components/Input/index.jsx
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useRecoilValue, useRecoilState } from 'recoil';
|
||||
// import { SSE } from '~/utils/sse';
|
||||
import SubmitButton from './SubmitButton';
|
||||
// import AdjustToneButton from './AdjustToneButton';
|
||||
// import BingStyles from './BingStyles';
|
||||
import ModelMenu from './Models/ModelMenu';
|
||||
import Footer from './Footer';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import createPayload from '~/utils/createPayload';
|
||||
import RegenerateIcon from '../svg/RegenerateIcon';
|
||||
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
|
||||
// import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
|
||||
// import { setMessages } from '~/store/messageSlice';
|
||||
// import { setSubmitState, toggleCursor } from '~/store/submitSlice';
|
||||
// import { setText } from '~/store/textSlice';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function TextChat() {
|
||||
const inputRef = useRef(null);
|
||||
const isComposing = useRef(false);
|
||||
|
||||
const conversation = useRecoilValue(store.conversation);
|
||||
const latestMessage = useRecoilValue(store.latestMessage);
|
||||
const messages = useRecoilValue(store.messages);
|
||||
|
||||
const isSubmitting = useRecoilValue(store.isSubmitting);
|
||||
|
||||
// TODO: do we need this?
|
||||
const disabled = false;
|
||||
|
||||
const [text, setText] = useState('');
|
||||
const { ask, regenerate, stopGenerating } = useMessageHandler();
|
||||
|
||||
const bingStylesRef = useRef(null);
|
||||
const [showBingToneSetting, setShowBingToneSetting] = useState(false);
|
||||
|
||||
const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
setText('');
|
||||
}, [conversation?.conversationId]);
|
||||
|
||||
// controls the height of Bing tone style tabs
|
||||
useEffect(() => {
|
||||
if (!inputRef.current) {
|
||||
return; // wait for the ref to be available
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
const newHeight = inputRef.current.clientHeight;
|
||||
if (newHeight >= 24) {
|
||||
// 24 is the default height of the input
|
||||
bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(inputRef.current);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [inputRef]);
|
||||
|
||||
// const messageHandler = (data, currentState, currentMsg) => {
|
||||
// const { messages, message, sender, isRegenerate } = currentState;
|
||||
|
||||
// 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, 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) => {
|
||||
// const { conversationId } = currentMsg;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// conversationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// };
|
||||
|
||||
// const convoHandler = (data, currentState) => {
|
||||
// const { requestMessage, responseMessage } = data;
|
||||
// const { messages, message, isCustomModel, isRegenerate } = currentState;
|
||||
// const { model, chatGptLabel, promptPrefix } = message;
|
||||
// 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());
|
||||
// }, 2000);
|
||||
|
||||
// // in case it takes too long.
|
||||
// setTimeout(() => {
|
||||
// dispatch(refreshConversation());
|
||||
// }, 5000);
|
||||
// }
|
||||
|
||||
// if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {
|
||||
// const { title } = data;
|
||||
// const { conversationId, messageId } = responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// conversationId,
|
||||
// parentMessageId: messageId,
|
||||
// jailbreakConversationId: null,
|
||||
// conversationSignature: null,
|
||||
// clientId: null,
|
||||
// invocationId: null,
|
||||
// chatGptLabel: model === isCustomModel ? chatGptLabel : null,
|
||||
// promptPrefix: model === isCustomModel ? promptPrefix : null,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// } else if (model === 'bingai') {
|
||||
// console.log('Bing data:', data);
|
||||
// const { title } = data;
|
||||
// const { conversationSignature, clientId, conversationId, invocationId, parentMessageId } =
|
||||
// responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// } else if (model === 'sydney') {
|
||||
// const { title } = data;
|
||||
// const {
|
||||
// jailbreakConversationId,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId
|
||||
// } = responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// jailbreakConversationId,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// const errorHandler = (data, currentState, currentMsg) => {
|
||||
// const { messages, message } = currentState;
|
||||
// console.log('Error:', data);
|
||||
// const errorResponse = {
|
||||
// ...data,
|
||||
// error: true,
|
||||
// parentMessageId: currentMsg?.messageId
|
||||
// };
|
||||
// dispatch(setSubmitState(false));
|
||||
// dispatch(setMessages([...messages, currentMsg, errorResponse]));
|
||||
// dispatch(setText(message?.text));
|
||||
// dispatch(setError(true));
|
||||
// return;
|
||||
// };
|
||||
const submitMessage = () => {
|
||||
ask({ text });
|
||||
setText('');
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// inputRef.current?.focus();
|
||||
// if (Object.keys(submission).length === 0) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const currentState = submission;
|
||||
|
||||
// let currentMsg = { ...currentState.message };
|
||||
// let latestResponseText = '';
|
||||
|
||||
// const { server, payload } = createPayload(submission);
|
||||
// const onMessage = e => {
|
||||
// if (stopStream) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const data = JSON.parse(e.data);
|
||||
|
||||
// if (data.final) {
|
||||
// convoHandler(data, currentState);
|
||||
// dispatch(toggleCursor());
|
||||
// console.log('final', data);
|
||||
// }
|
||||
// if (data.created) {
|
||||
// currentMsg = data.message;
|
||||
// createdHandler(data, currentState, currentMsg);
|
||||
// } else {
|
||||
// let text = data.text || data.response;
|
||||
// if (data.initial) {
|
||||
// dispatch(toggleCursor());
|
||||
// }
|
||||
// if (data.message) {
|
||||
// latestResponseText = text;
|
||||
// messageHandler(text, currentState, currentMsg);
|
||||
// }
|
||||
// // console.log('dataStream', data);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const events = new SSE(server, {
|
||||
// payload: JSON.stringify(payload),
|
||||
// headers: { 'Content-Type': 'application/json' }
|
||||
// });
|
||||
|
||||
// events.onopen = function () {
|
||||
// console.log('connection is opened');
|
||||
// };
|
||||
|
||||
// events.onmessage = onMessage;
|
||||
|
||||
// events.oncancel = () => {
|
||||
// dispatch(toggleCursor(true));
|
||||
// cancelHandler(latestResponseText, currentState, currentMsg);
|
||||
// };
|
||||
|
||||
// events.onerror = function (e) {
|
||||
// console.log('error in opening conn.');
|
||||
// events.close();
|
||||
|
||||
// const data = JSON.parse(e.data);
|
||||
// dispatch(toggleCursor(true));
|
||||
// errorHandler(data, currentState, currentMsg);
|
||||
// };
|
||||
|
||||
// events.stream();
|
||||
|
||||
// return () => {
|
||||
// events.removeEventListener('message', onMessage);
|
||||
// dispatch(toggleCursor(true));
|
||||
// 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();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = e => {
|
||||
if (e.keyCode === 8 && e.target.value.trim() === '') {
|
||||
setText(e.target.value);
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
return console.log('Enter + Shift');
|
||||
}
|
||||
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompositionStart = () => {
|
||||
isComposing.current = true;
|
||||
};
|
||||
|
||||
const handleCompositionEnd = () => {
|
||||
isComposing.current = false;
|
||||
};
|
||||
|
||||
const changeHandler = e => {
|
||||
const { value } = e.target;
|
||||
|
||||
setText(value);
|
||||
};
|
||||
|
||||
const isSearchView = messages?.[0]?.searchResult === true;
|
||||
const getPlaceholderText = () => {
|
||||
if (isSearchView) {
|
||||
return 'Click a message title to open its conversation.';
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
return 'Choose another model or customize GPT again';
|
||||
}
|
||||
|
||||
if (isNotAppendable) {
|
||||
return 'Edit your message or Regenerate.';
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleBingToneSetting = () => {
|
||||
setShowBingToneSetting(show => !show);
|
||||
};
|
||||
|
||||
if (isSearchView) return <></>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
<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">
|
||||
{/* <BingStyles
|
||||
ref={bingStylesRef}
|
||||
show={showBingToneSetting}
|
||||
/> */}
|
||||
{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={getPlaceholderText()}
|
||||
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 placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
|
||||
/>
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
disabled={disabled || isNotAppendable}
|
||||
/>
|
||||
{/* {messages?.length && model === 'sydney' ? (
|
||||
<AdjustToneButton onClick={handleBingToneSetting} />
|
||||
) : null} */}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue