const Container = styled.div` position: relative; display: flex; justify-content: center; align-items: center; width: 971px; height: 72px; border-radius: 36px; background-color: #1d1d21; `; const InputMessageField = styled.input` position: relative; color: #fff; width: 937px; height: 40px; padding: 8px 60px 8px 80px; border-radius: 1000px; background-color: #0e0e10; border: none; `; const IconSend = styled.i` position: absolute; bottom: 20px; right: 50px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } `; const IconEmoji = styled.i` position: absolute; bottom: 20px; left: 30px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } `; const IconUpload = styled.i` position: absolute; bottom: 20px; left: 60px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } `; const EmojiPopupContainer = styled.div` position: absolute; bottom: 70px; left: 50px; `; const UploadPopupContainer = styled.div` position: absolute; bottom: 70px; left: 90px; `; State.init({ showEmojiPopup: false, showImageUpload: false, }); const updateEmojiPopupValue = (open) => State.update({ showEmojiPopup: open }); const updateShowImageUpload = (open) => State.update({ showImageUpload: open }); return ( <Container> <InputMessageField onChange={props.onChange} onKeyUp={(e) => { if (e.key == "Enter") { updateEmojiPopupValue(false); props.sendMessage(); } }} placeholder={`Type message in ${props.selectedChat}`} key={props.inputId} value={props.message} autoFocus /> {state.showEmojiPopup && ( <EmojiPopupContainer> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.EmojiSelector.EmojiSelector`} props={{ OnEmojiSelected: (emoji) => { props.onAddEmoji(emoji); }, }} /> </EmojiPopupContainer> )} {state.showImageUpload && ( <UploadPopupContainer> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.UploadImage`} props={{ imageUp: props.img, uploadComponent: props.uploadComponent, resetImage: props.resetImage, }} /> </UploadPopupContainer> )} <IconEmoji className="bi bi-emoji-smile-fill" onClick={() => { updateShowImageUpload(false); updateEmojiPopupValue(!state.showEmojiPopup); }} /> <IconUpload className="bi bi-cloud-arrow-up-fill" onClick={() => { updateEmojiPopupValue(false); updateShowImageUpload(!state.showImageUpload); }} /> <IconSend className="bi bi-send-fill" onClick={() => { updateEmojiPopupValue(false); updateShowImageUpload(false); props.sendMessage(); }} /> </Container> );