feat: Enhance add link modal and disabling message items while typing

packages/markups/src/elements/Emoji.js

@@ -14,14 +14,26 @@ const Emoji = ({ big = false, emoji }) => {
     [emoji]
   );
 
-  const emojiHtml = big
-    ? emojione.toImage(fallback).replace('joypixels', 'joypixels_BigEmoji')
-    : emojione.toImage(fallback);
+  let emojiHtml;
+
+  if (!emoji.unicode) {
+    emojiHtml = big
+      ? emojione.toImage(fallback).replace('joypixels', 'joypixels_BigEmoji')
+      : emojione.toImage(fallback);
+  }
+
+  if ('unicode' in emoji) {
+    emojiHtml = emoji.unicode;
+  }
 
   return (
     <Box
       is="span"
-      css={[styles.emojione, styles.emojiInMessage]}
+      css={[
+        styles.emojione,
+        styles.emojiInMessage,
+        big && { fontSize: '2.25rem', lineHeight: '2.25rem' },
+      ]}
       dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(emojiHtml) }}
     />
   );

packages/markups/src/elements/elements.styles.js

@@ -59,15 +59,13 @@ export const EmojiStyles = {
     img.joypixels {
       height: 1.5rem;
       width: 1.5rem;
-      image-rendering: pixelated;
       font-size: inherit;
       vertical-align: middle;
     }
 
     img.joypixels_BigEmoji {
       height: 2.25rem;
       width: 2.25rem;
-      image-rendering: pixelated;
       font-size: inherit;
     }
   `,

packages/react/src/views/ChatInput/ChatInput.styles.js

@@ -151,9 +151,11 @@ export const getInsertLinkModalStyles = (theme) => {
     inputWithFormattingBox: css`
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
-      margin: 0.5rem 1rem;
-      &.focused {
-        border: ${`1.5px solid ${theme.colors.ring}`};
+      margin: 0rem 1rem 0.5rem 1rem;
+      transition: border 0.3s ease;
+
+      &:focus {
+        border: 1.5px solid ${theme.colors.ring};
       }
     `,
     modalHeader: css`

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -60,10 +60,14 @@ const ChatInputFormattingToolbar = ({
   };
   const handleEmojiClick = (emojiEvent) => {
     const [emoji] = emojiEvent.names;
-    const message = `${messageRef.current.value} :${emoji.replace(
+    const start = messageRef.current.selectionStart;
+    const end = messageRef.current.selectionEnd;
+    const msg = messageRef.current.value;
+    const message = `${msg.slice(0, start)}:${emoji.replace(
       /[\s-]+/g,
       '_'
-    )}: `;
+    )}: ${msg.slice(end)}`;
+
     triggerButton?.(null, message);
   };
 
@@ -83,6 +87,7 @@ const ChatInputFormattingToolbar = ({
     setInsertLinkOpen(false);
   };
 
+  const isTyping = messageRef.current?.value.length > 0;
   const chatToolMap = {
     emoji:
       isPopoverOpen && popOverItems.includes('emoji') ? (
@@ -119,7 +124,7 @@ const ChatInputFormattingToolbar = ({
         displayName={
           isPopoverOpen && popOverItems.includes('audio') ? 'audio' : null
         }
-        disabled={isRecordingMessage}
+        disabled={isRecordingMessage || isTyping}
         popOverItemStyles={styles.popOverItemStyles}
       />
     ),
@@ -129,17 +134,17 @@ const ChatInputFormattingToolbar = ({
           isPopoverOpen && popOverItems.includes('video') ? 'video' : null
         }
         popOverItemStyles={styles.popOverItemStyles}
-        disabled={isRecordingMessage}
+        disabled={isRecordingMessage || isTyping}
       />
     ),
     file:
       isPopoverOpen && popOverItems.includes('file') ? (
         <Box
           key="file"
           css={styles.popOverItemStyles}
-          disabled={isRecordingMessage}
+          disabled={isRecordingMessage || isTyping}
           onClick={() => {
-            if (isRecordingMessage) return;
+            if (isRecordingMessage || isTyping) return;
             handleClickToOpenFiles();
           }}
         >
@@ -151,7 +156,7 @@ const ChatInputFormattingToolbar = ({
           <ActionButton
             square
             ghost
-            disabled={isRecordingMessage}
+            disabled={isRecordingMessage || isTyping}
             onClick={() => {
               if (isRecordingMessage) return;
               handleClickToOpenFiles();
@@ -343,8 +348,8 @@ const ChatInputFormattingToolbar = ({
           onClose={() => setEmojiOpen(false)}
           positionStyles={css`
             position: absolute;
-            bottom: 7rem;
-            left: 0.7rem;
+            bottom: 8.5rem;
+            left: 2rem;
           `}
         />
       )}

packages/react/src/views/ChatInput/InsertLinkToolBox.js

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { Modal, Input, Button, useTheme } from '@embeddedchat/ui-elements';
+import {
+  Modal,
+  Input,
+  Button,
+  useTheme,
+  Icon,
+  Box,
+} from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 import { getInsertLinkModalStyles } from './ChatInput.styles';
 
 const InsertLinkToolBox = ({
@@ -9,7 +17,7 @@ const InsertLinkToolBox = ({
 }) => {
   const { theme } = useTheme();
   const styles = getInsertLinkModalStyles(theme);
-  const [linkText, setLinkText] = useState(selectedText || 'Text');
+  const [linkText, setLinkText] = useState(selectedText);
   const [linkUrl, setLinkUrl] = useState(null);
 
   const handleLinkTextOnChange = (e) => {
@@ -18,26 +26,86 @@ const InsertLinkToolBox = ({
   const handleLinkUrlOnChange = (e) => {
     setLinkUrl(e.target.value);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      handleAddLink(linkText, linkUrl);
+    }
+  };
 
   return (
-    <Modal>
-      <Modal.Header css={styles.modalHeader}>
-        <Modal.Title>Add link</Modal.Title>
+    <Modal onClose={onClose}>
+      <Modal.Header
+        style={{
+          marginTop: '0.7rem',
+          marginLeft: '0.5rem',
+        }}
+      >
+        <Icon
+          name="link"
+          size="1.5rem"
+          css={css`
+            margin-right: 0.25rem;
+            margin-top: 0.5rem;
+          `}
+        />{' '}
+        <Modal.Title>Add Link</Modal.Title>
         <Modal.Close onClick={onClose} />
       </Modal.Header>
-      <Modal.Content css={styles.modalContent}>
-        <Input
-          type="text"
-          onChange={handleLinkTextOnChange}
-          value={linkText}
-          css={styles.inputWithFormattingBox}
-        />
-        <Input
-          type="text"
-          onChange={handleLinkUrlOnChange}
-          placeholder="URL"
-          css={styles.inputWithFormattingBox}
-        />
+      <Modal.Content>
+        <Box css={styles.modalContent}>
+          <Box
+            is="span"
+            css={css`
+              font-weight: 550;
+              margin-left: 1rem;
+              font-size: 0.8rem;
+              margin-top: 0.5rem;
+            `}
+          >
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label
+              htmlFor="link-text"
+              css={css`
+                display: block;
+              `}
+            >
+              Text
+            </label>
+          </Box>
+          <Input
+            id="link-text"
+            type="text"
+            onChange={handleLinkTextOnChange}
+            onKeyDown={handleKeyDown}
+            css={styles.inputWithFormattingBox}
+          />
+          <Box
+            is="span"
+            css={css`
+              font-weight: 550;
+              margin-left: 1rem;
+              font-size: 0.8rem;
+              margin-top: 0.3rem;
+            `}
+          >
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label
+              htmlFor="link-url"
+              css={css`
+                display: block;
+              `}
+            >
+              URL
+            </label>
+          </Box>
+          <Input
+            id="link-url"
+            type="text"
+            onChange={handleLinkUrlOnChange}
+            onKeyDown={handleKeyDown}
+            css={styles.inputWithFormattingBox}
+          />
+        </Box>
       </Modal.Content>
       <Modal.Footer css={styles.modalFooter}>
         <Button type="secondary" onClick={onClose}>

packages/react/src/views/Message/Message.js

@@ -160,7 +160,7 @@ const Message = ({
       await navigator.clipboard.writeText(textToCopy);
       dispatchToastMessage({
         type: 'success',
-        message: 'Message copied successfully',
+        message: 'Copied',
       });
     } catch (error) {
       dispatchToastMessage({
@@ -182,7 +182,7 @@ const Message = ({
       await navigator.clipboard.writeText(messageLink);
       dispatchToastMessage({
         type: 'success',
-        message: 'Message link copied successfully',
+        message: 'Copied',
       });
     } catch (err) {
       dispatchToastMessage({