persist models in localStorage, minor changes

src/App.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Messages from './components/main/Messages';
+import Messages from './components/Main/Messages';
-import Landing from './components/main/Landing';
+import Landing from './components/Main/Landing';
-import TextChat from './components/main/TextChat';
+import TextChat from './components/Main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
 import useDocumentTitle from '~/hooks/useDocumentTitle';

src/components/main/Landing.jsx

@@ -42,19 +42,19 @@ export default function Landing({ title }) {
                 onClick={clickHandler}
                 className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
               >
-                "Explain quantum computing in simple terms" →
+                "Explain quantum computing in simple terms" →
               </button>
               <button
                 onClick={clickHandler}
                 className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
               >
-                "Got any creative ideas for a 10 year old's birthday?" →
+                &quot;Got any creative ideas for a 10 year old&apos;s birthday?&quot; →
               </button>
               <button
                 onClick={clickHandler}
                 className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
               >
-                "How do I make an HTTP request in Javascript?" →
+                &quot;How do I make an HTTP request in Javascript?&quot; →
               </button>
             </ul>
           </div>

src/components/main/ModelMenu.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setModel } from '~/store/submitSlice';
 import GPTIcon from '../svg/GPTIcon';
@@ -22,6 +22,18 @@ export default function ModelMenu() {
     dispatch(setModel(value));
   };
 
+  useEffect(() => {
+    const lastSelectedModel = JSON.parse(localStorage.getItem('model'));
+    if (lastSelectedModel) {
+      dispatch(setModel(lastSelectedModel));
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('model', JSON.stringify(model));
+  }, [model]);
+
   const defaultColorProps = [
     'text-gray-500',
     'hover:bg-gray-100',

src/components/main/TextChat.jsx

@@ -112,14 +112,14 @@ export default function TextChat({ messages }) {
 
   const handleKeyUp = (e) => {
     if (e.key === 'Enter' && e.shiftKey) {
-      console.log('Enter + Shift');
+      return console.log('Enter + Shift');
+    }
+
+    if (isSubmitting) {
+      return;
     }
 
     if (e.key === 'Enter' && !e.shiftKey) {
-      if (isSubmitting) {
-        return;
-      }
-
       submitMessage();
     }
   };
@@ -160,7 +160,7 @@ export default function TextChat({ messages }) {
                 onKeyDown={handleKeyDown}
                 onChange={changeHandler}
                 placeholder=""
-                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-9 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
               />
               <SubmitButton submitMessage={submitMessage} />
             </div>

src/utils/fetchers.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import axios from 'axios';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';

src/utils/index.js

@@ -1,4 +1,4 @@
-import { ClassValue, clsx } from 'clsx';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs) {