communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
62 lines • 4.02 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { DefaultSystemMessage } from './DefaultSystemMessage';
import { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';
import { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';
/**
* The wrapper component to display different types of chat message.
*
* @private
*/
export const ChatMessageComponentWrapper = (props) => {
var _a, _b;
const { message, styles, onRenderMessage, key: messageKey } = props;
const systemMessageStyle = useMemo(() => {
return {
paddingTop: '0.5rem'
};
}, []);
const customMessageStyle = useMemo(() => {
return { paddingTop: '1rem', paddingBottom: '0.25rem' };
}, []);
/* @conditional-compile-remove(data-loss-prevention) */
// Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
if (message.messageType === 'blocked') {
const myChatMessageStyle = message.status === 'failed'
? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
: styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
}
switch (message.messageType) {
case 'chat': {
const myChatMessageStyle = message.status === 'failed'
? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
: styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
}
case 'system': {
const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, props))) : (onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
return (React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent));
}
default: {
// We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
return (React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent));
}
}
};
const fluentChatComponent = (props) => {
if (props.message.mine === true) {
return React.createElement(FluentChatMyMessageComponent, Object.assign({}, props));
}
else {
return React.createElement(FluentChatMessageComponent, Object.assign({}, props));
}
};
//# sourceMappingURL=ChatMessageComponentWrapper.js.map