{"id":19428,"date":"2019-04-16T04:38:33","date_gmt":"2019-04-16T11:38:33","guid":{"rendered":"https:\/\/www.exoplatform.com\/blog\/?p=19428"},"modified":"2023-06-05T16:06:16","modified_gmt":"2023-06-05T14:06:16","slug":"exo-platform-5-2-extend-the-chat-application","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/exo-platform-5-2-extend-the-chat-application\/","title":{"rendered":"eXo Platform 5.2: Extend the Chat application!"},"content":{"rendered":"<p>In <strong>eXo Platform 5.2<\/strong> we have <strong>made the chat application more extensible<\/strong>. In this article we will show you how to use these new capabilities.<\/p>\n<h2>Extension points<\/h2>\n<p>Several extension points are now available in the <strong>Chat application<\/strong>:<\/p>\n<ul>\n<li>Message composer application:<\/li>\n<\/ul>\n<p>&#8211; new applications can be integrated into the message composer in addition to the default ones (new event, upload file, assign task, etc.)<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19430 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2.png\" alt=\"Message composer applications on eXo Platform 5.2\" width=\"877\" height=\"212\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2.png 877w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-300x73.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-768x186.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-720x174.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-500x121.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-360x87.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-200x48.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-100x24.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-composer-eXo-Platform-5-2-70x17.png 70w\" sizes=\"(max-width: 877px) 100vw, 877px\" \/><\/p>\n<ul>\n<li>Message types<\/li>\n<\/ul>\n<p>&#8211; new types of messages can be added, allowing you to define specific layouts.<\/p>\n<ul>\n<li>Message notifications<\/li>\n<\/ul>\n<p>&#8211; new message notifications can be added, allowing you to define specific layouts.<\/p>\n<ul>\n<li>Message actions<\/li>\n<\/ul>\n<p>&#8211; new actions can be added in the contextual menu of a message in addition to the default ones (Edit message, Delete, Quote and Save notes.).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19431 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2.png\" alt=\"Message Actions on eXo Platform 5.2\" width=\"437\" height=\"212\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2.png 437w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2-300x146.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2-360x175.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2-200x97.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2-100x49.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/message-actions-eXo-Platform-5-2-62x30.png 62w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/><\/p>\n<ul>\n<li>Room actions<\/li>\n<\/ul>\n<p>&#8211; new actions can be added in the contextual menu of a room in addition to the default ones (Add to Favorites, Edit, Delete, etc.)<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19432 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2.png\" alt=\"Room Actions on eXo Platform 5.2\" width=\"342\" height=\"271\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2.png 342w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2-300x238.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2-298x236.png 298w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2-165x131.png 165w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2-100x79.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-actions-eXo-Platform-5-2-38x30.png 38w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/p>\n<h2>Our first chat extension<\/h2>\n<p><strong>Note<\/strong><\/p>\n<p>The examples in this article use ES6 or Vue features, which require Webpack (or any other tool) to work correctly in all browsers. This article does not aim to explain how to configure Webpack. Please refer to the source code of this extension for a full example configured with NPM+Webpack.<\/p>\n<p>Let\u2019s create a new extension in order to add a new <strong>message composer application<\/strong>.<\/p>\n<p>The first step is to create an empty extension as described <a href=\"https:\/\/docs.exoplatform.org\/en\/5.2\/Dev_eXo_Addons.html#creating-a-portal-extension\" class=\"broken_link\" target=\"_blank\" rel=\"noopener\">in the documentation<\/a>. Once done, we need to add a new javascript file called <strong>MyChatPlugin.js<\/strong>. It will contain the code used to add the <strong>new message composer application<\/strong>.<\/p>\n<p>Let\u2019s fill our javascript file with the following content:<\/p>\n<pre class=\"lang:default decode:true\">requirejs(['SHARED\/extensionRegistry'], function(extensionRegistry) {\n extensionRegistry.registerExtension('chat', 'composer-application', chatMyComposerAppPlugin);\n});\n\nconst chatMyComposerAppPlugin = {\n key: 'my',\n rank: 70,\n type: 'type-my',\n nameKey: 'exoplatform.chat.my.name',\n labelKey: 'My Chat Plugin',\n iconClass: 'uiIconChatMy',\n html: function() {\n   \/\/ return html of the popup displayed when clicking the action\n   return 'My Chat Composer Application plugin';\n },\n submit: function() {\n   \/\/ function executed when the submit button of the popup is clicked, after the validate method\n   message = {\n     msg : 'My message ! (sent on ' + new Date() + ')',\n     room : contact.room,\n     clientId: new Date().getTime().toString(),\n     user: eXo.chat.userSettings.username,\n     timestamp: Date.now()\n   };\n\n   \/\/ send the message by dispatching the event exo-chat-message-tosend-requested\n   document.dispatchEvent(new CustomEvent('exo-chat-message-tosend-requested', {'detail' : message}));\n\n   return {hide: true};\n }\n};\n<\/pre>\n<p>This basic example:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">adds an action called \u201cMy Chat Plugin\u201d in the composer actions list<\/li>\n<li style=\"font-weight: 400;\">displays a popup containing the text &nbsp;\u201c<strong>My Chat Composer Application Plugin<\/strong>\u201d when clicking on this new action<\/li>\n<li style=\"font-weight: 400;\">sends a message when clicking on the primary button of the popup and hides the popup.<\/li>\n<\/ul>\n<p>The new API <strong>ExtensionRegistry.registerExtension<\/strong> is used to register the extension. It takes three arguments:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">the name of the target application of the extension, here \u201c<strong>chat<\/strong>\u201d<\/li>\n<li style=\"font-weight: 400;\">the type of the extension, here \u201c<strong>composer-application<\/strong>\u201d<\/li>\n<li style=\"font-weight: 400;\">the extension definition<\/li>\n<\/ul>\n<p>The extension definition is an object composed of properties and methods to define its content and its behaviour:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">key: unique key for the extension<\/li>\n<li style=\"font-weight: 400;\">rank: rank in the list of composer applications<\/li>\n<li style=\"font-weight: 400;\">type: unique type of the extension<\/li>\n<li style=\"font-weight: 400;\">nameKey: unique key for the extension name<\/li>\n<li style=\"font-weight: 400;\">labelKey: key for the label (to define translations)<\/li>\n<li style=\"font-weight: 400;\">iconClass: CSS class to use for the application icon<\/li>\n<li style=\"font-weight: 400;\">html: function which returns the html of the popup displayed when clicking the action<\/li>\n<li style=\"font-weight: 400;\">submit: function executed when the submit button of the popup is clicked, and after the validate method has been executed<\/li>\n<\/ul>\n<p>More properties and methods are available for this extension, please refer to the documentation for more details.<\/p>\n<p>In order to insert this script into the chat application, it must be declared in a file called <strong>gatein-resources.xml<\/strong> inside the <strong>WEB-INF<\/strong> folder:<\/p>\n<pre class=\"lang:default decode:true\">&lt;?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?&gt;\n\n&lt;gatein-resources xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n  xsi:schemaLocation=\"http:\/\/www.exoplatform.org\/xml\/ns\/gatein_resources_1_4 http:\/\/www.exoplatform.org\/xml\/ns\/gatein_resources_1_4\"\n  xmlns=\"http:\/\/www.exoplatform.org\/xml\/ns\/gatein_resources_1_4\"&gt;\n\n &lt;javascript&gt;\n   &lt;param&gt;\n     &lt;js-module&gt;myChatPlugin&lt;\/js-module&gt;\n     &lt;js-path&gt;\/js\/MyChatPlugin.js&lt;\/js-path&gt;\n   &lt;\/param&gt;\n &lt;\/javascript&gt;\n\n&lt;\/gatein-resources&gt;<\/pre>\n<p>We are now done. Build your project and deploy the war file in your eXo server. You should now have a new item in the composer applications:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19433 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1.png\" alt=\"Chat extension on eXo Platform 5.2\" width=\"863\" height=\"231\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1.png 863w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-300x80.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-768x206.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-720x193.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-500x134.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-360x96.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-200x54.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-100x27.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-extension-eXo-Platform-5-2-1-70x19.png 70w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/>Clicking on the new item displays a popup with the message \u201c<strong>My Chat Composer Application Plugin<\/strong>\u201d, and clicking on the \u201c<strong>Post<\/strong>\u201d button sends the message.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-19434\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2.png\" alt=\"My Chat Composer Application plugin on eXo Platform 5.2\" width=\"796\" height=\"77\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2.png 796w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-300x29.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-768x74.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-720x70.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-500x48.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-360x35.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-200x19.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-100x10.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/chat-composer-plugin-eXo-Platform-5-2-70x7.png 70w\" sizes=\"(max-width: 796px) 100vw, 796px\" \/><\/p>\n<h2>Adding a room action<\/h2>\n<p>We will try another extension capability by adding a new action in the room\u2019s actions. In the same way as for the <strong>new composer application<\/strong>, the extension registry API must be used to register the new action. The following example adds an action \u201c<strong>Who is admin?<\/strong>\u201d, which prints the room administrators when clicked:<\/p>\n<pre class=\"lang:default decode:true\">requirejs(['SHARED\/extensionRegistry'], function(extensionRegistry) {\n extensionRegistry.registerExtension('chat', 'room-action', newAction);\n});\n\n\/\/ define the new action\nconst newAction = {\n key: 'whoIsAdmin',\n labelKey: 'Who is admin ?',\n class: 'uiIconAdmin',\n type: 't',\n enabled: function() {\n   return true;\n }\n};\n\ndocument.addEventListener('exo-chat-setting-whoIsAdmin-requested', function(room) {\n const message = {\n   msg : 'Administrator of this room is: ' + room.detail.admins.join(),\n   room : room.detail.room,\n   clientId: new Date().getTime().toString(),\n   user: eXo.chat.userSettings.username,\n   timestamp: Date.now()\n };\n\n \/\/ send the message by dispatching the event exo-chat-message-tosend-requested\n document.dispatchEvent(new CustomEvent('exo-chat-message-tosend-requested', {'detail' : message}));\n});\n<\/pre>\n<p>The extension object is simple. Beyond the classic properties (key, labelKey, class), the function \u201c<strong>enabled<\/strong>\u201d can be provided to decide if the room action must be displayed or not. In the example this function returns true so it is always displayed.<\/p>\n<p>The click on the new action is handled by the event <strong>exo-chat-setting-&lt;actionKey&gt;-requested<\/strong> (so, <strong>exo-chat-setting-whoIsAdmin-requested<\/strong> in this example). Here we add a listener on this event to send a message which gives the room administrator.<\/p>\n<p>Once deployed, the new action appears in the <strong>room actions<\/strong>:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19435 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2.png\" alt=\"Adding Room Action on eXo Platform 5.2\" width=\"210\" height=\"298\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2.png 210w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2-166x236.png 166w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2-92x131.png 92w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2-63x90.png 63w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/adding-room-action-eXo-Platform-5-2-21x30.png 21w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/p>\n<p>And when clicked, a message is sent in the room giving the name of the room administrator:<\/p>\n<h2><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-19436\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/room-administrator.png\" alt=\"\" width=\"797\" height=\"68\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator.png 797w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-300x26.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-768x66.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-720x61.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-500x43.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-360x31.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-200x17.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-100x9.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/room-administrator-70x6.png 70w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/>Overriding a component<\/h2>\n<p>In addition to these extension points, all the Vue components of the <strong>Chat application<\/strong> can be overridden. This allows customisation of almost everything in the application but it comes with a drawback: all overridden components must be checked against their original version when upgrading <a href=\"https:\/\/www.exoplatform.com\/?utm_source=BlogEn&amp;utm_medium=Blog&amp;utm_campaign=Content&amp;utm_content=link\">eXo Platform<\/a> to merge possible changes.<\/p>\n<p>As for other extension points, the extension registry API must be used to register the custom component. This time we will use the <strong>ExtensionRegistry.registerComponent<\/strong> method, which accepts the following three arguments:<\/p>\n<ul>\n<li style=\"font-weight: 400;\">the name of the target application of the extension<\/li>\n<li style=\"font-weight: 400;\">the name of the component to override<\/li>\n<li style=\"font-weight: 400;\">the custom component<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">import ExoModalCustomized from '.\/ExoModalCustomized.vue';\n\nrequirejs(['SHARED\/extensionRegistry'], function(extensionRegistry) {\n extensionRegistry.registerComponent('chat', 'exo-modal', ExoModalCustomized);\n});\n<\/pre>\n<p>In this example we override the component <strong>exo-modal<\/strong> of the <strong>chat<\/strong> <strong>application<\/strong>. The imported Vue file is the new version of the component.<\/p>\n<pre class=\"lang:default decode:true\">&lt;template&gt;\n &lt;div class=\"chat-modal-mask uiPopupWrapper\"&gt;\n   &lt;div :class=\"modalClass\" class=\"uiPopup chat-modal\"&gt;\n     &lt;div class=\"popupHeader\"&gt;\n       &lt;span class=\"PopupTitle popupTitle\"&gt;{{ title }}&lt;\/span&gt;\n       &lt;a v-if=\"displayClose\" class=\"uiIconClose pull-right\" @click=\"closeModal\"&gt;&lt;\/a&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"PopupContent popupContent\"&gt;\n       &lt;div style=\"color: red;text-align: center;font-size: 14pt;\"&gt;Overridden template !&lt;\/div&gt;\n       &lt;slot&gt;&lt;\/slot&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n props: {\n   displayClose: {\n     type: Boolean,\n     default: true\n   },\n   title: {\n     type: String,\n     default: ''\n   },\n   modalClass: {\n     type: String,\n     default: ''\n   }\n },\n methods: {\n   closeModal() {\n     \/\/ Emit the click event of close icon\n     this.$emit('modal-closed');\n   }\n }\n};\n&lt;\/script&gt;\n<\/pre>\n<p>We have added text in the HTML part to show the customisation, as you can see in the result:<\/p>\n<h2><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-19437 aligncenter\" src=\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2.png\" alt=\"Overriding a component on eXo Platform 5.2\" width=\"737\" height=\"364\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2.png 737w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-300x148.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-720x356.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-500x247.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-360x178.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-200x99.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-100x49.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2019\/04\/overriding-compnent-eXo-Platform-5-2-61x30.png 61w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/>Sources<\/h2>\n<p>Examples from this article are available <a href=\"https:\/\/github.com\/thomasdelhomenie\/exo-chat-extension-sample\" target=\"_blank\" rel=\"noopener\">here<\/a>, all gathered in a single plugin, and configured with <strong>Webpack<\/strong> and <strong>NPM<\/strong>.<\/p>\n<p>Now it is your turn to implement your great ideas to enhance the <strong>Chat application<\/strong> with this new API. Please try it and give us your feedback!<\/p>\n<p>&nbsp;<\/p>\n<div>\n<div class=\"adv-events\" style=\"background: #476fad; padding: 30px 20px; color: white;\">\n<div class=\"media\">\n<div class=\"pull-right\"><a href=\"https:\/\/community.exoplatform.com\/portal\/intranet\/\" target=\"_blank\" rel=\"noopener\"><br \/>\n<img decoding=\"async\" class=\"size-full wp-image-6587 alignright\" style=\"border: none;\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/02\/tribe.png\" alt=\"Join The eXo Tribe\" height=\"120px\"><\/a><\/div>\n<div class=\"media-body\">\n<h4 class=\"media-heading\"><a href=\"https:\/\/community.exoplatform.com\/portal\/intranet\/\" target=\"_blank\" rel=\"noopener\">Join The eXo Tribe<\/a><\/h4>\n<p><a href=\"https:\/\/community.exoplatform.com\/portal\/intranet\/\" target=\"_blank\" rel=\"noopener\"><br \/>\nRegister for our Community to Get updates, tutorials, support, and access to the Platform and add-on downloads. <strong>Sign in Now!<\/strong><br \/>\n<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"In eXo Platform 5.2 we have made the chat application more extensible. In this article we will show you how to use these new capabilities. Extension points Several extension points are now available in the Chat application: Message composer application: &#8211; new applications can be integrated into the message composer in addition to the default [&hellip;]","protected":false},"author":64,"featured_media":23354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":[],"categories":[819],"tags":[606,827],"lang":"en","translations":{"en":19428},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/19428"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=19428"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/19428\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=19428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=19428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=19428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}