From 3d6ac856ec057127e7cdf920d83ec487c574ac06 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 6 Jan 2025 01:12:30 +0530
Subject: [PATCH 01/16] enhance Add Link modal

---
 .../src/views/ChatInput/ChatInput.styles.js   |  2 +-
 .../src/views/ChatInput/InsertLinkToolBox.js  | 71 ++++++++++++++-----
 .../src/views/SurfaceMenu/SurfaceItem.js      |  2 +-
 3 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 7aa85e40f1..9dcbd6ac24 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -122,7 +122,7 @@ export const getInsertLinkModalStyles = (theme) => {
     inputWithFormattingBox: css`
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
-      margin: 0.5rem 1rem;
+      margin: 0rem 1rem 0.5rem 1rem;
       &.focused {
         border: ${`1.5px solid ${theme.colors.ring}`};
       }
diff --git a/packages/react/src/views/ChatInput/InsertLinkToolBox.js b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
index 49e8e0d4ad..8fa8640835 100644
--- a/packages/react/src/views/ChatInput/InsertLinkToolBox.js
+++ b/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) => {
@@ -21,23 +29,52 @@ const InsertLinkToolBox = ({
 
   return (
     <Modal>
-      <Modal.Header css={styles.modalHeader}>
-        <Modal.Title>Add link</Modal.Title>
+      <Modal.Header>
+        <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;
+            `}
+          >
+            Link Text
+          </Box>
+          <Input
+            type="text"
+            onChange={handleLinkTextOnChange}
+            value={linkText}
+            placeholder="Text"
+            css={styles.inputWithFormattingBox}
+          />
+          <Box
+            is="span"
+            css={css`
+              font-weight: 550;
+              margin-left: 1rem;
+            `}
+          >
+            Link URL
+          </Box>
+          <Input
+            type="text"
+            onChange={handleLinkUrlOnChange}
+            placeholder="URL"
+            css={styles.inputWithFormattingBox}
+          />
+        </Box>
       </Modal.Content>
       <Modal.Footer css={styles.modalFooter}>
         <Button type="secondary" onClick={onClose}>
diff --git a/packages/react/src/views/SurfaceMenu/SurfaceItem.js b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
index 9674ead1cf..f9f061b8b8 100644
--- a/packages/react/src/views/SurfaceMenu/SurfaceItem.js
+++ b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip, ActionButton } from '@embeddedchat/ui-elements';
 
 const SurfaceItem = ({ item, size }) => (
-  <Tooltip text={item.label} position="bottom" key={item.id}>
+  <Tooltip text={item.label} position="top" key={item.id}>
     <ActionButton
       square
       ghost

From ea3e7dc72dcfe9aa56f8b6875397ba87586cf146 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 6 Jan 2025 01:33:29 +0530
Subject: [PATCH 02/16] also disables audio/video/file on typing

---
 .../react/src/views/ChatInput/AudioMessageRecorder.js  | 10 ++++++++--
 .../src/views/ChatInput/ChatInputFormattingToolbar.js  |  8 +++++---
 .../react/src/views/ChatInput/VideoMessageRecoder.js   | 10 ++++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
index 1d3af014fc..410de15794 100644
--- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js
+++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -5,7 +5,8 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const AudioMessageRecorder = () => {
+const AudioMessageRecorder = (props) => {
+  const { disable } = props;
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -130,7 +131,12 @@ const AudioMessageRecorder = () => {
 
   if (state === 'idle') {
     return (
-      <ActionButton ghost square onClick={handleRecordButtonClick}>
+      <ActionButton
+        ghost
+        square
+        onClick={handleRecordButtonClick}
+        disabled={disable}
+      >
         <Icon size="1.25rem" name="mic" />
       </ActionButton>
     );
diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 851034833d..fcb623bb50 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -72,6 +72,8 @@ const ChatInputFormattingToolbar = ({
     setInsertLinkOpen(false);
   };
 
+  const isTyping = messageRef.current?.value.length > 0;
+  console.log(isTyping);
   const chatToolMap = {
     emoji: (
       <Tooltip text="Emoji" position="top" key="emoji-btn">
@@ -89,12 +91,12 @@ const ChatInputFormattingToolbar = ({
     ),
     audio: (
       <Tooltip text="Audio Message" position="top" key="audio">
-        <AudioMessageRecorder />
+        <AudioMessageRecorder disable={isTyping} />
       </Tooltip>
     ),
     video: (
       <Tooltip text="Video Message" position="top" key="video">
-        <VideoMessageRecorder />
+        <VideoMessageRecorder disable={isTyping} />
       </Tooltip>
     ),
     file: (
@@ -102,7 +104,7 @@ const ChatInputFormattingToolbar = ({
         <ActionButton
           square
           ghost
-          disabled={isRecordingMessage}
+          disabled={isRecordingMessage || isTyping}
           onClick={handleClickToOpenFiles}
         >
           <Icon name="attachment" size="1.25rem" />
diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
index 2fbe2bb149..7e5b586e0d 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -12,7 +12,8 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const VideoMessageRecorder = () => {
+const VideoMessageRecorder = (props) => {
+  const { disable } = props;
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -145,7 +146,12 @@ const VideoMessageRecorder = () => {
   return (
     <>
       {state === 'idle' && (
-        <ActionButton ghost square onClick={handleRecordButtonClick}>
+        <ActionButton
+          ghost
+          square
+          onClick={handleRecordButtonClick}
+          disabled={disable}
+        >
           <Icon size="1.25rem" name="video-recorder" />
         </ActionButton>
       )}

From f564ab1c7d7ac72024b09612a31d66ded6e7ae19 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 6 Jan 2025 01:51:19 +0530
Subject: [PATCH 03/16] fix

---
 packages/react/src/views/ChatInput/InsertLinkToolBox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/ChatInput/InsertLinkToolBox.js b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
index 8fa8640835..60e82b8719 100644
--- a/packages/react/src/views/ChatInput/InsertLinkToolBox.js
+++ b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
@@ -17,7 +17,7 @@ const InsertLinkToolBox = ({
 }) => {
   const { theme } = useTheme();
   const styles = getInsertLinkModalStyles(theme);
-  const [linkText, setLinkText] = useState(selectedText);
+  const [linkText, setLinkText] = useState(selectedText || 'Text');
   const [linkUrl, setLinkUrl] = useState(null);
 
   const handleLinkTextOnChange = (e) => {

From d4a11cc061aa909d9a5ba2f0220df219818c34d1 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 6 Jan 2025 02:15:57 +0530
Subject: [PATCH 04/16] conflicts

---
 .../react/src/views/ChatInput/AudioMessageRecorder.js    | 5 ++---
 .../src/views/ChatInput/ChatInputFormattingToolbar.js    | 9 ++++++---
 .../react/src/views/ChatInput/VideoMessageRecoder.js     | 5 ++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
index 410de15794..ce92a18c77 100644
--- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js
+++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -5,8 +5,7 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const AudioMessageRecorder = (props) => {
-  const { disable } = props;
+const AudioMessageRecorder = ({ disabled }) => {
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -134,8 +133,8 @@ const AudioMessageRecorder = (props) => {
       <ActionButton
         ghost
         square
+        disabled={disabled}
         onClick={handleRecordButtonClick}
-        disabled={disable}
       >
         <Icon size="1.25rem" name="mic" />
       </ActionButton>
diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index fcb623bb50..82a07acc36 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -91,12 +91,12 @@ const ChatInputFormattingToolbar = ({
     ),
     audio: (
       <Tooltip text="Audio Message" position="top" key="audio">
-        <AudioMessageRecorder disable={isTyping} />
+        <AudioMessageRecorder disabled={isRecordingMessage || isTyping} />
       </Tooltip>
     ),
     video: (
       <Tooltip text="Video Message" position="top" key="video">
-        <VideoMessageRecorder disable={isTyping} />
+        <VideoMessageRecorder disabled={isRecordingMessage || isTyping} />
       </Tooltip>
     ),
     file: (
@@ -105,7 +105,10 @@ const ChatInputFormattingToolbar = ({
           square
           ghost
           disabled={isRecordingMessage || isTyping}
-          onClick={handleClickToOpenFiles}
+          onClick={() => {
+            if (isRecordingMessage || isTyping) return;
+            handleClickToOpenFiles();
+          }}
         >
           <Icon name="attachment" size="1.25rem" />
         </ActionButton>
diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
index 7e5b586e0d..5716cd3890 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -12,8 +12,7 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const VideoMessageRecorder = (props) => {
-  const { disable } = props;
+const VideoMessageRecorder = ({ disabled }) => {
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -149,8 +148,8 @@ const VideoMessageRecorder = (props) => {
         <ActionButton
           ghost
           square
+          disabled={disabled}
           onClick={handleRecordButtonClick}
-          disabled={disable}
         >
           <Icon size="1.25rem" name="video-recorder" />
         </ActionButton>

From 464182adeea781f6191a0094fc255f7f24c1b03f Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Sat, 11 Jan 2025 22:25:02 +0530
Subject: [PATCH 05/16] fix

---
 packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 82a07acc36..9f74fdbb17 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -73,7 +73,6 @@ const ChatInputFormattingToolbar = ({
   };
 
   const isTyping = messageRef.current?.value.length > 0;
-  console.log(isTyping);
   const chatToolMap = {
     emoji: (
       <Tooltip text="Emoji" position="top" key="emoji-btn">

From 687b2e996082bf6dfb96d24d917aaba2421b7f4e Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 14 Jan 2025 01:05:18 +0530
Subject: [PATCH 06/16] remove_placeholder

---
 .../src/views/ChatInput/ChatInput.styles.js    |  6 ++++--
 .../src/views/ChatInput/InsertLinkToolBox.js   | 18 ++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 9dcbd6ac24..389f234ddf 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -123,8 +123,10 @@ export const getInsertLinkModalStyles = (theme) => {
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
       margin: 0rem 1rem 0.5rem 1rem;
-      &.focused {
-        border: ${`1.5px solid ${theme.colors.ring}`};
+      transition: border 0.3s ease;
+
+      &:focus {
+        border: 1.5px solid ${theme.colors.ring};
       }
     `,
     modalHeader: css`
diff --git a/packages/react/src/views/ChatInput/InsertLinkToolBox.js b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
index 60e82b8719..f317dc59f8 100644
--- a/packages/react/src/views/ChatInput/InsertLinkToolBox.js
+++ b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
@@ -17,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) => {
@@ -26,6 +26,11 @@ const InsertLinkToolBox = ({
   const handleLinkUrlOnChange = (e) => {
     setLinkUrl(e.target.value);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      handleAddLink(linkText, linkUrl);
+    }
+  };
 
   return (
     <Modal>
@@ -48,15 +53,15 @@ const InsertLinkToolBox = ({
             css={css`
               font-weight: 550;
               margin-left: 1rem;
+              font-size: 0.8rem;
             `}
           >
-            Link Text
+            Text
           </Box>
           <Input
             type="text"
             onChange={handleLinkTextOnChange}
-            value={linkText}
-            placeholder="Text"
+            onKeyDown={handleKeyDown}
             css={styles.inputWithFormattingBox}
           />
           <Box
@@ -64,14 +69,15 @@ const InsertLinkToolBox = ({
             css={css`
               font-weight: 550;
               margin-left: 1rem;
+              font-size: 0.8rem;
             `}
           >
-            Link URL
+            URL
           </Box>
           <Input
             type="text"
             onChange={handleLinkUrlOnChange}
-            placeholder="URL"
+            onKeyDown={handleKeyDown}
             css={styles.inputWithFormattingBox}
           />
         </Box>

From 9a4dd159382064180111943b8ccec383263c9f7e Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Thu, 16 Jan 2025 23:06:40 +0530
Subject: [PATCH 07/16] add label

---
 .../src/views/ChatInput/InsertLinkToolBox.js  | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/views/ChatInput/InsertLinkToolBox.js b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
index f317dc59f8..172ec20b29 100644
--- a/packages/react/src/views/ChatInput/InsertLinkToolBox.js
+++ b/packages/react/src/views/ChatInput/InsertLinkToolBox.js
@@ -33,8 +33,13 @@ const InsertLinkToolBox = ({
   };
 
   return (
-    <Modal>
-      <Modal.Header>
+    <Modal onClose={onClose}>
+      <Modal.Header
+        style={{
+          marginTop: '0.7rem',
+          marginLeft: '0.5rem',
+        }}
+      >
         <Icon
           name="link"
           size="1.5rem"
@@ -54,11 +59,21 @@ const InsertLinkToolBox = ({
               font-weight: 550;
               margin-left: 1rem;
               font-size: 0.8rem;
+              margin-top: 0.5rem;
             `}
           >
-            Text
+            {/* 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}
@@ -70,11 +85,21 @@ const InsertLinkToolBox = ({
               font-weight: 550;
               margin-left: 1rem;
               font-size: 0.8rem;
+              margin-top: 0.3rem;
             `}
           >
-            URL
+            {/* 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}

From 79ef8bbe147949039ffdfd0250a610023bb2746e Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 28 Jan 2025 00:21:47 +0530
Subject: [PATCH 08/16] format

---
 .../src/views/ChatInput/ChatInputFormattingToolbar.js  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index bc97ecfdea..a16fb22917 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -91,12 +91,18 @@ const ChatInputFormattingToolbar = ({
     ),
     audio: (
       <Tooltip text="Audio Message" position="top" key="audio">
-        <AudioMessageRecorder disabled={isRecordingMessage || isTyping} key="audio" />
+        <AudioMessageRecorder
+          disabled={isRecordingMessage || isTyping}
+          key="audio"
+        />
       </Tooltip>
     ),
     video: (
       <Tooltip text="Video Message" position="top" key="video">
-        <VideoMessageRecorder disabled={isRecordingMessage || isTyping} key="video" />
+        <VideoMessageRecorder
+          disabled={isRecordingMessage || isTyping}
+          key="video"
+        />
       </Tooltip>
     ),
     file: (

From 217b89a30de756ade291b004e94623559b4eb419 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 31 Jan 2025 17:25:42 +0530
Subject: [PATCH 09/16] merge conflicts

---
 .../react/src/views/ChatInput/ChatInputFormattingToolbar.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 83dddb780d..f3f408ca38 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -152,7 +152,7 @@ const ChatInputFormattingToolbar = ({
           <ActionButton
             square
             ghost
-            disabled={isRecordingMessage}
+            disabled={isRecordingMessage || isTyping}
             onClick={() => {
               if (isRecordingMessage) return;
               handleClickToOpenFiles();

From 407d8b662eea491bf0dc8af78a87e71bee1fa744 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 4 Feb 2025 23:16:42 +0530
Subject: [PATCH 10/16] fix

---
 packages/react/src/views/SurfaceMenu/SurfaceItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/SurfaceMenu/SurfaceItem.js b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
index f9f061b8b8..9674ead1cf 100644
--- a/packages/react/src/views/SurfaceMenu/SurfaceItem.js
+++ b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip, ActionButton } from '@embeddedchat/ui-elements';
 
 const SurfaceItem = ({ item, size }) => (
-  <Tooltip text={item.label} position="top" key={item.id}>
+  <Tooltip text={item.label} position="bottom" key={item.id}>
     <ActionButton
       square
       ghost

From 22f44572cbf572f2234e279dc0963f50ff63c65b Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Thu, 6 Feb 2025 22:21:29 +0530
Subject: [PATCH 11/16] fix

---
 packages/react/src/views/Message/Message.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index dd8cf8d09d..469bb519d5 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -148,7 +148,7 @@ const Message = ({
       await navigator.clipboard.writeText(textToCopy);
       dispatchToastMessage({
         type: 'success',
-        message: 'Message copied successfully',
+        message: 'Copied',
       });
     } catch (error) {
       dispatchToastMessage({
@@ -170,7 +170,7 @@ const Message = ({
       await navigator.clipboard.writeText(messageLink);
       dispatchToastMessage({
         type: 'success',
-        message: 'Message link copied successfully',
+        message: 'Copied',
       });
     } catch (err) {
       dispatchToastMessage({

From a0613a5f5fdab82ca1bfc1a0e7cee42593de0e0c Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 7 Feb 2025 15:55:54 +0530
Subject: [PATCH 12/16] remove bluryness of emojis

---
 packages/markups/src/elements/Emoji.js        | 20 +++++++++++++++----
 .../markups/src/elements/elements.styles.js   |  2 --
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/markups/src/elements/Emoji.js b/packages/markups/src/elements/Emoji.js
index af1b134013..344696b9a2 100644
--- a/packages/markups/src/elements/Emoji.js
+++ b/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) }}
     />
   );
diff --git a/packages/markups/src/elements/elements.styles.js b/packages/markups/src/elements/elements.styles.js
index 31497a6517..8e351b368c 100644
--- a/packages/markups/src/elements/elements.styles.js
+++ b/packages/markups/src/elements/elements.styles.js
@@ -59,7 +59,6 @@ export const EmojiStyles = {
     img.joypixels {
       height: 1.5rem;
       width: 1.5rem;
-      image-rendering: pixelated;
       font-size: inherit;
       vertical-align: middle;
     }
@@ -67,7 +66,6 @@ export const EmojiStyles = {
     img.joypixels_BigEmoji {
       height: 2.25rem;
       width: 2.25rem;
-      image-rendering: pixelated;
       font-size: inherit;
     }
   `,

From acd0bf110e1cb6e72178c1fdbf6feb381175aeed Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 7 Feb 2025 16:09:45 +0530
Subject: [PATCH 13/16] handle emoji adding

---
 .../views/ChatInput/ChatInputFormattingToolbar.js  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index f3f408ca38..2958c4245e 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -60,10 +60,12 @@ const ChatInputFormattingToolbar = ({
   };
   const handleEmojiClick = (emojiEvent) => {
     const [emoji] = emojiEvent.names;
-    const message = `${messageRef.current.value} :${emoji.replace(
-      /[\s-]+/g,
-      '_'
-    )}: `;
+    const start = messageRef.current.selectionStart;
+    const end = messageRef.current.selectionEnd;
+    const msg = messageRef.current.value;
+    const emojiText = `:${emoji.replace(/[\s-]+/g, '_')}: `;
+    const message = msg.slice(0, start) + emojiText + msg.slice(end);
+
     triggerButton?.(null, message);
   };
 
@@ -344,8 +346,8 @@ const ChatInputFormattingToolbar = ({
           onClose={() => setEmojiOpen(false)}
           positionStyles={css`
             position: absolute;
-            bottom: 7rem;
-            left: 0.7rem;
+            bottom: 8.5rem;
+            left: 2rem;
           `}
         />
       )}

From 70393cbdc996e83f03e5ab7153a13736bf0615e7 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 7 Feb 2025 16:13:14 +0530
Subject: [PATCH 14/16] fix

---
 .../react/src/views/ChatInput/ChatInputFormattingToolbar.js  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 2958c4245e..bd1b45cb76 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -63,8 +63,9 @@ const ChatInputFormattingToolbar = ({
     const start = messageRef.current.selectionStart;
     const end = messageRef.current.selectionEnd;
     const msg = messageRef.current.value;
-    const emojiText = `:${emoji.replace(/[\s-]+/g, '_')}: `;
-    const message = msg.slice(0, start) + emojiText + msg.slice(end);
+    const message = `${msg.slice(0, start)}:${emoji.replace(/[\s-]+/g, '_')}: 
+    `;
+    +msg.slice(end);
 
     triggerButton?.(null, message);
   };

From fe0fcf07a82bc6eea5b6c77399dbdba4db69a980 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Sat, 8 Feb 2025 09:24:37 +0530
Subject: [PATCH 15/16] message.end

---
 .../src/views/ChatInput/ChatInputFormattingToolbar.js      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index bd1b45cb76..472af572d5 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -63,9 +63,10 @@ const ChatInputFormattingToolbar = ({
     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);
+    const message = `${msg.slice(0, start)}:${emoji.replace(
+      /[\s-]+/g,
+      '_'
+    )}: ${msg.slice(end)}`;
 
     triggerButton?.(null, message);
   };

From c26d9d14e912987916e7ece1dadc2fee88ddb0dc Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Sat, 24 May 2025 18:10:50 +0530
Subject: [PATCH 16/16] format

---
 packages/react/src/views/AttachmentPreview/AttachmentPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index bf20be3f12..b9a182a891 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -127,7 +127,7 @@ const AttachmentPreview = () => {
                 `}
               >
                 File name
-              </Box> 
+              </Box>
               <Input
                 onChange={(e) => {
                   handleFileName(e);