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, message: "", img: null, }); const updateEmojiPopupValue = (open) => State.update({ showEmojiPopup: open }); const updateShowImageUpload = (open) => State.update({ showImageUpload: open }); const handleMessageChange = (e) => { State.update({ message: e.target.value }); }; const handleSendMessage = (message) => { State.update({ message: "", showEmojiPopup: false, showImageUpload: false }); props.sendMessage(message, state.img); resetImage(); }; const resetImage = useCallback(() => State.update({ img: null }), []); return ( <Container> <InputMessageField value={state.message} onChange={handleMessageChange} onKeyUp={(e) => { if (e.key == "Enter") { handleSendMessage(state.message); } }} placeholder={ props.threadReply ? `Reply in thread` : `Type message in ${props.selectedChat}` } key={props.inputId} autoFocus /> {state.showEmojiPopup && ( <EmojiPopupContainer> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.EmojiSelector.EmojiSelector`} props={{ OnEmojiSelected: (emoji) => { State.update({ message: state.message + emoji, showEmojiPopup: false, }); }, }} /> </EmojiPopupContainer> )} {state.showImageUpload && ( <UploadPopupContainer> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.UploadImage`} props={{ imageUp: state.img, uploadComponent: ( <IpfsImageUpload image={state.img} className="btn btn-secondary" /> ), resetImage: 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={() => { handleSendMessage(state.message); }} /> </Container> );