feat: Added pending & failed message

src/components/CurrentUserMessage.tsx

@@ -1,9 +1,11 @@
+import { styled } from '@linaria/react';
 import { UserMessage } from '@sendbird/chat/message';
-import styled from 'styled-components';
+import { useTheme } from 'styled-components';
 
-import { DefaultSentTime, BodyContainer, BodyComponent } from './MessageComponent';
+import { BodyContainer, BodyComponent } from './MessageComponent';
+import MyMessageStatus from './MyMessageStatus';
 import { useConstantState } from '../context/ConstantContext';
-import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
+
 
 const Root = styled.div<{ enableEmojiFeedback: boolean }>`
   display: flex;
@@ -18,11 +20,13 @@ type Props = {
 
 export default function CurrentUserMessage(props: Props) {
   const { enableEmojiFeedback, dateLocale } = useConstantState();
+  const theme = useTheme();
+
   const { message } = props;
 
   return (
     <Root enableEmojiFeedback={enableEmojiFeedback}>
-      <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+      <MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
       <BodyContainer>
         <BodyComponent>
           <div className="sendbird-word">{message.message}</div>

src/components/LoadingScreen.tsx

@@ -9,7 +9,7 @@ const spinner = keyframes`
   100% {
     transform: rotate(360deg);
   }
-}`;
+`;
 
 const Container = styled.div`
   width: 100%;

src/components/MyMessageStatus.tsx

@@ -0,0 +1,46 @@
+import { css } from '@linaria/core';
+import { SendableMessage } from '@sendbird/chat/lib/__definition';
+import { SendingStatus } from '@sendbird/chat/message';
+import { Locale } from 'date-fns';
+import { useTheme } from 'styled-components';
+
+import { DefaultSentTime } from './MessageComponent';
+import { Icon } from '../foundation/components/Icon';
+import { Container } from '../foundation/components/Loader';
+import { useLocalProps } from '../foundation/hooks/useLocalProps';
+import { CommonTheme } from '../theme';
+import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
+
+
+interface MyMessageStatusProps {
+  message: SendableMessage;
+  dateLocale: Locale;
+  theme: CommonTheme;
+}
+
+export default function MyMessageStatus(props: MyMessageStatusProps) {
+  const { message, dateLocale } = props;
+  const theme = useTheme();
+  const localProps = useLocalProps({ testId: 'sendbird-loader' });
+
+  switch (message.sendingStatus) {
+    case SendingStatus.PENDING:
+      return (
+        <Container className={sendbirdLoader} size={16} {...localProps}>
+          <Icon type={'spinner'} color={theme.bgColor.outgoingMessage} size={16} />
+        </Container>
+      );
+    case SendingStatus.FAILED:
+      return (
+        <Container className={sendbirdLoader} size={16} {...localProps} style={{ animation: 'unset' }}>
+          <Icon type={'error'} color={'error'} size={16} />
+        </Container>
+      );
+    default:
+      return <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>;
+  }
+}
+
+const sendbirdLoader = css`
+  margin-bottom: 2px;
+`;

src/components/messages/OutgoingFileMessage.tsx

@@ -2,14 +2,15 @@ import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { FileMessage } from '@sendbird/chat/message';
 import { useState } from 'react';
+import { useTheme } from 'styled-components';
 
 import { useConstantState } from '../../context/ConstantContext';
 import { Icon } from '../../foundation/components/Icon';
 import { Label } from '../../foundation/components/Label';
 import { Loader } from '../../foundation/components/Loader';
 import { META_ARRAY_ASPECT_RATIO_KEY } from '../../utils/getImageAspectRatio';
-import { formatCreatedAtToAMPM } from '../../utils/messageTimestamp';
-import { BodyComponent, BodyContainer, DefaultSentTime } from '../MessageComponent';
+import { BodyComponent, BodyContainer } from '../MessageComponent';
+import MyMessageStatus from '../MyMessageStatus';
 import { FileViewer } from '../ui/FileViewer';
 
 type Props = {
@@ -18,6 +19,7 @@ type Props = {
 
 export const OutgoingFileMessage = ({ message }: Props) => {
   const { dateLocale } = useConstantState();
+  const theme = useTheme();
 
   const hasMessageBubble = !!message.message;
   const type = (() => {
@@ -36,7 +38,7 @@ export const OutgoingFileMessage = ({ message }: Props) => {
   const renderTimestamp = () => {
     return (
       <div className={timestampContainer}>
-        <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+        <MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
       </div>
     );
   };

src/components/widget/ProviderContainer.tsx

@@ -83,7 +83,7 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
             configureSession={configureSession}
             customExtensionParams={userAgentCustomParams}
             breakpoint={isMobileView} // A property that determines whether to show it with a layout that fits the mobile screen. Or you can put the width size with `px`.
-            theme={theme}
+            theme={botStyle.theme}
             colorSet={customColorSet}
             stringSet={stringSet}
             dateLocale={dateLocale}

src/foundation/components/Loader/index.tsx

@@ -18,7 +18,7 @@ export const Loader = ({ className, children, size = 26, testId = 'sendbird-load
   );
 };
 
-const Container = styled.div<{ size: string | number }>`
+export const Container = styled.div<{ size: string | number }>`
   display: inline-block;
   animation: 1s infinite linear;
   animation-name: rotate;