vue-wiguet-chatweb 0.0.13 → 0.0.15
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/components/Chat.vue.d.ts +2 -1
- package/dist/dto/app.dto.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/store/index.d.ts +1 -0
- package/dist/style.css +1 -1
- package/dist/vue-wiguet-chatweb.js +1513 -1492
- package/dist/vue-wiguet-chatweb.umd.cjs +5 -5
- package/package.json +1 -1
- package/src/components/Chat.vue +37 -4
- package/src/components/MessageList.vue +8 -1
- package/src/components/Widget.vue +2 -0
package/package.json
CHANGED
package/src/components/Chat.vue
CHANGED
@@ -25,7 +25,13 @@
|
|
25
25
|
<IconUser />
|
26
26
|
</button> -->
|
27
27
|
<div class="jl-inputgroup-chat">
|
28
|
-
<
|
28
|
+
<textarea
|
29
|
+
v-model="message"
|
30
|
+
class="jl2-input-chat"
|
31
|
+
required
|
32
|
+
ref="textArea"
|
33
|
+
@input="() => autoAdjustHeight()"
|
34
|
+
/>
|
29
35
|
<button type="submit" class="pointer btn-primary">
|
30
36
|
<IconSend style="width: 20px; height: 20px" />
|
31
37
|
</button>
|
@@ -50,7 +56,11 @@ import {
|
|
50
56
|
import IconClose from "./IconClose.vue";
|
51
57
|
import IconSend from "./IconSend.vue";
|
52
58
|
// import IconUser from "./IconUser.vue";
|
53
|
-
import {
|
59
|
+
import {
|
60
|
+
getMessagesApi,
|
61
|
+
sendMessageApi,
|
62
|
+
setVistoToTrueApi,
|
63
|
+
} from "../store/index";
|
54
64
|
import { getInformationApi } from "../store";
|
55
65
|
import MessageList from "./MessageList.vue";
|
56
66
|
import Loader from "./Loader.vue";
|
@@ -59,6 +69,7 @@ import { searchFromLast } from "../resources/functions.helpers";
|
|
59
69
|
//DATA
|
60
70
|
const rabbitMQServiceListen: any = ref(null);
|
61
71
|
const message = ref("");
|
72
|
+
const notViewed = ref(0);
|
62
73
|
|
63
74
|
const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
|
64
75
|
data: [],
|
@@ -73,6 +84,7 @@ const emit = defineEmits([
|
|
73
84
|
"show-confirm",
|
74
85
|
"new-message",
|
75
86
|
"clear-new-messages",
|
87
|
+
"not-viewed-total",
|
76
88
|
]);
|
77
89
|
|
78
90
|
const props = defineProps({
|
@@ -100,6 +112,7 @@ watch(
|
|
100
112
|
async (current) => {
|
101
113
|
if (current) {
|
102
114
|
emit("clear-new-messages");
|
115
|
+
scrollToBottom();
|
103
116
|
if (!virtualHost.value || !appChatId.value) {
|
104
117
|
const resp = await getInformationApi(props.tokenAuth);
|
105
118
|
const data = resp.response.data;
|
@@ -107,8 +120,8 @@ watch(
|
|
107
120
|
appChatId.value = data.appChat.id;
|
108
121
|
connectMsRabbit();
|
109
122
|
}
|
110
|
-
if (
|
111
|
-
|
123
|
+
if (notViewed.value > 0) {
|
124
|
+
setVistoToTrueApi(appChatId.value, props.tokenAuth);
|
112
125
|
}
|
113
126
|
}
|
114
127
|
}
|
@@ -119,6 +132,9 @@ onMounted(async () => {
|
|
119
132
|
const data = resp.response.data;
|
120
133
|
virtualHost.value = data.virtualHost;
|
121
134
|
appChatId.value = data.appChat.id;
|
135
|
+
emit("not-viewed-total", data.appChat.totalNoVistosCliente);
|
136
|
+
notViewed.value = data.appChat.totalNoVistosCliente;
|
137
|
+
getMessages();
|
122
138
|
connectMsRabbit();
|
123
139
|
}
|
124
140
|
});
|
@@ -260,7 +276,11 @@ const connectMsRabbit = (app: any = "webchat") => {
|
|
260
276
|
!val.message.esCliente
|
261
277
|
) {
|
262
278
|
messagesData.value.data.push(val.message);
|
279
|
+
if (props.visible === true) {
|
280
|
+
setVistoToTrueApi(appChatId.value, props.tokenAuth);
|
281
|
+
}
|
263
282
|
if (props.visible === false) {
|
283
|
+
notViewed.value = notViewed.value + 1;
|
264
284
|
emit("new-message");
|
265
285
|
}
|
266
286
|
}
|
@@ -288,6 +308,19 @@ const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
|
|
288
308
|
}
|
289
309
|
});
|
290
310
|
};
|
311
|
+
|
312
|
+
const textArea = ref<HTMLTextAreaElement>();
|
313
|
+
|
314
|
+
function autoAdjustHeight() {
|
315
|
+
if (!textArea.value) return;
|
316
|
+
// Reset the height to default to get the scroll height
|
317
|
+
textArea.value.style.height = "auto";
|
318
|
+
// Set the new height based on the scroll height
|
319
|
+
textArea.value.style.height =
|
320
|
+
textArea.value.scrollHeight === 54
|
321
|
+
? textArea.value.scrollHeight - 12 + "px"
|
322
|
+
: textArea.value.scrollHeight + "px";
|
323
|
+
}
|
291
324
|
</script>
|
292
325
|
|
293
326
|
<style scoped>
|
@@ -117,6 +117,7 @@ watch(
|
|
117
117
|
padding-box;
|
118
118
|
/* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
|
119
119
|
color: #fff;
|
120
|
+
height: 100%;
|
120
121
|
}
|
121
122
|
|
122
123
|
.left {
|
@@ -147,6 +148,7 @@ watch(
|
|
147
148
|
|
148
149
|
.message-text {
|
149
150
|
margin-bottom: 10px;
|
151
|
+
overflow-wrap: break-word;
|
150
152
|
}
|
151
153
|
.detail-message {
|
152
154
|
font-size: 10px;
|
@@ -159,7 +161,6 @@ watch(
|
|
159
161
|
display: flex;
|
160
162
|
flex-direction: column;
|
161
163
|
justify-content: center;
|
162
|
-
margin-bottom: 0.5rem;
|
163
164
|
}
|
164
165
|
|
165
166
|
.message {
|
@@ -201,11 +202,17 @@ watch(
|
|
201
202
|
.btn-container {
|
202
203
|
display: flex;
|
203
204
|
align-items: center;
|
205
|
+
position: absolute;
|
206
|
+
left: -40px;
|
207
|
+
top: 50%;
|
208
|
+
transform: translateY(-50%);
|
204
209
|
}
|
205
210
|
|
206
211
|
.message-container {
|
207
212
|
min-width: 80%;
|
208
213
|
max-width: 80%;
|
214
|
+
position: relative;
|
215
|
+
margin-bottom: 0.5rem;
|
209
216
|
}
|
210
217
|
|
211
218
|
.messages-container-list {
|
@@ -25,6 +25,7 @@
|
|
25
25
|
@show-confirm="(data) => emit('show-confirm', data)"
|
26
26
|
@clear-new-messages="newMessages = 0"
|
27
27
|
@new-message="() => newMessages++"
|
28
|
+
@not-viewed-total="(val) => (newMessages = val)"
|
28
29
|
/>
|
29
30
|
</div>
|
30
31
|
</div>
|
@@ -81,5 +82,6 @@ defineProps({
|
|
81
82
|
border-radius: 50%;
|
82
83
|
right: -2px;
|
83
84
|
top: -4px;
|
85
|
+
z-index: 2;
|
84
86
|
}
|
85
87
|
</style>
|