@bcc-code/vue-bcc-chat-ui 3.40.0 → 3.40.2

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.
Files changed (9) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/vue-bcc-chat-ui.js +5901 -5907
  3. package/dist/vue-bcc-chat-ui.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/BccChatMessageList.vue +33 -29
  6. package/src/components/BccScheduledMessageModal.vue +19 -19
  7. package/src/components/BccScheduledMessages.vue +9 -13
  8. package/dist/components/CometChatMessageListOverride.vue.d.ts +0 -2
  9. package/src/components/CometChatMessageListOverride.vue +0 -30
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": "3.40.0",
5
+ "version": "3.40.2",
6
6
  "type": "module",
7
7
  "private": false,
8
8
  "files": [
package/src/components/BccChatMessageList.vue CHANGED
@@ -2,7 +2,6 @@
2
2
  import {
3
3
  PropType,
4
4
  Ref,
5
- onBeforeMount,
6
5
  onBeforeUnmount,
7
6
  onMounted,
8
7
  onUnmounted,
@@ -68,7 +67,11 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
68
67
 
69
68
  watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _chatUid, _initialized, _groupMessageGetter]) => {
70
69
  if (_loggedIn && _chatUid && _initialized) {
71
- chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
70
+ const [_, group] = await Promise.all([
71
+ connect(componentId.value),
72
+ chat.getGroup(props.chatUid)
73
+ ])
74
+ chatGroup.value = group ?? undefined;
72
75
 
73
76
  if (_groupMessageGetter && !chatGroup.value?.getHasJoined()) {
74
77
  chat.updateGetGroupMessages(_groupMessageGetter)
@@ -91,9 +94,6 @@ watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessage
91
94
  }
92
95
  }, { immediate: true });
93
96
 
94
- onBeforeMount(() => {
95
- connect(componentId.value);
96
- });
97
97
 
98
98
 
99
99
  onMounted(() => {
@@ -166,10 +166,12 @@ body {
166
166
  background: #fff;
167
167
  color: #000;
168
168
 
169
- @media (prefers-color-scheme: dark) {
170
- background: #000;
171
- color: #fff;
172
- }
169
+
170
+ }
171
+
172
+ :host.dark body {
173
+ background: #000;
174
+ color: #fff;
173
175
  }
174
176
 
175
177
  .bcc-chat-message-list-wrapper {
@@ -189,7 +191,6 @@ accent900: text in avatar
189
191
  */
190
192
 
191
193
  .bcc-chat-message-list {
192
- height: 100%;
193
194
  --cc__primary: #cfeac8;
194
195
  --cc__primary150: #004e48;
195
196
  --cc__background: #f3faf7;
@@ -207,27 +208,30 @@ accent900: text in avatar
207
208
  --cc__accent900: #f3faf7;
208
209
  --cc__text-color: #000;
209
210
  --cc__link-color: #57639e;
211
+ }
210
212
 
211
- @media (prefers-color-scheme: dark) {
212
- --cc__primary: #57639e;
213
- --cc__primary150: #57639e;
214
- --cc__background: hsl(230, 25%, 15%);
215
- --cc__secondary: #111827;
216
- --cc__accent: #6274ae;
217
- --cc__accent50: rgba(98, 116, 174, 0.24);
218
- --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
219
- --cc__accent200: rgba(98, 116, 174, 0.35);
220
- --cc__accent300: rgba(98, 116, 174, 0.44);
221
- --cc__accent400: rgba(98, 116, 174, 0.53);
222
- --cc__accent500: rgba(98, 116, 174, 0.66);
223
- --cc__accent600: #758abc;
224
- --cc__accent700: #6274ae;
225
- --cc__accent800: rgba(98, 116, 174, 0.92);
226
- --cc__accent900: #f3faf7;
227
- --cc__text-color: #fff;
228
- --cc__link-color: #cfeac8;
229
- }
213
+ :root.dark .bcc-chat-message-list {
214
+ --cc__primary: #57639e;
215
+ --cc__primary150: #57639e;
216
+ --cc__background: hsl(230, 25%, 15%);
217
+ --cc__secondary: #111827;
218
+ --cc__accent: #6274ae;
219
+ --cc__accent50: rgba(98, 116, 174, 0.24);
220
+ --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
221
+ --cc__accent200: rgba(98, 116, 174, 0.35);
222
+ --cc__accent300: rgba(98, 116, 174, 0.44);
223
+ --cc__accent400: rgba(98, 116, 174, 0.53);
224
+ --cc__accent500: rgba(98, 116, 174, 0.66);
225
+ --cc__accent600: #758abc;
226
+ --cc__accent700: #6274ae;
227
+ --cc__accent800: rgba(98, 116, 174, 0.92);
228
+ --cc__accent900: #f3faf7;
229
+ --cc__text-color: #fff;
230
+ --cc__link-color: #cfeac8;
231
+ }
230
232
 
233
+ .bcc-chat-message-list {
234
+ height: 100%;
231
235
  /* 1. Wrapper for Messages component */
232
236
  .cc-messages-wrapper {
233
237
 
package/src/components/BccScheduledMessageModal.vue CHANGED
@@ -84,26 +84,26 @@ function scheduleMessage() {
84
84
  --cc__accent900: #f3faf7;
85
85
  --cc__text-color: #000;
86
86
  --cc__link-color: #57639e;
87
+ }
87
88
 
88
- @media (prefers-color-scheme: dark) {
89
- --cc__primary: #57639e;
90
- --cc__primary150: #57639e;
91
- --cc__background: hsl(230, 25%, 15%);
92
- --cc__secondary: #111827;
93
- --cc__accent: #6274ae;
94
- --cc__accent50: rgba(98, 116, 174, 0.24);
95
- --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
96
- --cc__accent200: rgba(98, 116, 174, 0.35);
97
- --cc__accent300: rgba(98, 116, 174, 0.44);
98
- --cc__accent400: rgba(98, 116, 174, 0.53);
99
- --cc__accent500: rgba(98, 116, 174, 0.66);
100
- --cc__accent600: #758abc;
101
- --cc__accent700: #6274ae;
102
- --cc__accent800: rgba(98, 116, 174, 0.92);
103
- --cc__accent900: #f3faf7;
104
- --cc__text-color: #fff;
105
- --cc__link-color: #cfeac8;
106
- }
89
+ :root.dark {
90
+ --cc__primary: #57639e;
91
+ --cc__primary150: #57639e;
92
+ --cc__background: hsl(230, 25%, 15%);
93
+ --cc__secondary: #111827;
94
+ --cc__accent: #6274ae;
95
+ --cc__accent50: rgba(98, 116, 174, 0.24);
96
+ --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
97
+ --cc__accent200: rgba(98, 116, 174, 0.35);
98
+ --cc__accent300: rgba(98, 116, 174, 0.44);
99
+ --cc__accent400: rgba(98, 116, 174, 0.53);
100
+ --cc__accent500: rgba(98, 116, 174, 0.66);
101
+ --cc__accent600: #758abc;
102
+ --cc__accent700: #6274ae;
103
+ --cc__accent800: rgba(98, 116, 174, 0.92);
104
+ --cc__accent900: #f3faf7;
105
+ --cc__text-color: #fff;
106
+ --cc__link-color: #cfeac8;
107
107
  }
108
108
 
109
109
  .modal {
package/src/components/BccScheduledMessages.vue CHANGED
@@ -74,7 +74,7 @@ onUnmounted(() => {
74
74
  <template>
75
75
  <div class="bcc-chat-message-list">
76
76
  <div class="title-bar">
77
- <p class="chatName"> {{ localize("SCHEDULED_MESSAGES") }} </p>
77
+ <p class="title"> {{ localize("SCHEDULED_MESSAGES") }} </p>
78
78
  <CloseIcon @click="closeList()" class="closeIcon" />
79
79
  </div>
80
80
  <div v-if="chatGroup" class="bcc-chat-message-list scheduled-list">
@@ -99,25 +99,21 @@ onUnmounted(() => {
99
99
  </div>
100
100
  </template>
101
101
 
102
- <style>
102
+ <style scoped>
103
103
  .title-bar {
104
104
  display: flex;
105
- background: var(--cc__accent200, #111827);
106
- min-height: 40px;
107
- padding: 5px;
105
+ align-items: center;
106
+ justify-content: space-between;
107
+ background: var(--cc__secondary, #111827);
108
+ padding: 0.4rem 0.6rem;
108
109
 
109
- .chatName {
110
- width: 92%;
111
- font-size: large;
112
- vertical-align: middle;
113
- margin-top: 4px;
114
- margin-left: 6px;
110
+
111
+ .title {
115
112
  color: var(--cc__text-color);
116
113
  }
117
114
 
118
115
  .closeIcon {
119
- max-height: 35px;
120
- width: 8%;
116
+ width: 1.2rem;
121
117
  cursor: pointer;
122
118
  color: var(--cc__text-color);
123
119
  }
package/dist/components/CometChatMessageListOverride.vue.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
2
- export default _default;
package/src/components/CometChatMessageListOverride.vue DELETED
@@ -1,30 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue';
3
- import { useAttrs } from 'vue';
4
- import { CometChatMessageList } from "@cometchat/chat-uikit-vue";
5
- import chat from "../chat";
6
-
7
- // The purpose of this file is to force the component to be "reloaded" when switching between online and offline vue. I.e. so that messages will be loaded again
8
- // AND the user scrolled to the bottom when coming online. The default implementation has issues with scrolling the user to the bottom in some cases.
9
-
10
- // The reason for doing this for the CometChatMessageList specifically(instead of the whole chat window) is to avoid losing messages that the user may
11
- // have started writing in the chat box before going offline.
12
-
13
-
14
- const attrs = useAttrs();
15
-
16
- // Work-around to avoid id being set to the wrong ID when switching between online and offline message view
17
- // For some reason switching between the first and second message list below resulted in messageRequestBuilder.id to be set to the previous message
18
- // after every online/offline switch resulting in on message being removed from the conversation each time.
19
- const modifiedAttrs = computed(() => {
20
- const newAttrs = { ...attrs };
21
- newAttrs.connected = chat.connected.value;
22
- newAttrs.messagesRequestBuilder.id = 0;
23
- return newAttrs;
24
- });
25
- </script>
26
-
27
- <template>
28
- <CometChatMessageList v-if="chat.connected.value" v-bind="modifiedAttrs" />
29
- <CometChatMessageList v-else v-bind="modifiedAttrs" />
30
- </template>