buttons on hover over message

pages/chat/@id/+Page.tsx

@@ -1,6 +1,8 @@
 import {
+  ActionIcon,
   Box,
   Group,
+  HoverCard,
   JsonInput,
   List,
   Stack,
@@ -210,21 +212,43 @@ function Messages({
           key={index}
           justify={message.role === "user" ? "flex-end" : "flex-start"}
         >
-          <Box
-            w="75%"
-            bg={
-              message.role === "user"
-                ? theme.colors.gray[2]
-                : theme.colors.blue[2]
-            }
-            p="md"
-            bdrs="md"
+          <HoverCard
+            shadow="md"
+            position={message.role === "user" ? "left" : "right"}
           >
-            <div>
-              {"index" in message ? message.index : ""} {message.role}
-            </div>
-            <Markdown>{message.content}</Markdown>
-          </Box>
+            <HoverCard.Target>
+              <Box
+                w="75%"
+                bg={
+                  message.role === "user"
+                    ? theme.colors.gray[2]
+                    : theme.colors.blue[2]
+                }
+                p="md"
+                bdrs="md"
+              >
+                <div>
+                  {"index" in message ? message.index : ""} {message.role}
+                </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>