feat: add initial agent video prototype into panel (#11)

Big issue though: I can't get the animation fade in to look decent, the
problem is the video element shows up before the data stream fully
starts which means regular fade in animations mostly happen while the
video is black which makes them invisible

Author: 1egoman

components/embed-popup/popup-view.tsx

@@ -17,6 +17,7 @@ import useChatAndTranscription from '@/hooks/use-chat-and-transcription';
 import { useDebugMode } from '@/hooks/useDebug';
 import type { EmbedErrorDetails } from '@/lib/types';
 import { cn } from '@/lib/utils';
+import { AvatarTile } from '../livekit/avatar-tile';
 import { ChatInput } from '../livekit/chat/chat-input';
 
 function isAgentAvailable(agentState: AgentState) {
@@ -37,7 +38,13 @@ export const PopupView = ({
 }: React.ComponentProps<'div'> & SessionViewProps) => {
   const room = useRoomContext();
   const transcriptRef = useRef<HTMLDivElement>(null);
-  const { state: agentState, audioTrack: agentAudioTrack } = useVoiceAssistant();
+  const {
+    state: agentState,
+    audioTrack: agentAudioTrack,
+    videoTrack: agentVideoTrack,
+  } = useVoiceAssistant();
+  const agentHasAvatar = agentVideoTrack !== undefined;
+
   const {
     micTrackRef,
     // FIXME: how do I explicitly ensure only the microphone channel is used?
@@ -166,6 +173,29 @@ export const PopupView = ({
           </div>
         </div>
 
+        <motion.div
+          initial={{ opacity: 0, scale: 0 }}
+          variants={{
+            visible: { opacity: 1, scale: 1 },
+            hidden: { opacity: 0, scale: 0 },
+          }}
+          animate={agentHasAvatar ? 'visible' : 'hidden'}
+          exit={{ opacity: 0, scale: 0 }}
+          transition={{
+            type: 'spring',
+            stiffness: 675,
+            damping: 75,
+            mass: 1,
+          }}
+          className={cn('absolute inset-1 h-full overflow-hidden rounded-t-[24px] pb-8', {
+            'pointer-events-none': !agentHasAvatar,
+          })}
+        >
+          {agentVideoTrack ? (
+            <AvatarTile videoTrack={agentVideoTrack} className="h-full object-cover" />
+          ) : null}
+        </motion.div>
+
         <div
           aria-label="Voice assistant controls"
           className="bg-bg1 border-separator1 relative mx-1 flex h-12 shrink-0 grow-0 items-center gap-1 rounded-full border px-1 drop-shadow-md"

components/livekit/avatar-tile.tsx

@@ -0,0 +1,17 @@
+import { type TrackReference, VideoTrack } from '@livekit/components-react';
+
+interface AgentAudioTileProps {
+  videoTrack: TrackReference;
+  className?: string;
+}
+
+export const AvatarTile = ({ videoTrack, className }: AgentAudioTileProps) => {
+  return (
+    <VideoTrack
+      trackRef={videoTrack}
+      width={videoTrack?.publication.dimensions?.width ?? 0}
+      height={videoTrack?.publication.dimensions?.height ?? 0}
+      className={className}
+    />
+  );
+};