Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: basic message and send message. as well as model

Browse source 
THIS IS NOT FINISHED. DONT USE THIS
This commit is contained in:
Wentao Lyu 2023-03-28 22:39:27 +08:00
parent de8f519742
commit c7c30d8bb5
24 changed files with 1057 additions and 1035 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,30 @@
import React, { useEffect, useState, useRef, useCallback } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import Spinner from '../svg/Spinner';
import { throttle } from 'lodash';
import { CSSTransition } from 'react-transition-group';
import ScrollToBottom from './ScrollToBottom';
import MultiMessage from './MultiMessage';
import { useSelector } from 'react-redux';
export default function Messages({ messages, messageTree }) {
import store from '~/store';
export default function Messages() {
const [currentEditId, setCurrentEditId] = useState(-1);
const { conversationId } = useSelector((state) => state.convo);
const { model, customModel } = useSelector((state) => state.submit);
const { models } = useSelector((state) => state.models);
const messagesTree = useRecoilValue(store.messagesTree);
const conversation = useRecoilValue(store.conversation) || {};
const { conversationId, model, chatGptLabel } = conversation;
const models = useRecoilValue(store.models) || [];
const [showScrollButton, setShowScrollButton] = useState(false);
const scrollableRef = useRef(null);
const messagesEndRef = useRef(null);
const modelName = models.find((element) => element.model == model)?.name;
const modelName = models.find(element => element.model == model)?.name;
useEffect(() => {
const timeoutId = setTimeout(() => {
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const diff = Math.abs(scrollHeight - scrollTop);
const percent = Math.abs(clientHeight - diff ) / clientHeight;
const percent = Math.abs(clientHeight - diff) / clientHeight;
const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
setShowScrollButton(hasScrollbar);
}, 650);
@ -33,17 +36,24 @@ export default function Messages({ messages, messageTree }) {
clearTimeout(timeoutId);
window.removeEventListener('scroll', handleScroll);
};
}, [messages]);
}, [messagesTree]);
const scrollToBottom = useCallback(throttle(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
setShowScrollButton(false);
}, 750, { leading: true }), [messagesEndRef]);
const scrollToBottom = useCallback(
throttle(
() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
setShowScrollButton(false);
},
750,
{ leading: true }
),
[messagesEndRef]
);
const handleScroll = () => {
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const diff = Math.abs(scrollHeight - scrollTop);
const percent = Math.abs(clientHeight - diff ) / clientHeight;
const percent = Math.abs(clientHeight - diff) / clientHeight;
if (percent <= 0.2) {
setShowScrollButton(false);
} else {
@ -57,7 +67,7 @@ export default function Messages({ messages, messageTree }) {
timeoutId = setTimeout(handleScroll, 100);
};
const scrollHandler = (e) => {
const scrollHandler = e => {
e.preventDefault();
scrollToBottom();
};
@ -68,20 +78,19 @@ export default function Messages({ messages, messageTree }) {
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}
Model: {modelName} {chatGptLabel ? `(${chatGptLabel})` : null}
</div>
{(messageTree.length === 0 || !messages) ? (
{messagesTree === null ? (
<Spinner />
) : (
<>
<MultiMessage
key={conversationId} // avoid internal state mixture
messageList={messageTree}
messages={messages}
conversation={conversation}
messagesTree={messagesTree}
scrollToBottom={scrollToBottom}
currentEditId={currentEditId}
setCurrentEditId={setCurrentEditId}
@ -103,7 +112,6 @@ export default function Messages({ messages, messageTree }) {
/>
</div>
</div>
{/* </div> */}
</div>
);
}