Skip to content

Commit 80d03d6

Browse files
thomasyuill-livekitthomasyuill-livekit
committed
use latest public components
1 parent 35f8257 commit 80d03d6

21 files changed

+357
-239
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use client';
22

33
import React, {
4+
type ReactNode,
45
type CSSProperties,
6+
useMemo,
57
Children,
6-
type ReactNode,
78
cloneElement,
89
isValidElement,
9-
useMemo,
1010
} from 'react';
1111
import { type VariantProps, cva } from 'class-variance-authority';
1212
import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
@@ -21,7 +21,7 @@ import { cn } from '@/lib/utils';
2121
function cloneSingleChild(
2222
children: ReactNode | ReactNode[],
2323
props?: Record<string, unknown>,
24-
key?: unknown
24+
key?: unknown,
2525
) {
2626
return Children.map(children, (child) => {
2727
// Checking isValidElement is the safe way and avoids a typescript error too.
@@ -61,7 +61,7 @@ export const AgentAudioVisualizerBarVariants = cva(
6161
defaultVariants: {
6262
size: 'md',
6363
},
64-
}
64+
},
6565
);
6666

6767
export interface AgentAudioVisualizerBarProps {
@@ -117,12 +117,12 @@ export function AgentAudioVisualizerBar({
117117
const highlightedIndices = useAgentAudioVisualizerBarAnimator(
118118
state,
119119
_barCount,
120-
sequencerInterval
120+
sequencerInterval,
121121
);
122122

123123
const bands = useMemo(
124124
() => (state === 'speaking' ? volumeBands : new Array(_barCount).fill(0)),
125-
[state, volumeBands, _barCount]
125+
[state, volumeBands, _barCount],
126126
);
127127

128128
return (
@@ -143,7 +143,7 @@ export function AgentAudioVisualizerBar({
143143
data-lk-highlighted={highlightedIndices.includes(idx)}
144144
style={{ height: `${band * 100}%` }}
145145
/>
146-
)
146+
),
147147
)}
148148
</div>
149149
);

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { type VariantProps, cva } from 'class-variance-authority';
21
import { motion } from 'motion/react';
2+
import { cva, VariantProps } from 'class-variance-authority';
33
import { cn } from '@/lib/utils';
44

55
const motionAnimationProps = {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
'use client';
22

3-
import { AnimatePresence } from 'motion/react';
43
import { type AgentState, type ReceivedMessage } from '@livekit/components-react';
5-
import { AgentChatIndicator } from '@/components/agents-ui/agent-chat-indicator';
64
import {
75
Conversation,
86
ConversationContent,
97
ConversationScrollButton,
108
} from '@/components/ai-elements/conversation';
119
import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message';
10+
import { AgentChatIndicator } from '@/components/agents-ui/agent-chat-indicator';
11+
import { AnimatePresence } from 'motion/react';
1212

1313
export interface AgentChatTranscriptProps {
1414
agentState?: AgentState;

‎components/agents-ui/agent-control-bar.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
'use client';
22

3-
import { type HTMLAttributes, useEffect, useRef, useState } from 'react';
3+
import { useEffect, useRef, type HTMLAttributes, useState } from 'react';
44
import { Track } from 'livekit-client';
5-
import { Loader, MessageSquareTextIcon, SendHorizontal } from 'lucide-react';
65
import { motion } from 'motion/react';
76
import { useChat } from '@livekit/components-react';
8-
import { AgentDisconnectButton } from '@/components/agents-ui/agent-disconnect-button';
9-
import { AgentTrackControl } from '@/components/agents-ui/agent-track-control';
7+
import { Loader, MessageSquareTextIcon, SendHorizontal } from 'lucide-react';
8+
import { Toggle } from '@/components/ui/toggle';
9+
import { Button } from '@/components/ui/button';
1010
import {
1111
AgentTrackToggle,
1212
agentTrackToggleVariants,
1313
} from '@/components/agents-ui/agent-track-toggle';
14-
import { Button } from '@/components/ui/button';
15-
import { Toggle } from '@/components/ui/toggle';
14+
import { AgentTrackControl } from '@/components/agents-ui/agent-track-control';
15+
import { AgentDisconnectButton } from '@/components/agents-ui/agent-disconnect-button';
1616
import {
17-
type UseInputControlsProps,
1817
useInputControls,
1918
usePublishPermissions,
19+
type UseInputControlsProps,
2020
} from '@/hooks/agents-ui/use-agent-control-bar';
2121
import { cn } from '@/lib/utils';
2222

@@ -195,14 +195,15 @@ export function AgentControlBar({
195195
<div
196196
aria-label="Voice assistant controls"
197197
className={cn(
198-
'bg-background border-input/50 dark:border-muted flex flex-col border p-3 drop-shadow-md/3',
198+
'bg-background border-input/50 dark:border-muted flex flex-col border drop-shadow-md/3 p-3',
199199
variant === 'livekit' ? 'rounded-[31px]' : 'rounded-lg',
200-
className
200+
className,
201201
)}
202202
{...props}
203203
>
204204
<motion.div
205205
{...MOTION_PROPS}
206+
// @ts-ignore
206207
inert={!(isChatOpen || isChatOpenUncontrolled)}
207208
animate={isChatOpen || isChatOpenUncontrolled ? 'visible' : 'hidden'}
208209
className="border-input/50 flex w-full items-start overflow-hidden border-b"
@@ -233,7 +234,7 @@ export function AgentControlBar({
233234
variant === 'livekit' && [
234235
TOGGLE_VARIANT_1,
235236
'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
236-
]
237+
],
237238
)}
238239
/>
239240
)}
@@ -255,7 +256,7 @@ export function AgentControlBar({
255256
variant === 'livekit' && [
256257
TOGGLE_VARIANT_1,
257258
'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
258-
]
259+
],
259260
)}
260261
/>
261262
)}
@@ -300,7 +301,7 @@ export function AgentControlBar({
300301
disabled={!isConnected}
301302
className={cn(
302303
variant === 'livekit' &&
303-
'bg-destructive/10 dark:bg-destructive/10 text-destructive hover:bg-destructive/20 dark:hover:bg-destructive/20 focus:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/4 rounded-full font-mono text-xs font-bold tracking-wider'
304+
'rounded-full bg-destructive/10 dark:bg-destructive/10 text-destructive hover:bg-destructive/20 dark:hover:bg-destructive/20 focus:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/4 font-mono text-xs font-bold tracking-wider',
304305
)}
305306
>
306307
<span className="hidden md:inline">END CALL</span>

‎components/agents-ui/agent-disconnect-button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use client';
22

3-
import { type VariantProps } from 'class-variance-authority';
4-
import { PhoneOffIcon } from 'lucide-react';
5-
import { useSessionContext } from '@livekit/components-react';
63
import { Button, buttonVariants } from '@/components/ui/button';
74
import { cn } from '@/lib/utils';
5+
import { useSessionContext } from '@livekit/components-react';
6+
import { type VariantProps } from 'class-variance-authority';
7+
import { PhoneOffIcon } from 'lucide-react';
88

99
export interface AgentDisconnectButtonProps
1010
extends React.ComponentProps<'button'>,

‎components/agents-ui/agent-session-provider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {
2-
RoomAudioRenderer,
3-
type RoomAudioRendererProps,
42
SessionProvider,
3+
RoomAudioRenderer,
54
type SessionProviderProps,
5+
type RoomAudioRendererProps,
66
} from '@livekit/components-react';
77

88
export type AgentSessionProviderProps = SessionProviderProps & RoomAudioRendererProps;

‎components/agents-ui/agent-track-control.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { type VariantProps, cva } from 'class-variance-authority';
55
import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
66
import {
77
type TrackReferenceOrPlaceholder,
8+
useTrackToggle,
89
useMaybeRoomContext,
910
useMediaDeviceSelect,
10-
useTrackToggle,
1111
} from '@livekit/components-react';
12+
1213
import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';
1314
import { AgentTrackToggle } from '@/components/agents-ui/agent-track-toggle';
1415
import {
@@ -67,7 +68,7 @@ const selectVariants = cva(
6768
variant: 'default',
6869
size: 'default',
6970
},
70-
}
71+
},
7172
);
7273

7374
type DeviceSelectProps = React.ComponentProps<typeof SelectTrigger> &
@@ -178,7 +179,7 @@ export function AgentTrackControl({
178179
className={cn(
179180
'flex items-center gap-0 rounded-md',
180181
variant === 'outline' && 'shadow-xs [&_button]:shadow-none',
181-
className
182+
className,
182183
)}
183184
>
184185
<AgentTrackToggle
@@ -188,7 +189,7 @@ export function AgentTrackControl({
188189
pending={pending}
189190
disabled={disabled}
190191
onPressedChange={onPressedChange}
191-
className="peer/track group/track focus:z-10 has-[.audiovisualizer]:w-auto has-[.audiovisualizer]:px-3 has-[~_button]:rounded-r-none has-[~_button]:border-r-0 has-[~_button]:pr-2 has-[~_button]:pl-3"
192+
className="peer/track group/track has-[.audiovisualizer]:w-auto has-[.audiovisualizer]:px-3 has-[~_button]:rounded-r-none has-[~_button]:pr-2 has-[~_button]:pl-3 has-[~_button]:border-r-0 focus:z-10"
192193
>
193194
{audioTrack && (
194195
<AgentAudioVisualizerBar

‎components/agents-ui/agent-track-toggle.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import * as React from 'react';
22
import { cva } from 'class-variance-authority';
33
import { Track } from 'livekit-client';
4+
import { useTrackToggle } from '@livekit/components-react';
45
import {
5-
LoaderIcon,
66
MicIcon,
77
MicOffIcon,
8-
MonitorOffIcon,
98
MonitorUpIcon,
9+
MonitorOffIcon,
10+
LoaderIcon,
1011
VideoIcon,
1112
VideoOffIcon,
1213
} from 'lucide-react';
13-
import { useTrackToggle } from '@livekit/components-react';
1414
import { Toggle } from '@/components/ui/toggle';
1515
import { cn } from '@/lib/utils';
1616

@@ -80,7 +80,7 @@ export function AgentTrackToggle({
8080
agentTrackToggleVariants({
8181
variant: variant ?? 'default',
8282
className,
83-
})
83+
}),
8484
)}
8585
{...props}
8686
>

components/agents-ui/agent-session-start-audio-button.tsx renamed to components/agents-ui/start-audio-button.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
import { Room } from 'livekit-client';
21
import { useEnsureRoom, useStartAudio } from '@livekit/components-react';
32
import { Button } from '@/components/ui/button';
3+
import { Room } from 'livekit-client';
44

5-
export interface AgentSessionStartAudioButtonProps
6-
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5+
export interface StartAudioButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
76
room?: Room;
87
label: string;
98
}
109

11-
export function AgentSessionStartAudioButton({
12-
label,
13-
room,
14-
...props
15-
}: AgentSessionStartAudioButtonProps) {
10+
export function StartAudioButton({ label, room, ...props }: StartAudioButtonProps) {
1611
const roomEnsured = useEnsureRoom(room);
1712
const { mergedProps } = useStartAudio({ room: roomEnsured, props });
1813

0 commit comments

Comments
 (0)