adds server and client error handling, clear convos in progress

models/Conversation.js

@@ -27,25 +27,25 @@ const Conversation =
 
 module.exports = {
   saveConvo: async ({ conversationId, parentMessageId, title }) => {
-    const messages = await getMessages({ conversationId });
-    const update = { parentMessageId, messages };
-    if (title) {
-      update.title = title;
-    }
+    try {
+      const messages = await getMessages({ conversationId });
+      const update = { parentMessageId, messages };
+      if (title) {
+        update.title = title;
+      }
 
-    await Conversation.findOneAndUpdate(
-      { conversationId },
-      { $set: update },
-      { new: true, upsert: true }
-    ).exec();
+      return await Conversation.findOneAndUpdate(
+        { conversationId },
+        { $set: update },
+        { new: true, upsert: true }
+      ).exec();
+    } catch (error) {
+      console.log(error);
+      return { message: 'Error saving conversation' };
+    }
   },
   getConvos: async () => await Conversation.find({}).exec(),
   deleteConvos: async (filter) => {
-    // const filter = {};
-
-    // if (!!conversationId) {
-    //   filter = conversationId;
-    // }
 
     let deleteCount = await Conversation.deleteMany(filter).exec();
     deleteCount.messages = await deleteMessages(filter);

models/Message.js

@@ -32,13 +32,19 @@ const Message = mongoose.models.Message || mongoose.model('Message', messageSche
 
 module.exports = {
   saveMessage: async ({ id, conversationId, parentMessageId, sender, text }) => {
-    await Message.create({
-      id,
-      conversationId,
-      parentMessageId,
-      sender,
-      text
-    });
+    try {
+      await Message.create({
+        id,
+        conversationId,
+        parentMessageId,
+        sender,
+        text
+      });
+      return { id, conversationId, parentMessageId, sender, text };
+    } catch (error) {
+      console.error(error);
+      return { message: 'Error saving message' };
+    }
   },
   getMessages: async (filter) => await Message.find(filter).exec(),
   deleteMessages: async (filter) => await Message.deleteMany(filter).exec()

server/index.js

@@ -52,6 +52,8 @@ app.post('/ask', async (req, res) => {
   const userMessageId = crypto.randomUUID();
   let userMessage = { id: userMessageId, sender: 'User', text };
 
+  console.log(userMessage, req.body);
+
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -61,22 +63,23 @@ app.post('/ask', async (req, res) => {
   });
 
   // res.write(`event: message\ndata: ${JSON.stringify('')}\n\n`);
-
-  let i = 0;
-  const progressCallback = async (partial) => {
-    // console.log('partial', partial);
-    if (i === 0) {
-      userMessage.parentMessageId = parentMessageId ? parentMessageId : partial.id;
-      userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
-      await saveMessage(userMessage);
-      res.write(`event: message\ndata: ${JSON.stringify({ ...partial, initial: true })}\n\n`);
-      i++;
-    }
-    const data = JSON.stringify({ ...partial, message: true });
-    res.write(`event: message\ndata: ${data}\n\n`);
-  };
-
   try {
+    let i = 0;
+    const progressCallback = async (partial) => {
+      // console.log('partial', partial);
+      if (i === 0) {
+        userMessage.parentMessageId = parentMessageId ? parentMessageId : partial.id;
+        userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
+        await saveMessage(userMessage);
+        res.write(
+          `event: message\ndata: ${JSON.stringify({ ...partial, initial: true })}\n\n`
+        );
+        i++;
+      }
+      const data = JSON.stringify({ ...partial, message: true });
+      res.write(`event: message\ndata: ${data}\n\n`);
+    };
+
     let gptResponse = await ask(text, progressCallback, { parentMessageId, conversationId });
     if (!!parentMessageId) {
       gptResponse = { ...gptResponse, parentMessageId };
@@ -84,6 +87,12 @@ app.post('/ask', async (req, res) => {
       gptResponse.title = await titleConversation(text, gptResponse.text);
     }
 
+    if (gptResponse.text.includes('2023')) {
+      res.status(500).write('event: error\ndata: empty string error?');
+      res.end();
+      return;
+    }
+
     gptResponse.sender = 'GPT';
     await saveMessage(gptResponse);
     await saveConvo(gptResponse);
@@ -91,8 +100,9 @@ app.post('/ask', async (req, res) => {
     res.write(`event: message\ndata: ${JSON.stringify(gptResponse)}\n\n`);
     res.end();
   } catch (error) {
-    console.error(error);
-    res.status(500).send(error);
+    console.log(error);
+    res.status(500).write('event: error\ndata: ' + error.message);
+    res.end();
   }
 });
 

src/components/Nav/ClearConvos.jsx

@@ -18,7 +18,10 @@ export default function ClearConvos() {
     }
   );
 
-  const clickHandler = () => trigger({});
+  const clickHandler = () => {
+    console.log('Clearing conversations...');
+    trigger({});
+  };
 
   return (
     <NavLink

src/components/Nav/NavLink.jsx

@@ -8,6 +8,7 @@ export default function NavLink({ svg, text, clickHandler }) {
 
   if (clickHandler) {
     props.onClick = clickHandler;
+    console.log('clickHandler: ', clickHandler);
   }
 
   return (

src/components/main/Message.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-export default function Message({ sender, text, last = false}) {
+export default function Message({ sender, text, last = false, error = false }) {
   const { isSubmitting } = useSelector((state) => state.submit);
   const props = {
     className:
@@ -18,10 +18,20 @@ export default function Message({ sender, text, last = false}) {
       <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)]">
-          <span>
-            {text}
-            {isSubmitting && last && sender === 'GPT' && <span className="blink">█</span>}
-          </span>
+          <div className="flex flex-grow flex-col gap-3">
+            {!!error ? (
+              <div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
+                <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
+                  {text}
+                </div>
+              </div>
+            ) : (
+              <span>
+                {text}
+                {isSubmitting && last && sender === 'GPT' && <span className="blink">█</span>}
+              </span>
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/main/Messages.jsx

@@ -32,6 +32,7 @@ export default function Messages({ messages }) {
           sender={message.sender}
           text={message.text}
           last={i === messages.length - 1}
+          error={!!message.error ? true : false}
         />
       ))}
       <div ref={messagesEndRef} />

src/components/main/TextChat.jsx

@@ -35,8 +35,20 @@ export default function TextChat({ messages, reloadConvos }) {
       reloadConvos();
       dispatch(setSubmitState(false));
     };
+
+    const errorHandler = (data) => {
+      console.log('Error:', data);
+      const errorResponse = {
+        ...initialResponse,
+        text: 'An error occurred. Please try again in a few moments.',
+        error: true
+      };
+      dispatch(setSubmitState(false));
+      dispatch(setMessages([...messages, currentMsg, errorResponse]));
+      return;
+    };
     console.log('User Input:', payload);
-    handleSubmit(payload, messageHandler, convo, convoHandler);
+    handleSubmit({ text: payload, messageHandler, convo, convoHandler, errorHandler });
   };
 
   const handleKeyPress = (e) => {

src/utils/handleSubmit.js

@@ -1,6 +1,12 @@
 import { SSE } from '../../app/sse';
 
-export default function handleSubmit(text, messageHandler, convo, convoHandler) {
+export default function handleSubmit({
+  text,
+  convo,
+  messageHandler,
+  convoHandler,
+  errorHandler
+}) {
   let payload = { text };
   if (convo.conversationId && convo.parentMessageId) {
     payload = {
@@ -34,7 +40,8 @@ export default function handleSubmit(text, messageHandler, convo, convoHandler)
   events.onerror = function (e) {
     console.log(e, 'error in opening conn.');
     events.close();
+    errorHandler(e);
   };
 
   events.stream();
-};
+}