communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
255 lines • 9.56 kB
TypeScript
/// <reference types="react" />
import { PartialTheme, Theme } from '@fluentui/react';
import { CallSurvey } from '@azure/communication-calling';
import { CallWithChatAdapter } from './adapter/CallWithChatAdapter';
import { BaseCompositeProps } from '../common/BaseComposite';
import { CallWithChatCompositeIcons } from '../common/icons';
import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
import { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';
import { LocalVideoTileOptions } from '../CallComposite/CallComposite';
import { DeviceCheckOptions } from '../CallComposite/CallComposite';
import { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';
import { VideoGalleryLayout, LocalScreenShareView } from "../../../../react-components/src";
import { AttachmentOptions } from "../../../../react-components/src";
/**
* Props required for the {@link CallWithChatComposite}
*
* @public
*/
export interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {
adapter: CallWithChatAdapter;
/**
* Fluent theme for the composite.
*
* Defaults to a light theme if undefined.
*/
fluentTheme?: PartialTheme | Theme;
/**
* Optimizes the composite form factor for either desktop or mobile.
* @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.
* @defaultValue 'desktop'
*/
formFactor?: 'desktop' | 'mobile';
/**
* URL that can be used to copy a call-with-chat invite to the Users clipboard.
*/
joinInvitationURL?: string;
/**
* Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}
*/
options?: CallWithChatCompositeOptions;
}
/**
* Customization options for the control bar in calling with chat experience.
*
* @public
*/
export interface CallWithChatControlOptions extends CommonCallControlOptions {
/**
* Show or hide the chat button in the call-with-chat composite control bar.
* @defaultValue true
*/
chatButton?: boolean | {
disabled: boolean;
};
}
/**
* Optional features of the {@link CallWithChatComposite}.
*
* @public
*/
export type CallWithChatCompositeOptions = {
/**
* Call control options to change what buttons show on the call-with-chat composite control bar.
* If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.
*/
callControls?: boolean | CallWithChatControlOptions;
/**
* Properties for configuring the File Sharing feature.
* If undefined, file sharing feature will be disabled.
* @beta
*/
attachmentOptions?: AttachmentOptions;
/**
* Device permissions check options for your call.
* Here you can choose what device permissions you prompt the user for,
* as well as what device permissions must be accepted before starting a call.
*/
deviceChecks?: DeviceCheckOptions;
/**
* Callback you may provide to supply users with further steps to troubleshoot why they have been
* unable to grant your site the required permissions for the call.
*
* @example
* ```ts
* onPermissionsTroubleshootingClick: () =>
* window.open('https://contoso.com/permissions-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a 'further troubleshooting' link.
*/
onPermissionsTroubleshootingClick?: (permissionsState: {
camera: PermissionState;
microphone: PermissionState;
}) => void;
/**
* Optional callback to supply users with further troubleshooting steps for network issues
* experienced when connecting to a call.
*
* @example
* ```ts
* onNetworkingTroubleShootingClick?: () =>
* window.open('https://contoso.com/network-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a 'network troubleshooting' link.
*/
onNetworkingTroubleShootingClick?: () => void;
/**
* Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
*
* @example
* ```ts
* onBrowserTroubleShootingClick?: () =>
* window.open('https://contoso.com/browser-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a unsupported browser page.
*/
onEnvironmentInfoTroubleshootingClick?: () => void;
/**
* Remote participant video tile menu options
*/
remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
/**
* Options for controlling the local video tile.
*
* @remarks if 'false' the local video tile will not be rendered.
*/
localVideoTile?: boolean | LocalVideoTileOptions;
/**
* Options for controlling the starting layout of the composite's video gallery
*/
galleryOptions?: {
/**
* Layout for the gallery when the call starts
*/
layout?: VideoGalleryLayout;
/**
* Controls the view of the local screenshare stream in the gallery
*/
localScreenShareView?: LocalScreenShareView;
};
/**
* Options for end of call survey
*/
surveyOptions?: {
/**
* Disable call survey at the end of a call.
* @defaultValue false
*/
disableSurvey?: boolean;
/**
* Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided
* This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey
*/
onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;
/**
* Optional callback to handle survey data including free form text response
* Note that free form text response survey option is only going to be enabled when this callback is provided
* User will need to handle all free form text response on their own
*/
onSurveySubmitted?: (callId: string, surveyId: string,
/**
* This is the survey results containing star survey data and API tag survey data.
* This part of the result will always be sent to the calling sdk
* This callback provides user with the ability to gain access to survey data
*/
submittedSurvey: CallSurvey,
/**
* This is the survey results containing free form text
* This part of the result will not be handled by composites
* User will need to collect and handle this information 100% on their own
* Free form text survey is not going to show in the UI if onSurveySubmitted is not populated
*/
improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;
};
/**
* Options for setting additional customizations related to personalized branding.
*/
branding?: {
/**
* Logo displayed on the configuration page.
*/
logo?: {
/**
* URL for the logo image.
*
* @remarks
* Recommended size is 80x80 pixels.
*/
url: string;
/**
* Alt text for the logo image.
*/
alt?: string;
/**
* The logo can be displayed as a circle.
*
* @defaultValue 'unset'
*/
shape?: 'unset' | 'circle';
};
/**
* Background image displayed on the configuration page.
*/
backgroundImage?: {
/**
* URL for the background image.
*
* @remarks
* Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
*/
url: string;
};
};
/**
* Options for settings related to spotlight.
*/
spotlight?: {
/**
* Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.
* @defaultValue false
*/
hideSpotlightButtons?: boolean;
};
/**
* Enables rich text editor for the send and edit boxes
* @defaultValue `false`
*
* @beta
*/
richTextEditor?: boolean;
/**
* Options for settings related to joining a call.
*/
joinCallOptions?: {
/**
* options for checking microphone permissions when joining a call.
* block on access will block the user from joining the call if the microphone permission is not granted.
* skip will allow the user to join the call without granting the microphone permission.
* @defaultValue 'requireMicrophoneAvailable'
*/
microphoneCheck?: 'requireMicrophoneAvailable' | 'skip';
};
};
/**
* CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
*
* @public
*/
export declare const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.Element;
//# sourceMappingURL=CallWithChatComposite.d.ts.map