@tavus/cvi-ui 0.0.1-beta.2 → 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
 
@@ -59,15 +59,27 @@ A CLI tool for installing and managing CVI (Conversational Video Interface) comp
 ### UI Components
 
 - **`controls`** - Video chat control buttons with device selection capabilities
+
   - `MicrophoneButton` - Toggle microphone with device dropdown
-  - `CameraButton` - Toggle camera with device dropdown  
+  - `CameraButton` - Toggle camera with device dropdown
   - `ScreenShareButton` - Toggle screen sharing
 
-- **`hair-check`** - Pre-call interface for testing and configuring audio/video devices
+- **`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
@@ -100,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

@@ -11,6 +11,7 @@ The `Controls` component provides a set of video chat control buttons with integ
 - **`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:
 
@@ -62,7 +63,7 @@ import { MicrophoneButton, CameraButton, ScreenShareButton } from './controls';
 - Integration with Daily.co device management system
 - CSS modules for scoped styling
 
-### Hair Check
+### 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.
 
@@ -99,3 +100,63 @@ import { HairCheck } from './hair-check';
 - 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

@@ -1,113 +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;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+	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;
+	display: none;
 }
 
 .selectDevice option {
-  color: transparent;
-  background-color: transparent;
+	color: transparent;
+	background-color: transparent;
 }
 
 .selectDevice:focus {
-  outline: none;
+	outline: none;
 }
 
 /* Device button container styles */
 .deviceButtonContainer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  backdrop-filter: blur(4px);
+	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;
+	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;
+	display: flex;
 }
 
 .deviceButton:disabled {
-  opacity: 0.5;
+	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;
+	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;
-}
-
-/* End call button */
-.endCallButton {
-  height: 3rem;
-  width: 3rem;
-  border-radius: 9999px;
-  background-color: #EF4444;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	align-items: center;
 }
 
 .selectDeviceContainer {
-  position: relative;
-  display: flex;
-  align-items: center;
+	position: relative;
+	display: flex;
+	align-items: center;
 }
 
-.selectDevice {
-  padding-right: 2rem; /* space for arrow */
-  box-sizing: border-box;
+.selectArrow {
+	position: absolute;
+	right: 1rem;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
 }
 
-.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);
+}

package/dev-components/components/controls/index.tsx

@@ -144,7 +144,7 @@ export const CameraButton = memo(() => {
         disabled={!isCamReady || !currentCam}
         className={styles.deviceButton}
       >
-        <span>
+        <span className={styles.deviceButtonIcon}>
           {isCamMuted ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -218,7 +218,7 @@ export const ScreenShareButton = memo(() => {
     <button
       type="button"
       onClick={onToggleScreenshare}
-      className={styles.deviceButton}
+      className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}
     >
       <span>
         {isScreenSharing ? (