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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-wiguet-chatweb",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",
@@ -25,7 +25,13 @@
25
25
  <IconUser />
26
26
  </button> -->
27
27
  <div class="jl-inputgroup-chat">
28
- <input v-model="message" class="jl2-input-chat" required />
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 { getMessagesApi, sendMessageApi } from "../store/index";
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 (messagesData.value.data.length === 0) {
111
- getMessages();
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>