migrate to agents-ui

Author: thomasyuill-livekit

components.json

@@ -10,12 +10,16 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "phosphor"
+  "registries": {
+    "@agents-ui": "http://livekit.io/ui/r/{name}.json",
+    "@ai-elements": "https://registry.ai-sdk.dev/{name}.json"
+  }
 }

components/agents-ui/agent-audio-visualizer-bar.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, {
+  type CSSProperties,
+  Children,
+  type ReactNode,
+  cloneElement,
+  isValidElement,
+  useMemo,
+} from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
+import {
+  type AgentState,
+  type TrackReferenceOrPlaceholder,
+  useMultibandTrackVolume,
+} from '@livekit/components-react';
+import { useAgentAudioVisualizerBarAnimator } from '@/hooks/agents-ui/use-agent-audio-visualizer-bar';
+import { cn } from '@/lib/utils';
+
+function cloneSingleChild(
+  children: ReactNode | ReactNode[],
+  props?: Record<string, unknown>,
+  key?: unknown
+) {
+  return Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too.
+    if (isValidElement(child) && Children.only(children)) {
+      const childProps = child.props as Record<string, unknown>;
+      if (childProps.className) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.className = cn(childProps.className as string, props.className as string);
+        props.style = {
+          ...(childProps.style as CSSProperties),
+          ...(props.style as CSSProperties),
+        };
+      }
+      return cloneElement(child, { ...props, key: key ? String(key) : undefined });
+    }
+    return child;
+  });
+}
+
+export const AgentAudioVisualizerBarVariants = cva(
+  [
+    'relative flex items-center justify-center',
+    '[&_>_*]:rounded-full [&_>_*]:transition-colors [&_>_*]:duration-250 [&_>_*]:ease-linear',
+    '[&_>_*]:bg-transparent [&_>_*]:data-[lk-highlighted=true]:bg-current',
+  ],
+  {
+    variants: {
+      size: {
+        icon: ['h-[24px] gap-[2px]', '[&_>_*]:w-[4px] [&_>_*]:min-h-[4px]'],
+        sm: ['h-[56px] gap-[4px]', '[&_>_*]:w-[8px] [&_>_*]:min-h-[8px]'],
+        md: ['h-[112px] gap-[8px]', '[&_>_*]:w-[16px] [&_>_*]:min-h-[16px]'],
+        lg: ['h-[224px] gap-[16px]', '[&_>_*]:w-[32px] [&_>_*]:min-h-[32px]'],
+        xl: ['h-[448px] gap-[32px]', '[&_>_*]:w-[64px] [&_>_*]:min-h-[64px]'],
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface AgentAudioVisualizerBarProps {
+  state?: AgentState;
+  barCount?: number;
+  audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
+  className?: string;
+  children?: ReactNode | ReactNode[];
+}
+
+export function AgentAudioVisualizerBar({
+  size = 'md',
+  state = 'connecting',
+  barCount,
+  audioTrack,
+  className,
+  children,
+}: AgentAudioVisualizerBarProps & VariantProps<typeof AgentAudioVisualizerBarVariants>) {
+  const _barCount = useMemo(() => {
+    if (barCount) {
+      return barCount;
+    }
+    switch (size) {
+      case 'icon':
+      case 'sm':
+        return 3;
+      default:
+        return 5;
+    }
+  }, [barCount, size]);
+
+  const volumeBands = useMultibandTrackVolume(audioTrack, {
+    bands: _barCount,
+    loPass: 100,
+    hiPass: 200,
+  });
+
+  const sequencerInterval = useMemo(() => {
+    switch (state) {
+      case 'connecting':
+        return 2000 / _barCount;
+      case 'initializing':
+        return 2000;
+      case 'listening':
+        return 500;
+      case 'thinking':
+        return 150;
+      default:
+        return 1000;
+    }
+  }, [state, _barCount]);
+
+  const highlightedIndices = useAgentAudioVisualizerBarAnimator(
+    state,
+    _barCount,
+    sequencerInterval
+  );
+
+  const bands = useMemo(
+    () => (state === 'speaking' ? volumeBands : new Array(_barCount).fill(0)),
+    [state, volumeBands, _barCount]
+  );
+
+  return (
+    <div className={cn(AgentAudioVisualizerBarVariants({ size }), className)}>
+      {bands.map((band: number, idx: number) =>
+        children ? (
+          <React.Fragment key={idx}>
+            {cloneSingleChild(children, {
+              'data-lk-index': idx,
+              'data-lk-highlighted': highlightedIndices.includes(idx),
+              style: { height: `${band * 100}%` },
+            })}
+          </React.Fragment>
+        ) : (
+          <div
+            key={idx}
+            data-lk-index={idx}
+            data-lk-highlighted={highlightedIndices.includes(idx)}
+            style={{ height: `${band * 100}%` }}
+          />
+        )
+      )}
+    </div>
+  );
+}

components/agents-ui/agent-avatar-video-track.tsx

@@ -0,0 +1,5 @@
+import { VideoTrack, type VideoTrackProps } from '@livekit/components-react';
+
+export function AgentAvatarVideoTrack(props: VideoTrackProps) {
+  return <VideoTrack {...props} />;
+}

components/agents-ui/agent-chat-indicator.tsx

@@ -0,0 +1,57 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import { motion } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+const motionAnimationProps = {
+  variants: {
+    hidden: {
+      opacity: 0,
+      scale: 0.1,
+      transition: {
+        duration: 0.1,
+        ease: 'linear',
+      },
+    },
+    visible: {
+      opacity: [0.5, 1],
+      scale: [1, 1.2],
+      transition: {
+        type: 'spring',
+        bounce: 0,
+        duration: 0.5,
+        repeat: Infinity,
+        repeatType: 'mirror' as const,
+      },
+    },
+  },
+  initial: 'hidden',
+  animate: 'visible',
+  exit: 'hidden',
+};
+
+const agentChatIndicatorVariants = cva('bg-muted-foreground inline-block size-2.5 rounded-full', {
+  variants: {
+    size: {
+      sm: 'size-2.5',
+      md: 'size-4',
+      lg: 'size-6',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export interface AgentChatIndicatorProps extends VariantProps<typeof agentChatIndicatorVariants> {
+  className?: string;
+}
+
+export function AgentChatIndicator({ size, className }: AgentChatIndicatorProps) {
+  return (
+    <motion.span
+      {...motionAnimationProps}
+      transition={{ duration: 0.1, ease: 'linear' }}
+      className={cn(agentChatIndicatorVariants({ size }), className)}
+    />
+  );
+}

components/agents-ui/agent-chat-transcript.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { AnimatePresence } from 'motion/react';
+import { type AgentState, type ReceivedMessage } from '@livekit/components-react';
+import { AgentChatIndicator } from '@/components/agents-ui/agent-chat-indicator';
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@/components/ai-elements/conversation';
+import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message';
+
+export interface AgentChatTranscriptProps {
+  agentState?: AgentState;
+  messages?: ReceivedMessage[];
+  className?: string;
+}
+
+export function AgentChatTranscript({
+  agentState,
+  messages = [],
+  className,
+}: AgentChatTranscriptProps) {
+  return (
+    <Conversation className={className}>
+      <ConversationContent>
+        {messages.map((receivedMessage) => {
+          const { id, timestamp, from, message } = receivedMessage;
+          const locale = navigator?.language ?? 'en-US';
+          const messageOrigin = from?.isLocal ? 'user' : 'assistant';
+          const time = new Date(timestamp);
+          const title = time.toLocaleTimeString(locale, { timeStyle: 'full' });
+
+          return (
+            <Message key={id} title={title} from={messageOrigin}>
+              <MessageContent>
+                <MessageResponse>{message}</MessageResponse>
+              </MessageContent>
+            </Message>
+          );
+        })}
+        <AnimatePresence>
+          {agentState === 'thinking' && <AgentChatIndicator size="sm" />}
+        </AnimatePresence>
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+  );
+}