feat: update message status handler

src/components/ChatView/MessageTextarea.tsx

@@ -56,7 +56,7 @@ const MessageTextarea = (props: Props) => {
       creatorRole: CreatorRole.User,
       createdAt: Date.now(),
       content: value,
-      isGenerated: true,
+      status: "DONE",
     });
     setValue("");
     textareaRef.current!.value = "";

src/components/ChatView/MessageView.tsx

@@ -1,6 +1,7 @@
 import { Menu, MenuItem } from "@mui/material";
 import dayjs from "dayjs";
 import { ReactElement, useState } from "react";
+import { ThreeDots } from "react-loader-spinner";
 import { toast } from "react-hot-toast";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -68,9 +69,17 @@ const MessageView = (props: Props) => {
               <img className="w-10 h-auto p-1" src="/chat-logo-bot.webp" alt="" />
             )}
           </div>
+          {message.status === "LOADING" && message.content === "" ? (
+            <div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg">
+              <ThreeDots wrapperClass="opacity-80" width="24" height="24" color="" />
+            </div>
+          ) : (
+            <>
               <div className="w-auto max-w-[calc(100%-4rem)] flex flex-col justify-start items-start">
                 <ReactMarkdown
-              className="w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral"
+                  className={`w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral ${
+                    message.status === "FAILED" && "border border-red-400 bg-red-100 text-red-500"
+                  }`}
                   remarkPlugins={[remarkGfm]}
                   components={{
                     pre({ node, className, children, ...props }) {
@@ -125,6 +134,8 @@ const MessageView = (props: Props) => {
               </div>
             </>
           )}
+        </>
+      )}
     </div>
   );
 };

src/components/ChatView/index.tsx

@@ -8,7 +8,6 @@ import Header from "./Header";
 import EmptyView from "../EmptyView";
 import MessageView from "./MessageView";
 import MessageTextarea from "./MessageTextarea";
-import MessageLoader from "../MessageLoader";
 import DataStorageBanner from "../DataStorageBanner";
 
 // The maximum number of tokens that can be sent to the OpenAI API.
@@ -19,17 +18,29 @@ const ChatView = () => {
   const connectionStore = useConnectionStore();
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
-  const [isRequesting, setIsRequesting] = useState<boolean>(false);
+  const [isStickyAtBottom, setIsStickyAtBottom] = useState<boolean>(true);
   const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
   const chatViewRef = useRef<HTMLDivElement>(null);
   const currentChat = chatStore.currentChat;
   const messageList = messageStore.messageList.filter((message) => message.chatId === currentChat?.id);
   const lastMessage = last(messageList);
 
-  // Toggle header shadow.
   useEffect(() => {
+    messageStore.messageList.map((message) => {
+      if (message.status === "LOADING" && message.content === "") {
+        messageStore.updateMessage(message.id, {
+          content: "Failed to send the message.",
+          status: "FAILED",
+        });
+      }
+    });
+
     const handleChatViewScroll = () => {
+      if (!chatViewRef.current) {
+        return;
+      }
       setShowHeaderShadow((chatViewRef.current?.scrollTop || 0) > 0);
+      setIsStickyAtBottom(chatViewRef.current.scrollTop + chatViewRef.current.clientHeight >= chatViewRef.current.scrollHeight);
     };
     chatViewRef.current?.addEventListener("scroll", handleChatViewScroll);
 
@@ -39,28 +50,21 @@ const ChatView = () => {
   }, []);
 
   useEffect(() => {
-    setTimeout(() => {
     if (!chatViewRef.current) {
       return;
     }
     chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
-    });
-  }, [currentChat, messageList.length, lastMessage?.isGenerated]);
+  }, [currentChat, lastMessage?.id]);
 
   useEffect(() => {
-    setTimeout(() => {
     if (!chatViewRef.current) {
       return;
     }
-      if (!lastMessage) {
-        return;
-      }
 
-      if (!lastMessage.isGenerated) {
+    if (lastMessage?.status === "LOADING" && isStickyAtBottom) {
       chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
     }
-    });
-  }, [lastMessage?.isGenerated, lastMessage?.content]);
+  }, [lastMessage?.status, lastMessage?.content, isStickyAtBottom]);
 
   useEffect(() => {
     if (
@@ -84,14 +88,25 @@ const ChatView = () => {
     if (!currentChat) {
       return;
     }
-    if (isRequesting) {
+    if (lastMessage?.status === "LOADING") {
       return;
     }
 
-    setIsRequesting(true);
     const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
     let prompt = "";
     let tokens = 0;
+
+    const message: Message = {
+      id: generateUUID(),
+      chatId: currentChat.id,
+      creatorId: currentChat.assistantId,
+      creatorRole: CreatorRole.Assistant,
+      createdAt: Date.now(),
+      content: "",
+      status: "LOADING",
+    };
+    messageStore.addMessage(message);
+
     if (connectionStore.currentConnectionCtx?.database) {
       let schema = "";
       try {
@@ -123,13 +138,13 @@ const ChatView = () => {
       role: CreatorRole.System,
       content: prompt,
     });
+
     const rawRes = await fetch("/api/chat", {
       method: "POST",
       body: JSON.stringify({
         messages: formatedMessageList,
       }),
     });
-    setIsRequesting(false);
 
     if (!rawRes.ok) {
       console.error(rawRes);
@@ -140,7 +155,10 @@ const ChatView = () => {
       } catch (error) {
         // do nth
       }
-      toast.error(errorMessage);
+      messageStore.updateMessage(message.id, {
+        content: errorMessage,
+        status: "FAILED",
+      });
       return;
     }
 
@@ -150,17 +168,6 @@ const ChatView = () => {
       return;
     }
 
-    const message: Message = {
-      id: generateUUID(),
-      chatId: currentChat.id,
-      creatorId: currentChat.assistantId,
-      creatorRole: CreatorRole.Assistant,
-      createdAt: Date.now(),
-      content: "",
-      isGenerated: false,
-    };
-    messageStore.addMessage(message);
-
     const reader = data.getReader();
     const decoder = new TextDecoder("utf-8");
     let done = false;
@@ -178,7 +185,7 @@ const ChatView = () => {
       done = readerDone;
     }
     messageStore.updateMessage(message.id, {
-      isGenerated: true,
+      status: "DONE",
     });
   };
 
@@ -197,10 +204,9 @@ const ChatView = () => {
         ) : (
           messageList.map((message) => <MessageView key={message.id} message={message} />)
         )}
-        {isRequesting && <MessageLoader />}
       </div>
       <div className="sticky bottom-0 w-full max-w-4xl py-2 px-4 sm:px-8 mx-auto bg-white bg-opacity-80 backdrop-blur">
-        <MessageTextarea disabled={isRequesting} sendMessage={sendMessageToCurrentChat} />
+        <MessageTextarea disabled={lastMessage?.status === "LOADING"} sendMessage={sendMessageToCurrentChat} />
       </div>
     </main>
   );

src/components/EmptyView.tsx

@@ -36,7 +36,7 @@ const EmptyView = (props: Props) => {
       creatorRole: CreatorRole.User,
       createdAt: Date.now(),
       content: content,
-      isGenerated: true,
+      status: "DONE",
     });
     await sendMessage();
   };

src/types/message.ts

@@ -6,6 +6,8 @@ export enum CreatorRole {
   Assistant = "assistant",
 }
 
+type MessageStatus = "LOADING" | "DONE" | "FAILED";
+
 export interface Message {
   id: Id;
   chatId: string;
@@ -13,5 +15,5 @@ export interface Message {
   creatorRole: CreatorRole;
   createdAt: Timestamp;
   content: string;
-  isGenerated: boolean;
+  status: MessageStatus;
 }