convo successfully changes on convo click

src/components/Conversation.jsx

@@ -1,8 +1,16 @@
 import React from 'react';
 
-export default function Conversation({ id, title = 'New conversation'}) {
+export default function Conversation({
+  id,
+  parentMessageId,
+  convoHandler,
+  title = 'New conversation'
+}) {
   return (
-    <a className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800">
+    <a
+      onClick={() => convoHandler(id, parentMessageId)}
+      className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800"
+    >
       <svg
         stroke="currentColor"
         fill="none"

src/components/Conversations.jsx

@@ -9,8 +9,10 @@ export default function Conversations({ conversations, convoHandler }) {
           conversations.map((convo, i) => (
             <Conversation
               key={convo.conversationId}
+              id={convo.conversationId}
+              parentMessageId={convo.parentMessageId}
               title={convo.title}
-              onClick={() => convoHandler(convo.conversationId)}
+              convoHandler={convoHandler}
             />
           ))}
         {conversations && conversations.length >= 12 && (

src/components/Message.jsx

@@ -1,11 +1,23 @@
 import React from 'react';
 
 export default function Message({ sender, text }) {
+  const props = {
+    className:
+      'group w-full border-b border-black/10 text-gray-800 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-100'
+  };
+
+  if (sender === 'GPT') {
+    props.className =
+      'group w-full border-b border-black/10 bg-gray-100 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100';
+  }
+
   return (
-    <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">
-      <strong className="relative flex w-[30px] flex-col items-end">{sender}:</strong>
-      <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
-        {text}
+    <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">
+        <strong className="relative flex w-[30px] flex-col items-end">{sender}:</strong>
+        <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
+          {text}
+        </div>
       </div>
     </div>
   );