tests scrolling to top, show/hide templates

src/components/main/Landing.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { setText } from '~/store/textSlice';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
@@ -6,8 +6,10 @@ import Templates from '../Prompts/Templates';
 import SunIcon from '../svg/SunIcon';
 import LightningIcon from '../svg/LightningIcon';
 import CautionIcon from '../svg/CautionIcon';
+import ChatIcon from '../svg/ChatIcon';
 
 export default function Landing({ title }) {
+  const [showingTemplates, setShowingTemplates] = useState(false);
   const dispatch = useDispatch();
   useDocumentTitle(title);
 
@@ -17,6 +19,12 @@ export default function Landing({ title }) {
     const quote = innerText.split('"')[1].trim();
     dispatch(setText(quote));
   };
+
+  const showTemplates = (e) => {
+    e.preventDefault();
+    setShowingTemplates(!showingTemplates);
+  };
+
   return (
     <div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
@@ -85,10 +93,19 @@ export default function Landing({ title }) {
             </ul>
           </div>
         </div>
-        <Templates />
-        <div
-          className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
-        />
+        {!showingTemplates && (
+          <div className="mt-8 mb-4 flex flex-col items-center gap-3.5 md:mt-16">
+            <button
+              onClick={showTemplates}
+              className="btn btn-neutral justify-center gap-2 border-0 md:border"
+            >
+              <ChatIcon />
+              Show Prompt Templates
+            </button>
+          </div>
+        )}
+        {!!showingTemplates && <Templates showTemplates={showTemplates}/>}
+        <div className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48" />
       </div>
     </div>
   );

src/components/main/Message.jsx

@@ -40,7 +40,7 @@ export default function Message({ sender, text, last = false, error = false }) {
             ) : (
               <span>
                 {text}
-                {isSubmitting && last && sender === 'GPT' && <span className="blink">█</span>}
+                {isSubmitting && last && sender === 'GPT' && <span className="cursorBlink">█</span>}
               </span>
             )}
           </div>

src/components/main/Regenerate.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import RegenerateIcon from '../svg/RegenerateIcon';
 
-export default function Regenerate({ submitMessage, tryAgain }) {
+export default function Regenerate({ submitMessage, tryAgain, errorMessage }) {
   const clickHandler = (e) => {
     e.preventDefault();
     submitMessage();
@@ -9,18 +9,23 @@ export default function Regenerate({ submitMessage, tryAgain }) {
 
   return (
     <>
-      <span className="mb-2 block flex justify-center text-xs md:mb-2">
+      <span className="mb-2 block flex justify-center text-xs text-black dark:text-white/50 md:mb-2">
         There was an error generating a response
       </span>
       <span className="m-auto flex justify-center">
+        {!errorMessage.includes('short') && (
+          <button
+            onClick={clickHandler}
+            className="btn btn-primary m-auto flex justify-center gap-2"
+          >
+            <RegenerateIcon />
+            Regenerate response
+          </button>
+        )}
         <button
-          onClick={clickHandler}
-          className="btn btn-primary m-auto flex justify-center gap-2"
+          onClick={tryAgain}
+          className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
         >
-          <RegenerateIcon />
-          Regenerate response
-        </button>
-        <button onClick={tryAgain} className="btn btn-neutral flex justify-center gap-2 border-0 md:border">
           <RegenerateIcon />
           Try another message
         </button>

src/components/main/TextChat.jsx

@@ -10,6 +10,7 @@ import { setSubmitState } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 
 export default function TextChat({ messages, reloadConvos }) {
+  const [errorMessage, setErrorMessage] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
   const { isSubmitting } = useSelector((state) => state.submit);
@@ -35,8 +36,8 @@ export default function TextChat({ messages, reloadConvos }) {
     };
     const convoHandler = (data) => {
       if (convo.conversationId === null && convo.parentMessageId === null) {
-        const { conversationId, parentMessageId } = data;
-        dispatch(setConversation({ conversationId, parentMessageId: data.id }));
+        const { title, conversationId, parentMessageId } = data;
+        dispatch(setConversation({ title, conversationId, parentMessageId: data.id }));
       }
 
       reloadConvos();
@@ -50,6 +51,7 @@ export default function TextChat({ messages, reloadConvos }) {
         text: `An error occurred. Please try again in a few moments.\n\nError message: ${event.data}`,
         error: true
       };
+      setErrorMessage(event.data);
       dispatch(setSubmitState(false));
       dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
       dispatch(setText(payload));
@@ -105,6 +107,7 @@ export default function TextChat({ messages, reloadConvos }) {
             <Regenerate
               submitMessage={submitMessage}
               tryAgain={tryAgain}
+              errorMessage={errorMessage}
             />
           ) : (
             <div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-md dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-lg md:py-3 md:pl-4">