communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
38 lines • 2.24 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';
import React from 'react';
import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName, isTypingClassName, rttContainerClassName } from './styles/Captions.style';
import { useLocale } from '../localization';
/**
* @public
* A component for displaying a single line of RealTimeText
*/
export const RealTimeText = (props) => {
const { displayName, userId, message, onRenderAvatar, isTyping } = props;
const theme = useTheme();
const localeStrings = useLocale().strings.realTimeText;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const personaOptions = {
hidePersonaDetails: true,
size: PersonaSize.size32,
text: displayName,
showOverflowTooltip: false,
imageShouldStartVisible: true,
initialsTextColor: 'white',
styles: {
root: {
margin: '0.25rem'
}
}
};
const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start", className: rttContainerClassName(theme, isTyping !== null && isTyping !== void 0 ? isTyping : false) },
React.createElement(Stack.Item, { className: iconClassName }, userIcon),
React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
React.createElement(Stack, { className: displayNameContainerClassName, horizontal: true },
React.createElement(Text, { className: displayNameClassName }, displayName),
isTyping && React.createElement(Text, { className: isTypingClassName(theme) }, strings === null || strings === void 0 ? void 0 : strings.isTypingText)),
React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, message))));
};
//# sourceMappingURL=RealTimeText.js.map