@bcc-code/vue-bcc-chat-ui 3.0.0-alpha.3 → 3.0.0-alpha.6
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/dist/style.css +1 -1
- package/dist/vue-bcc-chat-ui.js +3301 -3283
- package/package.json +1 -1
- package/src/components/BccChatMessageList.vue +34 -6
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
onUnmounted,
|
|
6
6
|
ref,
|
|
7
7
|
watch,
|
|
8
|
+
watchEffect,
|
|
8
9
|
} from "vue";
|
|
9
10
|
import chat from "../chat";
|
|
10
11
|
import { connect, disconnect } from "../chat/connection";
|
|
@@ -40,6 +41,21 @@ watch(chat.onlineStatus, async () => {
|
|
|
40
41
|
await tryConnect(false);
|
|
41
42
|
});
|
|
42
43
|
|
|
44
|
+
const showChat = ref(false);
|
|
45
|
+
watchEffect(() => {
|
|
46
|
+
if (chatGroup && (chat.connected.value || chat.onlineStatus.value == 'offline')){
|
|
47
|
+
showChat.value = true;
|
|
48
|
+
} else {
|
|
49
|
+
// This line is a trade-off.
|
|
50
|
+
// With it, the entire chat will be hidden and then reloaded when a connection is being established.
|
|
51
|
+
// The advantage is that the chat should then scroll to the latest message after reconnecting.
|
|
52
|
+
// Without it, the chat window won't reload. New messages should still be loaded, but the chat won't scroll down.
|
|
53
|
+
// The advantage with removing this line would be that half finished messages that were being composed when the user went offline
|
|
54
|
+
// wouldn't be lost...
|
|
55
|
+
showChat.value = false;
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
|
|
43
59
|
async function tryConnect(force: boolean) {
|
|
44
60
|
if (chat.onlineStatus.value === "online" || force) {
|
|
45
61
|
await connect(componentId.value);
|
|
@@ -105,8 +121,9 @@ onUnmounted(async () => {
|
|
|
105
121
|
|
|
106
122
|
<template>
|
|
107
123
|
<div class="bcc-chat-message-list-wrapper">
|
|
108
|
-
<div v-if="
|
|
109
|
-
|
|
124
|
+
<div v-if="showChat" class="bcc-chat-message-list">
|
|
125
|
+
|
|
126
|
+
<CometChatMessages
|
|
110
127
|
:hideMessageHeader="true"
|
|
111
128
|
:disableSoundForMessages="true"
|
|
112
129
|
:messageComposerConfiguration="messageComposerConfiguration"
|
|
@@ -116,12 +133,20 @@ onUnmounted(async () => {
|
|
|
116
133
|
:hideDetails="true"
|
|
117
134
|
:group="chatGroup"
|
|
118
135
|
/>
|
|
136
|
+
|
|
119
137
|
<div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value" class="bcc-chat-message-composer-offline">
|
|
120
|
-
<span>Waiting for
|
|
138
|
+
<span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
|
|
139
|
+
<span v-else>Connecting...</span>
|
|
121
140
|
</div>
|
|
122
141
|
</div>
|
|
123
|
-
<div class="bcc-chat-message-list-offline">
|
|
124
|
-
<span>
|
|
142
|
+
<div v-else-if="!chat.connected.value" class="bcc-chat-message-list-offline">
|
|
143
|
+
<span>Connecting...</span>
|
|
144
|
+
</div>
|
|
145
|
+
<div v-else-if="!chatGroup" class="bcc-chat-message-list-offline">
|
|
146
|
+
<span>Loading chat...</span>
|
|
147
|
+
</div>
|
|
148
|
+
<div v-else class="bcc-chat-message-list-offline">
|
|
149
|
+
<span>Loading...</span>
|
|
125
150
|
</div>
|
|
126
151
|
</div>
|
|
127
152
|
</template>
|
|
@@ -207,6 +232,10 @@ accent900: text in avatar
|
|
|
207
232
|
}
|
|
208
233
|
}
|
|
209
234
|
|
|
235
|
+
.cc-messagebubble-wrapper__container {
|
|
236
|
+
max-width: 80%;
|
|
237
|
+
}
|
|
238
|
+
|
|
210
239
|
.cc-messagebubble-wrapper__messageoptions {
|
|
211
240
|
border-radius: 8px;
|
|
212
241
|
.cc-context-menu__top-menu {
|
|
@@ -246,7 +275,6 @@ accent900: text in avatar
|
|
|
246
275
|
align-items: center;
|
|
247
276
|
font: 700 22px sans-serif;
|
|
248
277
|
color: #bcbcbc;
|
|
249
|
-
z-index: -1;
|
|
250
278
|
}
|
|
251
279
|
|
|
252
280
|
.cc-messagecomposer__emojikeyboard {
|