buttons on hover over message

pages/chat/@id/+Page.tsx

@@ -1,6 +1,8 @@
 import {
+  ActionIcon,
   Box,
   Group,
+  HoverCard,
   JsonInput,
   List,
   Stack,
@@ -210,6 +212,11 @@ function Messages({
           key={index}
           justify={message.role === "user" ? "flex-end" : "flex-start"}
         >
+          <HoverCard
+            shadow="md"
+            position={message.role === "user" ? "left" : "right"}
+          >
+            <HoverCard.Target>
               <Box
                 w="75%"
                 bg={
@@ -225,6 +232,23 @@ function Messages({
                 </div>
                 <Markdown>{message.content}</Markdown>
               </Box>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <ActionIcon.Group>
+                <ActionIcon size="lg" variant="filled" color="red">
+                  <IconTrash
+                    size={16}
+                    stroke={1.5}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      // handleDeleteMessage(message.id);
+                    }}
+                  />
+                </ActionIcon>
+              </ActionIcon.Group>
+            </HoverCard.Dropdown>
+          </HoverCard>
           {"runningSummary" in message && message.runningSummary && (
             <Box w="75%" bd="dotted" p="md" bdrs="md">
               <div>