vibe dailyco

www/app/[roomName]/components/DailyRoom.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Button, Text, VStack, HStack, Icon } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster";
+import { useRouter } from "next/navigation";
+import { useRecordingConsent } from "../../recordingConsentContext";
+import { useMeetingAudioConsent } from "../../lib/apiHooks";
+import { FaBars } from "react-icons/fa6";
+import DailyIframe, { DailyCall } from "@daily-co/daily-js";
+import type { components } from "../../reflector-api";
+import { useAuth } from "../../lib/AuthProvider";
+
+type Meeting = components["schemas"]["Meeting"];
+
+const CONSENT_BUTTON_TOP_OFFSET = "56px";
+const TOAST_CHECK_INTERVAL_MS = 100;
+
+interface DailyRoomProps {
+  meeting: Meeting;
+}
+
+function ConsentDialogButton({ meetingId }: { meetingId: string }) {
+  const { state: consentState, touch, hasConsent } = useRecordingConsent();
+  const [modalOpen, setModalOpen] = useState(false);
+  const audioConsentMutation = useMeetingAudioConsent();
+
+  const handleConsent = useCallback(
+    async (meetingId: string, given: boolean) => {
+      try {
+        await audioConsentMutation.mutateAsync({
+          params: {
+            path: {
+              meeting_id: meetingId,
+            },
+          },
+          body: {
+            consent_given: given,
+          },
+        });
+
+        touch(meetingId);
+      } catch (error) {
+        console.error("Error submitting consent:", error);
+      }
+    },
+    [audioConsentMutation, touch],
+  );
+
+  const showConsentModal = useCallback(() => {
+    if (modalOpen) return;
+
+    setModalOpen(true);
+
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => (
+        <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">
+              Can we have your permission to store this meeting's audio
+              recording on our servers?
+            </Text>
+            <HStack gap={4} justifyContent="center">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  handleConsent(meetingId, false).then(() => {
+                    /*signifies it's ok to now wait here.*/
+                  });
+                  dismiss();
+                }}
+              >
+                No, delete after transcription
+              </Button>
+              <Button
+                colorPalette="primary"
+                size="sm"
+                onClick={() => {
+                  handleConsent(meetingId, true).then(() => {
+                    /*signifies it's ok to now wait here.*/
+                  });
+                  dismiss();
+                }}
+              >
+                Yes, store the audio
+              </Button>
+            </HStack>
+          </VStack>
+        </Box>
+      ),
+    });
+
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, TOAST_CHECK_INTERVAL_MS);
+    });
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toastId.then((id) => toaster.dismiss(id));
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    const cleanup = () => {
+      toastId.then((id) => toaster.dismiss(id));
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+
+    return cleanup;
+  }, [meetingId, handleConsent, modalOpen]);
+
+  if (
+    !consentState.ready ||
+    hasConsent(meetingId) ||
+    audioConsentMutation.isPending
+  ) {
+    return null;
+  }
+
+  return (
+    <Button
+      position="absolute"
+      top={CONSENT_BUTTON_TOP_OFFSET}
+      left="8px"
+      zIndex={1000}
+      colorPalette="blue"
+      size="sm"
+      onClick={showConsentModal}
+    >
+      Meeting is being recorded
+      <Icon as={FaBars} ml={2} />
+    </Button>
+  );
+}
+
+const recordingTypeRequiresConsent = (
+  recordingType: Meeting["recording_type"],
+) => {
+  return recordingType === "cloud";
+};
+
+export default function DailyRoom({ meeting }: DailyRoomProps) {
+  const router = useRouter();
+  const auth = useAuth();
+  const status = auth.status;
+  const isAuthenticated = status === "authenticated";
+  const [callFrame, setCallFrame] = useState<DailyCall | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const roomUrl = meeting?.host_room_url || meeting?.room_url;
+
+  const isLoading = status === "loading";
+
+  const handleLeave = useCallback(() => {
+    router.push("/browse");
+  }, [router]);
+
+  useEffect(() => {
+    if (isLoading || !roomUrl || !containerRef.current) return;
+
+    let frame: DailyCall | null = null;
+    let destroyed = false;
+
+    const createAndJoin = async () => {
+      try {
+        const existingFrame = DailyIframe.getCallInstance();
+        if (existingFrame) {
+          await existingFrame.destroy();
+        }
+
+        frame = DailyIframe.createFrame(containerRef.current!, {
+          iframeStyle: {
+            width: "100vw",
+            height: "100vh",
+            border: "none",
+          },
+          showLeaveButton: true,
+          showFullscreenButton: true,
+        });
+
+        if (destroyed) {
+          await frame.destroy();
+          return;
+        }
+
+        frame.on("left-meeting", handleLeave);
+        await frame.join({ url: roomUrl });
+
+        if (!destroyed) {
+          setCallFrame(frame);
+        }
+      } catch (error) {
+        console.error("Error creating Daily frame:", error);
+      }
+    };
+
+    createAndJoin();
+
+    return () => {
+      destroyed = true;
+      if (frame) {
+        frame.destroy().catch((e) => {
+          console.error("Error destroying frame:", e);
+        });
+      }
+    };
+  }, [roomUrl, isLoading, handleLeave]);
+
+  if (!roomUrl) {
+    return null;
+  }
+
+  return (
+    <Box position="relative" width="100vw" height="100vh">
+      <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
+      {recordingTypeRequiresConsent(meeting.recording_type) && (
+        <ConsentDialogButton meetingId={meeting.id} />
+      )}
+    </Box>
+  );
+}

www/app/[roomName]/components/RoomContainer.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { roomMeetingUrl } from "../../lib/routes";
+import { useCallback, useEffect, useState, use } from "react";
+import { Box, Text, Spinner } from "@chakra-ui/react";
+import { useRouter } from "next/navigation";
+import {
+  useRoomGetByName,
+  useRoomsCreateMeeting,
+  useRoomGetMeeting,
+} from "../../lib/apiHooks";
+import type { components } from "../../reflector-api";
+import MeetingSelection from "../MeetingSelection";
+import useRoomDefaultMeeting from "../useRoomDefaultMeeting";
+import WherebyRoom from "./WherebyRoom";
+import DailyRoom from "./DailyRoom";
+import { useAuth } from "../../lib/AuthProvider";
+import { useError } from "../../(errors)/errorContext";
+import { parseNonEmptyString } from "../../lib/utils";
+import { printApiError } from "../../api/_error";
+
+type Meeting = components["schemas"]["Meeting"];
+
+export type RoomDetails = {
+  params: Promise<{
+    roomName: string;
+    meetingId?: string;
+  }>;
+};
+
+function LoadingSpinner() {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="100vh"
+      bg="gray.50"
+      p={4}
+    >
+      <Spinner color="blue.500" size="xl" />
+    </Box>
+  );
+}
+
+export default function RoomContainer(details: RoomDetails) {
+  const params = use(details.params);
+  const roomName = parseNonEmptyString(
+    params.roomName,
+    true,
+    "panic! params.roomName is required",
+  );
+  const router = useRouter();
+  const auth = useAuth();
+  const status = auth.status;
+  const isAuthenticated = status === "authenticated";
+  const { setError } = useError();
+
+  const roomQuery = useRoomGetByName(roomName);
+  const createMeetingMutation = useRoomsCreateMeeting();
+
+  const room = roomQuery.data;
+
+  const pageMeetingId = params.meetingId;
+
+  const defaultMeeting = useRoomDefaultMeeting(
+    room && !room.ics_enabled && !pageMeetingId ? roomName : null,
+  );
+
+  const explicitMeeting = useRoomGetMeeting(roomName, pageMeetingId || null);
+
+  const meeting = explicitMeeting.data || defaultMeeting.response;
+
+  const isLoading =
+    status === "loading" ||
+    roomQuery.isLoading ||
+    defaultMeeting?.loading ||
+    explicitMeeting.isLoading ||
+    createMeetingMutation.isPending;
+
+  const errors = [
+    explicitMeeting.error,
+    defaultMeeting.error,
+    roomQuery.error,
+    createMeetingMutation.error,
+  ].filter(Boolean);
+
+  const isOwner =
+    isAuthenticated && room ? auth.user?.id === room.user_id : false;
+
+  const handleMeetingSelect = (selectedMeeting: Meeting) => {
+    router.push(
+      roomMeetingUrl(
+        roomName,
+        parseNonEmptyString(
+          selectedMeeting.id,
+          true,
+          "panic! selectedMeeting.id is required",
+        ),
+      ),
+    );
+  };
+
+  const handleCreateUnscheduled = async () => {
+    try {
+      const newMeeting = await createMeetingMutation.mutateAsync({
+        params: {
+          path: { room_name: roomName },
+        },
+        body: {
+          allow_duplicated: room ? room.ics_enabled : false,
+        },
+      });
+      handleMeetingSelect(newMeeting);
+    } catch (err) {
+      console.error("Failed to create meeting:", err);
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!room) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <Text fontSize="lg">Room not found</Text>
+      </Box>
+    );
+  }
+
+  if (room.ics_enabled && !params.meetingId) {
+    return (
+      <MeetingSelection
+        roomName={roomName}
+        isOwner={isOwner}
+        isSharedRoom={room?.is_shared || false}
+        authLoading={["loading", "refreshing"].includes(auth.status)}
+        onMeetingSelect={handleMeetingSelect}
+        onCreateUnscheduled={handleCreateUnscheduled}
+        isCreatingMeeting={createMeetingMutation.isPending}
+      />
+    );
+  }
+
+  if (errors.length > 0) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        {errors.map((error, i) => (
+          <Text key={i} fontSize="lg">
+            {printApiError(error)}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  if (!meeting) {
+    return <LoadingSpinner />;
+  }
+
+  const platform = meeting.platform;
+
+  if (!platform) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <Text fontSize="lg">Meeting platform not configured</Text>
+      </Box>
+    );
+  }
+
+  switch (platform) {
+    case "daily":
+      return <DailyRoom meeting={meeting} />;
+    case "whereby":
+      return <WherebyRoom meeting={meeting} />;
+    default: {
+      const _exhaustive: never = platform;
+      return (
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100vh"
+          bg="gray.50"
+          p={4}
+        >
+          <Text fontSize="lg">Unknown platform: {platform}</Text>
+        </Box>
+      );
+    }
+  }
+}

www/app/[roomName]/components/WherebyRoom.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, RefObject } from "react";
+import { Box, Button, Text, VStack, HStack, Icon } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster";
+import { useRouter } from "next/navigation";
+import { useRecordingConsent } from "../../recordingConsentContext";
+import { useMeetingAudioConsent } from "../../lib/apiHooks";
+import type { components } from "../../reflector-api";
+import { FaBars } from "react-icons/fa6";
+import { useAuth } from "../../lib/AuthProvider";
+import { getWherebyUrl, useWhereby } from "../../lib/wherebyClient";
+import { assertExistsAndNonEmptyString, NonEmptyString } from "../../lib/utils";
+
+type Meeting = components["schemas"]["Meeting"];
+
+interface WherebyRoomProps {
+  meeting: Meeting;
+}
+
+const useConsentWherebyFocusManagement = (
+  acceptButtonRef: RefObject<HTMLButtonElement>,
+  wherebyRef: RefObject<HTMLElement>,
+) => {
+  const currentFocusRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    if (acceptButtonRef.current) {
+      acceptButtonRef.current.focus();
+    } else {
+      console.error(
+        "accept button ref not available yet for focus management - seems to be illegal state",
+      );
+    }
+
+    const handleWherebyReady = () => {
+      console.log("whereby ready - refocusing consent button");
+      currentFocusRef.current = document.activeElement as HTMLElement;
+      if (acceptButtonRef.current) {
+        acceptButtonRef.current.focus();
+      }
+    };
+
+    if (wherebyRef.current) {
+      wherebyRef.current.addEventListener("ready", handleWherebyReady);
+    } else {
+      console.warn(
+        "whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
+      );
+    }
+
+    return () => {
+      wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
+      currentFocusRef.current?.focus();
+    };
+  }, []);
+};
+
+const useConsentDialog = (
+  meetingId: string,
+  wherebyRef: RefObject<HTMLElement>,
+) => {
+  const { state: consentState, touch, hasConsent } = useRecordingConsent();
+  const [modalOpen, setModalOpen] = useState(false);
+  const audioConsentMutation = useMeetingAudioConsent();
+
+  const handleConsent = useCallback(
+    async (meetingId: string, given: boolean) => {
+      try {
+        await audioConsentMutation.mutateAsync({
+          params: {
+            path: {
+              meeting_id: meetingId,
+            },
+          },
+          body: {
+            consent_given: given,
+          },
+        });
+
+        touch(meetingId);
+      } catch (error) {
+        console.error("Error submitting consent:", error);
+      }
+    },
+    [audioConsentMutation, touch],
+  );
+
+  const showConsentModal = useCallback(() => {
+    if (modalOpen) return;
+
+    setModalOpen(true);
+
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => {
+        const AcceptButton = () => {
+          const buttonRef = useRef<HTMLButtonElement>(null);
+          useConsentWherebyFocusManagement(buttonRef, wherebyRef);
+          return (
+            <Button
+              ref={buttonRef}
+              colorPalette="primary"
+              size="sm"
+              onClick={() => {
+                handleConsent(meetingId, true).then(() => {
+                  /*signifies it's ok to now wait here.*/
+                });
+                dismiss();
+              }}
+            >
+              Yes, store the audio
+            </Button>
+          );
+        };
+
+        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">
+                Can we have your permission to store this meeting's audio
+                recording on our servers?
+              </Text>
+              <HStack gap={4} justifyContent="center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    handleConsent(meetingId, false).then(() => {
+                      /*signifies it's ok to now wait here.*/
+                    });
+                    dismiss();
+                  }}
+                >
+                  No, delete after transcription
+                </Button>
+                <AcceptButton />
+              </HStack>
+            </VStack>
+          </Box>
+        );
+      },
+    });
+
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, 100);
+    });
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toastId.then((id) => toaster.dismiss(id));
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    const cleanup = () => {
+      toastId.then((id) => toaster.dismiss(id));
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+
+    return cleanup;
+  }, [meetingId, handleConsent, wherebyRef, modalOpen]);
+
+  return {
+    showConsentModal,
+    consentState,
+    hasConsent,
+    consentLoading: audioConsentMutation.isPending,
+  };
+};
+
+function ConsentDialogButton({
+  meetingId,
+  wherebyRef,
+}: {
+  meetingId: NonEmptyString;
+  wherebyRef: React.RefObject<HTMLElement>;
+}) {
+  const { showConsentModal, consentState, hasConsent, consentLoading } =
+    useConsentDialog(meetingId, wherebyRef);
+
+  if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
+    return null;
+  }
+
+  return (
+    <Button
+      position="absolute"
+      top="56px"
+      left="8px"
+      zIndex={1000}
+      colorPalette="blue"
+      size="sm"
+      onClick={showConsentModal}
+    >
+      Meeting is being recorded
+      <Icon as={FaBars} ml={2} />
+    </Button>
+  );
+}
+
+const recordingTypeRequiresConsent = (
+  recordingType: NonNullable<Meeting["recording_type"]>,
+) => {
+  return recordingType === "cloud";
+};
+
+export default function WherebyRoom({ meeting }: WherebyRoomProps) {
+  const wherebyLoaded = useWhereby();
+  const wherebyRef = useRef<HTMLElement>(null);
+  const router = useRouter();
+  const auth = useAuth();
+  const status = auth.status;
+  const isAuthenticated = status === "authenticated";
+
+  const wherebyRoomUrl = getWherebyUrl(meeting);
+  const recordingType = meeting.recording_type;
+  const meetingId = meeting.id;
+
+  const isLoading = status === "loading";
+
+  const handleLeave = useCallback(() => {
+    router.push("/browse");
+  }, [router]);
+
+  useEffect(() => {
+    if (isLoading || !isAuthenticated || !wherebyRoomUrl || !wherebyLoaded)
+      return;
+
+    wherebyRef.current?.addEventListener("leave", handleLeave);
+
+    return () => {
+      wherebyRef.current?.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave, wherebyRoomUrl, isLoading, isAuthenticated, wherebyLoaded]);
+
+  if (!wherebyRoomUrl || !wherebyLoaded) {
+    return null;
+  }
+
+  return (
+    <>
+      <whereby-embed
+        ref={wherebyRef}
+        room={wherebyRoomUrl}
+        style={{ width: "100vw", height: "100vh" }}
+      />
+      {recordingType &&
+        recordingTypeRequiresConsent(recordingType) &&
+        meetingId && (
+          <ConsentDialogButton
+            meetingId={assertExistsAndNonEmptyString(meetingId)}
+            wherebyRef={wherebyRef}
+          />
+        )}
+    </>
+  );
+}

www/app/[roomName]/page.tsx

@@ -1,3 +1,3 @@
-import Room from "./room";
+import RoomContainer from "./components/RoomContainer";
 
-export default Room;
+export default RoomContainer;

www/app/reflector-api.d.ts

@@ -4,6 +4,23 @@
  */
 
 export interface paths {
+  "/health": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Health */
+    get: operations["health"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
   "/metrics": {
     parameters: {
       query?: never;
@@ -644,6 +661,26 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
+  "/v1/webhook": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /**
+     * Webhook
+     * @description Handle Daily webhook events.
+     */
+    post: operations["v1_webhook"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -750,6 +787,8 @@ export interface components {
        * @default false
        */
       ics_enabled: boolean;
+      /** Platform */
+      platform?: ("whereby" | "daily") | null;
     };
     /** CreateRoomMeeting */
     CreateRoomMeeting: {
@@ -775,6 +814,22 @@ export interface components {
       target_language: string;
       source_kind?: components["schemas"]["SourceKind"] | null;
     };
+    /**
+     * DailyWebhookEvent
+     * @description Daily webhook event structure.
+     */
+    DailyWebhookEvent: {
+      /** Type */
+      type: string;
+      /** Id */
+      id: string;
+      /** Ts */
+      ts: number;
+      /** Data */
+      data: {
+        [key: string]: unknown;
+      };
+    };
     /** DeletionStatus */
     DeletionStatus: {
       /** Status */
@@ -1091,6 +1146,12 @@ export interface components {
       calendar_metadata?: {
         [key: string]: unknown;
       } | null;
+      /**
+       * Platform
+       * @default whereby
+       * @enum {string}
+       */
+      platform: "whereby" | "daily";
     };
     /** MeetingConsentRequest */
     MeetingConsentRequest: {
@@ -1177,6 +1238,12 @@ export interface components {
       ics_last_sync?: string | null;
       /** Ics Last Etag */
       ics_last_etag?: string | null;
+      /**
+       * Platform
+       * @default whereby
+       * @enum {string}
+       */
+      platform: "whereby" | "daily";
     };
     /** RoomDetails */
     RoomDetails: {
@@ -1223,6 +1290,12 @@ export interface components {
       ics_last_sync?: string | null;
       /** Ics Last Etag */
       ics_last_etag?: string | null;
+      /**
+       * Platform
+       * @default whereby
+       * @enum {string}
+       */
+      platform: "whereby" | "daily";
       /** Webhook Url */
       webhook_url: string | null;
       /** Webhook Secret */
@@ -1403,6 +1476,8 @@ export interface components {
       ics_fetch_interval?: number | null;
       /** Ics Enabled */
       ics_enabled?: boolean | null;
+      /** Platform */
+      platform?: ("whereby" | "daily") | null;
     };
     /** UpdateTranscript */
     UpdateTranscript: {
@@ -1509,6 +1584,26 @@ export interface components {
 }
 export type $defs = Record<string, never>;
 export interface operations {
+  health: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+    };
+  };
   metrics: {
     parameters: {
       query?: never;
@@ -2983,4 +3078,37 @@ export interface operations {
       };
     };
   };
+  v1_webhook: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["DailyWebhookEvent"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
 }

www/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.24.2",
+    "@daily-co/daily-js": "^0.84.0",
     "@emotion/react": "^11.14.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",

www/pnpm-lock.yaml

@@ -10,6 +10,9 @@ importers:
       "@chakra-ui/react":
         specifier: ^3.24.2
         version: 3.24.2(@emotion/react@11.14.0(@types/react@18.2.20)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@daily-co/daily-js":
+        specifier: ^0.84.0
+        version: 0.84.0
       "@emotion/react":
         specifier: ^11.14.0
         version: 11.14.0(@types/react@18.2.20)(react@18.3.1)
@@ -487,6 +490,13 @@ packages:
       }
     engines: { node: ">=12" }
 
+  "@daily-co/daily-js@0.84.0":
+    resolution:
+      {
+        integrity: sha512-/ynXrMDDkRXhLlHxiFNf9QU5yw4ZGPr56wNARgja/Tiid71UIniundTavCNF5cMb2I1vNoMh7oEJ/q8stg/V7g==,
+      }
+    engines: { node: ">=10.0.0" }
+
   "@emnapi/core@1.4.5":
     resolution:
       {
@@ -2293,6 +2303,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry-internal/browser-utils@8.55.0":
+    resolution:
+      {
+        integrity: sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry-internal/feedback@10.11.0":
     resolution:
       {
@@ -2300,6 +2317,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry-internal/feedback@8.55.0":
+    resolution:
+      {
+        integrity: sha512-cP3BD/Q6pquVQ+YL+rwCnorKuTXiS9KXW8HNKu4nmmBAyf7urjs+F6Hr1k9MXP5yQ8W3yK7jRWd09Yu6DHWOiw==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry-internal/replay-canvas@10.11.0":
     resolution:
       {
@@ -2307,6 +2331,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry-internal/replay-canvas@8.55.0":
+    resolution:
+      {
+        integrity: sha512-nIkfgRWk1091zHdu4NbocQsxZF1rv1f7bbp3tTIlZYbrH62XVZosx5iHAuZG0Zc48AETLE7K4AX9VGjvQj8i9w==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry-internal/replay@10.11.0":
     resolution:
       {
@@ -2314,6 +2345,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry-internal/replay@8.55.0":
+    resolution:
+      {
+        integrity: sha512-roCDEGkORwolxBn8xAKedybY+Jlefq3xYmgN2fr3BTnsXjSYOPC7D1/mYqINBat99nDtvgFvNfRcZPiwwZ1hSw==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry/babel-plugin-component-annotate@4.3.0":
     resolution:
       {
@@ -2328,6 +2366,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry/browser@8.55.0":
+    resolution:
+      {
+        integrity: sha512-1A31mCEWCjaMxJt6qGUK+aDnLDcK6AwLAZnqpSchNysGni1pSn1RWSmk9TBF8qyTds5FH8B31H480uxMPUJ7Cw==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry/bundler-plugin-core@4.3.0":
     resolution:
       {
@@ -2421,6 +2466,13 @@ packages:
       }
     engines: { node: ">=18" }
 
+  "@sentry/core@8.55.0":
+    resolution:
+      {
+        integrity: sha512-6g7jpbefjHYs821Z+EBJ8r4Z7LT5h80YSWRJaylGS4nW5W5Z2KXzpdnyFarv37O7QjauzVC2E+PABmpkw5/JGA==,
+      }
+    engines: { node: ">=14.18" }
+
   "@sentry/nextjs@10.11.0":
     resolution:
       {
@@ -4029,6 +4081,12 @@ packages:
       }
     engines: { node: ">=8" }
 
+  bowser@2.12.1:
+    resolution:
+      {
+        integrity: sha512-z4rE2Gxh7tvshQ4hluIT7XcFrgLIQaw9X3A+kTTRdovCz5PMukm/0QC/BKSYPj3omF5Qfypn9O/c5kgpmvYUCw==,
+      }
+
   brace-expansion@1.1.12:
     resolution:
       {
@@ -9288,6 +9346,14 @@ snapshots:
       "@jridgewell/trace-mapping": 0.3.9
     optional: true
 
+  "@daily-co/daily-js@0.84.0":
+    dependencies:
+      "@babel/runtime": 7.28.2
+      "@sentry/browser": 8.55.0
+      bowser: 2.12.1
+      dequal: 2.0.3
+      events: 3.3.0
+
   "@emnapi/core@1.4.5":
     dependencies:
       "@emnapi/wasi-threads": 1.0.4
@@ -10506,20 +10572,38 @@ snapshots:
     dependencies:
       "@sentry/core": 10.11.0
 
+  "@sentry-internal/browser-utils@8.55.0":
+    dependencies:
+      "@sentry/core": 8.55.0
+
   "@sentry-internal/feedback@10.11.0":
     dependencies:
       "@sentry/core": 10.11.0
 
+  "@sentry-internal/feedback@8.55.0":
+    dependencies:
+      "@sentry/core": 8.55.0
+
   "@sentry-internal/replay-canvas@10.11.0":
     dependencies:
       "@sentry-internal/replay": 10.11.0
       "@sentry/core": 10.11.0
 
+  "@sentry-internal/replay-canvas@8.55.0":
+    dependencies:
+      "@sentry-internal/replay": 8.55.0
+      "@sentry/core": 8.55.0
+
   "@sentry-internal/replay@10.11.0":
     dependencies:
       "@sentry-internal/browser-utils": 10.11.0
       "@sentry/core": 10.11.0
 
+  "@sentry-internal/replay@8.55.0":
+    dependencies:
+      "@sentry-internal/browser-utils": 8.55.0
+      "@sentry/core": 8.55.0
+
   "@sentry/babel-plugin-component-annotate@4.3.0": {}
 
   "@sentry/browser@10.11.0":
@@ -10530,6 +10614,14 @@ snapshots:
       "@sentry-internal/replay-canvas": 10.11.0
       "@sentry/core": 10.11.0
 
+  "@sentry/browser@8.55.0":
+    dependencies:
+      "@sentry-internal/browser-utils": 8.55.0
+      "@sentry-internal/feedback": 8.55.0
+      "@sentry-internal/replay": 8.55.0
+      "@sentry-internal/replay-canvas": 8.55.0
+      "@sentry/core": 8.55.0
+
   "@sentry/bundler-plugin-core@4.3.0":
     dependencies:
       "@babel/core": 7.28.3
@@ -10590,6 +10682,8 @@ snapshots:
 
   "@sentry/core@10.11.0": {}
 
+  "@sentry/core@8.55.0": {}
+
   "@sentry/nextjs@10.11.0(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(next@15.5.3(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.90.0))(react@18.3.1)(webpack@5.101.3)":
     dependencies:
       "@opentelemetry/api": 1.9.0
@@ -11967,6 +12061,8 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
+  bowser@2.12.1: {}
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2