Agent Chat Transcript

Usage

Hi, how are you?

I'm good, thank you!

This is a longer message that should wrap to the next line.

Great I'm responding with an even longer message to see how it wraps.

Thinking...

'use client';

import { 
  useSession, 
  useAgent,
  useSessionContext,
  useSessionMessages, 
} from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';

const TOKEN_SOURCE = TokenSource.endpoint('/api/token');

export function Demo() {
  const { state } = useAgent();
  const session = useSessionContext();
  const { messages } = useSessionMessages(session);

  return (
    <AgentChatTranscript
      agentState={state}
      messages={messages}
    />
  );
}

export default function DemoWrapper({ session }) {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <Demo />
    </AgentSessionProvider>
  );
}

Features

Display the session's chat history in a styled list
Renders the AgentChatIndicator when the agentState is "thinking"
Supports both plain text and markdown formatting
Automatically scrolls to the latest message
Handles message updates and deletions

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-chat-transcript

Props

Prop name	Type	Default
autoScroll?	boolean	true
scrollAnchor?	boolean \| "user" \| "other" \| "any"	–
scrollButtonRender?	any	–
scrollButtonBehavior?	any	–
scrollButtonDirection?	any	–
agentState?	enum	–
messages?	ReceivedMessage[]	[]
className?	string	–
ref?	Ref<HTMLDivElement>	–
...props?	ComponentProps<'div'> , ComponentProps<typeof MessageScrollerProvider>, ComponentProps<typeof MessageScrollerViewport>, ComponentProps<typeof MessageScrollerContent>

Usage

Features

Installation

Props

Ask LiveKit

Keep in touch