@emotion/core#keyframes JavaScript Examples

pulse = keyframes`
  0% {
    transform: scale(1);
    opacity: 0.3;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
`

IconTabWrapper = styled.div`
  flex: ${props => props.isSubmitPage ? 'none' : '1 1 auto'};
  min-width: ${props => props.isSubmitPage ? '50px' : '40px'};
  line-height: 0;
  ${props => css`
    transform-origin: right top;
    animation-name: ${keyframes(props.inverseScaleAnimation)};
    animation-duration: 400ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  `}
`

TabsContainer = styled.div`
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  max-width: ${props => props.basePageWidth}px;
  line-height: 30px;
  ${props => css`
    transform-origin: center top;
    animation-name: ${keyframes(props.scaleAnimation)};
    animation-duration: 400ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  `}
`

PageWrapper = styled.div`
  padding: 10px 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  ${props => css`
    transform-origin: left top;
    animation-name: ${keyframes(props.inverseScaleAnimation)};
    animation-duration: 400ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  `}
  &:focus {
    outline: none;
  }
  ${props => props.isSubmitPage ? css`
    width: ${props.submitWidth}px;
    height: 40px;
    border-radius: 5px;
    padding: 10px 3px;
    z-index: 1;
    cursor: pointer;
    &:focus {
      border: 2px solid ${props.theme.colors.light.indigo};
      padding: 8px 1px;
    }
    div {
      pointer-events: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      &:focus > button > div, &:hover > button > div {
        animation: ${bounceRight} .8s ease-in-out infinite;
      }
    }
  ` : `
  `}
`

PageContainer = styled.div`
  margin: 0px auto;
  max-width: 500px;
  height: 60px;
  ${props => `
    border-bottom-left-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
    border-bottom-right-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
    ${props.isSubmitPage ? `
      border-top-left-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
      border-top-right-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
    ` : `
    `}
  `}
  overflow: hidden;
  background-color: hsl(0, 0%, 100%);
  ${props => props.isError ? css`
    box-shadow: 0 ${5 / props.heightScale}px ${5 / props.heightScale}px hsla(16, 100%, 40%, .8);
  ` : `
    box-shadow: 0 ${5 / props.heightScale}px ${5 / props.heightScale}px hsla(120, 60%, 40%, .8);
  `}
  ${props => css`
    transform-origin: center top;
    animation-name: ${keyframes(props.scaleAnimation)};
    animation-duration: 400ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  `}
`

bounceRight = keyframes`
  0%,
  100% {
    transform: translate(-8px, -1px);
  }
  50% {
    transform: translate(-2px, -1px);
  }
`

headShake = keyframes`
  0% {
    transform: translateX(0)
  }
  12.5% {
    transform: translateX(6px) rotateY(9deg)
  }
  37.5% {
    transform: translateX(-5px) rotateY(-7deg)
  }
  62.5% {
    transform: translateX(3px) rotateY(5deg)
  }
  87.5% {
    transform: translateX(-2px) rotateY(-3deg)
  }
  100% {
    transform: translateX(0)
  }
`

radarAnimation = keyframes`
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 30px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
`

render() {

        if (!this.state.type.trim().length || !this.state.message.trim().length) {
            return null;
        }

        const messageClassName = `toast__message message-${CometChatToastNotification.types[this.state.type]}`;
        const iconClassName = `toast__icon icon-${CometChatToastNotification.types[this.state.type]}`;
        let toastIcon = (this.state.icon.trim().length) ? (

            <div css={notificationIconStyle()} className={iconClassName}>
                <i css={iconStyle(this.state.icon, this.props.theme)} title={Translator.translate("CLOSE", this.props.lang)}></i>
            </div>
        ) : null;

        return (
            <div css={notificationContainerStyle(this.props, keyframes)} className="toast__notification">
                <div css={notificationStyle(this.props, this.state)} className="toast__container">
                    {toastIcon}
                    <div css={notificationMessageContainerStyle()} className={messageClassName}>
                        <p css={notificationMessageStyle()}>{Translator.translate(this.state.message, this.props.lang)}</p>
                    </div>
                    <button css={notificationCloseButtonStyle()} type="button" onClick={this.deleteToast} className="toast__close">
                        <i css={iconStyle(closeIcon, this.props.theme)} title={Translator.translate("CLOSE", this.props.lang)}></i>
                    </button>
                </div>
            </div>
        );
    }

CometChatSmartReplyPreview = (props) => {

    const context = useContext(CometChatContext);

    const options = props.options.map((option, key) => {

        return (<div key={key} css={previewOptionStyle(context)} className="option" onClick={() => props.clicked(option)}>{option}</div>)
    })

    return (
        <div css={previewWrapperStyle(context, keyframes)} className="reply__preview__wrapper">
            <div css={previewHeadingStyle()} className="preview__heading">
                <div css={previewCloseStyle(closeIcon, context)} onClick={props.close} className="preview__close"></div>
            </div>
            <div css={previewOptionsWrapperStyle()} className="preview__options">{options}</div>
        </div>
    )
}

render() {

		let callScreen = null, errorScreen = null;
		if (this.state.callInProgress) {

			let avatar = (<CometChatAvatar user={this.state.callInProgress.receiver} />);
			if (this.state.errorScreen) {
				errorScreen = (
					<div css={errorContainerStyle()} className="callscreen__error__wrapper"><div>{this.state.errorMessage}</div></div>
				);
			}

			if (this.state.outgoingCallScreen) {
				callScreen = (
					<div css={callScreenWrapperStyle(this.props, keyframes)} className="callscreen__wrapper" ref={el => { this.callScreenFrame = el; }}>
						<div css={callScreenContainerStyle()} className="callscreen__container">
							<div css={headerStyle()} className="callscreen__header">
								<span css={headerDurationStyle()} className="header__calling">{Translator.translate("CALLING", this.props.lang)}</span>
								<h6 css={headerNameStyle()} className="header__name">{this.state.callInProgress.receiver.name}</h6>
							</div>
							<div css={thumbnailWrapperStyle()} className="callscreen__thumbnail__wrapper">
								<div css={thumbnailStyle()} className="callscreen__thumbnail">{avatar}</div>
							</div>
							{errorScreen}
							<div css={headerIconStyle()} className="callscreen__icons">
								<div css={iconWrapperStyle()} className="icon__block" onClick={this.cancelCall}>
									<div css={iconStyle(callIcon)} className="icon icon__end"><i></i></div>
								</div>
							</div>
						</div>
					</div>
				);
			} else {
				callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
			}
		}
		return callScreen;
	}

fadeIn = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`

fadeOut = keyframes`
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
`

render() {

        const resizeText = Translator.translate("RESIZE", this.props.lang);
        let iconView = (<i css={iconStyle(minimizeIcon)} title={resizeText}></i>);
        if (this.state.maximized === false) {
            iconView = (<i css={iconStyle(maximizeIcon)} title={resizeText}></i>);
        }

        return (
            <React.Fragment>
                <div css={callScreenBackgroundStyle(this.state)} ref={this.callScreenBackgroundEl}></div>
                <div ref={this.callScreenEl} className="callscreen__container" css={callScreenContainerStyle(this.props)} 
                    style={{ top: this.state.y + "px", left: this.state.x + "px" }}>
                    <div css={callScreenInnerBackgroundStyle()} ref={this.callScreenInnerBackgroundEl}></div>
                    <div css={callScreenHeaderStyle(this.state)} className="callscreen__header" onMouseDown={this.enableDragging}>
                        <div css={headerTitleStyle()}>&nbsp;</div>
                        <div className="callscreen__resize" css={headerButtonStyle()} onClick={this.toggle} onMouseDown={e => e.stopPropagation()}><button type="button" title={resizeText}>{iconView}</button></div>
                    </div>
                    <div css={callScreenWrapperStyle(this.props, keyframes)} className="callscreen__wrapper" ref={el => { this.callScreenFrame = el; }}></div>
                    <div css={callScreenResizerStyle(this.state)} className="callscreen__resizer-both" onMouseDown={this.initResize}></div>
                </div>
            </React.Fragment>
        )
    }

animation = keyframes`
  0% { right: -300px; opacity: 0;}
  50% { right: 50px; opacity: 0.5;}
  100% {right: 0px; opacity: 1;};
`

flash = keyframes`
  0% { opacity: 0; }
  50% { opacity: 0.6; }
  100% { opacity: 0; }
`

backgroundShift = keyframes`
  0% { background-position: 100%, 0% 50%; }
  50% { background-position: 100%, 100% 50%; }
  100% { background-position: 100%, 0% 50%; }
`

glitchAnim = keyframes`
  0% {
    clip: rect(105px, 9999px, 120px, 0);
  }
  4.166666666666666% {
    clip: rect(64px, 9999px, 110px, 0);
  }
  8.333333333333332% {
    clip: rect(23px, 9999px, 49px, 0);
  }
  12.5% {
    clip: rect(104px, 9999px, 5px, 0);
  }
  16.666666666666664% {
    clip: rect(142px, 9999px, 37px, 0);
  }
  20.833333333333336% {
    clip: rect(7px, 9999px, 92px, 0);
  }
  25% {
    clip: rect(127px, 9999px, 55px, 0);
  }
  29.166666666666668% {
    clip: rect(16px, 9999px, 132px, 0);
  }
  33.33333333333333% {
    clip: rect(136px, 9999px, 119px, 0);
  }
  37.5% {
    clip: rect(0px, 9999px, 92px, 0);
  }
  41.66666666666667% {
    clip: rect(83px, 9999px, 134px, 0);
  }
  45.83333333333333% {
    clip: rect(92px, 9999px, 124px, 0);
  }
  50% {
    clip: rect(114px, 9999px, 150px, 0);
  }
  54.166666666666664% {
    clip: rect(5px, 9999px, 110px, 0);
  }
  58.333333333333336% {
    clip: rect(79px, 9999px, 30px, 0);
  }
  62.5% {
    clip: rect(124px, 9999px, 28px, 0);
  }
  66.66666666666666% {
    clip: rect(90px, 9999px, 127px, 0);
  }
  70.83333333333334% {
    clip: rect(131px, 9999px, 127px, 0);
  }
  75% {
    clip: rect(34px, 9999px, 35px, 0);
  }
  79.16666666666666% {
    clip: rect(46px, 9999px, 118px, 0);
  }
  83.33333333333334% {
    clip: rect(106px, 9999px, 56px, 0);
  }
  87.5% {
    clip: rect(35px, 9999px, 138px, 0);
  }
  91.66666666666666% {
    clip: rect(84px, 9999px, 67px, 0);
  }
  95.83333333333334% {
    clip: rect(72px, 9999px, 86px, 0);
  }
  100% {
    clip: rect(143px, 9999px, 132px, 0);
  }
`

animationLeft = keyframes`
  0% { left: -300px; opacity: 0;}
  50% { left: 50px; opacity: 0.5;}
  100% {left: 0px; opacity: 1;};
`

upAndDownAnimation = keyframes`
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
`

render() {
		let callScreen = null,
			incomingCallAlert = null;
		if (this.state.incomingCall) {
			let callType = (
				<React.Fragment>
					<i css={callIconStyle(audioCallIcon, this.context)} title={Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)}></i>
					<span>{Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)}</span>
				</React.Fragment>
			);
			if (this.state.incomingCall.type === CometChat.CALL_TYPE.VIDEO) {
				callType = (
					<React.Fragment>
						<i css={callIconStyle(videoCallIcon, this.context)} title={Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}></i>
						<span>{Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}</span>
					</React.Fragment>
				);
			}

			incomingCallAlert = (
				<div css={incomingCallWrapperStyle(this.props, keyframes)} className="callalert__wrapper">
					<div css={callContainerStyle()} className="callalert__container">
						<div css={headerWrapperStyle()} className="callalert__header">
							<div css={callDetailStyle()} className="header__detail">
								<div css={nameStyle()} className="name">
									{this.state.incomingCall.sender.name}
								</div>
								<div css={callTypeStyle(this.props)} className="calltype">
									{callType}
								</div>
							</div>
							<div css={thumbnailStyle()} className="header__thumbnail">
								<CometChatAvatar user={this.state.incomingCall.sender} />
							</div>
						</div>
						<div css={headerButtonStyle()} className="callalert__buttons" ref={this.callButtonRef}>
							<button type="button" css={ButtonStyle(this.props, 0)} className="button button__decline" onClick={() => this.rejectCall(this.state.incomingCall, CometChat.CALL_STATUS.REJECTED)}>
								{Translator.translate("DECLINE", this.props.lang)}
							</button>
							<button type="button" css={ButtonStyle(this.props, 1)} className="button button__accept" onClick={this.acceptCall}>
								{Translator.translate("ACCEPT", this.props.lang)}
							</button>
						</div>
					</div>
				</div>
			);
		}

		if (this.state.callInProgress) {
			callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
		}

		return (
			<React.Fragment>
				{incomingCallAlert}
				{callScreen}
			</React.Fragment>
		);
	}

blink = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

rotate = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359.999deg);
  }
`

blink = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

render() {
		let callScreen = null,
			incomingCallAlert = null;
		if (this.state.incomingCall) {
			let avatar = (
				<div css={thumbnailStyle()} className="header__thumbnail">
					<CometChatAvatar cornerRadius="50%" image={this.state.incomingCall.sender.avatar} />
				</div>
			);

			const callType = (
				<React.Fragment>
					<i css={callIconStyle(videoCallIcon, this.context)} title={Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}></i>
					<span>{Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}</span>
				</React.Fragment>
			);

			incomingCallAlert = (
				<div css={incomingCallWrapperStyle(this.props, keyframes)} className="callalert__wrapper">
					<div css={callContainerStyle()} className="callalert__container">
						<div css={headerWrapperStyle()} className="callalert__header">
							<div css={callDetailStyle()} className="header__detail">
								<div css={nameStyle()} className="name">
									{this.state.incomingCall.sender.name}
								</div>
								<div css={callTypeStyle(this.props)} className="calltype">
									{callType}
								</div>
							</div>
							{avatar}
						</div>
						<div css={headerButtonStyle()} className="callalert__buttons" ref={this.callButtonRef}>
							<button type="button" css={ButtonStyle(this.props, 0)} className="button button__ignore" onClick={this.ignoreCall}>
								{Translator.translate("IGNORE", this.props.lang)}
							</button>
							<button type="button" css={ButtonStyle(this.props, 1)} className="button button__join" onClick={this.joinCall}>
								{Translator.translate("JOIN", this.props.lang)}
							</button>
						</div>
					</div>
				</div>
			);
		}

		if (this.state.callInProgress) {
			callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
		}

		return (
			<React.Fragment>
				{incomingCallAlert}
				{callScreen}
			</React.Fragment>
		);
	}

render() {

        let messageContainer = null;
        if (this.state.activestickerlist.length === 0) {
            messageContainer = (
                <div css={stickerMsgStyle()} className="stickers__decorator-message">
                    <p css={stickerMsgTxtStyle(this.context)} className="decorator-message">{this.decoratorMessage}</p>
                </div>
            );
        }

        let stickers = null;
        if (Object.keys(this.state.stickerset).length) {

            const sectionItems = Object.keys(this.state.stickerset).map((sectionItem, key) => {

                const stickerSetThumbnail = this.state.stickerset[sectionItem][0]["stickerUrl"];
                return( <div  key={key}  className="stickers__sectionitem" css={sectionListItemStyle()}  onClick={() => this.onStickerSetClicked(sectionItem)}>
                    <img src={stickerSetThumbnail} alt={sectionItem} />
                </div>
                );
            });

            let activeStickerList = [];
            if (this.state.activestickerlist.length) {

                const stickerList = [...this.state.activestickerlist];
                activeStickerList = stickerList.map((stickerItem, key) => {

                    return (
                        <div key={key} css={stickerItemStyle(this.context)} onClick={() => this.sendStickerMessage(stickerItem)} className="stickers__listitem">
                            <img src={stickerItem.stickerUrl} alt={stickerItem.stickerName} />
                        </div>
                    );
                });
            }

            stickers = (
                <React.Fragment>
                    <div css={stickerCloseStyle(closeIcon, this.context)} className="stickers__close" onClick={this.closeStickerKeyboard}></div>
                    <div css={stickerListStyle(this.props)} className="stickers__list">
                        {activeStickerList}
                    </div>
                    <div css={stickerSectionListStyle(this.context)} className="stickers__sections">
                        {sectionItems}
                    </div>
                </React.Fragment>
            );
        }

        return (
            <div css={stickerWrapperStyle(this.context, keyframes)} className="stickers">
                {messageContainer}
                {stickers}
            </div>
        );
    }

render() {
		let liveReactionBtn = null;
		const liveReactionText = Translator.translate("LIVE_REACTION", this.context.language);
		if (enums.CONSTANTS["LIVE_REACTIONS"].hasOwnProperty(this.props.reaction)) {
			const reactionName = this.props.reaction;
			liveReactionBtn = (
				<div title={liveReactionText} css={reactionBtnStyle()} className="button__reactions" onClick={this.startLiveReaction}>
					<img src={heartIcon} alt={reactionName} />
				</div>
			);
		}

		let disabledState = false;
		if (this.context.item.blockedByMe) {
			disabledState = true;
		}

		const docText = Translator.translate("ATTACH_FILE", this.context.language);
		let docs = (
			<div
				title={docText}
				css={fileItemStyle(docIcon, this.context)}
				className="filelist__item item__file"
				onClick={() => {
					this.openFileDialogue("file");
				}}>
				<i></i>
				<input onChange={this.onFileChange} type="file" id="file" ref={this.fileUploaderRef} />
			</div>
		);

		const videoText = Translator.translate("ATTACH_VIDEO", this.context.language);
		const audioText = Translator.translate("ATTACH_AUDIO", this.context.language);
		const imageText = Translator.translate("ATTACH_IMAGE", this.context.language);
		let avp = (
			<React.Fragment>
				<div
					title={videoText}
					css={fileItemStyle(videoIcon, this.context)}
					className="filelist__item item__video"
					onClick={() => {
						this.openFileDialogue("video");
					}}>
					<i></i>
					<input onChange={this.onVideoChange} accept="video/*" type="file" ref={this.videoUploaderRef} />
				</div>
				<div
					title={audioText}
					css={fileItemStyle(audioIcon, this.context)}
					className="filelist__item item__audio"
					onClick={() => {
						this.openFileDialogue("audio");
					}}>
					<i></i>
					<input onChange={this.onAudioChange} accept="audio/*" type="file" ref={this.audioUploaderRef} />
				</div>
				<div
					title={imageText}
					css={fileItemStyle(imageIcon, this.context)}
					className="filelist__item item__image"
					onClick={() => {
						this.openFileDialogue("image");
					}}>
					<i></i>
					<input onChange={this.onImageChange} accept="image/*" type="file" ref={this.imageUploaderRef} />
				</div>
			</React.Fragment>
		);

		const pollText = Translator.translate("CREATE_POLL", this.context.language);
		let createPollBtn = (
			<div title={pollText} css={fileItemStyle(pollIcon, this.context)} className="filelist__item item__poll" onClick={this.toggleCreatePoll}>
				<i></i>
			</div>
		);

		const collaborativeDocText = Translator.translate("COLLABORATE_USING_DOCUMENT", this.context.language);
		let collaborativeDocBtn = (
			<div title={collaborativeDocText} css={fileItemStyle(documentIcon, this.context)} className="filelist__item item__document" onClick={this.toggleCollaborativeDocument}>
				<i></i>
			</div>
		);

		const collaborativeBoardText = Translator.translate("COLLABORATE_USING_WHITEBOARD", this.context.language);
		let collaborativeBoardBtn = (
			<div title={collaborativeBoardText} css={fileItemStyle(whiteboardIcon, this.context)} className="filelist__item item__whiteboard" onClick={this.toggleCollaborativeBoard}>
				<i></i>
			</div>
		);

		const emojiText = Translator.translate("EMOJI", this.context.language);
		let emojiBtn = (
			<div
				title={emojiText}
				css={emojiButtonStyle(insertEmoticon, this.context)}
				className="button__emoji"
				onClick={() => {
					this.toggleEmojiPicker();
					this.setState({ messageToReact: "" });
				}}>
				<i></i>
			</div>
		);

		const StickerText = Translator.translate("STICKER", this.context.language);
		let stickerBtn = (
			<div title={StickerText} css={stickerBtnStyle(stickerIcon, this.context)} className="button__sticker" onClick={this.toggleStickerPicker}>
				<i></i>
			</div>
		);

		const sendMessageText = Translator.translate("SEND_MESSAGE", this.context.language);
		let sendBtn = (
			<div title={sendMessageText} css={sendButtonStyle(sendBlue, this.context)} className="button__send" onClick={this.sendTextMessage}>
				<i></i>
			</div>
		);

		//if uploading photos, videos feature is disabled
		if (this.state.enablePhotosVideos === false) {
			avp = null;
		}

		//if files upload are disabled for chat widget in dashboard
		if (this.state.enableFiles === false) {
			docs = null;
		}

		//if polls feature is disabled
		if (this.state.enablePolls === false || this.props.parentMessageId) {
			createPollBtn = null;
		}

		//if collaborative_document are disabled for chat widget in dashboard
		if (this.state.enableCollaborativeDocument === false || this.props.parentMessageId) {
			collaborativeDocBtn = null;
		}

		//if collaborative_document are disabled for chat widget in dashboard
		if (this.state.enableCollaborativeWhiteboard === false || this.props.parentMessageId) {
			collaborativeBoardBtn = null;
		}

		//if emojis are disabled for chat widget in dashboard
		if (this.state.enableEmojis === false) {
			emojiBtn = null;
		}

		//if live reactions is disabled for chat widget in dashboard
		if (this.state.enableLiveReaction === false || this.state.messageInput.length || this.props.parentMessageId) {
			liveReactionBtn = null;
		}

		//if stickers is disabled for chat widget in dashboard
		if (this.state.enableStickers === false) {
			stickerBtn = null;
		}

		if (!this.state.messageInput.length) {
			sendBtn = null;
		}

		const attachText = Translator.translate("ATTACH", this.context.language);
		let attach = (
			<div css={stickyAttachmentStyle()} className="input__sticky__attachment">
				<div css={stickyAttachButtonStyle(roundedPlus, this.context)} className="attachment__icon" onClick={this.toggleFilePicker} title={attachText}>
					<i></i>
				</div>
				<div css={filePickerStyle(this.state)} className="attachment__filepicker" dir={Translator.getDirection(this.context.language)}>
					<div css={fileListStyle()} className="filepicker__filelist">
						{avp}
						{docs}
						{createPollBtn}
						{collaborativeDocBtn}
						{collaborativeBoardBtn}
					</div>
				</div>
			</div>
		);

		if (avp === null && docs === null && createPollBtn === null && collaborativeDocBtn === null && collaborativeBoardBtn === null) {
			attach = null;
		}

		let createPoll = null;
		if (this.state.createPoll) {
			createPoll = <CometChatCreatePoll close={this.closeCreatePoll} actionGenerated={this.actionHandler} />;
		}

		let editPreview = null;
		if (this.state.messageToBeEdited) {
			let messageText = this.state.messageToBeEdited.text;

			//xss extensions data
			const xssData = checkMessageForExtensionsData(this.state.messageToBeEdited, "xss-filter");
			if (xssData && xssData.hasOwnProperty("sanitized_text") && xssData.hasOwnProperty("hasXSS") && xssData.hasXSS === "yes") {
				messageText = xssData.sanitized_text;
			}

			//datamasking extensions data
			const maskedData = checkMessageForExtensionsData(this.state.messageToBeEdited, "data-masking");
			if (maskedData && maskedData.hasOwnProperty("data") && maskedData.data.hasOwnProperty("sensitive_data") && maskedData.data.hasOwnProperty("message_masked") && maskedData.data.sensitive_data === "yes") {
				messageText = maskedData.data.message_masked;
			}

			//profanity extensions data
			const profaneData = checkMessageForExtensionsData(this.state.messageToBeEdited, "profanity-filter");
			if (profaneData && profaneData.hasOwnProperty("profanity") && profaneData.hasOwnProperty("message_clean") && profaneData.profanity === "yes") {
				messageText = profaneData.message_clean;
			}

			editPreview = (
				<div css={editPreviewContainerStyle(this.context, keyframes)}>
					<div css={previewHeadingStyle()}>
						<div css={previewTextStyle()}>{Translator.translate("EDIT_MESSAGE", this.context.language)}</div>
						<span css={previewCloseStyle(closeIcon, this.context)} onClick={this.closeEditPreview}></span>
					</div>
					<div>{messageText}</div>
				</div>
			);
		}

		let smartReplyPreview = null;
		if (this.state.replyPreview) {
			const message = this.state.replyPreview;

			const smartReplyData = checkMessageForExtensionsData(message, "smart-reply");
			if (smartReplyData && smartReplyData.hasOwnProperty("error") === false) {
				const options = [smartReplyData["reply_positive"], smartReplyData["reply_neutral"], smartReplyData["reply_negative"]];
				smartReplyPreview = <CometChatSmartReplyPreview options={options} clicked={this.sendReplyMessage} close={this.clearReplyPreview} />;
			}
		}

		let stickerViewer = null;
		if (this.state.stickerViewer) {
			stickerViewer = <CometChatStickerKeyboard actionGenerated={this.actionHandler} />;
		}

		let emojiViewer = null;
		if (this.state.emojiViewer) {
			emojiViewer = <CometChatEmojiKeyboard emojiClicked={this.emojiClicked} lang={this.context.language} />;
		}

		return (
			<div css={chatComposerStyle(this.context)} className="chat__composer">
				{editPreview}
				{smartReplyPreview}
				{stickerViewer}
				{emojiViewer}
				<div css={composerInputStyle()} className="composer__input">
					<div tabIndex="-1" css={inputInnerStyle(this.props, this.state, this.context)} className="input__inner">
						<div
							css={messageInputStyle(disabledState)}
							className="input__message-input"
							contentEditable="true"
							placeholder={Translator.translate("ENTER_YOUR_MESSAGE_HERE", this.context.language)}
							dir={Translator.getDirection(this.context.language)}
							onInput={this.changeHandler}
							onBlur={event => this.endTyping(event)}
							onKeyDown={this.sendMessageOnEnter}
							ref={this.messageInputRef}></div>
						<div css={inputStickyStyle(disabledState, attach, this.context)} className="input__sticky">
							{attach}
							<div css={stickyButtonStyle(this.state)} className="input__sticky__buttons">
								{stickerBtn}
								{emojiBtn}
								{sendBtn}
								{liveReactionBtn}
							</div>
						</div>
					</div>
				</div>
				{createPoll}
			</div>
		);
	}

glitchAnim2 = keyframes`
  6.666666666666667% {
    clip: rect(42px, 9999px, 16px, 0);
  }
  10% {
    clip: rect(128px, 9999px, 39px, 0);
  }
  13.333333333333334% {
    clip: rect(74px, 9999px, 139px, 0);
  }
  16.666666666666664% {
    clip: rect(33px, 9999px, 111px, 0);
  }
  20% {
    clip: rect(146px, 9999px, 60px, 0);
  }
  23.333333333333332% {
    clip: rect(25px, 9999px, 64px, 0);
  }
  26.666666666666668% {
    clip: rect(129px, 9999px, 56px, 0);
  }
  30% {
    clip: rect(44px, 9999px, 78px, 0);
  }
  33.33333333333333% {
    clip: rect(91px, 9999px, 105px, 0);
  }
  36.666666666666664% {
    clip: rect(149px, 9999px, 99px, 0);
  }
  40% {
    clip: rect(87px, 9999px, 15px, 0);
  }
  43.333333333333336% {
    clip: rect(56px, 9999px, 25px, 0);
  }
  46.666666666666664% {
    clip: rect(64px, 9999px, 81px, 0);
  }
  50% {
    clip: rect(92px, 9999px, 65px, 0);
  }
  53.333333333333336% {
    clip: rect(52px, 9999px, 41px, 0);
  }
  56.666666666666664% {
    clip: rect(125px, 9999px, 144px, 0);
  }
  60% {
    clip: rect(48px, 9999px, 109px, 0);
  }
  63.33333333333333% {
    clip: rect(69px, 9999px, 13px, 0);
  }
  66.66666666666666% {
    clip: rect(15px, 9999px, 57px, 0);
  }
  70% {
    clip: rect(140px, 9999px, 98px, 0);
  }
  73.33333333333333% {
    clip: rect(143px, 9999px, 44px, 0);
  }
  76.66666666666667% {
    clip: rect(39px, 9999px, 62px, 0);
  }
  80% {
    clip: rect(148px, 9999px, 99px, 0);
  }
  83.33333333333334% {
    clip: rect(90px, 9999px, 119px, 0);
  }
  86.66666666666667% {
    clip: rect(46px, 9999px, 114px, 0);
  }
  90% {
    clip: rect(93px, 9999px, 68px, 0);
  }
  93.33333333333333% {
    clip: rect(16px, 9999px, 22px, 0);
  }
  96.66666666666667% {
    clip: rect(145px, 9999px, 16px, 0);
  }
  100% {
    clip: rect(13px, 9999px, 71px, 0);
  }
`

function LoadingIcon(_props) {
  const props = { ...DEFAULT_PROPS, ..._props };
  const { size, testId } = props;
  const radius = circleRadiusMap[size] ?? 4;
  const stepPx = `${3 * radius}px`;
  const frames = 12; // 3 circles * 4 steps each
  const percantagePerFrame = 100 / frames;
  const duration = 3; // sec

  /*
    circle diameter + space between circles + circle diameter
      (2 * radius)  +        radius         +   (2 * radius)
  */
  const svgSize = 5 * radius;

  const start = {
    transform: `translate3d(0, 0, 0)`,
  };
  const right = {
    transform: `translate3d(${stepPx}, 0, 0)`,
  };
  const bottom = {
    transform: `translate3d(0, ${stepPx}, 0)`,
  };
  const left = {
    transform: `translate3d(-${stepPx}, 0, 0)`,
  };
  const up = {
    transform: `translate3d(0, -${stepPx}, 0)`,
  };
  const rightAndBottom = {
    transform: `translate3d(${stepPx}, ${stepPx}, 0)`,
  };
  const upAndRight = {
    transform: `translate3d(${stepPx}, -${stepPx}, 0)`,
  };
  const leftAndUp = {
    transform: `translate3d(-${stepPx}, -${stepPx}, 0)`,
  };

  const getKeyframes = (steps) =>
    keyframes(
      steps.reduce((acc, step, index) => {
        acc[`${index * percantagePerFrame}%`] = step;
        return acc;
      }, {})
    );

  const svgCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
    color: ({ color }, theme) => {
      return {
        fill: theme.getColor(color) ?? theme.colors.black,
      };
    },
  });
  const circleCSS = [
    getKeyframes([
      start,
      right,
      right,
      right,
      rightAndBottom,
      rightAndBottom,
      rightAndBottom,
      bottom,
      bottom,
      bottom,
      start,
      start,
    ]),
    getKeyframes([
      start,
      start,
      up,
      up,
      up,
      upAndRight,
      upAndRight,
      upAndRight,
      right,
      right,
      right,
      start,
    ]),
    getKeyframes([
      start,
      start,
      start,
      left,
      left,
      left,
      leftAndUp,
      leftAndUp,
      leftAndUp,
      up,
      up,
      up,
    ]),
  ].map((animation) => ({
    animation: `${animation} ${duration}s ease infinite`,
  }));

  return (
    <svg
      css={svgCSS}
      width={svgSize}
      height={svgSize}
      viewBox={`0 0 ${svgSize} ${svgSize}`}
      focusable="false"
      role="img"
      aria-label="Loading icon"
      data-testid={testId}
    >
      <circle cx={radius} cy={radius} r={radius} css={circleCSS[0]} />
      <circle cx={radius} cy={4 * radius} r={radius} css={circleCSS[1]} />
      <circle cx={4 * radius} cy={4 * radius} r={radius} css={circleCSS[2]} />
    </svg>
  );
}