adds server and client error handling, clear convos in progress

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) => {