@livekit/components-js-docs 0.1.36 → 0.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generated-docs/react/{voiceassistantstate.md → agentstate.md} +5 -3
- package/generated-docs/react/allowmediaplaybackprops.label.md +13 -0
- package/generated-docs/react/allowmediaplaybackprops.md +26 -0
- package/generated-docs/react/barvisualizerprops.md +1 -1
- package/generated-docs/react/barvisualizerprops.state.md +1 -1
- package/generated-docs/react/component/startmediabutton.md +35 -0
- package/generated-docs/react/component/voiceassistantcontrolbar.md +10 -2
- package/generated-docs/react/hook/usevoiceassistant.md +11 -3
- package/generated-docs/react/index.md +42 -41
- package/generated-docs/react/meta-data.json +1 -1
- package/generated-docs/react/voiceassistant.agent.md +2 -0
- package/generated-docs/react/voiceassistant.agentattributes.md +2 -0
- package/generated-docs/react/voiceassistant.agenttranscriptions.md +2 -0
- package/generated-docs/react/voiceassistant.audiotrack.md +2 -0
- package/generated-docs/react/voiceassistant.md +9 -7
- package/generated-docs/react/voiceassistant.state.md +3 -1
- package/generated-docs/react/voiceassistantcontrolbarprops.md +5 -5
- package/generated-docs/react/voiceassistantcontrolbarprops.saveuserchoices.md +2 -0
- package/package.json +2 -2
- package/generated-docs/react/component/voiceassistantcontext.md +0 -18
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "
|
|
3
|
+
"title": "AgentState type",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useVoiceAssistant.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
#
|
|
10
|
+
# AgentState type
|
|
11
|
+
|
|
12
|
+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
11
13
|
|
|
12
14
|
**Signature:**
|
|
13
15
|
|
|
14
16
|
```typescript
|
|
15
|
-
export type
|
|
17
|
+
export type AgentState =
|
|
16
18
|
| "disconnected"
|
|
17
19
|
| "connecting"
|
|
18
20
|
| "initializing"
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "AllowMediaPlaybackProps.label property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# AllowMediaPlaybackProps.label property
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
label?: string;
|
|
13
|
+
```
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "AllowMediaPlaybackProps interface",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/StartMediaButton.tsx"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# AllowMediaPlaybackProps interface
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export interface AllowMediaPlaybackProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
**Extends:** React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
19
|
+
|
|
20
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
21
|
+
|
|
22
|
+
## Properties
|
|
23
|
+
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| -------------------------------------------------- | ------ | ------------ |
|
|
26
|
+
| [label?](./react/allowmediaplaybackprops.label.md) | string | _(Optional)_ |
|
|
@@ -28,5 +28,5 @@ export interface BarVisualizerProps extends React.HTMLProps<HTMLDivElement>
|
|
|
28
28
|
| [barCount?](./react/barvisualizerprops.barcount.md) | number | **_(BETA)_** _(Optional)_ Number of bars that show up in the visualizer |
|
|
29
29
|
| [children?](./react/barvisualizerprops.children.md) | React.ReactNode | **_(BETA)_** _(Optional)_ The template component to be used in the visualizer. |
|
|
30
30
|
| [options?](./react/barvisualizerprops.options.md) | [BarVisualizerOptions](./react/barvisualizeroptions.md) | **_(BETA)_** _(Optional)_ |
|
|
31
|
-
| [state?](./react/barvisualizerprops.state.md) | [
|
|
31
|
+
| [state?](./react/barvisualizerprops.state.md) | [AgentState](./react/agentstate.md) | **_(BETA)_** _(Optional)_ If set, the visualizer will transition between different voice assistant states |
|
|
32
32
|
| [trackRef?](./react/barvisualizerprops.trackref.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md) | **_(BETA)_** _(Optional)_ |
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "StartMediaButton",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/StartMediaButton.tsx"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# StartMediaButton
|
|
11
|
+
|
|
12
|
+
The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies. To start media playback, the user must perform a user-initiated event such as clicking this button. As soon as media playback starts, the button hides itself again.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { StartMediaButton } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<LiveKitRoom>
|
|
24
|
+
<StartMediaButton label="Click to allow media playback" />
|
|
25
|
+
</LiveKitRoom>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
29
|
+
|
|
30
|
+
## Properties
|
|
31
|
+
|
|
32
|
+
{% parameter name="label" type="string" optional=true %}
|
|
33
|
+
_(Optional)_
|
|
34
|
+
|
|
35
|
+
{% /parameter %}
|
|
@@ -17,7 +17,15 @@
|
|
|
17
17
|
import { VoiceAssistantControlBar } from "@livekit/components-react";
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<LiveKitRoom ... >
|
|
24
|
+
<VoiceAssistantControlBar />
|
|
25
|
+
</LiveKitRoom>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
21
29
|
|
|
22
30
|
## Properties
|
|
23
31
|
|
|
@@ -35,6 +43,6 @@ import { VoiceAssistantControlBar } from "@livekit/components-react";
|
|
|
35
43
|
{% /parameter %}
|
|
36
44
|
|
|
37
45
|
{% parameter name="saveUserChoices" type="boolean" optional=true %}
|
|
38
|
-
_(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
|
|
46
|
+
**_(BETA)_** _(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
|
|
39
47
|
|
|
40
48
|
{% /parameter %}
|
|
@@ -9,7 +9,9 @@
|
|
|
9
9
|
|
|
10
10
|
# useVoiceAssistant
|
|
11
11
|
|
|
12
|
-
This
|
|
12
|
+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
13
|
+
|
|
14
|
+
This hook looks for the first agent-participant in the room.
|
|
13
15
|
|
|
14
16
|
## Import
|
|
15
17
|
|
|
@@ -19,9 +21,15 @@ import { useVoiceAssistant } from "@livekit/components-react";
|
|
|
19
21
|
|
|
20
22
|
## Remarks
|
|
21
23
|
|
|
22
|
-
This hook requires
|
|
24
|
+
This hook requires an agent running with livekit-agents ><!-- -->= 0.8.11
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
const { state, audioTrack, agentTranscriptions, agentAttributes } = useVoiceAssistant();
|
|
30
|
+
```
|
|
23
31
|
|
|
24
|
-
{% partial file="p_usage.md" variables={exampleCount:
|
|
32
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
25
33
|
|
|
26
34
|
## Returns
|
|
27
35
|
|
|
@@ -8,44 +8,44 @@
|
|
|
8
8
|
|
|
9
9
|
## Components
|
|
10
10
|
|
|
11
|
-
| Component | Description
|
|
12
|
-
| ---------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
-
| [AudioTrack(props)](./react/component/audiotrack.md) | The AudioTrack component is responsible for rendering participant audio tracks. This component must have access to the participant's context, or alternatively pass it a <code>Participant</code> as a property.
|
|
14
|
-
| [AudioVisualizer(props)](./react/component/audiovisualizer.md) | The AudioVisualizer component is used to visualize the audio volume of a given audio track.
|
|
15
|
-
| [BarVisualizer](./react/component/barvisualizer.md) | **_(BETA)_** Visualizes audio signals from a TrackReference as bars. If the <code>state</code> prop is set, it automatically transitions between VoiceAssistant states.
|
|
16
|
-
| [CarouselLayout({ tracks, orientation, ...props })](./react/component/carousellayout.md) | The <code>CarouselLayout</code> component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest.
|
|
17
|
-
| [ChatEntry(props)](./react/component/chatentry.md) | The <code>ChatEntry</code> component holds and displays one chat message.
|
|
18
|
-
| [ChatToggle(props)](./react/component/chattoggle.md) | The <code>ChatToggle</code> component is a button that toggles the visibility of the <code>Chat</code> component.
|
|
19
|
-
| [ClearPinButton(props)](./react/component/clearpinbutton.md) | The <code>ClearPinButton</code> is a basic html button with the added ability to signal the <code>LayoutContext</code> that it should display the grid view again.
|
|
20
|
-
| [ConnectionQualityIndicator(props)](./react/component/connectionqualityindicator.md) | The <code>ConnectionQualityIndicator</code> shows the individual connection quality of a participant.
|
|
21
|
-
| [ConnectionState(props)](./react/component/connectionstate.md) | The <code>ConnectionState</code> component displays the connection status of the room as strings (<code>"connected" | "connecting" | "disconnected" | "reconnecting"</code>).
|
|
22
|
-
| [ConnectionStateToast(props)](./react/component/connectionstatetoast.md) | The <code>ConnectionStateToast</code> component displays a toast notification indicating the current connection state of the room.
|
|
23
|
-
| [DisconnectButton(props)](./react/component/disconnectbutton.md) | The <code>DisconnectButton</code> is a basic html button with the added ability to disconnect from a LiveKit room. Normally this is the big red button that allows end users to leave the video or audio call.
|
|
24
|
-
| [FocusLayout({ trackRef, ...htmlProps })](./react/component/focuslayout.md) | The <code>FocusLayout</code> component is just a light wrapper around the <code>ParticipantTile</code> to display a single participant.
|
|
25
|
-
| [FocusLayoutContainer(props)](./react/component/focuslayoutcontainer.md) | The <code>FocusLayoutContainer</code> is a layout component that expects two children: A small side component: In a video conference, this is usually a carousel of participants who are not in focus. And a larger main component to display the focused participant. For example, with the <code>FocusLayout</code> component.
|
|
26
|
-
| [FocusToggle(props)](./react/component/focustoggle.md) | The <code>FocusToggle</code> puts the <code>ParticipantTile</code> in focus or removes it from focus.
|
|
27
|
-
| [GridLayout({ tracks, ...props })](./react/component/gridlayout.md) | The <code>GridLayout</code> component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display.
|
|
28
|
-
| [LayoutContext](./react/component/layoutcontext.md) |
|
|
29
|
-
| [LayoutContextProvider({ value, onPinChange, onWidgetChange, children, })](./react/component/layoutcontextprovider.md) |
|
|
30
|
-
| [LiveKitRoom(props)](./react/component/livekitroom.md) | The <code>LiveKitRoom</code> component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself.
|
|
31
|
-
| [MediaDeviceSelect(props)](./react/component/mediadeviceselect.md) | The <code>MediaDeviceSelect</code> list all media devices of one kind. Clicking on one of the listed devices make it the active media device.
|
|
32
|
-
| [ParticipantAudioTile(props)](./react/component/participantaudiotile.md) | The <code>ParticipantAudioTile</code> component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the <code>TileLoop</code> or independently if a participant is passed as a property.
|
|
33
|
-
| [ParticipantContext](./react/component/participantcontext.md) |
|
|
34
|
-
| [ParticipantContextIfNeeded(props)](./react/component/participantcontextifneeded.md) | The <code>ParticipantContextIfNeeded</code> component only creates a <code>ParticipantContext</code> if there is no <code>ParticipantContext</code> already.
|
|
35
|
-
| [ParticipantLoop({ participants, ...props })](./react/component/participantloop.md) | The <code>ParticipantLoop</code> component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations.
|
|
36
|
-
| [ParticipantName(props)](./react/component/participantname.md) | The <code>ParticipantName</code> component displays the name of the participant as a string within an HTML span element. If no participant name is undefined the participant identity string is displayed.
|
|
37
|
-
| [ParticipantTile(props)](./react/component/participanttile.md) | The <code>ParticipantTile</code> component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the <code>TrackLoop</code> component or by passing a track reference as property.
|
|
38
|
-
| [RoomAudioRenderer({ volume, muted })](./react/component/roomaudiorenderer.md) | The <code>RoomAudioRenderer</code> component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
|
|
39
|
-
| [RoomContext](./react/component/roomcontext.md) |
|
|
40
|
-
| [RoomName](./react/component/roomname.md) | The <code>RoomName</code> component renders the name of the connected LiveKit room inside a span tag.
|
|
41
|
-
| [StartAudio(props)](./react/component/startaudio.md) | The <code>StartAudio</code> component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies. To start audio playback, the user must perform a user-initiated event such as clicking this button. As soon as audio playback starts, the button hides itself again.
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
45
|
-
| [
|
|
46
|
-
| [
|
|
47
|
-
| [
|
|
48
|
-
| [
|
|
11
|
+
| Component | Description |
|
|
12
|
+
| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| [AudioTrack(props)](./react/component/audiotrack.md) | The AudioTrack component is responsible for rendering participant audio tracks. This component must have access to the participant's context, or alternatively pass it a <code>Participant</code> as a property. |
|
|
14
|
+
| [AudioVisualizer(props)](./react/component/audiovisualizer.md) | The AudioVisualizer component is used to visualize the audio volume of a given audio track. |
|
|
15
|
+
| [BarVisualizer](./react/component/barvisualizer.md) | **_(BETA)_** Visualizes audio signals from a TrackReference as bars. If the <code>state</code> prop is set, it automatically transitions between VoiceAssistant states. |
|
|
16
|
+
| [CarouselLayout({ tracks, orientation, ...props })](./react/component/carousellayout.md) | The <code>CarouselLayout</code> component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest. |
|
|
17
|
+
| [ChatEntry(props)](./react/component/chatentry.md) | The <code>ChatEntry</code> component holds and displays one chat message. |
|
|
18
|
+
| [ChatToggle(props)](./react/component/chattoggle.md) | The <code>ChatToggle</code> component is a button that toggles the visibility of the <code>Chat</code> component. |
|
|
19
|
+
| [ClearPinButton(props)](./react/component/clearpinbutton.md) | The <code>ClearPinButton</code> is a basic html button with the added ability to signal the <code>LayoutContext</code> that it should display the grid view again. |
|
|
20
|
+
| [ConnectionQualityIndicator(props)](./react/component/connectionqualityindicator.md) | The <code>ConnectionQualityIndicator</code> shows the individual connection quality of a participant. |
|
|
21
|
+
| [ConnectionState(props)](./react/component/connectionstate.md) | The <code>ConnectionState</code> component displays the connection status of the room as strings (<code>"connected" | "connecting" | "disconnected" | "reconnecting"</code>). |
|
|
22
|
+
| [ConnectionStateToast(props)](./react/component/connectionstatetoast.md) | The <code>ConnectionStateToast</code> component displays a toast notification indicating the current connection state of the room. |
|
|
23
|
+
| [DisconnectButton(props)](./react/component/disconnectbutton.md) | The <code>DisconnectButton</code> is a basic html button with the added ability to disconnect from a LiveKit room. Normally this is the big red button that allows end users to leave the video or audio call. |
|
|
24
|
+
| [FocusLayout({ trackRef, ...htmlProps })](./react/component/focuslayout.md) | The <code>FocusLayout</code> component is just a light wrapper around the <code>ParticipantTile</code> to display a single participant. |
|
|
25
|
+
| [FocusLayoutContainer(props)](./react/component/focuslayoutcontainer.md) | The <code>FocusLayoutContainer</code> is a layout component that expects two children: A small side component: In a video conference, this is usually a carousel of participants who are not in focus. And a larger main component to display the focused participant. For example, with the <code>FocusLayout</code> component. |
|
|
26
|
+
| [FocusToggle(props)](./react/component/focustoggle.md) | The <code>FocusToggle</code> puts the <code>ParticipantTile</code> in focus or removes it from focus. |
|
|
27
|
+
| [GridLayout({ tracks, ...props })](./react/component/gridlayout.md) | The <code>GridLayout</code> component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display. |
|
|
28
|
+
| [LayoutContext](./react/component/layoutcontext.md) | |
|
|
29
|
+
| [LayoutContextProvider({ value, onPinChange, onWidgetChange, children, })](./react/component/layoutcontextprovider.md) | |
|
|
30
|
+
| [LiveKitRoom(props)](./react/component/livekitroom.md) | The <code>LiveKitRoom</code> component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself. |
|
|
31
|
+
| [MediaDeviceSelect(props)](./react/component/mediadeviceselect.md) | The <code>MediaDeviceSelect</code> list all media devices of one kind. Clicking on one of the listed devices make it the active media device. |
|
|
32
|
+
| [ParticipantAudioTile(props)](./react/component/participantaudiotile.md) | The <code>ParticipantAudioTile</code> component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the <code>TileLoop</code> or independently if a participant is passed as a property. |
|
|
33
|
+
| [ParticipantContext](./react/component/participantcontext.md) | |
|
|
34
|
+
| [ParticipantContextIfNeeded(props)](./react/component/participantcontextifneeded.md) | The <code>ParticipantContextIfNeeded</code> component only creates a <code>ParticipantContext</code> if there is no <code>ParticipantContext</code> already. |
|
|
35
|
+
| [ParticipantLoop({ participants, ...props })](./react/component/participantloop.md) | The <code>ParticipantLoop</code> component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations. |
|
|
36
|
+
| [ParticipantName(props)](./react/component/participantname.md) | The <code>ParticipantName</code> component displays the name of the participant as a string within an HTML span element. If no participant name is undefined the participant identity string is displayed. |
|
|
37
|
+
| [ParticipantTile(props)](./react/component/participanttile.md) | The <code>ParticipantTile</code> component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the <code>TrackLoop</code> component or by passing a track reference as property. |
|
|
38
|
+
| [RoomAudioRenderer({ volume, muted })](./react/component/roomaudiorenderer.md) | The <code>RoomAudioRenderer</code> component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible. |
|
|
39
|
+
| [RoomContext](./react/component/roomcontext.md) | |
|
|
40
|
+
| [RoomName](./react/component/roomname.md) | The <code>RoomName</code> component renders the name of the connected LiveKit room inside a span tag. |
|
|
41
|
+
| [StartAudio(props)](./react/component/startaudio.md) | The <code>StartAudio</code> component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies. To start audio playback, the user must perform a user-initiated event such as clicking this button. As soon as audio playback starts, the button hides itself again. |
|
|
42
|
+
| [StartMediaButton(props)](./react/component/startmediabutton.md) | The <code>StartMediaButton</code> component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies. To start media playback, the user must perform a user-initiated event such as clicking this button. As soon as media playback starts, the button hides itself again. |
|
|
43
|
+
| [Toast(props)](./react/component/toast.md) | The <code>Toast</code> component is a rudimentary way to display a message to the user. This message should be short lived and not require user interaction. For example, displaying the current connection state like <code>ConnectionStateToast</code> does. |
|
|
44
|
+
| [TrackLoop({ tracks, ...props })](./react/component/trackloop.md) | The <code>TrackLoop</code> component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. <code>TrackLoop</code> creates a <code>TrackRefContext</code> for each track that you can use to e.g. render the track. |
|
|
45
|
+
| [TrackMutedIndicator(props)](./react/component/trackmutedindicator.md) | The <code>TrackMutedIndicator</code> shows whether the participant's camera or microphone is muted or not. By default, a muted/unmuted icon is displayed for a camera, microphone, and screen sharing track. |
|
|
46
|
+
| [TrackRefContext](./react/component/trackrefcontext.md) | This context provides a <code>TrackReferenceOrPlaceholder</code> to all child components. |
|
|
47
|
+
| [TrackToggle(props)](./react/component/tracktoggle.md) | With the <code>TrackToggle</code> component it is possible to mute and unmute your camera and microphone. The component uses an html button element under the hood so you can treat it like a button. |
|
|
48
|
+
| [VideoTrack(props)](./react/component/videotrack.md) | The <code>VideoTrack</code> component is responsible for rendering participant video tracks like <code>camera</code> and <code>screen_share</code>. This component must have access to the participant's context, or alternatively pass it a <code>Participant</code> as a property. |
|
|
49
49
|
|
|
50
50
|
## Prefabs
|
|
51
51
|
|
|
@@ -129,13 +129,15 @@
|
|
|
129
129
|
| [useTrackTranscription(trackRef, options)](./react/hook/usetracktranscription.md) | |
|
|
130
130
|
| [useTrackVolume(trackOrTrackReference, options)](./react/hook/usetrackvolume.md) | Hook for tracking the volume of an audio track using the Web Audio API. |
|
|
131
131
|
| [useVisualStableUpdate(trackReferences, maxItemsOnPage, options)](./react/hook/usevisualstableupdate.md) | The <code>useVisualStableUpdate</code> hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible. |
|
|
132
|
-
| [useVoiceAssistant()](./react/hook/usevoiceassistant.md) | This hook looks for the first agent-participant in the room.
|
|
132
|
+
| [useVoiceAssistant()](./react/hook/usevoiceassistant.md) | **_(BETA)_** This hook looks for the first agent-participant in the room. |
|
|
133
133
|
|
|
134
134
|
## Others
|
|
135
135
|
|
|
136
136
|
| Other | Description |
|
|
137
137
|
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
138
|
+
| [AgentState](./react/agentstate.md) | **_(BETA)_** |
|
|
138
139
|
| [AllowAudioPlaybackProps](./react/allowaudioplaybackprops.md) | |
|
|
140
|
+
| [AllowMediaPlaybackProps](./react/allowmediaplaybackprops.md) | |
|
|
139
141
|
| [AudioConferenceProps](./react/audioconferenceprops.md) | |
|
|
140
142
|
| [AudioTrackProps](./react/audiotrackprops.md) | |
|
|
141
143
|
| [AudioVisualizerProps](./react/audiovisualizerprops.md) | |
|
|
@@ -214,8 +216,7 @@
|
|
|
214
216
|
| [UseVisualStableUpdateOptions](./react/usevisualstableupdateoptions.md) | |
|
|
215
217
|
| [VideoConferenceProps](./react/videoconferenceprops.md) | |
|
|
216
218
|
| [VideoTrackProps](./react/videotrackprops.md) | |
|
|
217
|
-
| [VoiceAssistant](./react/voiceassistant.md) |
|
|
219
|
+
| [VoiceAssistant](./react/voiceassistant.md) | **_(BETA)_** |
|
|
218
220
|
| [VoiceAssistantControlBarControls](./react/voiceassistantcontrolbarcontrols.md) | **_(BETA)_** |
|
|
219
221
|
| [VoiceAssistantControlBarProps](./react/voiceassistantcontrolbarprops.md) | **_(BETA)_** |
|
|
220
|
-
| [VoiceAssistantState](./react/voiceassistantstate.md) | |
|
|
221
222
|
| [WidgetState](./react/widgetstate.md) | |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"audiotrack.md","title":"AudioTrack"},{"filename":"audiovisualizer.md","title":"AudioVisualizer"},{"filename":"barvisualizer.md","title":"BarVisualizer"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"chatentry.md","title":"ChatEntry"},{"filename":"chattoggle.md","title":"ChatToggle"},{"filename":"clearpinbutton.md","title":"ClearPinButton"},{"filename":"connectionqualityindicator.md","title":"ConnectionQualityIndicator"},{"filename":"connectionstate.md","title":"ConnectionState"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"disconnectbutton.md","title":"DisconnectButton"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"focustoggle.md","title":"FocusToggle"},{"filename":"gridlayout.md","title":"GridLayout"},{"filename":"layoutcontext.md","title":"LayoutContext"},{"filename":"layoutcontextprovider.md","title":"LayoutContextProvider"},{"filename":"livekitroom.md","title":"LiveKitRoom"},{"filename":"mediadevicemenu.md","title":"MediaDeviceMenu"},{"filename":"mediadeviceselect.md","title":"MediaDeviceSelect"},{"filename":"participantaudiotile.md","title":"ParticipantAudioTile"},{"filename":"participantcontext.md","title":"ParticipantContext"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"participantname.md","title":"ParticipantName"},{"filename":"participanttile.md","title":"ParticipantTile"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"roomcontext.md","title":"RoomContext"},{"filename":"roomname.md","title":"RoomName"},{"filename":"startaudio.md","title":"StartAudio"},{"filename":"
|
|
1
|
+
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"audiotrack.md","title":"AudioTrack"},{"filename":"audiovisualizer.md","title":"AudioVisualizer"},{"filename":"barvisualizer.md","title":"BarVisualizer"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"chatentry.md","title":"ChatEntry"},{"filename":"chattoggle.md","title":"ChatToggle"},{"filename":"clearpinbutton.md","title":"ClearPinButton"},{"filename":"connectionqualityindicator.md","title":"ConnectionQualityIndicator"},{"filename":"connectionstate.md","title":"ConnectionState"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"disconnectbutton.md","title":"DisconnectButton"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"focustoggle.md","title":"FocusToggle"},{"filename":"gridlayout.md","title":"GridLayout"},{"filename":"layoutcontext.md","title":"LayoutContext"},{"filename":"layoutcontextprovider.md","title":"LayoutContextProvider"},{"filename":"livekitroom.md","title":"LiveKitRoom"},{"filename":"mediadevicemenu.md","title":"MediaDeviceMenu"},{"filename":"mediadeviceselect.md","title":"MediaDeviceSelect"},{"filename":"participantaudiotile.md","title":"ParticipantAudioTile"},{"filename":"participantcontext.md","title":"ParticipantContext"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"participantname.md","title":"ParticipantName"},{"filename":"participanttile.md","title":"ParticipantTile"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"roomcontext.md","title":"RoomContext"},{"filename":"roomname.md","title":"RoomName"},{"filename":"startaudio.md","title":"StartAudio"},{"filename":"startmediabutton.md","title":"StartMediaButton"},{"filename":"toast.md","title":"Toast"},{"filename":"trackloop.md","title":"TrackLoop"},{"filename":"trackmutedindicator.md","title":"TrackMutedIndicator"},{"filename":"trackrefcontext.md","title":"TrackRefContext"},{"filename":"tracktoggle.md","title":"TrackToggle"},{"filename":"videoconference.md","title":"VideoConference"},{"filename":"videotrack.md","title":"VideoTrack"},{"filename":"voiceassistantcontrolbar.md","title":"VoiceAssistantControlBar"}],"hooks":[{"filename":"useaudioplayback.md","title":"useAudioPlayback"},{"filename":"useaudiowaveform.md","title":"useAudioWaveform"},{"filename":"usechat.md","title":"useChat"},{"filename":"usechattoggle.md","title":"useChatToggle"},{"filename":"useclearpinbutton.md","title":"useClearPinButton"},{"filename":"useconnectionqualityindicator.md","title":"useConnectionQualityIndicator"},{"filename":"useconnectionstate.md","title":"useConnectionState"},{"filename":"usecreatelayoutcontext.md","title":"useCreateLayoutContext"},{"filename":"usedatachannel.md","title":"useDataChannel"},{"filename":"usedatachannel_1.md","title":"useDataChannel"},{"filename":"usedisconnectbutton.md","title":"useDisconnectButton"},{"filename":"useensurecreatelayoutcontext.md","title":"useEnsureCreateLayoutContext"},{"filename":"useensurelayoutcontext.md","title":"useEnsureLayoutContext"},{"filename":"useensureparticipant.md","title":"useEnsureParticipant"},{"filename":"useensureroom.md","title":"useEnsureRoom"},{"filename":"useensuretrackref.md","title":"useEnsureTrackRef"},{"filename":"usefacingmode.md","title":"useFacingMode"},{"filename":"usefocustoggle.md","title":"useFocusToggle"},{"filename":"usegridlayout.md","title":"useGridLayout"},{"filename":"useisencrypted.md","title":"useIsEncrypted"},{"filename":"useismuted.md","title":"useIsMuted"},{"filename":"useisrecording.md","title":"useIsRecording"},{"filename":"useisspeaking.md","title":"useIsSpeaking"},{"filename":"uselayoutcontext.md","title":"useLayoutContext"},{"filename":"uselivekitroom.md","title":"useLiveKitRoom"},{"filename":"uselocalparticipant.md","title":"useLocalParticipant"},{"filename":"uselocalparticipantpermissions.md","title":"useLocalParticipantPermissions"},{"filename":"usemaybelayoutcontext.md","title":"useMaybeLayoutContext"},{"filename":"usemaybeparticipantcontext.md","title":"useMaybeParticipantContext"},{"filename":"usemayberoomcontext.md","title":"useMaybeRoomContext"},{"filename":"usemaybetrackrefcontext.md","title":"useMaybeTrackRefContext"},{"filename":"usemediadevices.md","title":"useMediaDevices"},{"filename":"usemediadeviceselect.md","title":"useMediaDeviceSelect"},{"filename":"usemultibandtrackvolume.md","title":"useMultibandTrackVolume"},{"filename":"usepagination.md","title":"usePagination"},{"filename":"useparticipantattribute.md","title":"useParticipantAttribute"},{"filename":"useparticipantattributes.md","title":"useParticipantAttributes"},{"filename":"useparticipantcontext.md","title":"useParticipantContext"},{"filename":"useparticipantinfo.md","title":"useParticipantInfo"},{"filename":"useparticipantpermissions.md","title":"useParticipantPermissions"},{"filename":"useparticipants.md","title":"useParticipants"},{"filename":"useparticipanttile.md","title":"useParticipantTile"},{"filename":"useparticipanttracks.md","title":"useParticipantTracks"},{"filename":"usepersistentuserchoices.md","title":"usePersistentUserChoices"},{"filename":"usepinnedtracks.md","title":"usePinnedTracks"},{"filename":"usepreviewdevice.md","title":"usePreviewDevice"},{"filename":"usepreviewtracks.md","title":"usePreviewTracks"},{"filename":"useremoteparticipant.md","title":"useRemoteParticipant"},{"filename":"useremoteparticipant_1.md","title":"useRemoteParticipant"},{"filename":"useremoteparticipants.md","title":"useRemoteParticipants"},{"filename":"useroomcontext.md","title":"useRoomContext"},{"filename":"useroominfo.md","title":"useRoomInfo"},{"filename":"usesortedparticipants.md","title":"useSortedParticipants"},{"filename":"usespeakingparticipants.md","title":"useSpeakingParticipants"},{"filename":"usestartaudio.md","title":"useStartAudio"},{"filename":"usestartvideo.md","title":"useStartVideo"},{"filename":"useswipe.md","title":"useSwipe"},{"filename":"usetoken.md","title":"useToken"},{"filename":"usetrackbyname.md","title":"useTrackByName"},{"filename":"usetrackmutedindicator.md","title":"useTrackMutedIndicator"},{"filename":"usetrackrefcontext.md","title":"useTrackRefContext"},{"filename":"usetracks.md","title":"useTracks"},{"filename":"usetracktoggle.md","title":"useTrackToggle"},{"filename":"usetracktranscription.md","title":"useTrackTranscription"},{"filename":"usetrackvolume.md","title":"useTrackVolume"},{"filename":"usevisualstableupdate.md","title":"useVisualStableUpdate"},{"filename":"usevoiceassistant.md","title":"useVoiceAssistant"}]}
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
# VoiceAssistant interface
|
|
11
11
|
|
|
12
|
+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
13
|
+
|
|
12
14
|
**Signature:**
|
|
13
15
|
|
|
14
16
|
```typescript
|
|
@@ -19,10 +21,10 @@ export interface VoiceAssistant
|
|
|
19
21
|
|
|
20
22
|
## Properties
|
|
21
23
|
|
|
22
|
-
| Property | Type | Description
|
|
23
|
-
| -------------------------------------------------------------------- | -------------------------------------------------------- |
|
|
24
|
-
| [agent](./react/voiceassistant.agent.md) | RemoteParticipant \| undefined |
|
|
25
|
-
| [agentAttributes](./react/voiceassistant.agentattributes.md) | RemoteParticipant\['attributes'\] \| undefined |
|
|
26
|
-
| [agentTranscriptions](./react/voiceassistant.agenttranscriptions.md) | ReceivedTranscriptionSegment\[\] |
|
|
27
|
-
| [audioTrack](./react/voiceassistant.audiotrack.md) | [TrackReference](./react/trackreference.md) \| undefined |
|
|
28
|
-
| [state](./react/voiceassistant.state.md) | [
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| -------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
|
|
26
|
+
| [agent](./react/voiceassistant.agent.md) | RemoteParticipant \| undefined | **_(BETA)_** |
|
|
27
|
+
| [agentAttributes](./react/voiceassistant.agentattributes.md) | RemoteParticipant\['attributes'\] \| undefined | **_(BETA)_** |
|
|
28
|
+
| [agentTranscriptions](./react/voiceassistant.agenttranscriptions.md) | ReceivedTranscriptionSegment\[\] | **_(BETA)_** |
|
|
29
|
+
| [audioTrack](./react/voiceassistant.audiotrack.md) | [TrackReference](./react/trackreference.md) \| undefined | **_(BETA)_** |
|
|
30
|
+
| [state](./react/voiceassistant.state.md) | [AgentState](./react/agentstate.md) | **_(BETA)_** |
|
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
# VoiceAssistant.state property
|
|
8
8
|
|
|
9
|
+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
10
|
+
|
|
9
11
|
**Signature:**
|
|
10
12
|
|
|
11
13
|
```typescript
|
|
12
|
-
state:
|
|
14
|
+
state: AgentState;
|
|
13
15
|
```
|
|
@@ -23,8 +23,8 @@ export interface VoiceAssistantControlBarProps extends React.HTMLAttributes<HTML
|
|
|
23
23
|
|
|
24
24
|
## Properties
|
|
25
25
|
|
|
26
|
-
| Property | Type | Description
|
|
27
|
-
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
|
|
28
|
-
| [controls?](./react/voiceassistantcontrolbarprops.controls.md) | [VoiceAssistantControlBarControls](./react/voiceassistantcontrolbarcontrols.md) | **_(BETA)_** _(Optional)_
|
|
29
|
-
| [onDeviceError?](./react/voiceassistantcontrolbarprops.ondeviceerror.md) | (error: { source: Track.Source; error: Error; }) => void | **_(BETA)_** _(Optional)_
|
|
30
|
-
| [saveUserChoices?](./react/voiceassistantcontrolbarprops.saveuserchoices.md) | boolean | _(Optional)_ If <code>true</code>, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room. |
|
|
26
|
+
| Property | Type | Description |
|
|
27
|
+
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| [controls?](./react/voiceassistantcontrolbarprops.controls.md) | [VoiceAssistantControlBarControls](./react/voiceassistantcontrolbarcontrols.md) | **_(BETA)_** _(Optional)_ |
|
|
29
|
+
| [onDeviceError?](./react/voiceassistantcontrolbarprops.ondeviceerror.md) | (error: { source: Track.Source; error: Error; }) => void | **_(BETA)_** _(Optional)_ |
|
|
30
|
+
| [saveUserChoices?](./react/voiceassistantcontrolbarprops.saveuserchoices.md) | boolean | **_(BETA)_** _(Optional)_ If <code>true</code>, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room. |
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
# VoiceAssistantControlBarProps.saveUserChoices property
|
|
8
8
|
|
|
9
|
+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
10
|
+
|
|
9
11
|
If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
|
|
10
12
|
|
|
11
13
|
**Signature:**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@livekit/components-js-docs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.38",
|
|
4
4
|
"description": "Automatically generated documentation pages for LiveKit Components JS. Intended to be consumed by the documentation page.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"directory": "/docs/beta-docs"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@livekit/components-react": "2.
|
|
11
|
+
"@livekit/components-react": "2.6.0"
|
|
12
12
|
},
|
|
13
13
|
"author": "",
|
|
14
14
|
"license": "Apache-2.0",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
{
|
|
3
|
-
"title": "VoiceAssistantContext",
|
|
4
|
-
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/voice-assistant-context.ts"
|
|
5
|
-
}
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
-
|
|
10
|
-
# VoiceAssistantContext
|
|
11
|
-
|
|
12
|
-
## Import
|
|
13
|
-
|
|
14
|
-
```typescript
|
|
15
|
-
import { VoiceAssistantContext } from "@livekit/components-react";
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|