meeting consent vibe

www/app/(app)/rooms/audioConsentDialog.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  Button,
+  Text,
+  HStack,
+} from "@chakra-ui/react";
+
+interface AudioConsentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConsent: (given: boolean) => void;
+}
+
+const AudioConsentDialog = ({ isOpen, onClose, onConsent }: AudioConsentDialogProps) => {
+  const handleConsent = (given: boolean) => {
+    onConsent(given);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false} closeOnEsc={false}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Audio Storage Consent</ModalHeader>
+        <ModalBody pb={6}>
+          <Text mb={4}>
+            Can we have your permission to store this meeting's audio recording on our servers?
+          </Text>
+          <HStack spacing={4}>
+            <Button colorScheme="green" onClick={() => handleConsent(true)}>
+              Yes, store the audio
+            </Button>
+            <Button colorScheme="red" onClick={() => handleConsent(false)}>
+              No, delete after transcription
+            </Button>
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AudioConsentDialog;

www/app/(app)/transcripts/[transcriptId]/record/page.tsx

@@ -13,6 +13,8 @@ import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
 import LiveTrancription from "../../liveTranscription";
+import AudioConsentDialog from "../../components/AudioConsentDialog";
+import useApi from "../../../../lib/useApi";
 
 type TranscriptDetails = {
   params: {
@@ -24,6 +26,9 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   const transcript = useTranscript(details.params.transcriptId);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
   const useActiveTopic = useState<Topic | null>(null);
+  const [showConsentDialog, setShowConsentDialog] = useState(false);
+  const [consentStatus, setConsentStatus] = useState<string>('');
+  const api = useApi();
 
   const webSockets = useWebSockets(details.params.transcriptId);
 
@@ -64,14 +69,60 @@ const TranscriptRecord = (details: TranscriptDetails) => {
     };
   }, []);
 
+  // Show consent dialog when recording starts and meeting_id is available
+  useEffect(() => {
+    if (status === "recording" && transcript.response?.meeting_id && !consentStatus) {
+      setShowConsentDialog(true);
+    }
+  }, [status, transcript.response?.meeting_id, consentStatus]);
+
+  const handleConsentResponse = async (consentGiven: boolean) => {
+    const meetingId = transcript.response?.meeting_id;
+    if (!meetingId || !api) {
+      console.error('No meeting_id available or API not initialized');
+      return;
+    }
+
+    try {
+      // Use a simple user identifier - could be improved with actual user ID
+      const userIdentifier = `user_${Date.now()}`;
+      
+      const response = await fetch(`/v1/meetings/${meetingId}/consent`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          consent_given: consentGiven,
+          user_identifier: userIdentifier
+        })
+      });
+
+      if (response.ok) {
+        setConsentStatus(consentGiven ? 'given' : 'denied');
+        console.log('Consent recorded successfully');
+      } else {
+        console.error('Failed to record consent');
+      }
+    } catch (error) {
+      console.error('Error recording consent:', error);
+    }
+  };
+
   return (
-    <Grid
-      templateColumns="1fr"
-      templateRows="auto minmax(0, 1fr) "
-      gap={4}
-      mt={4}
-      mb={4}
-    >
+    <>
+      <AudioConsentDialog
+        isOpen={showConsentDialog}
+        onClose={() => setShowConsentDialog(false)}
+        onConsent={handleConsentResponse}
+      />
+      <Grid
+        templateColumns="1fr"
+        templateRows="auto minmax(0, 1fr) "
+        gap={4}
+        mt={4}
+        mb={4}
+      >
       {status == "processing" ? (
         <WaveformLoading />
       ) : (
@@ -124,6 +175,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
         </Flex>
       </VStack>
     </Grid>
+    </>
   );
 };
 

www/app/[roomName]/page.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import "@whereby.com/browser-sdk/embed";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useContext } from "react";
 import { Box, Button, Text, VStack, HStack, Spinner } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
 import useSessionStatus from "../lib/useSessionStatus";
+import AudioConsentDialog from "../(app)/rooms/audioConsentDialog";
+import { DomainContext } from "../domainContext";
+import useSessionAccessToken from "../lib/useSessionAccessToken";
+import useSessionUser from "../lib/useSessionUser";
 
 export type RoomDetails = {
   params: {
@@ -20,8 +24,12 @@ export default function Room(details: RoomDetails) {
   const meeting = useRoomMeeting(roomName);
   const router = useRouter();
   const { isLoading, isAuthenticated } = useSessionStatus();
-
+  const [showConsentDialog, setShowConsentDialog] = useState(false);
   const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
+  const { api_url } = useContext(DomainContext);
+  const { accessToken } = useSessionAccessToken();
+  const { id: userId } = useSessionUser();
+
 
   const roomUrl = meeting?.response?.host_room_url
     ? meeting?.response?.host_room_url
@@ -31,9 +39,49 @@ export default function Room(details: RoomDetails) {
     router.push("/browse");
   }, [router]);
 
-  const handleConsent = (consent: boolean) => {
-    setConsentGiven(consent);
-  };
+  const getUserIdentifier = useCallback(() => {
+    if (isAuthenticated && userId) {
+      return userId; // Send actual user ID for authenticated users
+    }
+    
+    // For anonymous users, send no identifier
+    return null;
+  }, [isAuthenticated, userId]);
+
+  const handleConsent = useCallback(async (given: boolean) => {
+    setConsentGiven(given);
+    setShowConsentDialog(false); // Close dialog after consent is given
+    
+    if (meeting?.response?.id && api_url) {
+      try {
+        const userIdentifier = getUserIdentifier();
+        const requestBody: any = {
+          consent_given: given
+        };
+        
+        // Only include user_identifier if we have one (authenticated users)
+        if (userIdentifier) {
+          requestBody.user_identifier = userIdentifier;
+        }
+        
+        const response = await fetch(`${api_url}/v1/meetings/${meeting.response.id}/consent`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(accessToken && { 'Authorization': `Bearer ${accessToken}` })
+          },
+          body: JSON.stringify(requestBody),
+        });
+        
+        if (!response.ok) {
+          console.error('Failed to submit consent');
+        }
+      } catch (error) {
+        console.error('Error submitting consent:', error);
+      }
+    }
+  }, [meeting?.response?.id, api_url, accessToken]);
+
 
   useEffect(() => {
     if (
@@ -46,6 +94,13 @@ export default function Room(details: RoomDetails) {
     }
   }, [isLoading, meeting?.error]);
 
+  // Show consent dialog when meeting is loaded and consent hasn't been given yet
+  useEffect(() => {
+    if (meeting?.response?.id && consentGiven === null && !showConsentDialog) {
+      setShowConsentDialog(true);
+    }
+  }, [meeting?.response?.id, consentGiven, showConsentDialog]);
+
   useEffect(() => {
     if (isLoading || !isAuthenticated || !roomUrl) return;
 
@@ -77,51 +132,6 @@ export default function Room(details: RoomDetails) {
     );
   }
 
-  if (!isAuthenticated && !consentGiven) {
-    return (
-      <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        height="100vh"
-        bg="gray.50"
-        p={4}
-      >
-        <VStack
-          spacing={6}
-          p={10}
-          width="400px"
-          bg="white"
-          borderRadius="md"
-          shadow="md"
-          textAlign="center"
-        >
-          {consentGiven === null ? (
-            <>
-              <Text fontSize="lg" fontWeight="bold">
-                This meeting may be recorded. Do you consent to being recorded?
-              </Text>
-              <HStack spacing={4}>
-                <Button variant="outline" onClick={() => handleConsent(false)}>
-                  No, I do not consent
-                </Button>
-                <Button colorScheme="blue" onClick={() => handleConsent(true)}>
-                  Yes, I consent
-                </Button>
-              </HStack>
-            </>
-          ) : (
-            <>
-              <Text fontSize="lg" fontWeight="bold">
-                You cannot join the meeting without consenting to being
-                recorded.
-              </Text>
-            </>
-          )}
-        </VStack>
-      </Box>
-    );
-  }
 
   return (
     <>
@@ -132,6 +142,11 @@ export default function Room(details: RoomDetails) {
           style={{ width: "100vw", height: "100vh" }}
         />
       )}
+      <AudioConsentDialog
+        isOpen={showConsentDialog}
+        onClose={() => {}} // No-op: ESC should not close without consent
+        onConsent={handleConsent}
+      />
     </>
   );
 }