feat: update chat view response style

components/ChatView/Header.tsx

@@ -1,4 +1,4 @@
-import { Menu } from "@headlessui/react";
+import { Menu, Popover } from "@headlessui/react";
 import Link from "next/link";
 import { toast } from "react-hot-toast";
 import { useChatStore, useMessageStore, useUserStore } from "../../store";
@@ -9,7 +9,7 @@ const Header = () => {
   const chatStore = useChatStore();
   const messageStore = useMessageStore();
   const currentChat = chatStore.currentChat;
-  const chatTitle = currentChat ? userStore.getAssistantById(currentChat.assistantId)?.name : "No chat";
+  const assistant = userStore.getAssistantById(currentChat?.assistantId)!;
 
   const handleClearMessage = () => {
     messageStore.clearMessage((message) => message.chatId !== currentChat?.id);
@@ -17,13 +17,13 @@ const Header = () => {
   };
 
   return (
-    <div className="sticky top-0 w-full text-center py-4 border-b bg-gray-100 bg-opacity-80 backdrop-blur">
+    <div className="sticky top-0 w-full flex flex-row justify-between items-center py-2 border-b bg-gray-100 bg-opacity-80 backdrop-blur">
-      <span className="absolute left-2 top-3">
+      <div className="ml-4 relative flex justify-center">
         <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.Items className="absolute left-0 top-full 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" />
@@ -41,14 +41,19 @@ const Header = () => {
             </Menu.Item>
           </Menu.Items>
         </Menu>
-      </span>
+      </div>
-      <span>{chatTitle}</span>
+      <Popover className="relative w-auto">
-      <span className="absolute right-2 top-3">
+        <Popover.Button>{assistant.name}</Popover.Button>
+        <Popover.Panel className="absolute z-10 left-1/2 mt-1 -translate-x-1/2 bg-white shadow-lg rounded-lg border flex flex-col justify-start items-start w-72 p-4">
+          <p className="w-full text-left">{assistant.description}</p>
+        </Popover.Panel>
+      </Popover>
+      <div className="mr-4 relative flex justify-center">
         <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.Items className="absolute right-0 top-full 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"
@@ -60,7 +65,7 @@ const Header = () => {
             </Menu.Item>
           </Menu.Items>
         </Menu>
-      </span>
+      </div>
     </div>
   );
 };

components/ChatView/MessageTextarea.tsx

@@ -38,22 +38,15 @@ const MessageTextarea = (props: Props) => {
       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,
+      chatId: chatStore.currentChat.id,
       creatorId: userStore.currentUser.id,
       createdAt: Date.now(),
       content: value,
     });
     setValue("");
     textareaRef.current!.value = "";
-
     await sendMessage();
   };
 

components/ChatView/index.tsx

@@ -14,6 +14,7 @@ const ChatView = () => {
   const messageStore = useMessageStore();
   const [messageList, setMessageList] = useState<Message[]>([]);
   const [currentChat, setCurrentChat] = useState<Chat | null>(null);
+  const [isRequesting, setIsRequesting] = useState<boolean>(false);
   const chatViewRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -32,20 +33,17 @@ const ChatView = () => {
       return;
     }
     chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
-  }, [currentChat, currentChat?.isRequesting]);
+  }, [currentChat, isRequesting]);
 
   const sendMessageToCurrentChat = async () => {
     if (!currentChat || !chatViewRef.current) {
       return;
     }
-    if (currentChat.isRequesting) {
+    if (isRequesting) {
       return;
     }
 
-    chatStore.setCurrentChat({
+    setIsRequesting(true);
-      ...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) => ({
@@ -60,21 +58,18 @@ const ChatView = () => {
       createdAt: Date.now(),
       content: data,
     });
-    chatStore.setCurrentChat({
+    setIsRequesting(false);
-      ...currentChat,
-      isRequesting: false,
-    });
   };
 
   return (
     <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"
+      className="relative sm:border sm:rounded-lg sm:shadow w-full mx-auto h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white"
     >
       <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 && (
+        {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>

pages/chat.tsx

@@ -12,8 +12,8 @@ const ChatPage: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="w-full h-screen flex flex-col justify-center items-center">
+      <main className="w-full h-screen flex flex-col justify-center items-center bg-gray-100">
-        <div className="w-full h-full md:w-4/5">
+        <div className="w-full h-full md:w-4/5 md:max-w-4xl md:h-5/6">
           <ChatView />
         </div>
       </main>

store/user.ts

@@ -4,8 +4,8 @@ import { Id, User, UserRole } from "../types";
 export const assistantList: User[] = [
   {
     id: "assistant-dba",
-    name: "Chat DBA",
+    name: "ChatDBA",
-    description: "",
+    description: "🤖️ I am a chatbot that can help you with database administration.",
     avatar: "",
     role: UserRole.Assistant,
   },

types/chat.ts

@@ -3,5 +3,4 @@ import { Id } from "./common";
 export interface Chat {
   id: string;
   assistantId: Id;
-  isRequesting: boolean;
 }