@livekit/components-js-docs 0.0.0-20251021151641

package/generated-docs/react/chatentryprops.md

@@ -0,0 +1,29 @@
+---
+{
+  "title": "ChatEntryProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatEntryProps interface
+
+ChatEntry composes the HTML div element under the hood, so you can pass all its props. These are the props specific to the ChatEntry component:
+
+**Signature:**
+
+```typescript
+export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLLIElement&gt;
+
+## Properties
+
+| Property                                                        | Type                                            | Description                                                                                                    |
+| --------------------------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| [entry](./react/chatentryprops.entry.md)                        | ReceivedChatMessage                             | The chat massage object to display.                                                                            |
+| [hideName?](./react/chatentryprops.hidename.md)                 | boolean                                         | _(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. |
+| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md)       | boolean                                         | _(Optional)_ Hide message timestamp.                                                                           |
+| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ An optional formatter for the message body.                                                       |

package/generated-docs/react/chatentryprops.messageformatter.md

@@ -0,0 +1,15 @@
+---
+{ "title": "ChatEntryProps.messageFormatter property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatEntryProps.messageFormatter property
+
+An optional formatter for the message body.
+
+**Signature:**
+
+```typescript
+messageFormatter?: MessageFormatter;
+```

package/generated-docs/react/chatprops.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "ChatProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/Chat.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatProps interface
+
+**Signature:**
+
+```typescript
+export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>, ChatOptions
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;, ChatOptions
+
+## Properties
+
+| Property                                                   | Type                                            | Description  |
+| ---------------------------------------------------------- | ----------------------------------------------- | ------------ |
+| [messageFormatter?](./react/chatprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ |

package/generated-docs/react/chatprops.messageformatter.md

@@ -0,0 +1,13 @@
+---
+{ "title": "ChatProps.messageFormatter property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatProps.messageFormatter property
+
+**Signature:**
+
+```typescript
+messageFormatter?: MessageFormatter;
+```

package/generated-docs/react/chattoggleprops.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "ChatToggleProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ChatToggle.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatToggleProps interface
+
+**Signature:**
+
+```typescript
+export interface ChatToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;

package/generated-docs/react/clearpinbuttonprops.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "ClearPinButtonProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ClearPinButton.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ClearPinButtonProps interface
+
+**Signature:**
+
+```typescript
+export interface ClearPinButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;

package/generated-docs/react/component/audioconference.md

@@ -0,0 +1,30 @@
+---
+{
+  "title": "AudioConference",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/AudioConference.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# AudioConference
+
+This component is the default setup of a classic LiveKit audio conferencing app. It provides functionality like switching between participant grid view and focus view.
+
+## Import
+
+```typescript
+import { AudioConference } from "@livekit/components-react";
+```
+
+## Remarks
+
+The component is implemented with other LiveKit components like `FocusContextProvider`<!-- -->, `GridLayout`<!-- -->, `ControlBar`<!-- -->, `FocusLayoutContainer` and `FocusLayout`<!-- -->.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <AudioConference />
+<LiveKitRoom>
+```

package/generated-docs/react/component/audiotrack.md

@@ -0,0 +1,48 @@
+---
+{
+  "title": "AudioTrack",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioTrack.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# AudioTrack
+
+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 `Participant` as a property.
+
+## Import
+
+```typescript
+import { AudioTrack } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantTile>
+  <AudioTrack trackRef={trackRef} />
+</ParticipantTile>
+```
+
+## Properties
+
+{% parameter name="muted" type="boolean" optional=true %}
+_(Optional)_ Mutes the audio track if set to `true`<!-- -->.
+
+{% /parameter %}
+
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track from which the audio is to be rendered.
+
+{% /parameter %}
+
+{% parameter name="volume" type="number" optional=true %}
+_(Optional)_ Sets the volume of the audio track. By default, the range is between `0.0` and `1.0`<!-- -->.
+
+{% /parameter %}

package/generated-docs/react/component/audiovisualizer.md

@@ -0,0 +1,41 @@
+---
+{
+  "title": "AudioVisualizer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioVisualizer.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# AudioVisualizer
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated: Use BarVisualizer instead
+
+{% /callout %}
+
+The AudioVisualizer component is used to visualize the audio volume of a given audio track.
+
+## Import
+
+```typescript
+import { AudioVisualizer } from "@livekit/components-react";
+```
+
+## Remarks
+
+Requires a `TrackReferenceOrPlaceholder` to be provided either as a property or via the `TrackRefContext`<!-- -->.
+
+## Usage
+
+```tsx
+<AudioVisualizer />
+```
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/barvisualizer.md

@@ -0,0 +1,67 @@
+---
+{
+  "title": "BarVisualizer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/BarVisualizer.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# BarVisualizer
+
+{% callout type="note" variation="normal" %}
+
+This feature is under active development and may change based on developer feedback and real-world usage.
+
+{% /callout %}
+
+Visualizes audio signals from a TrackReference as bars. If the `state` prop is set, it automatically transitions between VoiceAssistant states.
+
+## Import
+
+```typescript
+import { BarVisualizer } from "@livekit/components-react";
+```
+
+## Remarks
+
+For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents &gt;<!-- -->= 0.9.0
+
+## Usage
+
+### Example 1
+
+```tsx
+function SimpleVoiceAssistant() {
+  const { state, audioTrack } = useVoiceAssistant();
+  return <BarVisualizer state={state} trackRef={audioTrack} />;
+}
+```
+
+### Styling the BarVisualizer using CSS classes
+
+```css
+.lk-audio-bar {
+ // Styles for "idle" bars
+ }
+.lk-audio-bar.lk-highlighted {
+ // Styles for "active" bars
+}
+```
+
+### Styling the BarVisualizer using CSS custom properties
+
+```css
+--lk-fg // for the "active" colour, note that this defines the main foreground colour for the whole "theme"
+--lk-va-bg // for "idle" colour
+```
+
+### Using a custom bar template for the BarVisualizer
+
+```tsx
+<BarVisualizer>
+  <div className="all the classes" />
+</BarVisualizer>
+```
+
+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

package/generated-docs/react/component/carousellayout.md

@@ -0,0 +1,44 @@
+---
+{
+  "title": "CarouselLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/CarouselLayout.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# CarouselLayout
+
+The `CarouselLayout` component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest.
+
+## Import
+
+```typescript
+import { CarouselLayout } from "@livekit/components-react";
+```
+
+## Remarks
+
+To ensure visual stability when tiles are reordered due to track updates, the component uses the `useVisualStableUpdate` hook.
+
+## Usage
+
+```tsx
+const tracks = useTracks([Track.Source.Camera]);
+<CarouselLayout tracks={tracks}>
+  <ParticipantTile />
+</CarouselLayout>;
+```
+
+## Properties
+
+{% parameter name="children" type="React.ReactNode" optional=false %}
+{% /parameter %}
+
+{% parameter name="tracks" type="TrackReferenceOrPlaceholder[]" optional=false %}
+{% /parameter %}
+
+{% parameter name="orientation" type="'vertical' | 'horizontal'" optional=true %}
+_(Optional)_ Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container.
+
+{% /parameter %}

package/generated-docs/react/component/chat.md

@@ -0,0 +1,45 @@
+---
+{
+  "title": "Chat",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/Chat.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# Chat
+
+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.
+
+## Import
+
+```typescript
+import { Chat } from "@livekit/components-react";
+```
+
+## Remarks
+
+- 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
+
+## Usage
+
+```tsx
+import "@livekit/components-styles";
+
+function Room() {
+  return (
+    <LiveKitRoom data-lk-theme="default">
+      <Chat />
+    </LiveKitRoom>
+  );
+}
+```
+
+For custom styling, refer to: https://docs.livekit.io/reference/components/react/concepts/style-components/
+
+## Properties
+
+{% parameter name="messageFormatter" type="MessageFormatter" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/chatentry.md

@@ -0,0 +1,48 @@
+---
+{
+  "title": "ChatEntry",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatEntry
+
+The `ChatEntry` component holds and displays one chat message.
+
+## Import
+
+```typescript
+import { ChatEntry } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<Chat>
+  <ChatEntry />
+</Chat>
+```
+
+## Properties
+
+{% parameter name="entry" type="ReceivedChatMessage" optional=false %}
+The chat massage object to display.
+
+{% /parameter %}
+
+{% parameter name="hideName" type="boolean" optional=true %}
+_(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person.
+
+{% /parameter %}
+
+{% parameter name="hideTimestamp" type="boolean" optional=true %}
+_(Optional)_ Hide message timestamp.
+
+{% /parameter %}
+
+{% parameter name="messageFormatter" type="MessageFormatter" optional=true %}
+_(Optional)_ An optional formatter for the message body.
+
+{% /parameter %}

package/generated-docs/react/component/chattoggle.md

@@ -0,0 +1,30 @@
+---
+{
+  "title": "ChatToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ChatToggle.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatToggle
+
+The `ChatToggle` component is a button that toggles the visibility of the `Chat` component.
+
+## Import
+
+```typescript
+import { ChatToggle } from "@livekit/components-react";
+```
+
+## Remarks
+
+For the component to have any effect it has to live inside a `LayoutContext` context.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ToggleChat />
+</LiveKitRoom>
+```

package/generated-docs/react/component/clearpinbutton.md

@@ -0,0 +1,30 @@
+---
+{
+  "title": "ClearPinButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ClearPinButton.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ClearPinButton
+
+The `ClearPinButton` is a basic html button with the added ability to signal the `LayoutContext` that it should display the grid view again.
+
+## Import
+
+```typescript
+import { ClearPinButton } from "@livekit/components-react";
+```
+
+## Remarks
+
+This component works only inside a `LayoutContext`<!-- -->.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ClearPinButton>Back to grid view</ClearPinButton>
+</LiveKitRoom>
+```

package/generated-docs/react/component/connectionqualityindicator.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "ConnectionQualityIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ConnectionQualityIndicator.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionQualityIndicator
+
+The `ConnectionQualityIndicator` shows the individual connection quality of a participant.
+
+## Import
+
+```typescript
+import { ConnectionQualityIndicator } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ConnectionQualityIndicator />
+```

package/generated-docs/react/component/connectionstate.md

@@ -0,0 +1,33 @@
+---
+{
+  "title": "ConnectionState",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionState.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionState
+
+The `ConnectionState` component displays the connection status of the room as strings (`"connected" | "connecting" | "disconnected" | "reconnecting"`<!-- -->).
+
+## Import
+
+```typescript
+import { ConnectionState } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ConnectionState />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+_(Optional)_ The room from which the connection status should be displayed.
+
+{% /parameter %}

package/generated-docs/react/component/connectionstatetoast.md

@@ -0,0 +1,25 @@
+---
+{
+  "title": "ConnectionStateToast",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionStateToast.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStateToast
+
+The `ConnectionStateToast` component displays a toast notification indicating the current connection state of the room.
+
+## Import
+
+```typescript
+import { ConnectionStateToast } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/controlbar.md

@@ -0,0 +1,55 @@
+---
+{
+  "title": "ControlBar",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBar
+
+The `ControlBar` prefab gives the user the basic user interface to control their media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+
+## Import
+
+```typescript
+import { ControlBar } from "@livekit/components-react";
+```
+
+## Remarks
+
+This component is build with other LiveKit components like `TrackToggle`<!-- -->, `DeviceSelectorButton`<!-- -->, `DisconnectButton` and `StartAudio`<!-- -->.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ControlBar />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="controls" type="ControlBarControls" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceError" type="(error: {
+          source: Track.Source;
+          error: Error;
+      }) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="saveUserChoices" type="boolean" optional=true %}
+_(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enable the user to have the same device choices when they rejoin the room.
+
+{% /parameter %}
+
+{% parameter name="variation" type="'minimal' | 'verbose' | 'textOnly'" optional=true %}
+_(Optional)_
+
+{% /parameter %}