feat: update chat view layout

components/ChatView/Header.tsx

@@ -0,0 +1,68 @@
+import { Menu } from "@headlessui/react";
+import Link from "next/link";
+import { toast } from "react-hot-toast";
+import { useChatStore, useMessageStore, useUserStore } from "../../store";
+import Icon from "../Icon";
+
+const Header = () => {
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+  const messageStore = useMessageStore();
+  const currentChat = chatStore.currentChat;
+  const chatTitle = currentChat ? userStore.getAssistantById(currentChat.assistantId)?.name : "No chat";
+
+  const handleClearMessage = () => {
+    messageStore.clearMessage((message) => message.chatId !== currentChat?.id);
+    toast.success("Message cleared");
+  };
+
+  return (
+    <div className="sticky top-0 w-full text-center py-4 border-b bg-gray-100 bg-opacity-80 backdrop-blur">
+      <span className="absolute left-2 top-3">
+        <Menu>
+          <Menu.Button>
+            <Icon.Io.IoIosMenu className="text-gray-600 w-8 h-auto p-1 rounded-md cursor-pointer hover:shadow hover:bg-white" />
+          </Menu.Button>
+          <Menu.Items className="absolute left-0 -mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 p-1 space-y-1">
+            <Menu.Item>
+              <Link className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100" href="/">
+                <Icon.Io.IoMdHome className="text-gray-600 w-5 h-auto mr-1" />
+                Home
+              </Link>
+            </Menu.Item>
+            <Menu.Item>
+              <a
+                href="https://github.com/bytebase/chatdba"
+                target="_blank"
+                className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
+              >
+                <Icon.Io.IoLogoGithub className="text-gray-600 w-5 h-auto mr-1" /> GitHub
+              </a>
+            </Menu.Item>
+          </Menu.Items>
+        </Menu>
+      </span>
+      <span>{chatTitle}</span>
+      <span className="absolute right-2 top-3">
+        <Menu>
+          <Menu.Button>
+            <Icon.Io.IoIosMore className="text-gray-600 w-8 h-auto p-1 rounded-md cursor-pointer hover:shadow hover:bg-white" />
+          </Menu.Button>
+          <Menu.Items className="absolute right-0 -mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 p-1 space-y-1">
+            <Menu.Item>
+              <div
+                className="w-full p-2 rounded-lg flex flex-row justify-start items-center cursor-pointer hover:bg-gray-100"
+                onClick={handleClearMessage}
+              >
+                <Icon.Io.IoMdTrash className="text-gray-600 w-5 h-auto mr-1" />
+                Clear
+              </div>
+            </Menu.Item>
+          </Menu.Items>
+        </Menu>
+      </span>
+    </div>
+  );
+};
+
+export default Header;

components/ChatView/MessageTextarea.tsx

@@ -1,16 +1,21 @@
-import axios from "axios";
 import { useEffect, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import TextareaAutosize from "react-textarea-autosize";
 import { useChatStore, useMessageStore, useUserStore } from "../../store";
-import { UserRole } from "../../types";
 import { generateUUID } from "../../utils";
 import Icon from "../Icon";
 
-const MessageTextarea = () => {
+interface Props {
+  sendMessage: () => Promise<void>;
+}
+
+const MessageTextarea = (props: Props) => {
+  const { sendMessage } = props;
   const userStore = useUserStore();
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
   const [value, setValue] = useState<string>("");
+  const [isInIME, setIsInIME] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -25,10 +30,20 @@ const MessageTextarea = () => {
 
   const handleSend = async () => {
     if (!chatStore.currentChat) {
+      toast.error("Please select a chat first.");
+      return;
+    }
+    if (!value) {
+      toast.error("Please enter a message.");
       return;
     }
 
     const currentChat = chatStore.currentChat;
+    if (currentChat.isRequesting) {
+      toast.error("Please wait for the previous message to be sent.");
+      return;
+    }
+
     messageStore.addMessage({
       id: generateUUID(),
       chatId: currentChat.id,
@@ -39,35 +54,32 @@ const MessageTextarea = () => {
     setValue("");
     textareaRef.current!.value = "";
 
-    const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
-    const { data } = await axios.post<string>("/api/chat", {
-      messages: messageList.map((message) => ({
-        role: message.creatorId === userStore.currentUser.id ? UserRole.User : UserRole.Assistant,
-        content: message.content,
-      })),
-    });
-    messageStore.addMessage({
-      id: generateUUID(),
-      chatId: currentChat.id,
-      creatorId: currentChat.userId,
-      createdAt: Date.now(),
-      content: data,
-    });
+    await sendMessage();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter" && !event.shiftKey && !isInIME) {
+      event.preventDefault();
+      handleSend();
+    }
   };
 
   return (
-    <div className="w-full h-auto border rounded-md mb-2 px-2 py-1 relative shadow bg-white">
+    <div className="w-full h-auto flex flex-row justify-between items-end border rounded-lg mb-2 px-2 py-1 relative shadow bg-white">
       <TextareaAutosize
         ref={textareaRef}
-        className="w-full h-full outline-none border-none bg-transparent pt-1 mt-1 px-2 resize-none hide-scrollbar"
+        className="w-full h-full outline-none border-none bg-transparent leading-6 py-1 px-2 resize-none hide-scrollbar"
+        placeholder="Type a message..."
         rows={1}
         minRows={1}
         maxRows={5}
+        onCompositionStart={() => setIsInIME(true)}
+        onCompositionEnd={() => setIsInIME(false)}
         onChange={handleChange}
-        onSubmit={handleSend}
+        onKeyDown={handleKeyDown}
       />
-      <div className="absolute bottom-2 right-2 w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100" onClick={handleSend}>
-        <Icon.Io.IoMdSend className="w-full h-auto text-blue-800" />
+      <div className="w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100" onClick={handleSend}>
+        <Icon.Io.IoMdSend className="w-full h-auto text-indigo-600" />
       </div>
     </div>
   );

components/ChatView/MessageView.tsx

@@ -16,10 +16,10 @@ const MessageView = (props: Props) => {
   return (
     <div className={`w-full flex flex-row justify-start items-start my-4 ${isCurrentUser ? "justify-end pl-8 sm:pl-16" : "pr-8 sm:pr-16"}`}>
       {isCurrentUser ? (
-        <div className="w-auto max-w-full bg-white px-3 py-2 rounded-lg rounded-tr-none shadow">{message.content}</div>
+        <div className="w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow">{message.content}</div>
       ) : (
         <div
-          className="w-auto max-w-full bg-white px-3 py-2 rounded-lg rounded-tl-none shadow"
+          className="w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow"
           dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}
         ></div>
       )}

components/ChatView/Sidebar.tsx

@@ -1,58 +0,0 @@
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useChatStore, useUserStore } from "../../store";
-import { Chat, User } from "../../types";
-import Icon from "../Icon";
-
-const Sidebar = () => {
-  const userStore = useUserStore();
-  const chatStore = useChatStore();
-  const [currentChat, setCurrentChat] = useState<Chat | null>(null);
-
-  useEffect(() => {
-    setCurrentChat(chatStore.currentChat);
-  }, [chatStore.currentChat]);
-
-  const handleAssistantClick = (user: User) => {
-    for (const chat of chatStore.chatList) {
-      if (chat.userId === user.id) {
-        chatStore.setCurrentChat(chat);
-        return;
-      }
-    }
-    chatStore.createChat(user);
-  };
-
-  return (
-    <div className="w-52 lg:w-64 h-full transition-all shrink-0 border-r px-3 flex flex-col justify-start items-center sticky top-0 bg-white sm:rounded-l-md">
-      <h2 className="py-4 w-full flex flex-row justify-center items-center">
-        <Icon.Io.IoIosChatbubbles className="text-gray-600 mr-2 w-6 h-auto" /> Assistant list
-      </h2>
-      <div className="w-full mt-2 flex flex-col justify-start items-start">
-        {userStore.assistantList.map((assistant) => (
-          <div
-            className={`w-full py-2 px-3 rounded-md mb-2 cursor-pointer hover:opacity-80 hover:bg-gray-100 ${
-              currentChat?.userId === assistant.id && "shadow bg-gray-100 font-medium"
-            }`}
-            onClick={() => handleAssistantClick(assistant)}
-            key={assistant.id}
-          >
-            {assistant.name}
-          </div>
-        ))}
-      </div>
-      <div className="grow w-full flex flex-col justify-end items-center pb-6">
-        <div className="w-full flex flex-row justify-center items-center space-x-3">
-          <Link href="/" className="p-1 rounded-md hover:shadow hover:bg-gray-100">
-            <Icon.Io.IoMdHome className="text-gray-600 w-6 h-auto" />
-          </Link>
-          <a href="https://github.com/bytebase/chatdba" target="_blank" className="p-1 rounded-md hover:shadow hover:bg-gray-100">
-            <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Sidebar;

components/ChatView/index.tsx

@@ -1,8 +1,11 @@
-import { useEffect, useState } from "react";
-import { useChatStore, useMessageStore, useUserStore } from "../../store";
-import { Chat, Message } from "../../types";
+import axios from "axios";
+import { useEffect, useRef, useState } from "react";
+import { defaultChat, useChatStore, useMessageStore, useUserStore } from "../../store";
+import { Chat, Message, UserRole } from "../../types";
+import { generateUUID } from "../../utils";
+import Icon from "../Icon";
+import Header from "./Header";
 import MessageView from "./MessageView";
-import Sidebar from "./Sidebar";
 import MessageTextarea from "./MessageTextarea";
 
 const ChatView = () => {
@@ -11,29 +14,76 @@ const ChatView = () => {
   const messageStore = useMessageStore();
   const [messageList, setMessageList] = useState<Message[]>([]);
   const [currentChat, setCurrentChat] = useState<Chat | null>(null);
-  const chatTitle = currentChat ? userStore.getAssistantById(currentChat.userId)?.name : "No chat";
+  const chatViewRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (!userStore.getAssistantById(chatStore.currentChat.assistantId)) {
+      chatStore.setCurrentChat(defaultChat);
+    }
     setCurrentChat(chatStore.currentChat);
-  }, [chatStore.currentChat]);
+  }, [chatStore, userStore]);
 
   useEffect(() => {
     setMessageList(messageStore.messageList.filter((message) => message.chatId === currentChat?.id));
   }, [currentChat?.id, messageStore.messageList]);
 
+  useEffect(() => {
+    if (!currentChat || !chatViewRef.current) {
+      return;
+    }
+    chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
+  }, [currentChat, currentChat?.isRequesting]);
+
+  const sendMessageToCurrentChat = async () => {
+    if (!currentChat || !chatViewRef.current) {
+      return;
+    }
+    if (currentChat.isRequesting) {
+      return;
+    }
+
+    chatStore.setCurrentChat({
+      ...currentChat,
+      isRequesting: true,
+    });
+    const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
+    const { data } = await axios.post<string>("/api/chat", {
+      messages: messageList.map((message) => ({
+        role: message.creatorId === userStore.currentUser.id ? UserRole.User : UserRole.Assistant,
+        content: message.content,
+      })),
+    });
+    messageStore.addMessage({
+      id: generateUUID(),
+      chatId: currentChat.id,
+      creatorId: currentChat.assistantId,
+      createdAt: Date.now(),
+      content: data,
+    });
+    chatStore.setCurrentChat({
+      ...currentChat,
+      isRequesting: false,
+    });
+  };
+
   return (
-    <div className="relative w-full max-w-full h-full flex flex-row justify-start items-start">
-      <Sidebar />
-      <main className="relative grow w-auto h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-gray-100 sm:rounded-r-md">
-        <div className="sticky top-0 w-full text-center py-4 border-b bg-white">{chatTitle}</div>
-        <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
-          {messageList.length === 0 ? <></> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
-        </div>
-        <div className="sticky bottom-0 w-full max-w-3xl py-2 px-4 sm:px-8 mx-auto backdrop-blur">
-          <MessageTextarea />
-        </div>
-      </main>
-    </div>
+    <main
+      ref={chatViewRef}
+      className="relative sm:border-x w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto"
+    >
+      <Header />
+      <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
+        {messageList.length === 0 ? <></> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
+        {currentChat?.isRequesting && (
+          <div className="w-full pt-4 pb-12 flex justify-center items-center text-gray-600">
+            <Icon.Bi.BiLoader className="w-5 h-auto mr-2 animate-spin" /> Loading...
+          </div>
+        )}
+      </div>
+      <div className="sticky bottom-0 w-full max-w-3xl py-2 px-4 sm:px-8 mx-auto backdrop-blur">
+        <MessageTextarea sendMessage={sendMessageToCurrentChat} />
+      </div>
+    </main>
   );
 };