Skip to content

Commit fa07ce3

Browse files
thomasyuill-livekitthomasyuill-livekit
committed
more cleanup
1 parent 71de764 commit fa07ce3

26 files changed

+531
-298
lines changed

‎app/(app)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { headers } from 'next/headers';
2-
import { App } from '@/components/app';
2+
import { App } from '@/components/app/app';
33
import { getAppConfig } from '@/lib/utils';
44

55
export default async function Page() {

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Public_Sans } from 'next/font/google';
22
import localFont from 'next/font/local';
33
import { headers } from 'next/headers';
4-
import { ApplyThemeScript, ThemeToggle } from '@/components/livekit/theme-toggle';
4+
import { ApplyThemeScript, ThemeToggle } from '@/components/app/theme-toggle';
55
import { cn, getAppConfig, getStyles } from '@/lib/utils';
66
import '@/styles/globals.css';
77

app/ui/container.tsx renamed to app/ui/_container.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ interface ContainerProps {
77

88
export function Container({ children, className }: ContainerProps) {
99
return (
10-
<div className={cn('relative space-y-4 rounded-lg border p-4', className)}>{children}</div>
10+
<div
11+
className={cn(
12+
'bg-card border-input relative space-y-4 rounded-lg border p-4 drop-shadow-lg/5',
13+
className
14+
)}
15+
>
16+
{children}
17+
</div>
1118
);
1219
}

app/ui/room-provider.tsx renamed to app/ui/_room-provider.tsx

File renamed without changes.

‎app/ui/_tabs.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import Link from 'next/link';
4+
import { usePathname } from 'next/navigation';
5+
import { cn } from '@/lib/utils';
6+
7+
interface TabProps {
8+
href: string;
9+
children: React.ReactNode;
10+
className?: string;
11+
}
12+
13+
function Tab({ href, children, className }: TabProps) {
14+
const pathname = usePathname();
15+
16+
return (
17+
<Link
18+
href={href}
19+
className={cn(
20+
'text-foreground hover:text-primary focus:text-primary -mb-px cursor-pointer pt-2 transition-colors',
21+
className,
22+
pathname === href && 'text-primary font-bold'
23+
)}
24+
>
25+
{children}
26+
</Link>
27+
);
28+
}
29+
30+
export function Tabs() {
31+
return (
32+
<div className="flex flex-row gap-4">
33+
<Tab href="/ui/base">Base UI</Tab>
34+
<Tab href="/ui/livekit">LiveKit UI</Tab>
35+
</div>
36+
);
37+
}

‎app/ui/base/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
SelectValue,
1010
} from '@/components/ui/select';
1111
import { Toggle } from '@/components/ui/toggle';
12-
import { Container } from '../container';
12+
import { Container } from '../_container';
1313

1414
const buttonVariants = [
1515
'default',

‎app/ui/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import { headers } from 'next/headers';
33
import { getAppConfig } from '@/lib/utils';
4-
import { RoomProvider } from './room-provider';
5-
import { Tabs } from './tabs';
4+
import { RoomProvider } from './_room-provider';
5+
import { Tabs } from './_tabs';
66

77
export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
88
const hdrs = await headers();

‎app/ui/livekit/page.tsx‎

Lines changed: 159 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,126 @@
11
import { Track } from 'livekit-client';
2+
import { type ReceivedChatMessage } from '@livekit/components-react';
3+
import { ChatTranscript } from '@/components/app/chat-transcript';
4+
import { PreConnectMessage } from '@/components/app/preconnect-message';
5+
import { ThemeToggle } from '@/components/app/theme-toggle';
26
import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
7+
import { AlertToast } from '@/components/livekit/alert-toast';
8+
import { ChatEntry } from '@/components/livekit/chat-entry';
9+
import { ShimmerMessage } from '@/components/livekit/shimmer-message';
310
import { TrackDeviceSelect } from '@/components/livekit/track-device-select';
11+
import { TrackSelector } from '@/components/livekit/track-selector';
412
import { TrackToggle } from '@/components/livekit/track-toggle';
5-
import { Container } from '../container';
13+
import { Container } from '../_container';
614

715
export default function LiveKit() {
816
return (
917
<>
18+
{/* Agent control bar */}
19+
<Container>
20+
<div className="flex items-center justify-between">
21+
<h3 className="text-muted-foreground text-sm">A control bar component.</h3>
22+
</div>
23+
<div className="relative flex items-center justify-center">
24+
<AgentControlBar
25+
className="w-full"
26+
controls={{
27+
leave: true,
28+
chat: true,
29+
camera: true,
30+
microphone: true,
31+
screenShare: true,
32+
}}
33+
/>
34+
</div>
35+
</Container>
36+
{/* Alert toast */}
37+
<Container>
38+
<div className="flex items-center justify-between">
39+
<h3 className="text-muted-foreground text-sm">A alert toast component.</h3>
40+
</div>
41+
<div className="space-y-4">
42+
<AlertToast
43+
id="alert-toast"
44+
title="Alert toast"
45+
description="This is a alert toast description."
46+
/>
47+
</div>
48+
</Container>
49+
{/* Chat entry */}
50+
<Container>
51+
<div className="flex items-center justify-between">
52+
<h3 className="text-muted-foreground text-sm">A chat entry component.</h3>
53+
</div>
54+
<div className="space-y-4">
55+
<ChatEntry
56+
hideName
57+
entry={
58+
{
59+
id: '1',
60+
timestamp: Date.now(),
61+
message: 'Hello, how are you?',
62+
from: {
63+
identity: 'user',
64+
isLocal: true,
65+
name: 'User',
66+
audioTrackPublications: new Map(),
67+
videoTrackPublications: new Map(),
68+
trackPublications: new Map(),
69+
audioLevel: 0,
70+
},
71+
} as ReceivedChatMessage
72+
}
73+
/>
74+
<ChatEntry
75+
hideName
76+
entry={
77+
{
78+
id: '1',
79+
timestamp: Date.now(),
80+
message: 'I am good, how about you?',
81+
from: {
82+
identity: 'agent',
83+
isLocal: false,
84+
name: 'Agent',
85+
audioTrackPublications: new Map(),
86+
videoTrackPublications: new Map(),
87+
trackPublications: new Map(),
88+
audioLevel: 0,
89+
},
90+
} as ReceivedChatMessage
91+
}
92+
/>
93+
</div>
94+
</Container>
95+
{/* Shimmer message */}
96+
<Container>
97+
<div className="flex items-center justify-between">
98+
<h3 className="text-muted-foreground text-sm">A shimmer message component.</h3>
99+
</div>
100+
<div className="space-y-4 text-center">
101+
<ShimmerMessage>This is a shimmer message</ShimmerMessage>
102+
</div>
103+
</Container>
104+
{/* Preconnect message */}
105+
<Container>
106+
<div className="flex items-center justify-between">
107+
<h3 className="text-muted-foreground text-sm">A preconnect message component.</h3>
108+
</div>
109+
<div className="space-y-4">
110+
<PreConnectMessage />
111+
</div>
112+
</Container>
113+
{/* Theme toggle */}
114+
<Container>
115+
<div className="flex items-center justify-between">
116+
<h3 className="text-muted-foreground text-sm">A theme toggle component.</h3>
117+
</div>
118+
<div className="flex justify-center space-y-4">
119+
<div>
120+
<ThemeToggle />
121+
</div>
122+
</div>
123+
</Container>
10124
{/* Device select */}
11125
<Container>
12126
<div className="flex items-center justify-between">
@@ -23,7 +137,6 @@ export default function LiveKit() {
23137
</div>
24138
</div>
25139
</Container>
26-
27140
{/* Track toggle */}
28141
<Container>
29142
<div className="flex items-center justify-between">
@@ -44,22 +157,53 @@ export default function LiveKit() {
44157
</div>
45158
</div>
46159
</Container>
47-
48-
{/* Agent control bar */}
160+
{/* Track selector */}
49161
<Container>
50162
<div className="flex items-center justify-between">
51-
<h3 className="text-muted-foreground text-sm">A control bar component.</h3>
163+
<h3 className="text-muted-foreground text-sm">A track selector component.</h3>
52164
</div>
53-
<div className="relative flex items-center justify-center">
54-
<AgentControlBar
55-
className="w-full"
56-
controls={{
57-
leave: true,
58-
chat: true,
59-
camera: true,
60-
microphone: true,
61-
screenShare: true,
62-
}}
165+
<div className="space-y-4">
166+
<TrackSelector kind="videoinput" source={Track.Source.Camera} />
167+
<TrackSelector kind="audioinput" source={Track.Source.Microphone} />
168+
</div>
169+
</Container>
170+
{/* Transcript */}
171+
<Container>
172+
<div className="flex items-center justify-between">
173+
<h3 className="text-muted-foreground text-sm">A transcript component.</h3>
174+
</div>
175+
<div className="relative space-y-4">
176+
<ChatTranscript
177+
messages={[
178+
{
179+
id: '1',
180+
timestamp: Date.now(),
181+
message: 'Hello, how are you?',
182+
from: {
183+
identity: 'user',
184+
isLocal: true,
185+
name: 'User',
186+
audioTrackPublications: new Map(),
187+
videoTrackPublications: new Map(),
188+
trackPublications: new Map(),
189+
audioLevel: 0,
190+
},
191+
} as ReceivedChatMessage,
192+
{
193+
id: '2',
194+
timestamp: Date.now(),
195+
message: 'I am good, how about you?',
196+
from: {
197+
identity: 'agent',
198+
isLocal: false,
199+
name: 'Agent',
200+
audioTrackPublications: new Map(),
201+
videoTrackPublications: new Map(),
202+
trackPublications: new Map(),
203+
audioLevel: 0,
204+
},
205+
} as ReceivedChatMessage,
206+
]}
63207
/>
64208
</div>
65209
</Container>

‎app/ui/tabs.tsx‎

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

0 commit comments

Comments
 (0)