Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-29 06:38:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactors server route for brevity, state working, styling matching to chatgpt

Browse source
This commit is contained in:
Danny Avila 2023-02-13 13:32:54 -05:00
parent dcf4f2a524
commit acaef39d12
10 changed files with 75 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/Nav/ClearConvos.jsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import TrashIcon from '../svg/TrashIcon';
import { useSWRConfig } from "swr"
import manualSWR from '~/utils/fetchers';
import { useDispatch } from 'react-redux';
import { setConversation } from '~/store/convoSlice';
@ -7,6 +8,7 @@ import { setMessages } from '~/store/messageSlice';
export default function ClearConvos() {
const dispatch = useDispatch();
const { mutate } = useSWRConfig()
const { trigger, isMutating } = manualSWR(
'http://localhost:3050/convos/clear',
@ -14,6 +16,7 @@ export default function ClearConvos() {
() => {
dispatch(setMessages([]));
dispatch(setConversation({ error: false, conversationId: null, parentMessageId: null }));
mutate('http://localhost:3050/convos');
}
);

6
src/components/main/Message.jsx
View file

@ -14,6 +14,8 @@ export default function Message({ sender, text, last = false, error = false }) {
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
}
const blinker = isSubmitting && last && sender === 'GPT';
return (
<div {...props}>
<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">
@ -32,7 +34,7 @@ export default function Message({ sender, text, last = false, error = false }) {
<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-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
<div className="flex flex min-h-[20px] flex-row flex-col 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>
@ -40,7 +42,7 @@ export default function Message({ sender, text, last = false, error = false }) {
) : (
<span>
{text}
{isSubmitting && last && sender === 'GPT' && <span className="cursorBlink">█</span>}
{blinker && <span className="result-streaming">█</span>}
</span>
)}
</div>

12
src/components/main/Messages.jsx
View file

@ -1,9 +1,11 @@
import React, { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import useDocumentTitle from '~/hooks/useDocumentTitle';
import useDidMountEffect from '~/hooks/useDidMountEffect';
import Message from './Message';
import Landing from './Landing';
export default function Messages({ messages, title }) {
export default function Messages({ title, messages }) {
if (messages.length === 0) {
return <Landing title={title}/>;
}
@ -18,9 +20,11 @@ export default function Messages({ messages, title }) {
// this useEffect triggers the following warning:
// Warning: Internal React error: Expected static flag was missing.
useEffect(() => {
scrollToBottom();
}, [messages]);
// useEffect(() => {
// scrollToBottom();
// }, [messages]);
useDidMountEffect(() => scrollToBottom(), [messages]);
return (
<div className="flex-1 overflow-y-auto ">

2
src/components/main/TextChat.jsx
View file

@ -10,7 +10,7 @@ import { setMessages } from '~/store/messageSlice';
import { setSubmitState } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
export default function TextChat({ messages, reloadConvos }) {
export default function TextChat({ messages }) {
const [errorMessage, setErrorMessage] = useState('');
const dispatch = useDispatch();
const convo = useSelector((state) => state.convo);