convo successfully changes on convo click

models/Conversation.js

@@ -1,5 +1,5 @@
 const mongoose = require('mongoose');
-const { Message } = require('./Message');
+const { getMessages } = require('./Message');
 
 const convoSchema = mongoose.Schema({
   conversationId: {
@@ -27,7 +27,7 @@ const Conversation =
 
 module.exports = {
   saveConversation: async ({ conversationId, parentMessageId, title }) => {
-    const messages = await Message.find({ conversationId }).exec();
+    const messages = await getMessages({ conversationId });
     const update = { parentMessageId, messages };
     if (title) {
       update.title = title;

models/Message.js

@@ -40,5 +40,5 @@ module.exports = {
       text
     });
   },
-  Message,
+  getMessages: async (filter) => await Message.find(filter).exec(),
 }

models/dbConnect.js

@@ -1,3 +1,4 @@
+require('dotenv').config();
 const mongoose = require('mongoose');
 const MONGO_URI = process.env.MONGO_URI;
 

server/index.js

@@ -1,7 +1,7 @@
 const express = require('express');
-const { ask, titleConversation } = require('../app/chatgpt');
 const dbConnect = require('../models/dbConnect');
-const { saveMessage } = require('../models/Message');
+const { ask, titleConversation } = require('../app/chatgpt');
+const { saveMessage, getMessages } = require('../models/Message');
 const { saveConversation, getConversations } = require('../models/Conversation');
 const crypto = require('crypto');
 const path = require('path');
@@ -25,8 +25,9 @@ app.get('/convos', async (req, res) => {
   res.status(200).send(await getConversations());
 });
 
-app.get('/messages', async (req, res) => {
-  res.status(200).send(await getConversations());
+app.get('/messages/:conversationId', async (req, res) => {
+  const { conversationId } = req.params;
+  res.status(200).send(await getMessages({ conversationId }));
 });
 
 app.post('/ask', async (req, res) => {
@@ -44,7 +45,8 @@ app.post('/ask', async (req, res) => {
   });
 
   let i = 0;
-  const progressCallback = async (partial) => { // console.log('partial', partial);
+  const progressCallback = async (partial) => {
+    // console.log('partial', partial);
     if (i === 0) {
       userMessage.parentMessageId = parentMessageId ? parentMessageId : partial.id;
       userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
@@ -58,7 +60,6 @@ app.post('/ask', async (req, res) => {
 
   let gptResponse = await ask(text, progressCallback, { parentMessageId, conversationId });
   if (!!parentMessageId) {
-    // console.log('req parent vs res parent', parentMessageId, gptResponse.parentMessageId);
     gptResponse = { ...gptResponse, parentMessageId };
   } else {
     gptResponse.title = await titleConversation(text, gptResponse.text);

src/App.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Messages from './components/Messages';
 import TextChat from './components/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/MobileNav';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
+import useDidMountEffect from './hooks/useDidMountEffect.js';
 import axios from 'axios';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
@@ -13,23 +14,32 @@ const App = () => {
   const [messages, setMessages] = useState([]);
   const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
   const { data, error, isLoading, mutate } = useSWR('http://localhost:3050/convos', fetcher);
-  const { trigger, isMutating } = useSWRMutation('http://localhost:3050/messages', fetcher, {
-    onSuccess: function (res) {
-      console.log('success', res);
-      // setMessages(res);
+
+  const { trigger, isMutating } = useSWRMutation(
+    `http://localhost:3050/messages/${convo.conversationId}`,
+    fetcher,
+    {
+      onSuccess: function (res) {
+        console.log('success', res);
+        setMessages(res);
+      }
     }
-  });
+  );
+
+  useDidMountEffect(() => trigger(), [convo]);
 
   const onConvoClick = (conversationId, parentMessageId) => {
+    console.log('convo was clicked');
     setConvo({ conversationId, parentMessageId });
-    trigger();
-    // console.log(e, e.target);
   };
 
   return (
     <div className="flex h-screen">
       {/* <div className="w-80 bg-slate-800"></div> */}
-      <Nav conversations={data} convoHandler={onConvoClick}/>
+      <Nav
+        conversations={data}
+        convoHandler={onConvoClick}
+      />
       {/* <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"> */}

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>
   );

src/hooks/useDidMountEffect.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+const useDidMountEffect = (func, deps) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) {
+      func();
+    } else {
+      didMount.current = true;
+    }
+
+    return func;
+  }, deps);
+};
+
+export default useDidMountEffect;