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

package/README.md

@@ -6,49 +6,49 @@ A CLI tool for installing and managing CVI (Conversational Video Interface) comp
 
 **Initialize the project**:
 
-   ```bash
-   npx @tavus/cvi-ui init
-   ```
+```bash
+npx @tavus/cvi-ui@latest init
+```
 
-   This will:
+This will:
 
-   - Create a `cvi-components.json` configuration file
-   - Prompt for TypeScript preference
-   - Install the necessary dependencies
+- Create a `cvi-components.json` configuration file
+- Prompt for TypeScript preference
+- Install the necessary dependencies
 
 **Add components to your project**:
 
-   ```bash
-   npx @tavus/cvi-ui add conversation
-   ```
+```bash
+npx @tavus/cvi-ui@latest add conversation
+```
 
 **Wrap your app with the CVI provider**:
 
-   ```tsx
-   import { CVIProvider } from './components/cvi/components/cvi-provider';
+```tsx
+import { CVIProvider } from './components/cvi/components/cvi-provider';
 
-   function App() {
-     return (
-       <CVIProvider>
-         {/* Your app content */}
-       </CVIProvider>
-     );
-   }
-   ```
+function App() {
+  return (
+    <CVIProvider>
+      {/* Your app content */}
+    </CVIProvider>
+  );
+}
+```
 
 **Add conversation components**:
 
-   ```tsx
-   import { Conversation } from './components/cvi/components/conversation';
+```tsx
+import { Conversation } from './components/cvi/components/conversation';
 
-   function Call() {
-     return (
-       <div>
-         <Conversation {...conversationProps} />
-       </div>
-     );
-   }
-   ```
+function Call() {
+  return (
+    <div>
+      <Conversation {...conversationProps} />
+    </div>
+  );
+}
+```
 
 ## Available Components
 
@@ -56,6 +56,30 @@ A CLI tool for installing and managing CVI (Conversational Video Interface) comp
 
 - **`cvi-provider`** - Main provider component that wraps your app with CVI context
 
+### 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
@@ -88,4 +112,3 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 - [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

@@ -0,0 +1,162 @@
+# CVI Components
+
+## 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.
+
+#### Features:
+
+- **Device Testing**: Live preview of camera feed with mirror effect
+- **Permission Management**: Handles camera and microphone permission requests
+- **Device Controls**: Integrated microphone and camera controls
+- **Join Interface**: Call-to-action button to join the video chat
+- **Responsive Design**: Works on both desktop and mobile devices
+
+#### Usage:
+
+```tsx
+import { HairCheck } from './hair-check';
+
+<HairCheck
+  isJoinBtnLoading={false}
+  onJoin={() => handleJoinCall()}
+  onCancel={() => handleCancel()}
+/>
+```
+
+#### Props:
+
+- `isJoinBtnLoading` (boolean): Shows loading state on join button
+- `onJoin` (function): Callback when user clicks join
+- `onCancel` (function, optional): Callback when user cancels
+
+#### Key Features:
+
+- Automatic permission request flow
+- Visual feedback for different permission states
+- Fallback user avatar when camera is unavailable
+- Integrated device controls for easy testing
+- Clean, intuitive interface for pre-call setup
+
+### Conversation 01
+
+The `Conversation` component provides a complete video chat interface for one-to-one conversations with AI replicas, featuring main video display, self-view preview, and integrated controls.
+
+#### Features:
+
+- **Main Video Display**: Large video area showing the AI replica or screen share
+- **Self-View Preview**: Small preview window showing local camera feed
+- **Screen Sharing Support**: Automatic switching between replica video and screen share
+- **Device Controls**: Integrated microphone, camera, and screen share controls
+- **Error Handling**: Graceful handling of camera/microphone permission errors
+- **Responsive Layout**: Adaptive design for different screen sizes
+
+#### Usage:
+
+```tsx
+import { Conversation } from './conversation-01';
+
+<Conversation
+  conversation={conversationData}
+  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
+- `onLeave` (function): Callback when user leaves the conversation
+
+### Audio Wave
+
+The `AudioWave` component provides real-time audio level visualization for video chat participants, displaying animated bars that respond to audio input levels.
+
+#### Features:
+
+- **Real-time Audio Visualization**: Three animated bars that respond to audio levels
+- **Active Speaker Detection**: Visual distinction between active and inactive speakers
+- **Performance Optimized**: Uses `requestAnimationFrame` for smooth animations
+- **Responsive Design**: Compact circular design that fits well in video previews
+- **Audio Level Scaling**: Intelligent volume scaling for consistent visual feedback
+
+#### Usage:
+
+```tsx
+import { AudioWave } from './audio-wave';
+
+<AudioWave id={participantId} />
+```
+
+#### Props:
+
+- `id` (string): The participant's session ID to monitor audio levels for

package/dev-components/components/audio-wave/audio-wave.module.css

@@ -0,0 +1,33 @@
+.container {
+	overflow: hidden;
+	border: 1px solid white;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 9999px;
+	will-change: transform;
+	transform: translateZ(0);
+}
+
+.waveContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.125rem;
+	width: 100%;
+	height: 100%;
+}
+
+.bar {
+	width: 0.25rem;
+	height: 0.25rem;
+	background-color: white;
+	border-radius: 9999px;
+	transition: height 200ms ease-out;
+	will-change: height;
+	transform: translateZ(0);
+}
+
+.barInactive {
+	width: 0.25rem !important;
+	height: 0.25rem !important;
+}

package/dev-components/components/audio-wave/index.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useRef, memo } from "react";
+import { useActiveSpeakerId } from "@daily-co/daily-react";
+import { useAudioLevelObserver } from "@daily-co/daily-react";
+import styles from "./audio-wave.module.css";
+
+export const AudioWave = memo(({ id }: { id: string }) => {
+	const activeSpeakerId = useActiveSpeakerId();
+	const isActiveSpeaker = activeSpeakerId === id;
+
+	const leftBarRef = useRef<HTMLDivElement>(null);
+	const centerBarRef = useRef<HTMLDivElement>(null);
+	const rightBarRef = useRef<HTMLDivElement>(null);
+	const animationFrameRef = useRef<number | undefined>(undefined);
+
+	useAudioLevelObserver(
+		id,
+		useCallback((volume) => {
+			// Cancel any pending animation frame to prevent accumulation
+			if (animationFrameRef.current) {
+				cancelAnimationFrame(animationFrameRef.current);
+			}
+
+			// Use requestAnimationFrame to batch DOM updates
+			animationFrameRef.current = requestAnimationFrame(() => {
+				const scaledVolume = Number(Math.max(0.01, volume).toFixed(2));
+				if (leftBarRef.current && centerBarRef.current && rightBarRef.current) {
+					leftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;
+					centerBarRef.current.style.height = `${20 + scaledVolume * 130}%`;
+					rightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;
+				}
+			});
+		}, []),
+	);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.waveContainer}>
+				<div
+					ref={leftBarRef}
+					className={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}
+				/>
+				<div
+					ref={centerBarRef}
+					className={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}
+				/>
+				<div
+					ref={rightBarRef}
+					className={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}
+				/>
+			</div>
+		</div>
+	);
+});
+
+AudioWave.displayName = 'AudioWave';

package/dev-components/components/controls/controls.module.css

@@ -0,0 +1,115 @@
+/* SelectDevice styles */
+.selectDevice {
+	height: 3rem;
+	width: 5.5rem;
+	border-radius: 9999px;
+	background-color: rgba(255, 255, 255, 0.2);
+	padding: 0 0.75rem;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(10px);
+	color: transparent;
+	padding-right: 2rem; /* space for arrow */
+	box-sizing: border-box;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	cursor: pointer;
+}
+
+.selectDevice::-ms-expand {
+	display: none;
+}
+
+.selectDevice option {
+	color: transparent;
+	background-color: transparent;
+}
+
+.selectDevice:focus {
+	outline: none;
+}
+
+/* Device button container styles */
+.deviceButtonContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 9999px;
+	backdrop-filter: blur(4px);
+}
+
+/* Device button styles */
+.deviceButton {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	height: 3rem;
+	width: 3rem;
+	border-radius: 9999px;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.deviceButtonIcon {
+	display: flex;
+}
+
+.deviceButton:disabled {
+	opacity: 0.5;
+}
+
+/* Screen reader only text */
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+/* Controls container */
+.controlsContainer {
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	align-items: center;
+}
+
+.selectDeviceContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.selectArrow {
+	position: absolute;
+	right: 1rem;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.screenShareButton {
+	cursor: pointer;
+	position: relative;
+	height: 3rem;
+	width: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 9999px;
+	backdrop-filter: blur(4px);
+	background-color: rgba(255, 255, 255, 0.2);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+}