adds dark mode and logs errors in message response

src/App.jsx

@@ -19,14 +19,15 @@ const App = () => {
       <Nav conversations={data} />
       {/* <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"> */}
+        <div className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1">
+
         <MobileNav />
         <Messages messages={messages} />
         <TextChat
           messages={messages}
           reloadConvos={mutate}
         />
-        {/* </main> */}
+        </div>
       </div>
     </div>
   );

src/components/Nav/ClearConvos.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import NavLink from './NavLink';
 import TrashIcon from '../svg/TrashIcon';
 import manualSWR from '~/utils/fetchers';
 import { useDispatch } from 'react-redux';

src/components/Nav/DarkMode.jsx

@@ -0,0 +1,19 @@
+import React, { useState, useContext } from 'react';
+import DarkModeIcon from '../svg/DarkModeIcon';
+import { ThemeContext } from '~/hooks/ThemeContext';
+
+export default function DarkMode() {
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  const clickHandler = () => setTheme(theme === 'dark' ? 'light' : 'dark');
+
+  return (
+    <a
+      className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      onClick={clickHandler}
+    >
+      <DarkModeIcon />
+      Dark mode
+    </a>
+  );
+}

src/components/Nav/NavLinks.jsx

@@ -1,17 +1,14 @@
 import React from 'react';
-import ClearConvos from './ClearConvos';
 import NavLink from './NavLink';
-import DarkModeIcon from '../svg/DarkModeIcon';
 import LogOutIcon from '../svg/LogOutIcon';
+import ClearConvos from './ClearConvos';
+import DarkMode from './DarkMode';
 
 export default function NavLinks() {
   return (
     <>
       <ClearConvos />
-      <NavLink
-        svg={DarkModeIcon}
-        text="Dark mode"
-      />
+      <DarkMode />
       <NavLink
         svg={LogOutIcon}
         text="Log out"

src/components/main/Message.jsx

@@ -5,12 +5,12 @@ export default function Message({ sender, text, last = false, error = false }) {
   const { isSubmitting } = useSelector((state) => state.submit);
   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'
+      'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
   };
 
   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';
+      'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]';
   }
 
   return (

src/components/main/Messages.jsx

@@ -3,10 +3,9 @@ import Message from './Message';
 import Landing from './Landing';
 
 export default function Messages({ messages }) {
-
   if (messages.length === 0) {
-    return <Landing />
-  };
+    return <Landing />;
+  }
 
   const messagesEndRef = useRef(null);
 
@@ -25,17 +24,22 @@ export default function Messages({ messages }) {
   // </div>
   // <div className="flex h-full text-sm dark:bg-gray-800"></div>;
   return (
-    <div className="flex-1 overflow-y-auto ">
-      {messages.map((message, i) => (
-        <Message
-          key={i}
-          sender={message.sender}
-          text={message.text}
-          last={i === messages.length - 1}
-          error={!!message.error ? true : false}
-        />
-      ))}
-      <div ref={messagesEndRef} />
+    // <div className="flex-1 overflow-y-auto ">
+    <div className="flex-1 overflow-hidden">
+      <div className="h-full dark:bg-gray-800">
+        <div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
+          {messages.map((message, i) => (
+            <Message
+              key={i}
+              sender={message.sender}
+              text={message.text}
+              last={i === messages.length - 1}
+              error={!!message.error ? true : false}
+            />
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
     </div>
   );
 }

src/components/main/TextChat.jsx

@@ -36,11 +36,11 @@ export default function TextChat({ messages, reloadConvos }) {
       dispatch(setSubmitState(false));
     };
 
-    const errorHandler = (data) => {
-      console.log('Error:', data);
+    const errorHandler = (event) => {
+      console.log('Error:', event);
       const errorResponse = {
         ...initialResponse,
-        text: 'An error occurred. Please try again in a few moments.',
+        text: `An error occurred. Please try again in a few moments.\n\nError message: ${event.data}`,
         error: true
       };
       dispatch(setSubmitState(false));
@@ -80,7 +80,7 @@ export default function TextChat({ messages, reloadConvos }) {
   };
 
   return (
-    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
+    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
       <form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
           <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />

src/hooks/ThemeContext.js

@@ -0,0 +1,45 @@
+//ThemeContext.js
+
+import React, { createContext, useState, useEffect } from 'react';
+
+const getInitialTheme = () => {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedPrefs = window.localStorage.getItem('color-theme');
+    if (typeof storedPrefs === 'string') {
+      return storedPrefs;
+    }
+
+    const userMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    if (userMedia.matches) {
+      return 'dark';
+    }
+  }
+
+  return 'light'; // light theme as the default;
+};
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ initialTheme, children }) => {
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  const rawSetTheme = (rawTheme) => {
+    const root = window.document.documentElement;
+    const isDark = rawTheme === 'dark';
+
+    root.classList.remove(isDark ? 'light' : 'dark');
+    root.classList.add(rawTheme);
+
+    localStorage.setItem('color-theme', rawTheme);
+  };
+
+  if (initialTheme) {
+    rawSetTheme(initialTheme);
+  }
+
+  useEffect(() => {
+    rawSetTheme(theme);
+  }, [theme]);
+
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+};

src/utils/handleSubmit.js

@@ -38,7 +38,7 @@ export default function handleSubmit({
   };
 
   events.onerror = function (e) {
-    console.log(e, 'error in opening conn.');
+    console.log('error in opening conn.');
     events.close();
     errorHandler(e);
   };