@bcc-code/vue-bcc-chat-ui 1.0.3 → 1.0.4
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,12 +2,17 @@
|
|
|
2
2
|
"name": "@bcc-code/vue-bcc-chat-ui",
|
|
3
3
|
"author": "bcc-code",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.4",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"private": false,
|
|
8
8
|
"files": [
|
|
9
|
-
"dist"
|
|
9
|
+
"dist",
|
|
10
|
+
"src/components"
|
|
10
11
|
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "git+https://github.com/bcc-code/bcc-chat.git"
|
|
15
|
+
},
|
|
11
16
|
"main": "./dist/vue-bcc-chat-ui.umd.cjs",
|
|
12
17
|
"module": "./dist/vue-bcc-chat-ui.js",
|
|
13
18
|
"types": "./dist/index.d.ts",
|
|
@@ -27,8 +32,10 @@
|
|
|
27
32
|
"devDependencies": {
|
|
28
33
|
"@types/node": "^20.11.16",
|
|
29
34
|
"@vitejs/plugin-vue": "^4.5.2",
|
|
35
|
+
"path": "^0.12.7",
|
|
30
36
|
"typescript": "^5.2.2",
|
|
31
37
|
"vite": "^5.0.8",
|
|
38
|
+
"vite-plugin-dts": "^3.7.2",
|
|
32
39
|
"vue": "^3.3.11",
|
|
33
40
|
"vue-tsc": "^1.8.25"
|
|
34
41
|
},
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, onBeforeMount, ref } from 'vue'
|
|
3
|
+
import chat from '../chat';
|
|
4
|
+
import { watch } from 'vue';
|
|
5
|
+
import { CometChatMessages } from '@cometchat/chat-uikit-vue'
|
|
6
|
+
//import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
accessToken: String,
|
|
10
|
+
chatUid: String,
|
|
11
|
+
environment: String,
|
|
12
|
+
active: Boolean
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const accessToken = computed(() => props.accessToken);
|
|
16
|
+
const active = computed(() => props.active);
|
|
17
|
+
const connected = ref(false);
|
|
18
|
+
const chatGroup = ref();
|
|
19
|
+
const user = ref();
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
const connect = async () => {
|
|
23
|
+
if (accessToken.value && active.value){
|
|
24
|
+
user.value = await chat.connection.connect(accessToken.value);
|
|
25
|
+
console.log('USER', user.value);
|
|
26
|
+
if (props.chatUid){
|
|
27
|
+
chatGroup.value = await chat.data.getGroup(props.chatUid);
|
|
28
|
+
console.log('GROUP', chatGroup.value);
|
|
29
|
+
}
|
|
30
|
+
connected.value = true;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const disconnect = async () => {
|
|
35
|
+
console.log('Disconnecting');
|
|
36
|
+
if (connected.value){
|
|
37
|
+
await chat.connection.disconnect();
|
|
38
|
+
console.log('Disconnected');
|
|
39
|
+
connected.value = false;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
watch(accessToken, async (token) => {
|
|
44
|
+
if (token && active){
|
|
45
|
+
await connect();
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
watch(active, async (isActive, wasActive) => {
|
|
50
|
+
if (isActive && !wasActive){
|
|
51
|
+
await connect();
|
|
52
|
+
}
|
|
53
|
+
if (!isActive && connected.value){
|
|
54
|
+
await disconnect();
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
onBeforeMount(async() => {
|
|
59
|
+
await connect();
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<template>
|
|
66
|
+
<div v-if="connected" class="bcc-chat-message-list">
|
|
67
|
+
<CometChatMessages :hideMessageHeader="true" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
|
|
68
|
+
</div>
|
|
69
|
+
</template>
|
|
70
|
+
|
|
71
|
+
<style lang="scss" >
|
|
72
|
+
|
|
73
|
+
.bcc-chat-message-list {
|
|
74
|
+
height: 100%;
|
|
75
|
+
|
|
76
|
+
/* 1. Wrapper for Messages component */
|
|
77
|
+
.cc-messages-wrapper {
|
|
78
|
+
|
|
79
|
+
/* 1.1 Messages component */
|
|
80
|
+
.cc-messages-wrapper__messages {
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
/* 1.1.1 Wrapper for Messages List */
|
|
84
|
+
.cc-messages-wrapper__messages-list {
|
|
85
|
+
|
|
86
|
+
height: calc(100% - 96px);
|
|
87
|
+
|
|
88
|
+
/* 1.1.1.1 Messages List header view */
|
|
89
|
+
.cc__messagelist__headerview {
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* 1.1.1.2 Messages List messages */
|
|
93
|
+
.cc-messagelist {
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
.cc-list__wrapper {
|
|
99
|
+
.cc-list__header {
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
.cc-list__list {
|
|
103
|
+
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* 1.1.1.3 Message List footer */
|
|
110
|
+
.cc__messagelist__footerview {
|
|
111
|
+
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* 1.1.2 Wrapper for Composer */
|
|
117
|
+
.cc-messages-wrapper__composer {
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* 1.1.3 Wrapper for Live Reaction */
|
|
122
|
+
.cc__messages__livereaction {
|
|
123
|
+
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
.cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,
|
|
131
|
+
.cc__message-list::-webkit-scrollbar {
|
|
132
|
+
background: transparent;
|
|
133
|
+
width: 8px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar-thumb,
|
|
137
|
+
.cc__message-list::-webkit-scrollbar-thumb {
|
|
138
|
+
background: rgb(232, 229, 229);
|
|
139
|
+
border-radius: 8px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
</style>
|