botonic-react: new typing indicator component (#2914)

## Description

Create a typing indicator without scss and typescript

packages/botonic-react/src/webchat/message-list/index.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { ROLES, WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
 import { StyledScrollbar } from '../components/styled-scrollbar'
-import { TypingIndicator } from '../components/typing-indicator'
+import { TypingIndicator } from '../typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
 import { ContainerMessage } from './styles'

packages/botonic-react/src/webchat/typing-indicator/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { COLORS, ROLES } from '../../constants'
+import { Dot, TypingIndicatorWrapper } from './styles'
+
+export const TypingIndicator = () => (
+  <TypingIndicatorWrapper
+    role={ROLES.TYPING_INDICATOR}
+    className='typing-indicator'
+    backgroundColor={COLORS.SEASHELL_WHITE}
+  >
+    <Dot />
+    <Dot />
+    <Dot />
+  </TypingIndicatorWrapper>
+)

packages/botonic-react/src/webchat/typing-indicator/styles.ts

@@ -0,0 +1,50 @@
+import styled, { keyframes } from 'styled-components'
+
+const blink = keyframes`
+  50% {
+    opacity: 1;
+  }
+`
+
+const bulge = keyframes`
+  50% {
+    transform: scale(1.05);
+  }
+`
+
+interface TypingIndicatorWrapperProps {
+  backgroundColor: string
+}
+
+export const TypingIndicatorWrapper = styled.div<TypingIndicatorWrapperProps>`
+  will-change: transform;
+  width: 44px;
+  line-height: 0px;
+  border-radius: 20px;
+  padding: 8px 2px 8px;
+  text-align: center;
+  display: block;
+  margin: 8px;
+  position: relative;
+  animation: 2s ${bulge} infinite ease-out;
+  background-color: ${props => props.backgroundColor};
+`
+
+export const Dot = styled.span`
+  height: 6px;
+  width: 6px;
+  margin: 0 1px;
+  background-color: #9e9ea1;
+  display: inline-block;
+  border-radius: 50%;
+  opacity: 0.4;
+  &:nth-of-type(1) {
+    animation: 1s ${blink} infinite 0.3333s;
+  }
+  &:nth-of-type(2) {
+    animation: 1s ${blink} infinite 0.6666s;
+  }
+  &:nth-of-type(3) {
+    animation: 1s ${blink} infinite 1s;
+  }
+`