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: add dropdown to message view

Browse Source
This commit is contained in:
steven
2023-03-28 17:51:50 +08:00
parent 27f70cd3ef
commit ac5f4bbcc2
3 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/ChatView/MessageView.tsx
View File

@ -1,7 +1,9 @@
import { ReactElement } from "react";
import { Menu, MenuItem } from "@mui/material";
import { ReactElement, useState } from "react";
import { toast } from "react-hot-toast";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { useUserStore } from "@/store";
import { useMessageStore, useUserStore } from "@/store";
import { Message } from "@/types";
import Icon from "../Icon";
import { CodeBlock } from "../CodeBlock";
@ -13,11 +15,33 @@ interface Props {
const MessageView = (props: Props) => {
const message = props.message;
const userStore = useUserStore();
const messageStore = useMessageStore();
const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLButtonElement | null>(null);
const isCurrentUser = message.creatorId === userStore.currentUser.id;
const showMenu = Boolean(menuAnchorEl);
const handleMoreMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
if (menuAnchorEl) {
setMenuAnchorEl(null);
} else {
setMenuAnchorEl(event.currentTarget);
}
};
const copyMessage = () => {
navigator.clipboard.writeText(message.content);
toast.success("Copied to clipboard");
setMenuAnchorEl(null);
};
const deleteMessage = (message: Message) => {
messageStore.clearMessage((item) => item.id !== message.id);
setMenuAnchorEl(null);
};
return (
<div
className={`w-full max-w-full flex flex-row justify-start items-start my-4 ${
className={`w-full max-w-full flex flex-row justify-start items-start my-4 group ${
isCurrentUser ? "justify-end pl-8 sm:pl-24" : "pr-8 sm:pr-24"
}`}
>
@ -36,7 +60,7 @@ const MessageView = (props: Props) => {
<Icon.AiOutlineRobot className="w-6 h-6" />
</div>
<ReactMarkdown
className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral"
className="mt-0.5 w-auto max-w-[calc(100%-4rem)] bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral"
remarkPlugins={[remarkGfm]}
components={{
pre({ node, className, children, ...props }) {
@ -44,7 +68,7 @@ const MessageView = (props: Props) => {
const match = /language-(\w+)/.exec(child.props.className || "");
const language = match ? match[1] : "text";
return (
<pre className={`${className || ""} p-0 w-full`} {...props}>
<pre className={`${className || ""} w-full p-0 my-1`} {...props}>
<CodeBlock
key={Math.random()}
language={language || "text"}
@ -61,6 +85,32 @@ const MessageView = (props: Props) => {
>
{message.content}
</ReactMarkdown>
<div className={`invisible group-hover:visible ${showMenu && "!visible"}`}>
<button
className="w-6 h-6 ml-1 mt-2 flex justify-center items-center text-gray-400 hover:text-gray-500"
onClick={handleMoreMenuClick}
>
<Icon.IoMdMore className="w-5 h-auto" />
</button>
<Menu
className="mt-1"
anchorEl={menuAnchorEl}
open={showMenu}
onClose={() => setMenuAnchorEl(null)}
MenuListProps={{
"aria-labelledby": "basic-button",
}}
>
<MenuItem onClick={copyMessage}>
<Icon.BiClipboard className="w-4 h-auto mr-1 opacity-70" />
Copy
</MenuItem>
<MenuItem onClick={() => deleteMessage(message)}>
<Icon.BiTrash className="w-4 h-auto mr-1 opacity-70" />
Delete
</MenuItem>
</Menu>
</div>
</>
)}
</div>