@livekit/components-js-docs 0.1.52 → 0.1.54
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/core/computemenuposition.md +3 -5
- package/generated-docs/core/createdataobserver.md +1 -1
- package/generated-docs/core/datatopic.md +1 -2
- package/generated-docs/core/index.md +4 -1
- package/generated-docs/core/{legacyreceivedchatmessage.ignore.md → legacychatmessage.ignorelegacy.md} +3 -3
- package/generated-docs/core/legacychatmessage.md +3 -3
- package/generated-docs/core/legacydatatopic.md +22 -0
- package/generated-docs/core/legacyreceivedchatmessage.ignorelegacy.md +13 -0
- package/generated-docs/core/legacyreceivedchatmessage.md +3 -3
- package/generated-docs/core/setupchat.md +1 -10
- package/generated-docs/core/setupchatmessagehandler.md +2 -1
- package/generated-docs/core/setupdatamessagehandler.md +1 -1
- package/generated-docs/core/setuptextstream.md +16 -0
- package/generated-docs/core/textstreamdata.md +24 -0
- package/generated-docs/core/textstreamdata.participantinfo.md +15 -0
- package/generated-docs/{react/receivedchatmessage.from.md → core/textstreamdata.streaminfo.md} +3 -3
- package/generated-docs/core/{legacychatmessage.ignore.md → textstreamdata.text.md} +3 -3
- package/generated-docs/react/audiotrackprops.md +6 -6
- package/generated-docs/react/audiovisualizerprops.md +3 -3
- package/generated-docs/react/barvisualizerprops.md +7 -7
- package/generated-docs/react/carousellayoutprops.md +5 -5
- package/generated-docs/react/chatentryprops.md +6 -6
- package/generated-docs/react/component/barvisualizer.md +30 -0
- package/generated-docs/react/component/chat.md +16 -4
- package/generated-docs/react/focuslayoutprops.md +4 -4
- package/generated-docs/react/focustoggleprops.md +3 -3
- package/generated-docs/react/gridlayoutprops.md +4 -4
- package/generated-docs/react/hook/usechat.md +29 -8
- package/generated-docs/react/hook/usemediadeviceselect.md +1 -1
- package/generated-docs/react/hook/usetextstream.md +46 -0
- package/generated-docs/react/hook/usetrackbyname.md +1 -1
- package/generated-docs/react/hook/usetracktoggle.md +3 -1
- package/generated-docs/react/index.md +78 -89
- package/generated-docs/react/layoutcontextproviderprops.md +5 -5
- package/generated-docs/react/meta-data.json +1 -1
- package/generated-docs/react/participanttileprops.md +5 -5
- package/generated-docs/react/prejoinprops.md +13 -13
- package/generated-docs/react/trackloopprops.md +4 -4
- package/generated-docs/react/trackmutedindicatorprops.md +4 -4
- package/generated-docs/react/usefocustoggleprops.md +4 -4
- package/generated-docs/react/usekrispnoisefilteroptions.md +3 -3
- package/generated-docs/react/useparticipanttileprops.md +6 -6
- package/generated-docs/react/usepersistentuserchoicesoptions.md +5 -5
- package/generated-docs/react/usetrackshookreturntype.md +0 -2
- package/generated-docs/react/usevisualstableupdateoptions.md +3 -3
- package/generated-docs/react/videoconferenceprops.md +2 -2
- package/generated-docs/react/videotrackprops.md +6 -6
- package/generated-docs/react/voiceassistant.md +7 -7
- package/package.json +2 -2
- package/generated-docs/react/gridlayoutdefinition.md +0 -22
- package/generated-docs/react/localuserchoices.md +0 -24
- package/generated-docs/react/messagedecoder.md +0 -22
- package/generated-docs/react/messageencoder.md +0 -22
- package/generated-docs/react/participantidentifier.md +0 -28
- package/generated-docs/react/pinstate.md +0 -18
- package/generated-docs/react/receivedchatmessage.md +0 -24
- package/generated-docs/react/setlogextension.md +0 -21
- package/generated-docs/react/setloglevel.md +0 -18
- package/generated-docs/react/trackreference.md +0 -20
- package/generated-docs/react/trackreferenceorplaceholder.md +0 -18
- package/generated-docs/react/widgetstate.md +0 -20
|
@@ -16,7 +16,7 @@ export declare function createDataObserver(
|
|
|
16
16
|
room: Room
|
|
17
17
|
): Observable<
|
|
18
18
|
[
|
|
19
|
-
payload: Uint8Array
|
|
19
|
+
payload: Uint8Array<ArrayBufferLike>,
|
|
20
20
|
participant?: import("livekit-client").RemoteParticipant | undefined,
|
|
21
21
|
kind?: import("livekit-client").DataPacket_Kind | undefined,
|
|
22
22
|
topic?: string | undefined
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
| [BaseDataMessage](./core/basedatamessage.md) | |
|
|
22
22
|
| [CaptureOptionsBySource](./core/captureoptionsbysource.md) | |
|
|
23
23
|
| [ChatOptions](./core/chatoptions.md) | |
|
|
24
|
-
| [computeMenuPosition(button, menu)](./core/computemenuposition.md)
|
|
24
|
+
| [computeMenuPosition(button, menu, onUpdate)](./core/computemenuposition.md) | |
|
|
25
25
|
| [connectedParticipantObserver(room, identity, options)](./core/connectedparticipantobserver.md) | |
|
|
26
26
|
| [ConnectedParticipantObserverOptions](./core/connectedparticipantobserveroptions.md) | |
|
|
27
27
|
| [connectedParticipantsObserver(room, options)](./core/connectedparticipantsobserver.md) | |
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
| [isTrackReferencePinned(trackReference, pinState)](./core/istrackreferencepinned.md) | Check if the <code>TrackReference</code> is pinned. |
|
|
60
60
|
| [isTrackReferencePlaceholder(trackReference)](./core/istrackreferenceplaceholder.md) | |
|
|
61
61
|
| [LegacyChatMessage](./core/legacychatmessage.md) | |
|
|
62
|
+
| [LegacyDataTopic](./core/legacydatatopic.md) | |
|
|
62
63
|
| [LegacyReceivedChatMessage](./core/legacyreceivedchatmessage.md) | |
|
|
63
64
|
| [loadUserChoices(defaults, preventLoad)](./core/loaduserchoices.md) | Reads the user choices from local storage, or returns the default settings if none are found. |
|
|
64
65
|
| [LocalUserChoices](./core/localuserchoices.md) | Represents the user's choices for video and audio input devices, as well as their username. |
|
|
@@ -121,11 +122,13 @@
|
|
|
121
122
|
| [setupParticipantTile()](./core/setupparticipanttile.md) | |
|
|
122
123
|
| [setupStartAudio()](./core/setupstartaudio.md) | |
|
|
123
124
|
| [setupStartVideo()](./core/setupstartvideo.md) | |
|
|
125
|
+
| [setupTextStream(room, topic)](./core/setuptextstream.md) | |
|
|
124
126
|
| [setupTrackMutedIndicator(trackRef)](./core/setuptrackmutedindicator.md) | |
|
|
125
127
|
| [sortParticipants(participants)](./core/sortparticipants.md) | Default sort for participants, it'll order participants by: 1. local participant 2. dominant speaker (speaker with the loudest audio level) 3. other speakers that are recently active 4. participants with video on 5. by joinedAt |
|
|
126
128
|
| [sortTrackReferences(tracks)](./core/sorttrackreferences.md) | Default sort for <code>TrackReferenceOrPlaceholder</code>, it'll order participants by: 1. local camera track (publication.isLocal) 2. remote screen_share track 3. local screen_share track 4. remote dominant speaker camera track (sorted by speaker with the loudest audio level) 5. other remote speakers that are recently active 6. remote unmuted camera tracks 7. remote tracks sorted by joinedAt |
|
|
127
129
|
| [SourcesArray](./core/sourcesarray.md) | |
|
|
128
130
|
| [supportsScreenSharing()](./core/supportsscreensharing.md) | Returns <code>true</code> if the browser supports screen sharing. |
|
|
131
|
+
| [TextStreamData](./core/textstreamdata.md) | |
|
|
129
132
|
| [ToggleSource](./core/togglesource.md) | |
|
|
130
133
|
| [tokenize(input, grammar)](./core/tokenize.md) | |
|
|
131
134
|
| [TokenizeGrammar](./core/tokenizegrammar.md) | |
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
{ "title": "
|
|
2
|
+
{ "title": "LegacyChatMessage.ignoreLegacy property" }
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# LegacyChatMessage.ignoreLegacy property
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
ignoreLegacy?: boolean;
|
|
13
13
|
```
|
|
@@ -19,6 +19,6 @@ export interface LegacyChatMessage extends ChatMessage
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property
|
|
23
|
-
|
|
|
24
|
-
| [
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| --------------------------------------------------------- | ------- | ------------ |
|
|
24
|
+
| [ignoreLegacy?](./core/legacychatmessage.ignorelegacy.md) | boolean | _(Optional)_ |
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "LegacyDataTopic",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/observables/dataChannel.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# LegacyDataTopic
|
|
11
|
+
|
|
12
|
+
{% callout type="caution" variation="normal" %}
|
|
13
|
+
|
|
14
|
+
{% /callout %}
|
|
15
|
+
|
|
16
|
+
**Signature:**
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
LegacyDataTopic: {
|
|
20
|
+
readonly CHAT: "lk-chat-topic";
|
|
21
|
+
}
|
|
22
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "LegacyReceivedChatMessage.ignoreLegacy property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# LegacyReceivedChatMessage.ignoreLegacy property
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
ignoreLegacy?: boolean;
|
|
13
|
+
```
|
|
@@ -19,6 +19,6 @@ export interface LegacyReceivedChatMessage extends ReceivedChatMessage
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property
|
|
23
|
-
|
|
|
24
|
-
| [
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| ----------------------------------------------------------------- | ------- | ------------ |
|
|
24
|
+
| [ignoreLegacy?](./core/legacyreceivedchatmessage.ignorelegacy.md) | boolean | _(Optional)_ |
|
|
@@ -18,15 +18,6 @@ export declare function setupChat(
|
|
|
18
18
|
): {
|
|
19
19
|
messageObservable: import("rxjs").Observable<ReceivedChatMessage[]>;
|
|
20
20
|
isSendingObservable: BehaviorSubject<boolean>;
|
|
21
|
-
send: (message: string) => Promise<
|
|
22
|
-
update: (
|
|
23
|
-
message: string,
|
|
24
|
-
originalMessageOrId: string | ChatMessage
|
|
25
|
-
) => Promise<{
|
|
26
|
-
readonly message: string;
|
|
27
|
-
readonly editTimestamp: number;
|
|
28
|
-
readonly id: string;
|
|
29
|
-
readonly timestamp: number;
|
|
30
|
-
}>;
|
|
21
|
+
send: (message: string, options?: SendTextOptions) => Promise<ReceivedChatMessage>;
|
|
31
22
|
};
|
|
32
23
|
```
|
|
@@ -19,7 +19,7 @@ export declare function setupChatMessageHandler(room: Room): {
|
|
|
19
19
|
participant?: LocalParticipant | import("livekit-client").RemoteParticipant | undefined
|
|
20
20
|
]
|
|
21
21
|
>;
|
|
22
|
-
send: (text: string) => Promise<
|
|
22
|
+
send: (text: string, options: SendTextOptions) => Promise<ReceivedChatMessage>;
|
|
23
23
|
edit: (
|
|
24
24
|
text: string,
|
|
25
25
|
originalMsg: ChatMessage
|
|
@@ -28,6 +28,7 @@ export declare function setupChatMessageHandler(room: Room): {
|
|
|
28
28
|
readonly editTimestamp: number;
|
|
29
29
|
readonly id: string;
|
|
30
30
|
readonly timestamp: number;
|
|
31
|
+
readonly attachedFiles?: Array<File>;
|
|
31
32
|
}>;
|
|
32
33
|
};
|
|
33
34
|
```
|
|
@@ -18,7 +18,7 @@ export declare function setupDataMessageHandler<T extends string>(
|
|
|
18
18
|
onMessage?: (msg: ReceivedDataMessage<T>) => void
|
|
19
19
|
): {
|
|
20
20
|
messageObservable: Observable<{
|
|
21
|
-
payload: Uint8Array
|
|
21
|
+
payload: Uint8Array<ArrayBufferLike>;
|
|
22
22
|
topic: T;
|
|
23
23
|
from: import("livekit-client").RemoteParticipant | undefined;
|
|
24
24
|
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "setupTextStream",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/components/textStream.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# setupTextStream
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export declare function setupTextStream(room: Room, topic: string): Observable<TextStreamData[]>;
|
|
16
|
+
```
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "TextStreamData interface",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/components/textStream.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# TextStreamData interface
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export interface TextStreamData
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
| Property | Type | Description |
|
|
21
|
+
| ----------------------------------------------------------- | --------------------- | ----------- |
|
|
22
|
+
| [participantInfo](./core/textstreamdata.participantinfo.md) | { identity: string; } | |
|
|
23
|
+
| [streamInfo](./core/textstreamdata.streaminfo.md) | TextStreamInfo | |
|
|
24
|
+
| [text](./core/textstreamdata.text.md) | string | |
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "TextStreamData.participantInfo property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# TextStreamData.participantInfo property
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
participantInfo: {
|
|
13
|
+
identity: string;
|
|
14
|
+
}
|
|
15
|
+
```
|
package/generated-docs/{react/receivedchatmessage.from.md → core/textstreamdata.streaminfo.md}
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
{ "title": "
|
|
2
|
+
{ "title": "TextStreamData.streamInfo property" }
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# TextStreamData.streamInfo property
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
streamInfo: TextStreamInfo;
|
|
13
13
|
```
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
{ "title": "
|
|
2
|
+
{ "title": "TextStreamData.text property" }
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# TextStreamData.text property
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
text: string;
|
|
13
13
|
```
|
|
@@ -19,9 +19,9 @@ export interface AudioTrackProps extends React.AudioHTMLAttributes<HTMLAudioElem
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property | Type
|
|
23
|
-
| -------------------------------------------------------------------------------------- |
|
|
24
|
-
| [muted?](./react/audiotrackprops.muted.md) | boolean
|
|
25
|
-
| [onSubscriptionStatusChanged?](./react/audiotrackprops.onsubscriptionstatuschanged.md) | (subscribed: boolean) => void
|
|
26
|
-
| [trackRef?](./react/audiotrackprops.trackref.md) |
|
|
27
|
-
| [volume?](./react/audiotrackprops.volume.md) | number
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| -------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
24
|
+
| [muted?](./react/audiotrackprops.muted.md) | boolean | _(Optional)_ Mutes the audio track if set to <code>true</code>. |
|
|
25
|
+
| [onSubscriptionStatusChanged?](./react/audiotrackprops.onsubscriptionstatuschanged.md) | (subscribed: boolean) => void | _(Optional)_ |
|
|
26
|
+
| [trackRef?](./react/audiotrackprops.trackref.md) | TrackReference | _(Optional)_ The track reference of the track from which the audio is to be rendered. |
|
|
27
|
+
| [volume?](./react/audiotrackprops.volume.md) | number | _(Optional)_ Sets the volume of the audio track. By default, the range is between <code>0.0</code> and <code>1.0</code>. |
|
|
@@ -25,6 +25,6 @@ export interface AudioVisualizerProps extends React.HTMLAttributes<SVGElement>
|
|
|
25
25
|
|
|
26
26
|
## Properties
|
|
27
27
|
|
|
28
|
-
| Property | Type
|
|
29
|
-
| ----------------------------------------------------- |
|
|
30
|
-
| [trackRef?](./react/audiovisualizerprops.trackref.md) |
|
|
28
|
+
| Property | Type | Description |
|
|
29
|
+
| ----------------------------------------------------- | -------------- | ------------ |
|
|
30
|
+
| [trackRef?](./react/audiovisualizerprops.trackref.md) | TrackReference | _(Optional)_ |
|
|
@@ -25,10 +25,10 @@ export interface BarVisualizerProps extends React.HTMLProps<HTMLDivElement>
|
|
|
25
25
|
|
|
26
26
|
## Properties
|
|
27
27
|
|
|
28
|
-
| Property | Type
|
|
29
|
-
| --------------------------------------------------- |
|
|
30
|
-
| [barCount?](./react/barvisualizerprops.barcount.md) | number
|
|
31
|
-
| [children?](./react/barvisualizerprops.children.md) | React.ReactNode
|
|
32
|
-
| [options?](./react/barvisualizerprops.options.md) | [BarVisualizerOptions](./react/barvisualizeroptions.md)
|
|
33
|
-
| [state?](./react/barvisualizerprops.state.md) | [AgentState](./react/agentstate.md)
|
|
34
|
-
| [trackRef?](./react/barvisualizerprops.trackref.md) |
|
|
28
|
+
| Property | Type | Description |
|
|
29
|
+
| --------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| [barCount?](./react/barvisualizerprops.barcount.md) | number | **_(BETA)_** _(Optional)_ Number of bars that show up in the visualizer |
|
|
31
|
+
| [children?](./react/barvisualizerprops.children.md) | React.ReactNode | **_(BETA)_** _(Optional)_ The template component to be used in the visualizer. |
|
|
32
|
+
| [options?](./react/barvisualizerprops.options.md) | [BarVisualizerOptions](./react/barvisualizeroptions.md) | **_(BETA)_** _(Optional)_ |
|
|
33
|
+
| [state?](./react/barvisualizerprops.state.md) | [AgentState](./react/agentstate.md) | **_(BETA)_** _(Optional)_ If set, the visualizer will transition between different voice assistant states |
|
|
34
|
+
| [trackRef?](./react/barvisualizerprops.trackref.md) | TrackReferenceOrPlaceholder | **_(BETA)_** _(Optional)_ |
|
|
@@ -19,8 +19,8 @@ export interface CarouselLayoutProps extends React.HTMLAttributes<HTMLMediaEleme
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property | Type
|
|
23
|
-
| ---------------------------------------------------------- |
|
|
24
|
-
| [children](./react/carousellayoutprops.children.md) | React.ReactNode
|
|
25
|
-
| [orientation?](./react/carousellayoutprops.orientation.md) | 'vertical' \| 'horizontal'
|
|
26
|
-
| [tracks](./react/carousellayoutprops.tracks.md) |
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| ---------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
+
| [children](./react/carousellayoutprops.children.md) | React.ReactNode | |
|
|
25
|
+
| [orientation?](./react/carousellayoutprops.orientation.md) | 'vertical' \| 'horizontal' | _(Optional)_ Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container. |
|
|
26
|
+
| [tracks](./react/carousellayoutprops.tracks.md) | TrackReferenceOrPlaceholder\[\] | |
|
|
@@ -21,9 +21,9 @@ export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement>
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| --------------------------------------------------------------- |
|
|
26
|
-
| [entry](./react/chatentryprops.entry.md) |
|
|
27
|
-
| [hideName?](./react/chatentryprops.hidename.md) | boolean
|
|
28
|
-
| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md) | boolean
|
|
29
|
-
| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md)
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| --------------------------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| [entry](./react/chatentryprops.entry.md) | ReceivedChatMessage | The chat massage object to display. |
|
|
27
|
+
| [hideName?](./react/chatentryprops.hidename.md) | boolean | _(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. |
|
|
28
|
+
| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md) | boolean | _(Optional)_ Hide message timestamp. |
|
|
29
|
+
| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ An optional formatter for the message body. |
|
|
@@ -29,9 +29,39 @@ For VoiceAssistant state transitions this component requires a voice assistant a
|
|
|
29
29
|
|
|
30
30
|
## Usage
|
|
31
31
|
|
|
32
|
+
### Example 1
|
|
33
|
+
|
|
32
34
|
```tsx
|
|
33
35
|
function SimpleVoiceAssistant() {
|
|
34
36
|
const { state, audioTrack } = useVoiceAssistant();
|
|
35
37
|
return <BarVisualizer state={state} trackRef={audioTrack} />;
|
|
36
38
|
}
|
|
37
39
|
```
|
|
40
|
+
|
|
41
|
+
### Styling the BarVisualizer using CSS classes
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
.lk-audio-bar {
|
|
45
|
+
// Styles for "idle" bars
|
|
46
|
+
}
|
|
47
|
+
.lk-audio-bar.lk-highlighted {
|
|
48
|
+
// Styles for "active" bars
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Styling the BarVisualizer using CSS custom properties
|
|
53
|
+
|
|
54
|
+
```css
|
|
55
|
+
--lk-fg // for the "active" colour, note that this defines the main foreground colour for the whole "theme"
|
|
56
|
+
--lk-va-bg // for "idle" colour
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Using a custom bar template for the BarVisualizer
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<BarVisualizer>
|
|
63
|
+
<div className="all the classes" />
|
|
64
|
+
</BarVisualizer>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
the highlighted children will get a data prop of data-lk-highlighted for them to switch between active and idle bars in their own template bar
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
# Chat
|
|
11
11
|
|
|
12
|
-
The Chat component
|
|
12
|
+
The Chat component provides ready-to-use chat functionality in a LiveKit room. Messages are distributed to all participants in the room in real-time.
|
|
13
13
|
|
|
14
14
|
## Import
|
|
15
15
|
|
|
@@ -17,14 +17,26 @@ The Chat component adds a basis chat functionality to the LiveKit room. The mess
|
|
|
17
17
|
import { Chat } from "@livekit/components-react";
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
+
## Remarks
|
|
21
|
+
|
|
22
|
+
- Only users who are in the room at the time of dispatch will receive messages - Message history is not persisted between sessions - Requires `@livekit/components-styles` to be imported for styling
|
|
23
|
+
|
|
20
24
|
## Usage
|
|
21
25
|
|
|
22
26
|
```tsx
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
import "@livekit/components-styles";
|
|
28
|
+
|
|
29
|
+
function Room() {
|
|
30
|
+
return (
|
|
31
|
+
<LiveKitRoom data-lk-theme="default">
|
|
32
|
+
<Chat />
|
|
33
|
+
</LiveKitRoom>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
26
36
|
```
|
|
27
37
|
|
|
38
|
+
For custom styling, refer to: https://docs.livekit.io/reference/components/react/concepts/style-components/
|
|
39
|
+
|
|
28
40
|
## Properties
|
|
29
41
|
|
|
30
42
|
{% parameter name="messageFormatter" type="MessageFormatter" optional=true %}
|
|
@@ -19,7 +19,7 @@ export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement>
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property | Type
|
|
23
|
-
| --------------------------------------------------------------------- |
|
|
24
|
-
| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: ParticipantClickEvent) => void
|
|
25
|
-
| [trackRef?](./react/focuslayoutprops.trackref.md) |
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| --------------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------ |
|
|
24
|
+
| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: ParticipantClickEvent) => void | _(Optional)_ |
|
|
25
|
+
| [trackRef?](./react/focuslayoutprops.trackref.md) | TrackReferenceOrPlaceholder | _(Optional)_ The track to display in the focus layout. |
|
|
@@ -19,6 +19,6 @@ export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property | Type
|
|
23
|
-
| ------------------------------------------------- |
|
|
24
|
-
| [trackRef?](./react/focustoggleprops.trackref.md) |
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| ------------------------------------------------- | --------------------------- | ------------ |
|
|
24
|
+
| [trackRef?](./react/focustoggleprops.trackref.md) | TrackReferenceOrPlaceholder | _(Optional)_ |
|
|
@@ -19,7 +19,7 @@ export interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement>, P
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
-
| Property | Type
|
|
23
|
-
| ----------------------------------------------- |
|
|
24
|
-
| [children](./react/gridlayoutprops.children.md) | React.ReactNode
|
|
25
|
-
| [tracks](./react/gridlayoutprops.tracks.md) |
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| ----------------------------------------------- | ------------------------------- | ----------- |
|
|
24
|
+
| [children](./react/gridlayoutprops.children.md) | React.ReactNode | |
|
|
25
|
+
| [tracks](./react/gridlayoutprops.tracks.md) | TrackReferenceOrPlaceholder\[\] | |
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
# useChat
|
|
11
11
|
|
|
12
|
-
The `useChat` hook provides chat functionality for a LiveKit room.
|
|
12
|
+
The `useChat` hook provides chat functionality for a LiveKit room.
|
|
13
13
|
|
|
14
14
|
## Import
|
|
15
15
|
|
|
@@ -17,17 +17,38 @@ The `useChat` hook provides chat functionality for a LiveKit room. It returns a
|
|
|
17
17
|
import { useChat } from "@livekit/components-react";
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
+
## Remarks
|
|
21
|
+
|
|
22
|
+
Message history is not persisted and will be lost if the component is refreshed. You may want to persist message history in the browser, a cache or a database.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
function ChatComponent() {
|
|
28
|
+
const { chatMessages, send, isSending } = useChat();
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
{chatMessages.map((msg) => (
|
|
33
|
+
<div key={msg.timestamp}>
|
|
34
|
+
{msg.from?.identity}: {msg.message}
|
|
35
|
+
</div>
|
|
36
|
+
))}
|
|
37
|
+
<button disabled={isSending} onClick={() => send("Hello!")}>
|
|
38
|
+
Send Message
|
|
39
|
+
</button>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
20
45
|
## Returns
|
|
21
46
|
|
|
47
|
+
An object containing: - `chatMessages` - Array of received chat messages - `send` - Function to send a new message - `isSending` - Boolean indicating if a message is currently being sent
|
|
48
|
+
|
|
22
49
|
```typescript
|
|
23
50
|
{
|
|
24
|
-
send: (message: string
|
|
25
|
-
update: (message: string, originalMessageOrId: string | import('livekit-client').ChatMessage) => Promise<{
|
|
26
|
-
readonly message: string;
|
|
27
|
-
readonly editTimestamp: number;
|
|
28
|
-
readonly id: string;
|
|
29
|
-
readonly timestamp: number;
|
|
30
|
-
}>;
|
|
51
|
+
send: (message: string, options?: import('livekit-client').SendTextOptions) => Promise<ReceivedChatMessage>;
|
|
31
52
|
chatMessages: ReceivedChatMessage[];
|
|
32
53
|
isSending: boolean;
|
|
33
54
|
}
|
|
@@ -53,6 +53,6 @@ this will call getUserMedia if the permissions are not yet given to enumerate th
|
|
|
53
53
|
devices: MediaDeviceInfo[];
|
|
54
54
|
className: string;
|
|
55
55
|
activeDeviceId: string;
|
|
56
|
-
setActiveMediaDevice: (id: string, options?: import('
|
|
56
|
+
setActiveMediaDevice: (id: string, options?: import('../../packages/core/dist/index.d.ts').SetMediaDeviceOptions) => Promise<void>;
|
|
57
57
|
}
|
|
58
58
|
```
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useTextStream",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useTextStream.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useTextStream
|
|
11
|
+
|
|
12
|
+
{% callout type="note" variation="normal" %}
|
|
13
|
+
|
|
14
|
+
This feature is under active development and may change based on developer feedback and real-world usage.
|
|
15
|
+
|
|
16
|
+
{% /callout %}
|
|
17
|
+
|
|
18
|
+
## Import
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { useTextStream } from "@livekit/components-react";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
const { textStreams } = useTextStream("my-topic");
|
|
28
|
+
return <div>{textStreams.map((textStream) => textStream.text)}</div>;
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Properties
|
|
32
|
+
|
|
33
|
+
{% parameter name="topic" type="string" optional=false %}
|
|
34
|
+
the topic to listen to
|
|
35
|
+
|
|
36
|
+
{% /parameter %}
|
|
37
|
+
|
|
38
|
+
## Returns
|
|
39
|
+
|
|
40
|
+
an array of TextStreamData that holds the text, participantInfo, and streamInfo
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
{
|
|
44
|
+
textStreams: TextStreamData[];
|
|
45
|
+
}
|
|
46
|
+
```
|