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

feat: update chat view layout

Browse Source
This commit is contained in:
Steven
2023-03-19 00:42:35 +08:00
parent 19c3905e9e
commit 208c894db8
15 changed files with 210 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/ChatView/Header.tsx Normal file
View File

@ -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;