vue-wiguet-chatweb 0.1.17 → 0.1.18

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "files": [
     "dist",
-    "src/components/"
+    "src/components/",
+    "src/assets/"
   ],
   "main": "./dist/vue-wiguet-chatweb.umd.cjs",
   "module": "./dist/vue-wiguet-chatweb.js",
@@ -56,6 +57,7 @@
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
+    "@vue/test-utils": "^2.4.6",
     "jsdom": "^25.0.1",
     "typescript": "^5.0.2",
     "vite": "^5.4.11",

package/src/assets/emojis/AngryIcon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 2048 2048" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(936)" d="m0 0h176v3h16l20 1 10 3 17 1 12 3 14 1 8 3 16 1 7 3 12 2 7 2 13 2 5 2 11 2 5 2 11 2 9 3 8 3 11 2 8 3 16 5 9 3 11 4 12 5 8 3 12 5 9 3 7 3 9 3 32 16 12 4 16 8 15 8 9 6 16 8 11 6 9 6 11 6 9 6 11 6 9 6 10 7 21 14v2l4 2 11 7 10 7 7 6v2l4 2 9 6 7 6v2l4 2 9 6 7 6 4 4v2l4 2 7 6 6 4 7 6 4 4v2h2v2h2v2l4 2v2l4 2v2l4 2v2h2v2h2v2h2v2h2l6 7 6 5 6 7 6 5 6 7 6 5 7 8 5 6 3 5 5 5v2h2v2h2l7 8 5 6 3 5 1 3 3 1 9 11 3 5 9 10 4 5 3 5 7 11 10 12 3 5 7 11 6 9 7 10 9 16 6 9 6 11 5 8 12 23 7 11 8 15 8 18 5 13 10 19 5 12 7 20 5 12 5 13 6 15 3 10 3 11 3 7 2 7 2 6 1 8 3 7 2 7 2 6 1 9 2 2 2 14 2 2 2 18 2 2 2 14 2 2 1 6 1 16 2 1 2 23 2 2 1 6v21l4 1 1 38 3 1v175l-3 2-1 34-2 5-1 1-2 26-2 2-1 18-2 5-1 1-1 18-1 5h-2l-1 12-3 5-1 14-1 5h-2l-1 12-3 6-2 14h-2l-1 9-3 5-2 13-2 3-2 9-3 9-3 7-6 20-5 10-3 10-6 13-5 15-4 10-8 16-7 15-6 15-10 19-4 7-6 10-10 19-3 6-6 9-6 11-5 7-6 12-6 8-4 6-7 11-5 6-2 5-4 5-5 5-3 6-6 7-2 5-8 9-4 4h-2l-2 7-8 9-4 4h-2l-2 7-9 9-7 8-5 4-3 7-85 85h-5l-2 4-8 7-13 13-5 2-10 9-6 5-7 4-11 11-6 3-8 6-7 4-8 7-9 6-11 7-9 6-7 5-11 6-13 8-12 7-7 4-12 7-14 7-7 5-16 8-19 9-6 2-25 12-11 5-18 6-17 7-13 5-7 3-36 12-23 7-11 3-24 6-23 5-25 6-20 3-11 2-25 4-22 3-33 2-1 3h-176l-1-3-38-2-9-2-39-6-33-6-41-9-34-9-36-11-29-10-35-14-7-3-9-2-32-16-3-2-9-2-16-8-17-9-6-5-23-11-8-5-5-4-14-7-6-5-14-7-6-5-6-3-6-5-6-3-6-5-6-3-8-7v-2l-7-2-7-6-6-3-10-10-7-4-8-7-9-8-6-3-17-17-5-4-5-2-84-84-3-6-11-12-10-10-3-6-11-12-3-4-3-5-9-10-4-5-3-5-5-7-3-5-9-11-3-5-6-9-7-10-7-11-8-14-5-7-6-12-6-8-8-16-7-13-5-7-8-16-8-17-3-9-8-16-9-19-7-21-5-11-5-14-4-10-15-45-3-12-6-20-5-22-2-5-2-15-3-10-3-12-2-18-2-5-2-19-2-8-2-20-2-5-1-36-3-1v-175l3-3 1-30 1-7 2-4 1-20 3-7 1-16 3-12 2-16 5-18 3-18 2-5 2-11 5-18 5-16 3-12 16-48 4-8 4-12 5-11 7-21 16-32 3-10 13-26 12-20 4-8 8-15 5-7 6-12 6-8 6-12 6-8 6-9 7-11 3-3 3-6 8-9 6-10 3-3 3-6 13-14 3-6 8-9h2l5-10 7-7 2-3h2l2-4 9-9 2-5 11-11 2-3h2l2-4h2l2-4 6-5 6-7 6-5 5-6 7-6 2-3h2l2-4h2l2-4h2l2-4h2l2-4h2l1-3 8-7 6-5 6-4 9-9 8-7 5-4 6-4 12-11 9-6 11-10 10-6 11-8 9-7 33-22 17-10 13-8 7-4 10-6 19-10 7-4 10-6 19-10 9-4 9-3 32-16 11-3 2-2 10-2 2-2 7-3 11-3 2-2 7-3 11-3 2-2 10-2 2-2 10-2 2-2 10-2 2-2 11-1 5-3 10-2 2-2 14-2 3-2 13-2 4-2 16-2 2-2 14-2 3-2 17-1 5-2 1-1 18-1 8-3 25-1 1-3 38-1zm-424 579-18 1-19 10-12 12-4 7-7 14v35l9 17 11 12 8 7 9 6 7 7 8 7 9 6 6 5 5 5 9 6 6 5 5 5 9 6 5 5h2v2l9 6 8 7 5 5h2v2l9 6 8 7 2 2 1 5-4 2-5 5-6 3-10 9-24 24v2h-2l-3 7-6 7-3 6-6 9-7 14-6 20-2 3-2 13-2 2v69l2 3 3 15 4 12 5 13 7 12 10 17 7 10 9 10 18 18 10 8 9 6 16 9 9 6 6 3 9 2 9 3 7 3 10 1 6 3h62l6-2 1-1 11-1 5-3 10-2 2-2 10-2 9-5 9-6 11-6 9-6 11-9 13-13 5-6 5-5 5-6 6-9 6-10 3-6 6-9 4-11 7-20 1-9 3-8v-65l-3-5-2-13-3-8-6-17-8-16-6-10-6-7-4-6-9-10-26-26-5-4-6-3-13-13-5-4-6-3-9-9-5-4-6-3-9-9-5-4-6-3-9-9-5-4-6-3-13-13-5-4-6-3-9-9-5-4-6-3-9-9-5-4-6-3-9-9-5-4-6-3-13-13-5-4-6-3-10-10-7-4-8-7-9-8-6-3-10-10-7-4-11-9-5-3-13-7zm1006 1-19 10-8 8-6 3-10 9-6 5-7 4-11 11-6 3-10 9-6 5-5 3-10 9-8 8-5 2-10 9-6 5-7 4-11 11-6 3-10 9-5 5-5 2-12 11-7 7-5 2-10 9-6 5-7 4-11 11-6 3-10 9-6 5-7 4-11 11-6 3-10 9-36 36-4 7-7 10-12 24-3 10-4 12-2 10-2 5-1 1v69l2 3 3 15 4 12 5 13 7 12 10 17 7 10 9 10 18 18 10 8 9 6 16 9 9 6 6 3 9 2 9 3 7 3 10 1 6 3h62l6-2 1-1 11-1 5-3 10-2 2-2 10-2 9-5 9-6 11-6 9-6 11-9 13-13 5-6 5-5 5-6 6-9 6-10 3-6 6-9 4-11 7-20 1-9 3-8v-65l-3-5-2-13-3-8-6-17-7-14-6-8-3-5-5-7-3-5-9-10-22-22-5-4-6-3-5-5h-2l-1-4 3-5 8-6 6-4 8-7v-2l4-2 6-5 6-4 12-11 8-5 12-11 8-5 12-11 8-5 7-6 5-5 6-5 9-6v-2l4-2 1-3 4-2 7-9 7-14 1-4v-32l-8-17-12-13-8-6-14-7zm-495 827-4 4-53 1-3 2-23 2-5 2-16 2-5 2-15 2-4 2-15 3-42 14-10 4-19 9-3 2-8 2-20 11-4 3-14 7-18 10-7 7-8 4-11 8-7 5-5 3-10 9-7 7-6 3-10 9-16 16-4 7-7 13v36l9 17 9 10h2v2l9 6 13 7h34l19-9 13-12 9-6 9-9 9-7 18-12 8-7 23-12 9-6 16-8 5-3 9-2 2-2 7-3 11-3 2-2 10-2 2-2 10-2 3-2 13-2 3-2 13-2 4-2 16-1 5-2 1-1h110l1 2 4 1 16 1 8 3 12 2 5 2 11 2 8 3 16 5 8 3 16 7 11 4 16 8 9 6 19 10 6 4 3 1 1 3 11 7 9 6 8 7 6 5 5 5 9 6 5 5h2v2l9 6 13 7h34l19-9 10-9 7-9 7-14 1-3v-34l-9-17-11-12-13-13-5-4-6-3-14-14-7-4-9-7-6-3-6-5-6-3-6-5-6-3-6-5-21-10-7-6-16-8-9-2-28-14-10-3-36-12-30-7-29-6-23-2-7-2-51-1-2-4z" fill="#CA2E22"/>
+</svg>

package/src/assets/emojis/HappiestIcon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(988)" d="m0 0h72l44 2 48 5 35 5 44 8 35 8 42 11 29 9 21 7 23 8 10 4 32 13 19 8 15 7 32 16 27 14 23 13 23 14 19 12 12 8 16 11 17 12 6 4v2l5 2 14 11 10 8 14 11 13 11 12 11 11 9 8 8 8 7 48 48 7 8 11 12 7 8 11 13 11 14 10 12 10 13 5 7v2h2l12 17 11 16 10 15 14 22 9 15 11 19 9 16 15 29 13 26 13 29 11 27 8 20 9 26 7 21 11 37 7 27 6 25 8 40 6 39 3 24 4 38 2 44v72l-2 44-5 48-5 35-8 44-8 35-11 42-9 29-7 21-10 28-15 37-11 25-16 33-12 24-11 20-14 24-13 21-9 14-10 15-9 13-13 18-1 2h-2l-2 5-11 14-8 10-11 14-11 13-10 11-9 11-9 9-7 8-48 48-8 7-11 10-8 7-10 9-9 7-16 13-14 11-11 8h-2v2l-17 12-16 11-15 10-19 12-18 11-17 10-10 6-12 6-19 10-32 16-29 13-27 11-15 6-17 6-20 7-25 8-34 10-36 9-39 8-41 7-32 4-38 4-44 2h-72l-44-2-48-5-35-5-44-8-35-8-42-11-29-9-21-7-23-8-10-4-32-13-19-8-15-7-32-16-27-14-23-13-23-14-19-12-12-8-16-11-17-12-6-4v-2l-5-2-14-11-10-8-14-11-13-11-12-11-11-9-8-8-8-7-48-48-7-8-11-12-7-8-11-13-11-14-10-12-10-13-5-7v-2h-2l-12-17-11-16-10-15-14-22-9-15-11-19-9-16-15-29-13-26-13-29-11-27-8-20-9-26-7-21-11-37-7-27-6-25-8-40-6-39-3-24-4-38-2-44v-72l2-44 5-48 5-35 8-44 8-35 11-42 9-29 7-21 10-28 15-37 11-25 16-33 13-26 10-18 14-24 13-21 9-14 10-15 9-13 13-18 1-2h2l2-5 11-14 8-10 11-14 11-13 10-11 9-11 9-9 7-8 48-48 8-7 11-10 8-7 10-9 9-7 16-13 14-11 11-8h2v-2l17-12 16-11 15-10 19-12 21-13 23-13 22-12 32-16 21-10 30-13 30-12 17-6 20-7 25-8 34-10 36-9 39-8 41-7 32-4 38-4zm-288 579-17 3-20 6-16 8-14 9-13 11-8 8-10 13-10 17-6 15-5 18-2 13v25l3 18 7 21 11 21 10 13 11 12 11 9 13 9 19 9 16 5 16 3h33l16-3 18-6 16-8 11-7 10-8 16-16 9-13 6-10 8-19 5-18 2-16v-18l-2-15-6-21-5-12-7-13-11-15-12-13-14-11-13-8-17-8-21-6-13-2zm623 0-17 3-17 5-21 10-13 9-14 12-10 11-12 18-8 17-5 16-3 16-1 8v18l2 15 6 21 8 18 7 11 9 12 17 17 13 9 10 6 19 8 18 5 8 1h33l16-3 16-5 19-9 17-12 14-13 11-14 8-13 8-17 6-21 2-13v-25l-3-18-7-21-8-16-8-12-11-13-8-8-13-10-17-10-15-6-18-5-13-2zm-859 378-16 3-12 5-10 7-9 8-7 10-6 13-2 6-1 7v34l1 21 5 44 5 28 6 28 5 20 9 28 10 29 13 31 7 15 14 27 12 21 6 9 5 9 13 19 12 17 11 14 14 17 11 12 9 11 30 30 11 9 7 7 11 9 16 13 19 14 27 18 31 19 14 7 19 10 29 13 25 10 33 11 21 6 28 7 31 6 20 3 36 4 21 1h52l21-1 44-5 28-5 28-6 20-5 28-9 29-10 31-13 15-7 29-15 19-11 9-6 9-5 19-13 17-12 14-11 17-14 12-11 11-9 30-30 9-11 7-7 9-11 13-16 14-19 18-27 8-13 10-17 14-26 9-19 13-30 11-30 8-26 5-18 8-36 6-36 4-36 1-21v-34l-2-10-5-13-7-10-8-9-10-7-12-6-12-3-14-1-17 3-16 8-6 4v2l-3 1v2l-4 2-8 11-5 10-3 10-1 8-2 46-3 28-6 35-8 32-12 36-13 31-13 27-9 16-14 23-20 28-8 10-9 11-13 15-32 32-11 9-12 10-14 11-13 9-15 10-25 15-29 15-19 8-11 5-23 8-15 5-25 7-29 6-19 3-28 3-22 1h-36l-34-2-35-5-29-6-29-8-34-12-25-11-25-12-18-10-19-12-12-8-22-16-11-9-15-13-8-7-30-30-9-11-10-12-10-13-10-14-10-15-9-15-8-14-13-25-14-33-7-20-5-15-7-26-4-18-5-29-3-28-2-46-2-12-5-13-7-10-5-6h-2l-1-3h-2v-2l-13-8-13-5-13-2z" fill="#3A8C03"/>
+</svg>

package/src/assets/emojis/HappyIcon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(932)" d="m0 0h184v3h15l18 1 3 1v2l28 1 9 3 16 1 8 3 12 1 8 3 11 2 7 2 13 2 5 2 11 2 5 2 11 2 9 3 10 3 9 2 8 3 16 5 9 3 7 3 21 7 11 5 11 4 9 4 11 4 24 12 10 3 46 23 8 6 16 8 9 6 16 9 9 6 11 6 9 6 10 7 21 14v2l4 2 11 7 10 7 7 6v2l4 2 12 8v2l4 2 9 6 7 6 4 4v2l4 2 7 6 6 4 7 6 4 4v2h2v2h2v2l4 2v2l4 2v2l4 2v2l4 2v2h2v2h2l6 7 6 5 6 7 6 5 6 7 6 5 6 7 13 13 3 6 6 6v2h2v2h2l7 8 5 6 3 5 9 11 3 5 9 10 4 5 3 5 7 11 10 12 3 5 7 11 6 9 7 10 8 14 7 11 6 9 8 15 6 12 6 9 8 15 9 19 6 12 6 16 8 16 11 27 8 20 10 30 3 11 3 7 2 7 2 6 1 8 3 7 2 7 2 6 1 9 2 2 2 14 2 2 2 14 2 2 2 18 2 2 2 18 2 1 2 23 2 1 1 7v25l4 1 1 35h3v183l-3 2-1 30-2 5-1 1-1 22-1 8-2 2-1 18-2 5-1 1-1 15-1 4h-2l-1 12-3 5-1 15-1 4h-2l-1 12-3 6-2 14h-2l-1 9-3 5-2 13-2 3-2 9-3 9-3 7-3 10-4 12-3 10-6 13-4 11-10 24-8 16-8 20-8 16-10 19-4 7-6 10-9 17-6 9-6 11-5 7-6 12-6 8-4 6-7 11-5 6-2 5-4 5-5 5-3 6-6 7-2 5-8 9-4 4h-2l-2 7-10 11-2 5-7 7-1 2h-2l-2 4-8 7-4 8-93 93h-5l-2 4-8 7-12 12-6 3-10 9-6 3-10 9-4 4-6 3-8 6-7 4-8 7-9 6-11 7-9 6-7 5-11 6-9 6-11 6-9 6-12 6-13 8-19 10-26 13-20 8-22 11-17 6-7 3-17 6-15 6-36 12-23 7-11 3-24 6-54 12-23 4-14 2-13 2-22 3-29 2-1 3h-184l-1-3-34-2-9-2-39-6-33-6-41-9-34-9-36-11-29-10-15-6-17-6-10-5-9-2-16-8-11-6-9-2-32-16-17-9-6-5-21-10-7-6-14-7-6-5-14-7-6-5-6-3-6-5-6-3-6-5-6-3-8-7v-2l-7-2-7-6-6-3-9-9-5-4-6-3-10-9-6-3-17-17-5-4-5-2-92-92-3-6-11-12-10-10-3-6-9-10-3-6-11-12-3-4-3-5-5-7-3-5-9-11-3-5-6-9-7-10-7-11-8-14-5-7-6-12-6-8-7-14-12-20-13-26-5-12-4-10-11-22-5-12-5-13-6-16-5-14-4-10-15-45-3-12-6-20-5-22-3-10-4-18-1-8-2-5-2-15-2-6-2-18-2-9-1-17-2-7-1-4-1-32-3-1v-183l3-3 1-26 2-8 1-3 1-23 3-7 1-17 3-11 2-13 2-6 2-14 5-18 8-32 5-16 3-12 20-60 4-8 4-12 4-8 4-12 12-24 3-10 11-23 11-20 3-6 5-7 8-16 7-13 5-7 6-12 6-8 6-9 7-11 7-10 4-5 3-6 8-9 6-10 3-3 3-6 12-13 5-8 8-9 3-6 8-9h2l2-4 9-9 2-5 11-11 2-3h2l2-4h2l2-4 6-5 6-7 6-5 5-6 7-6 5-6 5-5h2l2-4h2l2-4h2l2-4h2l2-4h2l1-3 8-7 6-5 6-4 9-9 8-7 5-4 6-4 10-8 8-6 10-9 10-6 11-8 9-7 48-32 14-8 10-6 19-10 7-4 10-6 19-10 23-11 10-3 19-10 8-4 9-2 11-6 9-2 2-2 7-3 11-3 2-2 10-2 2-2 10-2 2-2 10-2 2-2 10-2 2-2 11-1 5-3 10-2 2-2 14-2 3-2 13-2 2-2 11-1 6-3 13-1 5-2 1-1 17-1 6-2 1-1 15-1 4-2 6-1 26-1 1-3 34-1zm-219 608-2 2-17 2-3 2-10 2-2 2-9 2-11 6-5 4-9 6-18 18-4 7-7 10-8 15-5 13-3 8v55l3 7 5 17 9 17 9 10 3 6 4 5 11 7 4 2 1 3 11 7 9 6 6 3 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 9-5 9-6 10-8 3-3 5-2 5-5 2-5 7-7 7-9 4-7 5-14 7-21v-53l-3-6-3-9-8-16-6-10-6-9-9-10-7-7-7-4-9-7-23-11-12-4-1-1-17-2-5-2zm600 0-2 2-17 2-3 2-10 2-2 2-9 2-8 6-7 4-4 3v2l-5 1-12 11-7 7-4 7-7 10-8 15-5 13-3 10v53l3 7 6 18 4 8 6 9 12 15 3 5 5 4 6 4 3 1 1 3 11 7 9 6 6 3 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 9-5 9-6 10-8 3-3 5-2 5-5 2-5 7-7 7-9 4-7 5-14 7-21v-53l-3-6-3-9-8-16-6-10-6-9-9-10-7-7-7-4-9-7-23-11-12-4-1-1-17-2-5-2zm-807 604-19 10-12 12-4 7-6 12-2 12-3 5v8l3 5 1 11 5 9 9 10 3 6 5 5 8 9h2l2 4h2l2 4 12 12 3 6 10 10 10 7 9 9h2l2 4h2l2 4h2l2 4h2v2l8 7 9 6 5 5h2v2l9 6 5 4h2v2l9 6 10 7 6 4 8 7 14 7 8 6 13 7 9 6 62 31 9 3 9 4 10 5 9 2 8 3 16 5 8 3 16 5 9 3 8 3 11 2 5 2 11 2 7 2 13 2 7 2 15 1 7 3 23 1v2l9 1 30 1 1 2 4 1h77l7-2 1-1 28-1 10-1 2-2 21-1 6-2 1-1 17-1 6-2 1-1 18-2 2-2 14-2 2-2 14-2 2-2 10-2 2-2 11-1 5-3 10-2 2-2 10-2 2-2 7-3 11-3 2-2 8-3 7-2 23-11 38-19 15-8 9-6 11-6 9-6 11-6 9-8 8-5 11-7 9-8 8-5 12-11 8-5 13-13 6-5 5-5v-2l4-2 5-5 6-3 12-12 2-5 11-11 5-6 6-5 7-8 5-5 3-6 8-9 5-10 1-11 3-4v-7l-3-7-2-11-8-16-11-12-8-6-14-7h-33l-2 2-9 2-11 6-14 14-3 7-42 42v2l-4 2-18 18-5 2-12 11-4 3-7 4-7 7-6 3-10 9-6 3-9 6-14 8-4 3-12 6-13 8-19 10-9 3-19 9-14 5-10 4-7 3-11 3-6 2-7 3-12 2-8 3-9 3-15 2-4 2-16 2-4 2-21 2-3 2-31 2h-7l-1 3h-70l-10-1-2-2-24-1-34-5-44-9-29-8-35-12-25-10-5-3-7-3-6-2-5-2-4-2-1-3-10-2-3-3h-2v-2l-17-8-8-5-5-4-7-3-10-6-3-3-6-3-7-6-3-3-6-3-7-6-3-3-6-3-9-9-5-4-5-2-63-63-3-6-9-10-7-4-9-7-9-2-3-2z" fill="#8CBF50"/>
+</svg>

package/src/assets/emojis/NeutralIcon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 2048 2048" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(936)" d="m0 0h176v3h16l20 1 10 3 17 1 12 3 14 1 8 3 16 1 7 3 12 2 7 2 13 2 5 2 11 2 5 2 11 2 9 3 8 3 11 2 8 3 16 5 9 3 11 4 12 5 8 3 12 5 9 3 7 3 9 3 32 16 12 4 16 8 15 8 9 6 16 8 11 6 9 6 11 6 9 6 11 6 9 6 10 7 21 14v2l4 2 11 7 10 7 7 6v2l4 2 9 6 7 6v2l4 2 9 6 7 6 4 4v2l4 2 7 6 6 4 7 6 4 4v2h2v2h2v2l4 2v2l4 2v2l4 2v2h2v2h2v2h2v2h2l6 7 6 5 6 7 6 5 6 7 6 5 7 8 5 6 3 5 5 5v2h2v2h2l7 8 5 6 3 5 1 3 3 1 9 11 3 5 9 10 4 5 3 5 7 11 10 12 3 5 7 11 6 9 7 10 9 16 6 9 6 11 5 8 12 23 7 11 8 15 8 18 5 13 10 19 5 12 7 20 5 12 5 13 6 15 3 10 3 11 3 7 2 7 2 6 1 8 3 7 2 7 2 6 1 9 2 2 2 14 2 2 2 18 2 2 2 14 2 2 1 6 1 16 2 1 2 23 2 2 1 6v21l4 1 1 38 3 1v175l-3 2-1 34-2 5-1 1-2 26-2 2-1 18-2 5-1 1-1 18-1 5h-2l-1 12-3 5-1 14-1 5h-2l-1 12-3 6-2 14h-2l-1 9-3 5-2 13-2 3-2 9-3 9-3 7-6 20-5 10-3 10-6 13-5 15-4 10-8 16-7 15-6 15-10 19-4 7-6 10-10 19-3 6-6 9-6 11-5 7-6 12-6 8-4 6-7 11-5 6-2 5-4 5-5 5-3 6-6 7-2 5-8 9-4 4h-2l-2 7-8 9-4 4h-2l-2 7-9 9-7 8-5 4-3 7-85 85h-5l-2 4-8 7-13 13-5 2-10 9-6 5-7 4-11 11-6 3-8 6-7 4-8 7-9 6-11 7-9 6-7 5-11 6-13 8-12 7-7 4-12 7-14 7-7 5-16 8-19 9-6 2-25 12-11 5-18 6-17 7-13 5-7 3-36 12-23 7-11 3-24 6-23 5-25 6-20 3-11 2-25 4-22 3-33 2-1 3h-176l-1-3-38-2-9-2-39-6-33-6-41-9-34-9-36-11-29-10-35-14-7-3-9-2-32-16-3-2-9-2-16-8-17-9-6-5-23-11-8-5-5-4-14-7-6-5-14-7-6-5-6-3-6-5-6-3-6-5-6-3-8-7v-2l-7-2-7-6-6-3-10-10-7-4-8-7-9-8-6-3-17-17-5-4-5-2-84-84-3-6-11-12-10-10-3-6-11-12-3-4-3-5-9-10-4-5-3-5-5-7-3-5-9-11-3-5-6-9-7-10-7-11-8-14-5-7-6-12-6-8-8-16-7-13-5-7-8-16-8-17-3-9-8-16-9-19-7-21-5-11-5-14-4-10-15-45-3-12-6-20-5-22-2-5-2-15-3-10-3-12-2-18-2-5-2-19-2-8-2-20-2-5-1-36-3-1v-175l3-3 1-30 1-7 2-4 1-20 3-7 1-16 3-12 2-16 5-18 3-18 2-5 2-11 5-18 5-16 3-12 16-48 4-8 4-12 5-11 7-21 16-32 3-10 13-26 12-20 4-8 8-15 5-7 6-12 6-8 6-12 6-8 6-9 7-11 3-3 3-6 8-9 6-10 3-3 3-6 13-14 3-6 8-9h2l5-10 7-7 2-3h2l2-4 9-9 2-5 11-11 2-3h2l2-4h2l2-4 6-5 6-7 6-5 5-6 7-6 2-3h2l2-4h2l2-4h2l2-4h2l2-4h2l1-3 8-7 6-5 6-4 9-9 8-7 5-4 6-4 12-11 9-6 11-10 10-6 11-8 9-7 33-22 17-10 13-8 7-4 10-6 19-10 7-4 10-6 19-10 9-4 9-3 32-16 11-3 2-2 10-2 2-2 7-3 11-3 2-2 7-3 11-3 2-2 10-2 2-2 10-2 2-2 10-2 2-2 11-1 5-3 10-2 2-2 14-2 3-2 13-2 4-2 16-2 2-2 14-2 3-2 17-1 5-2 1-1 18-1 8-3 25-1 1-3 38-1zm-323 644-2 2-11 3-1 1-9 2-19 10-8 8-5 2-12 11-2 2-2 6-7 7-6 10-5 11-3 9-3 11-2 3v52l3 7 5 17 9 17 10 12 3 5 4 5h2v2l9 6 11 9 19 10 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 17-9 11-9 6-4 7-6 4-5 3-6 8-9 5-9 5-14 7-21v-48l-4-11-6-17-7-14-9-10-3-6-9-10-11-7-9-8-16-8-11-3-6-2-7-3zm768 0-2 2-11 3-1 1-9 2-19 10-8 8-5 2-12 11-2 2-2 6-7 7-6 10-5 11-3 9-3 11-2 3v52l3 7 5 17 9 17 10 12 3 5 4 5h2v2l9 6 11 9 19 10 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 17-9 11-9 6-4 7-6 4-5 3-6 8-9 5-9 5-14 7-21v-48l-4-11-6-17-7-14-9-10-3-6-9-10-11-7-9-8-16-8-11-3-6-2-7-3zm-676 764-2 2-17 2-19 10-12 12-4 7-6 11-1 5v31l5 12 5 8 8 9h2v2l9 6 14 7 17 1v2l4 1h628l8-1 1-2 15-1 11-5 9-5 10-9v-2h2l6-10 5-10 1-3v-33l-8-17-12-13-8-6-14-7-11-1h-7v-2l-2-1z" fill="#E8A654"/>
+</svg>

package/src/assets/emojis/SadIcon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 2048 2048" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(936)" d="m0 0h176v3h16l20 1 10 3 17 1 12 3 14 1 8 3 16 1 7 3 12 2 7 2 13 2 5 2 11 2 5 2 11 2 9 3 8 3 11 2 8 3 16 5 9 3 11 4 12 5 8 3 12 5 9 3 7 3 9 3 32 16 12 4 16 8 15 8 9 6 16 8 11 6 9 6 11 6 9 6 11 6 9 6 10 7 21 14v2l4 2 11 7 10 7 7 6v2l4 2 9 6 7 6v2l4 2 9 6 7 6 4 4v2l4 2 7 6 6 4 7 6 4 4v2h2v2h2v2l4 2v2l4 2v2l4 2v2h2v2h2v2h2v2h2l6 7 6 5 6 7 6 5 6 7 6 5 7 8 5 6 3 5 5 5v2h2v2h2l7 8 5 6 3 5 1 3 3 1 9 11 3 5 9 10 4 5 3 5 7 11 10 12 3 5 7 11 6 9 7 10 9 16 6 9 6 11 5 8 12 23 7 11 8 15 8 18 5 13 10 19 5 12 7 20 5 12 5 13 6 15 3 10 3 11 3 7 2 7 2 6 1 8 3 7 2 7 2 6 1 9 2 2 2 14 2 2 2 18 2 2 2 14 2 2 1 6 1 16 2 1 2 23 2 2 1 6v21l4 1 1 38 3 1v175l-3 2-1 34-2 5-1 1-2 26-2 2-1 18-2 5-1 1-1 18-1 5h-2l-1 12-3 5-1 14-1 5h-2l-1 12-3 6-2 14h-2l-1 9-3 5-2 13-2 3-2 9-3 9-3 7-6 20-5 10-3 10-6 13-5 15-4 10-8 16-7 15-6 15-10 19-4 7-6 10-10 19-3 6-6 9-6 11-5 7-6 12-6 8-4 6-7 11-5 6-2 5-4 5-5 5-3 6-6 7-2 5-8 9-4 4h-2l-2 7-8 9-4 4h-2l-2 7-9 9-7 8-5 4-3 7-85 85h-5l-2 4-8 7-13 13-5 2-10 9-6 5-7 4-11 11-6 3-8 6-7 4-8 7-9 6-11 7-9 6-7 5-11 6-13 8-12 7-7 4-12 7-14 7-7 5-16 8-19 9-6 2-25 12-11 5-18 6-17 7-13 5-7 3-36 12-23 7-11 3-24 6-23 5-25 6-20 3-11 2-25 4-22 3-33 2-1 3h-176l-1-3-38-2-9-2-39-6-33-6-41-9-34-9-36-11-29-10-35-14-7-3-9-2-32-16-3-2-9-2-16-8-17-9-6-5-23-11-8-5-5-4-14-7-6-5-14-7-6-5-6-3-6-5-6-3-6-5-6-3-8-7v-2l-7-2-7-6-6-3-10-10-7-4-8-7-9-8-6-3-17-17-5-4-5-2-84-84-3-6-11-12-10-10-3-6-11-12-3-4-3-5-9-10-4-5-3-5-5-7-3-5-9-11-3-5-6-9-7-10-7-11-8-14-5-7-6-12-6-8-8-16-7-13-5-7-8-16-8-17-3-9-8-16-9-19-7-21-5-11-5-14-4-10-15-45-3-12-6-20-5-22-2-5-2-15-3-10-3-12-2-18-2-5-2-19-2-8-2-20-2-5-1-36-3-1v-175l3-3 1-30 1-7 2-4 1-20 3-7 1-16 3-12 2-16 5-18 3-18 2-5 2-11 5-18 5-16 3-12 16-48 4-8 4-12 5-11 7-21 16-32 3-10 13-26 12-20 4-8 8-15 5-7 6-12 6-8 6-12 6-8 6-9 7-11 3-3 3-6 8-9 6-10 3-3 3-6 13-14 3-6 8-9h2l5-10 7-7 2-3h2l2-4 9-9 2-5 11-11 2-3h2l2-4h2l2-4 6-5 6-7 6-5 5-6 7-6 2-3h2l2-4h2l2-4h2l2-4h2l2-4h2l1-3 8-7 6-5 6-4 9-9 8-7 5-4 6-4 12-11 9-6 11-10 10-6 11-8 9-7 33-22 17-10 13-8 7-4 10-6 19-10 7-4 10-6 19-10 9-4 9-3 32-16 11-3 2-2 10-2 2-2 7-3 11-3 2-2 7-3 11-3 2-2 10-2 2-2 10-2 2-2 10-2 2-2 11-1 5-3 10-2 2-2 14-2 3-2 13-2 4-2 16-2 2-2 14-2 3-2 17-1 5-2 1-1 18-1 8-3 25-1 1-3 38-1zm-323 644-2 2-11 3-1 1-9 2-19 10-8 8-5 2-12 11-2 2-2 6-7 7-6 10-5 11-3 9-3 11-2 3v52l3 7 5 17 9 17 10 12 3 5 4 5h2v2l9 6 11 9 19 10 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 17-9 11-9 6-4 7-6 4-5 3-6 8-9 5-9 5-14 7-21v-48l-4-11-6-17-7-14-9-10-3-6-9-10-11-7-9-8-16-8-11-3-6-2-7-3zm768 0-2 2-11 3-1 1-9 2-19 10-8 8-5 2-12 11-2 2-2 6-7 7-6 10-5 11-3 9-3 11-2 3v52l3 7 5 17 9 17 10 12 3 5 4 5h2v2l9 6 11 9 19 10 9 2 3 2 9 1v2l4 1h48l5-3 10-2 2-2 10-2 17-9 11-9 6-4 7-6 4-5 3-6 8-9 5-9 5-14 7-21v-48l-4-11-6-17-7-14-9-10-3-6-9-10-11-7-9-8-16-8-11-3-6-2-7-3zm-424 640-2 2-24 2-4 2-22 2-6 2-15 3-1 1-12 2-4 2-12 2-4 2-12 2-11 5-11 3-14 6-11 3-6 2-10 4-52 26-18 10-8 5-12 7-8 5-9 5-10 9-6 3-10 9-6 3-10 9-6 3-12 11-19 19-5 2-10 9-7 8-2 5-3 3v2h-2l-3 11-2 3v32l9 17 8 9 8 7 8 5 3 1v2l2 1 14 1v2l4 1h8l5-3 12-1 11-6 11-9 6-4 17-17 8-7 5-4 6-4 10-8 16-12 6-4 13-8 7-4 10-6 17-9 5-4 10-3 19-10 8-4 9-2 2-2 10-2 2-2 10-2 2-2 10-2 2-2 10-2 3-2 13-2 6-2 14-2 6-2 14-2 7-2 19-1 7-2 1-1h110l1 2 10 1 22 1v2l20 3 7 2 13 2 5 2 11 2 8 3 16 5 8 3 16 5 8 3 13 6 48 24 10 6 8 5 9 5 4 2 1 3 11 7 9 6 11 9 9 6 5 5h2l2 4h2l2 4h2l2 4h2l2 4h2v2l8 7 11 7 6 4h3v2l2 1h9l5 2 3 2 8-1 2-2 12-1 16-8 9-7 4-5 5-5 4-8 5-11v-30l-3-6-2-7-6-8-3-5-9-10-7-6-6-3-25-25-5-4-6-3-10-9-6-3-10-9-6-3-10-9-7-3-8-5-5-4-14-7-6-5-23-11-17-9-23-11-10-5-10-3-35-12-14-5-51-13-22-4-21-3-19-2-7-2z" fill="#C66021"/>
+</svg>

package/src/components/Chat.vue

@@ -20,12 +20,13 @@
     </div>
 
     <div class="w-full">
-      <form class="message-send" @submit.prevent="submitMessage">
+      <form class="message-send" @submit.prevent="(event) => submitMessage(event)">
         <div class="form-message">
           <div class="jl-inputgroup-chat">
             <textarea
               v-model="message"
               class="jl2-input-chat"
+              placeholder="Escribe tu mensaje"
               required
               ref="textAreaRef"
               @input="() => autoAdjustHeight()"
@@ -159,8 +160,8 @@ function saltoDeLineaOEnviar(event: KeyboardEvent) {
   submitMessage(event);
 }
 
-const submitMessage = async (event: Event) => {
-  if (message.value?.length > 300) {
+function createMessage(message: string) {
+  if (message?.length > 300) {
     emit("show-toast", {
       severity: "warn",
       summary: "Error",
@@ -170,7 +171,7 @@ const submitMessage = async (event: Event) => {
     return;
   }
 
-  if (!message.value.trim()) {
+  if (!message.trim()) {
     emit("show-toast", {
       severity: "warn",
       summary: "Error",
@@ -180,10 +181,10 @@ const submitMessage = async (event: Event) => {
     return;
   }
 
-  const newMessage = {
+  const newMessage: Message = {
     id: uuidv4(),
     chatId: information.value?.chat?.id,
-    message: message.value,
+    message,
     visto: true,
     multimedia: false,
     esCliente: true,
@@ -195,35 +196,98 @@ const submitMessage = async (event: Event) => {
       ci: props.user.ci,
       msPersonaId: props.user.msPersonaId,
     },
+    response: undefined
   };
+  
+  return newMessage
+}
 
-  const idx = messagesData.value.data.push(newMessage) - 1;
+function updateMessageStatus(
+  newMessage: Message,
+  idxMessageToCommunicate?: number,
+  messageSaved?: Message,
+  tipoCalificacionId?: number
+) {
+  if (!idxMessageToCommunicate) throw new Error('idx is required')
 
-  sendApi(message.value, appChatId.value).then((newMsg) => {
-    if (!newMsg) {
-      messagesData.value.data[idx].error = {
+  if (!messageSaved) {
+    if (tipoCalificacionId) {
+      const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+      messageAResponder.response = undefined
+    } else {
+      messagesData.value.data[idxMessageToCommunicate].error = {
         error: true,
         id: newMessage.id,
       };
+    }
 
-      emit("show-toast", {
-        severity: "error",
-        summary: "Error",
-        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
-        life: 5000,
-      });
-    } else {
-      messagesData.value.data[idx] = newMsg;
-
-      const message = { ...newMsg, chatId: newMessage.chatId };
-      socketService.value?.emit(
-        "sendMessage",
-        { roomId: information?.value?.appChat.id, message },
-        (response: any) => {
-          console.log("🚀 ~ socketService.value.emit ~ response:", response);
-        }
-      );
+    emit("show-toast", {
+      severity: "error",
+      summary: "Error",
+      detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+      life: 5000,
+    });
+    
+    return
+  }
+
+  let messageUpdated = { ...messageSaved, chatId: newMessage?.chatId }
+
+  if (tipoCalificacionId) {
+    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+    messageAResponder.response = messageSaved
+
+    messageUpdated = { ...messageAResponder, chatId: newMessage?.chatId }
+  } else {
+    messagesData.value.data[idxMessageToCommunicate] = messageUpdated;
+  }
+  
+  return messageUpdated;
+}
+
+const submitMessage = async (
+  event?: Event,
+  messageExtraData?: { mensajeARespondeId?: string, tipoCalificacionId?: number, codigoTipoMensaje?: number}
+) => {
+
+  const newMessage = createMessage(message.value);
+  
+  if (!newMessage) return;
+  
+  let idxMessageToCommunicate = -1;
+  if (messageExtraData?.tipoCalificacionId) {
+    idxMessageToCommunicate = messagesData.value.data.findIndex((val) => val.id === messageExtraData?.mensajeARespondeId )
+    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+
+    if ( messageAResponder ) {
+      messageAResponder.response = newMessage
     }
+  } else {
+    idxMessageToCommunicate = messagesData.value.data.push(newMessage) - 1;
+  }
+
+  const body = {
+    message: message.value,
+    appChatId: appChatId.value,
+    ...messageExtraData,
+  }
+  sendApi(body).then((messageSaved) => {
+    let messageUpdated = updateMessageStatus(
+      newMessage,
+      idxMessageToCommunicate,
+      messageSaved,
+      messageExtraData?.tipoCalificacionId
+    )
+    
+    if(!messageUpdated) return
+
+    socketService.value?.emit(
+      "sendMessage",
+      { roomId: information?.value?.appChat.id, message: messageUpdated },
+      (response: any) => {
+        console.log("🚀 ~ socketService.value.emit ~ response:", response);
+      }
+    );
   });
 
   message.value = "";
@@ -231,11 +295,10 @@ const submitMessage = async (event: Event) => {
   textAreaRef.value && (textAreaRef.value.style.height = "20px");
 };
 
-const sendApi = async (message: string, appChatId: string) => {
+const sendApi = async (bodyParam: Omit<SendMessageBody, 'esCliente'>) => {
   const body: SendMessageBody = {
+    ...bodyParam,
     esCliente: true,
-    message,
-    appChatId,
   };
   return sendMessageApi(body, props.tokenAuth);
 };
@@ -270,7 +333,10 @@ const retryMessage = async (message: Message) => {
   emit("show-confirm", async () => {
     if (!message.error?.id) return;
 
-    const msg = await sendApi(message.message, appChatId.value);
+    const msg = await sendApi({
+      message: message.message,
+      appChatId: appChatId.value
+    });
 
     if (!msg) {
       emit("show-toast", {
@@ -364,13 +430,19 @@ function connectMsWebSocket(
 
   socketService.value.on("receiveMessage", (data: any) => {
     console.log("Mensaje recibido:", data.message, userChat);
-
+    const indexMessage = messagesData.value.data.findIndex((msg) => msg.id === data.message.id);
+    
     if (
-      data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId
+      data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId && indexMessage === -1
     )
       return;
 
-    messagesData.value.data.push(data.message);
+    if (indexMessage !== -1) {
+        messagesData.value.data[indexMessage].response = data.message.response;
+    } else {
+        messagesData.value.data.push(data.message);
+    }
+
     setVistoToTrueApi(data.message.appChatId, props.tokenAuth);
     scrollToBottom();
     !props.visible && emit("new-message");
@@ -416,36 +488,13 @@ function getOS() {
   return os;
 }
 
-function onQualifying({ message, emoji }: { message: Message, emoji: {icon: string, value: number } }) {
+function onQualifying({ message: messageParam, emoji }: { message: Message, emoji: { iconUnicode: string, value: number } }) {
   const callback =  async () => {
-    if (!message.id || !emoji) return;
+    if (!messageParam.id || !emoji) return;
 
-    const idx = searchFromLast<Message>(
-        messagesData.value.data,
-        "id",
-        message.id
-      );
+    message.value = emoji.iconUnicode
     
-    let prevMessage = messagesData.value?.data?.[idx].message
-    messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = emoji.icon);
-
-    const msg = await updateMessageApi(message.id, { message: emoji.icon, tipoCalificacionId: emoji.value }, props.tokenAuth);
-
-    if (!msg) {
-      messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = prevMessage);
-      emit("show-toast", {
-        severity: "error",
-        summary: "Error",
-        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
-        life: 5000,
-      });
-      return 
-    }
-
-    socketService.value?.emit("sendMessage", {
-      roomId: information?.value?.appChat.id,
-      message,
-    });
+    submitMessage(undefined, { tipoCalificacionId: emoji.value, mensajeARespondeId: messageParam.id }).then();
   }
 
   emit('onQualifying', callback)

package/src/components/MessageList.vue

@@ -27,23 +27,30 @@
           <div class="bubble" :class="message.esCliente ? 'right' : 'left'">
             <div :class="message.esCliente ? 'content-right' : 'content-left'">
               <div v-if="message.message === '😊😄🙂😐🙁'" class="flex gap-2" >
-                <div>
-                  <strong style="display: block; margin-bottom: 0.5rem;">Ayúdanos a mejorar nuestro servicio.</strong>
-                  <span>Que le pareció la atención:</span>
+                <div class="mb-2">
+                  <strong style="display: block;">Ayúdanos a mejorar nuestro servicio.</strong>
+                  <span>¿Que le pareció la atención?</span>
                 </div>
+
                 <a 
-                  v-for="emoji in emojis"
-                  href="javascript:"
+                  v-for="emojiParam in emojis"
+                  :key="emojiParam.value"
+                  :href="!message.response ? 'javascript:' : undefined"
                   class="btn-icon"
-                  :key="emoji.value"
-                  @click="emit('onQualifying', { message, emoji })"
+                  :class="{ 'content-disabled' : !showIcon(message, emojiParam) }"
+                  @click="!message.response && emit('onQualifying', { message, emoji: emojiParam })"
                 >
                   <div class="flex flex-col items-center">
-                    <div class="icon">{{ emoji.icon }}</div>
-                    <span>{{ emoji.label }}</span>
+                    <img :src="emojiParam.icon" alt="icono" class="icon" />
+                    <span>{{ emojiParam.label }}</span>
                   </div>
                 </a>
               </div>
+
+              <div v-else-if="emoji[message.message ?? '']">
+                <img :src="emoji[message.message]" alt="icono" class="icon" />
+              </div>
+
               <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
               <div class="detail-message flex justify-content-between">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
@@ -76,6 +83,11 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { type Message } from "../dto/app.dto";
 import { DateTime } from "luxon";
 import DangerIcon from "./DangerIcon.vue";
+import SadIcon from '../assets/emojis/SadIcon.svg'
+import AngryIcon from '../assets/emojis/AngryIcon.svg'
+import HappiestIcon from '../assets/emojis/HappiestIcon.svg'
+import NeutralIcon from '../assets/emojis/NeutralIcon.svg'
+import HappyIcon from '../assets/emojis/HappyIcon.svg'
 
 const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
 const props = defineProps({
@@ -100,6 +112,12 @@ const { pause, resume } = useIntersectionObserver(
   }
 );
 
+function showIcon(message: Message, emojiParam: any) {
+  if(!message.response || typeof message.response !=='object') return true;
+
+  return emojiParam.iconUnicode === message.response.message
+}
+
 onBeforeMount(() => {
   if (!props.canLoadMoreMessages) {
     pause();
@@ -154,12 +172,21 @@ function textToRichFormat(text: string) {
 }
 
 const emojis = [
-  { label: 'Excelente', value: 1,  icon: '😊' },
-  { label: 'Buena', value: 2,  icon: '😄' },
-  { label: 'Aceptable', value: 3,  icon: '🙂' },
-  { label: 'Mala', value: 4,  icon: '😐' },
-  { label: 'Muy Mala', value: 5, icon: '🙁' },
+  { label: 'Excelente', value: 1,  icon: HappiestIcon, iconUnicode: '😊'},
+  { label: 'Buena', value: 2,  icon: HappyIcon, iconUnicode: '😄'},
+  { label: 'Aceptable', value: 3,  icon: NeutralIcon, iconUnicode: '🙂'},
+  { label: 'Mala', value: 4,  icon: SadIcon, iconUnicode: '😐'},
+  { label: 'Muy Mala', value: 5, icon: AngryIcon, iconUnicode: '🙁'},
 ]
+''
+const emoji: { [key in string]: any } = {
+  '😊': HappiestIcon,
+  '😄': HappyIcon,
+  '🙂': NeutralIcon,
+  '😐': SadIcon,
+  '🙁': AngryIcon,
+  '': null
+}
 
 </script>
 
@@ -287,12 +314,21 @@ const emojis = [
   width: 100%;
 }
 
+.icon {
+  width: 2rem;
+}
+
 .btn-icon {
   text-decoration: none;
   border: none;
+  color: rgb(156 163 175 / 1);
+}
+
+.btn-icon:hover:not(.content-disabled) {
+  color: rgb(31 41 55 / 1);
 }
+
 .btn-icon span {
-  color: currentColor;
   text-wrap: nowrap;
 }
 
@@ -314,4 +350,14 @@ const emojis = [
   gap: 0.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 8px;
+}
+
+.content-disabled {
+  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
+  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
+  opacity: 0.5;
+}
+
 </style>

package/src/components/__tests__/MessageList.spec.ts

@@ -0,0 +1,47 @@
+import { expect, it } from "vitest";
+import MessageList from "../MessageList.vue";
+import { describe } from "node:test";
+import { shallowMount } from "@vue/test-utils";
+
+describe("MessageList", () => {
+  const message =
+    "-*abc~*ad~aw _awd_ a ~testaaaaaa~* wdawdaw *aaaa_bbb_bbbbbbb* http://www.web.bo/notificacion";
+
+  it("is defined", () => {
+    expect(MessageList).toBeDefined();
+  });
+
+  describe("rich text", () => {
+    it("must contain bold text", () => {
+      const wrapper = shallowMount(MessageList);
+
+      const vm: any = wrapper.vm;
+
+      expect(vm.textToRichFormat(message)).toContain("<strong>");
+    });
+
+    it("must contain italic text", () => {
+      const wrapper = shallowMount(MessageList);
+
+      const vm: any = wrapper.vm;
+
+      expect(vm.textToRichFormat(message)).toContain("<i>");
+    });
+
+    it("must contain crossed out text", () => {
+      const wrapper = shallowMount(MessageList);
+
+      const vm: any = wrapper.vm;
+
+      expect(vm.textToRichFormat(message)).toContain("<del>");
+    });
+
+    it("must contain url text", () => {
+      const wrapper = shallowMount(MessageList);
+
+      const vm: any = wrapper.vm;
+
+      expect(vm.textToRichFormat(message)).toContain("<a");
+    });
+  });
+});