diff --git a/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx b/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx index 5021c8039..a28f7031e 100644 --- a/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx +++ b/src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx @@ -15,7 +15,7 @@ type Props = { } function Message({ message, showTimeStamp }: Props) { - const sanitizedHTML = markdownIt() + const sanitizedHTML = markdownIt({ break: true }) .use(markdownItClass, { img: ['rcw-message-img'] }) @@ -26,7 +26,7 @@ function Message({ message, showTimeStamp }: Props) { return (
-
+
{showTimeStamp && {format(message.timestamp, 'hh:mm')}}
); diff --git a/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss b/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss index c286b6289..7c4281e6e 100644 --- a/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss +++ b/src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss @@ -4,6 +4,7 @@ .rcw-message { margin: 10px; display: flex; + white-space: pre-wrap; word-wrap: break-word; } @@ -19,6 +20,9 @@ .rcw-message-text { @include message-bubble($turqois-2); + + white-space: pre-wrap; + word-wrap: break-word; } .rcw-timestamp { diff --git a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx b/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx deleted file mode 100644 index c1b2f8c05..000000000 --- a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { Picker } from 'emoji-mart'; - -import { AnyFunction } from '../../../../../../../../utils/types'; - -const emoji = require('../../../../../../../../../assets/icon-smiley.svg') as string; - -import './style.scss'; - -type Props = { - onSelectEmoji: AnyFunction -} - -function EmojiPicker({ onSelectEmoji } : Props) { - const [pickerStatus, setPickerState] = useState(false) - const togglePicker = () => { - setPickerState(prevPickerStatus => !prevPickerStatus) - } - - useEffect(() => { - function onKeyup(e) { - if (e.key === "Escape" && !pickerStatus) togglePicker() - } - window.addEventListener('keyup', onKeyup); - return () => window.removeEventListener('keyup', onKeyup); - }, []) - - - return ( - <> - {pickerStatus && ( - - )} - - - ) -} - -export default EmojiPicker; diff --git a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss b/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss deleted file mode 100644 index 57e16d81e..000000000 --- a/src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import 'variables/colors'; -@import "~emoji-mart/css/emoji-mart.css"; - -// .rcw-picker-container {} - -.rcw-picker-btn { // Create mixin - background: $grey-2; - border: 0; - cursor: pointer; - - .rcw-piker-icon { - height: 25px; - } -} - -.emoji-mart-preview { - display: none; -} diff --git a/src/components/Widget/components/Conversation/components/Sender/index.tsx b/src/components/Widget/components/Conversation/components/Sender/index.tsx index 8d2d19c75..4b66d667a 100644 --- a/src/components/Widget/components/Conversation/components/Sender/index.tsx +++ b/src/components/Widget/components/Conversation/components/Sender/index.tsx @@ -1,12 +1,12 @@ -import { useRef, useEffect, useState } from 'react'; +import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react'; import { useSelector } from 'react-redux'; -import EmojiPicker from './components/EmojiPicker' import cn from 'classnames'; import { GlobalState } from 'src/store/types'; import { getCaretIndex, isFirefox, updateCaret, insertNodeAtCaret, getSelection } from '../../../../../../utils/contentEditable' const send = require('../../../../../../../assets/send_button.svg') as string; +const emoji = require('../../../../../../../assets/icon-smiley.svg') as string; const brRegex = /
/g; import './style.scss'; @@ -17,18 +17,28 @@ type Props = { autofocus: boolean; sendMessage: (event: any) => void; buttonAlt: string; + onPressEmoji: () => void; + onChangeSize: (event: any) => void; onTextInputChange?: (event: any) => void; } -function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt }: Props) { +function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, onPressEmoji, onChangeSize }: Props, ref) { const showChat = useSelector((state: GlobalState) => state.behavior.showChat); const inputRef = useRef(null!); + const refContainer = useRef(null); const [enter, setEnter]= useState(false) const [firefox, setFirefox] = useState(false); + const [height, setHeight] = useState(0) // @ts-ignore useEffect(() => { if (showChat && autofocus) inputRef.current?.focus(); }, [showChat]); useEffect(() => { setFirefox(isFirefox())}, []) + useImperativeHandle(ref, () => { + return { + onSelectEmoji: handlerOnSelectEmoji, + }; + }); + const handlerOnChange = (event) => { onTextInputChange && onTextInputChange(event) } @@ -68,6 +78,16 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu } } + // TODO use a context for checkSize and toggle picker + const checkSize = () => { + const senderEl = refContainer.current + if(senderEl && height !== senderEl.clientHeight) { + const {clientHeight} = senderEl; + setHeight(clientHeight) + onChangeSize(clientHeight ? clientHeight -1 : 0) + } + } + const handlerOnKeyUp = (event) => { const el = inputRef.current; if(!el) return true; @@ -81,6 +101,7 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu el.innerHTML = el.innerHTML.replace(brRegex, '') } } + checkSize() } const handlerOnKeyDown= (event) => { @@ -98,9 +119,16 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu } } + const handlerPressEmoji = () => { + onPressEmoji(); + checkSize(); + } + return ( -
- +
+
void; +} + type Props = { title: string; subtitle: string; @@ -44,6 +50,23 @@ function Conversation({ sendButtonAlt, showTimeStamp }: Props) { + const [pickerOffset, setOffset] = useState(0) + const senderRef = useRef(null!); + const [pickerStatus, setPicket] = useState(false) + + const onSelectEmoji = (emoji) => { + senderRef.current?.onSelectEmoji(emoji) + } + + const togglePicker = () => { + setPicket(prevPickerStatus => !prevPickerStatus) + } + + const handlerSendMsn = (event) => { + sendMessage(event) + if(pickerStatus) setPicket(false) + } + return (
+ {pickerStatus && ()}
); diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss index a6b6fa82b..b895ca86b 100644 --- a/src/components/Widget/components/Conversation/style.scss +++ b/src/components/Widget/components/Conversation/style.scss @@ -1,6 +1,7 @@ @import 'common'; @import 'variables/colors'; @import 'animation'; +@import "~emoji-mart/css/emoji-mart.css"; .rcw-conversation-container { border-radius: 10px; @@ -21,6 +22,10 @@ } } +.emoji-mart-preview { + display: none; +} + .rcw-full-screen { .rcw-conversation-container { @include conversation-container-fs; diff --git a/src/scss/_common.scss b/src/scss/_common.scss index 92a1c0dad..279ee7afc 100644 --- a/src/scss/_common.scss +++ b/src/scss/_common.scss @@ -4,10 +4,6 @@ max-width: 215px; padding: 15px; text-align: left; - - > p { - white-space: pre-wrap; - } } // Full screen mixins