feat: add message request loader

components/ChatView/Header.tsx

@@ -2,7 +2,12 @@ import { useEffect } from "react";
 import { useChatStore } from "@/store";
 import Icon from "../Icon";
 
-const Header = () => {
+interface Props {
+  className?: string;
+}
+
+const Header = (props: Props) => {
+  const { className } = props;
   const chatStore = useChatStore();
   const currentChat = chatStore.currentChat;
   const title = currentChat?.title || "SQL Chat";
@@ -12,7 +17,11 @@ const Header = () => {
   }, [title]);
 
   return (
-    <div className="sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white z-1">
+    <div
+      className={`${
+        className || ""
+      } sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white z-1`}
+    >
       <div className="ml-2 flex justify-center items-center">
         <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
           <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />

components/ChatView/MessageTextarea.tsx

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

components/ChatView/MessageView.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useUserStore } from "@/store";
@@ -39,23 +40,20 @@ const MessageView = (props: Props) => {
             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] : "plain";
                 return (
                   <pre className={`${className || ""} p-0 w-full`} {...props}>
-                    {children}
+                    <CodeBlock
+                      key={Math.random()}
+                      language={language || "plain"}
+                      value={String(child.props.children).replace(/\n$/, "")}
+                      {...props}
+                    />
                   </pre>
                 );
               },
-              code({ node, inline, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || "");
-                const language = match ? match[1] : "plain";
-                return !inline ? (
-                  <CodeBlock key={Math.random()} language={language || "plain"} value={String(children).replace(/\n$/, "")} {...props} />
-                ) : (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                );
-              },
             }}
           >
             {message.content}

components/ChatView/index.tsx

@@ -1,23 +1,37 @@
-import { head } from "lodash-es";
+import { head, last } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { getAssistantById, getPromptGeneratorOfAssistant, useChatStore, useMessageStore, useConnectionStore } from "@/store";
 import { CreatorRole, Message } from "@/types";
 import { generateUUID } from "@/utils";
-import Icon from "../Icon";
 import Header from "./Header";
 import EmptyView from "../EmptyView";
 import MessageView from "./MessageView";
 import MessageTextarea from "./MessageTextarea";
+import MessageLoader from "../MessageLoader";
 
 const ChatView = () => {
   const connectionStore = useConnectionStore();
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
   const [isRequesting, setIsRequesting] = useState<boolean>(false);
+  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(() => {
+    const handleChatViewScroll = () => {
+      setShowHeaderShadow((chatViewRef.current?.scrollTop || 0) > 0);
+    };
+    chatViewRef.current?.addEventListener("scroll", handleChatViewScroll);
+
+    return () => {
+      chatViewRef.current?.removeEventListener("scroll", handleChatViewScroll);
+    };
+  }, []);
 
   useEffect(() => {
     setTimeout(() => {
@@ -26,7 +40,22 @@ const ChatView = () => {
       }
       chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
     });
-  }, [currentChat, isRequesting]);
+  }, [currentChat, messageList.length, lastMessage?.isGenerated]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (!chatViewRef.current) {
+        return;
+      }
+      if (!lastMessage) {
+        return;
+      }
+
+      if (!lastMessage.isGenerated) {
+        chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
+      }
+    });
+  }, [lastMessage?.isGenerated, lastMessage?.content]);
 
   useEffect(() => {
     if (!connectionStore.currentConnectionCtx) {
@@ -91,6 +120,7 @@ const ChatView = () => {
       creatorRole: CreatorRole.Assistant,
       createdAt: Date.now(),
       content: "",
+      isGenerated: false,
     };
     messageStore.addMessage(message);
 
@@ -103,11 +133,16 @@ const ChatView = () => {
         const char = decoder.decode(value);
         if (char) {
           message.content = message.content + char;
-          messageStore.updateMessageContent(message.id, message.content);
+          messageStore.updateMessage(message.id, {
+            content: message.content,
+          });
         }
       }
       done = readerDone;
     }
+    messageStore.updateMessage(message.id, {
+      isGenerated: true,
+    });
   };
 
   return (
@@ -115,18 +150,14 @@ const ChatView = () => {
       ref={chatViewRef}
       className="drawer-content relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white"
     >
-      <Header />
+      <Header className={showHeaderShadow ? "shadow" : ""} />
       <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
         {messageList.length === 0 ? (
-          <EmptyView className="mt-16" />
+          <EmptyView className="mt-16" sendMessage={sendMessageToCurrentChat} />
         ) : (
           messageList.map((message) => <MessageView key={message.id} message={message} />)
         )}
-        {isRequesting && (
+        {isRequesting && <MessageLoader />}
-          <div className="w-full pt-4 pb-8 flex justify-center items-center text-gray-600">
-            <Icon.BiLoader className="w-5 h-auto mr-2 animate-spin" /> Requesting...
-          </div>
-        )}
       </div>
       <div className="sticky bottom-0 w-full max-w-3xl py-2 px-4 sm:px-8 mx-auto bg-white bg-opacity-80 backdrop-blur">
         <MessageTextarea disabled={isRequesting} sendMessage={sendMessageToCurrentChat} />

components/EmptyView.tsx

@@ -1,11 +1,45 @@
+import { useChatStore, useConnectionStore, useMessageStore, useUserStore } from "@/store";
+import { CreatorRole } from "@/types";
+import { generateUUID } from "@/utils";
 import Icon from "./Icon";
 
+// examples are used to show some examples to the user.
+const examples = ["Give me an example schema about employee", "How to create a view in MySQL?"];
+
 interface Props {
   className?: string;
+  sendMessage: () => Promise<void>;
 }
 
 const EmptyView = (props: Props) => {
-  const { className } = props;
+  const { className, sendMessage } = props;
+  const connectionStore = useConnectionStore();
+  const chatStore = useChatStore();
+  const userStore = useUserStore();
+  const messageStore = useMessageStore();
+
+  const handleExampleClick = async (content: string) => {
+    let chat = chatStore.currentChat;
+    if (!chat) {
+      const currentConnectionCtx = connectionStore.currentConnectionCtx;
+      if (!currentConnectionCtx) {
+        chat = chatStore.createChat();
+      } else {
+        chat = chatStore.createChat(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
+      }
+    }
+
+    messageStore.addMessage({
+      id: generateUUID(),
+      chatId: chat.id,
+      creatorId: userStore.currentUser.id,
+      creatorRole: CreatorRole.User,
+      createdAt: Date.now(),
+      content: content,
+      isGenerated: true,
+    });
+    await sendMessage();
+  };
 
   return (
     <div className={`${className || ""} w-full h-full flex flex-col justify-start items-center`}>
@@ -14,8 +48,15 @@ const EmptyView = (props: Props) => {
         <div className="w-full flex flex-col justify-start items-center">
           <Icon.BsSun className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Examples</span>
-          <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">This is the latest placeholder</div>
+          {examples.map((example) => (
-          <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Another example</div>
+            <div
+              key={example}
+              className="w-full rounded-lg px-4 py-3 text-sm mb-4 leading-6 cursor-pointer bg-gray-50 hover:bg-gray-100"
+              onClick={() => handleExampleClick(example)}
+            >
+              {`"${example}"`} →
+            </div>
+          ))}
         </div>
         <div className="w-full flex flex-col justify-start items-center">
           <Icon.BsLightning className="w-8 h-auto opacity-80" />

components/MessageLoader.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import Icon from "./Icon";
+
+const MessageLoader = () => {
+  const [loader, setLoader] = useState<string>(".");
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (loader.length === 3) {
+        setLoader(".");
+      } else {
+        setLoader(loader + ".");
+      }
+    }, 300);
+  }, [loader]);
+
+  return (
+    <div className={`w-full max-w-full flex flex-row justify-start items-start my-4 pr-8 sm:pr-24`}>
+      <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
+        <Icon.AiOutlineRobot className="w-6 h-6" />
+      </div>
+      <div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow">{loader}</div>
+    </div>
+  );
+};
+
+export default MessageLoader;

store/message.ts

@@ -7,7 +7,7 @@ interface MessageState {
   messageList: Message[];
   getState: () => MessageState;
   addMessage: (message: Message) => void;
-  updateMessageContent: (messageId: Id, content: string) => void;
+  updateMessage: (messageId: Id, message: Partial<Message>) => void;
   clearMessage: (filter: (message: Message) => boolean) => void;
 }
 
@@ -17,13 +17,23 @@ export const useMessageStore = create<MessageState>()(
       messageList: [],
       getState: () => get(),
       addMessage: (message: Message) => set((state) => ({ messageList: [...state.messageList, message] })),
-      updateMessageContent: (messageId: Id, content: string) => {
+      updateMessage: (messageId: Id, message: Partial<Message>) => {
-        const message = get().messageList.find((message) => message.id === messageId);
+        const rawMessage = get().messageList.find((message) => message.id === messageId);
-        if (!message) {
+        if (!rawMessage) {
           return;
         }
-        message.content = content;
+        set((state) => ({
-        set((state) => ({ messageList: uniqBy([...state.messageList, message], (message) => message.id) }));
+          messageList: uniqBy(
+            [
+              ...state.messageList,
+              {
+                ...rawMessage,
+                ...message,
+              },
+            ],
+            (message) => message.id
+          ),
+        }));
       },
       clearMessage: (filter: (message: Message) => boolean) => set((state) => ({ messageList: state.messageList.filter(filter) })),
     }),

types/message.ts

@@ -13,4 +13,5 @@ export interface Message {
   creatorRole: CreatorRole;
   createdAt: Timestamp;
   content: string;
+  isGenerated: boolean;
 }