feat: allow participants to ask for email transcript (#923)

* feat: allow participants to ask for email transcript

* fix: set email update in a transaction

www/app/lib/emailTranscript/EmailTranscriptDialog.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Box, Button, Input, Text, VStack, HStack } from "@chakra-ui/react";
+
+interface EmailTranscriptDialogProps {
+  onSubmit: (email: string) => void;
+  onDismiss: () => void;
+}
+
+export function EmailTranscriptDialog({
+  onSubmit,
+  onDismiss,
+}: EmailTranscriptDialogProps) {
+  const [email, setEmail] = useState("");
+  const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    inputEl?.focus();
+  }, [inputEl]);
+
+  const handleSubmit = () => {
+    const trimmed = email.trim();
+    if (trimmed) {
+      onSubmit(trimmed);
+    }
+  };
+
+  return (
+    <Box
+      p={6}
+      bg="rgba(255, 255, 255, 0.7)"
+      borderRadius="lg"
+      boxShadow="lg"
+      maxW="md"
+      mx="auto"
+    >
+      <VStack gap={4} alignItems="center">
+        <Text fontSize="md" textAlign="center" fontWeight="medium">
+          Enter your email to receive the transcript when it&apos;s ready
+        </Text>
+        <Input
+          ref={setInputEl}
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSubmit();
+          }}
+          size="sm"
+          bg="white"
+        />
+        <HStack gap={4} justifyContent="center">
+          <Button variant="ghost" size="sm" onClick={onDismiss}>
+            Cancel
+          </Button>
+          <Button
+            colorPalette="primary"
+            size="sm"
+            onClick={handleSubmit}
+            disabled={!email.trim()}
+          >
+            Send
+          </Button>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+}

www/app/lib/emailTranscript/index.ts

@@ -0,0 +1 @@
+export { useEmailTranscriptDialog } from "./useEmailTranscriptDialog";

www/app/lib/emailTranscript/useEmailTranscriptDialog.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useCallback, useState, useEffect, useRef } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster";
+import { useMeetingAddEmailRecipient } from "../apiHooks";
+import { EmailTranscriptDialog } from "./EmailTranscriptDialog";
+import type { MeetingId } from "../types";
+
+const TOAST_CHECK_INTERVAL_MS = 100;
+
+type UseEmailTranscriptDialogParams = {
+  meetingId: MeetingId;
+};
+
+export function useEmailTranscriptDialog({
+  meetingId,
+}: UseEmailTranscriptDialogParams) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const addEmailMutation = useMeetingAddEmailRecipient();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const keydownHandlerRef = useRef<((event: KeyboardEvent) => void) | null>(
+    null,
+  );
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      if (keydownHandlerRef.current) {
+        document.removeEventListener("keydown", keydownHandlerRef.current);
+        keydownHandlerRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleSubmitEmail = useCallback(
+    async (email: string) => {
+      try {
+        await addEmailMutation.mutateAsync({
+          params: {
+            path: { meeting_id: meetingId },
+          },
+          body: {
+            email,
+          },
+        });
+
+        toaster.create({
+          duration: 4000,
+          render: () => (
+            <Box
+              p={4}
+              bg="green.100"
+              borderRadius="md"
+              boxShadow="md"
+              textAlign="center"
+            >
+              <Text fontWeight="medium">Email registered</Text>
+              <Text fontSize="sm" color="gray.600">
+                You will receive the transcript link when processing is
+                complete.
+              </Text>
+            </Box>
+          ),
+        });
+      } catch (error) {
+        console.error("Error adding email recipient:", error);
+      }
+    },
+    [addEmailMutation, meetingId],
+  );
+
+  const showEmailModal = useCallback(() => {
+    if (modalOpen) return;
+
+    setModalOpen(true);
+
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => (
+        <EmailTranscriptDialog
+          onSubmit={(email) => {
+            handleSubmitEmail(email);
+            dismiss();
+          }}
+          onDismiss={() => {
+            dismiss();
+          }}
+        />
+      ),
+    });
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toastId.then((id) => toaster.dismiss(id));
+      }
+    };
+
+    keydownHandlerRef.current = handleKeyDown;
+    document.addEventListener("keydown", handleKeyDown);
+
+    toastId.then((id) => {
+      intervalRef.current = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+
+          if (keydownHandlerRef.current) {
+            document.removeEventListener("keydown", keydownHandlerRef.current);
+            keydownHandlerRef.current = null;
+          }
+        }
+      }, TOAST_CHECK_INTERVAL_MS);
+    });
+  }, [handleSubmitEmail, modalOpen]);
+
+  return {
+    showEmailModal,
+  };
+}