Merge pull request #230 from abhinavkrin/new/message-component+avatar

New/message component+avatar

Author: sidmohanty11

packages/react/src/components/ActionButton/ActionButton.js

@@ -14,8 +14,8 @@ const getSize = ({ small, large }) => {
 };
 
 const ActionButton = forwardRef(
-  ({ icon, size = 'medium', children, ...props }, ref) => (
-    <Button ref={ref} square size={size} {...props}>
+  ({ icon, size = 'medium', color = 'default', children, ...props }, ref) => (
+    <Button ref={ref} square size={size} color={color} {...props}>
       {children}
       <Icon name={icon} size={getSize(props)} />
     </Button>

packages/react/src/components/ActionButton/ActionButton.stories.js

@@ -39,6 +39,7 @@ export const Ghost = {
     ghost: true,
     icon: 'cross',
     disabled: false,
+    color: 'primary',
   },
   render: (args) => (
     <ThemeProvider theme={DefaultTheme}>

packages/react/src/components/Avatar/Avatar.js

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+import { AvatarContainer } from './AvatarContainer';
+
+export const Avatar = ({
+  size = '2.25rem',
+  className = '',
+  style = {},
+  url,
+  ...props
+}) => {
+  const AvatarCss = css`
+    border-radius: 0.25rem;
+    height: ${size};
+    width: ${size};
+  `;
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'Avatar',
+    className,
+    style
+  );
+
+  return (
+    <AvatarContainer size={size} {...props}>
+      <img
+        src={`${url}`}
+        css={AvatarCss}
+        className={classNames}
+        style={styleOverrides}
+      />
+    </AvatarContainer>
+  );
+};

packages/react/src/components/Avatar/AvatarContainer.js

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import React from 'react';
+import { appendClassNames } from '../../lib/appendClassNames';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+import { Box } from '../Box';
+
+export const AvatarContainer = ({
+  title,
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const AvatarContainerCSS = css`
+    display: inline-flex;
+    vertical-align: middle;
+    cursor: pointer;
+  `;
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'AvatarContainer',
+    className,
+    style
+  );
+  props.className = appendClassNames('ec-avatar-container', [classNames]);
+
+  props.style = styleOverrides;
+
+  return (
+    <Box is="figure" css={AvatarContainerCSS} aria-label={title} {...props}>
+      {children}
+    </Box>
+  );
+};

packages/react/src/components/Avatar/index.js

@@ -0,0 +1 @@
+export * from './Avatar';

packages/react/src/components/Button/Button.js

@@ -30,9 +30,9 @@ const Button = ({
   const classNameButton = css`
     cursor: pointer;
     display: inline-block;
-    background-color: ${theme.palette[color].main};
-    color: ${theme.palette[color].contrastText || 'currentColor'};
-    border-color: ${theme.palette[color].main || 'currentColor'};
+    background-color: ${theme.palette[color]?.main};
+    color: ${theme.palette[color]?.contrastText || 'currentColor'};
+    border-color: ${theme.palette[color]?.main || 'currentColor'};
     border-style: solid;
     border-width: 1px;
     font-size: 0.875rem;
@@ -96,7 +96,7 @@ const Button = ({
     }
     &.ghost {
       background: none;
-      color: ${theme?.palette?.text?.primary || '#1A2027'};
+      color: ${theme?.palette?.[color]?.main || '#1A2027'};
       border: none;
     }
     &.disabled.ghost {

packages/react/src/components/ChatBody/ChatBody.js

@@ -177,12 +177,10 @@ const ChatBody = ({ height, anonymousMode, showRoles }) => {
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
       if (user) {
-        RCInstance.connect().then(() => {
-          RCInstance.addMessageListener(addMessage);
-          RCInstance.addMessageDeleteListener(removeMessage);
-          RCInstance.addActionTriggeredListener(onActionTriggerResponse);
-          RCInstance.addUiInteractionListener(onActionTriggerResponse);
-        });
+        RCInstance.addMessageListener(addMessage);
+        RCInstance.addMessageDeleteListener(removeMessage);
+        RCInstance.addActionTriggeredListener(onActionTriggerResponse);
+        RCInstance.addUiInteractionListener(onActionTriggerResponse);
         getMessagesAndRoles();
       } else {
         getMessagesAndRoles(anonymousMode);

packages/react/src/components/ChatInput/ChatInput.js

@@ -280,7 +280,6 @@ const ChatInput = () => {
           margin-top: 20px;
           border: 2px solid #ddd;
         `}
-        className={styles.containerParent}
       >
         {showMembersList ? (
           <MembersList