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

package/dev-components/components/conversation-01/conversation.module.css

@@ -0,0 +1,222 @@
+.container {
+	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;
+	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+	background-size: 400% 400%;
+	animation: gradient 15s ease infinite;
+}
+
+@media (min-width: 768px) {
+	.container {
+		aspect-ratio: 16/9;
+	}
+}
+
+.errorContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(248, 250, 252, 0.08);
+	color: white;
+	height: 100%;
+	font-size: 1.5rem;
+	font-weight: 600;
+	text-align: center;
+}
+
+.videoContainer {
+	position: relative;
+	z-index: 5;
+	width: 100%;
+	height: 100%;
+}
+
+.footer {
+	position: absolute;
+	bottom: 1.5rem;
+	left: 0;
+	right: 0;
+	z-index: 20;
+}
+
+.footerControls {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+}
+
+.leaveButton {
+	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+	color: white;
+	border: none;
+	font-size: 16px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	height: 3rem;
+	width: 3rem;
+	border-radius: 9999px;
+	background-color: #ef4444;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.leaveButton:hover {
+	opacity: 0.8;
+}
+
+/* ReplicaVideo styles */
+.mainVideoContainer {
+	background: transparent;
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.mainVideoContainerScreenSharing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mainVideo {
+	position: absolute;
+	inset: 0;
+	object-position: center;
+	object-fit: cover !important;
+	height: 100%;
+	width: 100%;
+	transition: all 0.3s ease;
+}
+
+.mainVideoScreenSharing {
+	object-fit: contain !important;
+}
+
+.mainVideoHidden {
+	display: none;
+}
+
+/* PreviewVideo styles */
+.previewVideoContainer {
+	position: relative;
+	background: rgba(2, 6, 23, 0.3);
+	aspect-ratio: 16/9;
+	width: 11rem;
+	border-radius: 1rem;
+	overflow: hidden;
+	max-height: 120px;
+	z-index: 10;
+}
+
+@media (min-width: 768px) {
+	.previewVideoContainer {
+		max-height: 100%;
+	}
+}
+
+@media (min-width: 1024px) {
+	.previewVideoContainer {
+		width: 17.875rem;
+	}
+}
+
+.previewVideoContainerVertical {
+	height: 40.5rem;
+	width: 6rem;
+}
+
+.previewVideoContainerHidden {
+	background: transparent;
+	display: none;
+}
+
+.previewVideo {
+	width: 100%;
+	height: auto;
+	max-height: 120px;
+}
+
+@media (min-width: 768px) {
+	.previewVideo {
+		max-height: 100%;
+	}
+}
+
+.previewVideoVertical {
+	height: 40.5rem;
+	width: 6rem;
+	object-fit: cover;
+}
+
+.previewVideoHidden {
+	display: none;
+}
+
+/* Main video container */
+.mainVideoContainer {
+	width: 100%;
+	height: 100%;
+}
+
+/* Self view container */
+.selfViewContainer {
+	position: absolute;
+	bottom: 5rem;
+	left: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+@media (min-width: 768px) {
+	.selfViewContainer {
+		bottom: 1rem;
+	}
+}
+
+/* Waiting message container */
+/* Start of Selection */
+.waitingContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	color: white;
+	height: 100%;
+	font-size: 1.5rem;
+	font-weight: 600;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+/* End of Selection */
+
+.audioWaveContainer {
+	position: absolute;
+	bottom: 0.5rem;
+	right: 0.5rem;
+}

package/dev-components/components/conversation-01/index.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect } from "react";
+import {
+	DailyAudio,
+	DailyVideo,
+	useDaily,
+	useDevices,
+	useLocalSessionId,
+	useMeetingState,
+	useScreenVideoTrack,
+	useVideoTrack
+} from "@daily-co/daily-react";
+import { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls'
+import { useLocalScreenshare } from "../../hooks/use-local-screenshare";
+import { useReplicaIDs } from "../../hooks/use-replica-ids";
+import { AudioWave } from "../audio-wave";
+
+import styles from "./conversation.module.css";
+
+interface ConversationData {
+	conversation_id: string;
+	conversation_name: string;
+	status: 'active' | 'ended' | 'error';
+	conversation_url: string;
+	replica_id: string | null;
+	persona_id: string | null;
+	created_at: string;
+}
+
+interface ConversationProps {
+	onLeave: () => void;
+	conversation: ConversationData;
+}
+
+const VideoPreview = React.memo(({ id }: { id: string }) => {
+	const videoState = useVideoTrack(id);
+	const widthVideo = videoState.track?.getSettings()?.width;
+	const heightVideo = videoState.track?.getSettings()?.height;
+	const isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;
+
+	return (
+		<div
+			className={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}
+		>
+			<DailyVideo
+				automirror
+				sessionId={id}
+				type="video"
+				className={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}
+			/>
+			<div className={styles.audioWaveContainer}>
+				<AudioWave id={id} />
+			</div>
+		</div>
+	);
+});
+
+const PreviewVideos = React.memo(() => {
+	const localId = useLocalSessionId();
+	const { isScreenSharing } = useLocalScreenshare();
+	const replicaIds = useReplicaIDs();
+	const replicaId = replicaIds[0];
+
+	return (
+		<>
+			{isScreenSharing && (
+				<VideoPreview id={replicaId} />
+			)}
+			<VideoPreview id={localId} />
+		</>
+	);
+});
+
+const MainVideo = React.memo(() => {
+	const replicaIds = useReplicaIDs();
+	const localId = useLocalSessionId();
+	const videoState = useVideoTrack(replicaIds[0]);
+	const screenVideoState = useScreenVideoTrack(localId);
+	const isScreenSharing = !screenVideoState.isOff;
+	// This is one to one call, so we can use the first replica id
+	const replicaId = replicaIds[0];
+
+	if (!replicaId) {
+		return (
+			<div className={styles.waitingContainer}>
+				<p>Connecting...</p>
+			</div>
+		);
+	}
+
+	// Switching between replica video and screen sharing video
+	return (
+		<div
+			className={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}
+		>
+			<DailyVideo
+				automirror
+				sessionId={isScreenSharing ? localId : replicaId}
+				type={isScreenSharing ? "screenVideo" : "video"}
+				className={`${styles.mainVideo} 
+				${isScreenSharing ? styles.mainVideoScreenSharing : ''} 
+				${videoState.isOff ? styles.mainVideoHidden : ''}`}
+			/>
+		</div>
+	);
+});
+
+export const Conversation = React.memo(({ onLeave, conversation }: ConversationProps) => {
+	const daily = useDaily();
+	const meetingState = useMeetingState();
+	const { hasMicError } = useDevices()
+
+	useEffect(() => {
+		if (meetingState === 'error') {
+			onLeave();
+		}
+	}, [meetingState, onLeave]);
+
+	// Initialize call when conversation is available
+	useEffect(() => {
+		if (conversation?.conversation_url) {
+			daily?.join({
+				url: conversation.conversation_url,
+			});
+		}
+	}, [conversation, daily]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.videoContainer}>
+				{
+					hasMicError && (
+						<div className={styles.errorContainer}>
+							<p>
+								Camera or microphone access denied. Please check your settings and try again.
+							</p>
+						</div>
+					)}
+
+				{/* Main video */}
+				<div className={styles.mainVideoContainer}>
+					<MainVideo />
+				</div>
+
+				{/* Self view */}
+				<div className={styles.selfViewContainer}>
+					<PreviewVideos />
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<div className={styles.footerControls}>
+					<MicrophoneButton />
+					<CameraButton />
+					<ScreenShareButton />
+					<button type="button" className={styles.leaveButton} onClick={onLeave}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							role="img"
+							aria-label="Leave Call"
+						>
+							<path
+								d="M18 6L6 18M6 6L18 18"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<DailyAudio />
+		</div>
+	);
+});

package/dev-components/components/{hair-check → hair-check-01}/hair-check.module.css

@@ -46,6 +46,7 @@
 	height: 3rem;
 	transition: background-color 0.2s;
 	font-weight: 500;
+	min-width: 8.5rem;
 }
 
 .buttonJoin:hover .buttonJoinInner {
@@ -207,5 +208,5 @@
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
-	gap: 0.5rem;
+	gap: 1rem;
 }

package/dev-components/components/{hair-check → hair-check-01}/index.tsx

@@ -25,7 +25,7 @@ const JoinBtn = ({
       className={`${styles.buttonJoin} ${className || ''}`}
       type="button"
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabled || loading}
     >
       <div className={styles.buttonJoinInner}>
         {loading ? "Joining..." : "Join Video Chat"}