@deskdirector/angular-chat

Angular chat components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@deskdirector/angular-chat
1.0.04 years ago4 years agoMinified + gzip package size for @deskdirector/angular-chat in KB

Readme

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): ```ts 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: ```ts 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: ```ts 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: ```ts 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: ```ts 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: ```ts 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 } ```