mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 17:30:16 +01:00
debugging convo state, useSWR now within convos component
This commit is contained in:
Danny Avila
parent
0e5c7c7721
commit
dcf4f2a524
6 changed files with 213 additions and 15 deletions
File diff suppressed because one or more lines are too long
|
|
@ -4,26 +4,20 @@ import Messages from './components/main/Messages';
|
|||
import TextChat from './components/main/TextChat';
|
||||
import Nav from './components/Nav';
|
||||
import MobileNav from './components/Nav/MobileNav';
|
||||
import { swr } from './utils/fetchers';
|
||||
import useDidMountEffect from './hooks/useDidMountEffect';
|
||||
|
||||
const App = () => {
|
||||
const { messages } = useSelector((state) => state.messages);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const { title } = useSelector((state) => state.convo);
|
||||
const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
|
||||
useDidMountEffect(() => mutate(), [conversationId]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<Nav conversations={data} />
|
||||
<Nav />
|
||||
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
|
||||
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden dark:bg-gray-800">
|
||||
<MobileNav />
|
||||
<Messages messages={messages} title={title}/>
|
||||
<TextChat
|
||||
messages={messages}
|
||||
reloadConvos={mutate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import Conversation from './Conversation';
|
||||
import { swr } from '~/utils/fetchers';
|
||||
import useDidMountEffect from '~/hooks/useDidMountEffect';
|
||||
|
||||
export default function Conversations({ conversations }) {
|
||||
export default function Conversations() {
|
||||
const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
|
||||
const conversations = data;
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
|
||||
useDidMountEffect(() => mutate(), [conversationId]);
|
||||
// const currentRef = useRef(null);
|
||||
|
||||
// const scrollToTop = () => {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ import NewChat from './NewChat';
|
|||
import Conversations from '../Conversations';
|
||||
import NavLinks from './NavLinks';
|
||||
|
||||
export default function Nav({ conversations, conversationId }) {
|
||||
export default function Nav() {
|
||||
return (
|
||||
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
|
||||
<div className="flex h-full min-h-0 flex-col ">
|
||||
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
|
||||
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<NewChat />
|
||||
<Conversations conversations={conversations} />
|
||||
<Conversations />
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,14 @@ export default function TextChat({ messages, reloadConvos }) {
|
|||
const convoHandler = (data) => {
|
||||
console.log('in convo handler');
|
||||
if (convo.conversationId === null && convo.parentMessageId === null) {
|
||||
const { title, conversationId, parentMessageId } = data;
|
||||
const { title, conversationId, id } = data;
|
||||
console.log('convo is null');
|
||||
dispatch(setConversation({ title, conversationId, parentMessageId: data.id }));
|
||||
console.log('title, convoId, id', title, conversationId, id);
|
||||
dispatch(setConversation({ title, conversationId, parentMessageId: id }));
|
||||
console.log('convo after dispatch', convo);
|
||||
}
|
||||
|
||||
reloadConvos();
|
||||
// reloadConvos();
|
||||
dispatch(setSubmitState(false));
|
||||
};
|
||||
|
||||
|
|
@ -111,7 +113,7 @@ export default function TextChat({ messages, reloadConvos }) {
|
|||
errorMessage={errorMessage}
|
||||
/>
|
||||
) : (
|
||||
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-md dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-lg md:py-3 md:pl-4">
|
||||
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
|
||||
<TextareaAutosize
|
||||
tabIndex="0"
|
||||
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
|
||||
|
|
|
|||
196
src/style.css
196
src/style.css
|
|
@ -392,3 +392,199 @@ body,html {
|
|||
.text-ellipsis,.truncate {
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\],
|
||||
.shadow-lg {
|
||||
box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);
|
||||
box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:visible {
|
||||
visibility:visible
|
||||
}
|
||||
.group:hover .group-hover\:from-\[\#2A2B32\] {
|
||||
--tw-gradient-from:#2a2b32;
|
||||
--tw-gradient-to:rgba(42,43,50,0);
|
||||
--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
|
||||
}
|
||||
.group:hover .group-hover\:text-gray-500 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(142,142,160,var(--tw-text-opacity))
|
||||
}
|
||||
.group:hover .group-hover\:text-gray-700 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(64,65,79,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:prose-invert {
|
||||
--tw-prose-body:var(--tw-prose-invert-body);
|
||||
--tw-prose-headings:var(--tw-prose-invert-headings);
|
||||
--tw-prose-lead:var(--tw-prose-invert-lead);
|
||||
--tw-prose-links:var(--tw-prose-invert-links);
|
||||
--tw-prose-bold:var(--tw-prose-invert-bold);
|
||||
--tw-prose-counters:var(--tw-prose-invert-counters);
|
||||
--tw-prose-bullets:var(--tw-prose-invert-bullets);
|
||||
--tw-prose-hr:var(--tw-prose-invert-hr);
|
||||
--tw-prose-quotes:var(--tw-prose-invert-quotes);
|
||||
--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
|
||||
--tw-prose-captions:var(--tw-prose-invert-captions);
|
||||
--tw-prose-code:var(--tw-prose-invert-code);
|
||||
--tw-prose-pre-code:var(--tw-prose-invert-pre-code);
|
||||
--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
|
||||
--tw-prose-th-borders:var(--tw-prose-invert-th-borders);
|
||||
--tw-prose-td-borders:var(--tw-prose-invert-td-borders)
|
||||
}
|
||||
.dark .dark\:border-gray-600 {
|
||||
--tw-border-opacity:1;
|
||||
border-color:rgba(86,88,105,var(--tw-border-opacity))
|
||||
}
|
||||
.dark .dark\:border-gray-900\/50 {
|
||||
border-color:rgba(32,33,35,.5)
|
||||
}
|
||||
.dark .dark\:border-gray-700 {
|
||||
--tw-border-opacity:1;
|
||||
border-color:rgba(64,65,79,var(--tw-border-opacity))
|
||||
}
|
||||
.dark .dark\:border-white\/20 {
|
||||
border-color:hsla(0,0%,100%,.2)
|
||||
}
|
||||
.dark .dark\:border-white\/10 {
|
||||
border-color:hsla(0,0%,100%,.1)
|
||||
}
|
||||
.dark .dark\:border-black\/20 {
|
||||
border-color:rgba(0,0,0,.2)
|
||||
}
|
||||
.dark .dark\:bg-gray-800 {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(52,53,65,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:bg-\[\#444654\] {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(68,70,84,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:bg-gray-700 {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(64,65,79,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:bg-gray-800\/90 {
|
||||
background-color:rgba(52,53,65,.9)
|
||||
}
|
||||
.dark .dark\:bg-gray-900 {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(32,33,35,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:bg-transparent {
|
||||
background-color:transparent
|
||||
}
|
||||
.dark .dark\:bg-white\/10 {
|
||||
background-color:hsla(0,0%,100%,.1)
|
||||
}
|
||||
.dark .dark\:bg-white\/5 {
|
||||
background-color:hsla(0,0%,100%,.05)
|
||||
}
|
||||
.dark .dark\:bg-gray-500 {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(142,142,160,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:bg-green-700 {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(26,127,100,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:text-gray-100 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(236,236,241,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-gray-200 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(217,217,227,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-gray-400 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(172,172,190,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-white {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(255,255,255,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-white\/50 {
|
||||
color:hsla(0,0%,100%,.5)
|
||||
}
|
||||
.dark .dark\:text-gray-600 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(86,88,105,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-gray-500 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(142,142,160,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:text-gray-300 {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(197,197,210,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:opacity-100 {
|
||||
opacity:1
|
||||
}
|
||||
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
|
||||
--tw-shadow:0 0 15px rgba(0,0,0,.1);
|
||||
--tw-shadow-colored:0 0 15px var(--tw-shadow-color);
|
||||
box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);
|
||||
box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
|
||||
}
|
||||
.dark .dark\:ring-gray-600 {
|
||||
--tw-ring-opacity:1;
|
||||
--tw-ring-color:rgba(86,88,105,var(--tw-ring-opacity))
|
||||
}
|
||||
.dark .dark\:ring-white\/20 {
|
||||
--tw-ring-color:hsla(0,0%,100%,.2)
|
||||
}
|
||||
.dark .dark\:last\:border-0:last-child {
|
||||
border-width:0
|
||||
}
|
||||
.dark .dark\:hover\:bg-black\/10:hover {
|
||||
background-color:rgba(0,0,0,.1)
|
||||
}
|
||||
.dark .dark\:hover\:bg-gray-700:hover {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(64,65,79,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:hover\:bg-gray-900:hover {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(32,33,35,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity:1;
|
||||
background-color:rgba(236,236,241,var(--tw-bg-opacity))
|
||||
}
|
||||
.dark .dark\:hover\:bg-gray-500\/10:hover {
|
||||
background-color:hsla(240,9%,59%,.1)
|
||||
}
|
||||
.dark .dark\:hover\:text-gray-200:hover {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(217,217,227,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:hover\:text-white:hover {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(255,255,255,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:hover\:text-gray-400:hover {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(172,172,190,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:focus\:border-white:focus {
|
||||
--tw-border-opacity:1;
|
||||
border-color:rgba(255,255,255,var(--tw-border-opacity))
|
||||
}
|
||||
.dark .dark\:focus\:ring-white:focus {
|
||||
--tw-ring-opacity:1;
|
||||
--tw-ring-color:rgba(255,255,255,var(--tw-ring-opacity))
|
||||
}
|
||||
.dark .dark\:disabled\:text-gray-400:disabled {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(172,172,190,var(--tw-text-opacity))
|
||||
}
|
||||
.dark .dark\:disabled\:hover\:bg-transparent:hover:disabled {
|
||||
background-color:transparent
|
||||
}
|
||||
.dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
|
||||
--tw-text-opacity:1;
|
||||
color:rgba(172,172,190,var(--tw-text-opacity))
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue