feat: implement stores and basic chat logic

components/ChatView/MessageView.tsx

@@ -0,0 +1,13 @@
+import { Message } from "../../types";
+
+interface Props {
+  message: Message;
+}
+
+const Message = (props: Props) => {
+  const message = props.message;
+
+  return <div>{message.content}</div>;
+};
+
+export default Message;

components/ChatView/Sidebar.tsx

@@ -0,0 +1,32 @@
+import { useChatStore, useUserStore } from "../../store";
+import { User } from "../../types";
+
+const Sidebar = () => {
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+
+  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-full border-r p-2">
+      <h2>Assistant list</h2>
+      <div>
+        {userStore.assistantList.map((assistant) => (
+          <p onClick={() => handleAssistantClick(assistant)} key={assistant.id}>
+            {assistant.name}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

components/ChatView/Textarea.tsx

@@ -0,0 +1,59 @@
+import axios from "axios";
+import { useRef, useState } from "react";
+import { useChatStore, useMessageStore, useUserStore } from "../../store";
+import { UserRole } from "../../types";
+import { generateUUID } from "../../utils";
+import Icon from "../Icon";
+
+const Textarea = () => {
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+  const messageStore = useMessageStore();
+  const [value, setValue] = useState<string>("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSend = async () => {
+    if (!chatStore.currentChat) {
+      return;
+    }
+
+    const currentChat = chatStore.currentChat;
+    messageStore.addMessage({
+      id: generateUUID(),
+      chatId: currentChat.id,
+      creatorId: userStore.currentUser.id,
+      createdAt: Date.now(),
+      content: value,
+    });
+    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,
+    });
+  };
+
+  return (
+    <div className="w-full h-auto border-t relative">
+      <textarea ref={textareaRef} className="w-full h-full outline-none pt-2 px-2 resize-none" onChange={handleChange} rows={1} />
+      <Icon.Send className="absolute bottom-2 right-2" onClick={handleSend} />
+    </div>
+  );
+};
+
+export default Textarea;

components/ChatView/index.tsx

@@ -0,0 +1,28 @@
+import { useChatStore, useMessageStore, useUserStore } from "../../store";
+import MessageView from "./MessageView";
+import Sidebar from "./Sidebar";
+import Textarea from "./Textarea";
+
+const ChatView = () => {
+  const chatStore = useChatStore();
+  const userStore = useUserStore();
+  const messageStore = useMessageStore();
+  const currentChat = chatStore.currentChat;
+  const chatTitle = currentChat ? userStore.getAssistantById(currentChat.userId)?.name : "No chat";
+  const messageList = messageStore.messageList.filter((message) => message.chatId === currentChat?.id);
+
+  return (
+    <div className="w-full max-w-full lg:max-w-3xl border rounded-md grid grid-cols-[192px_1fr]">
+      <Sidebar />
+      <main className="w-full">
+        <p className="w-full text-center py-2 border-b">{chatTitle}</p>
+        <div className="py-2">
+          {messageList.length === 0 ? <p>no message</p> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
+        </div>
+        <Textarea />
+      </main>
+    </div>
+  );
+};
+
+export default ChatView;