design: avatar polish

Author: thomasyuill-livekit

components/embed-popup/action-bar.tsx

@@ -0,0 +1,40 @@
+import { MicrophoneToggle } from '@/components/embed-popup/microphone-toggle';
+import { ChatInput } from '@/components/livekit/chat/chat-input';
+import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
+
+interface ActionBarProps {
+  onSend: (message: string) => void;
+}
+
+export function ActionBar({ onSend }: ActionBarProps) {
+  const {
+    micTrackRef,
+    // FIXME: how do I explicitly ensure only the microphone channel is used?
+    visibleControls,
+    microphoneToggle,
+    handleAudioDeviceChange,
+  } = useAgentControlBar({
+    controls: { microphone: true },
+    saveUserChoices: true,
+  });
+
+  return (
+    <div
+      aria-label="Voice assistant controls"
+      className="bg-bg1 border-separator1 relative z-20 mx-1 flex h-12 shrink-0 grow-0 items-center gap-1 rounded-full border px-1 drop-shadow-md"
+    >
+      <div className="flex gap-1">
+        {visibleControls.microphone && (
+          <MicrophoneToggle
+            micTrackRef={micTrackRef}
+            microphoneToggle={microphoneToggle}
+            handleAudioDeviceChange={handleAudioDeviceChange}
+          />
+        )}
+        {/* FIXME: do I need to handle the other channels here? */}
+      </div>
+
+      <ChatInput className="w-0 shrink-1 grow-1" onSend={onSend} />
+    </div>
+  );
+}

components/embed-popup/agent-client.tsx

@@ -1,38 +1,47 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Room, RoomEvent } from 'livekit-client';
 import { motion } from 'motion/react';
 import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
-import { XIcon } from '@phosphor-icons/react';
+import { ErrorMessage } from '@/components/embed-popup/error-message';
 import { PopupView } from '@/components/embed-popup/popup-view';
 import { Trigger } from '@/components/embed-popup/trigger';
-import { Button } from '@/components/ui/button';
 import useConnectionDetails from '@/hooks/use-connection-details';
 import { type AppConfig, EmbedErrorDetails } from '@/lib/types';
-import { cn } from '@/lib/utils';
+
+const PopupViewMotion = motion.create(PopupView);
 
 export type EmbedFixedAgentClientProps = {
   appConfig: AppConfig;
 };
 
-function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
+function AgentClient({ appConfig }: EmbedFixedAgentClientProps) {
+  const isAnimating = useRef(false);
   const room = useMemo(() => new Room(), []);
   const [popupOpen, setPopupOpen] = useState(false);
-  const [currentError, setCurrentError] = useState<EmbedErrorDetails | null>(null);
+  const [error, setError] = useState<EmbedErrorDetails | null>(null);
   const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
 
   const handleTogglePopup = () => {
+    if (isAnimating.current) {
+      // prevent re-opening before room has disconnected
+      return;
+    }
+
+    setError(null);
     setPopupOpen((open) => !open);
+  };
 
-    if (currentError) {
-      handleDismissError();
-    }
+  const handlePanelAnimationStart = () => {
+    isAnimating.current = true;
   };
 
-  const handleDismissError = () => {
-    room.disconnect();
-    setCurrentError(null);
+  const handlePanelAnimationComplete = () => {
+    isAnimating.current = false;
+    if (!popupOpen && room.state !== 'disconnected') {
+      room.disconnect();
+    }
   };
 
   useEffect(() => {
@@ -41,7 +50,7 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
       refreshConnectionDetails();
     };
     const onMediaDevicesError = (error: Error) => {
-      setCurrentError({
+      setError({
         title: 'Encountered an error with your media devices',
         description: `${error.name}: ${error.message}`,
       });
@@ -58,10 +67,14 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
     if (!popupOpen) {
       return;
     }
-    if (room.state !== 'disconnected') {
+    if (!connectionDetails) {
+      setError({
+        title: 'Error fetching connection details',
+        description: 'Please try again later',
+      });
       return;
     }
-    if (!connectionDetails) {
+    if (room.state !== 'disconnected') {
       return;
     }
 
@@ -74,26 +87,23 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
       } catch (error: unknown) {
         if (error instanceof Error) {
           console.error('Error connecting to agent:', error);
-          setCurrentError({
+          setError({
             title: 'There was an error connecting to the agent',
             description: `${error.name}: ${error.message}`,
           });
         }
       }
     };
-    connect();
 
-    return () => {
-      room.disconnect();
-    };
+    connect();
   }, [room, popupOpen, connectionDetails, appConfig.isPreConnectBufferEnabled]);
 
   return (
     <RoomContext.Provider value={room}>
       <RoomAudioRenderer />
       <StartAudio label="Start Audio" />
 
-      <Trigger error={!!currentError} popupOpen={popupOpen} onToggle={handleTogglePopup} />
+      <Trigger error={error} popupOpen={popupOpen} onToggle={handleTogglePopup} />
 
       <motion.div
         inert={!popupOpen}
@@ -107,58 +117,35 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
         }}
         transition={{
           type: 'spring',
-          duration: 1,
           bounce: 0,
+          duration: popupOpen ? 1 : 0.2,
         }}
+        onAnimationStart={handlePanelAnimationStart}
+        onAnimationComplete={handlePanelAnimationComplete}
         className="fixed right-0 bottom-20 z-50 w-full px-4"
       >
         <div className="bg-bg2 dark:bg-bg1 border-separator1 ml-auto h-[480px] w-full rounded-[28px] border drop-shadow-md md:max-w-[360px]">
           <div className="relative h-full w-full">
-            <div
-              inert={currentError === null}
-              className={cn(
-                'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-5 transition-opacity',
-                currentError === null ? 'opacity-0' : 'opacity-100'
-              )}
-            >
-              <div className="pl-3">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src="/lk-logo.svg" alt="LiveKit Logo" className="block size-6 dark:hidden" />
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src="/lk-logo-dark.svg"
-                  alt="LiveKit Logo"
-                  className="hidden size-6 dark:block"
-                />
-              </div>
-
-              <div className="flex w-full flex-col justify-center gap-1 overflow-auto px-4 text-center">
-                <span className="text-sm font-medium">{currentError?.title}</span>
-                <span className="text-xs">{currentError?.description}</span>
-              </div>
-
-              <Button variant="secondary" onClick={handleDismissError}>
-                <XIcon /> Dismiss
-              </Button>
-            </div>
-            <div
-              inert={currentError !== null}
-              className={cn(
-                'absolute inset-0 transition-opacity',
-                currentError === null ? 'opacity-100' : 'opacity-0'
-              )}
-            >
-              <PopupView
+            <ErrorMessage error={error} />
+            {!error && (
+              <PopupViewMotion
+                initial={{ opacity: 1 }}
+                animate={{ opacity: error === null ? 1 : 0 }}
+                transition={{
+                  type: 'linear',
+                  duration: 0.2,
+                }}
                 disabled={!popupOpen}
                 sessionStarted={popupOpen}
-                onDisplayError={setCurrentError}
+                onEmbedError={setError}
+                className="absolute inset-0"
               />
-            </div>
+            )}
           </div>
         </div>
       </motion.div>
     </RoomContext.Provider>
   );
 }
 
-export default EmbedFixedAgentClient;
+export default AgentClient;

components/embed-popup/audio-visualizer.tsx

@@ -0,0 +1,70 @@
+import { AnimatePresence, motion } from 'motion/react';
+import { type AgentState, BarVisualizer, type TrackReference } from '@livekit/components-react';
+import { useDelayedValue } from '@/hooks/useDelayedValue';
+import { cn } from '@/lib/utils';
+
+const TILE_TRANSITION = {
+  type: 'spring',
+  stiffness: 675,
+  damping: 75,
+  mass: 1,
+};
+
+interface AudioVisualizerProps {
+  agentState: AgentState;
+  audioTrack?: TrackReference;
+  videoTrack?: TrackReference;
+}
+
+export function AudioVisualizer({ agentState, audioTrack, videoTrack }: AudioVisualizerProps) {
+  // wait for the possible video track
+  // FIXME: pass IO expectations upfront to avoid this delay
+  const isAgentConnected = useDelayedValue(
+    agentState !== 'disconnected' && agentState !== 'connecting' && agentState !== 'initializing',
+    500
+  );
+
+  return (
+    <AnimatePresence>
+      {!videoTrack && (
+        <motion.div
+          key="audio-visualizer"
+          className={cn(
+            'bg-bg2 dark:bg-bg1 pointer-events-none absolute z-10 flex aspect-[1.5] w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
+            isAgentConnected && 'bg-bg1 border-separator1 drop-shadow-2xl'
+          )}
+          initial={{
+            scale: 1,
+            left: '50%',
+            top: '50%',
+            translateX: '-50%',
+            translateY: '-50%',
+            transformOrigin: 'center top',
+          }}
+          animate={{
+            scale: isAgentConnected ? 0.4 : 1,
+            top: isAgentConnected ? '12px' : '50%',
+            translateY: isAgentConnected ? '0' : '-50%',
+          }}
+          transition={{ TILE_TRANSITION }}
+        >
+          <BarVisualizer
+            barCount={5}
+            state={agentState}
+            trackRef={audioTrack}
+            options={{ minHeight: 5 }}
+            className="flex h-full w-auto items-center justify-center gap-3"
+          >
+            <span
+              className={cn([
+                'bg-muted min-h-6 w-6 rounded-full',
+                'origin-center transition-colors duration-250 ease-linear',
+                'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
+              ])}
+            />
+          </BarVisualizer>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

components/embed-popup/error-message.tsx

@@ -0,0 +1,30 @@
+import { EmbedErrorDetails } from '@/lib/types';
+import { cn } from '@/lib/utils';
+
+interface ErrorMessageProps {
+  error: EmbedErrorDetails | null;
+}
+
+export function ErrorMessage({ error }: ErrorMessageProps) {
+  return (
+    <div
+      inert={error === null}
+      className={cn(
+        'absolute inset-0 z-50 flex h-full w-full flex-col items-center justify-center gap-5 transition-opacity',
+        error === null ? 'opacity-0' : 'opacity-100'
+      )}
+    >
+      <div className="pl-3">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/lk-logo.svg" alt="LiveKit Logo" className="block size-6 dark:hidden" />
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/lk-logo-dark.svg" alt="LiveKit Logo" className="hidden size-6 dark:block" />
+      </div>
+
+      <div className="flex w-full flex-col justify-center gap-4 overflow-auto px-4 text-center">
+        <span className="mx-4 leading-tight font-medium text-pretty">{error?.title}</span>
+        <span className="text-sm">{error?.description}</span>
+      </div>
+    </div>
+  );
+}

components/embed-popup/microphone-toggle.tsx

@@ -0,0 +1,64 @@
+import { Track } from 'livekit-client';
+import {
+  BarVisualizer,
+  type TrackReferenceOrPlaceholder,
+  useTrackToggle,
+} from '@livekit/components-react';
+import { DeviceSelect } from '@/components/livekit/device-select';
+import { TrackToggle } from '@/components/livekit/track-toggle';
+import { cn } from '@/lib/utils';
+
+interface MicrophoneToggleProps {
+  micTrackRef: TrackReferenceOrPlaceholder;
+  microphoneToggle: ReturnType<typeof useTrackToggle<Track.Source.Microphone>>;
+  handleAudioDeviceChange: (deviceId: string) => void;
+}
+
+export function MicrophoneToggle({
+  microphoneToggle,
+  micTrackRef,
+  handleAudioDeviceChange,
+}: MicrophoneToggleProps) {
+  return (
+    <div className="flex items-center gap-0">
+      <TrackToggle
+        variant="primary"
+        source={Track.Source.Microphone}
+        pressed={microphoneToggle.enabled}
+        disabled={microphoneToggle.pending}
+        onPressedChange={microphoneToggle.toggle}
+        className="peer/track group/track relative w-auto pr-3 pl-3 md:rounded-r-none md:border-r-0 md:pr-2"
+      >
+        <BarVisualizer
+          barCount={3}
+          trackRef={micTrackRef}
+          options={{ minHeight: 5 }}
+          className="flex h-full w-auto items-center justify-center gap-0.5"
+        >
+          <span
+            className={cn([
+              'h-full w-0.5 origin-center rounded-2xl',
+              'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
+              'data-lk-muted:bg-muted',
+            ])}
+          ></span>
+        </BarVisualizer>
+      </TrackToggle>
+
+      <hr className="bg-separator1 peer-data-[state=off]/track:bg-separatorSerious relative z-10 -mr-px hidden h-4 w-px md:block" />
+
+      <DeviceSelect
+        size="sm"
+        kind="audioinput"
+        onActiveDeviceChange={handleAudioDeviceChange}
+        className={cn([
+          'pl-2',
+          'peer-data-[state=off]/track:text-destructive-foreground',
+          'hover:text-fg1 focus:text-fg1',
+          'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+          'hidden rounded-l-none md:block',
+        ])}
+      />
+    </div>
+  );
+}