@azure/communication-react package

Error thrown from failed stateful API methods.

Error thrown from failed StatefulChatClient methods.

Active error messages to be shown via ErrorBar.

Error reported via error events and stored in adapter state.

Functionality for interfacing with Composite adapter state.

Properties common to all composites exported from this library.

Basic fluent styles props for all components exported from this libray.

An Adapter interface specific for Azure Communication identity which extends CommonCallAdapter.

Functionality for managing the current call or start a new call

Functionality for managing the current call.

Functionality for managing devices within a call.

Call composite events that can be subscribed to.

Arguments to initialize a CallAgentProvider.

State only version of <xref:%40azure%2Fcommunication-calling%23CallAgent> except calls is moved to be a child directly of CallClientState and not included here. The reason to have CallAgent's state proxied is to provide access to displayName. We don't flatten CallAgent.displayName and put it in CallClientState because it would be ambiguious that displayName is actually reliant on the creation/existence of CallAgent to be available.

Arguments for use in createAzureCommunicationCallWithChatAdapter to join a Call with an associated Chat thread.

Arguments to initialize a CallClientProvider.

Container for all of the state data proxied by StatefulCallClient. The calls, callsEnded, incomingCalls, and incomingCallsEnded states will be automatically provided if a callAgent has been created. The deviceManager will be empty initially until populated see DeviceManagerState. The userId state is provided as a convenience for the developer and is completely controled and set by the developer.

Props for CallComposite.

Strings used by the CallComposite directly.

This strings are in addition to those used by the components from the component library.

Arguments to initialize a CallProvider.

State only version of <xref:%40azure%2Fcommunication-calling%23Call>. StatefulCallClient will automatically retrieve Call's state and add it to the state exposed by StatefulCallClient.

CallWithChatComposite Adapter interface.

Functionality for managing the current call with chat.

CallWithChat State is a combination of Stateful Chat and Stateful Calling clients with some state specific to the CallWithChat Composite only.

Call and Chat events that can be subscribed to in the CallWithChatAdapter.

UI state pertaining to the CallWithChatComposite.

State from the backend services that drives CallWithChatComposite.

Props required for the CallWithChatComposite

Strings used by the CallWithChatComposite directly.

This strings are in addition to those used by the components from the component library.

CallWithChatComposite Call controls to show or hide buttons on the calling control bar.

Object containing all the handlers required for calling components.

Calling related components from this package are able to pick out relevant handlers from this object. See <xref:useHandlers> and usePropsFor.

Custom Fluent theme pallete used by calling related components in this library.

Styles for the CameraButton menu.

Props for CameraButton component.

Strings of CameraButton that can be overridden.

Styles for CameraButton

Chat composite events that can be subscribed to.

Functionality for managing the current chat thread.

Props for ChatComposite.

Strings used by the ChatComposite directly.

This strings are in addition to those used by the components from the component library.

A chat message.

CallComposite Adapter interface.

Object containing all the handlers required for calling components.

Calling related components from this package are able to pick out relevant handlers from this object. See <xref:useHandlers> and usePropsFor.

Locale information for all components exported from this library.

Strings used by all components exported from this library.

Locale information for all composites exported from this library.

Strings used in the composites directly.

These strings are used by the composites directly, instead of by the contained components.

A system message with arbitary content.

Props for ControlBarButton.

Strings of ControlBarButton that can be overridden.

Props for ControlBar.

Object returned after creating a local or remote VideoStream. This contains helper functions to manipulate the render of the stream.

A custom message type.

Custom messages are not rendered by default, but applications can provide custom renderers for them.

Styles for the DevicesButton menu.

Props for DevicesButton.

Strings of DevicesButton that can be overridden.

Styles for the Devices button menu items.

State only proxy for <xref:%40azure%2Fcommunication-calling%23DiagnosticsCallFeature>.

Functionality for correctly disposing a Composite.

Props for EndCallButton.

Strings of EndCallButton that can be overridden.

Props for ErrorBar.

In addition to the following, ErrorBar forwards all <xref:%40fluentui%2Freact%23IMessageBarProps> to the underlying <xref:%40fluentui%2Freact%23MessageBar>.

All strings that may be shown on the UI in the ErrorBar.

Props for FluentThemeProvider.

Props for GridLayout.

GridLayout Component Styles.

<xref:HorizontalGallery> Component Styles.

State only version of <xref:%40azure%2Fcommunication-calling%23IncomingCall>. StatefulCallClient will automatically detect incoming calls and add their state to the state exposed by StatefulCallClient.

Arguments for <xref:MessageThreadProps.onRenderJumpToNewMessageButton>.

State only version of <xref:%40azure%2Fcommunication-calling%23LocalVideoStream>.

State only proxy for <xref:%40azure%2Fcommunication-calling%23MediaDiagnostics>.

Common properties of all message types.

Props for MessageStatusIndicator.

Strings of MessageStatusIndicator that can be overridden.

Strings of MessageThread that can be overridden.

Fluent styles for MessageThread.

Styles for the MicrophoneButton menu.

Props for MicrophoneButton.

Strings of MicrophoneButton that can be overridden.

Styles for MicrophoneButton

State only proxy for <xref:%40azure%2Fcommunication-calling%23NetworkDiagnostics>.

A device, e.g. camera, microphone, or speaker, in the DevicesButton flyout.

A system message notifying that a participant was added to the chat thread.

Props for ParticipantItem.

Strings of ParticipantItem that can be overridden.

Fluent styles for ParticipantItem.

Styles for the ParticipantList ParticipantItem.

Styles for the ParticipantList.

A system message notifying that a participant was removed from the chat thread.

Styles for the ParticipantsButton menu.

Props for ParticipantsButton.

Strings of ParticipantsButton that can be overridden.

Styles Props for ParticipantsButton.

State only version of <xref:%40azure%2Fcommunication-calling%23RecordingCallFeature>. StatefulCallClient will automatically listen for recording state of the call and update the state exposed by StatefulCallClient accordingly.

State only version of <xref:%40azure%2Fcommunication-calling%23RemoteParticipant>. StatefulCallClient will automatically retrieve RemoteParticipants and add their state to the state exposed by StatefulCallClient.

State only version of <xref:%40azure%2Fcommunication-calling%23RemoteVideoStream>.

Props for ScreenShareButton.

Strings of ScreenShareButton that can be overridden.

Props for SendBox.

Strings of SendBox that can be overridden.

Fluent styles for <xref:Sendbox>.

Defines the methods that allow CallClient <xref:%40azure%2Fcommunication-calling%23CallClient> to be used statefully. The interface provides access to proxied state and also allows registering a handler for state change events. For state definition see CallClientState.

State change events are driven by:

• Returned data from <xref:%40azure%2Fcommunication-calling%23DeviceManager> APIs.
• Returned data from <xref:%40azure%2Fcommunication-calling%23CallAgent> APIs.
• Listeners automatically attached to various azure communication-calling objects:
  • CallAgent 'incomingCall'
  • CallAgent 'callsUpdated'
  • DeviceManager 'videoDevicesUpdated'
  • DeviceManager 'audioDevicesUpdated
  • DeviceManager 'selectedMicrophoneChanged'
  • DeviceManager 'selectedSpeakerChanged'
  • Call 'stateChanged'
  • Call 'idChanged'
  • Call 'isMutedChanged'
  • Call 'isScreenSharingOnChanged'
  • Call 'remoteParticipantsUpdated'
  • Call 'localVideoStreamsUpdated'
  • IncomingCall 'callEnded'
  • RemoteParticipant 'stateChanged'
  • RemoteParticipant 'isMutedChanged'
  • RemoteParticipant 'displayNameChanged'
  • RemoteParticipant 'isSpeakingChanged'
  • RemoteParticipant 'videoStreamsUpdated'
  • RemoteVideoStream 'isAvailableChanged'
  • TranscriptionCallFeature 'isTranscriptionActiveChanged'
  • RecordingCallFeature 'isRecordingActiveChanged'

Defines the methods that allow {@Link @azure/communication-chat#ChatClient} to be used with a centralized generated state.

The interface provides access to proxied state and also allows registering a handler for state change events.

Defines the additional methods added by the stateful on top of <xref:%40azure%2Fcommunication-calling%23DeviceManager>.

Props for StreamMedia.

Common properties of all system messages.

A system message notifying that the chat thread topic was updated.

State only version of <xref:%40azure%2Fcommunication-calling%23TranscriptionCallFeature>. StatefulCallClient will automatically listen for transcription state of the call and update the state exposed by StatefulCallClient accordingly.

Props for TypingIndicator.

Strings of TypingIndicator that can be overridden.

Fluent styles for TypingIndicator.

Props for VideoGallery.

The state of a remote participant in the VideoGallery.

Video stream of a participant in VideoGallery.

All strings that may be shown on the UI in the VideoGallery.

VideoGallery Component Styles.

Options to control how video streams are rendered.

State only version of <xref:%40azure%2Fcommunication-calling%23VideoStreamRendererView>. This property is added to the state exposed by StatefulCallClient by createView and removed by disposeView.

Props for VideoTile.

Fluent styles for VideoTile.

Adapters stores the latest error for each operation in the state.

target is an adapter defined string for each unique operation performed by the adapter.

Compare if 2 react components are exact equal, result type will be true/false

Compare if props of 2 react components are equal, result type will be true/false

Compare if two types are equal, result type will be true/false

Custom data attributes for displaying avatar for a user.

Callback function used to provide custom data to build an avatar for a user.

Arguments for creating the Azure Communication Services implementation of CallAdapter.

Note: displayName can be a maximum of 256 characters.

Arguments for createAzureCommunicationCallWithChatAdapter

Arguments for <xref:createAzureCommunicationCallWithChatAdapterFromClient>

Arguments for creating the Azure Communication Services implementation of ChatAdapter.

Payload for CallEndedListener containing details on the ended call.

CommonCallAdapter state inferred from Azure Communication Services backend.

Locator used by createAzureCommunicationCallAdapter to locate the call to join

CommonCallAdapter state.

CommonCallAdapter state for pure UI purposes.

Icons that can be overridden for CallComposite.

Optional features of the CallComposite.

Major UI screens shown in the CallComposite.

Control bar display type for CallComposite.

Customization options for the control bar in calling experience.

Callback for CallAdapterSubscribers 'callEnded' event.

Selector type for ErrorBar component.

String literal type for all permissible keys in {@Link CallErrors}.

Errors teed from API calls to the Calling SDK.

Each property in the object stores the latest error for a particular SDK API method.

Errors from this object can be cleared using the <xref:newClearCallErrorsModifier>. Additionally, errors are automatically cleared when:

• The state is cleared.
• Subsequent calls to related API methods succeed. See documentation of individual stateful client methods for details on when errors may be automatically cleared.

Callback for CallAdapterSubscribers 'callIdChanged' event.

Calling participant's state, as reflected in the UI components.

Icons that can be overridden for CallWithChatComposite.

Optional features of the CallWithChatComposite.

Events fired off by the CallWithChatAdapter.

Common props used to reference calling declarative client state.

Helper type for usePropsFor.

Selector type for CameraButton component.

ChatComposite Adapter interface.

ChatAdapter state.

ChatAdapter state for pure UI purposes.

Common props for selectors for ChatClientState.

Arguments to initialize a ChatClientProvider.

Centralized state for <xref:%40azure%2Fcommunication-chat%23ChatClient>.

ChatAdapter state inferred from Azure Communication Services backend.

Icons that can be overridden for ChatComposite.

Optional features of the ChatComposite.

Selector type for ErrorBar component.

String literal type for all permissible keys in ChatErrors.

Errors teed from API calls to the Chat SDK.

Each property in the object stores the latest error for a particular SDK API method.

Object containing all the handlers required for chat components.

Chat related components from this package are able to pick out relevant handlers from this object. See <xref:useHandlers> and usePropsFor.

An extension to <xref:%40azure%2Fcommunication-chat%23ChatMessage> that stores client-side only metadata for chat messages.

TODO: The name has bitrotted. Rename me.

Selector type for ParticipantList component.

Helper type for usePropsFor.

Arguments to initialize a ChatThreadClientProvider.

Centralized state for <xref:%40azure%2Fcommunication-chat%23ChatThreadClient>.

Properties of a chat thread.

We define a minimal one that helps us hide the different types used by underlying API.

Centralized state for <xref:%40azure%2Fcommunication-calling%23CallClient> or <xref:%40azure%2Fcommunication-chat%23ChatClient>.

See also: CallClientState, ChatClientState.

Return intersect type of 2 types

Return intersect properties of 2 types

A Chat or Calling participant's state, as reflected in the UI.

Icons used by the React components exported from this library.

Helper type for usePropsFor.

Icons that can be overridden in one of the composites exported by this library.

See ChatCompositeIcons, CallCompositeIcons and CallWithChatCompositeIcons for more targeted types.

Styles for all ControlBarButton implementations.

Present layouts for the ControlBar.

Return result from createView.

Options that can be injected into the onRender function for customizing an Avatar (Persona) component.

This type is meant to encapsulate all the state inside <xref:%40azure%2Fcommunication-calling%23DeviceManager>. For optional parameters they may not be available until permission is granted by the user. The cameras, microphones, speakers, and deviceAccess states will be empty until the corresponding <xref:%40azure%2Fcommunication-calling%23DeviceManager>'s getCameras, getMicrophones, getSpeakers, and askDevicePermission APIs are called and completed.

Selector type for DevicesButton component.

Callback for CallAdapterSubscribers 'diagnosticChanged' event.

Callback for CallAdapterSubscribers 'displayNameChanged' event.

A type for trivial selectors that return no data.

Used as a default return value if usePropsFor is called for a component that requires no data.

All errors that can be shown in the ErrorBar.

Specific type of the selector applicable to a given Component.

Specific type of the selector applicable to a given Component.

Callback for CallAdapterSubscribers 'isLocalScreenSharingActiveChanged' event.

Callback for CallAdapterSubscribers 'isMuted' event.

Callback for CallAdapterSubscribers 'isSpeakingChanged' event.

Whether the stream is loading or not.

Props for LocalizationProvider.

Payload for DiagnosticChangedEventListner where there is a change in a media diagnostic.

Discriminated union of all messages.

The messageType field specializes into union variants.

Indicate whether a chat message should be displayed merged with the message before / after it.

Useful to merge many messages from the same sender into a single message bubble.

Supported types of chat message content.

Props to render a single message.

See MessageRenderer.

Callback for ChatAdapterSubscribers 'messageRead' event.

Callback for ChatAdapterSubscribers 'messageReceived' event.

A component to render a single message.

Callback for ChatAdapterSubscribers 'messageSent' event.

Client-side state of a sent message.

Includes transitional states that occur before message delivery is confirmed from the backend.

Props for MessageThread.

Selector type for MessageThread component.

Selector type for MicrophoneButton component.

Payload for DiagnosticChangedEventListner where there is a change in a network diagnostic.

A custom rendered callback that allows users to customize the rendering of a Persona Component.

Participants displayed in a ParticipantList.

Props for ParticipantList.

Selector type for ParticipantList component.

A callback for providing custom menu items for each participant in ParticipantList.

The connection state of a call participant.

Callback for ChatAdapterSubscribers 'participantsAdded' event.

Selector type for ParticipantsButton component.

Callback for CallAdapterSubscribers 'participantsJoined' event.

Callback for CallAdapterSubscribers 'participantsLeft' event.

Callback for ChatAdapterSubscribers 'participantsRemoved' event.

An array of key value pairs that stores each sender's display name and last read message

Selector type for ScreenShareButton component.

An optimized selector that refines ClientState updates into props for React Components in this library.

Selector type for SendBox component.

Arguments to construct the StatefulCallClient.

Options to construct the StatefulCallClient with.

Arguments to construct the StatefulChatClient.

Options to construct the StatefulChatClient.

Discriminated union of all system messages.

The systemMessageType field specializes into union variants.

Callback for ChatAdapterSubscribers 'topicChanged' event.

Selector type for TypingIndicator component.

Callback function run when a message is updated.

The state of the local participant in the VideoGallery.

The state of a participant in the VideoGallery.

Selector type for VideoGallery component.

Scaling mode of a VideoGalleryStream.

A <xref:React.Context> that stores a <xref:%40azure%2Fcommunication-calling%23CallAgent>.

Calling components from this package must be wrapped with a CallAgentProvider.

A <xref:React.Context> that stores a StatefulCallClient.

Calling components from this package must be wrapped with a CallClientProvider.

A customizable UI composite for calling experience.

A <xref:React.Context> that stores a <xref:%40azure%2Fcommunication-calling%23Call>.

Calling components from this package must be wrapped with a CallProvider.

CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.

A button to turn camera on / off.

Can be used with ControlBar.

A <xref:React.Context> that stores a StatefulChatClient.

Chat components from this package must be wrapped with a ChatClientProvider.

A customizable UI composite for the chat experience.

A <xref:React.Context> that stores a <xref:%40azure%2Fcommunication-chat%23ChatThreadClient>.

Chat components from this package must be wrapped with a ChatThreadClientProvider.

A container for various buttons for call controls.

Use with various call control buttons in this library, e.g., CameraButton, or your own instances of ControlBarButton directly.

Default button styled for the ControlBar.

Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.

A button to open a menu that controls device options.

Can be used with ControlBar.

A button to end an ongoing call.

Can be used with ControlBar.

A component to show error messages on the UI. All strings that can be shown are accepted as the strings so that they can be localized. Active errors are selected by activeErrorMessages.

This component internally tracks dismissed by the user.

• Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
• Errors that do not have a timestamp: The error is dismissed until it disappears from the props. If the error recurs, it is shown in the UI.

Uses <xref:%40fluentui%2Freact%23MessageBar> UI element.

Provider to apply a Fluent theme across this library's react components.

A component to lay out audio / video participants tiles in a call.

Provider to provide localized strings for this library's react components.

Component to display the status of a sent message.

Adds an icon and tooltip corresponding to the message status.

MessageThread allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread.

A button to turn microphone on / off.

Can be used with ControlBar.

Component to render a calling or chat participant.

Displays the participant's avatar, displayName and status as well as optional icons and context menu.

Component to render all calling or chat participants.

By default, each participant is rendered with ParticipantItem. See <xref:ParticipantListProps.onRenderParticipant> to override.

A button to show a menu with calling or chat participants.

Can be used with ControlBar.

This button contains dropdown menu items defined through its property menuProps. By default, it can display the number of remote participants with the full list as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL. This menuProps can be fully redefined and its property is of type IContextualMenuProps.

A button to start / stop screen sharing.

Can be used with ControlBar.

Component for typing and sending messages.

Supports sending typing notification when user starts entering text. Supports an optional message below the text input field.

Utility component to convert an HTMLElement with a video stream into a JSX element.

Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a VideoTile.

Component to notify local user when one or more participants in the chat thread are typing.

VideoGallery represents a layout of video tiles for a specific call. It displays a VideoTile for the local user as well as for each remote participant who has joined the call.

A component to render the video stream for a single call participant.

Use with GridLayout in a VideoGallery.

Create a CallAdapter backed by Azure Communication Services.

This is the default implementation of CallAdapter provided by this library.

Note: displayName can be a maximum of 256 characters.

Create a CallAdapter using the provided StatefulCallClient.

Useful if you want to keep a reference to StatefulCallClient. Consider using createAzureCommunicationCallAdapter for a simpler API.

Create a CallWithChatAdapter backed by Azure Communication services to plug into the CallWithChatComposite.

Create a CallWithChatAdapter using the provided StatefulChatClient and StatefulCallClient.

Useful if you want to keep a reference to StatefulChatClient and StatefulCallClient. Consider using createAzureCommunicationCallWithChatAdapter for a simpler API.

Create a ChatAdapter backed by Azure Communication Services.

This is the default implementation of ChatAdapter provided by this library.

Create a ChatAdapter using the provided StatefulChatClient.

Useful if you want to keep a reference to StatefulChatClient. Consider using createAzureCommunicationChatAdapter for a simpler API.

Create the default implementation of CallingHandlers for teams call.

Useful when implementing a custom component that utilizes the providers exported from this library.

Create the default implementation of ChatHandlers.

Useful when implementing a custom component that utilizes the providers exported from this library.

Returned object is memoized to avoid rerenders when used as props for React Components.

Creates a StatefulCallClient StatefulCallClient by proxying CallClient <xref:%40azure%2Fcommunication-calling%23CallClient> with ProxyCallClient <xref:ProxyCallClient> which then allows access to state in a declarative way.

It is important to use the <xref:%40azure%2Fcommunication-calling%23DeviceManager> and <xref:%40azure%2Fcommunication-calling%23CallAgent> and <xref:%40azure%2Fcommunication-calling%23Call> (and etc.) that are obtained from the StatefulCallClient in order for their state changes to be proxied properly.

Creates a stateful ChatClient StatefulChatClient by proxying ChatClient <xref:%40azure%2Fcommunication-chat%23ChatClient> with ProxyChatClient <xref:ProxyChatClient> which then allows access to state in a declarative way.

Reverse operation of toFlatCommunicationIdentifier.

Get the selector for a specified component.

Useful when implementing a custom component that utilizes the providers exported from this library.

Get the selector for a specified component.

Useful when implementing a custom component that utilizes the providers exported from this library.

A string representation of a <xref:%40azure%2Fcommunication-common%23CommunicationIdentifier>.

This string representation of CommunicationIdentifier is guaranteed to be stable for a unique Communication user. Thus,

• it can be used to persist a user's identity in external databases.
• it can be used as keys into a Map to store data for the user.

A custom React hook to simplify the creation of CallAdapter.

Similar to createAzureCommunicationCallAdapter, but takes care of asynchronous creation of the adapter internally.

Allows arguments to be undefined so that you can respect the rule-of-hooks and pass in arguments as they are created. The adapter is only created when all arguments are defined.

Note that you must memoize the arguments to avoid recreating adapter on each render. See storybook for typical usage examples.

A custom React hook to simplify the creation of CallWithChatAdapter.

Similar to createAzureCommunicationCallWithChatAdapter, but takes care of asynchronous creation of the adapter internally.

Allows arguments to be undefined so that you can respect the rule-of-hooks and pass in arguments as they are created. The adapter is only created when all arguments are defined.

Note that you must memoize the arguments to avoid recreating adapter on each render. See storybook for typical usage examples.

A custom React hook to simplify the creation of ChatAdapter.

Similar to createAzureCommunicationChatAdapter, but takes care of asynchronous creation of the adapter internally.

Allows arguments to be undefined so that you can respect the rule-of-hooks and pass in arguments as they are created. The adapter is only created when all arguments are defined.

Note that you must memoize the arguments to avoid recreating adapter on each render. See storybook for typical usage examples.

Hook to obtain <xref:%40azure%2Fcommunication-calling%23Call> from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

you must have previously used the CallProvider with a Call object to use this hook

Hook to obtain <xref:%40azure%2Fcommunication-calling%23CallAgent> from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

Hook to obtain StatefulCallClient from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

Hook to obtain StatefulChatClient from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

Hook to obtain <xref:%40azure%2Fcommunication-chat%23ChatThreadClient> from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

Hook to obtain StatefulDeviceManager from the provider.

Useful when implementing a custom component that utilizes the providers exported from this library.

Primary hook to get all hooks necessary for a React Component from this library.

To call this hook, the component requires to be wrapped under these providers:

1. For chat components: ChatClientProvider and ChatThreadClientProvider.

2. For calling components: CallClientProvider, CallAgentProvider and CallAgentProvider.

Most straightforward usage of a components looks like:

Example

    import { ParticipantList, usePropsFor } from '@azure/communication-react';

    const App = (): JSX.Element => {
        // ... code to setup Providers ...

        return <ParticipantList {...usePropsFor(ParticipantList)}/>
    }

Hook to obtain a selector for a specified component.

Useful when implementing a custom component that utilizes the providers exported from this library.

React hook to access theme