feat: add chat-indicator component

Author: thomasyuill-livekit

components/app/chat-transcript.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
-import { type ReceivedMessage } from '@livekit/components-react';
+import { type ReceivedMessage, useVoiceAssistant } from '@livekit/components-react';
 import { ChatEntry } from '@/components/livekit/chat-entry';
+import { ChatIndicator } from '@/components/livekit/chat-indicator';
 
 const MotionContainer = motion.create('div');
 const MotionChatEntry = motion.create(ChatEntry);
@@ -58,31 +59,35 @@ export function ChatTranscript({
   messages = [],
   ...props
 }: ChatTranscriptProps & Omit<HTMLMotionProps<'div'>, 'ref'>) {
+  const { state: agentState } = useVoiceAssistant();
   return (
-    <AnimatePresence>
-      {!hidden && (
-        <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
-          {messages.map((receivedMessage) => {
-            const { id, timestamp, from, message } = receivedMessage;
-            const locale = navigator?.language ?? 'en-US';
-            const messageOrigin = from?.isLocal ? 'local' : 'remote';
-            const hasBeenEdited =
-              receivedMessage.type === 'chatMessage' && !!receivedMessage.editTimestamp;
+    <>
+      <AnimatePresence>
+        {!hidden && (
+          <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
+            {messages.map((receivedMessage) => {
+              const { id, timestamp, from, message } = receivedMessage;
+              const locale = navigator?.language ?? 'en-US';
+              const messageOrigin = from?.isLocal ? 'local' : 'remote';
+              const hasBeenEdited =
+                receivedMessage.type === 'chatMessage' && !!receivedMessage.editTimestamp;
 
-            return (
-              <MotionChatEntry
-                key={id}
-                locale={locale}
-                timestamp={timestamp}
-                message={message}
-                messageOrigin={messageOrigin}
-                hasBeenEdited={hasBeenEdited}
-                {...MESSAGE_MOTION_PROPS}
-              />
-            );
-          })}
-        </MotionContainer>
-      )}
-    </AnimatePresence>
+              return (
+                <MotionChatEntry
+                  key={id}
+                  locale={locale}
+                  timestamp={timestamp}
+                  message={message}
+                  messageOrigin={messageOrigin}
+                  hasBeenEdited={hasBeenEdited}
+                  {...MESSAGE_MOTION_PROPS}
+                />
+              );
+            })}
+            <ChatIndicator agentState={agentState} />
+          </MotionContainer>
+        )}
+      </AnimatePresence>
+    </>
   );
 }

components/demos/ChatIndicator.tsx

@@ -0,0 +1,10 @@
+import { Container } from '../docs/container';
+import { ChatIndicator } from '../livekit/chat-indicator';
+
+export default function ChatIndicatorDemo() {
+  return (
+    <Container componentName="ChatIndicator">
+      <ChatIndicator agentState="thinking" />
+    </Container>
+  );
+}

components/livekit/chat-indicator.tsx

@@ -0,0 +1,49 @@
+import { AnimatePresence, motion } from 'motion/react';
+import { type AgentState } from '@livekit/components-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',
+};
+
+export interface ChatIndicatorProps {
+  agentState?: AgentState;
+  className?: string;
+}
+
+export function ChatIndicator({ agentState, className }: ChatIndicatorProps) {
+  return (
+    <AnimatePresence>
+      {agentState === 'thinking' && (
+        <motion.span
+          {...motionAnimationProps}
+          transition={{ duration: 0.1, ease: 'linear' }}
+          className={cn('bg-muted-foreground inline-block size-2.5 rounded-full', className)}
+        />
+      )}
+    </AnimatePresence>
+  );
+}