chore: use dynamic import to avoid page hydrated

This commit is contained in:
Steven
2023-03-22 23:42:59 +08:00
parent ecf981b361
commit fcd5d544ba
5 changed files with 28 additions and 22 deletions

View File

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import TextareaAutosize from "react-textarea-autosize";
import { localUser, useChatStore, useMessageStore } from "@/store";
import { useChatStore, useMessageStore, useUserStore } from "@/store";
import { CreatorRole } from "@/types";
import { generateUUID } from "@/utils";
import Icon from "../Icon";
@ -13,6 +13,7 @@ interface Props {
const MessageTextarea = (props: Props) => {
const { disabled, sendMessage } = props;
const userStore = useUserStore();
const chatStore = useChatStore();
const messageStore = useMessageStore();
const [value, setValue] = useState<string>("");
@ -45,7 +46,7 @@ const MessageTextarea = (props: Props) => {
messageStore.addMessage({
id: generateUUID(),
chatId: chatStore.currentChat.id,
creatorId: localUser.id,
creatorId: userStore.currentUser.id,
creatorRole: CreatorRole.User,
createdAt: Date.now(),
content: value,

View File

@ -1,5 +1,5 @@
import { marked } from "marked";
import { localUser } from "@/store";
import { useUserStore } from "@/store";
import { Message } from "@/types";
interface Props {
@ -8,7 +8,8 @@ interface Props {
const MessageView = (props: Props) => {
const message = props.message;
const isCurrentUser = message.creatorId === localUser.id;
const userStore = useUserStore();
const isCurrentUser = message.creatorId === userStore.currentUser.id;
return (
<div className={`w-full flex flex-row justify-start items-start my-4 ${isCurrentUser ? "justify-end pl-8 sm:pl-24" : "pr-8 sm:pr-24"}`}>

View File

@ -1,7 +1,7 @@
import axios from "axios";
import { useEffect, useRef, useState } from "react";
import { defaultChat, getAssistantById, getPromptOfAssistant, localUser, useChatStore, useMessageStore } from "@/store";
import { Chat, CreatorRole, Message } from "@/types";
import { getAssistantById, getPromptOfAssistant, useChatStore, useMessageStore } from "@/store";
import { CreatorRole } from "@/types";
import { generateUUID } from "@/utils";
import Icon from "../Icon";
import Header from "./Header";
@ -11,21 +11,10 @@ import MessageTextarea from "./MessageTextarea";
const ChatView = () => {
const chatStore = useChatStore();
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(() => {
if (!getAssistantById(chatStore.currentChat.assistantId)) {
chatStore.setCurrentChat(defaultChat);
}
setCurrentChat(chatStore.currentChat);
}, [chatStore]);
useEffect(() => {
setMessageList(messageStore.messageList.filter((message) => message.chatId === currentChat?.id));
}, [currentChat?.id, messageStore.messageList]);
const currentChat = chatStore.currentChat;
const messageList = messageStore.messageList.filter((message) => message.chatId === currentChat?.id);
useEffect(() => {
setTimeout(() => {
@ -54,7 +43,7 @@ const ChatView = () => {
content: prompt,
},
...messageList.map((message) => ({
role: message.creatorId === localUser.id ? CreatorRole.User : CreatorRole.Assistant,
role: message.creatorRole,
content: message.content,
})),
],