@tavus/cvi-ui 0.0.1-beta.1 → 0.0.1-beta.3

package/dev-components/components/hair-check-01/hair-check.module.css

@@ -0,0 +1,212 @@
+/* Button Component */
+/* Start of Selection */
+.buttonCancel {
+	padding: 1rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background-color: rgba(239, 68, 68, 0.8);
+	border-radius: 9999px;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s;
+	outline: none;
+}
+
+.buttonCancel:hover {
+	background-color: rgba(239, 68, 68, 1);
+}
+/* End of Selection */
+
+/* ButtonJoin Component */
+.buttonJoin {
+	padding: 5px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background-color: rgba(255, 255, 255, 0.1);
+	border-radius: 9999px;
+	color: white;
+	height: 3.625rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.buttonJoinInner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #32c75c;
+	border-radius: 9999px;
+	padding: 1rem;
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+	height: 3rem;
+	transition: background-color 0.2s;
+	font-weight: 500;
+	min-width: 8.5rem;
+}
+
+.buttonJoin:hover .buttonJoinInner {
+	background-color: rgba(62, 192, 97, 0.9);
+}
+
+.buttonJoin:disabled .buttonJoinInner {
+	background-color: rgba(34, 197, 94, 0.5);
+	cursor: not-allowed;
+}
+
+.buttonJoinDesktop {
+	display: none;
+}
+
+@media (min-width: 768px) {
+	.buttonJoinDesktop {
+		display: flex;
+	}
+}
+
+.buttonJoinMobile {
+	position: absolute;
+	top: -5.125rem;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 20;
+}
+
+@media (min-width: 768px) {
+	.buttonJoinMobile {
+		display: none;
+	}
+}
+
+/* HaircheckScreen Component */
+.haircheckBlock {
+	position: relative;
+	width: 100%;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	aspect-ratio: 9/16;
+	overflow: hidden;
+	border-radius: 0.5rem;
+	max-height: 90vh;
+}
+
+@media (min-width: 768px) {
+	.haircheckBlock {
+		aspect-ratio: 16/9;
+	}
+}
+
+.dailyVideo {
+	width: 100%;
+	height: 100%;
+	object-fit: cover !important;
+	position: absolute;
+	inset: 0;
+	transition: opacity 0.3s ease-in-out;
+}
+
+.haircheckUserPlaceholder {
+	position: absolute;
+	inset: 0;
+	background-color: #334155;
+	z-index: 5;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.haircheckUserIcon {
+	width: 12.5rem;
+	height: 12.5rem;
+	border-radius: 9999px;
+	background-color: rgba(255, 255, 255, 0.1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.haircheckSidebar {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background-color: rgba(2, 6, 23, 0.45);
+	backdrop-filter: blur(20px);
+	border-left: 1px solid rgba(255, 255, 255, 0.2);
+	z-index: 5;
+}
+
+@media (min-width: 768px) {
+	.haircheckSidebar {
+		left: auto;
+		top: 0;
+		bottom: 0;
+		width: 17.5rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.haircheckSidebar {
+		width: 23rem;
+	}
+}
+
+.haircheckSidebarContent {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1.5rem 1.25rem;
+	gap: 1.5rem;
+	width: 100%;
+	height: 100%;
+}
+
+@media (min-width: 768px) {
+	.haircheckSidebarContent {
+		padding: 1rem 1.25rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.haircheckSidebarContent {
+		padding: 2rem 1.25rem;
+	}
+}
+
+.haircheckContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+}
+
+.haircheckDescription {
+	color: #ffffff;
+	font-size: 1.125rem;
+	font-weight: 500;
+}
+
+@media (min-width: 768px) {
+	.haircheckDescription {
+		font-size: 1.25rem;
+	}
+}
+
+.haircheckControls {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 1rem;
+}

package/dev-components/components/hair-check-01/index.tsx

@@ -0,0 +1,184 @@
+import React, { memo, useEffect } from "react";
+import {
+  DailyVideo,
+  useDaily,
+} from "@daily-co/daily-react";
+import { CameraButton, MicrophoneButton } from "../controls";
+import { useStartHaircheck } from "../../hooks/use-start-haircheck";
+import { useLocalCamera } from "../../hooks/use-local-camera";
+
+import styles from "./hair-check.module.css";
+
+const JoinBtn = ({
+  onClick,
+  disabled,
+  className,
+  loading,
+}: {
+  loading?: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+}) => {
+  return (
+    <button
+      className={`${styles.buttonJoin} ${className || ''}`}
+      type="button"
+      onClick={onClick}
+      disabled={disabled || loading}
+    >
+      <div className={styles.buttonJoinInner}>
+        {loading ? "Joining..." : "Join Video Chat"}
+      </div>
+    </button>
+  );
+};
+
+export const HairCheck = memo(({
+  isJoinBtnLoading = false,
+  onJoin,
+  onCancel,
+}: {
+  isJoinBtnLoading?: boolean;
+  onJoin: () => void;
+  onCancel?: () => void;
+}) => {
+  const daily = useDaily();
+  const { localSessionId, isCamMuted } = useLocalCamera();
+
+  const { isPermissionsPrompt,
+    isPermissionsLoading,
+    isPermissionsGranted,
+    isPermissionsDenied,
+    requestPermissions
+  } = useStartHaircheck();
+
+  useEffect(() => {
+    requestPermissions();
+  }, []);
+
+  const onCancelHairCheck = () => {
+    if (daily) {
+      daily.leave();
+    }
+    onCancel?.();
+  };
+
+  const getDescription = () => {
+    if (isPermissionsPrompt) {
+      return "Make sure your camera and mic are ready!";
+    }
+    if (isPermissionsLoading) {
+      return "Getting your camera and mic ready...";
+    }
+    if (isPermissionsDenied) {
+      return "Camera and mic access denied. Allow permissions to continue.";
+    }
+    return "You're all set! Your device is ready.";
+  };
+  return (
+    <div className={styles.haircheckBlock}>
+      {isPermissionsGranted && !isCamMuted ? (
+        <DailyVideo
+          type="video"
+          sessionId={localSessionId}
+          mirror
+          className={styles.dailyVideo}
+        />
+      ) : (
+        <div className={styles.haircheckUserPlaceholder}>
+          <span className={styles.haircheckUserIcon}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="88"
+              height="89"
+              viewBox="0 0 88 89"
+              fill="none"
+              aria-label="Haircheck User"
+              role="img"
+            >
+              <path
+                d="M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z"
+                fill="url(#paint0_linear_7135_21737)"
+              />
+              <path
+                d="M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z"
+                fill="url(#paint1_linear_7135_21737)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear_7135_21737"
+                  x1="36.5001"
+                  y1="43"
+                  x2="44.0001"
+                  y2="97.5"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="white" />
+                  <stop offset="1" stopColor="white" stopOpacity="0" />
+                </linearGradient>
+                <linearGradient
+                  id="paint1_linear_7135_21737"
+                  x1="44"
+                  y1="4.64062"
+                  x2="44"
+                  y2="44.2406"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="white" />
+                  <stop offset="1" stopColor="white" stopOpacity="0" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </span>
+        </div>
+      )}
+
+      <div className={styles.haircheckSidebar}>
+        <div className={styles.haircheckSidebarContent}>
+          {isPermissionsDenied ?
+            <button
+              type="button"
+              onClick={onCancelHairCheck}
+              className={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}
+            >
+              Cancel
+            </button> :
+            <JoinBtn
+              loading={isJoinBtnLoading}
+              disabled={!isPermissionsGranted}
+              className={styles.buttonJoinMobile}
+              onClick={onJoin}
+            />
+          }
+          <div />
+          <div className={styles.haircheckContent}>
+            <div className={styles.haircheckDescription}>
+              {getDescription()}
+            </div>
+            {isPermissionsDenied ?
+              <button
+                type="button"
+                onClick={onCancelHairCheck}
+                className={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}
+              >
+                Cancel
+              </button> :
+              <JoinBtn
+                loading={isJoinBtnLoading}
+                disabled={!isPermissionsGranted}
+                className={styles.buttonJoinDesktop}
+                onClick={onJoin}
+              />}
+          </div>
+          <div className={styles.haircheckControls}>
+            <MicrophoneButton />
+            <CameraButton />
+          </div>
+        </div>
+      </div>
+    </div >
+  );
+});
+
+HairCheck.displayName = "HairCheck";

package/dev-components/hooks/README.md

@@ -1,7 +1,5 @@
 # CVI Hooks Documentation
 
-This documentation is organized by functionality to help you find the right hook for your needs.
-
 ## Table of Contents
 
 ### 🔧 Core Call Management
@@ -137,6 +135,7 @@ A React hook that provides local camera state and toggle functionality.
 | `onToggleCamera` | `() => void` | Function to toggle camera on/off       |
 | `isCamReady`     | `boolean`    | Camera permission is granted and ready |
 | `isCamMuted`     | `boolean`    | Camera is currently turned off         |
+| `localSessionId` | `string`     | Local session ID                       |
 
 #### Usage
 
@@ -173,6 +172,7 @@ A React hook that provides local microphone state and toggle functionality.
 | `onToggleMicrophone` | `() => void` | Function to toggle microphone on/off       |
 | `isMicReady`         | `boolean`    | Microphone permission is granted and ready |
 | `isMicMuted`         | `boolean`    | Microphone is currently turned off         |
+| `localSessionId`     | `string`     | Local session ID                           |
 
 #### Usage
 
@@ -209,6 +209,7 @@ A React hook that provides local screen sharing state and toggle functionality.
 | --------------------- | ------------ | ------------------------------------------ |
 | `onToggleScreenshare` | `() => void` | Function to toggle screen sharing on/off   |
 | `isScreenSharing`     | `boolean`    | Whether screen sharing is currently active |
+| `localSessionId`      | `string`     | Local session ID                           |
 
 #### Display Media Options
 

package/dev-components/hooks/cvi-events-hooks.tsx

@@ -1,5 +1,5 @@
-import { useAppMessage, useDailyEvent } from "@daily-co/daily-react";
 import { useCallback } from "react";
+import { useAppMessage, useDailyEvent } from "@daily-co/daily-react";
 
 type AppMessageUtterance = {
   "message_type": "conversation",

package/dev-components/hooks/use-local-camera.tsx

@@ -1,7 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';
 
-export const useLocalCamera = () => {
+export const useLocalCamera = (): {
+	isCamReady: boolean;
+	isCamMuted: boolean;
+	localSessionId: string;
+	onToggleCamera: () => void;
+} => {
 	const daily = useDaily();
 	const localSessionId = useLocalSessionId();
 	const { isOff: isCamMuted } = useVideoTrack(localSessionId);
@@ -13,8 +18,9 @@ export const useLocalCamera = () => {
 	}, [daily, isCamMuted]);
 
 	return {
-		onToggleCamera,
 		isCamReady,
 		isCamMuted,
+		localSessionId,
+		onToggleCamera,
 	};
 };

package/dev-components/hooks/use-local-microphone.tsx

@@ -1,7 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';
 
-export const useLocalMicrophone = () => {
+export const useLocalMicrophone = (): {
+	isMicReady: boolean;
+	isMicMuted: boolean;
+	localSessionId: string;
+	onToggleMicrophone: () => void;
+} => {
 	const daily = useDaily();
 	const localSessionId = useLocalSessionId();
 	const { isOff: isMicMuted } = useAudioTrack(localSessionId);
@@ -13,8 +18,9 @@ export const useLocalMicrophone = () => {
 	}, [daily, isMicMuted]);
 
 	return {
-		onToggleMicrophone,
 		isMicReady,
 		isMicMuted,
+		localSessionId,
+		onToggleMicrophone,
 	};
 };

package/dev-components/hooks/use-local-screenshare.tsx

@@ -1,7 +1,11 @@
 import { useCallback } from 'react';
 import { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';
 
-export const useLocalScreenshare = () => {
+export const useLocalScreenshare = (): {
+	isScreenSharing: boolean;
+	localSessionId: string;
+	onToggleScreenshare: () => void;
+} => {
 	const daily = useDaily();
 	const localSessionId = useLocalSessionId();
 	const { isOff } = useScreenVideoTrack(localSessionId);
@@ -26,7 +30,8 @@ export const useLocalScreenshare = () => {
 	}, [daily, isScreenSharing]);
 
 	return {
-		onToggleScreenshare,
 		isScreenSharing,
+		localSessionId,
+		onToggleScreenshare,
 	};
 };

package/dev-components/hooks/use-remote-participant-ids.tsx

@@ -1,6 +1,6 @@
 import { useParticipantIds } from '@daily-co/daily-react';
 
-export const useRemoteParticipantIDs = () => {
+export const useRemoteParticipantIDs = (): string[] => {
 	const remoteParticipantIds = useParticipantIds({ filter: 'remote' });
 
 	return remoteParticipantIds;

package/dev-components/hooks/use-replica-ids.tsx

@@ -1,6 +1,6 @@
 import { useParticipantIds } from '@daily-co/daily-react';
 
-export const useReplicaIDs = () => {
+export const useReplicaIDs = (): string[] => {
 	const replicasIDs = useParticipantIds({
 		filter: (participant) => participant.user_id.includes('tavus-replica'),
 	});

package/dev-components/hooks/use-start-haircheck.tsx

@@ -1,7 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDaily, useDevices } from '@daily-co/daily-react';
 
-export const useStartHaircheck = () => {
+export const useStartHaircheck = (): {
+	isPermissionsPrompt: boolean;
+	isPermissionsLoading: boolean;
+	isPermissionsGranted: boolean;
+	isPermissionsDenied: boolean;
+	requestPermissions: () => void;
+} => {
 	const daily = useDaily();
 	const { micState } = useDevices();