Skip to content

Commit 4c562be

Browse files
theomonnomtheomonnom
committed
wip
1 parent 4930e5d commit 4c562be

File tree

10 files changed

+205
-237
lines changed

10 files changed

+205
-237
lines changed

‎livekit-rtc/jupyter-html/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"build": "tsc -b && vite build",
8+
"build": "tsc -b && vite build --outDir=../livekit/rtc/resources/jupyter-html",
99
"lint": "eslint .",
1010
"preview": "vite preview"
1111
},
@@ -30,4 +30,4 @@
3030
"vite": "^6.2.0",
3131
"vite-plugin-singlefile": "^2.2.0"
3232
}
33-
}
33+
}

‎livekit-rtc/jupyter-html/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎livekit-rtc/jupyter-html/src/App.css‎

Lines changed: 73 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,66 @@
1+
:root {
2+
--lk-fg: #111;
3+
--lk-fg-secondary: #333;
4+
--lk-fg-tertiary: #555;
5+
6+
--lk-bg: #fff;
7+
--lk-bg-secondary: #f5f5f5;
8+
--lk-bg-tertiary: #fafafa;
9+
10+
--lk-accent-fg: #fff;
11+
--lk-accent-bg: #1f8cf9;
12+
13+
--lk-danger-fg: #fff;
14+
--lk-danger: #f91f31;
15+
--lk-danger-text: #6d0311;
16+
--lk-danger-bg: #fecdd4;
17+
18+
--lk-success-fg: #fff;
19+
--lk-success: #1ff968;
20+
--lk-success-text: #036d26;
21+
--lk-success-bg: #cdfedd;
22+
23+
--lk-control-fg: var(--fg);
24+
--lk-control-bg: var(--bg-secondary);
25+
26+
--lk-connection-excellent: #06db4d;
27+
--lk-connection-good: #f9b11f;
28+
--lk-connection-poor: #f91f31;
29+
30+
31+
--lk-va-bar-gap: 8px;
32+
--lk-va-bar-width: 8px;
33+
}
34+
35+
36+
/* reset unwanted default styles */
37+
38+
.lk-disconnect-button {
39+
border: unset;
40+
color: unset;
41+
font-weight: unset;
42+
font-size: 0.8em;
43+
}
44+
45+
.lk-agent-control-bar {
46+
width: 100%;
47+
justify-content: space-between;
48+
}
49+
50+
@media screen and (max-width: 600px) {
51+
.lk-start-audio-button {
52+
position: unset;
53+
top: unset;
54+
left: unset;
55+
transform: unset;
56+
}
57+
}
58+
59+
.lk-start-audio-button {
60+
color: #000;
61+
background-color: #dadada;
62+
}
63+
164
.app-container {
265
max-width: 800px;
366
margin: 0 auto;
@@ -17,6 +80,7 @@
1780
flex-wrap: wrap;
1881
justify-content: space-between;
1982
align-items: center;
83+
height: 32px;
2084
border-bottom: 1px solid #eee;
2185
padding-bottom: 8px;
2286
width: 100%;
@@ -30,7 +94,7 @@
3094

3195
.header h2 {
3296
margin: 0;
33-
font-size: 1.2em;
97+
font-size: 1em;
3498
font-weight: normal;
3599
color: #444;
36100
}
@@ -43,7 +107,7 @@
43107

44108
.connection-state,
45109
.state-inactive {
46-
font-size: 0.9em;
110+
font-size: 0.85em;
47111
margin: 0;
48112
padding: 0;
49113
}
@@ -58,123 +122,14 @@
58122

59123
.controls {
60124
display: flex;
61-
flex-direction: column;
62-
gap: 15px;
63-
width: 100%;
64-
padding: 8px 0;
65-
}
66-
67-
.controls-row {
68-
display: flex;
69-
align-items: center;
70-
gap: 15px;
71-
width: 100%;
72-
}
73-
74-
.button-container {
75-
flex: 0 0 auto;
76-
}
77-
78-
.toggle-button {
79-
width: fit-content;
80-
padding: 6px 12px;
81-
background-color: #002CF2;
82-
border: none;
83-
border-radius: 3px;
84-
color: #fff;
85-
font-size: 0.9em;
86-
cursor: pointer;
87-
transition: all 0.2s ease;
88-
}
89-
90-
.toggle-button:hover {
91-
background-color: #0C3AFF;
92-
}
93-
94-
.visualizer h3 {
95-
margin: 4px 0;
96-
font-size: 0.9em;
97-
}
98-
99-
.states {
100-
display: flex;
101-
flex-direction: column;
102-
font-size: 0.9em;
103-
line-height: 1;
104-
}
105-
106-
.state-row {
107-
display: flex;
108-
align-items: baseline;
109-
gap: 6px;
110-
}
111-
112-
.state-label {
113-
min-width: 45px;
114-
text-align: right;
115-
color: #666;
116-
}
117-
118-
.error {
119-
text-align: left;
120-
font-size: 0.9em;
121-
padding: 8px;
122-
color: #666;
123-
margin: 10px 0;
125+
flex-direction: row;
126+
justify-content: space-between;
124127
}
125128

126-
.connection-buttons {
129+
.agent-visualizer {
127130
display: flex;
128-
gap: 10px;
129-
justify-content: center;
130-
margin: 20px 0;
131-
}
132-
133-
.connect-button {
134-
padding: 12px 24px;
135-
font-size: 1.1em;
136-
border: none;
137-
border-radius: 4px;
138-
cursor: pointer;
139-
transition: all 0.2s ease;
140-
font-weight: 600;
141-
text-transform: uppercase;
142-
}
143-
144-
.connect-button.connect {
145-
background-color: #002CF2;
146-
color: white;
147-
}
148-
149-
.connect-button.connect:hover {
150-
background-color: #0C3AFF;
151-
transform: translateY(-2px);
152-
box-shadow: 0 4px 8px rgba(0, 44, 242, 0.2);
153-
}
154-
155-
.connect-button.disconnect {
156-
background-color: #ff3b30;
157-
color: white;
158-
}
159-
160-
.connect-button.disconnect:hover {
161-
background-color: #ff514a;
162-
transform: translateY(-2px);
163-
box-shadow: 0 4px 8px rgba(255, 59, 48, 0.2);
164-
}
165-
166-
.connect-button:disabled {
167-
background-color: #cccccc;
168-
cursor: not-allowed;
169-
transform: none;
170-
box-shadow: none;
171-
}
172-
173-
/* LiveKit button styles */
174-
:root {
175-
--lk-button-background: #002CF2;
176-
--lk-button-background-hover: #0C3AFF;
177-
--lk-button-border-radius: 3px;
178-
--lk-disconnect-button-background: #ff3b30;
179-
--lk-disconnect-button-background-hover: #ff514a;
131+
flex-direction: row;
132+
width: 25%;
133+
margin-right: 32px;
134+
height: var(--lk-control-bar-height);
180135
}

‎livekit-rtc/jupyter-html/src/App.tsx‎

Lines changed: 28 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import React, { useEffect, useState } from 'react';
22
import {
33
LiveKitRoom,
4-
TrackToggle,
54
BarVisualizer,
65
useVoiceAssistant,
76
RoomAudioRenderer,
87
useConnectionState,
98
DisconnectButton,
9+
useStartAudio,
10+
VoiceAssistantControlBar,
1011
} from '@livekit/components-react';
11-
import { Track } from 'livekit-client';
1212
import '@livekit/components-styles';
1313
import './App.css';
14+
import type { SVGProps } from 'react';
15+
import { ConnectionState } from 'livekit-client';
1416

1517

1618
export async function fetchJoinInfo(): Promise<{ url: string; token: string }> {
@@ -31,30 +33,30 @@ export async function fetchJoinInfo(): Promise<{ url: string; token: string }> {
3133
}
3234

3335

34-
function CloseIcon() {
35-
return (
36-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
37-
<path
38-
d="M3.33398 3.33334L12.6673 12.6667M12.6673 3.33334L3.33398 12.6667"
39-
stroke="currentColor"
40-
stroke-width="2"
41-
stroke-linecap="square"
42-
/>
43-
</svg>
44-
);
45-
}
36+
const LeaveIcon = (props: SVGProps<SVGSVGElement>) => (
37+
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
38+
<path
39+
fill="currentColor"
40+
fillRule="evenodd"
41+
d="M2 2.75A2.75 2.75 0 0 1 4.75 0h6.5A2.75 2.75 0 0 1 14 2.75v10.5A2.75 2.75 0 0 1 11.25 16h-6.5A2.75 2.75 0 0 1 2 13.25v-.5a.75.75 0 0 1 1.5 0v.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25h-6.5c-.69 0-1.25.56-1.25 1.25v.5a.75.75 0 0 1-1.5 0v-.5Z"
42+
clipRule="evenodd"
43+
/>
44+
<path
45+
fill="currentColor"
46+
fillRule="evenodd"
47+
d="M8.78 7.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97H1.75a.75.75 0 0 1 0-1.5h4.69l-.97-.97a.75.75 0 0 1 1.06-1.06l2.25 2.25Z"
48+
clipRule="evenodd"
49+
/>
50+
</svg>
51+
);
4652

4753
const ConnectedContent: React.FC<{ onDisconnect: () => void }> = ({ onDisconnect }) => {
4854
const connectionState = useConnectionState();
4955
const { state: agentState, audioTrack: agentTrack } = useVoiceAssistant();
50-
51-
console.log(agentState);
52-
53-
56+
const { canPlayAudio } = useStartAudio({ props: {} }); // why do I need props..?
5457

5558
return (
5659
<div className="content">
57-
<RoomAudioRenderer />
5860
<header className="header">
5961
<div className="header-left">
6062
<h2>livekit-rtc</h2>
@@ -63,35 +65,20 @@ const ConnectedContent: React.FC<{ onDisconnect: () => void }> = ({ onDisconnect
6365
</span>
6466
</div>
6567
<div className="header-controls">
66-
<DisconnectButton onClick={onDisconnect}><CloseIcon />Disconnect</DisconnectButton>
68+
<DisconnectButton onClick={onDisconnect}><LeaveIcon />Disconnect</DisconnectButton>
6769
</div>
6870
</header>
6971
<div className="controls">
70-
<div className="controls-row">
71-
<TrackToggle
72-
source={Track.Source.Microphone}
73-
initialState={false}
74-
>
75-
Toggle Microphone
76-
</TrackToggle>
77-
78-
<div className="visualizer mic-visualizer" style={{ height: '40px' }}>
79-
{/* <BarVisualizer
80-
barCount={15}
81-
trackRef={localTrackRef}
82-
options={{ minHeight: 40, maxHeight: 40 }}
83-
/> */}
84-
</div>
85-
</div>
72+
<VoiceAssistantControlBar controls={{ microphone: true, leave: false }} />
8673

87-
<div className="visualizer agent-visualizer" style={{ height: '40px', width: '100%' }}>
74+
{canPlayAudio && connectionState == ConnectionState.Connected && <div className="agent-visualizer">
8875
<BarVisualizer
8976
state={agentState}
90-
barCount={8}
77+
barCount={15}
9178
trackRef={agentTrack}
92-
options={{ minHeight: 60, maxHeight: 60 }}
79+
options={{ minHeight: 30, maxHeight: 30 }}
9380
/>
94-
</div>
81+
</div>}
9582
</div>
9683
</div>
9784
);
@@ -135,6 +122,7 @@ const App = () => {
135122
onError={(err) => setError(err.message)}
136123
>
137124
<ConnectedContent onDisconnect={() => setIsConnected(false)} />
125+
<RoomAudioRenderer />
138126
</LiveKitRoom>
139127
);
140128
};

‎livekit-rtc/jupyter-html/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)