[AC-1747] Apply UIKit classNames to user message text & suggested rep…

…lies (#131)

* Add classNames to message text & suggestedReplies
* Add styled-components.d.ts to override DefaultTheme

src/components/CurrentUserMessage.tsx

@@ -16,10 +16,6 @@ const Root = styled.div<{ enableEmojiFeedback: boolean }>`
     enableEmojiFeedback ? '20px' : '0'};
 `;
 
-const TextComponent = styled.div`
-  white-space: pre-line;
-`;
-
 type Props = {
   message: UserMessage;
 };
@@ -35,7 +31,7 @@ export default function CurrentUserMessage(props: Props) {
       </SentTime>
       <BodyContainer>
         <BodyComponent>
-          <TextComponent>{message.message}</TextComponent>
+          <div className="sendbird-word">{message.message}</div>
         </BodyComponent>
       </BodyContainer>
     </Root>

src/components/CustomMessageBody.tsx

@@ -32,7 +32,7 @@ export default function CustomMessageBody(props: Props) {
 
   return (
     <Root>
-      <Text>{sanitizedMessage}</Text>
+      <Text className="sendbird-word">{sanitizedMessage}</Text>
     </Root>
   );
 }

src/components/DynamicRepliesPanel.tsx

@@ -3,39 +3,28 @@ import styled from 'styled-components';
 
 import { useSendMessage } from '../hooks/useSendMessage';
 
-interface SuggestedReplyItemProps {
-  isActive: boolean;
-}
-export const ReplyItem = styled.div<SuggestedReplyItemProps>`
+export const ReplyItem = styled.div`
   white-space: nowrap;
   height: 32px;
   font-size: 12px;
   padding: 3px 14px;
   display: flex;
   align-items: center;
-  color: ${({ isActive, theme }: SuggestedReplyItemProps) =>
-    isActive ? theme.textColor.suggestedReply : '#EEEEEE'};
-  border: ${({ isActive, theme }: SuggestedReplyItemProps) =>
-    isActive
-      ? `1px solid ${theme.textColor.suggestedReply}`
-      : '1px solid #EEEEEE'};
-  border-radius: 18px;
-  background-color: ${({ theme }) => theme.bgColor.suggestedReply};
-  cursor: ${(props: SuggestedReplyItemProps) =>
-    props.isActive ? 'pointer' : 'not-allowed'};
-  &:hover {
-    ${({ isActive, theme }: SuggestedReplyItemProps) => {
-      if (isActive) {
-        return `background-color: ${theme.bgColor.hover.suggestedReply};`;
-      }
-    }};
-  }
-  &:active {
-    ${({ isActive, theme }: SuggestedReplyItemProps) => {
-      if (isActive) {
-        return `background-color: ${theme.textColor.suggestedReply}; color: ${theme.textColor.outgoingMessage};`;
-      }
-    }};
+  cursor: pointer;
+  && {
+    // To override the default color with the self service theme color
+    color: ${({ theme }) => theme.textColor.suggestedReply};
+    border: ${({ theme }) => `1px solid ${theme.textColor.suggestedReply}`};
+    border-radius: 18px;
+    background-color: ${({ theme }) => theme.bgColor.suggestedReply};
+    &:hover {
+      ${({ theme }) =>
+        `background-color: ${theme.bgColor.hover.suggestedReply}`};
+    }
+    &:active {
+      ${({ theme }) =>
+        `background-color: ${theme.textColor.suggestedReply}; color: ${theme.textColor.outgoingMessage};`};
+    }
   }
 `;
 
@@ -70,14 +59,14 @@ const DynamicRepliesPanel = (props: Props) => {
   };
 
   return quickReplies && quickReplies.length > 0 ? (
-    <Panel>
+    <Panel className="sendbird-suggested-replies">
       {replyOptions.map((option: string) => {
         return (
           <ReplyItem
+            className="sendbird-suggested-replies__option"
             id={option}
             key={option}
             onClick={(e) => onClickReply(e, option)}
-            isActive={true}
           >
             {option}
           </ReplyItem>

src/components/StaticRepliesPanel.tsx

@@ -106,12 +106,7 @@ const StaticRepliesPanel = (props: Props) => {
       <Panel>
         {suggestedReplies.map((suggestedReply: SuggestedReply, i: number) => {
           return (
-            <ReplyItem
-              id={i + ''}
-              key={i}
-              onClick={onClickSuggestedReply}
-              isActive={true}
-            >
+            <ReplyItem id={i + ''} key={i} onClick={onClickSuggestedReply}>
               {suggestedReply.title}
             </ReplyItem>
           );

src/styled-components.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { type CommonTheme } from './theme';
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends CommonTheme {}
+}

src/theme.ts

@@ -1,5 +1,5 @@
 import { getColorBasedOnSaturation, generateColorVariants } from './colors';
-interface CommonTheme {
+export interface CommonTheme {
   bgColor: {
     chatBottom: string;
     messageInput: string;

tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "src",
     "./src/custom.d.ts",
-    "node_modules/@sendbird/uikit-react/index.d.ts",
+    "./src/styled-components.d.ts",
   ],
   "exclude": ["node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]