feat: delete recording with transcript (#547)

* Delete recording with transcript

* Delete confirmation dialog

* Use aws storage abstraction for recording deletion

* Test recording deleted with transcript

* Use get transcript storage

* Fix the test

* Add env vars for recording storage

www/app/(app)/browse/_components/DeleteTranscriptDialog.tsx

@@ -1,12 +1,15 @@
 import React from "react";
-import { Button } from "@chakra-ui/react";
-// import { Dialog } from "@chakra-ui/react";
+import { Button, Dialog, Text } from "@chakra-ui/react";
 
 interface DeleteTranscriptDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
   cancelRef: React.RefObject<any>;
+  isLoading?: boolean;
+  title?: string;
+  date?: string;
+  source?: string;
 }
 
 export default function DeleteTranscriptDialog({
@@ -14,35 +17,65 @@ export default function DeleteTranscriptDialog({
   onClose,
   onConfirm,
   cancelRef,
+  isLoading,
+  title,
+  date,
+  source,
 }: DeleteTranscriptDialogProps) {
-  // Temporarily return null to fix import issues
-  return null;
-
-  /* return (
+  return (
     <Dialog.Root
       open={isOpen}
-      onOpenChange={(e) => !e.open && onClose()}
+      onOpenChange={(e) => {
+        if (!e.open) onClose();
+      }}
       initialFocusEl={() => cancelRef.current}
     >
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content>
           <Dialog.Header fontSize="lg" fontWeight="bold">
-            Delete Transcript
+            Delete transcript
           </Dialog.Header>
           <Dialog.Body>
-            Are you sure? You can't undo this action afterwards.
+            Are you sure you want to delete this transcript? This action cannot
+            be undone.
+            {title && (
+              <Text mt={3} fontWeight="600">
+                {title}
+              </Text>
+            )}
+            {date && (
+              <Text color="gray.600" fontSize="sm">
+                Date: {date}
+              </Text>
+            )}
+            {source && (
+              <Text color="gray.600" fontSize="sm">
+                Source: {source}
+              </Text>
+            )}
           </Dialog.Body>
           <Dialog.Footer>
-            <Button ref={cancelRef} onClick={onClose}>
+            <Button
+              ref={cancelRef as any}
+              onClick={onClose}
+              disabled={!!isLoading}
+              variant="outline"
+              colorPalette="gray"
+            >
               Cancel
             </Button>
-            <Button colorPalette="red" onClick={onConfirm} ml={3}>
+            <Button
+              colorPalette="red"
+              onClick={onConfirm}
+              ml={3}
+              disabled={!!isLoading}
+            >
               Delete
             </Button>
           </Dialog.Footer>
         </Dialog.Content>
       </Dialog.Positioner>
     </Dialog.Root>
-  ); */
+  );
 }