# angular-ui-chat > Angular UI Customizible chatroom that lets you determine how to store and retrieve data Latest version **1.2.2** (published 2016-03-07) · ISC license · 0 weekly downloads ## Install ```sh npm install angular-ui-chat pnpm add angular-ui-chat yarn add angular-ui-chat bun add angular-ui-chat ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.2 | | Published | 2016-03-07 | | First published | 2016-02-15 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Thomas Meadows | | Maintainers | thomasmeadows | | Keywords | angular, chatroom, ui, angular ui, angular-ui, chat, light, gravatar, custom, customizable | ## Links - npm: https://www.npmjs.com/package/angular-ui-chat - Repository: https://github.com/thomasmeadows/angular-ui-chat - Issues: https://github.com/thomasmeadows/angular-ui-chat/issues - npm.io page: https://npm.io/package/angular-ui-chat ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.2.2 (latest) — 2016-03-07 - 1.2.1 — 2016-03-04 - 1.2.0 — 2016-03-03 - 1.1.2 — 2016-03-02 - 1.1.1 — 2016-03-01 - 1.1.0 — 2016-02-26 - 1.0.6 — 2016-02-24 - 1.0.5 — 2016-02-23 - 1.0.4 — 2016-02-23 - 1.0.3 — 2016-02-22 - 1.0.0 — 2016-02-15 ## README # Angular-UI-Chat ========= A small library for making a custom chatroom. This addon is purely front-end so how you send data to it is up to you. ![chatdemo](https://cloud.githubusercontent.com/assets/11771776/13540000/0748f90c-e222-11e5-8eaf-880b9cd373f9.gif) ## Dependencies Angular 1.x ## Installation npm install angular-ui-chat --save ## Feature Roadmap - [x] Basic functionality (plain text) - [x] User Message Callback - [x] Curse Word Filters - [x] [Emoticons](http://www.emoji-cheat-sheet.com/) - [x] Mobile Friendly - [x] User Images - [x] Collapsable user name list - [x] Private Messages - [x] Admin abilities - [x] Parse on key up Emoticons/PM/Mention - [x] HTML - bold - [x] HTML - underline - [x] HTML - italics - [ ] HTML - links - [ ] HTML - size increase - [ ] HTML - images - [ ] User Settings - [ ] Custom User Levels - [ ] Themes ## Usage 1. run npm install angular-ui-chat 2. include the .min.js and the .min.css file from the dist/ folder in your project. 3. Add 'ui-chat' to your angular dependencies 4. Add to your html ```html ``` 5. In your controller create an optionsObject and a message callback function (DO NOT include parenthesis () in the html!) ```javascript $scope.uiChatOptions = { //'left' or 'right'; defaults to right usersListSide: 'right', //if set to twa, the cha t will filter for twemoji awesome emoji: 'twa', curseFilter: true, //start this will parse items in the input box on key up mentionParse: true, emojiParse: true, pmParse: true, //object to enable html input / false to disable html: { italicize: true, bold: true, underline: true }, //end input box filters defaultCurseReplacer: '$|^&!', users: [arrayOfUsersInChat], user: {userObject}, userFeedback: { message: 'soandso is typing a message', }, messages: [messagesFromUsersInChat] }; $scope.messageCallbackFunction = function(messageObject){ //process message here whenever message received //you can also alter the message here and return the change return messageObject; }; $scope.isTypingCallbackFunction = function(lengthOfCharacters){ //process is activity here for user is typing... }; $scope.chatPrivateMessageCallbackFunction = function(messageObject, userObject){ //process message here whenever a private message is sent from the client user //you can also alter the message here and return the change return messageObject; }; $scope.messageDeleteCallbackFunction = function(messageObject){ //call for when an admin wants to delete a message }; ``` 6. Each array is an array of objects, the following should be contained in each. User is an object of the user that is the owner of the chat instance. For security reasons it is not recommended to include user email addresses in calls related to chat functionality, this would leave anyone in the live chat open to having their emails scraped by a bot. ```javascript var arrayOfUsersInChat = [userObject, userObject]; arrayOfUsersInChat.push(userObject); ``` ```javascript var messagesFromUsersInChat = []; messagesFromUsersInChat.push({ //the same userobject as listed below. user: {userObject}, //the message sent message: 'message sent by user', id: 'unique id(optional)', //time of the messages time: new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(); //if it is a private message private: { //who our client is having a conversation with user: userObject, //if the message is from the client to private user from: true, //if the message is to the client from private user to: true, }, }); ``` ```javascript var userObject = {}; userObject = { username: 'what to display', id: 'unique id(optional)', image: 'an image for the user', //if you want to use gravatar you should generate the links server side and pass it into this image field admin: false, // or true if they are a chat admin, //use left or right to display which side the users image should be on side: 'left' }; ``` ## Tests npm test ## Contributing In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code. To build use grunt dist. To develop use grunt dev. Use a different branch and send a pull request to contribute. ## About This project is sponsered by [ITProTV](http://www.itpro.tv/) ## Release History [VERSION.MD](VERSION.md) --- _Source: https://npm.io/package/angular-ui-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._