realmq · alrik · Apr 2, 2023
diff --git a/.env.tpl b/.env.tpl
@@ -2,4 +2,5 @@ PORT=8080
 AGENT_USERNAME=agent
 AGENT_PASSWORD=password
 REALMQ_TOKEN=
-REALMQ_HOST=
+REALMQ_HOST=realmq.com
+REALMQ_LOCAL_HOST_IP=
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ yarn-error.log
 public/*
 !public/.gitkeep
 .db
+.parcel-cache
diff --git a/README.md b/README.md
@@ -23,19 +23,19 @@ You can do that by sending an email to [email protected].
 First install dependencies:
 
 ```bash
-$ yarn
+$ npm i
 ```
 
 Build the vue apps (agent & chat-widget)
 
 ```bash
-$ yarn dist
+$ npm run dist
 ```
 
 Start the express app
 
 ```bash
-$ yarn start
+$ npm run start
 ```
 
 ## Configuration
@@ -46,13 +46,14 @@ The app can be configured via environment variables and/or `.env` file.
 $ cp .env.tpl .env
 ```
 
-| Env Var | Description | Default |
-|---------|---|---|
-| `REALMQ_TOKEN` | Realmq admin token for setup and managing clients, channels, messaging.<br>:point_right: This configuration variable is **REQUIRED** | - |
-| `REALMQ_HOST` | Can be set to custom realmq deployment. | - |
-| `PORT` | http port the server will listen to | **8080** |
-| `AGENT_USERNAME` | Username required to access `/agent` | **agent** |
-| `AGENT_PASSWORD` | Password of the agent user | **password** |
+| Env Var                | Description                                                                                                                          | Default      |
+|------------------------|--------------------------------------------------------------------------------------------------------------------------------------|--------------|
+| `REALMQ_TOKEN`         | Realmq admin token for setup and managing clients, channels, messaging.<br>:point_right: This configuration variable is **REQUIRED** | -            |
+| `REALMQ_HOST`          | Can be set to custom realmq deployment.                                                                                              | realmq.com   |
+| `PORT`                 | http port the server will listen to                                                                                                  | **8080**     |
+| `AGENT_USERNAME`       | Username required to access `/agent`                                                                                                 | **agent**    |
+| `AGENT_PASSWORD`       | Password of the agent user                                                                                                           | **password** |
+| `REALMQ_LOCAL_HOST_IP` | IP address of the realmq local host. This allows for using this repo against local realmq platform instance.                         | -            |
 
 ---
 

diff --git a/assets/js/agent.js b/assets/js/agent.js
diff --git a/assets/js/agent.mjs b/assets/js/agent.mjs
@@ -0,0 +1,19 @@
+'use strict';
+
+import {createApp} from 'vue';
+import ChatScroll from 'vue3-chat-scroll';
+import RealMQ from '@realmq/web-sdk';
+import App from './agent/app.vue';
+
+const appNode = document.getElementById('app');
+const realmq = new RealMQ(appNode.dataset.authToken, {
+  host: process.env.REALMQ_HOST,
+  autoSubscribe: true
+});
+const app = createApp(App, {
+  realmq,
+});
+
+app.use(ChatScroll);
+app.mount(appNode);
+
diff --git a/assets/js/agent/app.vue b/assets/js/agent/app.vue
@@ -33,10 +33,10 @@
 </template>
 
 <script>
-  var Chat = require('../components/chat.vue');
-  var moment = require('moment');
+  import Chat from '../components/chat.vue';
+  import moment from 'moment';
 
-  var loadAllChannels = function(realmq, callback, limit, offset, channels) {
+  const loadAllChannels = function(realmq, callback, limit, offset, channels) {
     limit = limit || 20;
     offset = offset || 0;
     channels = channels || [];
@@ -53,7 +53,7 @@
       });
   };
 
-  module.exports = {
+  export default {
     name: 'app',
     components: {
       chat: Chat
@@ -63,23 +63,23 @@
         required: true
       }
     },
-    data: function() {
+    data() {
       return {
         channels: [],
         chats: {},
         activeChat: null,
         userId: null
       }
     },
-    created: function() {
+    created() {
       this.loadUser();
       this.loadChannels();
       this.syncSubscriptions();
     },
     methods: {
-      loadChannels: function() {
-        var $data = this.$data;
-        var me = this;
+      loadChannels() {
+        const $data = this.$data;
+        const me = this;
 
         loadAllChannels(this.realmq, function (err, channels) {
           if (err) {
@@ -93,9 +93,9 @@
         });
       },
 
-      getChannelViewModel: function(channel) {
-        var channelName = (channel.properties || {}).name || channel.id;
-        var viewModel = {
+      getChannelViewModel(channel) {
+        const channelName = (channel.properties || {}).name || channel.id;
+        const viewModel = {
           id: channel.id,
           name: channelName.length > 30
             ? channelName.substr(0, 20) + '...'
@@ -108,14 +108,14 @@
         return viewModel;
       },
 
-      onSubscriptionUpdated: function(subscription) {
-        var me = this;
-        var channels = this.channels;
-        var channelId = subscription.channelId;
+      onSubscriptionUpdated(subscription) {
+        const me = this;
+        const channels = this.channels;
+        const channelId = subscription.channelId;
 
         this.realmq.channels.retrieve(channelId)
           .then(function(channel) {
-            var existentChannel = channels.find(function(channel) {
+            let existentChannel = channels.find(function(channel) {
               return channel.id === channelId;
             });
 
@@ -126,17 +126,17 @@
           });
       },
 
-      onSubscriptionRemoved: function(subscription) {
-        var channelId = subscription.channelId;
-        var channelIndex = this.channels.findIndex(function(channel) {
+      onSubscriptionRemoved(subscription) {
+        const channelId = subscription.channelId;
+        const channelIndex = this.channels.findIndex(function(channel) {
           return channel.id === channelId;
         })
 
         if (channelIndex > -1) {
           this.channels.splice(channelIndex, 1);
         }
 
-        var chat = this.chats[channelId];
+        const chat = this.chats[channelId];
 
         if (chat) {
           delete this.$data.chats[channelId];
@@ -147,25 +147,25 @@
         }
       },
 
-      syncSubscriptions: function() {
-        var rtm = this.realmq.rtm;
+      syncSubscriptions() {
+        const rtm = this.realmq.rtm;
 
         rtm.on('subscription-created', this.onSubscriptionUpdated.bind(this));
         rtm.on('subscription-updated', this.onSubscriptionUpdated.bind(this));
         rtm.on('subscription-deleted', this.onSubscriptionRemoved.bind(this));
       },
 
-      loadUser: function() {
-        var $data = this.$data;
+      loadUser() {
+        const $data = this.$data;
 
         this.realmq.me.user.retrieve().then(function(user) {
           $data.userId = user.id;
         });
       },
 
-      activateChannel: function(channel) {
-        var chats = this.$data.chats;
-        var chatId = channel.id;
+      activateChannel(channel) {
+        const chats = this.$data.chats;
+        const chatId = channel.id;
 
         if (!chats[chatId]) {
           chats[chatId] = {

diff --git a/assets/js/components/chat.vue b/assets/js/components/chat.vue
@@ -6,9 +6,11 @@
           <div class="rmq-message" :class="{'rmq-is-me': isMyMessage(message), 'rmq-is-them': !isMyMessage(message)}">
             <div class="rmq-message-sender"></div>
             <div class="rmq-message-body">
-              <div v-for="part in message.content" v-if="part.text">
-                {{part.text}}
-              </div>
+              <template v-for="part in message.content">
+                <div v-if="part.text">
+                  {{part.text}}
+                </div>
+              </template>
               <div class="rmq-message-date" :title="moment(message.ts).format('LLL')">
                 {{moment(message.ts).fromNow()}}
               </div>
@@ -29,9 +31,9 @@
   </div>
 </template>
 <script>
-  var moment = require('moment');
+  import moment from 'moment';
 
-  module.exports = {
+  export default {
     name: "widget-chat",
     props: {
       realmq: {
@@ -44,17 +46,17 @@
         required: true
       }
     },
-    data: function() {
+    data() {
       return {
         isConnected: false,
         messages: [],
         messageInput: ''
       };
     },
-    created: function() {
-      var realmq = this.realmq;
-      var $data = this.$data;
-      var me = this;
+    created() {
+      const realmq = this.realmq;
+      const $data = this.$data;
+      const me = this;
 
       realmq.rtm.on('connected', function() {
         $data.isConnected = true;
@@ -83,31 +85,31 @@
     },
 
     methods: {
-      moment: function(ts) {
+      moment(ts) {
         return moment(ts);
       },
 
-      onMessage: function(message) {
+      onMessage(message) {
         if (!this.validateChatMessage(message.data)) {
           console.warn('Ignoring invalid message', message);
           return;
         }
         this.messages.push(message.data);
       },
 
-      validateChatMessage: function(message) {
+      validateChatMessage(message) {
         return message
           && message.type === 'message' && message.ts
           && message.from && message.from.userId
           && message.content;
       },
 
-      isMyMessage: function(message) {
+      isMyMessage(message) {
         return message.from.userId === this.userId;
       },
 
-      onMessageSubmit: function() {
-        var message = this.messageInput.trim();
+      onMessageSubmit() {
+        const message = this.messageInput.trim();
 
         if (message) {
           this.realmq.rtm.publish({
@@ -119,15 +121,15 @@
         }
       },
 
-      onMessageInputKeyDown: function(event) {
+      onMessageInputKeyDown(event) {
         if (event.keyCode === 13 && !event.shiftKey) {
           this.onMessageSubmit();
           event.preventDefault();
           return false;
         }
       },
 
-      _assembleMessage: function(text) {
+      _assembleMessage(text) {
         return {
           type: 'message',
           ts: (new Date).toISOString(),
@@ -140,8 +142,8 @@
         };
       },
 
-      loadPersistedMessages: function() {
-        var me = this;
+      loadPersistedMessages() {
+        const me = this;
 
         this.realmq.messages.list({
           channel: this.channel,
@@ -194,10 +196,9 @@
       background: $white;
       border: none;
       width: calc(100% - #{$navHeight});
-      padding: .5rem;
       resize: none;
       overflow: scroll;
-      padding-top: ($navHeight/2) - 8;
+      padding: ($navHeight/2) - 8 .5rem .5rem;
       font-weight: 300;
       font-family: $font-sans-serif;
       font-size: 16px;

diff --git a/assets/js/widget.js b/assets/js/widget.js