Add Chat Component

[aswinshenoy]

Implement the Chat component according to spec: https://www.lightningdesignsystem.com/components/chat/

[aswinshenoy]

Here is my initial prop proposal for the component, what do you think?

Chat

Name	Type	Description
ClassName	array/object/string	Additional Class Names
isPastChat	boolean	Whether the chat is from past. Defaults to false.
children	Element[ ]	Chat body/content

Message

Name	Type	Description
direction	enum {"inbound","outbound"}	Direction of the message
time	string	Time of sending message
user	string	User sending the message
showAvatar	boolean	Whether to show user avatar. Defaults to false.
isTyping	boolean	Whether user is typing the message. Defaults to false.
peek	boolean	Whether to peek into message being typed. Defaults to false.
isUnsupported	boolean	Whether the message is unsupported. Defaults to false.
isUndelivered	boolean	Whether the message is undelivered. Defaults to false.
isCurrentAgent	boolean	Whether the message is sent by current agent. Defaults to true.

Attachment

Name	Type	Description
direction	enum {"inbound","outbound"}	Direction of the attachment
time	string	Time of sending attachment
user	string	User sending the attachment
thumbnail	string	URL to thumbnail
link	string	Link to the attachment
title	string	Title for the attachment
format	string	Format of the attachment

Event

Name	Type	Description
time	string	Time of the event
title	node	Description of the event
icon	string	Icon for the event
message	string	Message left by the agent additionally
isError	boolean	Whether the event is an error. Defaults to false.

Here is a basic example using these specs -

<Chat>
    <Event
      title={<span>Chat started by<b>Andy Martinez</b></span>}
      time="4:58 PM"
      icon="chat"
    />
    <Message
        direction="inbound"
	time="4:59 PM" 
	user="Andy Martinez"
	showAvatar
     >
         Hi, my CloudWidget only speaks French
     </Message>
     <Message
        direction="outbound"
	time="5:02 PM" 
        user="Jason Dewar"
	>
             Hi Andy, thank you for contacting Widget Support. Can you please tell me what language you are trying to program on your CloudWidget?
      </Message>
      <Attachment
           direction="inbound"
	   time="5:04 PM" 
           user="Andy Martinez"
	    thumbnail="...."
	    title="Image.jpg"
	    format="image"
	    link="..."
	 />
</Chat>

[interactivellama]

Great props proposal. It's clear for a complex component.

• isUnsupported and isUndelivered should probably be the same prop, since they can't both be true and it looks like they are limited to whether they are inbound or outbound.
• peek and showAvatar are booleans and probably should be isSneakPeek and hasAvatar
• Attachment should be a variant of the File component https://www.lightningdesignsystem.com/components/files/ 's "File with actions" it could be named Attachment, but take all the same props of File. I see that you proposed making File Add Files Component #1879 so that's good. You might consider making that one first after the API is approved. So I am going to wait to comment on the props until file is reviewed.
• title should probably be reserved for the HTML title attribute. label is fine.
• Event should probably have variants that choose the icon.
• Many of the string types should also be node also, so that styling can be done on the text.
• I see showAvatar but I don't see an an avatar prop. Maybe it should just the avatar if one is passed in?

Please update and confirm by posting to this thread.

[interactivellama]

I will try to get #1879 looked over tomorrow.

[stale]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.