delete chats button

src/components/DatabaseModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Flex, Group, Modal, Text } from "@mantine/core";
+import { Button, Card, Flex, Group, Modal, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { IconDatabaseExport, IconDatabaseImport } from "@tabler/icons-react";
@@ -6,7 +6,8 @@ import { useLiveQuery } from "dexie-react-hooks";
 import download from "downloadjs";
 import { cloneElement, ReactElement } from "react";
 import { db } from "../db";
-import { DeleteDataModal } from "./DeleteDataModal";
+import { DeleteAllDataModal } from "./DeleteAllDataModal";
+import { DeleteChatsModal } from "./DeleteChatsModal";
 
 export function DatabaseModal({ children }: { children: ReactElement }) {
   const [opened, { open, close }] = useDisclosure(false);
@@ -31,108 +32,113 @@ export function DatabaseModal({ children }: { children: ReactElement }) {
         withinPortal
         keepMounted
       >
-        <Flex>
-          <Card withBorder sx={{ flex: 1 }}>
-            <Text size="xl" align="center">
-              {chatsCount}
-            </Text>
-            <Text
-              size="xs"
-              color="dimmed"
-              align="center"
-              tt="uppercase"
-              fw={700}
-            >
-              Chats
-            </Text>
-          </Card>
-          <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
-            <Text size="xl" align="center">
-              {messagesCount}
-            </Text>
-            <Text
-              size="xs"
-              color="dimmed"
-              align="center"
-              tt="uppercase"
-              fw={700}
-            >
-              Messages
-            </Text>
-          </Card>
-          <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
-            <Text size="xl" align="center">
-              {promptsCount}
-            </Text>
-            <Text
-              size="xs"
-              color="dimmed"
-              align="center"
-              tt="uppercase"
-              fw={700}
-            >
-              Prompts
-            </Text>
-          </Card>
-        </Flex>
-        <Group mt="lg">
-          <Button
-            variant="default"
-            leftIcon={<IconDatabaseExport size={20} />}
-            onClick={async () => {
-              const blob = await db.export();
-              download(
-                blob,
-                `chatpad-export-${new Date().toLocaleString()}.json`,
-                "application/json"
-              );
-              notifications.show({
-                title: "Exporting Data",
-                message: "Your data is being exported.",
-              });
-            }}
-          >
-            Export Data
-          </Button>
-          <input
-            id="file-upload-btn"
-            type="file"
-            onChange={async (e) => {
-              const file = e.currentTarget.files?.[0];
-              if (!file) return;
-              db.import(file, {
-                acceptNameDiff: true,
-                overwriteValues: true,
-                acceptMissingTables: true,
-                clearTablesBeforeImport: true,
-              })
-                .then(() => {
-                  notifications.show({
-                    title: "Importing data",
-                    message: "Your data is being imported.",
-                  });
-                })
-                .catch((error) => {
-                  notifications.show({
-                    title: "Error",
-                    color: "red",
-                    message: "The file you selected is invalid",
-                  });
+        <Stack>
+          <Flex>
+            <Card withBorder sx={{ flex: 1 }}>
+              <Text size="xl" align="center">
+                {chatsCount}
+              </Text>
+              <Text
+                size="xs"
+                color="dimmed"
+                align="center"
+                tt="uppercase"
+                fw={700}
+              >
+                Chats
+              </Text>
+            </Card>
+            <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
+              <Text size="xl" align="center">
+                {messagesCount}
+              </Text>
+              <Text
+                size="xs"
+                color="dimmed"
+                align="center"
+                tt="uppercase"
+                fw={700}
+              >
+                Messages
+              </Text>
+            </Card>
+            <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
+              <Text size="xl" align="center">
+                {promptsCount}
+              </Text>
+              <Text
+                size="xs"
+                color="dimmed"
+                align="center"
+                tt="uppercase"
+                fw={700}
+              >
+                Prompts
+              </Text>
+            </Card>
+          </Flex>
+          <Group>
+            <Button
+              variant="default"
+              leftIcon={<IconDatabaseExport size={20} />}
+              onClick={async () => {
+                const blob = await db.export();
+                download(
+                  blob,
+                  `chatpad-export-${new Date().toLocaleString()}.json`,
+                  "application/json"
+                );
+                notifications.show({
+                  title: "Exporting Data",
+                  message: "Your data is being exported.",
                 });
-            }}
-            accept="application/json"
-            hidden
-          />
-          <Button
-            component="label"
-            htmlFor="file-upload-btn"
-            variant="default"
-            leftIcon={<IconDatabaseImport size={20} />}
-          >
-            Import Data
-          </Button>
-          <DeleteDataModal onOpen={close} />
-        </Group>
+              }}
+            >
+              Export Data
+            </Button>
+            <input
+              id="file-upload-btn"
+              type="file"
+              onChange={async (e) => {
+                const file = e.currentTarget.files?.[0];
+                if (!file) return;
+                db.import(file, {
+                  acceptNameDiff: true,
+                  overwriteValues: true,
+                  acceptMissingTables: true,
+                  clearTablesBeforeImport: true,
+                })
+                  .then(() => {
+                    notifications.show({
+                      title: "Importing data",
+                      message: "Your data is being imported.",
+                    });
+                  })
+                  .catch((error) => {
+                    notifications.show({
+                      title: "Error",
+                      color: "red",
+                      message: "The file you selected is invalid",
+                    });
+                  });
+              }}
+              accept="application/json"
+              hidden
+            />
+            <Button
+              component="label"
+              htmlFor="file-upload-btn"
+              variant="default"
+              leftIcon={<IconDatabaseImport size={20} />}
+            >
+              Import Data
+            </Button>
+          </Group>
+          <Group>
+            <DeleteChatsModal onOpen={close} />
+            <DeleteAllDataModal onOpen={close} />
+          </Group>
+        </Stack>
       </Modal>
     </>
   );

src/components/DeleteAllDataModal.tsx

@@ -3,15 +3,23 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
 import { db } from "../db";
 
-export function DeleteDataModal({ onOpen }: { onOpen: () => void }) {
+export function DeleteAllDataModal({ onOpen }: { onOpen: () => void }) {
   const [opened, { open, close }] = useDisclosure(false, { onOpen });
 
   return (
     <>
+      <Button
+        onClick={open}
+        variant="outline"
+        color="red"
+        leftIcon={<IconTrash size={20} />}
+      >
+        Delete All Data
+      </Button>
       <Modal
         opened={opened}
         onClose={close}
-        title="Delete Data"
+        title="Delete All Data"
         size="md"
         withinPortal
       >
@@ -29,14 +37,6 @@ export function DeleteDataModal({ onOpen }: { onOpen: () => void }) {
           </Button>
         </Stack>
       </Modal>
-      <Button
-        onClick={open}
-        variant="outline"
-        color="red"
-        leftIcon={<IconTrash size={20} />}
-      >
-        Delete Data
-      </Button>
     </>
   );
 }

src/components/DeleteChatsModal.tsx

@@ -0,0 +1,43 @@
+import { Button, Modal, Stack, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconTrash } from "@tabler/icons-react";
+import { db } from "../db";
+
+export function DeleteChatsModal({ onOpen }: { onOpen: () => void }) {
+  const [opened, { open, close }] = useDisclosure(false, { onOpen });
+
+  return (
+    <>
+      <Button
+        onClick={open}
+        variant="outline"
+        color="red"
+        leftIcon={<IconTrash size={20} />}
+      >
+        Delete Chats
+      </Button>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Delete Chats"
+        size="md"
+        withinPortal
+      >
+        <Stack>
+          <Text size="sm">Are you sure you want to delete your chats?</Text>
+          <Button
+            onClick={async () => {
+              await db.chats.clear();
+              await db.messages.clear();
+              localStorage.clear();
+              window.location.assign("/");
+            }}
+            color="red"
+          >
+            Delete
+          </Button>
+        </Stack>
+      </Modal>
+    </>
+  );
+}