Skip to content

Commit 6e38943

Browse files
thomasyuill-livekitthomasyuill-livekit
authored
Revert "chore: UI code tidyup" (#289)
1 parent c7289ff commit 6e38943

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1936
-1842
lines changed

‎app-config.ts‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,4 @@
1-
export interface AppConfig {
2-
pageTitle: string;
3-
pageDescription: string;
4-
companyName: string;
5-
6-
supportsChatInput: boolean;
7-
supportsVideoInput: boolean;
8-
supportsScreenShare: boolean;
9-
isPreConnectBufferEnabled: boolean;
10-
11-
logo: string;
12-
startButtonText: string;
13-
accent?: string;
14-
logoDark?: string;
15-
accentDark?: string;
16-
17-
sandboxId?: string;
18-
agentName?: string;
19-
}
1+
import type { AppConfig } from './lib/types';
202

213
export const APP_CONFIG_DEFAULTS: AppConfig = {
224
companyName: 'LiveKit',
@@ -33,4 +15,6 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
3315
logoDark: '/lk-logo-dark.svg',
3416
accentDark: '#1fd5f9',
3517
startButtonText: 'Start call',
18+
19+
agentName: undefined,
3620
};

‎app/(app)/layout.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { headers } from 'next/headers';
22
import { getAppConfig } from '@/lib/utils';
33

4-
interface LayoutProps {
4+
interface AppLayoutProps {
55
children: React.ReactNode;
66
}
77

8-
export default async function Layout({ children }: LayoutProps) {
8+
export default async function AppLayout({ children }: AppLayoutProps) {
99
const hdrs = await headers();
1010
const { companyName, logo, logoDark } = await getAppConfig(hdrs);
1111

@@ -39,7 +39,6 @@ export default async function Layout({ children }: LayoutProps) {
3939
</a>
4040
</span>
4141
</header>
42-
4342
{children}
4443
</>
4544
);

‎app/(app)/opengraph-image.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default async function Image() {
165165
gap: 10,
166166
}}
167167
>
168-
{/* eslint-disable-next-line jsx-a11y/alt-text */}
168+
{/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
169169
<img src={wordmarkSrcBase64} width={wordmarkSize.width} height={wordmarkSize.height} />
170170
</div>
171171
{/* logo */}
@@ -179,7 +179,7 @@ export default async function Image() {
179179
gap: 10,
180180
}}
181181
>
182-
{/* eslint-disable-next-line jsx-a11y/alt-text */}
182+
{/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
183183
<img src={logoSrcBase64} width={logoSize.width} height={logoSize.height} />
184184
</div>
185185
{/* title */}

‎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/app';
2+
import { App } from '@/components/app';
33
import { getAppConfig } from '@/lib/utils';
44

55
export default async function Page() {

‎app/api/connection-details/route.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,6 @@ import { NextResponse } from 'next/server';
22
import { AccessToken, type AccessTokenOptions, type VideoGrant } from 'livekit-server-sdk';
33
import { RoomConfiguration } from '@livekit/protocol';
44

5-
type ConnectionDetails = {
6-
serverUrl: string;
7-
roomName: string;
8-
participantName: string;
9-
participantToken: string;
10-
};
11-
125
// NOTE: you are expected to define the following environment variables in `.env.local`:
136
const API_KEY = process.env.LIVEKIT_API_KEY;
147
const API_SECRET = process.env.LIVEKIT_API_SECRET;
@@ -17,6 +10,13 @@ const LIVEKIT_URL = process.env.LIVEKIT_URL;
1710
// don't cache the results
1811
export const revalidate = 0;
1912

13+
export type ConnectionDetails = {
14+
serverUrl: string;
15+
roomName: string;
16+
participantName: string;
17+
participantToken: string;
18+
};
19+
2020
export async function POST(req: Request) {
2121
try {
2222
if (LIVEKIT_URL === undefined) {

‎app/components/Container.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { cn } from '@/lib/utils';
2+
3+
interface ContainerProps {
4+
children: React.ReactNode;
5+
className?: string;
6+
}
7+
8+
export function Container({ children, className }: ContainerProps) {
9+
return (
10+
<div className={cn('relative space-y-4 rounded-lg border p-4', className)}>{children}</div>
11+
);
12+
}

‎app/components/Tabs.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client';
2+
3+
import Link from 'next/link';
4+
import { usePathname } from 'next/navigation';
5+
import { cn } from '@/lib/utils';
6+
7+
export function Tabs() {
8+
const pathname = usePathname();
9+
10+
return (
11+
<div className="flex flex-row justify-between border-b">
12+
<Link
13+
href="/components/base"
14+
className={cn(
15+
'text-fg0 -mb-px cursor-pointer px-4 pt-2 text-xl font-bold tracking-tight uppercase',
16+
pathname === '/components/base' && 'bg-background rounded-t-lg border-t border-r border-l'
17+
)}
18+
>
19+
Base components
20+
</Link>
21+
<Link
22+
href="/components/livekit"
23+
className={cn(
24+
'text-fg0 -mb-px cursor-pointer px-4 py-2 text-xl font-bold tracking-tight uppercase',
25+
pathname === '/components/livekit' &&
26+
'bg-background rounded-t-lg border-t border-r border-l'
27+
)}
28+
>
29+
LiveKit components
30+
</Link>
31+
</div>
32+
);
33+
}

‎app/components/base/page.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { PlusIcon } from '@phosphor-icons/react/dist/ssr';
2+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
3+
import { Button } from '@/components/ui/button';
4+
import {
5+
Select,
6+
SelectContent,
7+
SelectItem,
8+
SelectTrigger,
9+
SelectValue,
10+
} from '@/components/ui/select';
11+
import { Toggle } from '@/components/ui/toggle';
12+
import { Container } from '../Container';
13+
14+
const buttonVariants = ['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'] as const;
15+
const toggleVariants = ['default', 'outline'] as const;
16+
const alertVariants = ['default', 'destructive'] as const;
17+
18+
export default function Base() {
19+
return (
20+
<>
21+
{/* Button */}
22+
<Container>
23+
<h3 className="text-muted-foreground text-sm">A button component.</h3>
24+
<div className="space-y-2">
25+
{buttonVariants.map((variant) => (
26+
<div key={variant}>
27+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">{variant}</h4>
28+
<div className="grid w-full grid-cols-4 gap-2">
29+
<div>
30+
<Button variant={variant} size="sm">
31+
Size sm
32+
</Button>
33+
</div>
34+
<div>
35+
<Button variant={variant}>Size default</Button>
36+
</div>
37+
<div>
38+
<Button variant={variant} size="lg">
39+
Size lg
40+
</Button>
41+
</div>
42+
<div>
43+
<Button variant={variant} size="icon">
44+
<PlusIcon size={16} weight="bold" />
45+
</Button>
46+
</div>
47+
</div>
48+
</div>
49+
))}
50+
</div>
51+
</Container>
52+
53+
{/* Toggle */}
54+
<Container>
55+
<h3 className="text-muted-foreground text-sm">A toggle component.</h3>
56+
<div className="space-y-2">
57+
{toggleVariants.map((variant) => (
58+
<div key={variant}>
59+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">{variant}</h4>
60+
<div className="grid w-full grid-cols-3 gap-2">
61+
<div>
62+
<Toggle key={variant} variant={variant} size="sm">
63+
Size sm
64+
</Toggle>
65+
</div>
66+
<div>
67+
<Toggle key={variant} variant={variant}>
68+
Size default
69+
</Toggle>
70+
</div>
71+
<div>
72+
<Toggle key={variant} variant={variant} size="lg">
73+
Size lg
74+
</Toggle>
75+
</div>
76+
</div>
77+
</div>
78+
))}
79+
</div>
80+
</Container>
81+
82+
{/* Alert */}
83+
<Container>
84+
<h3 className="text-muted-foreground text-sm">An alert component.</h3>
85+
<div className="space-y-6">
86+
{alertVariants.map((variant) => (
87+
<div key={variant}>
88+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">{variant}</h4>
89+
<Alert key={variant} variant={variant}>
90+
<AlertTitle>Alert {variant} title</AlertTitle>
91+
<AlertDescription>This is a {variant} alert description.</AlertDescription>
92+
</Alert>
93+
</div>
94+
))}
95+
</div>
96+
</Container>
97+
98+
{/* Select */}
99+
<Container>
100+
<h3 className="text-muted-foreground text-sm">A select component.</h3>
101+
<div className="grid w-full grid-cols-2 gap-2">
102+
<div>
103+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size default</h4>
104+
<Select>
105+
<SelectTrigger>
106+
<SelectValue placeholder="Select a track" />
107+
</SelectTrigger>
108+
<SelectContent>
109+
<SelectItem value="1">Track 1</SelectItem>
110+
<SelectItem value="2">Track 2</SelectItem>
111+
<SelectItem value="3">Track 3</SelectItem>
112+
</SelectContent>
113+
</Select>
114+
</div>
115+
<div>
116+
<h3 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size sm</h3>
117+
<Select>
118+
<SelectTrigger size="sm">
119+
<SelectValue placeholder="Select a track" />
120+
</SelectTrigger>
121+
<SelectContent>
122+
<SelectItem value="1">Track 1</SelectItem>
123+
<SelectItem value="2">Track 2</SelectItem>
124+
<SelectItem value="3">Track 3</SelectItem>
125+
</SelectContent>
126+
</Select>
127+
</div>
128+
</div>
129+
</Container>
130+
</>
131+
);
132+
}

‎app/components/layout.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
import { headers } from 'next/headers';
3+
import { Tabs } from '@/app/components/Tabs';
4+
import { Provider } from '@/components/provider';
5+
import { cn, getAppConfig } from '@/lib/utils';
6+
7+
export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
8+
const hdrs = await headers();
9+
const appConfig = await getAppConfig(hdrs);
10+
return (
11+
<div className="mx-auto min-h-svh max-w-3xl space-y-8 px-4 py-8">
12+
<header className="flex flex-col gap-1">
13+
<h1 className="text-3xl font-bold tracking-tight">Quick Start UI overview</h1>
14+
<p className="text-muted-foreground">
15+
A quick start UI overview for the LiveKit Voice Assistant.
16+
</p>
17+
</header>
18+
<Tabs />
19+
<Provider appConfig={appConfig}>
20+
<main className="flex w-full flex-1 flex-col items-stretch gap-8">{children}</main>
21+
</Provider>
22+
</div>
23+
);
24+
}

‎app/components/livekit/page.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Track } from 'livekit-client';
2+
import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
3+
import { DeviceSelect } from '@/components/livekit/device-select';
4+
import { TrackToggle } from '@/components/livekit/track-toggle';
5+
import { Container } from '../Container';
6+
7+
export default function LiveKit() {
8+
return (
9+
<>
10+
{/* Device select */}
11+
<Container>
12+
<div className="flex items-center justify-between">
13+
<h3 className="text-muted-foreground text-sm">A device select component.</h3>
14+
</div>
15+
<div className="grid grid-cols-2 gap-4">
16+
<div>
17+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size default</h4>
18+
<DeviceSelect kind="audioinput" />
19+
</div>
20+
<div>
21+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size sm</h4>
22+
<DeviceSelect size="sm" kind="audioinput" />
23+
</div>
24+
</div>
25+
</Container>
26+
27+
{/* Track toggle */}
28+
<Container>
29+
<div className="flex items-center justify-between">
30+
<h3 className="text-muted-foreground text-sm">A track toggle component.</h3>
31+
</div>
32+
<div className="grid grid-cols-2 gap-4">
33+
<div>
34+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">
35+
Track.Source.Microphone
36+
</h4>
37+
<TrackToggle variant="outline" source={Track.Source.Microphone} />
38+
</div>
39+
<div>
40+
<h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">
41+
Track.Source.Camera
42+
</h4>
43+
<TrackToggle variant="outline" source={Track.Source.Camera} />
44+
</div>
45+
</div>
46+
</Container>
47+
48+
{/* Agent control bar */}
49+
<Container>
50+
<div className="flex items-center justify-between">
51+
<h3 className="text-muted-foreground text-sm">A control bar component.</h3>
52+
</div>
53+
<div className="relative flex items-center justify-center">
54+
<AgentControlBar
55+
className="w-full"
56+
capabilities={{
57+
supportsChatInput: true,
58+
supportsVideoInput: true,
59+
supportsScreenShare: true,
60+
}}
61+
/>
62+
</div>
63+
</Container>
64+
</>
65+
);
66+
}

0 commit comments

Comments
 (0)