opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update chat view response style

Browse Source
This commit is contained in:
Steven
2023-03-19 20:30:57 +08:00
parent 208c894db8
commit 262d6904d3
6 changed files with 27 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/ChatView/Header.tsx
View File

@ -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">
<span className="absolute left-2 top-3">
<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">
<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>
<span>{chatTitle}</span>
<span className="absolute right-2 top-3">
</div>
<Popover className="relative w-auto">
<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>
);
};

9
components/ChatView/MessageTextarea.tsx
View File

@ -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();
};

19
components/ChatView/index.tsx
View File

@ -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({
...currentChat,
isRequesting: true,
});
setIsRequesting(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({
...currentChat,
isRequesting: false,
});
setIsRequesting(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>