@azure/communication-react 1.28.0-alpha-202506060018 → 1.28.0-alpha-202506110019
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/communication-react.d.ts +7 -1
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-Bw7J3RuW.js → ChatMessageComponentAsRichTextEditBox-0CJ2pkhy.js} +8 -9
- package/dist/dist-cjs/communication-react/ChatMessageComponentAsRichTextEditBox-0CJ2pkhy.js.map +1 -0
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-B8Z4lRZE.js → RichTextSendBoxWrapper-8-rNMb_Z.js} +2 -2
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-B8Z4lRZE.js.map → RichTextSendBoxWrapper-8-rNMb_Z.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{index-DAvfOWzU.js → index-NXI7aNBc.js} +127 -39
- package/dist/dist-cjs/communication-react/index-NXI7aNBc.js.map +1 -0
- package/dist/dist-cjs/communication-react/index.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/captionsSelector.js +2 -1
- package/dist/dist-esm/calling-component-bindings/src/captionsSelector.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js +5 -2
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.js +36 -1
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.js +9 -6
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js +7 -9
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.d.ts +3 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js +6 -6
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js +13 -0
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.js +12 -0
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +12 -9
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js +30 -9
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js.map +1 -1
- package/package.json +1 -1
- package/dist/dist-cjs/communication-react/ChatMessageComponentAsRichTextEditBox-Bw7J3RuW.js.map +0 -1
- package/dist/dist-cjs/communication-react/index-DAvfOWzU.js.map +0 -1
@@ -1 +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.28.0-alpha-
|
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.28.0-alpha-202506110019';\n"]}
|
@@ -69,7 +69,8 @@ export const captionsBannerSelector = reselect.createSelector([
|
|
69
69
|
displayName: finalDisplayName !== null && finalDisplayName !== void 0 ? finalDisplayName : 'Unnamed Participant',
|
70
70
|
captionText: c.captionText,
|
71
71
|
userId,
|
72
|
-
createdTimeStamp: c.timestamp
|
72
|
+
createdTimeStamp: c.timestamp,
|
73
|
+
isFinalized: c.resultType === 'Final'
|
73
74
|
};
|
74
75
|
});
|
75
76
|
const completedRealTimeTexts = (_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) === null || _a === void 0 ? void 0 : _a.filter((rtt) => rtt.message !== '').map((rtt) => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"captionsSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/captionsSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CallClientState, CaptionsInfo } from '@internal/calling-stateful-client';\nimport { RealTimeTextInfo, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport {\n CallingBaseSelectorProps,\n getDisplayName,\n getIdentifier,\n getStartCaptionsInProgress,\n getSupportedCaptionLanguages\n} from './baseSelectors';\nimport { allRemoteParticipantsSelector } from './remoteParticipantsSelector';\nimport { getRealTimeTextStatus, getRealTimeText } from './baseSelectors';\nimport {\n getCaptions,\n getCaptionsStatus,\n getCurrentCaptionLanguage,\n getCurrentSpokenLanguage,\n getSupportedSpokenLanguages\n} from './baseSelectors';\nimport * as reselect from 'reselect';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CaptionsInformation, SupportedCaptionLanguage, SupportedSpokenLanguage } from '@internal/react-components';\nimport { RealTimeTextInformation } from '@internal/react-components';\nimport { getRemoteParticipantDisplayName } from './utils/callUtils';\n\n/**\n * Selector type for the {@link StartCaptionsButton} component.\n * @public\n */\nexport type StartCaptionsButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked: boolean;\n currentCaptionLanguage: string;\n currentSpokenLanguage: string;\n};\n\n/**\n * Selector for {@link StartCaptionsButton} component.\n *\n * @public\n */\nexport const startCaptionsButtonSelector: StartCaptionsButtonSelector = reselect.createSelector(\n [getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage],\n (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {\n return {\n checked: isCaptionsFeatureActive ?? false,\n currentCaptionLanguage: currentCaptionLanguage ?? '',\n currentSpokenLanguage: currentSpokenLanguage ?? 'en-us'\n };\n }\n);\n\n/**\n * Selector type for components for Changing caption language and spoken language\n * @public\n */\nexport type CaptionSettingsSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n supportedCaptionLanguages: SupportedCaptionLanguage[];\n currentCaptionLanguage: SupportedCaptionLanguage;\n supportedSpokenLanguages: SupportedSpokenLanguage[];\n currentSpokenLanguage: SupportedSpokenLanguage;\n isCaptionsFeatureActive: boolean;\n};\n\n/**\n * Selector for Changing caption language and spoken language\n *\n * @public\n */\nexport const captionSettingsSelector: CaptionSettingsSelector = reselect.createSelector(\n [\n getSupportedCaptionLanguages,\n getCurrentCaptionLanguage,\n getSupportedSpokenLanguages,\n getCurrentSpokenLanguage,\n getCaptionsStatus\n ],\n (\n supportedCaptionLanguages,\n currentCaptionLanguage,\n supportedSpokenLanguages,\n currentSpokenLanguage,\n isCaptionsFeatureActive\n ) => {\n return {\n supportedCaptionLanguages: supportedCaptionLanguages ?? [],\n currentCaptionLanguage: currentCaptionLanguage ?? 'en',\n supportedSpokenLanguages: supportedSpokenLanguages ?? ['en-us'],\n currentSpokenLanguage: currentSpokenLanguage ?? 'en-us',\n isCaptionsFeatureActive: isCaptionsFeatureActive ?? false\n };\n }\n);\n/**\n * Selector type for the {@link CaptionsBanner} component.\n * @public\n */\nexport type CaptionsBannerSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n captions: CaptionsInformation[];\n realTimeTexts: {\n completedMessages?: RealTimeTextInformation[];\n currentInProgress?: RealTimeTextInformation[];\n myInProgress?: RealTimeTextInformation;\n };\n isCaptionsOn: boolean;\n startCaptionsInProgress: boolean;\n isRealTimeTextOn: boolean;\n latestLocalRealTimeText: RealTimeTextInformation;\n};\n\n/**\n * Selector for {@link CaptionsBanner} component.\n *\n * @public\n */\nexport const captionsBannerSelector: CaptionsBannerSelector = reselect.createSelector(\n [\n getCaptions,\n getRealTimeText,\n getCaptionsStatus,\n getRealTimeTextStatus,\n getStartCaptionsInProgress,\n allRemoteParticipantsSelector,\n getDisplayName,\n getIdentifier\n ],\n (\n captions,\n realTimeTexts,\n isCaptionsFeatureActive,\n isRealTimeTextActive,\n startCaptionsInProgress,\n allRemoteParticipants,\n displayName,\n identifier\n ) => {\n const captionsInfo = captions?.map((c, index) => {\n const userId = getCaptionsSpeakerIdentifier(c);\n let finalDisplayName;\n if (userId === identifier) {\n finalDisplayName = displayName;\n } else {\n finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n }\n\n return {\n id: (finalDisplayName ?? 'Unnamed Participant') + index,\n displayName: finalDisplayName ?? 'Unnamed Participant',\n captionText: c.captionText,\n userId,\n createdTimeStamp: c.timestamp\n };\n });\n\n const completedRealTimeTexts = realTimeTexts?.completedMessages\n ?.filter((rtt) => rtt.message !== '')\n .map((rtt) => {\n const userId = getRealTimeTextSpeakerIdentifier(rtt);\n return {\n id: rtt.sequenceId,\n displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n message: rtt.message,\n userId,\n isTyping: rtt.resultType === 'Partial',\n isMe: rtt.isMe,\n finalizedTimeStamp: rtt.updatedTimestamp\n };\n });\n\n const inProgressRealTimeTexts = realTimeTexts?.currentInProgress\n ?.filter((rtt) => rtt.message !== '')\n .map((rtt) => {\n const userId = getRealTimeTextSpeakerIdentifier(rtt);\n return {\n id: rtt.sequenceId,\n displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n message: rtt.message,\n userId,\n isTyping: rtt.resultType === 'Partial',\n isMe: rtt.isMe,\n finalizedTimeStamp: rtt.updatedTimestamp\n };\n });\n\n const myInProgress =\n realTimeTexts?.myInProgress && realTimeTexts.myInProgress.message !== ''\n ? {\n id: realTimeTexts.myInProgress.sequenceId,\n displayName: displayName,\n message: realTimeTexts.myInProgress.message,\n userId: identifier,\n isTyping: realTimeTexts.myInProgress.resultType === 'Partial',\n isMe: true,\n finalizedTimeStamp: realTimeTexts.myInProgress.updatedTimestamp\n }\n : undefined;\n\n // find the last final local real time text caption if myInProgress is not available\n let latestLocalRealTimeText;\n\n if (!myInProgress) {\n latestLocalRealTimeText =\n realTimeTexts &&\n realTimeTexts.completedMessages &&\n realTimeTexts.completedMessages\n .slice()\n .reverse()\n .find((rtt) => rtt.isMe);\n }\n\n return {\n captions: captionsInfo ?? [],\n\n realTimeTexts: {\n completedMessages: completedRealTimeTexts as RealTimeTextInformation[],\n currentInProgress: inProgressRealTimeTexts as RealTimeTextInformation[],\n myInProgress: myInProgress as RealTimeTextInformation\n },\n isCaptionsOn: isCaptionsFeatureActive ?? false,\n startCaptionsInProgress: startCaptionsInProgress ?? false,\n\n isRealTimeTextOn: isRealTimeTextActive ?? false,\n\n latestLocalRealTimeText: (myInProgress ?? latestLocalRealTimeText) as RealTimeTextInformation\n };\n }\n);\n\nconst getCaptionsSpeakerIdentifier = (captions: CaptionsInfo): string => {\n return captions.speaker.identifier ? toFlatCommunicationIdentifier(captions.speaker.identifier) : '';\n};\n\nconst getRealTimeTextSpeakerIdentifier = (realTimeText: RealTimeTextInfo): string => {\n return realTimeText.sender.identifier ? toFlatCommunicationIdentifier(realTimeText.sender.identifier) : '';\n};\n\nconst getRealTimeTextDisplayName = (\n realTimeText: RealTimeTextInfo,\n identifier: string,\n allRemoteParticipants:\n | {\n [keys: string]: RemoteParticipantState;\n }\n | undefined,\n displayName: string | undefined,\n userId: string\n): string => {\n let finalDisplayName;\n if (userId === identifier) {\n finalDisplayName = displayName;\n } else {\n finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n }\n return finalDisplayName ?? 'Unnamed Participant';\n};\n"]}
|
1
|
+
{"version":3,"file":"captionsSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/captionsSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CallClientState, CaptionsInfo } from '@internal/calling-stateful-client';\nimport { RealTimeTextInfo, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport {\n CallingBaseSelectorProps,\n getDisplayName,\n getIdentifier,\n getStartCaptionsInProgress,\n getSupportedCaptionLanguages\n} from './baseSelectors';\nimport { allRemoteParticipantsSelector } from './remoteParticipantsSelector';\nimport { getRealTimeTextStatus, getRealTimeText } from './baseSelectors';\nimport {\n getCaptions,\n getCaptionsStatus,\n getCurrentCaptionLanguage,\n getCurrentSpokenLanguage,\n getSupportedSpokenLanguages\n} from './baseSelectors';\nimport * as reselect from 'reselect';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CaptionsInformation, SupportedCaptionLanguage, SupportedSpokenLanguage } from '@internal/react-components';\nimport { RealTimeTextInformation } from '@internal/react-components';\nimport { getRemoteParticipantDisplayName } from './utils/callUtils';\n\n/**\n * Selector type for the {@link StartCaptionsButton} component.\n * @public\n */\nexport type StartCaptionsButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked: boolean;\n currentCaptionLanguage: string;\n currentSpokenLanguage: string;\n};\n\n/**\n * Selector for {@link StartCaptionsButton} component.\n *\n * @public\n */\nexport const startCaptionsButtonSelector: StartCaptionsButtonSelector = reselect.createSelector(\n [getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage],\n (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {\n return {\n checked: isCaptionsFeatureActive ?? false,\n currentCaptionLanguage: currentCaptionLanguage ?? '',\n currentSpokenLanguage: currentSpokenLanguage ?? 'en-us'\n };\n }\n);\n\n/**\n * Selector type for components for Changing caption language and spoken language\n * @public\n */\nexport type CaptionSettingsSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n supportedCaptionLanguages: SupportedCaptionLanguage[];\n currentCaptionLanguage: SupportedCaptionLanguage;\n supportedSpokenLanguages: SupportedSpokenLanguage[];\n currentSpokenLanguage: SupportedSpokenLanguage;\n isCaptionsFeatureActive: boolean;\n};\n\n/**\n * Selector for Changing caption language and spoken language\n *\n * @public\n */\nexport const captionSettingsSelector: CaptionSettingsSelector = reselect.createSelector(\n [\n getSupportedCaptionLanguages,\n getCurrentCaptionLanguage,\n getSupportedSpokenLanguages,\n getCurrentSpokenLanguage,\n getCaptionsStatus\n ],\n (\n supportedCaptionLanguages,\n currentCaptionLanguage,\n supportedSpokenLanguages,\n currentSpokenLanguage,\n isCaptionsFeatureActive\n ) => {\n return {\n supportedCaptionLanguages: supportedCaptionLanguages ?? [],\n currentCaptionLanguage: currentCaptionLanguage ?? 'en',\n supportedSpokenLanguages: supportedSpokenLanguages ?? ['en-us'],\n currentSpokenLanguage: currentSpokenLanguage ?? 'en-us',\n isCaptionsFeatureActive: isCaptionsFeatureActive ?? false\n };\n }\n);\n/**\n * Selector type for the {@link CaptionsBanner} component.\n * @public\n */\nexport type CaptionsBannerSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n captions: CaptionsInformation[];\n realTimeTexts: {\n completedMessages?: RealTimeTextInformation[];\n currentInProgress?: RealTimeTextInformation[];\n myInProgress?: RealTimeTextInformation;\n };\n isCaptionsOn: boolean;\n startCaptionsInProgress: boolean;\n isRealTimeTextOn: boolean;\n latestLocalRealTimeText: RealTimeTextInformation;\n};\n\n/**\n * Selector for {@link CaptionsBanner} component.\n *\n * @public\n */\nexport const captionsBannerSelector: CaptionsBannerSelector = reselect.createSelector(\n [\n getCaptions,\n getRealTimeText,\n getCaptionsStatus,\n getRealTimeTextStatus,\n getStartCaptionsInProgress,\n allRemoteParticipantsSelector,\n getDisplayName,\n getIdentifier\n ],\n (\n captions,\n realTimeTexts,\n isCaptionsFeatureActive,\n isRealTimeTextActive,\n startCaptionsInProgress,\n allRemoteParticipants,\n displayName,\n identifier\n ) => {\n const captionsInfo = captions?.map((c, index) => {\n const userId = getCaptionsSpeakerIdentifier(c);\n let finalDisplayName;\n if (userId === identifier) {\n finalDisplayName = displayName;\n } else {\n finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n }\n\n return {\n id: (finalDisplayName ?? 'Unnamed Participant') + index,\n displayName: finalDisplayName ?? 'Unnamed Participant',\n captionText: c.captionText,\n userId,\n createdTimeStamp: c.timestamp,\n isFinalized: c.resultType === 'Final'\n };\n });\n\n const completedRealTimeTexts = realTimeTexts?.completedMessages\n ?.filter((rtt) => rtt.message !== '')\n .map((rtt) => {\n const userId = getRealTimeTextSpeakerIdentifier(rtt);\n return {\n id: rtt.sequenceId,\n displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n message: rtt.message,\n userId,\n isTyping: rtt.resultType === 'Partial',\n isMe: rtt.isMe,\n finalizedTimeStamp: rtt.updatedTimestamp\n };\n });\n\n const inProgressRealTimeTexts = realTimeTexts?.currentInProgress\n ?.filter((rtt) => rtt.message !== '')\n .map((rtt) => {\n const userId = getRealTimeTextSpeakerIdentifier(rtt);\n return {\n id: rtt.sequenceId,\n displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n message: rtt.message,\n userId,\n isTyping: rtt.resultType === 'Partial',\n isMe: rtt.isMe,\n finalizedTimeStamp: rtt.updatedTimestamp\n };\n });\n\n const myInProgress =\n realTimeTexts?.myInProgress && realTimeTexts.myInProgress.message !== ''\n ? {\n id: realTimeTexts.myInProgress.sequenceId,\n displayName: displayName,\n message: realTimeTexts.myInProgress.message,\n userId: identifier,\n isTyping: realTimeTexts.myInProgress.resultType === 'Partial',\n isMe: true,\n finalizedTimeStamp: realTimeTexts.myInProgress.updatedTimestamp\n }\n : undefined;\n\n // find the last final local real time text caption if myInProgress is not available\n let latestLocalRealTimeText;\n\n if (!myInProgress) {\n latestLocalRealTimeText =\n realTimeTexts &&\n realTimeTexts.completedMessages &&\n realTimeTexts.completedMessages\n .slice()\n .reverse()\n .find((rtt) => rtt.isMe);\n }\n\n return {\n captions: captionsInfo ?? [],\n realTimeTexts: {\n completedMessages: completedRealTimeTexts as RealTimeTextInformation[],\n currentInProgress: inProgressRealTimeTexts as RealTimeTextInformation[],\n myInProgress: myInProgress as RealTimeTextInformation\n },\n isCaptionsOn: isCaptionsFeatureActive ?? false,\n startCaptionsInProgress: startCaptionsInProgress ?? false,\n isRealTimeTextOn: isRealTimeTextActive ?? false,\n latestLocalRealTimeText: (myInProgress ?? latestLocalRealTimeText) as RealTimeTextInformation\n };\n }\n);\n\nconst getCaptionsSpeakerIdentifier = (captions: CaptionsInfo): string => {\n return captions.speaker.identifier ? toFlatCommunicationIdentifier(captions.speaker.identifier) : '';\n};\n\nconst getRealTimeTextSpeakerIdentifier = (realTimeText: RealTimeTextInfo): string => {\n return realTimeText.sender.identifier ? toFlatCommunicationIdentifier(realTimeText.sender.identifier) : '';\n};\n\nconst getRealTimeTextDisplayName = (\n realTimeText: RealTimeTextInfo,\n identifier: string,\n allRemoteParticipants:\n | {\n [keys: string]: RemoteParticipantState;\n }\n | undefined,\n displayName: string | undefined,\n userId: string\n): string => {\n let finalDisplayName;\n if (userId === identifier) {\n finalDisplayName = displayName;\n } else {\n finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n }\n return finalDisplayName ?? 'Unnamed Participant';\n};\n"]}
|
@@ -125,8 +125,11 @@ class ProxyDeviceManager {
|
|
125
125
|
navigator.permissions.query({ name: 'camera' }),
|
126
126
|
navigator.permissions.query({ name: 'microphone' })
|
127
127
|
]);
|
128
|
-
|
129
|
-
|
128
|
+
// Use logical OR to combine the SDK state with the Permissions API state.
|
129
|
+
// This way we can get a more accurate picture of the device permission state.
|
130
|
+
// If the SDK state is 'granted', we don't need to check the Permissions API state.
|
131
|
+
hasCameraPermission || (hasCameraPermission = cameraPermissions.state === 'granted');
|
132
|
+
hasMicPermission || (hasMicPermission = micPermissions.state === 'granted');
|
130
133
|
}
|
131
134
|
catch (e) {
|
132
135
|
console.info('Permissions API is not supported by browser', e);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DeviceManagerDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/DeviceManagerDeclarative.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, DeviceAccess, DeviceManager, VideoDeviceInfo } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\nimport { InternalCallContext } from './InternalCallContext';\n\nimport { LocalVideoStream } from '@azure/communication-calling';\n\n/**\n * Defines the additional methods added by the stateful on top of {@link @azure/communication-calling#DeviceManager}.\n *\n * @public\n */\nexport interface StatefulDeviceManager extends DeviceManager {\n /**\n * Sets the selectedCamera in the {@link DeviceManagerState}. This is completely developer driven and is not tied in\n * any way to {@link @azure/communication-calling#DeviceManager}. It is entirely contained in\n * {@link StatefulDeviceManager}. See also {@link DeviceManagerState.selectedCamera}.\n */\n selectCamera: (device: VideoDeviceInfo) => void;\n\n /**\n * Gets the list of unparented video streams. This is a list of video streams that have not been added to a\n * {@link @azure/communication-calling#Call}. This is useful for developers who want to interact with rendered\n * video streams before they have started a call. See also {@link @azure/communication-react#CallClient.createView}.\n *\n * @public\n */\n getUnparentedVideoStreams: () => LocalVideoStream[];\n}\n\n/**\n * ProxyDeviceManager proxies DeviceManager and subscribes to all events that affect device manager state. State updates\n * are set on the provided context. Also any queries for state are proxied and stored in state as well. Only one device\n * manager should exist for a given CallClient so if CallClient.getDeviceManager is called multiple times, either a\n * cached ProxyDeviceManager should be returned or the existing ProxyDeviceManager should be destructed via destructor()\n * and a new ProxyDeviceManager created.\n */\nclass ProxyDeviceManager implements ProxyHandler<DeviceManager> {\n private _deviceManager: DeviceManager;\n private _context: CallContext;\n\n constructor(deviceManager: DeviceManager, context: CallContext) {\n this._deviceManager = deviceManager;\n this._context = context;\n\n this.setDeviceManager();\n this.subscribe();\n }\n\n private setDeviceManager = (): void => {\n // isSpeakerSelectionAvailable, selectedMicrophone, and selectedSpeaker are properties on DeviceManager. Since they\n // are not functions we can't proxy them so we'll update whenever we think they may need updating such as at\n // construction time or when certain events happen.\n this._context.setDeviceManagerIsSpeakerSelectionAvailable(this._deviceManager.isSpeakerSelectionAvailable);\n this._context.setDeviceManagerSelectedMicrophone(this._deviceManager.selectedMicrophone);\n this._context.setDeviceManagerSelectedSpeaker(this._deviceManager.selectedSpeaker);\n };\n\n private subscribe = (): void => {\n this._deviceManager.on('videoDevicesUpdated', this.videoDevicesUpdated);\n this._deviceManager.on('audioDevicesUpdated', this.audioDevicesUpdated);\n this._deviceManager.on('selectedMicrophoneChanged', this.selectedMicrophoneChanged);\n this._deviceManager.on('selectedSpeakerChanged', this.selectedSpeakerChanged);\n\n // Subscribe to browser camera permissions changes\n if (navigator.permissions) {\n try {\n navigator.permissions.query({ name: 'camera' as PermissionName }).then((cameraPermissions): void => {\n cameraPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not subscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n\n // Subscribe to browser microphone permissions changes\n try {\n navigator.permissions.query({ name: 'microphone' as PermissionName }).then((micPermissions): void => {\n micPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not subscribe to Permissions API Microphone changed events, API is not supported by browser',\n e\n );\n }\n }\n };\n\n /**\n * This is used to unsubscribe DeclarativeDeviceManager from the DeviceManager events.\n */\n public unsubscribe = (): void => {\n this._deviceManager.off('videoDevicesUpdated', this.videoDevicesUpdated);\n this._deviceManager.off('audioDevicesUpdated', this.audioDevicesUpdated);\n this._deviceManager.off('selectedMicrophoneChanged', this.selectedMicrophoneChanged);\n this._deviceManager.off('selectedSpeakerChanged', this.selectedSpeakerChanged);\n\n if (navigator.permissions) {\n // Unsubscribe from browser camera permissions changes\n try {\n navigator.permissions.query({ name: 'camera' as PermissionName }).then((cameraPermissions): void => {\n cameraPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n\n // Unsubscribe from browser microphone permissions changes\n try {\n navigator.permissions.query({ name: 'microphone' as PermissionName }).then((micPermissions): void => {\n micPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n }\n };\n\n private permissionsApiStateChangeHandler = async (): Promise<void> => {\n await this.updateDevicePermissionState();\n };\n\n /**\n * Used to set a camera inside the proxy device manager.\n *\n * @param videoDeviceInfo VideoDeviceInfo\n */\n public selectCamera = (videoDeviceInfo: VideoDeviceInfo): void => {\n this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);\n };\n\n private videoDevicesUpdated = async (): Promise<void> => {\n // Device Manager always has a camera with '' name if there are no real camera devices available.\n // We don't want to show that in the UI.\n const realCameras = (await this._deviceManager.getCameras()).filter((c) => !!c.name);\n this._context.setDeviceManagerCameras(dedupeById(realCameras));\n };\n\n private audioDevicesUpdated = async (): Promise<void> => {\n this._context.setDeviceManagerMicrophones(dedupeById(await this._deviceManager.getMicrophones()));\n if (this._deviceManager.isSpeakerSelectionAvailable) {\n this._context.setDeviceManagerSpeakers(dedupeById(await this._deviceManager.getSpeakers()));\n }\n };\n\n private selectedMicrophoneChanged = (): void => {\n this._context.setDeviceManagerSelectedMicrophone(this._deviceManager.selectedMicrophone);\n };\n\n private selectedSpeakerChanged = (): void => {\n this._context.setDeviceManagerSelectedSpeaker(this._deviceManager.selectedSpeaker);\n };\n\n private updateDevicePermissionState = async (sdkDeviceAccessState?: DeviceAccess): Promise<void> => {\n let hasCameraPermission = !!sdkDeviceAccessState?.video;\n let hasMicPermission = !!sdkDeviceAccessState?.audio;\n\n // Supplement the SDK values with values from the Permissions API to get a better understanding of the device\n // permission state. The SDK only uses the getUserMedia API to determine the device permission state. However,\n // this returns false if the camera is in use by another application. The Permissions API can provide more\n // information about the device permission state, but is not supported yet in Firefox or Android WebView.\n // Note: It also has the limitation where it cannot detect if the device is blocked by the Operating System\n // permissions.\n if (navigator.permissions) {\n try {\n const [cameraPermissions, micPermissions] = await Promise.all([\n navigator.permissions.query({ name: 'camera' as PermissionName }),\n navigator.permissions.query({ name: 'microphone' as PermissionName })\n ]);\n\n hasCameraPermission = cameraPermissions.state === 'granted';\n hasMicPermission = micPermissions.state === 'granted';\n } catch (e) {\n console.info('Permissions API is not supported by browser', e);\n }\n }\n\n this._context.setDeviceManagerDeviceAccess({\n video: hasCameraPermission,\n audio: hasMicPermission\n });\n this.setDeviceManager();\n };\n\n public get<P extends keyof DeviceManager>(target: DeviceManager, prop: P): any {\n switch (prop) {\n case 'getCameras': {\n return this._context.withAsyncErrorTeedToState((): Promise<VideoDeviceInfo[]> => {\n return target.getCameras().then((cameras: VideoDeviceInfo[]) => {\n // Device Manager always has a camera with '' name if there are no real camera devices available.\n // We don't want to show that in the UI.\n const realCameras = cameras.filter((c) => !!c.name);\n this._context.setDeviceManagerCameras(dedupeById(realCameras));\n return realCameras;\n });\n }, 'DeviceManager.getCameras');\n }\n case 'getMicrophones': {\n return this._context.withAsyncErrorTeedToState((): Promise<AudioDeviceInfo[]> => {\n return target.getMicrophones().then((microphones: AudioDeviceInfo[]) => {\n this._context.setDeviceManagerMicrophones(dedupeById(microphones));\n return microphones;\n });\n }, 'DeviceManager.getMicrophones');\n }\n case 'getSpeakers': {\n return this._context.withAsyncErrorTeedToState((): Promise<AudioDeviceInfo[]> => {\n return target.getSpeakers().then((speakers: AudioDeviceInfo[]) => {\n this._context.setDeviceManagerSpeakers(dedupeById(speakers));\n return speakers;\n });\n }, 'DeviceManager.getSpeakers');\n }\n case 'selectMicrophone': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['selectMicrophone']>): Promise<void> => {\n return target.selectMicrophone(...args).then(() => {\n this._context.setDeviceManagerSelectedMicrophone(target.selectedMicrophone);\n });\n },\n 'DeviceManager.selectMicrophone'\n );\n }\n case 'selectSpeaker': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['selectSpeaker']>): Promise<void> => {\n return target.selectSpeaker(...args).then(() => {\n this._context.setDeviceManagerSelectedSpeaker(target.selectedSpeaker);\n });\n },\n 'DeviceManager.selectSpeaker'\n );\n }\n case 'askDevicePermission': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['askDevicePermission']>): Promise<DeviceAccess> => {\n return target.askDevicePermission(...args).then(async (deviceAccess: DeviceAccess) => {\n await this.updateDevicePermissionState(deviceAccess);\n return deviceAccess;\n });\n },\n 'DeviceManager.askDevicePermission'\n );\n }\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n\n// TODO: Remove this when SDK no longer returns duplicate audio and video devices\n/** Helper function to dedupe duplicate audio and video devices obtained from SDK */\nconst dedupeById = <T extends { id: string }>(devices: T[]): T[] => {\n const ids = new Set();\n const uniqueDevices: T[] = [];\n devices.forEach((device: T) => {\n if (!ids.has(device.id)) {\n uniqueDevices.push(device);\n ids.add(device.id);\n }\n });\n return uniqueDevices;\n};\n\n/**\n * Creates a declarative DeviceManager by proxying DeviceManager with ProxyDeviceManager. The declarative DeviceManager\n * will put state updates in the given context.\n *\n * @param deviceManager - DeviceManager from SDK\n * @param context - CallContext from StatefulCallClient\n *\n * @private\n */\nexport const deviceManagerDeclaratify = (\n deviceManager: DeviceManager,\n context: CallContext,\n internalContext: InternalCallContext\n): DeviceManager => {\n const proxyDeviceManager = new ProxyDeviceManager(deviceManager, context);\n Object.defineProperty(deviceManager, 'unsubscribe', {\n configurable: false,\n value: () => proxyDeviceManager.unsubscribe()\n });\n Object.defineProperty(deviceManager, 'selectCamera', {\n configurable: false,\n value: (videoDeviceInfo: VideoDeviceInfo) => proxyDeviceManager.selectCamera(videoDeviceInfo)\n });\n\n Object.defineProperty(deviceManager, 'getUnparentedVideoStreams', {\n configurable: false,\n value: (): LocalVideoStream[] => internalContext.getUnparentedRenderInfos()\n });\n return new Proxy(deviceManager, proxyDeviceManager) as StatefulDeviceManager;\n};\n"]}
|
1
|
+
{"version":3,"file":"DeviceManagerDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/DeviceManagerDeclarative.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, DeviceAccess, DeviceManager, VideoDeviceInfo } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\nimport { InternalCallContext } from './InternalCallContext';\n\nimport { LocalVideoStream } from '@azure/communication-calling';\n\n/**\n * Defines the additional methods added by the stateful on top of {@link @azure/communication-calling#DeviceManager}.\n *\n * @public\n */\nexport interface StatefulDeviceManager extends DeviceManager {\n /**\n * Sets the selectedCamera in the {@link DeviceManagerState}. This is completely developer driven and is not tied in\n * any way to {@link @azure/communication-calling#DeviceManager}. It is entirely contained in\n * {@link StatefulDeviceManager}. See also {@link DeviceManagerState.selectedCamera}.\n */\n selectCamera: (device: VideoDeviceInfo) => void;\n\n /**\n * Gets the list of unparented video streams. This is a list of video streams that have not been added to a\n * {@link @azure/communication-calling#Call}. This is useful for developers who want to interact with rendered\n * video streams before they have started a call. See also {@link @azure/communication-react#CallClient.createView}.\n *\n * @public\n */\n getUnparentedVideoStreams: () => LocalVideoStream[];\n}\n\n/**\n * ProxyDeviceManager proxies DeviceManager and subscribes to all events that affect device manager state. State updates\n * are set on the provided context. Also any queries for state are proxied and stored in state as well. Only one device\n * manager should exist for a given CallClient so if CallClient.getDeviceManager is called multiple times, either a\n * cached ProxyDeviceManager should be returned or the existing ProxyDeviceManager should be destructed via destructor()\n * and a new ProxyDeviceManager created.\n */\nclass ProxyDeviceManager implements ProxyHandler<DeviceManager> {\n private _deviceManager: DeviceManager;\n private _context: CallContext;\n\n constructor(deviceManager: DeviceManager, context: CallContext) {\n this._deviceManager = deviceManager;\n this._context = context;\n\n this.setDeviceManager();\n this.subscribe();\n }\n\n private setDeviceManager = (): void => {\n // isSpeakerSelectionAvailable, selectedMicrophone, and selectedSpeaker are properties on DeviceManager. Since they\n // are not functions we can't proxy them so we'll update whenever we think they may need updating such as at\n // construction time or when certain events happen.\n this._context.setDeviceManagerIsSpeakerSelectionAvailable(this._deviceManager.isSpeakerSelectionAvailable);\n this._context.setDeviceManagerSelectedMicrophone(this._deviceManager.selectedMicrophone);\n this._context.setDeviceManagerSelectedSpeaker(this._deviceManager.selectedSpeaker);\n };\n\n private subscribe = (): void => {\n this._deviceManager.on('videoDevicesUpdated', this.videoDevicesUpdated);\n this._deviceManager.on('audioDevicesUpdated', this.audioDevicesUpdated);\n this._deviceManager.on('selectedMicrophoneChanged', this.selectedMicrophoneChanged);\n this._deviceManager.on('selectedSpeakerChanged', this.selectedSpeakerChanged);\n\n // Subscribe to browser camera permissions changes\n if (navigator.permissions) {\n try {\n navigator.permissions.query({ name: 'camera' as PermissionName }).then((cameraPermissions): void => {\n cameraPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not subscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n\n // Subscribe to browser microphone permissions changes\n try {\n navigator.permissions.query({ name: 'microphone' as PermissionName }).then((micPermissions): void => {\n micPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not subscribe to Permissions API Microphone changed events, API is not supported by browser',\n e\n );\n }\n }\n };\n\n /**\n * This is used to unsubscribe DeclarativeDeviceManager from the DeviceManager events.\n */\n public unsubscribe = (): void => {\n this._deviceManager.off('videoDevicesUpdated', this.videoDevicesUpdated);\n this._deviceManager.off('audioDevicesUpdated', this.audioDevicesUpdated);\n this._deviceManager.off('selectedMicrophoneChanged', this.selectedMicrophoneChanged);\n this._deviceManager.off('selectedSpeakerChanged', this.selectedSpeakerChanged);\n\n if (navigator.permissions) {\n // Unsubscribe from browser camera permissions changes\n try {\n navigator.permissions.query({ name: 'camera' as PermissionName }).then((cameraPermissions): void => {\n cameraPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n\n // Unsubscribe from browser microphone permissions changes\n try {\n navigator.permissions.query({ name: 'microphone' as PermissionName }).then((micPermissions): void => {\n micPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);\n });\n } catch (e) {\n console.info(\n 'Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser',\n e\n );\n }\n }\n };\n\n private permissionsApiStateChangeHandler = async (): Promise<void> => {\n await this.updateDevicePermissionState();\n };\n\n /**\n * Used to set a camera inside the proxy device manager.\n *\n * @param videoDeviceInfo VideoDeviceInfo\n */\n public selectCamera = (videoDeviceInfo: VideoDeviceInfo): void => {\n this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);\n };\n\n private videoDevicesUpdated = async (): Promise<void> => {\n // Device Manager always has a camera with '' name if there are no real camera devices available.\n // We don't want to show that in the UI.\n const realCameras = (await this._deviceManager.getCameras()).filter((c) => !!c.name);\n this._context.setDeviceManagerCameras(dedupeById(realCameras));\n };\n\n private audioDevicesUpdated = async (): Promise<void> => {\n this._context.setDeviceManagerMicrophones(dedupeById(await this._deviceManager.getMicrophones()));\n if (this._deviceManager.isSpeakerSelectionAvailable) {\n this._context.setDeviceManagerSpeakers(dedupeById(await this._deviceManager.getSpeakers()));\n }\n };\n\n private selectedMicrophoneChanged = (): void => {\n this._context.setDeviceManagerSelectedMicrophone(this._deviceManager.selectedMicrophone);\n };\n\n private selectedSpeakerChanged = (): void => {\n this._context.setDeviceManagerSelectedSpeaker(this._deviceManager.selectedSpeaker);\n };\n\n private updateDevicePermissionState = async (sdkDeviceAccessState?: DeviceAccess): Promise<void> => {\n let hasCameraPermission = !!sdkDeviceAccessState?.video;\n let hasMicPermission = !!sdkDeviceAccessState?.audio;\n\n // Supplement the SDK values with values from the Permissions API to get a better understanding of the device\n // permission state. The SDK only uses the getUserMedia API to determine the device permission state. However,\n // this returns false if the camera is in use by another application. The Permissions API can provide more\n // information about the device permission state, but is not supported yet in Firefox or Android WebView.\n // Note: It also has the limitation where it cannot detect if the device is blocked by the Operating System\n // permissions.\n if (navigator.permissions) {\n try {\n const [cameraPermissions, micPermissions] = await Promise.all([\n navigator.permissions.query({ name: 'camera' as PermissionName }),\n navigator.permissions.query({ name: 'microphone' as PermissionName })\n ]);\n\n // Use logical OR to combine the SDK state with the Permissions API state.\n // This way we can get a more accurate picture of the device permission state.\n // If the SDK state is 'granted', we don't need to check the Permissions API state.\n hasCameraPermission ||= cameraPermissions.state === 'granted';\n hasMicPermission ||= micPermissions.state === 'granted';\n } catch (e) {\n console.info('Permissions API is not supported by browser', e);\n }\n }\n\n this._context.setDeviceManagerDeviceAccess({\n video: hasCameraPermission,\n audio: hasMicPermission\n });\n this.setDeviceManager();\n };\n\n public get<P extends keyof DeviceManager>(target: DeviceManager, prop: P): any {\n switch (prop) {\n case 'getCameras': {\n return this._context.withAsyncErrorTeedToState((): Promise<VideoDeviceInfo[]> => {\n return target.getCameras().then((cameras: VideoDeviceInfo[]) => {\n // Device Manager always has a camera with '' name if there are no real camera devices available.\n // We don't want to show that in the UI.\n const realCameras = cameras.filter((c) => !!c.name);\n this._context.setDeviceManagerCameras(dedupeById(realCameras));\n return realCameras;\n });\n }, 'DeviceManager.getCameras');\n }\n case 'getMicrophones': {\n return this._context.withAsyncErrorTeedToState((): Promise<AudioDeviceInfo[]> => {\n return target.getMicrophones().then((microphones: AudioDeviceInfo[]) => {\n this._context.setDeviceManagerMicrophones(dedupeById(microphones));\n return microphones;\n });\n }, 'DeviceManager.getMicrophones');\n }\n case 'getSpeakers': {\n return this._context.withAsyncErrorTeedToState((): Promise<AudioDeviceInfo[]> => {\n return target.getSpeakers().then((speakers: AudioDeviceInfo[]) => {\n this._context.setDeviceManagerSpeakers(dedupeById(speakers));\n return speakers;\n });\n }, 'DeviceManager.getSpeakers');\n }\n case 'selectMicrophone': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['selectMicrophone']>): Promise<void> => {\n return target.selectMicrophone(...args).then(() => {\n this._context.setDeviceManagerSelectedMicrophone(target.selectedMicrophone);\n });\n },\n 'DeviceManager.selectMicrophone'\n );\n }\n case 'selectSpeaker': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['selectSpeaker']>): Promise<void> => {\n return target.selectSpeaker(...args).then(() => {\n this._context.setDeviceManagerSelectedSpeaker(target.selectedSpeaker);\n });\n },\n 'DeviceManager.selectSpeaker'\n );\n }\n case 'askDevicePermission': {\n return this._context.withAsyncErrorTeedToState(\n (...args: Parameters<DeviceManager['askDevicePermission']>): Promise<DeviceAccess> => {\n return target.askDevicePermission(...args).then(async (deviceAccess: DeviceAccess) => {\n await this.updateDevicePermissionState(deviceAccess);\n return deviceAccess;\n });\n },\n 'DeviceManager.askDevicePermission'\n );\n }\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n\n// TODO: Remove this when SDK no longer returns duplicate audio and video devices\n/** Helper function to dedupe duplicate audio and video devices obtained from SDK */\nconst dedupeById = <T extends { id: string }>(devices: T[]): T[] => {\n const ids = new Set();\n const uniqueDevices: T[] = [];\n devices.forEach((device: T) => {\n if (!ids.has(device.id)) {\n uniqueDevices.push(device);\n ids.add(device.id);\n }\n });\n return uniqueDevices;\n};\n\n/**\n * Creates a declarative DeviceManager by proxying DeviceManager with ProxyDeviceManager. The declarative DeviceManager\n * will put state updates in the given context.\n *\n * @param deviceManager - DeviceManager from SDK\n * @param context - CallContext from StatefulCallClient\n *\n * @private\n */\nexport const deviceManagerDeclaratify = (\n deviceManager: DeviceManager,\n context: CallContext,\n internalContext: InternalCallContext\n): DeviceManager => {\n const proxyDeviceManager = new ProxyDeviceManager(deviceManager, context);\n Object.defineProperty(deviceManager, 'unsubscribe', {\n configurable: false,\n value: () => proxyDeviceManager.unsubscribe()\n });\n Object.defineProperty(deviceManager, 'selectCamera', {\n configurable: false,\n value: (videoDeviceInfo: VideoDeviceInfo) => proxyDeviceManager.selectCamera(videoDeviceInfo)\n });\n\n Object.defineProperty(deviceManager, 'getUnparentedVideoStreams', {\n configurable: false,\n value: (): LocalVideoStream[] => internalContext.getUnparentedRenderInfos()\n });\n return new Proxy(deviceManager, proxyDeviceManager) as StatefulDeviceManager;\n};\n"]}
|
@@ -27,6 +27,10 @@ export type CaptionsInformation = {
|
|
27
27
|
* If you are using both captions and real time text, please ensure that the createdTimeStamp is populated
|
28
28
|
*/
|
29
29
|
createdTimeStamp?: Date;
|
30
|
+
/**
|
31
|
+
* If caption is finalized
|
32
|
+
*/
|
33
|
+
isFinalized?: boolean;
|
30
34
|
};
|
31
35
|
/**
|
32
36
|
* @public
|
@@ -5,7 +5,7 @@ import { TextField } from '@fluentui/react';
|
|
5
5
|
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
6
6
|
import { useMemo } from 'react';
|
7
7
|
import { _Caption } from './Caption';
|
8
|
-
import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
|
8
|
+
import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, hiddenAnnouncementClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
|
9
9
|
import { rttDisclosureBannerClassName } from './styles/Captions.style';
|
10
10
|
import { useLocale } from '../localization';
|
11
11
|
import { RealTimeText } from './RealTimeText';
|
@@ -28,6 +28,10 @@ export const CaptionsBanner = (props) => {
|
|
28
28
|
const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
|
29
29
|
const theme = useTheme();
|
30
30
|
const [expandBannerHeight, setExpandBannerHeight] = useState(false);
|
31
|
+
const [announcedRTT, setAnnouncedRTT] = useState([]);
|
32
|
+
const [announcedCaption, setAnnouncedCaption] = useState([]);
|
33
|
+
const [captionAnnouncementText, setCaptionAnnouncementText] = useState([]);
|
34
|
+
const [rttAnnouncementText, setRTTAnnouncementText] = useState([]);
|
31
35
|
const getTitle = () => {
|
32
36
|
var _a, _b, _c;
|
33
37
|
if (isCaptionsOn && isRealTimeTextOn) {
|
@@ -84,6 +88,24 @@ export const CaptionsBanner = (props) => {
|
|
84
88
|
setTextFieldValue('');
|
85
89
|
}
|
86
90
|
}, [latestLocalRealTimeText]);
|
91
|
+
useEffect(() => {
|
92
|
+
if (realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) {
|
93
|
+
//filter out the messages that have already been announced
|
94
|
+
const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter((message) => !announcedRTT.includes(message.id));
|
95
|
+
if (rTTMessagesToAnnounce.length > 0) {
|
96
|
+
setRTTAnnouncementText(rTTMessagesToAnnounce);
|
97
|
+
setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
if (captions.length > 0) {
|
101
|
+
// filter out the captions that have already been announced
|
102
|
+
const captionsToAnnounce = captions.filter((caption) => !announcedCaption.includes(caption.id) && caption.isFinalized);
|
103
|
+
if (captionsToAnnounce.length > 0) {
|
104
|
+
setCaptionAnnouncementText(captionsToAnnounce);
|
105
|
+
setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
|
106
|
+
}
|
107
|
+
}
|
108
|
+
}, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages, announcedRTT, announcedCaption]);
|
87
109
|
const handleKeyDown = (event) => {
|
88
110
|
if (event.key === 'Enter') {
|
89
111
|
event.preventDefault();
|
@@ -111,6 +133,19 @@ export const CaptionsBanner = (props) => {
|
|
111
133
|
})));
|
112
134
|
};
|
113
135
|
return (React.createElement(React.Fragment, null, (startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
|
136
|
+
(rttAnnouncementText.length > 0 || (captionAnnouncementText === null || captionAnnouncementText === void 0 ? void 0 : captionAnnouncementText.length) > 0) && (React.createElement("div", { "aria-live": "assertive", role: "alert", "aria-atomic": "true", className: hiddenAnnouncementClassName },
|
137
|
+
React.createElement("span", null, rttAnnouncementText.map((text) => (React.createElement("span", null,
|
138
|
+
strings.realTimeTextBannerTitle,
|
139
|
+
" ",
|
140
|
+
text.displayName,
|
141
|
+
": ",
|
142
|
+
text.message)))),
|
143
|
+
React.createElement("span", null, captionAnnouncementText.map((text) => (React.createElement("span", null,
|
144
|
+
strings.captionsOnlyContainerTitle,
|
145
|
+
" ",
|
146
|
+
text.displayName,
|
147
|
+
": ",
|
148
|
+
text.captionText)))))),
|
114
149
|
(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: bannerTitleContainerClassName },
|
115
150
|
React.createElement(Text, { className: titleClassName }, getTitle()),
|
116
151
|
React.createElement(IconButton, { "data-ui-id": "captions-banner-expand-icon", iconProps: { iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }, ariaLabel: expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel, onClick: () => setExpandBannerHeight(!expandBannerHeight), styles: expandIconClassName(theme) }))),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,iCAAiC,EACjC,0BAA0B,EAC1B,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EACL,mBAAmB,EACnB,6BAA6B,EAC7B,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA2LnD,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,uBAAuB,EACvB,cAAc,EACd,UAAU,GAAG,SAAS,EACtB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACzD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7E,MAAM,QAAQ,GAAG,GAAW,EAAE;;QAC5B,IAAI,YAAY,IAAI,gBAAgB,EAAE,CAAC;YACrC,OAAO,MAAA,OAAO,CAAC,qCAAqC,mCAAI,EAAE,CAAC;QAC7D,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,OAAO,MAAA,OAAO,CAAC,0BAA0B,mCAAI,EAAE,CAAC;QAClD,CAAC;aAAM,IAAI,gBAAgB,EAAE,CAAC;YAC5B,OAAO,MAAA,OAAO,CAAC,8BAA8B,mCAAI,EAAE,CAAC;QACtD,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,qEAAqE;IACrE,mDAAmD;IACnD,MAAM,YAAY,GAAsD,OAAO,CAAC,GAAG,EAAE;;QACnF,OAAO,4BAA4B,CAAC,QAAQ,EAAE,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,mCAAI,EAAE,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,CAAC,CAAC,CAAC;IAEjD,MAAM,cAAc,GAAsD,OAAO,CAAC,GAAG,EAAE;;QACrF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,mCAAI,EAAE,CAAC,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAGzG,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACjC,oBAAoB,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;QACrF,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAS,EAAE;QACrD,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GACZ,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC;YACjD,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,uBAAuB,CAAC;QAElH,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC;QACvD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,gBAAgB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,mBAAmB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,kBAAkB,EAAE,CAAC;YACvB,cAAc,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAElD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,6EAA6E;QAC7E,IAAI,uBAAuB,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC;YACjE,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,aAAa,GAAG,CAAC,KAAkE,EAAQ,EAAE;QACjG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,cAAc,IAAI,kBAAkB,EAAE,CAAC;gBACzC,kBAAkB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBACzC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mCAAmC,GAAG;QAC1C,WAAW,EAAE,MAAA,OAAO,CAAC,uBAAuB,mCAAI,EAAE;QAClD,aAAa,EAAE,MAAA,OAAO,CAAC,yBAAyB,mCAAI,EAAE;QACtD,eAAe,EAAE,MAAA,OAAO,CAAC,2BAA2B,mCAAI,EAAE;KAC3D,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAgB,EAAE;QAChD,OAAO,CACL,0CACG,cAAc;aACZ,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;aAC5B,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YACf,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;gBACzB,OAAO,CACL,6BACE,GAAG,EAAE,kBAAkB,OAAO,CAAC,EAAE,EAAE,EACnC,SAAS,EAAE,yBAAyB,uBACjB,IAAI;oBAEvB,oBAAC,YAAY,oBAAM,OAAmC,EAAI,CACtD,CACP,CAAC;YACJ,CAAC;YACD,OAAO,CACL,6BAAK,GAAG,EAAE,cAAc,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,yBAAyB,uBAAqB,IAAI;gBACjG,oBAAC,QAAQ,oBAAM,OAA+B,IAAE,cAAc,EAAE,cAAc,IAAI,CAC9E,CACP,CAAC;QACJ,CAAC,CAAC,CACH,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,0CACG,CAAC,uBAAuB,IAAI,YAAY,IAAI,gBAAgB,CAAC,IAAI,CAChE,oBAAC,SAAS,IAAC,kBAAkB,QAAC,SAAS,EAAE,0BAA0B,gBAAa,iBAAiB;QAC9F,CAAC,YAAY,IAAI,gBAAgB,CAAC,IAAI,UAAU,KAAK,SAAS,IAAI,CACjE,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,eAAe,EAC/B,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,6BAA6B;YAExC,oBAAC,IAAI,IAAC,SAAS,EAAE,cAAc,IAAG,QAAQ,EAAE,CAAQ;YACpD,oBAAC,UAAU,kBACE,6BAA6B,EACxC,SAAS,EAAE,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAAE,EAC3E,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,EAC/F,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC,kBAAkB,CAAC,EACzD,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,GAClC,CACI,CACT;QACA,CAAC,YAAY,IAAI,gBAAgB,CAAC,IAAI,CACrC,6BACE,GAAG,EAAE,oBAAoB,EACzB,SAAS,EACP,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,MAAK,MAAM;gBAChC,CAAC,CAAC,iCAAiC,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,uBAAuB,CAAC,UAAU,EAAE,kBAAkB,CAAC,gBAElD,uBAAuB,uBACf,IAAI;YAEtB,gBAAgB,IAAI,CACnB,oBAAC,KAAK,IAAC,SAAS,EAAE,4BAA4B,EAAE;gBAC9C,oBAAC,oBAAoB,IAAC,OAAO,EAAE,mCAAmC,GAAI,CAChE,CACT;YACA,uBAAuB,EAAE,CACtB,CACP;QACA,gBAAgB,IAAI,kBAAkB,IAAI,CACzC,oBAAC,SAAS,IACR,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EACzC,WAAW,EAAE,OAAO,CAAC,+BAA+B,EACpD,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;gBACxB,iBAAiB,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;gBAClC,kBAAkB,CAAC,QAAQ,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC,EACD,SAAS,EAAE,IAAI,EACf,YAAY,EAAE,cAAc,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC,CAAC,SAAS,GAC/F,CACH;QACA,CAAC,YAAY,IAAI,CAAC,gBAAgB,IAAI,CACrC,oBAAC,KAAK,IACJ,aAAa,EAAC,QAAQ,EACtB,MAAM,EACJ,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,MAAK,MAAM;gBAChC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,mBAAmB,CAAC,UAAU,CAAC,uBAElB,IAAI;YAEvB,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yBAAyB,EAAE,QAAQ,EAAC,WAAW,EAAC,aAAa,EAAC,OAAO,GAAG,CAC3F,CACT,CACS,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\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 { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n expandIconClassName,\n bannerTitleContainerClassName,\n realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\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 /**\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/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n /**\n * The 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 * timestamp when the real time text was finalized\n */\n finalizedTimeStamp: Date;\n /**\n * If message originated from the local participant\n * default value is false\n */\n isMe?: boolean;\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\n /**\n * Default text for RTT input text box\n */\n realTimeTextInputBoxDefaultText?: string;\n\n /**\n * Error message for RTT input text box when the size exceeds the limit 2000\n */\n realTimeTextInputErrorMessage?: string;\n\n /**\n * Real time text disclosure banner title\n */\n realTimeTextBannerTitle?: string;\n\n /**\n * Real time text disclosure banner content\n */\n realTimeTextBannerContent?: string;\n\n /**\n * Real time text disclosure banner link label\n */\n realTimeTextBannerLinkLabel?: string;\n\n /**\n * Title for the container when only captions is enabled\n */\n captionsOnlyContainerTitle?: string;\n /**\n * Title for the container when only real time text is enabled\n */\n realTimeTextOnlyContainerTitle?: string;\n /**\n * Title for the container when both captions and real time text is enabled\n */\n captionsAndRealTimeTextContainerTitle?: string;\n /**\n * Expand button aria label\n */\n expandButtonAriaLabel?: string;\n /**\n * Minimize button aria label\n */\n minimizeButtonAriaLabel?: 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 * 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\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\n /**\n * Optional callback to send real time text.\n */\n onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\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 realTimeTexts,\n isCaptionsOn,\n startCaptionsInProgress,\n onRenderAvatar,\n formFactor = 'default',\n captionsOptions,\n isRealTimeTextOn,\n onSendRealTimeText,\n latestLocalRealTimeText\n } = props;\n const localeStrings = useLocale().strings.captionsBanner;\n const strings = { ...localeStrings, ...props.strings };\n const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n const theme = useTheme();\n\n const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n\n const getTitle = (): string => {\n if (isCaptionsOn && isRealTimeTextOn) {\n return strings.captionsAndRealTimeTextContainerTitle ?? '';\n } else if (isCaptionsOn) {\n return strings.captionsOnlyContainerTitle ?? '';\n } else if (isRealTimeTextOn) {\n return strings.realTimeTextOnlyContainerTitle ?? '';\n }\n return '';\n };\n\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 const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) 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, isRealTimeTextOn]);\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, realTimeTexts, isAtBottomOfScroll]);\n\n const [textFieldValue, setTextFieldValue] = useState<string>('');\n\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 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 const realTimeTextDisclosureBannerStrings = {\n bannerTitle: strings.realTimeTextBannerTitle ?? '',\n bannerContent: strings.realTimeTextBannerContent ?? '',\n bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n };\n\n const captionsAndRealTimeText = (): JSX.Element => {\n return (\n <>\n {mergedCaptions\n .filter((caption) => caption)\n .map((caption) => {\n if ('message' in caption) {\n return (\n <div\n key={`RealTimeText - ${caption.id}`}\n className={captionContainerClassName}\n data-is-focusable={true}\n >\n <RealTimeText {...(caption as RealTimeTextInformation)} />\n </div>\n );\n }\n return (\n <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n </div>\n );\n })}\n </>\n );\n };\n\n return (\n <>\n {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n <Stack\n horizontal\n horizontalAlign=\"space-between\"\n verticalAlign=\"center\"\n className={bannerTitleContainerClassName}\n >\n <Text className={titleClassName}>{getTitle()}</Text>\n <IconButton\n data-ui-id=\"captions-banner-expand-icon\"\n iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n styles={expandIconClassName(theme)}\n />\n </Stack>\n )}\n {(isCaptionsOn || isRealTimeTextOn) && (\n <div\n ref={captionsScrollDivRef}\n className={\n captionsOptions?.height === 'full'\n ? captionsBannerFullHeightClassName(theme)\n : captionsBannerClassName(formFactor, expandBannerHeight)\n }\n data-ui-id=\"captions-banner-inner\"\n data-is-focusable={true}\n >\n {isRealTimeTextOn && (\n <Stack className={rttDisclosureBannerClassName()}>\n <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n </Stack>\n )}\n {captionsAndRealTimeText()}\n </div>\n )}\n {isRealTimeTextOn && onSendRealTimeText && (\n <TextField\n styles={realTimeTextInputBoxStyles(theme)}\n placeholder={strings.realTimeTextInputBoxDefaultText}\n value={textFieldValue}\n onKeyDown={handleKeyDown}\n onChange={(_, newValue) => {\n setTextFieldValue(newValue || '');\n onSendRealTimeText(newValue || '', false);\n }}\n maxLength={2000}\n errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n />\n )}\n {!isCaptionsOn && !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"]}
|
1
|
+
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,iCAAiC,EACjC,0BAA0B,EAC1B,2BAA2B,EAC3B,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EACL,mBAAmB,EACnB,6BAA6B,EAC7B,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA+LnD,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,uBAAuB,EACvB,cAAc,EACd,UAAU,GAAG,SAAS,EACtB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACzD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAwB,EAAE,CAAC,CAAC;IAClG,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAA4B,EAAE,CAAC,CAAC;IAE9F,MAAM,QAAQ,GAAG,GAAW,EAAE;;QAC5B,IAAI,YAAY,IAAI,gBAAgB,EAAE,CAAC;YACrC,OAAO,MAAA,OAAO,CAAC,qCAAqC,mCAAI,EAAE,CAAC;QAC7D,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,OAAO,MAAA,OAAO,CAAC,0BAA0B,mCAAI,EAAE,CAAC;QAClD,CAAC;aAAM,IAAI,gBAAgB,EAAE,CAAC;YAC5B,OAAO,MAAA,OAAO,CAAC,8BAA8B,mCAAI,EAAE,CAAC;QACtD,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,qEAAqE;IACrE,mDAAmD;IACnD,MAAM,YAAY,GAAsD,OAAO,CAAC,GAAG,EAAE;;QACnF,OAAO,4BAA4B,CAAC,QAAQ,EAAE,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,mCAAI,EAAE,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,CAAC,CAAC,CAAC;IAEjD,MAAM,cAAc,GAAsD,OAAO,CAAC,GAAG,EAAE;;QACrF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,mCAAI,EAAE,CAAC,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAGzG,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACjC,oBAAoB,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;QACrF,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAS,EAAE;QACrD,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GACZ,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC;YACjD,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,uBAAuB,CAAC;QAElH,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC;QACvD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,gBAAgB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,mBAAmB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,kBAAkB,EAAE,CAAC;YACvB,cAAc,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAElD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,6EAA6E;QAC7E,IAAI,uBAAuB,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC;YACjE,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,EAAE,CAAC;YACrC,0DAA0D;YAC1D,MAAM,qBAAqB,GAAG,aAAa,CAAC,iBAAiB,CAAC,MAAM,CAClE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAChD,CAAC;YACF,IAAI,qBAAqB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrC,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;gBAC9C,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9F,CAAC;QACH,CAAC;QACD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,2DAA2D;YAC3D,MAAM,kBAAkB,GAAG,QAAQ,CAAC,MAAM,CACxC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,WAAW,CAC3E,CAAC;YACF,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;gBAC/C,mBAAmB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAC/F,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,iBAAiB,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjF,MAAM,aAAa,GAAG,CAAC,KAAkE,EAAQ,EAAE;QACjG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,cAAc,IAAI,kBAAkB,EAAE,CAAC;gBACzC,kBAAkB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBACzC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mCAAmC,GAAG;QAC1C,WAAW,EAAE,MAAA,OAAO,CAAC,uBAAuB,mCAAI,EAAE;QAClD,aAAa,EAAE,MAAA,OAAO,CAAC,yBAAyB,mCAAI,EAAE;QACtD,eAAe,EAAE,MAAA,OAAO,CAAC,2BAA2B,mCAAI,EAAE;KAC3D,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAgB,EAAE;QAChD,OAAO,CACL,0CACG,cAAc;aACZ,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;aAC5B,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YACf,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;gBACzB,OAAO,CACL,6BACE,GAAG,EAAE,kBAAkB,OAAO,CAAC,EAAE,EAAE,EACnC,SAAS,EAAE,yBAAyB,uBACjB,IAAI;oBAEvB,oBAAC,YAAY,oBAAM,OAAmC,EAAI,CACtD,CACP,CAAC;YACJ,CAAC;YACD,OAAO,CACL,6BAAK,GAAG,EAAE,cAAc,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,yBAAyB,uBAAqB,IAAI;gBACjG,oBAAC,QAAQ,oBAAM,OAA+B,IAAE,cAAc,EAAE,cAAc,IAAI,CAC9E,CACP,CAAC;QACJ,CAAC,CAAC,CACH,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,0CACG,CAAC,uBAAuB,IAAI,YAAY,IAAI,gBAAgB,CAAC,IAAI,CAChE,oBAAC,SAAS,IAAC,kBAAkB,QAAC,SAAS,EAAE,0BAA0B,gBAAa,iBAAiB;QAE9F,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM,IAAG,CAAC,CAAC,IAAI,CAC1E,0CAAe,WAAW,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,EAAC,SAAS,EAAE,2BAA2B;YAC/F,kCACG,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjC;gBACG,OAAO,CAAC,uBAAuB;;gBAAG,IAAI,CAAC,WAAW;;gBAAI,IAAI,CAAC,OAAO,CAC9D,CACR,CAAC,CACG;YACP,kCACG,uBAAuB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrC;gBACG,OAAO,CAAC,0BAA0B;;gBAAG,IAAI,CAAC,WAAW;;gBAAI,IAAI,CAAC,WAAW,CACrE,CACR,CAAC,CACG,CACH,CACP;QAEA,CAAC,YAAY,IAAI,gBAAgB,CAAC,IAAI,UAAU,KAAK,SAAS,IAAI,CACjE,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,eAAe,EAC/B,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,6BAA6B;YAExC,oBAAC,IAAI,IAAC,SAAS,EAAE,cAAc,IAAG,QAAQ,EAAE,CAAQ;YACpD,oBAAC,UAAU,kBACE,6BAA6B,EACxC,SAAS,EAAE,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAAE,EAC3E,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,EAC/F,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,CAAC,kBAAkB,CAAC,EACzD,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,GAClC,CACI,CACT;QACA,CAAC,YAAY,IAAI,gBAAgB,CAAC,IAAI,CACrC,6BACE,GAAG,EAAE,oBAAoB,EACzB,SAAS,EACP,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,MAAK,MAAM;gBAChC,CAAC,CAAC,iCAAiC,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,uBAAuB,CAAC,UAAU,EAAE,kBAAkB,CAAC,gBAElD,uBAAuB,uBACf,IAAI;YAEtB,gBAAgB,IAAI,CACnB,oBAAC,KAAK,IAAC,SAAS,EAAE,4BAA4B,EAAE;gBAC9C,oBAAC,oBAAoB,IAAC,OAAO,EAAE,mCAAmC,GAAI,CAChE,CACT;YACA,uBAAuB,EAAE,CACtB,CACP;QACA,gBAAgB,IAAI,kBAAkB,IAAI,CACzC,oBAAC,SAAS,IACR,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EACzC,WAAW,EAAE,OAAO,CAAC,+BAA+B,EACpD,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;gBACxB,iBAAiB,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;gBAClC,kBAAkB,CAAC,QAAQ,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC,EACD,SAAS,EAAE,IAAI,EACf,YAAY,EAAE,cAAc,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC,CAAC,SAAS,GAC/F,CACH;QACA,CAAC,YAAY,IAAI,CAAC,gBAAgB,IAAI,CACrC,oBAAC,KAAK,IACJ,aAAa,EAAC,QAAQ,EACtB,MAAM,EACJ,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,MAAK,MAAM;gBAChC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,mBAAmB,CAAC,UAAU,CAAC,uBAElB,IAAI;YAEvB,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yBAAyB,EAAE,QAAQ,EAAC,WAAW,EAAC,aAAa,EAAC,OAAO,GAAG,CAC3F,CACT,CACS,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n captionContainerClassName,\n captionsBannerClassName,\n captionsBannerFullHeightClassName,\n captionsContainerClassName,\n hiddenAnnouncementClassName,\n loadingBannerFullHeightStyles,\n loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n expandIconClassName,\n bannerTitleContainerClassName,\n realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\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 /**\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 * If caption is finalized\n */\n isFinalized?: boolean;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n /**\n * The 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 * timestamp when the real time text was finalized\n */\n finalizedTimeStamp: Date;\n /**\n * If message originated from the local participant\n * default value is false\n */\n isMe?: boolean;\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\n /**\n * Default text for RTT input text box\n */\n realTimeTextInputBoxDefaultText?: string;\n\n /**\n * Error message for RTT input text box when the size exceeds the limit 2000\n */\n realTimeTextInputErrorMessage?: string;\n\n /**\n * Real time text disclosure banner title\n */\n realTimeTextBannerTitle?: string;\n\n /**\n * Real time text disclosure banner content\n */\n realTimeTextBannerContent?: string;\n\n /**\n * Real time text disclosure banner link label\n */\n realTimeTextBannerLinkLabel?: string;\n\n /**\n * Title for the container when only captions is enabled\n */\n captionsOnlyContainerTitle?: string;\n /**\n * Title for the container when only real time text is enabled\n */\n realTimeTextOnlyContainerTitle?: string;\n /**\n * Title for the container when both captions and real time text is enabled\n */\n captionsAndRealTimeTextContainerTitle?: string;\n /**\n * Expand button aria label\n */\n expandButtonAriaLabel?: string;\n /**\n * Minimize button aria label\n */\n minimizeButtonAriaLabel?: 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 * 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\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\n /**\n * Optional callback to send real time text.\n */\n onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\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 realTimeTexts,\n isCaptionsOn,\n startCaptionsInProgress,\n onRenderAvatar,\n formFactor = 'default',\n captionsOptions,\n isRealTimeTextOn,\n onSendRealTimeText,\n latestLocalRealTimeText\n } = props;\n const localeStrings = useLocale().strings.captionsBanner;\n const strings = { ...localeStrings, ...props.strings };\n const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n const theme = useTheme();\n\n const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n const [announcedRTT, setAnnouncedRTT] = useState<number[]>([]);\n const [announcedCaption, setAnnouncedCaption] = useState<string[]>([]);\n const [captionAnnouncementText, setCaptionAnnouncementText] = useState<CaptionsInformation[]>([]);\n const [rttAnnouncementText, setRTTAnnouncementText] = useState<RealTimeTextInformation[]>([]);\n\n const getTitle = (): string => {\n if (isCaptionsOn && isRealTimeTextOn) {\n return strings.captionsAndRealTimeTextContainerTitle ?? '';\n } else if (isCaptionsOn) {\n return strings.captionsOnlyContainerTitle ?? '';\n } else if (isRealTimeTextOn) {\n return strings.realTimeTextOnlyContainerTitle ?? '';\n }\n return '';\n };\n\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 const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) 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, isRealTimeTextOn]);\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, realTimeTexts, isAtBottomOfScroll]);\n\n const [textFieldValue, setTextFieldValue] = useState<string>('');\n\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 useEffect(() => {\n if (realTimeTexts?.completedMessages) {\n //filter out the messages that have already been announced\n const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter(\n (message) => !announcedRTT.includes(message.id)\n );\n if (rTTMessagesToAnnounce.length > 0) {\n setRTTAnnouncementText(rTTMessagesToAnnounce);\n setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);\n }\n }\n if (captions.length > 0) {\n // filter out the captions that have already been announced\n const captionsToAnnounce = captions.filter(\n (caption) => !announcedCaption.includes(caption.id) && caption.isFinalized\n );\n if (captionsToAnnounce.length > 0) {\n setCaptionAnnouncementText(captionsToAnnounce);\n setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);\n }\n }\n }, [captions, realTimeTexts?.completedMessages, announcedRTT, announcedCaption]);\n\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 const realTimeTextDisclosureBannerStrings = {\n bannerTitle: strings.realTimeTextBannerTitle ?? '',\n bannerContent: strings.realTimeTextBannerContent ?? '',\n bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n };\n\n const captionsAndRealTimeText = (): JSX.Element => {\n return (\n <>\n {mergedCaptions\n .filter((caption) => caption)\n .map((caption) => {\n if ('message' in caption) {\n return (\n <div\n key={`RealTimeText - ${caption.id}`}\n className={captionContainerClassName}\n data-is-focusable={true}\n >\n <RealTimeText {...(caption as RealTimeTextInformation)} />\n </div>\n );\n }\n return (\n <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n </div>\n );\n })}\n </>\n );\n };\n\n return (\n <>\n {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n {/* ARIA live region */}\n {(rttAnnouncementText.length > 0 || captionAnnouncementText?.length > 0) && (\n <div aria-live=\"assertive\" role=\"alert\" aria-atomic=\"true\" className={hiddenAnnouncementClassName}>\n <span>\n {rttAnnouncementText.map((text) => (\n <span>\n {strings.realTimeTextBannerTitle} {text.displayName}: {text.message}\n </span>\n ))}\n </span>\n <span>\n {captionAnnouncementText.map((text) => (\n <span>\n {strings.captionsOnlyContainerTitle} {text.displayName}: {text.captionText}\n </span>\n ))}\n </span>\n </div>\n )}\n\n {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n <Stack\n horizontal\n horizontalAlign=\"space-between\"\n verticalAlign=\"center\"\n className={bannerTitleContainerClassName}\n >\n <Text className={titleClassName}>{getTitle()}</Text>\n <IconButton\n data-ui-id=\"captions-banner-expand-icon\"\n iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n styles={expandIconClassName(theme)}\n />\n </Stack>\n )}\n {(isCaptionsOn || isRealTimeTextOn) && (\n <div\n ref={captionsScrollDivRef}\n className={\n captionsOptions?.height === 'full'\n ? captionsBannerFullHeightClassName(theme)\n : captionsBannerClassName(formFactor, expandBannerHeight)\n }\n data-ui-id=\"captions-banner-inner\"\n data-is-focusable={true}\n >\n {isRealTimeTextOn && (\n <Stack className={rttDisclosureBannerClassName()}>\n <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n </Stack>\n )}\n {captionsAndRealTimeText()}\n </div>\n )}\n {isRealTimeTextOn && onSendRealTimeText && (\n <TextField\n styles={realTimeTextInputBoxStyles(theme)}\n placeholder={strings.realTimeTextInputBoxDefaultText}\n value={textFieldValue}\n onKeyDown={handleKeyDown}\n onChange={(_, newValue) => {\n setTextFieldValue(newValue || '');\n onSendRealTimeText(newValue || '', false);\n }}\n maxLength={2000}\n errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n />\n )}\n {!isCaptionsOn && !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"]}
|
@@ -3,7 +3,6 @@
|
|
3
3
|
import { concatStyleSets, mergeStyles, Stack } from '@fluentui/react';
|
4
4
|
import { ChatMyMessage } from '@fluentui-contrib/react-chat';
|
5
5
|
import { mergeClasses } from '@fluentui/react-components';
|
6
|
-
import { _formatString } from "../../../../../acs-ui-common/src";
|
7
6
|
import { useTheme } from '../../../theming/FluentThemeProvider';
|
8
7
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
9
8
|
/* @conditional-compile-remove(file-sharing-acs) */
|
@@ -18,7 +17,7 @@ import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFa
|
|
18
17
|
import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
|
19
18
|
/* @conditional-compile-remove(file-sharing-acs) */
|
20
19
|
import { attachmentMetadataReducer, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
21
|
-
import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
20
|
+
import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon, getTextValidationErrorMessage } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
22
21
|
/* @conditional-compile-remove(file-sharing-acs) */
|
23
22
|
import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
24
23
|
/**
|
@@ -46,9 +45,13 @@ export const ChatMessageComponentAsEditBox = (props) => {
|
|
46
45
|
const setText = (event, newValue) => {
|
47
46
|
setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
|
48
47
|
};
|
49
|
-
const
|
50
|
-
|
51
|
-
|
48
|
+
const textValidationErrorMessage = useMemo(() => {
|
49
|
+
return getTextValidationErrorMessage(messageState, strings.editBoxTextLimit, strings.editBoxEmptyWarningText);
|
50
|
+
}, [
|
51
|
+
messageState,
|
52
|
+
strings.editBoxTextLimit,
|
53
|
+
strings.editBoxEmptyWarningText,
|
54
|
+
]);
|
52
55
|
const iconClassName = useCallback((isHover) => {
|
53
56
|
const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
|
54
57
|
return mergeStyles(inputBoxIcon, { color });
|
@@ -88,7 +91,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
|
|
88
91
|
onSubmit(textValue,
|
89
92
|
/* @conditional-compile-remove(file-sharing-acs) */
|
90
93
|
attachmentMetadata);
|
91
|
-
}, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage:
|
94
|
+
}, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textValidationErrorMessage, styles: editBoxStyles,
|
92
95
|
/* @conditional-compile-remove(mention) */
|
93
96
|
mentionLookupOptions: mentionLookupOptions }),
|
94
97
|
React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useReducer } from 'react';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';\nimport { InputBoxComponent } from '../../InputBoxComponent';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\n chatMessageFailedTagStackItemStyle,\n editChatMessageButtonsStackStyle,\n useChatMessageEditContainerStyles\n} from '../../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n attachmentMetadataReducer,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /* @conditional-compile-remove(mention) */\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n /* @conditional-compile-remove(mention) */\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content || '');\n /* @conditional-compile-remove(file-sharing-acs) */\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(inputBoxIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={(id) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id });\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onKeyDown={(ev) => {\n if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(\n textValue,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentMetadata\n );\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n /* @conditional-compile-remove(mention) */\n mentionLookupOptions={mentionLookupOptions}\n ></InputBoxComponent>\n <Stack\n horizontal\n horizontalAlign=\"end\"\n className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId=\"chat-message-edit-box-cancel-button\"\n />\n </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId=\"chat-message-edit-box-submit-button\"\n />\n </Stack.Item>\n </Stack>\n {/* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n /* @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}
|
1
|
+
{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useTheme } from '../../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useReducer } from 'react';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';\nimport { InputBoxComponent } from '../../InputBoxComponent';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\n chatMessageFailedTagStackItemStyle,\n editChatMessageButtonsStackStyle,\n useChatMessageEditContainerStyles\n} from '../../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n attachmentMetadataReducer,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon,\n getTextValidationErrorMessage\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /* @conditional-compile-remove(mention) */\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n /* @conditional-compile-remove(mention) */\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content || '');\n /* @conditional-compile-remove(file-sharing-acs) */\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textValidationErrorMessage = useMemo(() => {\n return getTextValidationErrorMessage(\n messageState,\n strings.editBoxTextLimit,\n strings.editBoxEmptyWarningText)\n }, [\n messageState,\n strings.editBoxTextLimit,\n strings.editBoxEmptyWarningText,\n ]);\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(inputBoxIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n /* @conditional-compile-remove(file-sharing-acs) */\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={(id) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id });\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onKeyDown={(ev) => {\n if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(\n textValue,\n /* @conditional-compile-remove(file-sharing-acs) */\n attachmentMetadata\n );\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textValidationErrorMessage}\n styles={editBoxStyles}\n /* @conditional-compile-remove(mention) */\n mentionLookupOptions={mentionLookupOptions}\n ></InputBoxComponent>\n <Stack\n horizontal\n horizontalAlign=\"end\"\n className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId=\"chat-message-edit-box-cancel-button\"\n />\n </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId=\"chat-message-edit-box-submit-button\"\n />\n </Stack.Item>\n </Stack>\n {/* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n /* @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}
|
@@ -3,7 +3,6 @@
|
|
3
3
|
import { mergeStyles, Stack } from '@fluentui/react';
|
4
4
|
import { ChatMyMessage } from '@fluentui-contrib/react-chat';
|
5
5
|
import { mergeClasses } from '@fluentui/react-components';
|
6
|
-
import { _formatString } from "../../../../../acs-ui-common/src";
|
7
6
|
import { useTheme } from '../../../theming';
|
8
7
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
9
8
|
/* @conditional-compile-remove(file-sharing-acs) */
|
@@ -13,10 +12,10 @@ import { InputBoxButton } from '../../InputBoxButton';
|
|
13
12
|
import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
|
14
13
|
import { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';
|
15
14
|
import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
|
16
|
-
import {
|
15
|
+
import { modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';
|
17
16
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */
|
18
17
|
import { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong, inlineImageIds } from '../../utils/SendBoxUtils';
|
19
|
-
import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
18
|
+
import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon, getTextValidationErrorMessage } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
20
19
|
/* @conditional-compile-remove(file-sharing-acs) */
|
21
20
|
import { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
|
22
21
|
import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
|
@@ -122,14 +121,13 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
|
|
122
121
|
var _a;
|
123
122
|
(_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
124
123
|
}, []);
|
125
|
-
const
|
126
|
-
return messageState
|
127
|
-
|
128
|
-
? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
|
129
|
-
: undefined;
|
124
|
+
const textValidationErrorMessage = useMemo(() => {
|
125
|
+
return getTextValidationErrorMessage(messageState, strings.editBoxTextLimit, strings.editBoxEmptyWarningText,
|
126
|
+
/* @conditional-compile-remove(rich-text-editor-image-upload) */ contentValueWithInlineImagesOverflow);
|
130
127
|
}, [
|
131
128
|
messageState,
|
132
129
|
strings.editBoxTextLimit,
|
130
|
+
strings.editBoxEmptyWarningText,
|
133
131
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */ contentValueWithInlineImagesOverflow
|
134
132
|
]);
|
135
133
|
const iconClassName = useCallback((isHover) => {
|
@@ -255,7 +253,7 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
|
|
255
253
|
]);
|
256
254
|
const getContent = () => {
|
257
255
|
return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
|
258
|
-
React.createElement(RichTextSendBoxErrors, {
|
256
|
+
React.createElement(RichTextSendBoxErrors, { textValidationErrorMessage: textValidationErrorMessage, systemMessage: message.failureReason,
|
259
257
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentUploadsPendingError: attachmentUploadsPendingError,
|
260
258
|
/* @conditional-compile-remove(rich-text-editor-image-upload) */
|
261
259
|
attachmentProgressError: imageUploadErrorMessage
|