const { componentOwnerId, threadReply, selectedChat, sendMessage } = props; State.init({ img: null, }); const Container = styled.div` position: relative; bottom: 24px; display: flex; justify-content: center; align-items: center; height: 72px; border-radius: 36px; background-color: #1d1d21; padding-left: 17px; padding-right: 17px; @media (max-width: 1024px) { padding-left: 2px; bottom: 10px; padding-right: 2px; border-radius: 10px; height: 56px; margin-left: 20px; margin-right: 20px; } `; const InputMessageField = styled.textarea` position: relative; color: #fff; height: 40px; width: 100%; padding: 8px 60px 8px 100px; border-radius: 1000px; background-color: #0e0e10; border: none; @media (max-width: 1024px) { height: 50px; border-radius: 10px; padding: 8px 50px 8px 70px; } `; const MarkdownInputField = styled.div` position: relative; color: #fff; height: 40px; width: 100%; padding: 8px 60px 8px 100px; border-radius: 1000px; background-color: #0e0e10; border: none; overflow-y: scroll; @media (max-width: 1024px) { height: 50px; border-radius: 10px; padding: 12px 50px 8px 70px; } `; const IconSend = styled.i` position: absolute; bottom: 20px; right: 50px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } @media (max-width: 1024px) { bottom: 12px; right: 28px; } `; const IconEmoji = styled.i` position: absolute; bottom: 20px; left: 30px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } @media (max-width: 1024px) { display: none; } `; const IconUpload = styled.i` position: absolute; bottom: 20px; left: 60px; font-size: 1.25rem; cursor: pointer; color: #797978; :hover { color: #fff; } @media (max-width: 1024px) { bottom: 12px; left: 16px; } `; const IconShowMarkdown = styled.i` position: absolute; bottom: 20px; left: 90px; font-size: 1.25rem; cursor: pointer; color: ${({ showMarkdown }) => (showMarkdown ? "#fff" : "#797978")}; :hover { color: #fff; } @media (max-width: 1024px) { bottom: 12px; left: 44px; } `; const EmojiPopupContainer = styled.div` position: absolute; bottom: 70px; left: 50px; `; const UploadPopupContainer = styled.div` position: absolute; bottom: 70px; left: 90px; @media (max-width: 1024px) { left: 30px; } `; const UploadContainer = styled.div` background-color: #0e0e10; border-radius: 0.375rem; width: fit-content; padding: 1rem; `; const [showEmojiPopup, setShowEmojiPopup] = useState(false); const [showUpload, setShowUpload] = useState(false); const [message, setMessage] = useState(""); const [showMarkdown, setShowMarkdown] = useState(false); const [uploadedFile, setUploadedFile] = useState(null); const updateShowMarkdown = useCallback(() => { if (message) { setShowMarkdown(!showMarkdown); } }, [message, showMarkdown]); const setImage = useCallback( (img) => { State.update({ img: img }); }, [state.img] ); const updateShowEmojiPopup = useCallback((state) => { setShowEmojiPopup(state); }, []); const updateShowUpload = useCallback((state) => { setShowUpload(state); }, []); const handleMessageChange = useCallback((e) => { setMessage(e.target.value); }, []); const resetImage = useCallback(() => State.update({ img: null }), []); const resetFile = useCallback(() => setUploadedFile(null), []); const resetMessage = useCallback(() => setMessage(""), []); const handleSendMessage = useCallback(() => { sendMessage(markdownParser(message), state.img, uploadedFile); resetImage(); resetFile(); resetMessage(); updateShowUpload(false); updateShowEmojiPopup(false); }, [message, state.img, uploadedFile]); const onEmojiSelected = useCallback( (emoji) => { const tempTextMessage = message; setMessage(`${tempTextMessage}${emoji}`); }, [message] ); const markdownParser = (text) => { const toHTML = text .replace(/^##### (.*$)/gim, "$1") // h4 tag .replace(/^#### (.*$)/gim, "$1") // h4 tag .replace(/^### (.*$)/gim, "$1") // h3 tag .replace(/^## (.*$)/gim, "$1") // h2 tag .replace(/^# (.*$)/gim, "$1"); // h1 tag return toHTML.trim(); // using trim method to remove whitespace }; return ( <Container> {showMarkdown && message ? ( <MarkdownInputField> <Markdown text={markdownParser(message)} /> </MarkdownInputField> ) : ( <InputMessageField value={message} onChange={handleMessageChange} onKeyUp={(e) => { if (e.key === "Enter" && !e.shiftKey) { handleSendMessage(); } }} placeholder={ threadReply ? `Reply in thread` : `Type message in ${selectedChat}` } autoFocus /> )} {showEmojiPopup && ( <EmojiPopupContainer> <Widget src={`${componentOwnerId}/widget/Calimero.Curb.EmojiSelector.EmojiSelector`} props={{ OnEmojiSelected: onEmojiSelected, }} /> </EmojiPopupContainer> )} {showUpload && ( <UploadPopupContainer> <UploadContainer> {!uploadedFile && ( <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Chat.UploadImage`} props={{ imageUp: state.img, uploadComponent: ( <IpfsImageUpload image={state.img} className="btn btn-secondary" /> ), resetImage: resetImage, }} /> )} {!state.img && ( <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Chat.FileUpload`} props={{ uploadedFile: uploadedFile, setUploadedFile: setUploadedFile, resetFile: resetFile, }} /> )} </UploadContainer> </UploadPopupContainer> )} <IconEmoji className="bi bi-emoji-smile-fill" onClick={() => { updateShowUpload(false); updateShowEmojiPopup(!showEmojiPopup); }} /> <IconUpload className="bi bi-cloud-arrow-up-fill" onClick={() => { updateShowEmojiPopup(false); updateShowUpload(!showUpload); }} /> <IconShowMarkdown showMarkdown={showMarkdown} className="bi bi-eye-fill" onClick={updateShowMarkdown} /> <IconSend className="bi bi-send-fill" onClick={handleSendMessage} /> </Container> );