@azure/communication-react 1.7.0-alpha-202308040014 → 1.7.0-alpha-202308090014
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 +108 -0
- package/dist/dist-cjs/communication-react/index.js +415 -87
- package/dist/dist-cjs/communication-react/index.js.map +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/communication-react/src/index.d.ts +2 -0
- package/dist/dist-esm/communication-react/src/index.js +2 -0
- package/dist/dist-esm/communication-react/src/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js +2 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js +41 -3
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts +1 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js +6 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ImageGallery.d.ts +5 -0
- package/dist/dist-esm/react-components/src/components/ImageGallery.js +10 -5
- package/dist/dist-esm/react-components/src/components/ImageGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/MessageThread.js +7 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.js +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.d.ts +6 -2
- package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js +25 -3
- package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +45 -2
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
- package/package.json +8 -8
@@ -13,10 +13,12 @@ export const downloadIcon = {
|
|
13
13
|
/**
|
14
14
|
* @private
|
15
15
|
*/
|
16
|
-
export const overlayStyles = (theme) => {
|
16
|
+
export const overlayStyles = (theme, isDarkThemed) => {
|
17
17
|
return {
|
18
18
|
root: {
|
19
|
-
background
|
19
|
+
// The overlay background color should always be black in both light and dark theme.
|
20
|
+
// In dark theme, theme.palette.white is actually black.
|
21
|
+
background: isDarkThemed ? theme.palette.white : theme.palette.black,
|
20
22
|
opacity: '0.85'
|
21
23
|
}
|
22
24
|
};
|
@@ -67,6 +69,7 @@ export const titleBarContainerStyle = {
|
|
67
69
|
export const titleStyle = (theme, isDarkThemed) => {
|
68
70
|
return {
|
69
71
|
paddingLeft: '0.5rem',
|
72
|
+
marginLeft: '0.5rem',
|
70
73
|
color: isDarkThemed ? undefined : theme.palette.white,
|
71
74
|
fontFamily: 'inherit',
|
72
75
|
fontSize: '0.875rem',
|
@@ -98,6 +101,7 @@ export const downloadIconStyle = {
|
|
98
101
|
export const imageContainer = {
|
99
102
|
display: 'flex',
|
100
103
|
alignItems: 'center',
|
104
|
+
justifyContent: 'center',
|
101
105
|
width: '100%',
|
102
106
|
height: '100%',
|
103
107
|
overflow: 'hidden',
|
@@ -106,16 +110,28 @@ export const imageContainer = {
|
|
106
110
|
/**
|
107
111
|
* @private
|
108
112
|
*/
|
109
|
-
export const
|
113
|
+
export const normalImageStyle = {
|
110
114
|
objectFit: 'contain',
|
111
115
|
height: '100%',
|
112
116
|
width: '100%'
|
113
117
|
};
|
118
|
+
/**
|
119
|
+
* @private
|
120
|
+
*/
|
121
|
+
export const brokenImageStyle = (theme, isDarkThemed) => {
|
122
|
+
return {
|
123
|
+
// The color should be white in dark theme.
|
124
|
+
// In dark theme, theme.palette.black is actually white.
|
125
|
+
color: isDarkThemed ? theme.palette.black : theme.palette.white
|
126
|
+
};
|
127
|
+
};
|
114
128
|
/**
|
115
129
|
* @private
|
116
130
|
*/
|
117
131
|
export const closeButtonStyles = (theme, isDarkThemed) => {
|
118
132
|
return {
|
133
|
+
// The color should be white in dark theme.
|
134
|
+
// In dark theme, theme.palette.black is actually white.
|
119
135
|
color: isDarkThemed ? theme.palette.black : theme.palette.white,
|
120
136
|
':hover': {
|
121
137
|
color: isDarkThemed ? theme.palette.black : theme.palette.white,
|
@@ -143,10 +159,14 @@ export const downloadButtonStyle = (theme, isDarkThemed) => {
|
|
143
159
|
color: isDarkThemed ? undefined : theme.palette.white,
|
144
160
|
whiteSpace: 'nowrap',
|
145
161
|
':hover': {
|
162
|
+
// The color should be white in dark theme.
|
163
|
+
// In dark theme, theme.palette.black is actually white.
|
146
164
|
color: isDarkThemed ? theme.palette.black : theme.palette.white,
|
147
165
|
backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
|
148
166
|
},
|
149
167
|
':active': {
|
168
|
+
// The color should be white in dark theme.
|
169
|
+
// In dark theme, theme.palette.black is actually white.
|
150
170
|
color: isDarkThemed ? theme.palette.black : theme.palette.white,
|
151
171
|
backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
|
152
172
|
},
|
@@ -161,6 +181,8 @@ export const downloadButtonStyle = (theme, isDarkThemed) => {
|
|
161
181
|
export const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
|
162
182
|
return {
|
163
183
|
marginRight: '0.5rem',
|
184
|
+
// The color should be white in dark theme.
|
185
|
+
// In dark theme, theme.palette.black is actually white.
|
164
186
|
color: isDarkThemed ? theme.palette.black : theme.palette.white,
|
165
187
|
whiteSpace: 'nowrap',
|
166
188
|
':hover': {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (theme: Theme): IOverlayStyles => {\n return {\n root: {\n background: theme.palette.white,\n opacity: '0.85'\n }\n };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n flexFlow: 'column wrap',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n paddingLeft: '0.5rem',\n color: isDarkThemed ? undefined : theme.palette.white,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const imageContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n margin: '4rem 0 2rem'\n};\n\n/**\n * @private\n */\nexport const imageStyle: IStyle = {\n objectFit: 'contain',\n height: '100%',\n width: '100%'\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n }\n };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n color: isDarkThemed ? undefined : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n marginRight: '0.5rem',\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
|
1
|
+
{"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (theme: Theme, isDarkThemed: boolean): IOverlayStyles => {\n return {\n root: {\n // The overlay background color should always be black in both light and dark theme.\n // In dark theme, theme.palette.white is actually black.\n background: isDarkThemed ? theme.palette.white : theme.palette.black,\n opacity: '0.85'\n }\n };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n flexFlow: 'column wrap',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n paddingLeft: '0.5rem',\n marginLeft: '0.5rem',\n color: isDarkThemed ? undefined : theme.palette.white,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const imageContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n margin: '4rem 0 2rem'\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n height: '100%',\n width: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white\n };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n }\n };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n color: isDarkThemed ? undefined : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n marginRight: '0.5rem',\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
|
@@ -12,6 +12,7 @@ export declare type ChatScreenProps = {
|
|
12
12
|
onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
|
13
13
|
onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
|
14
14
|
onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
|
15
|
+
modalLayerHostId?: string;
|
15
16
|
styles?: ChatScreenStyles;
|
16
17
|
hasFocusOnMount?: 'sendBoxTextField';
|
17
18
|
fileSharing?: FileSharingOptions;
|
@@ -12,6 +12,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
12
12
|
import { mergeStyles, Stack } from '@fluentui/react';
|
13
13
|
import { ErrorBar, MessageThread, SendBox, TypingIndicator, useTheme } from "../../../../react-components/src";
|
14
14
|
import React, { useCallback, useEffect } from 'react';
|
15
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
16
|
+
import { useState } from 'react';
|
15
17
|
import { AvatarPersona } from '../common/AvatarPersona';
|
16
18
|
import { useAdapter } from './adapter/ChatAdapterProvider';
|
17
19
|
import { ChatHeader, getHeaderProps } from './ChatHeader';
|
@@ -31,6 +33,8 @@ import { useSelector } from './hooks/useSelector';
|
|
31
33
|
import { FileDownloadErrorBar } from './FileDownloadErrorBar';
|
32
34
|
/* @conditional-compile-remove(file-sharing) */
|
33
35
|
import { _FileDownloadCards } from "../../../../react-components/src";
|
36
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
37
|
+
import { ImageGallery } from "../../../../react-components/src";
|
34
38
|
/**
|
35
39
|
* @private
|
36
40
|
*/
|
@@ -39,6 +43,10 @@ export const ChatScreen = (props) => {
|
|
39
43
|
const defaultNumberOfChatMessagesToReload = 5;
|
40
44
|
/* @conditional-compile-remove(file-sharing) */
|
41
45
|
const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
|
46
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
47
|
+
const [fullSizeAttachments, setFullSizeAttachments] = useState({});
|
48
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
49
|
+
const [galleryImages, setGalleryImages] = useState(undefined);
|
42
50
|
const adapter = useAdapter();
|
43
51
|
const theme = useTheme();
|
44
52
|
useEffect(() => {
|
@@ -84,6 +92,37 @@ export const ChatScreen = (props) => {
|
|
84
92
|
}
|
85
93
|
return [{ blobUrl: '' }];
|
86
94
|
}), [adapter]);
|
95
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
96
|
+
const onInlineImageClicked = useCallback((attachment, onRenderTitleIcon) => __awaiter(void 0, void 0, void 0, function* () {
|
97
|
+
const titleIcon = onRenderTitleIcon && onRenderTitleIcon();
|
98
|
+
const galleryImage = {
|
99
|
+
title: attachment.name,
|
100
|
+
titleIcon: titleIcon,
|
101
|
+
saveAsName: attachment.id,
|
102
|
+
imageUrl: ''
|
103
|
+
};
|
104
|
+
if (attachment.id in fullSizeAttachments) {
|
105
|
+
setGalleryImages([
|
106
|
+
Object.assign(Object.assign({}, galleryImage), { imageUrl: fullSizeAttachments[attachment.id] })
|
107
|
+
]);
|
108
|
+
return;
|
109
|
+
}
|
110
|
+
if (attachment.attachmentType === 'inlineImage' && attachment.url) {
|
111
|
+
const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.url] });
|
112
|
+
if (blob[0]) {
|
113
|
+
const blobUrl = blob[0].blobUrl;
|
114
|
+
setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
|
115
|
+
setGalleryImages([
|
116
|
+
Object.assign(Object.assign({}, galleryImage), { imageUrl: blobUrl })
|
117
|
+
]);
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}), [adapter, fullSizeAttachments]);
|
121
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
122
|
+
const handleOnDownloadImage = (blobUrl, filename) => {
|
123
|
+
// Place holder function for download handler
|
124
|
+
console.log(blobUrl, filename);
|
125
|
+
};
|
87
126
|
const AttachFileButton = useCallback(() => {
|
88
127
|
if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
|
89
128
|
return null;
|
@@ -103,7 +142,9 @@ export const ChatScreen = (props) => {
|
|
103
142
|
/* @conditional-compile-remove(file-sharing) */
|
104
143
|
onRenderFileDownloads: onRenderFileDownloads,
|
105
144
|
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
106
|
-
onFetchAttachments: onRenderInlineAttachment,
|
145
|
+
onFetchAttachments: onRenderInlineAttachment,
|
146
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
147
|
+
onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
|
107
148
|
React.createElement(Stack, { className: mergeStyles(sendboxContainerStyles) },
|
108
149
|
React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
|
109
150
|
React.createElement(Stack, { horizontal: formFactor === 'mobile' },
|
@@ -117,6 +158,8 @@ export const ChatScreen = (props) => {
|
|
117
158
|
onCancelFileUpload: adapter.cancelFileUpload }))),
|
118
159
|
formFactor !== 'mobile' && React.createElement(AttachFileButton, null)))),
|
119
160
|
/* @conditional-compile-remove(chat-composite-participant-pane) */
|
120
|
-
(options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))
|
161
|
+
(options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
|
162
|
+
/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
|
163
|
+
galleryImages && galleryImages.length > 0 && (React.createElement(ImageGallery, { modalLayerHostId: props.modalLayerHostId, images: galleryImages, onDismiss: () => setGalleryImages(undefined), onImageDownloadButtonClicked: handleOnDownloadImage }))));
|
121
164
|
};
|
122
165
|
//# sourceMappingURL=ChatScreen.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport {\n CommunicationParticipant,\n ErrorBar,\n MessageProps,\n MessageRenderer,\n MessageThread,\n MessageThreadStyles,\n ParticipantMenuItemsCallback,\n SendBox,\n SendBoxStylesProps,\n TypingIndicator,\n TypingIndicatorStylesProps,\n useTheme\n} from '@internal/react-components';\nimport React, { useCallback, useEffect } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../common/AvatarPersona';\n\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { FileDownloadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton, FileUploadHandler } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n chatArea,\n chatContainer,\n chatWrapper,\n messageThreadChatCompositeStyles,\n sendboxContainerStyles,\n typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadsSelector } from './selectors/fileUploadsSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { useSelector } from './hooks/useSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadErrorBar } from './FileDownloadErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileDownloadCards } from '@internal/react-components';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentDownloadResult, FileMetadata } from '@internal/react-components';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n options?: ChatCompositeOptions;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n styles?: ChatScreenStyles;\n hasFocusOnMount?: 'sendBoxTextField';\n fileSharing?: FileSharingOptions;\n formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n messageThread?: MessageThreadStyles;\n sendBox?: SendBoxStylesProps;\n typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n /**\n * A string containing the comma separated list of accepted file types.\n * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n * Accepts any type of file if not specified.\n * @beta\n */\n accept?: string;\n /**\n * Allows multiple files to be selected if set to `true`.\n * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n * @defaultValue false\n * @beta\n */\n multiple?: boolean;\n /**\n * A function of type {@link FileUploadHandler} for handling file uploads.\n * @beta\n */\n uploadHandler: FileUploadHandler;\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n const {\n onFetchAvatarPersonaData,\n onRenderMessage,\n onRenderTypingIndicator,\n options,\n styles,\n fileSharing,\n formFactor\n } = props;\n\n const defaultNumberOfChatMessagesToReload = 5;\n /* @conditional-compile-remove(file-sharing) */\n const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n\n const adapter = useAdapter();\n const theme = useTheme();\n\n useEffect(() => {\n // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n const fetchData: () => Promise<void> = async () => {\n // Fetch initial data for adapter\n await adapter.fetchInitialData();\n // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n };\n fetchData();\n }, [adapter]);\n\n const messageThreadProps = usePropsFor(MessageThread);\n const sendBoxProps = usePropsFor(SendBox);\n const typingIndicatorProps = usePropsFor(TypingIndicator);\n const headerProps = useAdaptedSelector(getHeaderProps);\n const errorBarProps = usePropsFor(ErrorBar);\n\n const onRenderAvatarCallback = useCallback(\n (userId, defaultOptions) => {\n return (\n <AvatarPersona\n userId={userId}\n hidePersonaDetails={true}\n {...defaultOptions}\n dataProvider={onFetchAvatarPersonaData}\n />\n );\n },\n [onFetchAvatarPersonaData]\n );\n\n const messageThreadStyles = Object.assign(\n {},\n messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n styles?.messageThread\n );\n const typingIndicatorStyles = Object.assign({}, styles?.typingIndicator);\n const sendBoxStyles = Object.assign({}, styles?.sendBox);\n const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n const fileUploadButtonOnChange = useCallback(\n (files: FileList | null): void => {\n if (!files) {\n return;\n }\n\n /* @conditional-compile-remove(file-sharing) */\n const fileUploads = adapter.registerActiveFileUploads(Array.from(files));\n /* @conditional-compile-remove(file-sharing) */\n fileSharing?.uploadHandler(userId, fileUploads);\n },\n [adapter, fileSharing, userId]\n );\n\n /* @conditional-compile-remove(file-sharing) */\n const onRenderFileDownloads = useCallback(\n (userId, message) => (\n <_FileDownloadCards\n userId={userId}\n fileMetadata={message.attachedFilesMetadata || []}\n downloadHandler={fileSharing?.downloadHandler}\n onDownloadErrorMessage={(errorMessage: string) => {\n setDownloadErrorMessage(errorMessage);\n }}\n />\n ),\n [fileSharing?.downloadHandler]\n );\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const onRenderInlineAttachment = useCallback(\n async (attachment: FileMetadata): Promise<AttachmentDownloadResult[]> => {\n if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {\n const blob = await adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });\n return blob;\n }\n return [{ blobUrl: '' }];\n },\n [adapter]\n );\n\n const AttachFileButton = useCallback(() => {\n if (!fileSharing?.uploadHandler) {\n return null;\n }\n return (\n <FileUploadButton\n accept={fileSharing?.accept}\n multiple={fileSharing?.multiple}\n onChange={fileUploadButtonOnChange}\n />\n );\n }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\n return (\n <Stack className={chatContainer} grow>\n {options?.topic !== false && <ChatHeader {...headerProps} />}\n <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n <Stack className={chatWrapper} grow>\n {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n {\n /* @conditional-compile-remove(file-sharing) */\n <FileDownloadErrorBar\n onDismissDownloadErrorMessage={useCallback(() => {\n setDownloadErrorMessage('');\n }, [])}\n fileDownloadErrorMessage={downloadErrorMessage || ''}\n />\n }\n <MessageThread\n {...messageThreadProps}\n onRenderAvatar={onRenderAvatarCallback}\n onRenderMessage={onRenderMessage}\n /* @conditional-compile-remove(file-sharing) */\n onRenderFileDownloads={onRenderFileDownloads}\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n onFetchAttachments={onRenderInlineAttachment}\n numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n styles={messageThreadStyles}\n />\n <Stack className={mergeStyles(sendboxContainerStyles)}>\n <div className={mergeStyles(typingIndicatorContainerStyles)}>\n {onRenderTypingIndicator ? (\n onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n ) : (\n <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n )}\n </div>\n <Stack horizontal={formFactor === 'mobile'}>\n {formFactor === 'mobile' && (\n <Stack verticalAlign=\"center\">\n <AttachFileButton />\n </Stack>\n )}\n <Stack grow>\n <SendBox\n {...sendBoxProps}\n autoFocus={options?.autoFocus}\n styles={sendBoxStyles}\n /* @conditional-compile-remove(file-sharing) */\n activeFileUploads={useSelector(fileUploadsSelector).files}\n /* @conditional-compile-remove(file-sharing) */\n onCancelFileUpload={adapter.cancelFileUpload}\n />\n </Stack>\n {formFactor !== 'mobile' && <AttachFileButton />}\n </Stack>\n </Stack>\n </Stack>\n {\n /* @conditional-compile-remove(chat-composite-participant-pane) */\n options?.participantPane === true && (\n <ChatScreenPeoplePane\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n isMobile={formFactor === 'mobile'}\n />\n )\n }\n </Stack>\n </Stack>\n );\n};\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
|
1
|
+
{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { IPersonaProps } from '@fluentui/react';\nimport {\n CommunicationParticipant,\n ErrorBar,\n MessageProps,\n MessageRenderer,\n MessageThread,\n MessageThreadStyles,\n ParticipantMenuItemsCallback,\n SendBox,\n SendBoxStylesProps,\n TypingIndicator,\n TypingIndicatorStylesProps,\n useTheme\n} from '@internal/react-components';\nimport React, { useCallback, useEffect } from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useState } from 'react';\n\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../common/AvatarPersona';\n\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { FileDownloadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton, FileUploadHandler } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n chatArea,\n chatContainer,\n chatWrapper,\n messageThreadChatCompositeStyles,\n sendboxContainerStyles,\n typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadsSelector } from './selectors/fileUploadsSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { useSelector } from './hooks/useSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadErrorBar } from './FileDownloadErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileDownloadCards } from '@internal/react-components';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentDownloadResult, FileMetadata } from '@internal/react-components';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { ImageGallery, ImageGalleryImageProps } from '@internal/react-components';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n options?: ChatCompositeOptions;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n modalLayerHostId?: string;\n styles?: ChatScreenStyles;\n hasFocusOnMount?: 'sendBoxTextField';\n fileSharing?: FileSharingOptions;\n formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n messageThread?: MessageThreadStyles;\n sendBox?: SendBoxStylesProps;\n typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n /**\n * A string containing the comma separated list of accepted file types.\n * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n * Accepts any type of file if not specified.\n * @beta\n */\n accept?: string;\n /**\n * Allows multiple files to be selected if set to `true`.\n * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n * @defaultValue false\n * @beta\n */\n multiple?: boolean;\n /**\n * A function of type {@link FileUploadHandler} for handling file uploads.\n * @beta\n */\n uploadHandler: FileUploadHandler;\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n const {\n onFetchAvatarPersonaData,\n onRenderMessage,\n onRenderTypingIndicator,\n options,\n styles,\n fileSharing,\n formFactor\n } = props;\n\n const defaultNumberOfChatMessagesToReload = 5;\n /* @conditional-compile-remove(file-sharing) */\n const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const [fullSizeAttachments, setFullSizeAttachments] = useState<Record<string, string>>({});\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const [galleryImages, setGalleryImages] = useState<Array<ImageGalleryImageProps> | undefined>(undefined);\n\n const adapter = useAdapter();\n const theme = useTheme();\n\n useEffect(() => {\n // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n const fetchData: () => Promise<void> = async () => {\n // Fetch initial data for adapter\n await adapter.fetchInitialData();\n // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n };\n fetchData();\n }, [adapter]);\n\n const messageThreadProps = usePropsFor(MessageThread);\n const sendBoxProps = usePropsFor(SendBox);\n const typingIndicatorProps = usePropsFor(TypingIndicator);\n const headerProps = useAdaptedSelector(getHeaderProps);\n const errorBarProps = usePropsFor(ErrorBar);\n\n const onRenderAvatarCallback = useCallback(\n (userId, defaultOptions) => {\n return (\n <AvatarPersona\n userId={userId}\n hidePersonaDetails={true}\n {...defaultOptions}\n dataProvider={onFetchAvatarPersonaData}\n />\n );\n },\n [onFetchAvatarPersonaData]\n );\n\n const messageThreadStyles = Object.assign(\n {},\n messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n styles?.messageThread\n );\n const typingIndicatorStyles = Object.assign({}, styles?.typingIndicator);\n const sendBoxStyles = Object.assign({}, styles?.sendBox);\n const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n const fileUploadButtonOnChange = useCallback(\n (files: FileList | null): void => {\n if (!files) {\n return;\n }\n\n /* @conditional-compile-remove(file-sharing) */\n const fileUploads = adapter.registerActiveFileUploads(Array.from(files));\n /* @conditional-compile-remove(file-sharing) */\n fileSharing?.uploadHandler(userId, fileUploads);\n },\n [adapter, fileSharing, userId]\n );\n\n /* @conditional-compile-remove(file-sharing) */\n const onRenderFileDownloads = useCallback(\n (userId, message) => (\n <_FileDownloadCards\n userId={userId}\n fileMetadata={message.attachedFilesMetadata || []}\n downloadHandler={fileSharing?.downloadHandler}\n onDownloadErrorMessage={(errorMessage: string) => {\n setDownloadErrorMessage(errorMessage);\n }}\n />\n ),\n [fileSharing?.downloadHandler]\n );\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const onRenderInlineAttachment = useCallback(\n async (attachment: FileMetadata): Promise<AttachmentDownloadResult[]> => {\n if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {\n const blob = await adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });\n return blob;\n }\n return [{ blobUrl: '' }];\n },\n [adapter]\n );\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const onInlineImageClicked = useCallback(\n async (\n attachment: FileMetadata,\n onRenderTitleIcon?: (personaProps?: IPersonaProps) => JSX.Element\n ): Promise<void> => {\n const titleIcon = onRenderTitleIcon && onRenderTitleIcon();\n const galleryImage: ImageGalleryImageProps = {\n title: attachment.name,\n titleIcon: titleIcon,\n saveAsName: attachment.id,\n imageUrl: ''\n };\n\n if (attachment.id in fullSizeAttachments) {\n setGalleryImages([\n {\n ...galleryImage,\n imageUrl: fullSizeAttachments[attachment.id]\n }\n ]);\n return;\n }\n\n if (attachment.attachmentType === 'inlineImage' && attachment.url) {\n const blob = await adapter.downloadAttachments({ attachmentUrls: [attachment.url] });\n if (blob[0]) {\n const blobUrl = blob[0].blobUrl;\n setFullSizeAttachments((prev) => ({ ...prev, [attachment.id]: blobUrl }));\n setGalleryImages([\n {\n ...galleryImage,\n imageUrl: blobUrl\n }\n ]);\n }\n }\n },\n [adapter, fullSizeAttachments]\n );\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const handleOnDownloadImage = (blobUrl: string, filename: string): void => {\n // Place holder function for download handler\n console.log(blobUrl, filename);\n };\n\n const AttachFileButton = useCallback(() => {\n if (!fileSharing?.uploadHandler) {\n return null;\n }\n return (\n <FileUploadButton\n accept={fileSharing?.accept}\n multiple={fileSharing?.multiple}\n onChange={fileUploadButtonOnChange}\n />\n );\n }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\n return (\n <Stack className={chatContainer} grow>\n {options?.topic !== false && <ChatHeader {...headerProps} />}\n <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n <Stack className={chatWrapper} grow>\n {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n {\n /* @conditional-compile-remove(file-sharing) */\n <FileDownloadErrorBar\n onDismissDownloadErrorMessage={useCallback(() => {\n setDownloadErrorMessage('');\n }, [])}\n fileDownloadErrorMessage={downloadErrorMessage || ''}\n />\n }\n <MessageThread\n {...messageThreadProps}\n onRenderAvatar={onRenderAvatarCallback}\n onRenderMessage={onRenderMessage}\n /* @conditional-compile-remove(file-sharing) */\n onRenderFileDownloads={onRenderFileDownloads}\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n onFetchAttachments={onRenderInlineAttachment}\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n onInlineImageClicked={onInlineImageClicked}\n numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n styles={messageThreadStyles}\n />\n <Stack className={mergeStyles(sendboxContainerStyles)}>\n <div className={mergeStyles(typingIndicatorContainerStyles)}>\n {onRenderTypingIndicator ? (\n onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n ) : (\n <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n )}\n </div>\n <Stack horizontal={formFactor === 'mobile'}>\n {formFactor === 'mobile' && (\n <Stack verticalAlign=\"center\">\n <AttachFileButton />\n </Stack>\n )}\n <Stack grow>\n <SendBox\n {...sendBoxProps}\n autoFocus={options?.autoFocus}\n styles={sendBoxStyles}\n /* @conditional-compile-remove(file-sharing) */\n activeFileUploads={useSelector(fileUploadsSelector).files}\n /* @conditional-compile-remove(file-sharing) */\n onCancelFileUpload={adapter.cancelFileUpload}\n />\n </Stack>\n {formFactor !== 'mobile' && <AttachFileButton />}\n </Stack>\n </Stack>\n </Stack>\n {\n /* @conditional-compile-remove(chat-composite-participant-pane) */\n options?.participantPane === true && (\n <ChatScreenPeoplePane\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n isMobile={formFactor === 'mobile'}\n />\n )\n }\n </Stack>\n\n {\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n galleryImages && galleryImages.length > 0 && (\n <ImageGallery\n modalLayerHostId={props.modalLayerHostId}\n images={galleryImages}\n onDismiss={() => setGalleryImages(undefined)}\n onImageDownloadButtonClicked={handleOnDownloadImage}\n />\n )\n }\n </Stack>\n );\n};\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@azure/communication-react",
|
3
|
-
"version": "1.7.0-alpha-
|
3
|
+
"version": "1.7.0-alpha-202308090014",
|
4
4
|
"sideEffects": false,
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
6
6
|
"keywords": [
|
@@ -95,13 +95,13 @@
|
|
95
95
|
"@azure/core-auth": "^1.4.0",
|
96
96
|
"@babel/cli": "~7.16.0",
|
97
97
|
"@babel/core": "~7.16.0",
|
98
|
-
"@internal/calling-component-bindings": "1.7.0-alpha-
|
99
|
-
"@internal/calling-stateful-client": "1.7.0-alpha-
|
100
|
-
"@internal/chat-component-bindings": "1.7.0-alpha-
|
101
|
-
"@internal/chat-stateful-client": "1.7.0-alpha-
|
102
|
-
"@internal/fake-backends": "1.7.0-alpha-
|
103
|
-
"@internal/react-components": "1.7.0-alpha-
|
104
|
-
"@internal/react-composites": "1.7.0-alpha-
|
98
|
+
"@internal/calling-component-bindings": "1.7.0-alpha-202308090014",
|
99
|
+
"@internal/calling-stateful-client": "1.7.0-alpha-202308090014",
|
100
|
+
"@internal/chat-component-bindings": "1.7.0-alpha-202308090014",
|
101
|
+
"@internal/chat-stateful-client": "1.7.0-alpha-202308090014",
|
102
|
+
"@internal/fake-backends": "1.7.0-alpha-202308090014",
|
103
|
+
"@internal/react-components": "1.7.0-alpha-202308090014",
|
104
|
+
"@internal/react-composites": "1.7.0-alpha-202308090014",
|
105
105
|
"@fluentui/react-northstar": "0.61.0",
|
106
106
|
"@microsoft/api-documenter": "~7.12.11",
|
107
107
|
"@microsoft/api-extractor": "~7.18.0",
|