@tavus/cvi-ui 0.0.1-beta.1

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

@@ -0,0 +1,168 @@
+import { useAppMessage, useDailyEvent } from "@daily-co/daily-react";
+import { useCallback } from "react";
+
+type AppMessageUtterance = {
+  "message_type": "conversation",
+  "event_type": "conversation.utterance",
+  "conversation_id": string,
+  "inference_id": string,
+  "properties": {
+    "role": "user" | "replica",
+    "speech": string,
+    "visual_context": string
+  }
+}
+
+type AppMessageToolCall<T> = {
+  "message_type": "conversation",
+  "event_type": "conversation.tool_call",
+  "conversation_id": string,
+  "inference_id": string,
+  "properties": T
+}
+
+type AppMessagePerceptionToolCall<T> = {
+  "message_type": "conversation",
+  "event_type": "conversation.perception_tool_call",
+  "conversation_id": string,
+  "properties": T
+}
+
+type AppMessagePerceptionAnalysis = {
+  "message_type": "conversation",
+  "event_type": "conversation.perception_analysis",
+  "conversation_id": string,
+  "properties": {
+    "analysis": string
+  }
+}
+
+type AppMessageReplicaStartedSpeaking = {
+  "message_type": "conversation",
+  "event_type": "conversation.replica.started_speaking",
+  "inference_id": string
+}
+
+type AppMessageReplicaStoppedSpeaking = {
+  "message_type": "conversation",
+  "event_type": "conversation.replica.stopped_speaking",
+  "inference_id": string
+}
+
+type AppMessageUserStartedSpeaking = {
+  "message_type": "conversation",
+  "event_type": "conversation.user.started_speaking",
+  "inference_id": string
+}
+
+type AppMessageUserStoppedSpeaking = {
+  "message_type": "conversation",
+  "event_type": "conversation.user.stopped_speaking",
+  "inference_id": string
+}
+
+type AppMessageReplicaInterrupted = {
+  "message_type": "conversation",
+  "event_type": "conversation.replica_interrupted",
+  "conversation_id": string,
+  "inference_id": string
+}
+
+type AppMessage<T> = {
+  data: AppMessageUtterance |
+  AppMessageToolCall<T> |
+  AppMessagePerceptionToolCall<T> |
+  AppMessagePerceptionAnalysis |
+  AppMessageReplicaStartedSpeaking |
+  AppMessageReplicaStoppedSpeaking |
+  AppMessageUserStartedSpeaking |
+  AppMessageUserStoppedSpeaking |
+  AppMessageReplicaInterrupted
+};
+
+export function useObservableEvent<T>(callback: (event: AppMessage<T>['data']) => void): void {
+  return useDailyEvent(
+    "app-message",
+    useCallback(
+      (event: AppMessage<T>) => {
+        callback(event.data);
+      },
+      [callback],
+    ),
+  )
+}
+
+type AppMessageEcho = {
+  "message_type": "conversation",
+  "event_type": "conversation.echo",
+  "conversation_id": string,
+  "properties": {
+    "modality": "audio" | "text",
+    "text": string,
+    "audio": string,
+    "sample_rate": number,
+    "inference_id": string,
+    "done": boolean
+  }
+}
+
+type AppMessageRespond = {
+  "message_type": "conversation",
+  "event_type": "conversation.respond",
+  "conversation_id": string,
+  "properties": {
+    "text": string
+  }
+}
+
+type AppMessageInterrupt = {
+  "message_type": "conversation",
+  "event_type": "conversation.interrupt",
+  "conversation_id": string
+}
+
+type AppMessageOverwriteLlmContext = {
+  "message_type": "conversation",
+  "event_type": "conversation.overwrite_llm_context",
+  "conversation_id": string,
+  "properties": {
+    "context": string
+  }
+}
+
+type AppMessageAppendLlmContext = {
+  "message_type": "conversation",
+  "event_type": "conversation.append_llm_context",
+  "conversation_id": string,
+  "properties": {
+    "context": string
+  }
+}
+
+type Sensitivity = "superlow" | "verylow" | "low" | "medium" | "high" | "auto"
+
+type AppMessageSensitivity = {
+  "message_type": "conversation",
+  "event_type": "conversation.sensitivity",
+  "conversation_id": string,
+  "properties": {
+    "participant_pause_sensitivity": Sensitivity,
+    "participant_interrupt_sensitivity": Sensitivity
+  }
+}
+
+type SendAppMessageProps =
+  AppMessageEcho |
+  AppMessageRespond |
+  AppMessageInterrupt |
+  AppMessageOverwriteLlmContext |
+  AppMessageAppendLlmContext |
+  AppMessageSensitivity
+
+export function useSendAppMessage(): (message: SendAppMessageProps) => void {
+  const sendAppMessage = useAppMessage();
+
+  return useCallback((message: SendAppMessageProps) => {
+    sendAppMessage({ msg: message }, '*');
+  }, [sendAppMessage]);
+}

package/dev-components/hooks/use-cvi-call.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useDaily } from '@daily-co/daily-react';
+
+export const useCVICall = (): {
+	joinCall: (props: { url: string }) => void;
+	leaveCall: () => void;
+} => {
+	const daily = useDaily();
+
+	const joinCall = useCallback(
+		({ url }: { url: string }) => {
+			daily?.join({
+				url: url,
+			});
+		},
+		[daily]
+	);
+
+	const leaveCall = useCallback(() => {
+		daily?.leave();
+	}, [daily]);
+
+	return { joinCall, leaveCall };
+};

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

@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from 'react';
+import { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';
+
+export const useLocalCamera = () => {
+	const daily = useDaily();
+	const localSessionId = useLocalSessionId();
+	const { isOff: isCamMuted } = useVideoTrack(localSessionId);
+	const { camState } = useDevices();
+	const isCamReady = useMemo(() => camState === 'granted', [camState]);
+
+	const onToggleCamera = useCallback(() => {
+		daily?.setLocalVideo(isCamMuted);
+	}, [daily, isCamMuted]);
+
+	return {
+		onToggleCamera,
+		isCamReady,
+		isCamMuted,
+	};
+};

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

@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from 'react';
+import { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';
+
+export const useLocalMicrophone = () => {
+	const daily = useDaily();
+	const localSessionId = useLocalSessionId();
+	const { isOff: isMicMuted } = useAudioTrack(localSessionId);
+	const { micState } = useDevices();
+	const isMicReady = useMemo(() => micState === 'granted', [micState]);
+
+	const onToggleMicrophone = useCallback(() => {
+		daily?.setLocalAudio(isMicMuted);
+	}, [daily, isMicMuted]);
+
+	return {
+		onToggleMicrophone,
+		isMicReady,
+		isMicMuted,
+	};
+};

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

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';
+
+export const useLocalScreenshare = () => {
+	const daily = useDaily();
+	const localSessionId = useLocalSessionId();
+	const { isOff } = useScreenVideoTrack(localSessionId);
+	const isScreenSharing = !isOff;
+
+	const onToggleScreenshare = useCallback(() => {
+		if (isScreenSharing) {
+			daily?.stopScreenShare();
+		} else {
+			daily?.startScreenShare({
+				displayMediaOptions: {
+					audio: false,
+					selfBrowserSurface: 'exclude',
+					surfaceSwitching: 'include',
+					video: {
+						width: 1920,
+						height: 1080,
+					},
+				},
+			});
+		}
+	}, [daily, isScreenSharing]);
+
+	return {
+		onToggleScreenshare,
+		isScreenSharing,
+	};
+};

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

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

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

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

package/dev-components/hooks/use-request-permissions.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useDaily } from '@daily-co/daily-react';
+import type { DailyDeviceInfos } from '@daily-co/daily-js';
+
+export const useRequestPermissions = (): (() => Promise<DailyDeviceInfos>) => {
+	const daily = useDaily();
+
+	const requestPermissions = useCallback(async () => {
+		return await daily!.startCamera({
+			startVideoOff: false,
+			startAudioOff: false,
+			audioSource: 'default',
+			inputSettings: {
+				audio: {
+					processor: {
+						type: 'noise-cancellation',
+					},
+				},
+			},
+		});
+	}, [daily]);
+
+	return requestPermissions;
+};

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

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDaily, useDevices } from '@daily-co/daily-react';
+
+export const useStartHaircheck = () => {
+	const daily = useDaily();
+	const { micState } = useDevices();
+
+	const [permissionState, setPermissionState] = useState<PermissionState | null>(null);
+
+	useEffect(() => {
+		navigator.permissions
+			.query({ name: 'microphone' as PermissionName })
+			.then((permissionStatus) => {
+				setPermissionState(permissionStatus.state);
+				permissionStatus.onchange = () => {
+					setPermissionState(permissionStatus.state);
+				};
+			});
+	}, []);
+
+	const requestPermissions = useCallback(() => {
+		if (!daily) return;
+		daily.startCamera({
+			startVideoOff: false,
+			startAudioOff: false,
+			audioSource: 'default',
+			inputSettings: {
+				audio: {
+					processor: {
+						type: 'noise-cancellation',
+					},
+				},
+			},
+		});
+	}, [daily]);
+
+	const isPermissionsPrompt = useMemo(() => {
+		return permissionState === 'prompt';
+	}, [permissionState]);
+
+	const isPermissionsLoading = useMemo(() => {
+		return (permissionState === null || permissionState === 'granted') && micState === 'idle';
+	}, [permissionState, micState]);
+
+	const isPermissionsGranted = useMemo(() => {
+		return permissionState === 'granted';
+	}, [permissionState]);
+
+	const isPermissionsDenied = useMemo(() => {
+		return permissionState === 'denied';
+	}, [permissionState]);
+
+	return {
+		isPermissionsPrompt,
+		isPermissionsLoading,
+		isPermissionsGranted,
+		isPermissionsDenied,
+		requestPermissions,
+	};
+};