new component Typing and added isMessageLoading in Conversation and u…

…pdate snaps

src/components/atoms/Message/Message.js

@@ -15,28 +15,16 @@ const StyledMessage = styled.div.withConfig({ shouldForwardProp })`
 `
 
 const Message = React.forwardRef(
-  (
-    { id, variant, children, backgroundColor = '#171717', loading = false },
-    ref,
-  ) => {
+  ({ id, variant, children, backgroundColor = '#171717' }, ref) => {
     return (
       <StyledMessage
         ref={ref}
         id={id}
         data-testid={id}
         variant={variant}
         backgroundColor={backgroundColor}
-        loading={loading}
       >
-        {loading ? (
-          <>
-            <span />
-            <span />
-            <span />
-          </>
-        ) : (
-          <span data-testid={`${id}-children`}>{children}</span>
-        )}
+        <span data-testid={`${id}-children`}>{children}</span>
       </StyledMessage>
     )
   },
@@ -49,7 +37,6 @@ Message.propTypes = {
   children: PropTypes.node.isRequired,
   variant: PropTypes.oneOf(options.variants),
   backgroundColor: PropTypes.string,
-  loading: PropTypes.bool,
 }
 
 export default Message

src/components/atoms/Message/Message.stories.js

@@ -38,5 +38,3 @@ export const HumanMessage = {
 
 export const Variants = ListTemplate.bind({})
 Variants.args = { items: options.variants.map((variant) => ({ variant })) }
-
-export const Loading = { args: { loading: true } }

src/components/atoms/Message/Message.styles.js

@@ -37,44 +37,4 @@ export default css`
       color: ${getReadableTextColor(props.backgroundColor)};
       background-color: ${props.backgroundColor};
     `}
-
-  ${(props) =>
-    props.loading &&
-    css`
-      display: flex;
-      gap: 5px;
-
-      span {
-        width: 10px;
-        height: 10px;
-        border-radius: var(--border-radius-round);
-        animation: dots-animation 1.5s infinite ease-in-out;
-
-        @media screen and (prefers-reduced-motion) {
-          animation: none;
-        }
-
-        &:nth-child(1) {
-          animation-delay: calc(300ms * 1);
-        }
-        &:nth-child(2) {
-          animation-delay: calc(300ms * 2);
-        }
-        &:nth-child(3) {
-          animation-delay: calc(300ms * 3);
-        }
-
-        @keyframes dots-animation {
-          0% {
-            background-color: var(--color-neutral-100);
-          }
-          20% {
-            background-color: var(--color-neutral-400);
-          }
-          44% {
-            background-color: var(--color-neutral-700);
-          }
-        }
-      }
-    `}
 `

src/components/atoms/Message/__snapshots__/Message.test.js.snap

@@ -17,10 +17,9 @@ exports[`Storyshots Atoms/Message Default 1`] = `
   }
 >
   <div
-    className="sc-1kelln5-0 exuiBe"
+    className="sc-1kelln5-0 dTOcm"
     data-testid="test"
     id="test"
-    loading={false}
   >
     <span
       data-testid="test-children"
@@ -31,7 +30,7 @@ exports[`Storyshots Atoms/Message Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Atoms/Message Loading 1`] = `
+exports[`Storyshots Atoms/Message Human Message 1`] = `
 <div
   style={
     {
@@ -48,39 +47,9 @@ exports[`Storyshots Atoms/Message Loading 1`] = `
   }
 >
   <div
-    className="sc-1kelln5-0 guGDmx"
+    className="sc-1kelln5-0 cRizik"
     data-testid="test"
     id="test"
-    loading={true}
-  >
-    <span />
-    <span />
-    <span />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Atoms/Message Outgoing 1`] = `
-<div
-  style={
-    {
-      "alignContent": "flex-start",
-      "display": "flex",
-      "flexDirection": "column",
-      "flexWrap": "wrap",
-      "gap": "10px 30px",
-      "height": "100%",
-      "justifyContent": "flex-start",
-      "maxHeight": "auto",
-      "position": "relative",
-    }
-  }
->
-  <div
-    className="sc-1kelln5-0 gsOApI"
-    data-testid="test"
-    id="test"
-    loading={false}
   >
     <span
       data-testid="test-children"
@@ -108,10 +77,9 @@ exports[`Storyshots Atoms/Message Variants 1`] = `
   }
 >
   <div
-    className="sc-1kelln5-0 exuiBe"
+    className="sc-1kelln5-0 dTOcm"
     data-testid="test"
     id="test"
-    loading={false}
   >
     <span
       data-testid="test-children"
@@ -120,10 +88,9 @@ exports[`Storyshots Atoms/Message Variants 1`] = `
     </span>
   </div>
   <div
-    className="sc-1kelln5-0 gsOApI"
+    className="sc-1kelln5-0 cRizik"
     data-testid="test"
     id="test"
-    loading={false}
   >
     <span
       data-testid="test-children"

src/components/atoms/Typing/Typing.js

@@ -0,0 +1,31 @@
+import isPropValid from '@emotion/is-prop-valid'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+import styles from './Typing.styles'
+/**
+ * Typing
+ */
+
+const shouldForwardProp = (prop) => isPropValid(prop)
+const StyledTyping = styled.div.withConfig({ shouldForwardProp })`
+  ${styles}
+`
+
+const Typing = ({ id }) => {
+  return (
+    <StyledTyping css={styles} id={id} data-testid={id}>
+      <span />
+      <span />
+      <span />
+    </StyledTyping>
+  )
+}
+
+Typing.displayName = 'Typing'
+
+Typing.propTypes = {
+  id: PropTypes.string,
+}
+
+export default Typing

src/components/atoms/Typing/Typing.stories.js

@@ -0,0 +1,14 @@
+import Typing from './Typing'
+
+import { getTemplate } from '../../../helpers/storybook'
+
+const Template = getTemplate(Typing)
+
+export default {
+  title: 'Atoms/Typing',
+  component: Typing,
+  args: {},
+  argTypes: {},
+}
+
+export const Default = Template.bind({})

src/components/atoms/Typing/Typing.styles.js

@@ -0,0 +1,50 @@
+import { css } from 'styled-components'
+
+export default css`
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  max-width: max-content;
+  white-space: pre-line;
+  border-radius: var(--border-radius-md);
+  line-height: 1.5;
+  word-break: break-word;
+  color: var(--color-neutral-900);
+  background-color: var(--color-neutral-100);
+  min-height: 37px;
+  align-items: center;
+  display: flex;
+  gap: 5px;
+
+  span {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--border-radius-round);
+    animation: dots-animation 1.5s infinite ease-in-out;
+
+    @media screen and (prefers-reduced-motion) {
+      animation: none;
+    }
+
+    &:nth-child(1) {
+      animation-delay: calc(300ms * 1);
+    }
+    &:nth-child(2) {
+      animation-delay: calc(300ms * 2);
+    }
+    &:nth-child(3) {
+      animation-delay: calc(300ms * 3);
+    }
+
+    @keyframes dots-animation {
+      0% {
+        background-color: var(--color-neutral-100);
+      }
+      20% {
+        background-color: var(--color-neutral-400);
+      }
+      44% {
+        background-color: var(--color-neutral-700);
+      }
+    }
+  }
+`

src/components/atoms/Typing/Typing.test.js

@@ -0,0 +1,21 @@
+import initStoryshots from '@storybook/addon-storyshots'
+import { render, screen, cleanup } from '@testing-library/react'
+import React from 'react'
+import Typing from './Typing'
+
+initStoryshots({
+  storyKindRegex: /^Atoms\/Typing$/,
+})
+
+const componentProps = {
+  id: 'unique_id',
+}
+afterEach(cleanup)
+
+describe('<Typing />', () => {
+  test('should render component correctly', () => {
+    render(<Typing {...componentProps} />)
+    const comp = screen.getByTestId(componentProps.id)
+    expect(comp).toBeInTheDocument()
+  })
+})

src/components/atoms/Typing/__snapshots__/Typing.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Typing Default 1`] = `
+<div
+  style={
+    {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="sc-1irqryg-0 sc-1irqryg-1 fyFnNP hSjpO"
+  >
+    <span />
+    <span />
+    <span />
+  </div>
+</div>
+`;

src/components/atoms/Typing/index.js

@@ -0,0 +1,3 @@
+import Typing from './Typing'
+
+export default Typing

src/components/molecules/ContentEditable/__snapshots__/ContentEditable.test.js.snap

@@ -18,7 +18,7 @@ exports[`Storyshots Molecules/ContentEditable Default 1`] = `
 >
   <div
     aria-label="Ask your question here..."
-    className="sc-1p2qa2e-0 jiBkaT"
+    className="sc-1p2qa2e-0 hDdMmR"
     contentEditable={true}
     onBlur={[Function]}
     onPaste={[Function]}

src/components/molecules/Conversation/Conversation.js

@@ -4,6 +4,7 @@ import React, { useRef, useEffect } from 'react'
 import styled from 'styled-components'
 import styles from './Conversation.styles'
 import Message from '../../atoms/Message'
+import Typing from '../../atoms/Typing/Typing'
 import Container from '../../layout/Container'
 
 /**
@@ -15,7 +16,7 @@ const StyledConversation = styled.div.withConfig({ shouldForwardProp })`
   ${styles}
 `
 
-const Conversation = ({ id, messages, children }) => {
+const Conversation = ({ id, messages, isMessageLoading, children }) => {
   const lastMessageRef = useRef(null)
   const didScroll = useRef(false)
 
@@ -51,6 +52,7 @@ const Conversation = ({ id, messages, children }) => {
             </Message>
           </Container>
         ))}
+        {isMessageLoading && <Typing />}
       </Container>
       {children}
     </StyledConversation>

src/components/molecules/Conversation/Conversation.stories.js

@@ -37,3 +37,8 @@ export default {
 }
 
 export const Default = Template.bind({})
+
+export const Loading = Template.bind({})
+Loading.args = {
+  isMessageLoading: true,
+}

src/components/molecules/MessageInput/__snapshots__/MessageInput.test.js.snap

@@ -24,7 +24,7 @@ exports[`Storyshots Molecules/MessageInput Default 1`] = `
     >
       <div
         aria-label="Type a message..."
-        className="sc-1p2qa2e-0 jiBkaT"
+        className="sc-1p2qa2e-0 hDdMmR"
         contentEditable={true}
         onBlur={[Function]}
         onInput={[Function]}

src/index.js

@@ -7,6 +7,7 @@ export { default as ScreenReaderText } from './components/atoms/ScreenReaderText
 export { default as SendButton } from './components/atoms/SendButton'
 export { default as SuggestedQuestion } from './components/atoms/SuggestedQuestion'
 export { default as Text } from './components/atoms/Text'
+export { default as Typing } from './components/atoms/Typing'
 
 // Layout components
 export { default as ChatWrapper } from './components/layout/ChatWrapper'