feat(messages): ✨ add message actions

components/messages/message-chat-action.tsx

@@ -0,0 +1,46 @@
+import { Copy, Trash2 } from "lucide-react";
+import { Button } from "../ui/button";
+import { Id } from "@/convex/_generated/dataModel";
+import useApiMutation from "@/lib/hooks/use-api-mutation";
+import { api } from "@/convex/_generated/api";
+import { toast } from "sonner";
+
+type MessageChatActionProps = {
+  messageId: Id<"messages">;
+  content: string;
+};
+
+const MessageChatAction = ({ content, messageId }: MessageChatActionProps) => {
+  const { mutate: deleteMessage, isPending } = useApiMutation(
+    api.message.remove
+  );
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(content);
+    toast.success("Message copied to clipboard");
+  };
+
+  const handleDelete = () => {
+    deleteMessage({ messageId })
+      .then(() => toast.success("Message deleted"))
+      .catch(() => toast.error("Failed to delete message"));
+  };
+
+  return (
+    <>
+      <Button size="icon" variant="ghost" onClick={handleCopy}>
+        <Copy className="w-4 h-4" />
+      </Button>
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={isPending}
+        onClick={handleDelete}
+      >
+        <Trash2 className="w-4 h-4" />
+      </Button>
+    </>
+  );
+};
+
+export default MessageChatAction;

components/messages/message-chat.tsx

@@ -3,6 +3,7 @@ import { useCurrentUser } from "@/lib/hooks/use-current-user";
 import { cn } from "@/lib/utils";
 import Hint from "../hint";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import MessageChatAction from "./message-chat-action";
 
 type MessageChatProps = {
   message: Doc<"messages">;
@@ -13,7 +14,7 @@ const MessageChat = ({ message }: MessageChatProps) => {
 
   return (
     <div
-      className={cn("flex items-center gap-x-2 p-2", {
+      className={cn("flex items-center gap-x-2 p-2 group", {
         "flex-row-reverse ": currentUser?._id === message.senderId,
       })}
     >
@@ -30,13 +31,19 @@ const MessageChat = ({ message }: MessageChatProps) => {
         </Avatar>
       </Hint>
       <div
-        className={cn("p-3 rounded-lg", {
-          "bg-blue-700 text-white": currentUser?._id === message.senderId,
-          "bg-accent": currentUser?._id !== message.senderId,
+        className={cn("p-3 rounded-lg bg-accent/60", {
+          "bg-accent": currentUser?._id === message.senderId,
         })}
       >
         <p>{message.content}</p>
       </div>
+      <div
+        className={cn("group-hover:opacity-100 opacity-0", {
+          hidden: currentUser?._id !== message.senderId,
+        })}
+      >
+        <MessageChatAction messageId={message._id} content={message.content} />
+      </div>
     </div>
   );
 };

components/messages/messages-list.tsx

@@ -15,7 +15,7 @@ type MessagesListProps = {
 const MessagesList = ({ projectId }: MessagesListProps) => {
   const { messages, isLoading, fetchMore, status } = useMessages(projectId);
 
-  const scrollRef = useScroll("instant", "end");
+  const scrollRef = useScroll("instant", "end", [messages]);
 
   return (
     <ScrollArea className="h-[calc(100dvh-200px)] rounded-md border">

convex/message.ts

@@ -38,10 +38,26 @@ export const create = mutation({
   },
 });
 
+export const remove = mutation({
+  args: {
+    messageId: v.id("messages"),
+  },
+  handler: async (ctx, args) => {
+    const identity = ctx.auth.getUserIdentity();
+    if (!identity)
+      throw new Error("Unauthenticated user cannot delete messages");
+
+    const message = await ctx.db.get(args.messageId);
+    if (!message) throw new Error("Message not found");
+
+    return ctx.db.delete(message._id);
+  },
+});
+
 export const list = query({
   args: {
     projectId: v.id("projects"),
-    paginationOpts: paginationOptsValidator
+    paginationOpts: paginationOptsValidator,
   },
   handler: async (ctx, args) => {
     return ctx.db