@bcc-code/vue-bcc-chat-ui 1.6.2 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@bcc-code/vue-bcc-chat-ui",
3
3
  "author": "bcc-code",
4
4
  "license": "Apache-2.0",
5
- "version": "1.6.2",
5
+ "version": "1.6.3",
6
6
  "type": "module",
7
7
  "private": false,
8
8
  "files": [
@@ -1,7 +1,7 @@
1
1
  <script setup lang="ts">
2
2
  import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref } from "vue";
3
3
  import chat from "../chat";
4
- import { connect, disconnect } from "../chat/connection";
4
+ import { connect, disconnect, connected } from "../chat/connection";
5
5
  import { loggedIn } from "../chat/login";
6
6
 
7
7
  import {
@@ -61,18 +61,17 @@ onUnmounted(async () => {
61
61
  });
62
62
 
63
63
  watch(
64
- [loggedIn, chat.connection.connected, chat.initialized, () => props.chatUid],
64
+ [loggedIn, connected, chat.initialized, () => props.chatUid],
65
65
  () => {
66
66
  loadData();
67
67
  }
68
68
  );
69
69
 
70
- // Loads data if chat is connected
70
+ // Loads data if logged in
71
71
  const loadData = async () => {
72
72
  if (
73
73
  loggedIn.value &&
74
- chat.initialized.value &&
75
- chat.connection.connected.value
74
+ chat.initialized.value
76
75
  ) {
77
76
  initTemplates();
78
77
  if (props.chatUid) {
@@ -101,7 +100,7 @@ const messageListConfiguration: Ref<any> = ref(null);
101
100
 
102
101
  // Templates cannot be initialized before CometChat is initiazlied
103
102
  // CometChatUIKit.getDataSource().getAllMessageTemplates() will return null before cometchat is initialized
104
- // So we postpone overriding the templates until cometchat is connected
103
+ // So we postpone overriding the templates until cometchat is logged in
105
104
  let templatesInitialized = false;
106
105
  const initTemplates = () => {
107
106
  if (templatesInitialized) {
@@ -192,7 +191,11 @@ function getMessageListConfiguration(): MessageListConfiguration {
192
191
  :hideDetails="true"
193
192
  :group="chatGroup"
194
193
  />
194
+ <div v-if="!connected" class="bcc-chat-message-composer-offline">
195
+ <span>Offline</span>
196
+ </div>
195
197
  </div>
198
+ <div class="bcc-chat-message-list-offline"><span>Waiting for connection...</span></div>
196
199
  </template>
197
200
 
198
201
  <style lang="scss">
@@ -270,6 +273,42 @@ accent900: text in avatar
270
273
  border: 1px var(--cc__secondary) solid !important;
271
274
  }
272
275
  }
276
+ /* 2. Message for Messages Composer when offline */
277
+ .bcc-chat-message-composer-offline {
278
+ position: relative;
279
+ top: -96px;
280
+ height: 96px;
281
+ width: 100%;
282
+ box-sizing: border-box;
283
+ padding: 16px 14px;
284
+ color: rgb(176, 176, 176);
285
+ font: 700 1rem sans-serif;
286
+
287
+ /* 2.1 Text of Messages Composer offline view */
288
+ span {
289
+ width: 100%;
290
+ height: 100%;
291
+ display: flex;
292
+ justify-content: center;
293
+ align-items: center;
294
+ background: rgba(255,255,255,0.75);
295
+ border-radius: 12px;
296
+ }
297
+ }
298
+ }
299
+
300
+ .bcc-chat-message-list-offline {
301
+ position: absolute;
302
+ top: 0;
303
+ bottom: 0;
304
+ left: 0;
305
+ right: 0;
306
+ display: flex;
307
+ justify-content: center;
308
+ align-items: center;
309
+ font: 700 22px sans-serif;
310
+ color: #bcbcbc;
311
+ z-index: -1;
273
312
  }
274
313
 
275
314
  .cc-messagecomposer__emojikeyboard {