Apply light / dark theme to custom components

src/components/BotMessageBottom.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as InfoIcon } from '../icons/info-icon.svg';
 import 'react-popper-tooltip/dist/styles.css';
 
 const Text = styled.div`
-  color: rgba(0, 0, 0, 0.5);
+  color: ${({ theme }) => theme.textColor.incomingMessage};
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
@@ -42,6 +42,12 @@ const InfoIconButton = styled.div`
   align-items: center;
   width: 18px;
   cursor: pointer;
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.textColor.incomingMessage};
+    }
+  }
 `;
 
 const InfoBox = styled.div`
@@ -52,7 +58,7 @@ const InfoBox = styled.div`
   width: 100%;
   background: rgb(0, 0, 0, 0.8);
   border-radius: 8px;
-  color: white;
+  color: ${({ theme }) => theme.textColor.sourceInfo};
   margin-top: 8px;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;

src/components/BotMessageWithBodyInput.tsx

@@ -1,6 +1,10 @@
 import { User } from '@sendbird/chat';
 import { UserMessage } from '@sendbird/chat/message';
 import Avatar from '@sendbird/uikit-react/ui/Avatar';
+import Label, {
+  LabelTypography,
+  LabelColors,
+} from '@sendbird/uikit-react/ui/Label';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
@@ -18,15 +22,9 @@ const Root = styled.div`
   position: relative;
 `;
 
-const Sender = styled.div`
-  font-style: normal;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 12px;
-  color: rgba(0, 0, 0, 0.5);
-  transition: color 0.5s;
-  transition-timing-function: ease;
+const Sender = styled(Label)`
   margin: 0 0 4px 12px;
+  text-align: left;
 `;
 
 interface BodyContainerProps {
@@ -35,7 +33,7 @@ interface BodyContainerProps {
 
 const BodyContainer = styled.div<BodyContainerProps>`
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
+  color: ${({ theme }) => theme.textColor.incomingMessage};
   max-width: calc(100% - 96px);
   font-weight: normal;
   font-stretch: normal;
@@ -46,7 +44,7 @@ const BodyContainer = styled.div<BodyContainerProps>`
 
 const SentTime = styled.div`
   width: fit-content;
-  color: rgba(0, 0, 0, 0.38);
+  color: ${({ theme }) => theme.textColor.sentTime};
   font-size: 12px;
   line-height: 1;
   margin-bottom: 6px;
@@ -107,9 +105,8 @@ export default function BotMessageWithBodyInput(props: Props) {
       <BodyContainer style={bodyStyle ?? {}}>
         {displaySender && (
           <Sender
-            style={{
-              textAlign: 'left',
-            }}
+            type={LabelTypography.CAPTION_2}
+            color={LabelColors.ONBACKGROUND_2}
           >
             {botUser.nickname}
           </Sender>

src/components/Chat.tsx

@@ -2,6 +2,7 @@ import '@sendbird/uikit-react/dist/index.css';
 import '../css/index.css';
 import SBProvider from '@sendbird/uikit-react/SendbirdProvider';
 import { useMemo, useRef } from 'react';
+import { ThemeProvider } from 'styled-components';
 
 import { type Props as ChatWidgetProps } from './ChatAiWidget';
 import CustomChannel from './CustomChannel';
@@ -14,8 +15,12 @@ import { HashedKeyProvider } from '../context/HashedKeyContext';
 import SBConnectionStateProvider, {
   useSbConnectionState,
 } from '../context/SBConnectionContext';
+import { getTheme } from '../theme';
 import { assert, isMobile } from '../utils';
 
+// TODO: Get the theme from the context
+const DEFAULT_THEME = 'light';
+
 const SBComponent = () => {
   const {
     applicationId,
@@ -63,6 +68,7 @@ const SBComponent = () => {
       breakPoint={isMobile}
       isReactionEnabled={enableEmojiFeedback}
       isMentionEnabled={enableMention}
+      theme={DEFAULT_THEME}
       uikitOptions={{
         groupChannel: {
           input: {
@@ -92,6 +98,8 @@ const Chat = ({
   const CHAT_WIDGET_APP_ID = import.meta.env.VITE_CHAT_WIDGET_APP_ID;
   const CHAT_WIDGET_BOT_ID = import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
 
+  const theme = getTheme()[DEFAULT_THEME];
+
   assert(
     applicationId !== null && botId !== null,
     'applicationId and botId must be provided'
@@ -105,11 +113,13 @@ const Chat = ({
       botId={CHAT_WIDGET_BOT_ID ?? botId}
       {...constantProps}
     >
-      <HashedKeyProvider hashedKey={hashedKey ?? null}>
-        <SBConnectionStateProvider>
-          {isOpen && <SBComponent />}
-        </SBConnectionStateProvider>
-      </HashedKeyProvider>
+      <ThemeProvider theme={theme}>
+        <HashedKeyProvider hashedKey={hashedKey ?? null}>
+          <SBConnectionStateProvider>
+            {isOpen && <SBComponent />}
+          </SBConnectionStateProvider>
+        </HashedKeyProvider>
+      </ThemeProvider>
     </ConstantStateProvider>
   );
 };

src/components/ChatBottom.tsx

@@ -17,7 +17,7 @@ const InnerContainer = styled.div<{ chatBottomBackgroundColor: string }>`
   background: ${(props) =>
     props.chatBottomBackgroundColor ||
     'linear-gradient(273.73deg, #4DCD90 -0.83%, #6210CC 48.04%, #6210CC 75.45%)'};
-  color: rgba(255, 255, 255, 0.88);
+  color: ${({ theme }) => theme.textColor.chatBottom};
   flex-wrap: wrap;
   font-size: 13px;
 `;

src/components/CurrentUserMessage.tsx

@@ -24,7 +24,7 @@ const BodyContainer = styled.div`
 `;
 
 const SentTime = styled.div`
-  color: rgba(0, 0, 0, 0.38);
+  color: ${({ theme }) => theme.textColor.sentTime};
   font-size: 12px;
   line-height: 1;
   margin-bottom: 6px;
@@ -35,7 +35,7 @@ const BodyComponent = styled.div`
   &:hover {
     background-color: #6211c8;
   }
-  color: rgba(255, 255, 255, 0.88);
+  color: ${({ theme }) => theme.textColor.outgoingMessage};
   max-width: 600px;
   display: flex;
   flex-direction: column;

src/components/CustomChannelComponent.tsx

@@ -3,6 +3,7 @@ import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { SendingStatus } from '@sendbird/chat/message';
 import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeader';
 import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
+// import SuggestedReplies from '@sendbird/uikit-react/Channel/components/SuggestedReplies';
 import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
 import { useEffect, useState, useMemo, useRef } from 'react';
 import ReactDOM from 'react-dom';
@@ -67,7 +68,7 @@ const Root = styled.div<RootStyleProps>`
       border: none;
       outline: none;
       max-height: 116px;
-      background-color: #eeeeee;
+      background-color: ${({ theme }) => theme.bgColor.messageInput};
       border-radius: 20px;
       height: auto;
       text-align: start;
@@ -192,7 +193,6 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
   const botWelcomeMessages = useMemo(() => {
     return getBotWelcomeMessages(allMessages, botUser.userId);
   }, [allMessages.length]);
-
   return (
     <Root hidePlaceholder={startingPagePlaceHolder} height={'100%'}>
       <ChannelUI
@@ -229,6 +229,10 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
               {message.messageId === lastMessage.messageId &&
                 dynamicReplyOptions.length > 0 && (
                   <DynamicRepliesPanel replyOptions={dynamicReplyOptions} />
+                  // <SuggestedReplies
+                  //   replyOptions={dynamicReplyOptions}
+                  //   onSendMessage={({ message }) => sendMessage(message)}
+                  // />
                 )}
             </>
           );

src/components/CustomChannelHeader.tsx

@@ -1,6 +1,10 @@
 import { User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import Avatar from '@sendbird/uikit-react/ui/Avatar';
+import Label, {
+  LabelTypography,
+  LabelColors,
+} from '@sendbird/uikit-react/ui/Label';
 import styled from 'styled-components';
 
 import BetaLogo from './BetaLogo';
@@ -25,12 +29,7 @@ const SubContainer = styled.div`
   align-items: center;
 `;
 
-const Title = styled.div`
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 20px;
-  letter-spacing: -0.2px;
-  color: rgba(0, 0, 0, 0.88);
+const Title = styled(Label)`
   max-width: 200px;
   overflow: hidden;
   white-space: nowrap;
@@ -83,7 +82,9 @@ export default function CustomChannelHeader(props: Props) {
           height="34px"
           width="34px"
         />
-        <Title>{botUser?.nickname || channel.name}</Title>
+        <Title type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
+          {botUser?.nickname || channel.name}
+        </Title>
         {!isMobile && betaMark && <BetaLogo>{customBetaMarkText}</BetaLogo>}
       </SubContainer>
       <RenewButtonContainer>

src/components/CustomMessage.tsx

@@ -1,6 +1,8 @@
 import { User } from '@sendbird/chat';
+import { Member } from '@sendbird/chat/groupChannel';
 import { UserMessage } from '@sendbird/chat/message';
 import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
+import TypingIndicatorBubble from '@sendbird/uikit-react/ui/TypingIndicatorBubble';
 // eslint-disable-next-line import/no-unresolved
 import { EveryMessage } from 'SendbirdUIKitGlobal';
 
@@ -10,11 +12,11 @@ import CurrentUserMessage from './CurrentUserMessage';
 import CustomMessageBody from './CustomMessageBody';
 import FormMessage from './FormMessage';
 import ParsedBotMessageBody from './ParsedBotMessageBody';
-import PendingMessage from './PendingMessage';
 import SuggestedReplyMessageBody from './SuggestedReplyMessageBody';
 import UserMessageWithBodyInput from './UserMessageWithBodyInput';
 import { LOCAL_MESSAGE_CUSTOM_TYPE } from '../const';
 import { useConstantState } from '../context/ConstantContext';
+import botMessageImage from '../icons/bot-message-image.png';
 import {
   isNotLocalMessageCustomType,
   MessageTextParser,
@@ -76,7 +78,13 @@ export default function CustomMessage(props: Props) {
       <div>
         {<CurrentUserMessage message={message as UserMessage} />}
         {activeSpinnerId === message.messageId && (
-          <PendingMessage botProfileUrl={botUser?.profileUrl} />
+          <TypingIndicatorBubble
+            typingMembers={[
+              {
+                profileUrl: botUser?.profileUrl || botMessageImage,
+              } as Member,
+            ]}
+          />
         )}
       </div>
     );

src/components/CustomMessageBody.tsx

@@ -8,9 +8,9 @@ const Root = styled.div`
   padding: 8px 12px;
   gap: 8px;
   border-radius: 16px;
-  background-color: #eeeeee;
+  background-color: ${({ theme }) => theme.bgColor.incomingMessage};
   &:hover {
-    background-color: #e0e0e0;
+    background-color: ${({ theme }) => theme.bgColor.hover.incomingMessage};
   }
   //max-width: 600px;
 `;

src/components/CustomMessageInput.tsx

@@ -18,10 +18,6 @@ const InputComponent = styled.textarea<InputProps>`
     props.isActive ? 'none' : 'width 0.5s'};
   transition-timing-function: ease;
   padding: 8px 16px;
-  font-size: 14px;
-  font-family: 'Roboto', sans-serif;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.88);
   resize: none;
   border: none;
   outline: none;

src/components/DynamicRepliesPanel.tsx

@@ -18,13 +18,13 @@ const ReplyItem = styled.div<SuggestedReplyItemProps>`
   border: ${(props: SuggestedReplyItemProps) =>
     props.isActive ? '1px solid #6C32D5' : '1px solid #EEEEEE'};
   border-radius: 18px;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.bgColor.suggestedReply};
   cursor: ${(props: SuggestedReplyItemProps) =>
     props.isActive ? 'pointer' : 'not-allowed'};
   &:hover {
-    ${(props: SuggestedReplyItemProps) => {
-      if (props.isActive) {
-        return 'background-color: #E6E0FF;';
+    ${({ isActive, theme }: SuggestedReplyItemProps) => {
+      if (isActive) {
+        return `background-color: ${theme.bgColor.hover.suggestedReply};`;
       }
     }};
   }

src/components/LoadingScreen.tsx

@@ -18,7 +18,7 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   z-index: 100;
-  background-color: white;
+  background-color: transparent;
 `;
 
 const IconContainer = styled.div`

src/components/ParsedBotMessageBody.tsx

@@ -14,9 +14,9 @@ const LazyCodeBlock = lazy(() =>
 
 const Root = styled.div`
   display: flex;
-  background-color: #eeeeee;
+  background-color: ${({ theme }) => theme.bgColor.incomingMessage};
   &:hover {
-    background-color: #e0e0e0;
+    background-color: ${({ theme }) => theme.bgColor.hover.incomingMessage};
   }
   //max-width: 600px;
   flex-direction: column;

src/components/SourceContainer.tsx

@@ -15,7 +15,7 @@ const RootTitle = styled.div`
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
-  color: rgba(0, 0, 0, 0.5);
+  color: ${({ theme }) => theme.textColor.incomingMessage};
   padding-bottom: 4px;
 `;
 
@@ -24,7 +24,7 @@ const SourceTitle = styled.a`
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.1px;
-  color: rgba(0, 0, 0, 0.88);
+  color: ${({ theme }) => theme.textColor.incomingMessage};
   width: fit-content;
   block-size: fit-content;
 `;
@@ -43,6 +43,12 @@ const IconLink = styled.a`
   align-items: center;
   width: 15px;
   padding: 0 1px;
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.textColor.incomingMessage};
+    }
+  }
 `;
 
 export interface Source {