DeskDirector Angular Chat

Angularjs ui components for chat v4.

Components

In general, components will not render certain buttons if a callback is not provided.

Avatar

There is no need to use this directly for chat, but if you want you can use this component elsewhere in your app. This avatar will always show the user's presence.

selector: dac-avatar

api (bindings):

user: DacUser;
width: number; // default = 28
height: number; // default = 28
charCount: number; // default = 2

ChatContainer

This is the component that encapsulates the main content of a chat. It shows messages and an input container for entering messages.

selector: dac-chat-container

api:

participants: DacUser[] // Who's currently in the session
messages: DacMessage[] // All chat messages
userId: string // User id of the current user (will affect how messages are displayed)
hasUnread: boolean // Will show a button that user can click to read the latest message
typingUsers: DacUser[] // Will show who's typing at the bottom of messages
onReadMessage: () => void // Called when the user clicks the "read message" button. Should be used to read the latest message.
onInvite: () => void // Called when user clicks invite button. This should be where you swap out this component for the InviteUserContainer component.

InputContainer

This is to be used as a wrapper around an input field. It will render a send button as well as style your input element.

selector: dac-input-container

api:

canSend: boolean // whether the send button is enabled
onSend: () => void // Called when the send button is clicked

transclude: {
  input // Only transcludes an input field
}

InviteUserContainer

This component encapsulates the main content of inviting a user. This is intended to replace the ChatContainer component when the user clicks the invite button.

selector: dac-invite-user-container

api:

members: DacUser // All members that can be sent an invite
contacts: DacUser // All contacts that can be sent an invite
onInviteUsers: (args: { users: DacUser }) => void // Called when user clicks invite button after selecting users
onCancel: () => void // Called when user clicks the back button. You should now swap this component for the ChatContainer component.

Menu

This component encapsulates the menu content for dd-tech users. This is intended to replace the ChatContainer or InviteUsersContainer when the user clicks the menu button.

selector: dac-menu

api:

canLeave: boolean // Whether the tech can leave the room
onCancel: () => void // Called when the user clicks the back button
onLinkToTicket: () => void // Called when the user clicks the link to ticket button
onCreateTicket: () => void // Called when the user clicks the create ticket button
onClose: () => void // Called when the user clicks the close button
onLeave: () => void // Called when the user clicks the leave chat session button

Toolbar

This is the top toolbar for the chat session. It should always be present, even when switching container components around.

selector: dac-toolbar

api:

canLeave: boolean; // Whether the leave button shows
onLeave: // Called when the user clicks the leave button
onMinimize: // Called when the user clicks the minimize button
onShowMenu: // Called when the user clicks the menu button. Use this to show the menu component
transclude: {
  dacToolbarTitle; // Render your title inside this component
}