communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
108 lines • 6.33 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useCallback, useState } from 'react';
import { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';
import { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';
/**
* @private
*/
export const ChatMyMessageComponent = (props) => {
var _a, _b;
const { onDeleteMessage, onSendMessage, message, onCancelEditMessage, onUpdateMessage } = props;
const [isEditing, setIsEditing] = useState(false);
const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);
const onEditClick = useCallback(() => {
setIsEditing(true);
setFocusMessageAfterEditing(false);
}, []);
const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
const content = 'content' in message ? message.content : undefined;
const onRemoveClick = useCallback(() => {
if (onDeleteMessage && message.messageId) {
onDeleteMessage(message.messageId);
}
// when fail to send, message does not have message id, delete message using clientMessageId
else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
onDeleteMessage(clientMessageId);
}
}, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
const onResendClick = useCallback(() => {
onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
let newContent = content !== null && content !== void 0 ? content : '';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);
onSendMessage &&
onSendMessage(newContent,
/* @conditional-compile-remove(file-sharing-acs) */
/* @conditional-compile-remove(rich-text-editor-image-upload) */
{
/* @conditional-compile-remove(file-sharing-acs) */ attachments: `attachments` in message ? message.attachments : undefined,
/* @conditional-compile-remove(rich-text-editor) */
type: props.isRichTextEditorEnabled ? 'html' : 'text'
});
}, [
message,
onDeleteMessage,
clientMessageId,
onSendMessage,
content,
/* @conditional-compile-remove(rich-text-editor) */ props.isRichTextEditorEnabled
]);
const onSubmitHandler = useCallback(
// due to a bug in babel, we can't use arrow function here
// affecting conditional-compile-remove(attachment-upload)
function (text,
/* @conditional-compile-remove(file-sharing-acs) */
attachments) {
return __awaiter(this, void 0, void 0, function* () {
/* @conditional-compile-remove(file-sharing-acs) */
if (`attachments` in message && attachments) {
message.attachments = attachments;
}
yield (onUpdateMessage === null || onUpdateMessage === void 0 ? void 0 : onUpdateMessage(message.messageId, text,
/* @conditional-compile-remove(file-sharing-acs) */
{ attachments: attachments }));
setIsEditing(false);
setFocusMessageAfterEditing(true);
});
}, [message, onUpdateMessage]);
const onCancelHandler = useCallback((messageId) => {
onCancelEditMessage === null || onCancelEditMessage === void 0 ? void 0 : onCancelEditMessage(messageId);
setIsEditing(false);
setFocusMessageAfterEditing(true);
}, [onCancelEditMessage]);
if (isEditing && message.messageType === 'chat') {
return (React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: onCancelHandler,
/* @conditional-compile-remove(mention) */
mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions,
/* @conditional-compile-remove(rich-text-editor) */
isRichTextEditorEnabled: props.isRichTextEditorEnabled,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onPaste: props.onPaste,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onInsertInlineImage: props.onInsertInlineImage,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
inlineImagesWithProgress: props.inlineImagesWithProgress,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onRemoveInlineImage: props.onRemoveInlineImage }));
}
else {
return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
/* @conditional-compile-remove(date-time-customization) */
onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions,
/* @conditional-compile-remove(mention) */
mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions, shouldFocusFluentMessageBody: focusMessageAfterEditing })));
}
};
//# sourceMappingURL=ChatMyMessageComponent.js.map