refactor(botonic-react): create typing indicator with typescript and …

…styled component

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,11 @@
+import React from 'react'
+
+import { Dot, TypingIndicatorWrapper } from './styles'
+
+export const TypingIndicator = () => (
+  <TypingIndicatorWrapper>
+    <Dot />
+    <Dot />
+    <Dot />
+  </TypingIndicatorWrapper>
+)

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

@@ -0,0 +1,45 @@
+import styled, { keyframes } from 'styled-components'
+
+const blink = keyframes`
+  50% {
+    opacity: 1;
+  }
+`
+
+const bulge = keyframes`
+  50% {
+    transform: scale(1.05);
+  }
+`
+
+export const TypingIndicatorWrapper = styled.div`
+  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;
+`
+
+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;
+  }
+`