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

package/README.md

@@ -2,7 +2,7 @@
 
 A CLI tool for installing and managing CVI (Conversational Video Interface) components for React applications. This library provides pre-built components for creating real-time multimodal video conversations with AI replicas.
 
-## Usage
+## Quick Start
 
 **Initialize the project**:
 
@@ -41,74 +41,30 @@ function App() {
 ```tsx
 import { Conversation } from './components/cvi/components/conversation';
 
-function Call() {
+function CVI() {
   return (
-    <div>
-      <Conversation {...conversationProps} />
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        maxWidth: '1200px',
+        margin: '0 auto',
+      }}
+    >
+      <Conversation conversationUrl='YOUR_TAVUS_MEETING_URL' onLeave={() => {}} />
     </div>
   );
 }
 ```
 
-## Available Components
+## Documentation
 
-### Core Components
+- [CVI Documentation](https://docs.tavus.io/sections/conversational-video-interface/component-library/overview)
 
-- **`cvi-provider`** - Main provider component that wraps your app with CVI context
+## Examples
 
-### UI Components
-
-- **`controls`** - Video chat control buttons with device selection capabilities
-
-  - `MicrophoneButton` - Toggle microphone with device dropdown
-  - `CameraButton` - Toggle camera with device dropdown
-  - `ScreenShareButton` - Toggle screen sharing
-
-- **`hair-check-01`** - Pre-call interface for testing and configuring audio/video devices
-
-  - Live camera preview with mirror effect
-  - Permission management and device controls
-  - Join interface with loading states
-
-- **`conversation-01`** - Conversation component for video chat
-
-  - Video chat with audio wave indicator
-  - Device selection and permission management
-  - Screen sharing support
-  - Error handling
-
-- **`audio-wave`** - Audio wave indicator for conversation
-  - Shows active speaker audio level
-
-### Hooks
-
-#### Core Call Management
-
-- **`use-cvi-call`** – Provides basic join and leave functionality for CVI calls.
-- **`use-start-haircheck`** – Manages device-permission checks and initializes the camera to start a haircheck session.
-
-#### Media Controls
-
-- **`use-local-camera`** – Manages local camera state and toggle functionality.
-- **`use-local-microphone`** – Manages local microphone state and toggle functionality.
-- **`use-local-screenshare`** – Manages screen-share state and toggle functionality.
-- **`use-request-permissions`** – Requests permissions and handles audio processing setup.
-
-#### Participant Management
-
-- **`use-replica-ids`** – Retrieves Tavus–replica participant IDs.
-- **`use-remote-participant-ids`** – Retrieves remote participant IDs.
-
-#### Conversation & Events
-
-- **`use-observable-event`** – Listens for CVI events.
-- **`use-send-app-message`** – Sends CVI app messages.
+- [Tavus Examples](https://github.com/Tavus-Engineering/tavus-examples)
 
 ## License
 
 MIT License - see the [LICENSE](LICENSE) file for details.
-
-## Related Links
-
-- [CVI Documentation](https://docs.tavus.io/sections/conversational-video-interface/cvi-overview)
-- [Tavus Examples](https://github.com/Tavus-Engineering/tavus-examples)

package/dev-components/components/README.md

@@ -2,67 +2,6 @@
 
 ## Components
 
-### Controls
-
-The `Controls` component provides a set of video chat control buttons with integrated device selection capabilities.
-
-#### Exported Components:
-
-- **`MicrophoneButton`**: A button component that toggles microphone on/off with a dropdown for device selection
-- **`CameraButton`**: A button component that toggles camera on/off with a dropdown for device selection
-- **`ScreenShareButton`**: A button component that toggles screen sharing on/off
-- **`SelectDevice`**: A reusable dropdown component for selecting camera and microphone devices
-
-#### Usage:
-
-```tsx
-import { MicrophoneButton, CameraButton, ScreenShareButton } from './controls';
-
-// Use individual control buttons
-<MicrophoneButton />
-<CameraButton />
-<ScreenShareButton />
-```
-
-#### Component Details:
-
-**MicrophoneButton**
-
-- Toggles microphone mute/unmute state
-- Shows visual indicators for muted/unmuted states
-- Includes device selection dropdown
-- Disabled when microphone is not ready
-- Uses `useLocalMicrophone` and `useDevices` hooks
-
-**CameraButton**
-
-- Toggles camera on/off
-- Shows visual indicators for camera muted/unmuted states
-- Includes device selection dropdown
-- Disabled when camera is not ready or no camera is available
-- Uses `useLocalCamera` and `useDevices` hooks
-
-**ScreenShareButton**
-
-- Toggles screen sharing on/off
-- Shows visual feedback with different icons for active/inactive states
-- Uses `useLocalScreenshare` hook
-
-**SelectDevice**
-
-- Reusable dropdown component for device selection
-- Accepts devices array, current value, disabled state, and onChange handler
-- Includes custom dropdown arrow styling
-
-#### Key Features:
-
-- Automatic device detection and switching via Daily.co hooks
-- Visual state indicators with SVG icons
-- Accessibility support with screen reader labels (`srOnly` class)
-- Responsive design with mobile-friendly controls
-- Integration with Daily.co device management system
-- CSS modules for scoped styling
-
 ### Hair Check 01
 
 The `HairCheck` component provides a pre-call interface for users to test and configure their audio/video devices before joining a video chat.
@@ -120,21 +59,14 @@ The `Conversation` component provides a complete video chat interface for one-to
 import { Conversation } from './conversation-01';
 
 <Conversation
-  conversation={conversationData}
+  conversationUrl={conversationUrl}
   onLeave={() => handleLeaveCall()}
 />
 ```
 
 #### Props:
 
-- `conversation` (ConversationData): Object containing conversation details
-  - `conversation_id` (string): Unique identifier for the conversation
-  - `conversation_name` (string): Display name for the conversation
-  - `status` ('active' | 'ended' | 'error'): Current conversation status
-  - `conversation_url` (string): Daily.co room URL for joining
-  - `replica_id` (string | null): ID of the AI replica participant
-  - `persona_id` (string | null): ID of the persona being used
-  - `created_at` (string): Timestamp of conversation creation
+- `conversationUrl` (string): Daily.co room URL for joining
 - `onLeave` (function): Callback when user leaves the conversation
 
 ### Audio Wave
@@ -160,3 +92,96 @@ import { AudioWave } from './audio-wave';
 #### Props:
 
 - `id` (string): The participant's session ID to monitor audio levels for
+
+### Media Controls
+
+The `media-controls` module provides simple toggle buttons for microphone, camera, and screen sharing, designed for direct use in video chat interfaces.
+
+#### Exported Components:
+
+- **`MicToggleButton`**: Toggles microphone mute/unmute state
+- **`CameraToggleButton`**: Toggles camera on/off
+- **`ScreenShareButton`**: Toggles screen sharing on/off
+
+#### Usage:
+
+```tsx
+import { MicToggleButton, CameraToggleButton, ScreenShareButton } from './media-controls';
+
+<MicToggleButton />
+<CameraToggleButton />
+<ScreenShareButton />
+```
+
+#### Key Features:
+
+- Simple, accessible toggle buttons
+- Visual state indicators (muted, unmuted, on/off)
+- Disabled state when device is not ready
+- Uses Daily.co hooks for device state
+- CSS modules for styling
+
+---
+
+### Device Select
+
+The `device-select` module provides advanced device selection controls, including dropdowns for choosing microphones and cameras, and integrated toggle buttons.
+
+#### Exported Components:
+
+- **`SelectDevice`**: Dropdown for selecting a device from a list
+- **`MicSelectBtn`**: Microphone toggle button with device selection
+- **`CameraSelectBtn`**: Camera toggle button with device selection
+- **`ScreenShareButton`**: Button to toggle screen sharing
+
+#### Usage:
+
+```tsx
+import { SelectDevice, MicSelectBtn, CameraSelectBtn, ScreenShareButton } from './device-select';
+
+<SelectDevice value={currentDeviceId} devices={devices} disabled={false} onChange={setDevice} />
+<MicSelectBtn />
+<CameraSelectBtn />
+<ScreenShareButton />
+```
+
+#### Props (SelectDevice):
+
+- `value` (string): Currently selected device ID
+- `devices` (array): List of device objects `{ device: MediaDeviceInfo }[]`
+- `disabled` (boolean): Whether the dropdown is disabled
+- `onChange` (function): Callback when device is changed
+
+#### Key Features:
+
+- Integrated device selection and toggling
+- Dropdowns for camera/microphone selection
+- Visual state indicators and accessibility support
+- Uses Daily.co device management hooks
+- CSS modules for styling
+
+---
+
+### CVI Provider
+
+The `CVIProvider` component wraps your app with the Daily.co provider context, enabling all Daily React hooks and components to function.
+
+#### Usage:
+
+```tsx
+import { CVIProvider } from './cvi-provider';
+
+<CVIProvider>
+  {/* your app components */}
+</CVIProvider>
+```
+
+#### Props:
+
+- `children` (ReactNode): Components to be wrapped by the provider
+
+#### Key Features:
+
+- Provides Daily.co context to all child components
+- Required for using Daily React hooks and video/audio components
+- Simple wrapper for app-level integration

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

@@ -10,7 +10,7 @@
 	overflow: hidden;
 	border-radius: 0.5rem;
 	max-height: 90vh;
-	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
 	background-size: 400% 400%;
 	animation: gradient 15s ease infinite;
 }
@@ -76,6 +76,12 @@
 	opacity: 0.8;
 }
 
+.leaveButtonIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* ReplicaVideo styles */
 .mainVideoContainer {
 	background: transparent;

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

@@ -1,34 +1,24 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
 import {
 	DailyAudio,
 	DailyVideo,
-	useDaily,
 	useDevices,
 	useLocalSessionId,
 	useMeetingState,
 	useScreenVideoTrack,
 	useVideoTrack
 } from "@daily-co/daily-react";
-import { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls'
+import { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select'
 import { useLocalScreenshare } from "../../hooks/use-local-screenshare";
 import { useReplicaIDs } from "../../hooks/use-replica-ids";
+import { useCVICall } from "../../hooks/use-cvi-call";
 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;
+	conversationUrl: string;
 }
 
 const VideoPreview = React.memo(({ id }: { id: string }) => {
@@ -76,7 +66,7 @@ const MainVideo = React.memo(() => {
 	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
+	// This is one-to-one call, so we can use the first replica id
 	const replicaId = replicaIds[0];
 
 	if (!replicaId) {
@@ -96,16 +86,16 @@ const MainVideo = React.memo(() => {
 				automirror
 				sessionId={isScreenSharing ? localId : replicaId}
 				type={isScreenSharing ? "screenVideo" : "video"}
-				className={`${styles.mainVideo} 
-				${isScreenSharing ? styles.mainVideoScreenSharing : ''} 
+				className={`${styles.mainVideo}
+				${isScreenSharing ? styles.mainVideoScreenSharing : ''}
 				${videoState.isOff ? styles.mainVideoHidden : ''}`}
 			/>
 		</div>
 	);
 });
 
-export const Conversation = React.memo(({ onLeave, conversation }: ConversationProps) => {
-	const daily = useDaily();
+export const Conversation = React.memo(({ onLeave, conversationUrl }: ConversationProps) => {
+	const { joinCall, leaveCall } = useCVICall();
 	const meetingState = useMeetingState();
 	const { hasMicError } = useDevices()
 
@@ -117,12 +107,13 @@ export const Conversation = React.memo(({ onLeave, conversation }: ConversationP
 
 	// Initialize call when conversation is available
 	useEffect(() => {
-		if (conversation?.conversation_url) {
-			daily?.join({
-				url: conversation.conversation_url,
-			});
-		}
-	}, [conversation, daily]);
+		joinCall({ url: conversationUrl });
+	}, []);
+
+	const handleLeave = useCallback(() => {
+		leaveCall();
+		onLeave();
+	}, [leaveCall, onLeave]);
 
 	return (
 		<div className={styles.container}>
@@ -149,27 +140,29 @@ export const Conversation = React.memo(({ onLeave, conversation }: ConversationP
 
 			<div className={styles.footer}>
 				<div className={styles.footerControls}>
-					<MicrophoneButton />
-					<CameraButton />
+					<MicSelectBtn />
+					<CameraSelectBtn />
 					<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 type="button" className={styles.leaveButton} onClick={handleLeave}>
+						<span className={styles.leaveButtonIcon}>
+							<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>
+						</span>
 					</button>
 				</div>
 			</div>

package/dev-components/components/{controls → device-select}/index.tsx

@@ -3,7 +3,7 @@ import { useDevices } from "@daily-co/daily-react";
 import { useLocalCamera } from "../../hooks/use-local-camera";
 import { useLocalMicrophone } from "../../hooks/use-local-microphone";
 import { useLocalScreenshare } from "../../hooks/use-local-screenshare";
-import styles from "./controls.module.css";
+import styles from "./device-select.module.css";
 
 export const SelectDevice = ({
   value,
@@ -39,7 +39,7 @@ export const SelectDevice = ({
   );
 };
 
-export const MicrophoneButton = memo(() => {
+export const MicSelectBtn = memo(() => {
   const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();
   const { microphones, currentMic, setMicrophone } = useDevices();
 
@@ -129,9 +129,9 @@ export const MicrophoneButton = memo(() => {
   );
 });
 
-MicrophoneButton.displayName = "MicrophoneButton";
+MicSelectBtn.displayName = "MicSelectBtn";
 
-export const CameraButton = memo(() => {
+export const CameraSelectBtn = memo(() => {
   const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();
   const { currentCam, cameras, setCamera } = useDevices();
 
@@ -209,7 +209,7 @@ export const CameraButton = memo(() => {
   );
 });
 
-CameraButton.displayName = "CameraButton";
+CameraSelectBtn.displayName = "CameraSelectBtn";
 
 export const ScreenShareButton = memo(() => {
   const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();

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

@@ -115,7 +115,7 @@
 .haircheckUserPlaceholder {
 	position: absolute;
 	inset: 0;
-	background-color: #334155;
+  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
 	z-index: 5;
 	pointer-events: none;
 	display: flex;

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

@@ -3,7 +3,7 @@ import {
   DailyVideo,
   useDaily,
 } from "@daily-co/daily-react";
-import { CameraButton, MicrophoneButton } from "../controls";
+import { CameraSelectBtn, MicSelectBtn } from "../device-select";
 import { useStartHaircheck } from "../../hooks/use-start-haircheck";
 import { useLocalCamera } from "../../hooks/use-local-camera";
 
@@ -172,8 +172,8 @@ export const HairCheck = memo(({
               />}
           </div>
           <div className={styles.haircheckControls}>
-            <MicrophoneButton />
-            <CameraButton />
+            <MicSelectBtn />
+            <CameraSelectBtn />
           </div>
         </div>
       </div>