feat: loading state for messages

client/src/components/Conversations/Conversation.jsx

@@ -3,8 +3,8 @@ import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
 import { useSelector, useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
-import { setCustomGpt, setModel, setCustomModel } from '~/store/submitSlice';
-import { setMessages } from '~/store/messageSlice';
+import { setStopStream, setCustomGpt, setModel, setCustomModel } from '~/store/submitSlice';
+import { setMessages, setEmptyMessage } from '~/store/messageSlice';
 import { setText } from '~/store/textSlice';
 import manualSWR from '~/utils/fetchers';
 import ConvoIcon from '../svg/ConvoIcon';
@@ -23,7 +23,7 @@ export default function Conversation({
   const { modelMap } = useSelector((state) => state.models);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
-  const { trigger } = manualSWR(`/api/messages/${id}`, 'get');
+  const { trigger, isMutating } = manualSWR(`/api/messages/${id}`, 'get');
   const rename = manualSWR(`/api/convos/update`, 'post');
 
   const clickHandler = async () => {
@@ -31,6 +31,9 @@ export default function Conversation({
       return;
     }
 
+    dispatch(setStopStream(true));
+    dispatch(setEmptyMessage());
+
     const convo = { title, error: false, conversationId: id, chatGptLabel, promptPrefix };
 
     if (bingData) {
@@ -64,6 +67,12 @@ export default function Conversation({
       );
     }
     const data = await trigger();
+    // while (isMutating) {
+    //   await new Promise((resolve) => setTimeout(() => {
+    //     dispatch(setMessages([]));
+    //     resolve();
+    //   }, 50));
+    // }
 
     if (chatGptLabel) {
       dispatch(setModel('chatgptCustom'));
@@ -81,6 +90,7 @@ export default function Conversation({
     dispatch(setMessages(data));
     dispatch(setCustomGpt(convo));
     dispatch(setText(''));
+    dispatch(setStopStream(false));
   };
 
   const renameHandler = (e) => {

client/src/components/Main/TextChat.jsx

@@ -16,7 +16,7 @@ export default function TextChat({ messages }) {
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
-  const { isSubmitting, disabled, model, chatGptLabel, promptPrefix } = useSelector(
+  const { isSubmitting, stopStream, disabled, model, chatGptLabel, promptPrefix } = useSelector(
     (state) => state.submit
   );
   const { text } = useSelector((state) => state.text);
@@ -38,7 +38,12 @@ export default function TextChat({ messages }) {
     const initialResponse = { sender, text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));
-    const messageHandler = (data) => {
+    const messageHandler = (data, events) => {
+      if (stopStream) {
+        console.log('Stopping stream');
+        events.close();
+        return;
+      }
       dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
     };
     const convoHandler = (data) => {

client/src/components/Messages/Message.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import HoverButtons from './HoverButtons';
+import Spinner from '../svg/Spinner';
 
 export default function Message({
   sender,
@@ -22,6 +23,10 @@ export default function Message({
       scrollToBottom();
     }
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+  
+  if (sender === '') {
+    return <Spinner />;
+  }
 
   const handleWheel = () => {
     if (blinker) {