|
|
|
@ -52,18 +52,22 @@ export class TypingBubble extends React.Component<Props> {
|
|
|
|
|
const { i18n, color } = this.props;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={classNames('module-message', 'module-message--incoming')}>
|
|
|
|
|
<div className="loki-message-wrapper">
|
|
|
|
|
<div
|
|
|
|
|
className={classNames(
|
|
|
|
|
'module-message__container',
|
|
|
|
|
'module-message__container--incoming',
|
|
|
|
|
`module-message__container--incoming-${color}`
|
|
|
|
|
)}
|
|
|
|
|
className={classNames('module-message', 'module-message--incoming')}
|
|
|
|
|
>
|
|
|
|
|
<div className="module-message__typing-container">
|
|
|
|
|
<TypingAnimation color="light" i18n={i18n} />
|
|
|
|
|
<div
|
|
|
|
|
className={classNames(
|
|
|
|
|
'module-message__container',
|
|
|
|
|
'module-message__container--incoming',
|
|
|
|
|
`module-message__container--incoming-${color}`
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<div className="module-message__typing-container">
|
|
|
|
|
<TypingAnimation color="light" i18n={i18n} />
|
|
|
|
|
</div>
|
|
|
|
|
{this.renderAvatar()}
|
|
|
|
|
</div>
|
|
|
|
|
{this.renderAvatar()}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|