@azure/communication-react 1.23.0-alpha-202501120018 → 1.23.0-alpha-202501160016

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CuxcFFWR.js');
+var index = require('./index-iq0jAnxX.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.23.0-alpha-202501120018';
+module.exports = '1.23.0-alpha-202501160016';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.23.0-alpha-202501120018';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.23.0-alpha-202501160016';\n"]}

package/dist/dist-esm/communication-react/src/index.d.ts

@@ -109,4 +109,5 @@ export type { CaptionsBannerProps, CaptionsInformation, CaptionsBannerStrings }
 export { CaptionsBanner } from '../../react-components/src/components/CaptionsBanner';
 export { StartCaptionsButton } from '../../react-components/src/components/StartCaptionsButton';
 export type { StartCaptionsButtonProps, StartCaptionsButtonStrings } from '../../react-components/src/components/StartCaptionsButton';
+export type { RealTimeTextInformation } from '../../react-components/src/components/CaptionsBanner';
 //# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/communication-react/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport type {\n  DeepNoiseSuppressionEffectDependency,\n  VideoBackgroundEffectsDependency,\n  CallingHandlersOptions\n} from '../../calling-component-bindings/src';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { MessageOptions, ChatMessageType } from '../../acs-ui-common/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { UploadChatImageResult } from '../../acs-ui-common/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers,\n  CaptionSettingsSelector,\n  CaptionsBannerSelector,\n  StartCaptionsButtonSelector\n} from '../../calling-component-bindings/src';\n\nexport type { HoldButtonSelector } from '../../calling-component-bindings/src';\n\nexport type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';\n\nexport type { NotificationStackSelector } from '../../calling-component-bindings/src';\nexport type { IncomingCallStackSelector } from '../../calling-component-bindings/src';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile,\n  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_CY_GB,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_ES_MX,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_FR_CA,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} from '../../react-components/src';\nexport { ImageOverlay } from '../../react-components/src';\nexport { HoldButton } from '../../react-components/src';\n\nexport { RaiseHandButton } from '../../react-components/src';\n\nexport { Dialpad } from '../../react-components/src';\n\nexport { IncomingCallNotification, IncomingCallStack } from '../../react-components/src';\nexport type {\n  IncomingCallNotificationProps,\n  IncomingCallNotificationStrings,\n  IncomingCallNotificationStyles,\n  IncomingCallStackProps,\n  IncomingCallStackCall\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(call-readiness) */\nexport {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from '../../react-components/src';\n\n/* @conditional-compile-remove(mention) */\nexport type {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode,\n  VideoTileContextualMenuProps,\n  VideoTileDrawerMenuProps,\n  VideoTilesOptions\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(together-mode) */\nexport type {\n  TogetherModeStreamViewResult,\n  VideoGalleryTogetherModeStreams,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeSeatingInfo,\n  TogetherModeStreamOptions\n} from '../../react-components/src';\n\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite,\n  ReactionButtonReaction\n} from '../../react-components/src';\n\nexport { ReactionButton } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport { RichTextSendBox } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from '../../react-components/src';\nexport type { Spotlight } from '../../react-components/src';\nexport type { ImageOverlayProps, ImageOverlayStrings } from '../../react-components/src';\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\nexport type {\n  DialpadMode,\n  DialpadProps,\n  DialpadStrings,\n  DialpadStyles,\n  DtmfTone,\n  LongPressTrigger\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentOptions } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { SendBoxErrorBarError } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { SendBoxErrorBarType } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentActionHandler } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type {\n  AttachmentSelectionHandler,\n  AttachmentRemovalHandler,\n  AttachmentUploadOptions,\n  AttachmentUploadTask\n} from '../../react-components/src';\nexport type { AttachmentMetadata } from '../../acs-ui-common/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentMetadataInProgress, AttachmentProgressError } from '../../acs-ui-common/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentMenuAction, AttachmentDownloadOptions } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport { defaultAttachmentMenuAction } from '../../react-components/src';\nexport type { ChatAttachmentType } from '../../react-components/src';\nexport type { InlineImageOptions, InlineImage } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport type { RichTextEditorOptions, RichTextEditBoxOptions } from '../../react-components/src';\nexport type { HoldButtonProps, HoldButtonStrings } from '../../react-components/src';\nexport type { VideoTileStrings } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} from '../../react-components/src';\nexport type { OverflowGalleryPosition } from '../../react-components/src';\nexport type { LocalVideoTileSize } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\nexport type { DeclarativeCallAgent } from '../../calling-stateful-client/src';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from '../../chat-stateful-client/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { MessagingPolicy } from '../../chat-stateful-client/src';\n\nexport type { ResourceFetchResult } from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowser } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowserVersion } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedOperatingSystem } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';\nexport type {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n\nexport type { SurveyIssues } from '../../react-components/src';\n\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n\nexport type { CallSurveyImprovementSuggestions } from '../../react-components/src';\n\nexport { NotificationStack, Notification } from '../../react-components/src';\n\nexport type {\n  NotificationStackProps,\n  NotificationProps,\n  NotificationStrings,\n  NotificationStackStrings,\n  NotificationType,\n  ActiveNotification,\n  NotificationStyles\n} from '../../react-components/src';\nexport type { MeetingConferencePhoneInfoModalStrings } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport type { RealTimeTextModalStrings, RealTimeTextModalProps } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport { RealTimeTextModal } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport type { RealTimeTextProps, RealTimeTextStrings } from '../../react-components/src/components/RealTimeText';\n/* @conditional-compile-remove(rtt) */\nexport { RealTimeText } from '../../react-components/src/components/RealTimeText';\n/* @conditional-compile-remove(rtt) */\nexport { StartRealTimeTextButton } from '../../react-components/src/components/StartRealTimeTextButton';\n/* @conditional-compile-remove(rtt) */\nexport type {\n  StartRealTimeTextButtonProps,\n  StartRealTimeTextButtonStrings\n} from '../../react-components/src/components/StartRealTimeTextButton';\n/* @conditional-compile-remove(media-access) */\nexport type { MediaAccess } from '../../react-components/src';\nexport type { CaptionsSettingsModalStrings, CaptionsSettingsModalProps } from '../../react-components/src';\nexport { CaptionsSettingsModal } from '../../react-components/src';\nexport type { SupportedCaptionLanguage, SupportedSpokenLanguage, CaptionsOptions } from '../../react-components/src';\nexport type {\n  CaptionsBannerProps,\n  CaptionsInformation,\n  CaptionsBannerStrings\n} from '../../react-components/src/components/CaptionsBanner';\nexport { CaptionsBanner } from '../../react-components/src/components/CaptionsBanner';\nexport { StartCaptionsButton } from '../../react-components/src/components/StartCaptionsButton';\nexport type {\n  StartCaptionsButtonProps,\n  StartCaptionsButtonStrings\n} from '../../react-components/src/components/StartCaptionsButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport type {\n  DeepNoiseSuppressionEffectDependency,\n  VideoBackgroundEffectsDependency,\n  CallingHandlersOptions\n} from '../../calling-component-bindings/src';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { MessageOptions, ChatMessageType } from '../../acs-ui-common/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { UploadChatImageResult } from '../../acs-ui-common/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers,\n  CaptionSettingsSelector,\n  CaptionsBannerSelector,\n  StartCaptionsButtonSelector\n} from '../../calling-component-bindings/src';\n\nexport type { HoldButtonSelector } from '../../calling-component-bindings/src';\n\nexport type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';\n\nexport type { NotificationStackSelector } from '../../calling-component-bindings/src';\nexport type { IncomingCallStackSelector } from '../../calling-component-bindings/src';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile,\n  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_CY_GB,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_ES_MX,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_FR_CA,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} from '../../react-components/src';\nexport { ImageOverlay } from '../../react-components/src';\nexport { HoldButton } from '../../react-components/src';\n\nexport { RaiseHandButton } from '../../react-components/src';\n\nexport { Dialpad } from '../../react-components/src';\n\nexport { IncomingCallNotification, IncomingCallStack } from '../../react-components/src';\nexport type {\n  IncomingCallNotificationProps,\n  IncomingCallNotificationStrings,\n  IncomingCallNotificationStyles,\n  IncomingCallStackProps,\n  IncomingCallStackCall\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(call-readiness) */\nexport {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from '../../react-components/src';\n\n/* @conditional-compile-remove(mention) */\nexport type {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode,\n  VideoTileContextualMenuProps,\n  VideoTileDrawerMenuProps,\n  VideoTilesOptions\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(together-mode) */\nexport type {\n  TogetherModeStreamViewResult,\n  VideoGalleryTogetherModeStreams,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeSeatingInfo,\n  TogetherModeStreamOptions\n} from '../../react-components/src';\n\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite,\n  ReactionButtonReaction\n} from '../../react-components/src';\n\nexport { ReactionButton } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport { RichTextSendBox } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from '../../react-components/src';\nexport type { Spotlight } from '../../react-components/src';\nexport type { ImageOverlayProps, ImageOverlayStrings } from '../../react-components/src';\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\nexport type {\n  DialpadMode,\n  DialpadProps,\n  DialpadStrings,\n  DialpadStyles,\n  DtmfTone,\n  LongPressTrigger\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentOptions } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { SendBoxErrorBarError } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { SendBoxErrorBarType } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentActionHandler } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type {\n  AttachmentSelectionHandler,\n  AttachmentRemovalHandler,\n  AttachmentUploadOptions,\n  AttachmentUploadTask\n} from '../../react-components/src';\nexport type { AttachmentMetadata } from '../../acs-ui-common/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentMetadataInProgress, AttachmentProgressError } from '../../acs-ui-common/src';\n\n/* @conditional-compile-remove(file-sharing-acs) */\nexport type { AttachmentMenuAction, AttachmentDownloadOptions } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing-acs) */\nexport { defaultAttachmentMenuAction } from '../../react-components/src';\nexport type { ChatAttachmentType } from '../../react-components/src';\nexport type { InlineImageOptions, InlineImage } from '../../react-components/src';\n/* @conditional-compile-remove(rich-text-editor) */\nexport type { RichTextEditorOptions, RichTextEditBoxOptions } from '../../react-components/src';\nexport type { HoldButtonProps, HoldButtonStrings } from '../../react-components/src';\nexport type { VideoTileStrings } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} from '../../react-components/src';\nexport type { OverflowGalleryPosition } from '../../react-components/src';\nexport type { LocalVideoTileSize } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\nexport type { DeclarativeCallAgent } from '../../calling-stateful-client/src';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from '../../chat-stateful-client/src';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nexport type { MessagingPolicy } from '../../chat-stateful-client/src';\n\nexport type { ResourceFetchResult } from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowser } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowserVersion } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedOperatingSystem } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';\nexport type {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n\nexport type { SurveyIssues } from '../../react-components/src';\n\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n\nexport type { CallSurveyImprovementSuggestions } from '../../react-components/src';\n\nexport { NotificationStack, Notification } from '../../react-components/src';\n\nexport type {\n  NotificationStackProps,\n  NotificationProps,\n  NotificationStrings,\n  NotificationStackStrings,\n  NotificationType,\n  ActiveNotification,\n  NotificationStyles\n} from '../../react-components/src';\nexport type { MeetingConferencePhoneInfoModalStrings } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport type { RealTimeTextModalStrings, RealTimeTextModalProps } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport { RealTimeTextModal } from '../../react-components/src';\n/* @conditional-compile-remove(rtt) */\nexport type { RealTimeTextProps, RealTimeTextStrings } from '../../react-components/src/components/RealTimeText';\n/* @conditional-compile-remove(rtt) */\nexport { RealTimeText } from '../../react-components/src/components/RealTimeText';\n/* @conditional-compile-remove(rtt) */\nexport { StartRealTimeTextButton } from '../../react-components/src/components/StartRealTimeTextButton';\n/* @conditional-compile-remove(rtt) */\nexport type {\n  StartRealTimeTextButtonProps,\n  StartRealTimeTextButtonStrings\n} from '../../react-components/src/components/StartRealTimeTextButton';\n/* @conditional-compile-remove(media-access) */\nexport type { MediaAccess } from '../../react-components/src';\nexport type { CaptionsSettingsModalStrings, CaptionsSettingsModalProps } from '../../react-components/src';\nexport { CaptionsSettingsModal } from '../../react-components/src';\nexport type { SupportedCaptionLanguage, SupportedSpokenLanguage, CaptionsOptions } from '../../react-components/src';\nexport type {\n  CaptionsBannerProps,\n  CaptionsInformation,\n  CaptionsBannerStrings\n} from '../../react-components/src/components/CaptionsBanner';\nexport { CaptionsBanner } from '../../react-components/src/components/CaptionsBanner';\nexport { StartCaptionsButton } from '../../react-components/src/components/StartCaptionsButton';\nexport type {\n  StartCaptionsButtonProps,\n  StartCaptionsButtonStrings\n} from '../../react-components/src/components/StartCaptionsButton';\n/* @conditional-compile-remove(rtt) */\nexport type { RealTimeTextInformation } from '../../react-components/src/components/CaptionsBanner';\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts

@@ -22,17 +22,45 @@ export type CaptionsInformation = {
      */
     userId?: string;
     /**
-     * if the caption received is real time text
+     * timestamp when the caption was created
+     * Please note that this value is essential for determining the order of captions and real time text messages
+     * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated
      */
-    isRealTimeText?: boolean;
+    createdTimeStamp?: Date;
+};
+/**
+ * @beta
+ * information required for each line of real time text
+ */
+export type RealTimeTextInformation = {
+    /**
+     * The sequence id of the real time text.
+     */
+    id: number;
+    /**
+     * sender's display name
+     */
+    displayName: string;
+    /**
+     * id of the sender
+     */
+    userId?: string;
     /**
-     * if the caption received is a non finalized caption
+     * The real time text message.
      */
-    isPartial?: boolean;
+    message: string;
     /**
-     * if the caption received is from the local user
+     * if the real time text received is partial
      */
-    isLocalUser?: boolean;
+    isTyping: boolean;
+    /**
+     * If message originated from the local participant
+     */
+    isMe: boolean;
+    /**
+     * timestamp when the real time text was finalized
+     */
+    finalizedTimeStamp: Date;
 };
 /**
  * @public
@@ -69,6 +97,14 @@ export interface CaptionsBannerProps {
      * Array of captions to be displayed
      */
     captions: CaptionsInformation[];
+    /**
+     * Array of finalized and partial real time text messages
+     */
+    realTimeTexts?: {
+        completedMessages?: RealTimeTextInformation[];
+        currentInProgress?: RealTimeTextInformation[];
+        myInProgress?: RealTimeTextInformation;
+    };
     /**
      * Flag to indicate if captions are on
      */
@@ -106,11 +142,11 @@ export interface CaptionsBannerProps {
     /**
      * Optional callback to send real time text.
      */
-    onSendRealTimeText?: (text: string, finalized?: boolean) => Promise<void>;
+    onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;
     /**
      * Latest local real time text
      */
-    latestLocalRealTimeText?: CaptionsInformation;
+    latestLocalRealTimeText?: RealTimeTextInformation;
 }
 /**
  * @public

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js

@@ -4,6 +4,8 @@ import { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';
 /* @conditional-compile-remove(rtt) */
 import { TextField } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+/* @conditional-compile-remove(rtt) */
+import { useMemo } from 'react';
 import { _Caption } from './Caption';
 import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
 import { useLocale } from '../localization';
@@ -11,6 +13,8 @@ import { useLocale } from '../localization';
 import { RealTimeText } from './RealTimeText';
 /* @conditional-compile-remove(rtt) */
 import { _RTTDisclosureBanner } from './RTTDisclosureBanner';
+/* @conditional-compile-remove(rtt) */
+import { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';
 const SCROLL_OFFSET_ALLOWANCE = 20;
 /**
  * @public
@@ -18,7 +22,9 @@ const SCROLL_OFFSET_ALLOWANCE = 20;
  */
 export const CaptionsBanner = (props) => {
     var _a, _b, _c;
-    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, formFactor = 'default', captionsOptions, 
+    const { captions, 
+    /* @conditional-compile-remove(rtt) */
+    realTimeTexts, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, formFactor = 'default', captionsOptions, 
     /* @conditional-compile-remove(rtt) */
     isRealTimeTextOn, 
     /* @conditional-compile-remove(rtt) */
@@ -30,6 +36,18 @@ export const CaptionsBanner = (props) => {
     const captionsScrollDivRef = useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const theme = useTheme();
+    /* @conditional-compile-remove(rtt) */
+    // merge realtimetexts and captions into one array based on timestamp
+    // Combine captions and realTimeTexts into one list
+    const combinedList = useMemo(() => {
+        var _a;
+        return sortCaptionsAndRealTimeTexts(captions, (_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) !== null && _a !== void 0 ? _a : []);
+    }, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages]);
+    /* @conditional-compile-remove(rtt) */
+    const mergedCaptions = useMemo(() => {
+        var _a;
+        return [...combinedList, ...((_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.currentInProgress) !== null && _a !== void 0 ? _a : []), realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.myInProgress];
+    }, [combinedList, realTimeTexts]);
     const scrollToBottom = () => {
         if (captionsScrollDivRef.current) {
             captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;
@@ -61,7 +79,7 @@ export const CaptionsBanner = (props) => {
     /* @conditional-compile-remove(rtt) */
     useEffect(() => {
         // if the latest real time text sent by myself is final, clear the text field
-        if (latestLocalRealTimeText && !latestLocalRealTimeText.isPartial) {
+        if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {
             setTextFieldValue('');
         }
     }, [latestLocalRealTimeText]);
@@ -81,22 +99,33 @@ export const CaptionsBanner = (props) => {
         bannerContent: (_b = strings.realTimeTextBannerContent) !== null && _b !== void 0 ? _b : '',
         bannerLinkLabel: (_c = strings.realTimeTextBannerLinkLabel) !== null && _c !== void 0 ? _c : ''
     };
-    return (React.createElement(React.Fragment, null, (startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
-        /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (React.createElement(_RTTDisclosureBanner, { strings: realTimeTextDisclosureBannerStrings })),
-        (isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
-                ? captionsBannerFullHeightClassName(theme)
-                : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captions.map((caption) => {
-            /* @conditional-compile-remove(rtt) */
-            if (caption.isRealTimeText) {
-                return (React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
-                    React.createElement(RealTimeText, Object.assign({}, caption, { isTyping: caption.isPartial, onRenderAvatar: onRenderAvatar }))));
+    const captionsTrampoline = () => {
+        /* @conditional-compile-remove(rtt) */
+        return (React.createElement(React.Fragment, null, mergedCaptions.map((caption) => {
+            if (caption) {
+                if ('message' in caption) {
+                    return (React.createElement("li", { key: `RealTimeText - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+                        React.createElement(RealTimeText, Object.assign({}, caption))));
+                }
+                return (React.createElement("li", { key: `Captions - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+                    React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
             }
+            return React.createElement(React.Fragment, null);
+        })));
+        return (React.createElement(React.Fragment, null, captions.map((caption) => {
             return (React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                 React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
-        }))),
+        })));
+    };
+    return (React.createElement(React.Fragment, null, (startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
+        /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (React.createElement("div", { style: { paddingTop: '0.5rem' } },
+            React.createElement(_RTTDisclosureBanner, { strings: realTimeTextDisclosureBannerStrings }))),
+        (isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+                ? captionsBannerFullHeightClassName(theme)
+                : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captionsTrampoline())),
         /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (React.createElement(TextField, { label: strings.realTimeTextInputBoxDefaultText, value: textFieldValue, onKeyDown: handleKeyDown, onChange: (_, newValue) => {
                 setTextFieldValue(newValue || '');
-                onSendRealTimeText(newValue || '');
+                onSendRealTimeText(newValue || '', false);
             } })),
         !isCaptionsOn && /* @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (React.createElement(Stack, { verticalAlign: "center", styles: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
                 ? loadingBannerFullHeightStyles(theme)

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rtt) */\nimport { RealTimeText } from './RealTimeText';\n/* @conditional-compile-remove(rtt) */\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * if the caption received is real time text\n   */\n  isRealTimeText?: boolean;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * if the caption received is a non finalized caption\n   */\n  isPartial?: boolean;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * if the caption received is from the local user\n   */\n  isLocalUser?: boolean;\n};\n\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, finalized?: boolean) => Promise<void>;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: CaptionsInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    /* @conditional-compile-remove(rtt) */\n    isRealTimeTextOn,\n    /* @conditional-compile-remove(rtt) */\n    onSendRealTimeText,\n    /* @conditional-compile-remove(rtt) */\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n  /* @conditional-compile-remove(rtt) */\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n  /* @conditional-compile-remove(rtt) */\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isPartial) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  /* @conditional-compile-remove(rtt) */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  /* @conditional-compile-remove(rtt) */\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {\n            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (\n              <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n            )\n          }\n          {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (\n            <ul\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor)\n              }\n              data-ui-id=\"captions-banner-inner\"\n            >\n              {captions.map((caption) => {\n                /* @conditional-compile-remove(rtt) */\n                if (caption.isRealTimeText) {\n                  return (\n                    <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                      <RealTimeText {...caption} isTyping={caption.isPartial} onRenderAvatar={onRenderAvatar} />\n                    </li>\n                  );\n                }\n                return (\n                  <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </li>\n                );\n              })}\n            </ul>\n          )}\n          {\n            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (\n              <TextField\n                label={strings.realTimeTextInputBoxDefaultText}\n                value={textFieldValue}\n                onKeyDown={handleKeyDown}\n                onChange={(_, newValue) => {\n                  setTextFieldValue(newValue || '');\n                  onSendRealTimeText(newValue || '');\n                }}\n              />\n            )\n          }\n          {!isCaptionsOn && /* @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rtt) */\nimport { RealTimeText } from './RealTimeText';\n/* @conditional-compile-remove(rtt) */\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\n/* @conditional-compile-remove(rtt) */\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n};\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The sequence id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * If message originated from the local participant\n   */\n  isMe: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;\n  /* @conditional-compile-remove(rtt) */\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    /* @conditional-compile-remove(rtt) */\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    /* @conditional-compile-remove(rtt) */\n    isRealTimeTextOn,\n    /* @conditional-compile-remove(rtt) */\n    onSendRealTimeText,\n    /* @conditional-compile-remove(rtt) */\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n  /* @conditional-compile-remove(rtt) */\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  /* @conditional-compile-remove(rtt) */\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress] as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n  /* @conditional-compile-remove(rtt) */\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n  /* @conditional-compile-remove(rtt) */\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  /* @conditional-compile-remove(rtt) */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  /* @conditional-compile-remove(rtt) */\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsTrampoline = (): JSX.Element => {\n    /* @conditional-compile-remove(rtt) */\n    return (\n      <>\n        {mergedCaptions.map((caption) => {\n          if (caption) {\n            if ('message' in caption) {\n              return (\n                <li key={`RealTimeText - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </li>\n              );\n            }\n            return (\n              <li key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </li>\n            );\n          }\n          return <></>;\n        })}\n      </>\n    );\n\n    return (\n      <>\n        {captions.map((caption) => {\n          return (\n            <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n              <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n            </li>\n          );\n        })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {\n            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (\n              <div style={{ paddingTop: '0.5rem' }}>\n                <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n              </div>\n            )\n          }\n          {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (\n            <ul\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor)\n              }\n              data-ui-id=\"captions-banner-inner\"\n            >\n              {captionsTrampoline()}\n            </ul>\n          )}\n          {\n            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (\n              <TextField\n                label={strings.realTimeTextInputBoxDefaultText}\n                value={textFieldValue}\n                onKeyDown={handleKeyDown}\n                onChange={(_, newValue) => {\n                  setTextFieldValue(newValue || '');\n                  onSendRealTimeText(newValue || '', false);\n                }}\n              />\n            )\n          }\n          {!isCaptionsOn && /* @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { OverlayModeTypes, Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';
+import { VideoGalleryTogetherModeParticipantPosition } from '../types';
 /**
  * Reaction overlay component props
  *
@@ -28,6 +29,7 @@ export interface MeetingReactionOverlayProps {
      * Remote participant's reaction event.
      */
     remoteParticipants?: VideoGalleryRemoteParticipant[];
+    togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;
 }
 /**
  * Reaction overlay component

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js

@@ -3,6 +3,10 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
 import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
+/* @conditional-compile-remove(together-mode) */
+import { TogetherModeOverlay } from './TogetherModeOverlay';
+/* @conditional-compile-remove(together-mode) */
+import { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';
 /**
  * Emoji max size
  * @internal
@@ -26,7 +30,8 @@ const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
  * @internal
  */
 export const MeetingReactionOverlay = (props) => {
-    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants } = props;
+    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, 
+    /* @conditional-compile-remove(together-mode) */ togetherModeSeatPositions } = props;
     const [emojiSizePx, setEmojiSizePx] = useState(0);
     const [divHeight, setDivHeight] = useState(0);
     const [divWidth, setDivWidth] = useState(0);
@@ -63,6 +68,12 @@ export const MeetingReactionOverlay = (props) => {
         return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
             React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
     }
+    else if (props.overlayMode === 'together-mode') {
+        /* @conditional-compile-remove(together-mode) */
+        return (React.createElement("div", { style: Object.assign({}, togetherModeMeetingOverlayStyle) },
+            React.createElement(TogetherModeOverlay, { emojiSize: emojiSizePx, reactionResources: reactionResources, localParticipant: localParticipant !== null && localParticipant !== void 0 ? localParticipant : {}, remoteParticipants: remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : [], togetherModeSeatPositions: togetherModeSeatPositions !== null && togetherModeSeatPositions !== void 0 ? togetherModeSeatPositions : {} })));
+        return React.createElement(React.Fragment, null);
+    }
     else {
         return React.createElement(React.Fragment, null);
     }

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  OverlayModeTypes,\n  Reaction,\n  ReactionResources,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n\n/**\n * Reaction overlay component props\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport interface MeetingReactionOverlayProps {\n  /**\n   * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n   */\n  overlayMode: OverlayModeTypes;\n  /**\n   * Received reaction when overlay mode is grid-tile\n   */\n  reaction?: Reaction;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources: ReactionResources;\n  /**\n   * Local participant's reaction event that comes from participant object.\n   */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /**\n   * Remote participant's reaction event.\n   */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * Emoji max size\n * @internal\n */\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/**\n * Emoji min size\n * @internal\n */\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/**\n * Emoji resize scale constant\n * @internal\n */\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/**\n * Reaction overlay component\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n  const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants } = props;\n  const [emojiSizePx, setEmojiSizePx] = useState(0);\n  const [divHeight, setDivHeight] = useState(0);\n  const [divWidth, setDivWidth] = useState(0);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const domRect = entries.at(0)?.contentRect;\n      const width = domRect !== undefined ? domRect.width : 0;\n      const height = domRect !== undefined ? domRect.height : 0;\n      const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n      // we only want to set the persona size if it has changed\n      if (reactionEmojiCalcSize !== emojiSizePx) {\n        setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n      }\n\n      if (height !== divHeight) {\n        setDivHeight(height);\n      }\n\n      if (width !== divWidth) {\n        setDivWidth(width);\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  if (overlayMode === 'grid-tiles') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <ParticipantVideoTileOverlay\n          emojiSize={emojiSizePx}\n          reaction={reaction}\n          reactionResources={reactionResources}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <RemoteContentShareReactionOverlay\n          hostDivHeight={divHeight}\n          hostDivWidth={divWidth}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant}\n          remoteParticipants={remoteParticipants}\n        />\n      </div>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}
+{"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  OverlayModeTypes,\n  Reaction,\n  ReactionResources,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\n/* @conditional-compile-remove(together-mode) */\nimport { VideoGalleryTogetherModeParticipantPosition } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeOverlay } from './TogetherModeOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';\n\n/**\n * Reaction overlay component props\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport interface MeetingReactionOverlayProps {\n  /**\n   * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n   */\n  overlayMode: OverlayModeTypes;\n  /**\n   * Received reaction when overlay mode is grid-tile\n   */\n  reaction?: Reaction;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources: ReactionResources;\n  /**\n   * Local participant's reaction event that comes from participant object.\n   */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /**\n   * Remote participant's reaction event.\n   */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n\n  /* @conditional-compile-remove(together-mode) */\n  togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;\n}\n\n/**\n * Emoji max size\n * @internal\n */\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/**\n * Emoji min size\n * @internal\n */\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/**\n * Emoji resize scale constant\n * @internal\n */\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/**\n * Reaction overlay component\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n  const {\n    overlayMode,\n    reaction,\n    reactionResources,\n    localParticipant,\n    remoteParticipants,\n    /* @conditional-compile-remove(together-mode) */ togetherModeSeatPositions\n  } = props;\n  const [emojiSizePx, setEmojiSizePx] = useState(0);\n  const [divHeight, setDivHeight] = useState(0);\n  const [divWidth, setDivWidth] = useState(0);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const domRect = entries.at(0)?.contentRect;\n      const width = domRect !== undefined ? domRect.width : 0;\n      const height = domRect !== undefined ? domRect.height : 0;\n      const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n      // we only want to set the persona size if it has changed\n      if (reactionEmojiCalcSize !== emojiSizePx) {\n        setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n      }\n\n      if (height !== divHeight) {\n        setDivHeight(height);\n      }\n\n      if (width !== divWidth) {\n        setDivWidth(width);\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  if (overlayMode === 'grid-tiles') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <ParticipantVideoTileOverlay\n          emojiSize={emojiSizePx}\n          reaction={reaction}\n          reactionResources={reactionResources}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <RemoteContentShareReactionOverlay\n          hostDivHeight={divHeight}\n          hostDivWidth={divWidth}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant}\n          remoteParticipants={remoteParticipants}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'together-mode') {\n    /* @conditional-compile-remove(together-mode) */\n    return (\n      <div\n        style={{\n          ...togetherModeMeetingOverlayStyle\n        }}\n      >\n        <TogetherModeOverlay\n          emojiSize={emojiSizePx}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}\n          remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}\n          togetherModeSeatPositions={togetherModeSeatPositions ?? {}}\n        />\n      </div>\n    );\n    return <></>;\n  } else {\n    return <></>;\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/RealTimeText.d.ts

@@ -18,7 +18,7 @@ export interface RealTimeTextProps {
     /**
      * RealTimeText id
      */
-    id: string;
+    id: number;
     /**
      * Display name of the user
      */
@@ -26,7 +26,7 @@ export interface RealTimeTextProps {
     /**
      * RealTimeText content
      */
-    captionText: string;
+    message: string;
     /**
      * user id of the user
      */
@@ -44,7 +44,7 @@ export interface RealTimeTextProps {
     /**
      * Boolean indicating whether the RealTimeText is from the local user
      */
-    isLocalUser?: boolean;
+    isMe?: boolean;
     /**
      * Strings for RealTimeText
      */

package/dist/dist-esm/react-components/src/components/RealTimeText.js

@@ -14,7 +14,7 @@ import { useLocale } from '../localization';
  * A component for displaying a single line of RealTimeText
  */
 export const RealTimeText = (props) => {
-    const { displayName, userId, captionText, onRenderAvatar, isTyping } = props;
+    const { displayName, userId, message, onRenderAvatar, isTyping } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.realTimeText;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -38,6 +38,6 @@ export const RealTimeText = (props) => {
             React.createElement(Stack, { className: displayNameContainerClassName, horizontal: true },
                 React.createElement(Text, { className: displayNameClassName }, displayName),
                 isTyping && React.createElement(Text, { className: isTypingClassName(theme) }, strings === null || strings === void 0 ? void 0 : strings.isTypingText)),
-            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText))));
+            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, message))));
 };
 //# sourceMappingURL=RealTimeText.js.map

package/dist/dist-esm/react-components/src/components/RealTimeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RealTimeText.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RealTimeText.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,sCAAsC;AACtC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,sCAAsC;AACtC,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAwD5C,sCAAsC;AACtC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,aAAa,EAAC,OAAO,EACrB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC;QAE1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,IAAC,SAAS,EAAE,6BAA6B,EAAE,UAAU;gBACzD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ;gBAC1D,QAAQ,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAQ,CAChF;YACR,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport { IPersona, Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport React from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(rtt) */\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName,\n  isTypingClassName,\n  rttContainerClassName\n} from './styles/Captions.style';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * strings for rtt\n */\nexport interface RealTimeTextStrings {\n  /**\n   * String indicating that the user is typing\n   */\n  isTypingText?: string;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * Props for a single line of RealTimeText.\n */\nexport interface RealTimeTextProps {\n  /**\n   * RealTimeText id\n   */\n  id: string;\n  /**\n   * Display name of the user\n   */\n  displayName: string;\n  /**\n   * RealTimeText content\n   */\n  captionText: string;\n  /**\n   * user id of the user\n   */\n  userId?: string;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Boolean indicating whether the RealTimeText is still in progress\n   */\n  isTyping?: boolean;\n  /**\n   * Boolean indicating whether the RealTimeText is from the local user\n   */\n  isLocalUser?: boolean;\n  /**\n   * Strings for RealTimeText\n   */\n  strings?: RealTimeTextStrings;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * A component for displaying a single line of RealTimeText\n */\nexport const RealTimeText = (props: RealTimeTextProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar, isTyping } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.realTimeText;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack\n      horizontal\n      verticalAlign=\"start\"\n      horizontalAlign=\"start\"\n      className={rttContainerClassName(theme, isTyping ?? false)}\n    >\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack className={displayNameContainerClassName} horizontal>\n          <Text className={displayNameClassName}>{displayName}</Text>\n          {isTyping && <Text className={isTypingClassName(theme)}>{strings?.isTypingText}</Text>}\n        </Stack>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RealTimeText.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RealTimeText.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,sCAAsC;AACtC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,sCAAsC;AACtC,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAwD5C,sCAAsC;AACtC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,aAAa,EAAC,OAAO,EACrB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC;QAE1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,IAAC,SAAS,EAAE,6BAA6B,EAAE,UAAU;gBACzD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ;gBAC1D,QAAQ,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAQ,CAChF;YACR,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,OAAO,CACG,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport { IPersona, Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport React from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(rtt) */\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName,\n  isTypingClassName,\n  rttContainerClassName\n} from './styles/Captions.style';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * strings for rtt\n */\nexport interface RealTimeTextStrings {\n  /**\n   * String indicating that the user is typing\n   */\n  isTypingText?: string;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * Props for a single line of RealTimeText.\n */\nexport interface RealTimeTextProps {\n  /**\n   * RealTimeText id\n   */\n  id: number;\n  /**\n   * Display name of the user\n   */\n  displayName: string;\n  /**\n   * RealTimeText content\n   */\n  message: string;\n  /**\n   * user id of the user\n   */\n  userId?: string;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Boolean indicating whether the RealTimeText is still in progress\n   */\n  isTyping?: boolean;\n  /**\n   * Boolean indicating whether the RealTimeText is from the local user\n   */\n  isMe?: boolean;\n  /**\n   * Strings for RealTimeText\n   */\n  strings?: RealTimeTextStrings;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * A component for displaying a single line of RealTimeText\n */\nexport const RealTimeText = (props: RealTimeTextProps): JSX.Element => {\n  const { displayName, userId, message, onRenderAvatar, isTyping } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.realTimeText;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack\n      horizontal\n      verticalAlign=\"start\"\n      horizontalAlign=\"start\"\n      className={rttContainerClassName(theme, isTyping ?? false)}\n    >\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack className={displayNameContainerClassName} horizontal>\n          <Text className={displayNameClassName}>{displayName}</Text>\n          {isTyping && <Text className={isTypingClassName(theme)}>{strings?.isTypingText}</Text>}\n        </Stack>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {message}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RealTimeTextModal.d.ts

@@ -28,8 +28,11 @@ export interface RealTimeTextModalProps {
     showModal?: boolean;
     /** The function to dismiss the modal */
     onDismissModal?: () => void;
-    /** The function to start RealTimeText */
-    onStartRealTimeText?: () => Promise<void>;
+    /**
+     * Use this function to show RealTimeText UI in the calling experience.
+     * Note that real time text should not be started for everyone in the call until the first real time text is received.
+     */
+    onStartRealTimeText?: () => void;
 }
 /**
  * @beta