dark mode alternates to light mode on dark theme, error state in progress

src/App.jsx

@@ -9,9 +9,9 @@ import useDidMountEffect from './hooks/useDidMountEffect';
 
 const App = () => {
   const { messages } = useSelector((state) => state.messages);
-  const convo = useSelector((state) => state.convo);
+  const { conversationId } = useSelector((state) => state.convo);
   const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
-  useDidMountEffect(() => mutate(), [convo]);
+  useDidMountEffect(() => mutate(), [conversationId]);
 
   return (
     <div className="flex h-screen">

src/components/Nav/DarkMode.jsx

@@ -1,19 +1,21 @@
 import React, { useState, useContext } from 'react';
 import DarkModeIcon from '../svg/DarkModeIcon';
+import LightModeIcon from '../svg/LightModeIcon';
 import { ThemeContext } from '~/hooks/ThemeContext';
 
 export default function DarkMode() {
   const { theme, setTheme } = useContext(ThemeContext);
 
   const clickHandler = () => setTheme(theme === 'dark' ? 'light' : 'dark');
+  const mode = theme === 'dark' ? 'Light mode' : 'Dark mode';
 
   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 />
+      {theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
-      Dark mode
+      {mode}
     </a>
   );
 }

src/components/main/Regenerate.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export default function Regenerate({ submitMessage }) {
+
+  const clickHandler = (e) => {
+    e.preventDefault();
+    submitMessage();
+  };
+
+  return (
+      <span className="mb-3 block text-xs md:mb-auto">
+        There was an error generating a response
+      </span>
+      <button onClick={clickHandler} className="btn btn-primary m-auto flex justify-center gap-2">
+        <svg
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-3 w-3"
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline points="1 4 1 10 7 10"/>
+          <polyline points="23 20 23 14 17 14"/>
+          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
+        </svg>
+        Regenerate response
+      </button>
+  );
+}

src/components/main/TextChat.jsx

@@ -9,7 +9,6 @@ import { setSubmitState } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 
 export default function TextChat({ messages, reloadConvos }) {
-  // const [text, setText] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
   const { isSubmitting } = useSelector((state) => state.submit);
@@ -47,6 +46,7 @@ export default function TextChat({ messages, reloadConvos }) {
       };
       dispatch(setSubmitState(false));
       dispatch(setMessages([...messages, currentMsg, errorResponse]));
+      dispatch(setText(payload));
       return;
     };
     console.log('User Input:', payload);

src/components/svg/LightModeIcon.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export default function LightModeIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="5"
+      />
+      <line
+        x1="12"
+        y1="1"
+        x2="12"
+        y2="3"
+      />
+      <line
+        x1="12"
+        y1="21"
+        x2="12"
+        y2="23"
+      />
+      <line
+        x1="4.22"
+        y1="4.22"
+        x2="5.64"
+        y2="5.64"
+      />
+      <line
+        x1="18.36"
+        y1="18.36"
+        x2="19.78"
+        y2="19.78"
+      />
+      <line
+        x1="1"
+        y1="12"
+        x2="3"
+        y2="12"
+      />
+      <line
+        x1="21"
+        y1="12"
+        x2="23"
+        y2="12"
+      />
+      <line
+        x1="4.22"
+        y1="19.78"
+        x2="5.64"
+        y2="18.36"
+      />
+      <line
+        x1="18.36"
+        y1="5.64"
+        x2="19.78"
+        y2="4.22"
+      />
+    </svg>
+  );
+}

src/store/convoSlice.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   active: false,
+  error: false,
   conversationId: null,
   parentMessageId: null,
 };
@@ -13,10 +14,13 @@ const currentSlice = createSlice({
     setConversation: (state, action) => {
       return { ...state, ...action.payload };
     },
+    setError: (state, action) => {
+      state.error = action.payload;
+    },
   }
 });
 //
 
-export const { setConversation } = currentSlice.actions;
+export const { setConversation, setError } = currentSlice.actions;
 
 export default currentSlice.reducer;