beem-component 1.7.8 → 1.8.0

package/src/App.js

@@ -1,234 +1,259 @@
 import React from 'react';
 
-import AttachFileIcon from '@mui/icons-material/AttachFile';
-import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
-import SendIcon from '@mui/icons-material/Send';
-import QuickreplyIcon from '@mui/icons-material/Quickreply';
 import {
-  BmChat,
   BmInput,
-  BmIcons,
   GlobalStyle,
-  BmProfileIcon,
-  BmContactCard,
-  BmTag,
-  BmCounter,
-  BmAvatar,
 
   // BmCheckboxToggle,
 } from './lib/components';
 
-const Chat = () => {
-  // const [test, setTest] = useState(false);
-  // const [test1, setTest1] = useState(false);
+// const Chat = () => {
+//   // const [test, setTest] = useState(false);
+//   // const [test1, setTest1] = useState(false);
 
-  const image =
-    'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
-  return (
-    <>
-      <GlobalStyle />
-      <BmProfileIcon channel="google_business_messaging" />
-      <BmChat>
-        <BmChat.Body>
-          <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            // sessionDetails={{
-            //   message: <h3>Session Message</h3>,
-            //   time: <p>12:00pm</p>,
-            // }}
-            feedPostComments={{
-              header: <p>Comment Reply</p>,
-              body: {
-                link: <p>This is an outbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'comment',
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          {/* <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Comment Reply</p>,
-              body: {
-                link: <p>This is an inbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'comment',
-            }}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Story Reply</p>,
-              body: {
-                link: <p>This is an outbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'outbound',
-              status: 'story',
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-            feedPostComments={{
-              header: <p>Story Reply</p>,
-              body: {
-                link: <p>This is an inbound link</p>,
-                image,
-              },
-              footer: <p>This is a Footer</p>,
-              state: 'inbound',
-              status: 'story',
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            fileName={<p>chat.png</p>}
-            src={image}
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="bot"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-          >
-            <p>Outbound Text Message</p>
-          </BmChat.Details>
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            sessionTimeline={{ message: <p>12:00pm</p> }}
-            file={image}
-            link={image}
-            onDownload={() => {
-              alert('hello');
-            }}
-          /> */}
-        </BmChat.Body>
-        <BmChat.Footer>
-          <div className="chat-footer">
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </div>
-        </BmChat.Footer>
-      </BmChat>
+//   const image =
+//     'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
+//   return (
+//     <>
+//       <GlobalStyle />
+//       <BmProfileIcon channel="google_business_messaging" />
+//       <BmChat>
+//         <BmChat.Body>
+//           <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             // sessionDetails={{
+//             //   message: <h3>Session Message</h3>,
+//             //   time: <p>12:00pm</p>,
+//             // }}
+//             feedPostComments={{
+//               header: <p>Comment Reply</p>,
+//               body: {
+//                 link: <p>This is an outbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'comment',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             file={image}
+//           />
+//           {/* <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Comment Reply</p>,
+//               body: {
+//                 link: <p>This is an inbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'comment',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Story Reply</p>,
+//               body: {
+//                 link: <p>This is an outbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'outbound',
+//               status: 'story',
+//             }}
+//           />
+//           <BmChat.Details
+//             agentName="Agent Name"
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           >
+//             <p>Outbound Text Message2</p>
+//           </BmChat.Details>
+
+//           <BmChat.Details
+//             agentName="Test Agent"
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           >
+//             <p>Outbound Text Message2</p>
+//           </BmChat.Details>
+
+//           <BmChat.Details
+//             state="inbound"
+//             session="sms"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//             feedPostComments={{
+//               header: <p>Story Reply</p>,
+//               body: {
+//                 link: <p>This is an inbound link</p>,
+//                 image,
+//               },
+//               footer: <p>This is a Footer</p>,
+//               state: 'inbound',
+//               status: 'story',
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             fileName={<p>chat.png</p>}
+//             src={image}
+//             sessionDetails={{
+//               message: <h3>Session Message</h3>,
+//               time: <p>12:00pm</p>,
+//             }}
+//           />
+//           <BmChat.Details
+//             state="inbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             file={image}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="bot"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//           >
+//             <p>Outbound Text Message</p>
+//           </BmChat.Details>
+//           <BmChat.Details
+//             state="outbound"
+//             session="live"
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             displayTime={<p>12:00pm</p>}
+//             status="sent"
+//             fileName={<p>chat.png</p>}
+//             src={image}
+//           />
+//           <BmChat.Details
+//             state="outbound"
+//             session="live"
+//             displayTime={<p>10:00am</p>}
+//             status="failed"
+//             fileName={<p>file.csv</p>}
+//             sessionTimeline={{ message: <p>12:00pm</p> }}
+//             file={image}
+//             link={image}
+//             onDownload={() => {
+//               alert('hello');
+//             }}
+//           /> */}
+//         </BmChat.Body>
+//         <BmChat.Footer>
+//           <div className="chat-footer">
+//             <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+//             <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+//             <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+//             <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+//             <BmIcons icon={<SendIcon />} size="xlarge" />
+//           </div>
+//         </BmChat.Footer>
+//       </BmChat>
 
-      {/* <BmCheckboxToggle
-        key="test"
-        checked={test}
-        onChange={(check) => {
-          console.log(check);
-          setTest(check);
-        }}
-      />
+//       {/* <BmCheckboxToggle
+//         key="test"
+//         checked={test}
+//         onChange={(check) => {
+//           console.log(check);
+//           setTest(check);
+//         }}
+//       />
 
-      <BmCheckboxToggle
-        key="test1"
-        checked={test1}
-        onChange={(check) => {
-          console.log(check);
-          setTest(check);
-        }}
+//       <BmCheckboxToggle
+//         key="test1"
+//         checked={test1}
+//         onChange={(check) => {
+//           console.log(check);
+//           setTest(check);
+//         }}
 
-        
-      /> */}
+//       /> */}
 
-      <BmContactCard>
-        <BmContactCard.Profile>
-          <BmAvatar user="chatbot" size="medium" />
-        </BmContactCard.Profile>
-        <BmContactCard.Details>
-          <BmContactCard.SubDetails>
-            <h3>Contact Names</h3>
-          </BmContactCard.SubDetails>
-          <BmContactCard.SubDetails>
-            <p>
-              Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
-              odfigj ofdigj ofdijg dofigj dfoig jodfigj text
-            </p>
-            <BmCounter>10</BmCounter>
-          </BmContactCard.SubDetails>
-          <BmContactCard.SubDetails>
-            <BmTag variant="success">label</BmTag>
-            <p>10:00 am</p>
-          </BmContactCard.SubDetails>
-        </BmContactCard.Details>
-      </BmContactCard>
+//       <BmContactCard>
+//         <BmContactCard.Profile>
+//           <BmAvatar user="chatbot" size="medium" />
+//         </BmContactCard.Profile>
+//         <BmContactCard.Details>
+//           <BmContactCard.SubDetails>
+//             <h3>Contact Names</h3>
+//           </BmContactCard.SubDetails>
+//           <BmContactCard.SubDetails>
+//             <p>
+//               Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
+//               odfigj ofdigj ofdijg dofigj dfoig jodfigj text
+//             </p>
+//             <BmCounter>10</BmCounter>
+//           </BmContactCard.SubDetails>
+//           <BmContactCard.SubDetails>
+//             <BmTag variant="success">label</BmTag>
+//             <p>10:00 am</p>
+//           </BmContactCard.SubDetails>
+//         </BmContactCard.Details>
+//       </BmContactCard>
+//     </>
+//   );
+// };
+
+const Chat = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <BmInput placeholder="tejal" state="complete" action="pending" />
     </>
   );
 };

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -4,10 +4,12 @@ import { Done, DoneAll } from '@material-ui/icons';
 import FilePresentIcon from '@mui/icons-material/FilePresent';
 import DownloadIcon from '@mui/icons-material/Download';
 import styled from 'styled-components';
+import Avatar from 'react-avatar';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
 import { SessionTimeline } from './sessionTimeline';
+
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -113,11 +115,14 @@ const MessagesSubDetails = styled.div`
   margin-top: 0.5rem;
 `;
 
-const handleState = ({ session }) => {
+const handleState = ({ session, agentName }) => {
   if (session === 'bot') {
     return <BmAvatar size="small" user="chatbot" />;
   }
   if (session === 'live') {
+    if (agentName) {
+      return <Avatar name={agentName} size="25px" round />;
+    }
     return <BmAvatar size="small" user="employee" />;
   }
   if (session === 'sms') {
@@ -261,6 +266,7 @@ BmChat.Details = ({
   sessionDetails,
   sessionTimeline,
   feedPostComments,
+  agentName,
   ...rest
 }) => {
   return (
@@ -268,7 +274,9 @@ BmChat.Details = ({
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
-          {state === 'inbound' && session && handleState({ state, session })}
+          {state === 'inbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
@@ -317,7 +325,9 @@ BmChat.Details = ({
           </MessagesSubDetails>
         </MessageDetails>
         <MessageState>
-          {state === 'outbound' && session && handleState({ state, session })}
+          {state === 'outbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
       </Details>
 

package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -147,6 +147,19 @@ export const ChatBody = () => {
             alert('hello');
           }}
         />
+        <BmChat.Details
+          agentName="Agent Name"
+          state="outbound"
+          session="live"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+        >
+          <p>Outbound Text Message</p>
+        </BmChat.Details>
       </BmChat.Body>
       <BmChat.Footer>
         <div className="chat-footer">