feat: update message status handler

2025-09-29 02:54:58 +08:00 · 2023-04-01 11:32:39 +08:00
parent 558f75f9a4
commit 06eda19fa3
5 changed files with 117 additions and 98 deletions
--- a/src/components/ChatView/MessageTextarea.tsx
+++ b/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 = "";
--- a/src/components/ChatView/MessageView.tsx
+++ b/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,61 +69,71 @@ const MessageView = (props: Props) => {
              <img className="w-10 h-auto p-1" src="/chat-logo-bot.webp" alt="" />
            )}
          </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"
-              remarkPlugins={[remarkGfm]}
-              components={{
-                pre({ node, className, children, ...props }) {
-                  const child = children[0] as ReactElement;
-                  const match = /language-(\w+)/.exec(child.props.className || "");
-                  const language = match ? match[1] : "text";
-                  return (
-                    <pre className={`${className || ""} w-full p-0 my-1`} {...props}>
-                      <CodeBlock
-                        key={Math.random()}
-                        language={language || "SQL"}
-                        value={String(child.props.children).replace(/\n$/, "")}
-                        {...props}
-                      />
-                    </pre>
-                  );
-                },
-                code({ children }) {
-                  return <code className="px-0">`{children}`</code>;
-                },
-              }}
-            >
-              {message.content}
-            </ReactMarkdown>
-            <span className="self-end text-sm text-gray-400 pt-1 pr-1">{dayjs(message.createdAt).format("lll")}</span>
-          </div>
-          <div className={`invisible group-hover:visible ${showMenu && "!visible"}`}>
-            <button
-              className="w-6 h-6 ml-1 mt-2 flex justify-center items-center text-gray-400 hover:text-gray-500"
-              onClick={handleMoreMenuClick}
-            >
-              <Icon.IoMdMore className="w-5 h-auto" />
-            </button>
-            <Menu
-              className="mt-1"
-              anchorEl={menuAnchorEl}
-              open={showMenu}
-              onClose={() => setMenuAnchorEl(null)}
-              MenuListProps={{
-                "aria-labelledby": "basic-button",
-              }}
-            >
-              <MenuItem onClick={copyMessage}>
-                <Icon.BiClipboard className="w-4 h-auto mr-2 opacity-70" />
-                Copy
-              </MenuItem>
-              <MenuItem onClick={() => deleteMessage(message)}>
-                <Icon.BiTrash className="w-4 h-auto mr-2 opacity-70" />
-                Delete
-              </MenuItem>
-            </Menu>
-          </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 ${
+                    message.status === "FAILED" && "border border-red-400 bg-red-100 text-red-500"
+                  }`}
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    pre({ node, className, children, ...props }) {
+                      const child = children[0] as ReactElement;
+                      const match = /language-(\w+)/.exec(child.props.className || "");
+                      const language = match ? match[1] : "text";
+                      return (
+                        <pre className={`${className || ""} w-full p-0 my-1`} {...props}>
+                          <CodeBlock
+                            key={Math.random()}
+                            language={language || "SQL"}
+                            value={String(child.props.children).replace(/\n$/, "")}
+                            {...props}
+                          />
+                        </pre>
+                      );
+                    },
+                    code({ children }) {
+                      return <code className="px-0">`{children}`</code>;
+                    },
+                  }}
+                >
+                  {message.content}
+                </ReactMarkdown>
+                <span className="self-end text-sm text-gray-400 pt-1 pr-1">{dayjs(message.createdAt).format("lll")}</span>
+              </div>
+              <div className={`invisible group-hover:visible ${showMenu && "!visible"}`}>
+                <button
+                  className="w-6 h-6 ml-1 mt-2 flex justify-center items-center text-gray-400 hover:text-gray-500"
+                  onClick={handleMoreMenuClick}
+                >
+                  <Icon.IoMdMore className="w-5 h-auto" />
+                </button>
+                <Menu
+                  className="mt-1"
+                  anchorEl={menuAnchorEl}
+                  open={showMenu}
+                  onClose={() => setMenuAnchorEl(null)}
+                  MenuListProps={{
+                    "aria-labelledby": "basic-button",
+                  }}
+                >
+                  <MenuItem onClick={copyMessage}>
+                    <Icon.BiClipboard className="w-4 h-auto mr-2 opacity-70" />
+                    Copy
+                  </MenuItem>
+                  <MenuItem onClick={() => deleteMessage(message)}>
+                    <Icon.BiTrash className="w-4 h-auto mr-2 opacity-70" />
+                    Delete
+                  </MenuItem>
+                </Menu>
+              </div>
+            </>
+          )}
        </>
      )}
    </div>
--- a/src/components/ChatView/index.tsx
+++ b/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]);
+    if (!chatViewRef.current) {
+      return;
+    }
+    chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
+  }, [currentChat, lastMessage?.id]);

  useEffect(() => {
-    setTimeout(() => {
-      if (!chatViewRef.current) {
-        return;
-      }
-      if (!lastMessage) {
-        return;
-      }
+    if (!chatViewRef.current) {
+      return;
+    }

-      if (!lastMessage.isGenerated) {
-        chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
-      }
-    });
-  }, [lastMessage?.isGenerated, lastMessage?.content]);
+    if (lastMessage?.status === "LOADING" && isStickyAtBottom) {
+      chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
+    }
+  }, [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>
  );
--- a/src/components/EmptyView.tsx
+++ b/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();
  };
--- a/src/types/message.ts
+++ b/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;
 }