@bcc-code/vue-bcc-chat-ui 3.0.0-alpha.5 → 3.0.0-alpha.7
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 +3844 -3846
- package/package.json +1 -1
- package/src/components/BccChatMessageList.vue +29 -9
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,19 +133,18 @@ 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 v-else-if="chat.
|
|
124
|
-
<span>
|
|
142
|
+
<div v-else-if="!chat.connected.value" class="bcc-chat-message-list-offline">
|
|
143
|
+
<span>Connecting...</span>
|
|
125
144
|
</div>
|
|
126
|
-
<div v-else-if="
|
|
145
|
+
<div v-else-if="!chatGroup" class="bcc-chat-message-list-offline">
|
|
127
146
|
<span>Loading chat...</span>
|
|
128
147
|
</div>
|
|
129
|
-
<div v-else-if="chat.onlineMode.value === 'offline'" class="bcc-chat-message-list-offline">
|
|
130
|
-
<span>Waiting for network...</span>
|
|
131
|
-
</div>
|
|
132
148
|
<div v-else class="bcc-chat-message-list-offline">
|
|
133
149
|
<span>Loading...</span>
|
|
134
150
|
</div>
|
|
@@ -216,6 +232,10 @@ accent900: text in avatar
|
|
|
216
232
|
}
|
|
217
233
|
}
|
|
218
234
|
|
|
235
|
+
.cc-messagebubble-wrapper__container {
|
|
236
|
+
max-width: 80%;
|
|
237
|
+
}
|
|
238
|
+
|
|
219
239
|
.cc-messagebubble-wrapper__messageoptions {
|
|
220
240
|
border-radius: 8px;
|
|
221
241
|
.cc-context-menu__top-menu {
|