fix: picker position

Author: CrisVega08

.gitignore

@@ -11,3 +11,6 @@ yarn-error.log
 
 # Test files
 coverage
+
+# vscode
+.vscode

.vscode/launch.json

@@ -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 (
     <div className={`rcw-${message.sender}`}>
-      <div className="rcw-message-text" dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+      <div className="rcw-message-text" dangerouslySetInnerHTML={{ __html: sanitizedHTML.replace(/\n$/,'') }} />
       {showTimeStamp && <span className="rcw-timestamp">{format(message.timestamp, 'hh:mm')}</span>}
     </div>
   );

src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx

@@ -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 {

src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss

@@ -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 = /<br>/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<HTMLDivElement>(null!);
+  const refContainer = useRef<HTMLDivElement>(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,14 +101,15 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
         el.innerHTML = el.innerHTML.replace(brRegex, '')
       }
     }
+    checkSize()
   }
 
   const handlerOnKeyDown= (event) => {
     const el = inputRef.current;
 
     if( event.key === 'Backspace' && el){
       const caretPosition = getCaretIndex(inputRef.current)
-      const character = el?.innerHTML.charAt(caretPosition - 1)
+      const character = el.innerHTML.charAt(caretPosition - 1)
       if(character === "\n") {
         event.preventDefault();
         event.stopPropagation()
@@ -98,9 +119,16 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
     }
   }
 
+  const handlerPressEmoji = () => {
+    onPressEmoji();
+    checkSize();
+  }
+
   return (
-    <div className="rcw-sender">
-      <EmojiPicker onSelectEmoji={handlerOnSelectEmoji}/>
+    <div ref={refContainer} className="rcw-sender">
+      <button className='rcw-picker-btn' type="submit" onClick={handlerPressEmoji}>
+        <img src={emoji} className="rcw-picker-icon" alt="" />
+      </button>
       <div className={cn('rcw-new-message', {
           'rcw-message-disable': disabledInput,
         })
@@ -126,4 +154,4 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
   );
 }
 
-export default Sender;
+export default forwardRef(Sender);

src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/index.tsx

@@ -10,6 +10,7 @@
   min-height: 45px;
   overflow: hidden;
   padding: 10px;
+  position: relative;
 
   &.expand {
     height: 55px;
@@ -37,7 +38,7 @@
   display: block;
   height: 100%;
   line-height: 20px;
-  max-height: 75px;
+  max-height: 78px;
   overflow-y: auto;
   user-select: text;
   white-space: pre-wrap;
@@ -53,9 +54,10 @@
   }
 }
 
-.rcw-send {
+.rcw-send, .rcw-picker-btn {
   background: $grey-2;
   border: 0;
+  cursor: pointer;
 
   .rcw-send-icon {
     height: 25px;

src/components/Widget/components/Conversation/components/Sender/components/EmojiPicker/style.scss

@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+import { Picker } from 'emoji-mart';
 import cn from 'classnames';
 
 import Header from './components/Header';
@@ -9,6 +11,10 @@ import { AnyFunction } from '../../../../utils/types';
 
 import './style.scss';
 
+interface ISenderRef {
+  onSelectEmoji: (event: any) => void;
+}
+
 type Props = {
   title: string;
   subtitle: string;
@@ -44,6 +50,23 @@ function Conversation({
   sendButtonAlt,
   showTimeStamp
 }: Props) {
+  const [pickerOffset, setOffset] = useState(0)
+  const senderRef = useRef<ISenderRef>(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 (
     <div className={cn('rcw-conversation-container', className)} aria-live="polite">
       <Header
@@ -55,13 +78,20 @@ function Conversation({
       />
       <Messages profileAvatar={profileAvatar} showTimeStamp={showTimeStamp} />
       <QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
+      {pickerStatus && (<Picker 
+        style={{ position: 'absolute', bottom: pickerOffset, left: '0', width: '100%' }}
+        onSelect={onSelectEmoji}
+      />)}
       <Sender
-        sendMessage={sendMessage}
+        ref={senderRef}
+        sendMessage={handlerSendMsn}
         placeholder={senderPlaceHolder}
         disabledInput={disabledInput}
         autofocus={autofocus}
         onTextInputChange={onTextInputChange}
         buttonAlt={sendButtonAlt}
+        onPressEmoji={togglePicker}
+        onChangeSize={setOffset}
       />
     </div>
   );

src/components/Widget/components/Conversation/components/Sender/index.tsx

@@ -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;