From b48d4180ec225eb6a4deeab405aab0369ea6449d Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Tue, 14 Jan 2025 20:19:57 +0530
Subject: [PATCH 1/2] Implement Message & Chat Input UI Enhancement for Edit
 Message Functionality

---
 packages/react/src/views/ChatInput/ChatInput.js | 17 ++++++++++++++---
 .../src/views/ChatInput/ChatInput.styles.js     | 16 +++++++++++++++-
 .../react/src/views/Message/Message.styles.js   | 12 +++++++++---
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index 33f40d7af..5f0fbe663 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -39,7 +39,8 @@ const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
   const { RCInstance, ECOptions } = useRCContext();
   const { theme } = useTheme();
-  const styles = getChatInputStyles(theme);
+  const { mode } = useTheme();
+  const styles = getChatInputStyles(theme, mode);
 
   const inputRef = useRef(null);
   const typingRef = useRef();
@@ -517,7 +518,13 @@ const ChatInput = ({ scrollToBottom }) => {
           (editMessage.msg || editMessage.attachments) && styles.editMessage,
         ]}
       >
-        <Box css={styles.inputBox}>
+        <Box
+          css={[
+            styles.inputBox,
+            (editMessage.msg || editMessage.attachments) &&
+              styles.messageEditing,
+          ]}
+        >
           <Input
             textArea
             rows={1}
@@ -529,7 +536,11 @@ const ChatInput = ({ scrollToBottom }) => {
                 ? 'This room is read only'
                 : 'Sign in to chat'
             }
-            css={styles.textInput}
+            css={[
+              styles.textInput,
+              (editMessage.msg || editMessage.attachments) &&
+                styles.messageEditing,
+            ]}
             onChange={onTextChange}
             onBlur={() => {
               sendTypingStop();
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 21e7a2473..086044315 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { darken, lighten } from '@embeddedchat/ui-elements';
 
-export const getChatInputStyles = (theme) => {
+export const getChatInputStyles = (theme, mode) => {
   const styles = {
     inputWithFormattingBox: css`
       border: 1px solid ${theme.colors.border};
@@ -14,6 +14,7 @@ export const getChatInputStyles = (theme) => {
 
     editMessage: css`
       border: 2px solid ${theme.colors.border};
+      // border: 2px solid red;
     `,
 
     inputBox: css`
@@ -58,10 +59,23 @@ export const getChatInputStyles = (theme) => {
         font-size: 18px;
       }
     `,
+
     quoteContainer: css`
       max-height: 300px;
       overflow: scroll;
     `,
+
+    messageEditing: css`
+      background-color: ${mode === 'light'
+        ? lighten(theme.colors.warning, 0.85)
+        : darken(theme.colors.warningForeground, 0.75)};
+
+      &:hover {
+        background-color: ${mode === 'light'
+          ? lighten(theme.colors.warning, 0.85)
+          : darken(theme.colors.warningForeground, 0.75)};
+      }
+    `,
   };
 
   return styles;
diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 8c380d241..1918c05fc 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
+import { lighten, darken } from '@embeddedchat/ui-elements';
 
-export const getMessageStyles = ({ theme }) => {
+export const getMessageStyles = ({ theme, mode }) => {
   const styles = {
     main: css`
       display: flex;
@@ -13,9 +14,14 @@ export const getMessageStyles = ({ theme }) => {
       color: ${theme.colors.foreground};
     `,
     messageEditing: css`
-      background-color: ${theme.colors.secondary};
+      background-color: ${mode === 'light'
+        ? lighten(theme.colors.warning, 0.85)
+        : darken(theme.colors.warningForeground, 0.75)};
+
       &:hover {
-        background-color: ${theme.colors.secondary};
+        background-color: ${mode === 'light'
+          ? lighten(theme.colors.warning, 0.85)
+          : darken(theme.colors.warningForeground, 0.75)};
       }
     `,
 

From 3b48f66c169589e7598d281d0a603ab1c983cb5a Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Wed, 15 Jan 2025 16:33:37 +0530
Subject: [PATCH 2/2] Updated ChatInput.styles.js

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

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 086044315..4b9b39a47 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -14,7 +14,6 @@ export const getChatInputStyles = (theme, mode) => {
 
     editMessage: css`
       border: 2px solid ${theme.colors.border};
-      // border: 2px solid red;
     `,
 
     inputBox: css`