@bcc-code/vue-bcc-chat-ui 1.1.1 → 1.1.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/dist/chat/connection.d.ts +4 -4
- package/dist/chat/data.d.ts +2 -2
- package/dist/chat/index.d.ts +3 -3
- package/dist/style.css +1 -1
- package/dist/vue-bcc-chat-ui.js +11144 -11078
- package/package.json +10 -10
- package/src/components/BccChatMessageList.vue +65 -10
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.1.
|
|
5
|
+
"version": "1.1.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"private": false,
|
|
8
8
|
"files": [
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
"vue": "^3.0.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@types/node": "^20.11.
|
|
26
|
-
"@vitejs/plugin-vue": "^4.
|
|
25
|
+
"@types/node": "^20.11.22",
|
|
26
|
+
"@vitejs/plugin-vue": "^4.6.2",
|
|
27
27
|
"path": "^0.12.7",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"vite
|
|
31
|
-
"
|
|
32
|
-
"
|
|
28
|
+
"sass": "^1.71.1",
|
|
29
|
+
"typescript": "^5.3.3",
|
|
30
|
+
"vite": "^5.1.4",
|
|
31
|
+
"vite-plugin-dts": "^3.7.3",
|
|
32
|
+
"vue": "^3.4.21"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@cometchat/chat-sdk-javascript": "^4.0.3",
|
|
36
|
-
"@cometchat/chat-uikit-vue": "^4.2.
|
|
36
|
+
"@cometchat/chat-uikit-vue": "^4.2.1",
|
|
37
37
|
"@cometchat/uikit-resources": "^4.2.2",
|
|
38
|
-
"@cometchat/uikit-shared": "^4.2.
|
|
38
|
+
"@cometchat/uikit-shared": "^4.2.2"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"dev": "vite",
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { onBeforeMount, onUnmounted, ref } from 'vue'
|
|
3
3
|
import chat from '../chat';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
CometChatMessages,
|
|
6
|
+
CometChatMessageTemplate,
|
|
7
|
+
CometChatUIKit,
|
|
8
|
+
ImageBubbleStyle,
|
|
9
|
+
MessageBubbleAlignment,
|
|
10
|
+
} from "@cometchat/chat-uikit-vue";
|
|
11
|
+
import { MessageListConfiguration } from "@cometchat/uikit-shared";
|
|
5
12
|
import { Group } from '@cometchat/chat-sdk-javascript';
|
|
6
|
-
import { watch } from 'vue';
|
|
13
|
+
import { watch, Ref } from 'vue';
|
|
7
14
|
//import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
|
|
8
15
|
|
|
9
16
|
const props = defineProps({
|
|
@@ -19,7 +26,9 @@ onBeforeMount(async() => {
|
|
|
19
26
|
});
|
|
20
27
|
|
|
21
28
|
watch(chat.connection.connected, async () => {
|
|
22
|
-
|
|
29
|
+
if (chat.connection.connected.value) {
|
|
30
|
+
await loadData();
|
|
31
|
+
}
|
|
23
32
|
});
|
|
24
33
|
|
|
25
34
|
onUnmounted(async () => {
|
|
@@ -37,19 +46,65 @@ const connnect = async() => {
|
|
|
37
46
|
};
|
|
38
47
|
|
|
39
48
|
// Loads data if chat is connected
|
|
40
|
-
const loadData = async () => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
const loadData = async () => {
|
|
50
|
+
if (chat.connection.connected.value && props.chatUid) {
|
|
51
|
+
initTemplates();
|
|
52
|
+
chatGroup.value = await chat.data.getGroup(props.chatUid);
|
|
53
|
+
} else {
|
|
54
|
+
chatGroup.value = undefined;
|
|
55
|
+
}
|
|
46
56
|
};
|
|
47
57
|
|
|
58
|
+
const messageListConfiguration:Ref<any> = ref(null);
|
|
59
|
+
let templatesInitialized = false;
|
|
60
|
+
const initTemplates = () => {
|
|
61
|
+
if (templatesInitialized) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
templatesInitialized = true;
|
|
65
|
+
let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
|
|
66
|
+
definedTemplates.map((template: CometChatMessageTemplate) => {
|
|
67
|
+
if (template.category === "message" && template.type === "image") {
|
|
68
|
+
template.contentView = (
|
|
69
|
+
message: CometChat.BaseMessage,
|
|
70
|
+
_alignment: MessageBubbleAlignment
|
|
71
|
+
) => getImageMessageContentView(message, _alignment);
|
|
72
|
+
}
|
|
73
|
+
return template;
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const getImageMessageContentView = (
|
|
77
|
+
message: CometChat.BaseMessage,
|
|
78
|
+
_alignment: MessageBubbleAlignment
|
|
79
|
+
) => {
|
|
80
|
+
return {
|
|
81
|
+
componentName: "CometChatImageBubble",
|
|
82
|
+
props: {
|
|
83
|
+
src: message.getData().url,
|
|
84
|
+
imageStyle: new ImageBubbleStyle({
|
|
85
|
+
// you can adjust image styles here
|
|
86
|
+
width: "100%",
|
|
87
|
+
height: "100%",
|
|
88
|
+
}),
|
|
89
|
+
},
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
messageListConfiguration.value = new MessageListConfiguration({
|
|
94
|
+
templates: definedTemplates,
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
48
103
|
</script>
|
|
49
104
|
|
|
50
105
|
<template>
|
|
51
106
|
<div v-if="chatGroup" class="bcc-chat-message-list">
|
|
52
|
-
<CometChatMessages :hideMessageHeader="true" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
|
|
107
|
+
<CometChatMessages v-if="chatGroup" :hideMessageHeader="true" :messageListConfiguration="messageListConfiguration" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
|
|
53
108
|
</div>
|
|
54
109
|
</template>
|
|
55
110
|
|