refactors server route for brevity, state working, styling matching to chatgpt

src/App.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import Messages from './components/main/Messages';
 import TextChat from './components/main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
+import { useSelector } from 'react-redux';
 
 const App = () => {
+
   const { messages } = useSelector((state) => state.messages);
-  const { title } = useSelector((state) => state.convo);
+  const convo = useSelector((state) => state.convo);
 
   return (
     <div className="flex h-screen">
@@ -15,10 +16,8 @@ const App = () => {
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden dark:bg-gray-800">
           <MobileNav />
-          <Messages messages={messages} title={title}/>
-          <TextChat
-            messages={messages}
-          />
+          <Messages messages={messages} title={convo.title}/>
+          <TextChat messages={messages}/>
         </div>
       </div>
     </div>

src/components/Nav/ClearConvos.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import TrashIcon from '../svg/TrashIcon';
+import { useSWRConfig } from "swr"
 import manualSWR from '~/utils/fetchers';
 import { useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
@@ -7,6 +8,7 @@ import { setMessages } from '~/store/messageSlice';
 
 export default function ClearConvos() {
   const dispatch = useDispatch();
+  const { mutate } = useSWRConfig()
 
   const { trigger, isMutating } = manualSWR(
     'http://localhost:3050/convos/clear',
@@ -14,6 +16,7 @@ export default function ClearConvos() {
     () => {
       dispatch(setMessages([]));
       dispatch(setConversation({ error: false, conversationId: null, parentMessageId: null }));
+      mutate('http://localhost:3050/convos');
     }
   );
 

src/components/main/Message.jsx

@@ -14,6 +14,8 @@ export default function Message({ sender, text, last = false, error = false }) {
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
   }
 
+  const blinker = isSubmitting && last && sender === 'GPT';
+
   return (
     <div {...props}>
       <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">
@@ -32,7 +34,7 @@ export default function Message({ sender, text, last = false, error = false }) {
         <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
           <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="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>
@@ -40,7 +42,7 @@ export default function Message({ sender, text, last = false, error = false }) {
             ) : (
               <span>
                 {text}
-                {isSubmitting && last && sender === 'GPT' && <span className="cursorBlink">█</span>}
+                {blinker && <span className="result-streaming">█</span>}
               </span>
             )}
           </div>

src/components/main/Messages.jsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
+import useDidMountEffect from '~/hooks/useDidMountEffect';
 import Message from './Message';
 import Landing from './Landing';
 
-export default function Messages({ messages, title }) {
+export default function Messages({ title, messages }) {
   if (messages.length === 0) {
     return <Landing title={title}/>;
   }
@@ -18,9 +20,11 @@ export default function Messages({ messages, title }) {
 
   // this useEffect triggers the following warning:
   // Warning: Internal React error: Expected static flag was missing.
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+  // useEffect(() => {
+  //   scrollToBottom();
+  // }, [messages]);
+
+  useDidMountEffect(() => scrollToBottom(), [messages]);
 
   return (
     <div className="flex-1 overflow-y-auto ">

src/components/main/TextChat.jsx

@@ -10,7 +10,7 @@ import { setMessages } from '~/store/messageSlice';
 import { setSubmitState } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 
-export default function TextChat({ messages, reloadConvos }) {
+export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);

src/store/convoSlice.js

@@ -1,4 +1,4 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, current } from '@reduxjs/toolkit';
 
 const initialState = {
   error: false,

src/store/index.js

@@ -11,5 +11,6 @@ export const store = configureStore({
     messages: messageReducer,
     text: textReducer,
     submit: submitReducer,
-  }
+  },
+  devTools: true,
 });

src/style.css

@@ -587,4 +587,23 @@ body,html {
  .dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
   --tw-text-opacity:1;
   color:rgba(172,172,190,var(--tw-text-opacity))
+ }
+
+/* .result-streaming>:not(ol):not(ul):not(pre):last-child:after,
+.result-streaming>ol:last-child li:last-child:after,
+.result-streaming>pre:last-child code:after,
+.result-streaming>ul:last-child li:last-child:after {
+ -webkit-animation:blink 1s steps(5,start) infinite;
+ animation:blink 1s steps(5,start) infinite;
+ content:"▋";
+ margin-left:.25rem;
+ vertical-align:baseline
+} */
+
+.result-streaming {
+  -webkit-animation:blink 1s steps(5,start) infinite;
+  animation:blink 1s steps(5,start) infinite;
+  /* content:"▋"; */
+  margin-left:.25rem;
+  vertical-align:baseline
  }