load convos on message send & other conditional rendering

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 />
-        <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
-          Show more
-        </button>
+        {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