load convos on message send & other conditional rendering

models/Conversation.js

@@ -27,7 +27,7 @@ const Conversation =
 
 module.exports = {
   saveConversation: async ({ conversationId, parentMessageId, title }) => {
-    const messages = await Message.find({ conversationId });
+    const messages = await Message.find({ conversationId }).exec();
     const update = { parentMessageId, messages };
     if (title) {
       update.title = title;
@@ -39,7 +39,5 @@ module.exports = {
       { new: true, upsert: true }
     ).exec();
   },
-  getConversations: async () => {
-    return await Conversation.find({}).exec();
-  },
+  getConversations: async () => await Conversation.find({}).exec(),
 };

src/App.jsx

@@ -3,14 +3,19 @@ import Messages from './components/Messages';
 import TextChat from './components/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/MobileNav';
+import useSWR from 'swr';
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
 
 const App = () => {
   const [messages, setMessages] = useState([]);
+  const { data, error, isLoading, mutate } = useSWR('http://localhost:3050/convos', fetcher);
+  console.log(data, isLoading);
 
   return (
     <div className="flex h-screen">
       {/* <div className="w-80 bg-slate-800"></div> */}
-      <Nav />
+      <Nav conversations={data}/>
       {/* <div className="flex h-full flex-1 flex-col md:pl-[260px]"> */}
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         {/* <main className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1"> */}
@@ -19,6 +24,7 @@ const App = () => {
         <TextChat
           messages={messages}
           setMessages={setMessages}
+          reloadConvos={mutate}
         />
         {/* </main> */}
       </div>

src/components/Conversation.jsx

@@ -15,7 +15,7 @@ export default function Conversation({ id, title = 'New conversation'}) {
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
       </svg>
       <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
         {title}
@@ -34,8 +34,8 @@ export default function Conversation({ id, title = 'New conversation'}) {
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <path d="M12 20h9"></path>
-            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
           </svg>
         </button>
         <button className="p-1 hover:text-white">
@@ -52,7 +52,7 @@ export default function Conversation({ id, title = 'New conversation'}) {
             xmlns="http://www.w3.org/2000/svg"
           >
             <polyline points="3 6 5 6 21 6"></polyline>
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
             <line
               x1="10"
               y1="11"

src/components/Conversations.jsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations() {
+export default function Conversations({ conversations }) {
   return (
     <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
       <div className="flex flex-col gap-2 text-sm text-gray-100">
-        <Conversation />
+        {conversations &&
+          conversations.map((convo, i) => (
+            <Conversation
+              key={convo.conversationId}
+              title={convo.title}
+            />
+          ))}
+        {conversations && conversations.length >= 12 && (
           <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
             Show more
           </button>
+        )}
       </div>
     </div>
   );

src/components/Nav.jsx

@@ -3,14 +3,14 @@ import NewChat from './NewChat';
 import Conversations from './Conversations';
 import NavLinks from './NavLinks';
 
-export default function Nav() {
+export default function Nav({ conversations }) {
   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>

src/components/TextChat.jsx

@@ -39,7 +39,12 @@ const handleSubmit = (text, messageHandler, convo, convoHandler) => {
   events.stream();
 };
 
-export default function TextChat({ messages, setMessages, conversation = null }) {
+export default function TextChat({
+  messages,
+  setMessages,
+  reloadConvos,
+  conversation = null
+}) {
   const [text, setText] = useState('');
   const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
 
@@ -65,6 +70,8 @@ export default function TextChat({ messages, setMessages, conversation = null })
           const { conversationId, parentMessageId } = data;
           setConvo({ conversationId, parentMessageId: data.id });
         }
+
+        reloadConvos();
       };
       console.log('User Input:', payload);
       handleSubmit(payload, messageHandler, convo, convoHandler);
@@ -93,7 +100,7 @@ export default function TextChat({ messages, setMessages, conversation = null })
               onKeyUp={handleKeyPress}
               onChange={(e) => setText(e.target.value)}
               placeholder=""
-              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
+              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
             />
             <button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2">
               <svg

src/style.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
+/* * {
   box-sizing: border-box;
   outline: 1px solid limegreen !important;
-}
+} */