add copy button

src/components/CreatePromptModal.tsx

@@ -1,10 +1,10 @@
 import {
+  ActionIcon,
   Button,
   Modal,
   Stack,
   Textarea,
   TextInput,
-  ThemeIcon,
   Tooltip,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
@@ -26,6 +26,17 @@ export function CreatePromptModal({ content }: { content?: string }) {
 
   return (
     <>
+      {content ? (
+        <Tooltip label="Save Prompt" position="left">
+          <ActionIcon onClick={open}>
+            <IconPlaylistAdd opacity={0.5} size={20} />
+          </ActionIcon>
+        </Tooltip>
+      ) : (
+        <Button fullWidth onClick={open} leftIcon={<IconPlus size={20} />}>
+          New Prompt
+        </Button>
+      )}
       <Modal opened={opened} onClose={close} title="Create Prompt" size="lg">
         <form
           onSubmit={async (event) => {
@@ -87,17 +98,6 @@ export function CreatePromptModal({ content }: { content?: string }) {
           </Stack>
         </form>
       </Modal>
-      {content ? (
-        <Tooltip label="Save Prompt" withinPortal>
-          <ThemeIcon variant="light" onClick={open}>
-            <IconPlaylistAdd />
-          </ThemeIcon>
-        </Tooltip>
-      ) : (
-        <Button fullWidth onClick={open} leftIcon={<IconPlus size={20} />}>
-          New Prompt
-        </Button>
-      )}
     </>
   );
 }

src/components/MessageItem.tsx

@@ -1,5 +1,14 @@
-import { Card, Flex, Text, ThemeIcon } from "@mantine/core";
-import { IconUser } from "@tabler/icons-react";
+import {
+  ActionIcon,
+  Box,
+  Card,
+  Flex,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { useClipboard } from "@mantine/hooks";
+import { IconCopy, IconUser } from "@tabler/icons-react";
 import { Message } from "../db";
 import { CreatePromptModal } from "./CreatePromptModal";
 import { LogoIcon } from "./Logo";
@@ -7,6 +16,8 @@ import { LogoIcon } from "./Logo";
 import { ScrollIntoView } from "./ScrollIntoView";
 
 export function MessageItem({ message }: { message: Message }) {
+  const clipboard = useClipboard({ timeout: 500 });
+
   return (
     <ScrollIntoView>
       <Card withBorder>
@@ -20,7 +31,17 @@ export function MessageItem({ message }: { message: Message }) {
           <Text size="md" sx={{ flex: 1, whiteSpace: "pre-wrap" }}>
             {message.content}
           </Text>
-          <CreatePromptModal content={message.content} />
+          <Box>
+            <CreatePromptModal content={message.content} />
+            <Tooltip
+              label={clipboard.copied ? "Copied" : "Copy"}
+              position="left"
+            >
+              <ActionIcon onClick={() => clipboard.copy(message.content)}>
+                <IconCopy opacity={0.5} size={20} />
+              </ActionIcon>
+            </Tooltip>
+          </Box>
         </Flex>
       </Card>
     </ScrollIntoView>