@1024pix/epreuves-components 2.2.6 → 2.4.0

package/dist/components/clickable-image.ce.js.js

@@ -1,4 +1,4 @@
-import { d as E, g as O, r as x, h as P, j as W, k as c, c as d, o as p, a as w, l as _, m as j, F as D, b as L, q as V, t as y, v as q, x as T, y as U, z as X, A as Y, _ as G, f as H } from "../_plugin-vue_export-helper-D7ghZaw4.js";
+import { d as E, q as O, r as x, v as P, x as W, y as c, c as d, o as p, a as w, z as _, m as D, F as L, b as V, i as j, A as y, B as q, h as T, n as U, C as X, t as Y, _ as G, f as H } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
 import { u as C } from "../normalize-props-AlmAfi_u.js";
 const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "aria-label"], v = 10, Q = /* @__PURE__ */ E({
   __name: "ClickableImage.ce",
@@ -46,13 +46,13 @@ const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "
     function F(e) {
       i.value = e;
     }
-    function N() {
+    function B() {
       i.value = void 0;
     }
     const m = c(() => i.value ?? f.value), u = c(() => {
       if (m.value !== void 0)
         return h.value[m.value];
-    }), R = c(() => {
+    }), N = c(() => {
       if (!u.value) return {};
       const { tooltipPosition: e, coords: { x1: t, y1: o, x2: a, y2: s } } = u.value;
       switch (e) {
@@ -82,17 +82,17 @@ const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "
           };
       }
     });
-    function B() {
+    function R() {
       i.value = void 0;
     }
-    return S({ reset: B }), (e, t) => (p(), d("div", J, [
-      w("img", j(n.image, {
+    return S({ reset: R }), (e, t) => (p(), d("div", J, [
+      w("img", D(n.image, {
         ref: "image",
         onLoad: t[0] || (t[0] = (o) => g()),
-        onClick: t[1] || (t[1] = (o) => N()),
+        onClick: t[1] || (t[1] = (o) => B()),
         alt: ""
       }), null, 16),
-      (p(!0), d(D, null, L(h.value, (o, a) => (p(), d("button", {
+      (p(!0), d(L, null, V(h.value, (o, a) => (p(), d("button", {
         key: a,
         style: y({
           "--y1": `${o.coords.y1}px`,
@@ -105,7 +105,7 @@ const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "
         onMouseleave: t[2] || (t[2] = (s) => k()),
         onFocusin: (s) => $(a),
         onFocusout: t[3] || (t[3] = (s) => k()),
-        onClick: V((s) => F(a), ["stop"]),
+        onClick: j((s) => F(a), ["stop"]),
         "aria-label": o.info
       }, [
         T(A) ? (p(), d("span", {
@@ -120,7 +120,7 @@ const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "
       _(w("p", {
         class: "tooltip",
         "aria-hidden": "true",
-        style: y(R.value)
+        style: y(N.value)
       }, Y(u.value?.info), 5), [
         [X, u.value]
       ])

package/dist/components/complete-phrase.ce.js.js

@@ -1,83 +1,82 @@
-import { d as g, c as s, o as t, a, A as c, t as z, _ as y, y as S, C as M, G as R, r as b, k as w, v as T, F as $, b as q, e as k, D as L, f as V } from "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { a as E, i as P, b as I } from "../i18n-DX3ApBSH.js";
-import { u as D } from "../normalize-props-AlmAfi_u.js";
-import { L as B } from "../LLMMessage.ce-qbRxqNxR.js";
-const O = {}, F = {}, W = {}, G = {
-  "complete-phrase": { title: "Probabilité du mot suivant", description: "La barre indique la probabilité de chaque mot. Plus elle est longue, plus le mot est probable dans ce contexte.", ariaLabelDescription: "Le mot {{name}} a une probabilité de {{percent}}%", clickHereButton: "Révéler le mot", successfullyCompletedSentence: "Cliquez sur le mot choisit par l’IA dans les propositions suivantes :", feedback: "En effet, c'est le mot le plus probable !" }
-}, H = {}, Q = {}, U = { class: "probability-bar" }, J = { "aria-hidden": "true" }, K = { class: "sr-only" }, X = /* @__PURE__ */ g({
+import { d as h, c as n, o, a, t as c, A as S, _ as f, n as P, j as A, H as N, r as y, y as m, B as z, F as x, b as k, e as v, E as q, f as M } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { u as O, a as E, i as L, b as I } from "../i18n-ecSMtuba.js";
+import { u as R } from "../normalize-props-AlmAfi_u.js";
+import { L as B } from "../LLMMessage.ce-Cjpb0CiE.js";
+const T = {}, V = {}, D = {}, F = {
+  "complete-phrase": { title: "Probabilité du mot suivant", description: "Quand la barre est longue, le mot a une plus forte probabilité de convenir pour continuer cette phrase.", ariaLabelDescription: "Le mot {{name}} a une probabilité de {{percent}}%", clickHereButton: "Révéler le mot", successfullyCompletedSentence: "Cliquez sur le mot choisit par l’IA dans les propositions suivantes :", feedback: { sure: "En effet, c'est le mot le plus probable !", probably: "C’est possible ! Il peut aussi choisir le mot « {{word}} », qui est très probable...", notSure: "Pas sûr... Il choisira sans doute un mot plus probable : {{words, list(style: 'long'; type: 'disjunction';)}}." } }
+}, H = {}, Q = {}, W = { class: "probability-bar" }, U = { "aria-hidden": "true" }, G = { class: "sr-only" }, J = /* @__PURE__ */ h({
   __name: "ProbabilityBar.ce",
   props: {
     name: { type: String },
     percent: { type: Number }
   },
   setup(e) {
-    return (p, o) => (t(), s("div", U, [
-      a("p", J, c(e.name), 1),
-      a("p", K, c(p.$t("complete-phrase.ariaLabelDescription", { name: e.name, percent: e.percent })), 1),
+    return (d, t) => (o(), n("div", W, [
+      a("p", U, c(e.name), 1),
+      a("p", G, c(d.$t("complete-phrase.ariaLabelDescription", { name: e.name, percent: e.percent })), 1),
       a("div", {
-        style: z(`width: ${e.percent}%`),
+        style: S(`width: ${e.percent}%`),
         class: "probability-bar__percent",
         "aria-hidden": "true"
       }, null, 4),
-      o[0] || (o[0] = a("div", {
+      t[0] || (t[0] = a("div", {
         class: "probability-bar__background",
         "aria-hidden": "true"
       }, null, -1))
     ]));
   }
-}), Y = ".probability-bar[data-v-195ffe53]{font-family:Roboto,sans-serif;padding-bottom:10px;position:relative}.probability-bar p[data-v-195ffe53]{margin:0}.probability-bar__percent[data-v-195ffe53]{position:absolute;left:0;z-index:2;height:6px;border-radius:5px;background-color:var(--pix-neutral-900)}.probability-bar__background[data-v-195ffe53]{position:absolute;left:0;z-index:1;width:100%;height:6px;border-radius:5px;background-color:var(--pix-neutral-100)}.sr-only[data-v-195ffe53]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", Z = /* @__PURE__ */ y(X, [["styles", [Y]], ["__scopeId", "data-v-195ffe53"]]), ee = /* @__PURE__ */ g({
+}), K = ".probability-bar[data-v-19f7d147]{font-family:Roboto,sans-serif;padding-bottom:10px;position:relative}.probability-bar p[data-v-19f7d147]{margin:0}.probability-bar__percent[data-v-19f7d147]{position:absolute;left:0;z-index:2;height:6px;border-radius:5px;background-color:#122647}.probability-bar__background[data-v-19f7d147]{position:absolute;left:0;z-index:1;width:100%;height:6px;border-radius:5px;background-color:#cdd1d9}.sr-only[data-v-19f7d147]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", X = /* @__PURE__ */ f(J, [["styles", [K]], ["__scopeId", "data-v-19f7d147"]]), Y = /* @__PURE__ */ h({
   __name: "Button.ce",
   props: {
     label: { type: String },
     state: { type: String }
   },
   setup(e) {
-    return (p, o) => (t(), s("button", {
-      class: S(["complete-phrase_button", e.state])
+    return (d, t) => (o(), n("button", {
+      class: P(["complete-phrase_button", e.state])
     }, [
-      M(p.$slots, "icon"),
-      R(" " + c(e.label), 1)
+      A(d.$slots, "icon"),
+      N(" " + c(e.label), 1)
     ], 2));
   }
-}), te = ".complete-phrase_button{--pix-neutral-0: #fff;--pix-neutral-800: #253858;--pix-neutral-900: #122647;--pix-secondary-500: #ffcb33;--pix-secondary-700: #a16206}.complete-phrase_button.primary{--background-color: var(--pix-neutral-800);--background-color-hover: var(--pix-neutral-900);--color: var(--pix-neutral-0);--color-hover: var(--pix-neutral-0)}.complete-phrase_button.warning{--background-color: var(--pix-secondary-500);--background-color-hover: var(--pix-secondary-700);--color: var(--pix-neutral-900);--color-hover: var(--pix-neutral-0)}.complete-phrase_button.primary,.complete-phrase_button.warning{align-items:center;background-color:var(--background-color);border:2px solid transparent;border-radius:8px;color:var(--color);cursor:pointer;display:flex;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;justify-content:center;gap:8px;line-height:24px;margin:0 auto;outline:none;padding:8px 24px;transition:background-color ease .5s,color ease .5s;width:fit-content;white-space:nowrap}:is(.complete-phrase_button.primary,.complete-phrase_button.warning)[aria-disabled=true]{cursor:not-allowed;opacity:.5}:is(.complete-phrase_button.primary,.complete-phrase_button.warning):not([aria-disabled=true]):hover{background-color:var(--background-color-hover);color:var(--color-hover);transition:background-color ease .5s,color ease .5s}:is(.complete-phrase_button.primary,.complete-phrase_button.warning):not([aria-disabled=true]):hover svg{color:var(--color-hover);transition:color ease .5s}", ae = /* @__PURE__ */ y(ee, [["styles", [te]]]), oe = { class: "qcu" }, re = { class: "qcu__list" }, ie = ["id", "aria-label", "value", "checked", "disabled"], se = { for: "`choice${index}`" }, ne = {
+}), Z = ".complete-phrase_button.primary{--background-color: #253858;--background-color-hover: #122647;--color: #fff;--color-hover: #fff}.complete-phrase_button.warning{--background-color: #ffcb33;--background-color-hover: #a16206;--color: #122647;--color-hover: #fff}.complete-phrase_button.primary,.complete-phrase_button.warning{align-items:center;background-color:var(--background-color);border:2px solid transparent;border-radius:8px;color:var(--color);cursor:pointer;display:flex;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;justify-content:center;gap:8px;line-height:24px;margin:0 auto;outline:none;padding:8px 24px;transition:background-color ease .5s,color ease .5s;width:fit-content;white-space:nowrap}:is(.complete-phrase_button.primary,.complete-phrase_button.warning)[aria-disabled=true]{cursor:not-allowed;opacity:.5}:is(.complete-phrase_button.primary,.complete-phrase_button.warning):not([aria-disabled=true]):hover{background-color:var(--background-color-hover);color:var(--color-hover);transition:background-color ease .5s,color ease .5s}:is(.complete-phrase_button.primary,.complete-phrase_button.warning):not([aria-disabled=true]):hover svg{color:var(--color-hover);transition:color ease .5s}", ee = /* @__PURE__ */ f(Y, [["styles", [Z]]]), te = { class: "qcu" }, oe = { class: "qcu__list" }, ae = ["id", "onClick", "aria-label", "checked", "disabled"], se = { for: "`choice${index}`" }, ie = {
   key: 0,
   class: "feedback"
-}, le = /* @__PURE__ */ g({
+}, re = /* @__PURE__ */ h({
   __name: "QCU.ce",
   props: {
     list: { type: Array },
     title: { type: String }
   },
-  emits: ["visible"],
-  setup(e, { emit: p }) {
-    const o = p, r = b(null), m = w(() => e.list.find((n) => n.percent === 100).name), d = b(!1);
-    function u(n) {
-      r.value = n.target.value, m.value === r.value && (o("visible"), d.value = !0);
+  emits: ["answer"],
+  setup(e, { emit: d }) {
+    const t = d, s = y(null), { t: p } = O(), _ = m(() => s.value.percent === 100 ? p("complete-phrase.feedback.sure") : s.value.percent >= 50 ? p("complete-phrase.feedback.probably", { word: e.list.find((i) => i.percent === 100).name }) : p("complete-phrase.feedback.notSure", { words: e.list.filter((i) => i.percent >= 50).map((i) => i.name) }));
+    function g(i) {
+      s.value = i, t("answer", i.name);
     }
-    return (n, x) => (t(), s("div", oe, [
+    return (i, w) => (o(), n("div", te, [
       a("p", null, c(e.title), 1),
-      a("section", re, [
-        (t(!0), s($, null, q(e.list, (_, v) => (t(), s("div", {
+      a("section", oe, [
+        (o(!0), n(x, null, k(e.list, (r, l) => (o(), n("div", {
           class: "qcu__list-choice",
-          key: v
+          key: l
         }, [
           a("input", {
-            id: `choice${v}`,
+            id: `choice${l}`,
             type: "radio",
             name: "qcu-choice",
-            onClick: u,
-            "aria-label": _.name,
-            value: _.name,
-            checked: r.value === _.name,
-            disabled: d.value
-          }, null, 8, ie),
-          a("label", se, c(_.name), 1)
+            onClick: (u) => g(r),
+            "aria-label": r.name,
+            checked: s.value === r,
+            disabled: !!s.value
+          }, null, 8, ae),
+          a("label", se, c(r.name), 1)
         ]))), 128))
       ]),
-      m.value === r.value ? (t(), s("section", ne, c(n.$t("complete-phrase.feedback")), 1)) : T("", !0)
+      s.value ? (o(), n("section", ie, c(_.value), 1)) : z("", !0)
     ]));
   }
-}), ce = "[data-v-631720f6]{--pix-neutral-100: #cdd1d9;--pix-neutral-900: #122647;font-family:Roboto,sans-serif;color:var(--pix-neutral-900)}.qcu[data-v-631720f6]{align-items:center;display:flex;flex-direction:column;gap:16px}.qcu p[data-v-631720f6]{margin:0}.qcu__list[data-v-631720f6]{display:flex;gap:16px}.qcu__list-choice[data-v-631720f6]{position:relative}.qcu__list-choice input[data-v-631720f6]{appearance:none;height:100%;outline:none;position:absolute;width:100%}.qcu__list-choice input:checked+label[data-v-631720f6]{background-color:var(--pix-info-500);color:var(--pix-neutral-0)}.qcu__list-choice input[data-v-631720f6]:hover{cursor:pointer}.qcu__list-choice input:hover+label[data-v-631720f6]{background-color:var(--pix-info-500);color:var(--pix-neutral-0);transition:background-color .5s ease,color .5s ease}.qcu__list-choice input:disabled+label[data-v-631720f6],.qcu__list-choice input[data-v-631720f6]:disabled:hover{cursor:not-allowed}.qcu__list-choice input:disabled:not(:checked)+label[data-v-631720f6],.qcu__list-choice input:disabled:hover:not(:checked)+label[data-v-631720f6]{background:var(--pix-info-50);color:var(--pix-neutral-900);cursor:not-allowed;opacity:.5;transition:none}.qcu__list-choice label[data-v-631720f6]{align-items:center;background:var(--pix-info-50);border-radius:4px;color:inherit;display:flex;font-weight:700;gap:10px;justify-content:center;padding:4px 8px;transition:background-color .5s ease,color .5s ease}.qcu .feedback[data-v-631720f6]{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;background:var(--pix-info-50)}", pe = /* @__PURE__ */ y(le, [["styles", [ce]], ["__scopeId", "data-v-631720f6"]]), de = { class: "complete-phrase" }, ue = ["aria-level"], be = { class: "complete-phrase__description" }, me = { class: "complete-phrase__container" }, _e = { class: "complete-phrase-container__conversation" }, fe = { class: "complete-phrase-container__probabilities" }, ve = ["id", "aria-hidden"], he = /* @__PURE__ */ g({
+}), ne = "[data-v-74566fe6]{font-family:Roboto,sans-serif;color:#122647}.qcu[data-v-74566fe6]{align-items:center;display:flex;flex-direction:column;gap:16px}.qcu p[data-v-74566fe6]{margin:0}.qcu__list[data-v-74566fe6]{display:flex;gap:16px}.qcu__list-choice[data-v-74566fe6]{position:relative}.qcu__list-choice input[data-v-74566fe6]{appearance:none;height:100%;outline:none;position:absolute;width:100%}.qcu__list-choice input:checked+label[data-v-74566fe6]{background-color:#3b82f6;color:#fff}.qcu__list-choice input[data-v-74566fe6]:hover{cursor:pointer}.qcu__list-choice input:hover+label[data-v-74566fe6]{background-color:#3b82f6;color:#fff;transition:background-color .5s ease,color .5s ease}.qcu__list-choice input:disabled+label[data-v-74566fe6],.qcu__list-choice input[data-v-74566fe6]:disabled:hover{cursor:not-allowed}.qcu__list-choice input:disabled:not(:checked)+label[data-v-74566fe6],.qcu__list-choice input:disabled:hover:not(:checked)+label[data-v-74566fe6]{background:#e6f2fe;color:#122647;cursor:not-allowed;opacity:.5;transition:none}.qcu__list-choice label[data-v-74566fe6]{align-items:center;background:#e6f2fe;border-radius:4px;color:inherit;display:flex;font-weight:700;gap:10px;justify-content:center;padding:4px 8px;transition:background-color .5s ease,color .5s ease}.qcu .feedback[data-v-74566fe6]{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;background:#e6f2fe}", le = /* @__PURE__ */ f(re, [["styles", [ne]], ["__scopeId", "data-v-74566fe6"]]), ce = { class: "complete-phrase" }, de = ["aria-level"], pe = { class: "complete-phrase__description" }, ue = { class: "complete-phrase__container" }, be = { class: "complete-phrase-container__conversation" }, me = { class: "complete-phrase-container__probabilities" }, he = ["id", "aria-hidden"], fe = /* @__PURE__ */ h({
   __name: "CompletePhrase.ce",
   props: {
     listOfProbabilityBarsLists: { type: Array },
@@ -86,84 +85,79 @@ const O = {}, F = {}, W = {}, G = {
     wordsToAdd: { type: Array },
     titleLevel: { type: Number }
   },
-  setup(e, { expose: p }) {
-    const o = e, r = b(0), m = b(o.llmMessage), d = b(!1), u = b(o.wordsToAdd), n = b(!1), x = w(() => {
-      const [i] = o.listOfProbabilityBarsLists.filter((l, f) => f === r.value);
-      return i;
-    }), _ = w(() => {
-      let [i] = u.value, l = "complete-message-word";
-      if (d.value) {
-        const [f] = x.value;
-        i = f.name, l += ` complete-message-word--${n.value ? "visible" : "hidden"}`;
-      }
-      return `<p>${m.value} <span class="${l}">${i}</span></p>`;
+  setup(e, { expose: d }) {
+    const t = y(0), s = y(null), p = m(() => t.value === e.listOfProbabilityBarsLists.length - 1), _ = m(() => e.listOfProbabilityBarsLists[e.listOfProbabilityBarsLists.length - 1]), g = m(() => {
+      const r = e.wordsToAdd[t.value] ?? s.value ?? e.listOfProbabilityBarsLists[t.value][0].name, l = ["complete-message-word"];
+      return p.value && l.push(`complete-message-word--${s.value ? "visible" : "hidden"}`), `<p>
+  ${e.llmMessage}
+  ${e.wordsToAdd.slice(0, t.value).map((u) => `<span class="complete-message-word">${u}</span>`).join(" ")}
+  <span class="${l.join(" ")}">${r}</span>
+</p>`;
     });
-    function v() {
-      d.value = !1, m.value = o.llmMessage, u.value = o.wordsToAdd, r.value = 0;
+    function i() {
+      t.value = 0, s.value = null;
     }
-    function N() {
-      u.value.length === 1 && (d.value = !0), r.value += 1;
-      const [i, ...l] = u.value;
-      u.value = l, m.value += `<span class="complete-message-word">${i} </span>`;
+    function w() {
+      t.value += 1;
     }
-    return p({
-      reset: v
-    }), (i, l) => (t(), s("div", de, [
+    return d({
+      reset: i
+    }), (r, l) => (o(), n("div", ce, [
       a("div", {
         class: "complete-phrase__title",
         role: "heading",
         "aria-level": e.titleLevel
-      }, c(i.$t("complete-phrase.title")), 9, ue),
-      a("p", be, c(i.$t("complete-phrase.description")), 1),
-      a("section", me, [
-        a("div", _e, [
-          L(B, {
+      }, c(r.$t("complete-phrase.title")), 9, de),
+      a("p", pe, c(r.$t("complete-phrase.description")), 1),
+      a("section", ue, [
+        a("div", be, [
+          q(B, {
             class: "container__message",
             message: { content: e.userMessage, direction: "outbound" }
           }, null, 8, ["message"]),
-          L(B, {
+          q(B, {
             class: "container__message",
-            message: { content: _.value, direction: "inbound" }
+            message: { content: g.value, direction: "inbound" }
           }, null, 8, ["message"])
         ]),
-        a("div", fe, [
-          (t(!0), s($, null, q(e.listOfProbabilityBarsLists, (f, h) => (t(), s("div", {
-            class: S(["probability", { hidden: h !== r.value }]),
-            key: h,
-            id: `currentProbability${h}`,
-            "aria-hidden": h !== r.value
+        a("div", me, [
+          (o(!0), n(x, null, k(e.listOfProbabilityBarsLists, (u, b) => (o(), n("div", {
+            class: P(["probability", { hidden: b !== t.value }]),
+            key: b,
+            id: `currentProbability${b}`,
+            "aria-hidden": b !== t.value
           }, [
-            (t(!0), s($, null, q(f, (C, j) => (t(), k(Z, {
-              name: C.name,
-              percent: C.percent,
+            (o(!0), n(x, null, k(u, ($, j) => (o(), v(X, {
+              name: $.name,
+              percent: $.percent,
               key: j
             }, null, 8, ["name", "percent"]))), 128))
-          ], 10, ve))), 128))
+          ], 10, he))), 128))
         ])
       ]),
-      d.value ? (t(), k(pe, {
-        key: 1,
-        list: x.value,
-        title: i.$t("complete-phrase.successfullyCompletedSentence"),
-        onVisible: l[0] || (l[0] = (f) => n.value = !0)
-      }, null, 8, ["list", "title"])) : (t(), k(ae, {
+      p.value ? (o(), v(le, {
         key: 0,
-        onClick: N,
+        list: _.value,
+        title: r.$t("complete-phrase.successfullyCompletedSentence"),
+        onAnswer: l[0] || (l[0] = (u) => s.value = u)
+      }, null, 8, ["list", "title"])) : (o(), v(ee, {
+        key: 1,
+        onClick: w,
         state: "primary",
-        label: i.$t("complete-phrase.clickHereButton"),
-        "aria-describedby": `currentProbability${r.value}`
+        label: r.$t("complete-phrase.clickHereButton"),
+        "aria-describedby": `currentProbability${t.value}`
       }, null, 8, ["label", "aria-describedby"]))
     ]));
   }
-}), ge = "[data-v-be9b10f3]{--pix-info-50: #e6f2fe;--pix-info-500: #3b82f6;--pix-neutral-0: #fff;--pix-neutral-100: #cdd1d9;--pix-neutral-900: #122647;font-family:Roboto,sans-serif;color:var(--pix-neutral-900)}.complete-phrase__title[data-v-be9b10f3]{font-family:Nunito,sans-serif;font-size:1.75rem;font-weight:700;line-height:36px;text-align:center}.complete-phrase__description[data-v-be9b10f3]{text-align:center;font-size:1rem;font-weight:400;line-height:24px}.complete-phrase__container[data-v-be9b10f3]{display:grid;gap:32px;grid-template-columns:3fr 2fr;margin-bottom:24px}.complete-phrase-container__conversation[data-v-be9b10f3]{background:#fff;border:1px solid var(--pix-neutral-100);border-radius:16px;display:flex;flex-direction:column;gap:32px;padding:1rem}.complete-phrase-container__conversation .message[data-v-be9b10f3]{align-items:center}.complete-phrase-container__probabilities[data-v-be9b10f3]{display:grid}.complete-phrase-container__probabilities .probability[data-v-be9b10f3]{display:flex;flex-direction:column;gap:16px;grid-row:1;grid-column:1}.complete-phrase-container__probabilities .probability.hidden[data-v-be9b10f3]{visibility:hidden}@media(max-width:600px){.complete-phrase__container[data-v-be9b10f3]{grid-template-columns:1fr}.complete-phrase-container__probabilities .probability.hidden[data-v-be9b10f3]{display:none}}", ye = /* @__PURE__ */ y(he, [["styles", [ge]], ["__scopeId", "data-v-be9b10f3"]]);
-E(/* @__PURE__ */ Object.assign({ "./locales/en.json": O, "./locales/es-419.json": F, "./locales/es.json": W, "./locales/fr.json": G, "./locales/it.json": H, "./locales/nl.json": Q })).catch((e) => console.error(e));
-const A = V(ye, {
+}), _e = "*{font-family:Roboto,sans-serif;color:#122647}.complete-phrase__title{font-family:Nunito,sans-serif;font-size:1.75rem;font-weight:700;line-height:36px;text-align:center}.complete-phrase__description{text-align:center;font-size:1rem;font-weight:400;line-height:24px}.complete-phrase__container{display:grid;gap:32px;grid-template-columns:3fr 2fr;margin-bottom:24px}.complete-phrase-container__conversation{background:#fff;border:1px solid #cdd1d9;border-radius:16px;display:flex;flex-direction:column;gap:32px;padding:1rem}.complete-phrase-container__conversation .message{align-items:center}.complete-phrase-container__probabilities{display:grid}.complete-phrase-container__probabilities .probability{display:flex;flex-direction:column;gap:16px;grid-row:1;grid-column:1}.complete-phrase-container__probabilities .probability.hidden{visibility:hidden}.complete-message-word:last-child{border:none;filter:blur(4px);font-weight:600;height:auto;width:auto}.complete-message-word--visible:last-child{color:inherit;filter:none;font-weight:700}.complete-message-word--hidden:last-child{background-color:#f4f5f7;border-radius:4px;border:1px dashed #5e6c84;color:transparent;display:inline-block;filter:none;padding:2px 4px}.complete-message-word:nth-last-child(2){font-weight:600}@media(max-width:600px){.complete-phrase__container{grid-template-columns:1fr}.complete-phrase-container__probabilities .probability.hidden{display:none}}", ge = /* @__PURE__ */ f(fe, [["styles", [_e]]]);
+E(/* @__PURE__ */ Object.assign({ "./locales/en.json": T, "./locales/es-419.json": V, "./locales/es.json": D, "./locales/fr.json": F, "./locales/it.json": H, "./locales/nl.json": Q })).catch((e) => console.error(e));
+const C = M(ge, {
   configureApp(e) {
-    P.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(I, { i18next: P });
+    L.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(I, { i18next: L });
   }
 });
-A.prototype.normalizeProps = (e) => ({
+C.prototype.normalizeProps = (e) => ({
   ...e,
-  titleLevel: D(e.titleLevel)
+  titleLevel: R(e.titleLevel)
 });
-window.customElements.define("complete-phrase", A);
+window.customElements.define("complete-phrase", C);

package/dist/components/flip-cards.ce.js.js

@@ -1,6 +1,6 @@
-import { d as m, c as n, o as d, F as u, a as t, y as v, x as p, A as f, v as y, _ as h, r as w, b as k, J as g, D as F, f as _ } from "../_plugin-vue_export-helper-D7ghZaw4.js";
+import { d as m, c as n, o as d, F as u, a as t, n as v, h as p, t as f, B as y, _ as h, r as w, b as k, L as g, E as F, f as _ } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
 import { u as L } from "../normalize-props-AlmAfi_u.js";
-const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"], $ = ["aria-level"], B = { class: "description" }, U = { class: "image-container" }, j = ["src"], D = /* @__PURE__ */ m({
+const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"], $ = ["aria-level"], B = { class: "description" }, E = { class: "image-container" }, U = ["src"], j = /* @__PURE__ */ m({
   __name: "FlipCard.ce",
   props: {
     titleLevel: { type: Number },
@@ -39,17 +39,17 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
           class: "title"
         }, f(e.name), 9, $),
         t("p", B, f(e.description), 1),
-        t("div", U, [
+        t("div", E, [
           p(l) ? (d(), n("img", {
             key: 0,
             src: p(l),
             alt: ""
-          }, null, 8, j)) : y("", !0)
+          }, null, 8, U)) : y("", !0)
         ])
       ], 10, S)
     ], 64));
   }
-}), E = "[data-v-897a493f]{box-sizing:border-box}.card[data-v-897a493f]{align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border-radius:12px;color:#253858;display:flex;flex-direction:column;gap:1.2rem;inset:0;justify-content:center;padding:18px;position:absolute;transform:translateZ(0);transition:transform ease .5s}.card .title[data-v-897a493f]{font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;line-height:29px}.card.recto.red[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ff7373)}.card.recto.yellow[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ffec73)}.card.recto.blue[data-v-897a493f]{background:linear-gradient(150deg,#fff,#2491ff)}.card.recto.purple[data-v-897a493f]{background:linear-gradient(150deg,#fff,#9177f2)}.card.recto.green[data-v-897a493f]{background:linear-gradient(150deg,#fff,#52d987)}.card.recto.pink[data-v-897a493f]{background:linear-gradient(150deg,#fff,#f041bf)}.card.recto .icon[data-v-897a493f]{display:block;height:auto;width:40px}.card.verso[data-v-897a493f]{line-height:1.2rem;padding:8px;text-align:center;transform:rotateY(180deg) translateZ(0)}.card.verso.flipped.red[data-v-897a493f]{border:2px solid #ff7373}.card.verso.flipped.yellow[data-v-897a493f]{border:2px solid #ffec73}.card.verso.flipped.blue[data-v-897a493f]{border:2px solid #2491ff}.card.verso.flipped.purple[data-v-897a493f]{border:2px solid #9177f2}.card.verso.flipped.green[data-v-897a493f]{border:2px solid #52d987}.card.verso.flipped.pink[data-v-897a493f]{border:2px solid #f041bf}.card.verso .description[data-v-897a493f]{font-size:.9rem;margin:0 0 8px}.card.verso .image-container[data-v-897a493f]{margin:8px 8px 16px;overflow:hidden;width:160px}.card.verso img[data-v-897a493f]{display:block;height:100%;object-fit:contain;width:100%}", K = /* @__PURE__ */ h(D, [["styles", [E]], ["__scopeId", "data-v-897a493f"]]), V = { class: "flip-cards" }, A = ["aria-level"], I = ["aria-expanded", "onClick", "onKeydown"], R = { class: "flip-container" }, Y = /* @__PURE__ */ m({
+}), K = "[data-v-897a493f]{box-sizing:border-box}.card[data-v-897a493f]{align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border-radius:12px;color:#253858;display:flex;flex-direction:column;gap:1.2rem;inset:0;justify-content:center;padding:18px;position:absolute;transform:translateZ(0);transition:transform ease .5s}.card .title[data-v-897a493f]{font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;line-height:29px}.card.recto.red[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ff7373)}.card.recto.yellow[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ffec73)}.card.recto.blue[data-v-897a493f]{background:linear-gradient(150deg,#fff,#2491ff)}.card.recto.purple[data-v-897a493f]{background:linear-gradient(150deg,#fff,#9177f2)}.card.recto.green[data-v-897a493f]{background:linear-gradient(150deg,#fff,#52d987)}.card.recto.pink[data-v-897a493f]{background:linear-gradient(150deg,#fff,#f041bf)}.card.recto .icon[data-v-897a493f]{display:block;height:auto;width:40px}.card.verso[data-v-897a493f]{line-height:1.2rem;padding:8px;text-align:center;transform:rotateY(180deg) translateZ(0)}.card.verso.flipped.red[data-v-897a493f]{border:2px solid #ff7373}.card.verso.flipped.yellow[data-v-897a493f]{border:2px solid #ffec73}.card.verso.flipped.blue[data-v-897a493f]{border:2px solid #2491ff}.card.verso.flipped.purple[data-v-897a493f]{border:2px solid #9177f2}.card.verso.flipped.green[data-v-897a493f]{border:2px solid #52d987}.card.verso.flipped.pink[data-v-897a493f]{border:2px solid #f041bf}.card.verso .description[data-v-897a493f]{font-size:.9rem;margin:0 0 8px}.card.verso .image-container[data-v-897a493f]{margin:8px 8px 16px;overflow:hidden;width:160px}.card.verso img[data-v-897a493f]{display:block;height:100%;object-fit:contain;width:100%}", V = /* @__PURE__ */ h(j, [["styles", [K]], ["__scopeId", "data-v-897a493f"]]), D = { class: "flip-cards" }, I = ["aria-level"], R = ["aria-expanded", "onClick", "onKeydown"], Y = { class: "flip-container" }, Z = /* @__PURE__ */ m({
   __name: "FlipCards.ce",
   props: {
     titleLevel: { default: 2, type: Number },
@@ -66,12 +66,12 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
     ), s = (i, c) => {
       c.preventDefault(), i.isFlipped = !i.isFlipped;
     };
-    return (i, c) => (d(), n("div", V, [
+    return (i, c) => (d(), n("div", D, [
       t("div", {
         role: "heading",
         "aria-level": e.titleLevel,
         class: "sr-only"
-      }, f(e.name), 9, A),
+      }, f(e.name), 9, I),
       (d(!0), n(u, null, k(l.value, (a, x) => (d(), n("div", {
         key: x,
         class: v(["card-container", { flipped: a.isFlipped, [a.color]: a.color }]),
@@ -84,8 +84,8 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
           g((r) => s(a, r), ["space"])
         ]
       }, [
-        t("div", R, [
-          F(K, {
+        t("div", Y, [
+          F(V, {
             color: a.color,
             description: a.description,
             icon: a.icon,
@@ -95,10 +95,10 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
             "title-level": e.titleLevel + 1
           }, null, 8, ["color", "description", "icon", "image", "is-flipped", "name", "title-level"])
         ])
-      ], 42, I))), 128))
+      ], 42, R))), 128))
     ]));
   }
-}), Z = "[data-v-394f37d2]{box-sizing:border-box}.sr-only[data-v-394f37d2]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.flip-cards[data-v-394f37d2]{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:100%;padding:0}.flip-cards .card-container[data-v-394f37d2]{cursor:pointer;flex:0 0 180px;height:250px;margin:0;perspective:1200px;outline:none;transform:scale(1);transition:transform ease .5s}.flip-cards .card-container[data-v-394f37d2]:hover,.flip-cards .card-container[data-v-394f37d2]:focus{transform:scale(1.05);transition:transform ease .5s;outline:none}.flip-cards .card-container .flip-container[data-v-394f37d2]{display:block;position:relative;width:100%;height:100%;padding:18px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}.flip-cards .card-container.flipped .flip-container[data-v-394f37d2]{transform:rotateY(180deg)}", J = /* @__PURE__ */ h(Y, [["styles", [Z]], ["__scopeId", "data-v-394f37d2"]]), b = _(J);
+}), A = "[data-v-394f37d2]{box-sizing:border-box}.sr-only[data-v-394f37d2]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.flip-cards[data-v-394f37d2]{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:100%;padding:0}.flip-cards .card-container[data-v-394f37d2]{cursor:pointer;flex:0 0 180px;height:250px;margin:0;perspective:1200px;outline:none;transform:scale(1);transition:transform ease .5s}.flip-cards .card-container[data-v-394f37d2]:hover,.flip-cards .card-container[data-v-394f37d2]:focus{transform:scale(1.05);transition:transform ease .5s;outline:none}.flip-cards .card-container .flip-container[data-v-394f37d2]{display:block;position:relative;width:100%;height:100%;padding:18px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}.flip-cards .card-container.flipped .flip-container[data-v-394f37d2]{transform:rotateY(180deg)}", P = /* @__PURE__ */ h(Z, [["styles", [A]], ["__scopeId", "data-v-394f37d2"]]), b = _(P);
 b.prototype.normalizeProps = (e) => ({
   ...e,
   titleLevel: L(e.titleLevel)

package/dist/components/image-quiz.ce.js.js

@@ -1,5 +1,5 @@
-import "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { n as p } from "../image-quiz.ce-3HDl6Z67.js";
+import "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { n as p } from "../image-quiz.ce-CpI6lZ9m.js";
 import "../normalize-props-AlmAfi_u.js";
 export {
   p as normalizeImageQuizProps

package/dist/components/image-quizzes.ce.js.js

@@ -1,5 +1,5 @@
-import { d as l, r as f, w, c as p, o, b as g, e as d, m as q, F as v, f as y } from "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { I as A, n as I } from "../image-quiz.ce-3HDl6Z67.js";
+import { d as l, r as f, w, c as p, o, b as g, e as d, m as q, F as v, f as y } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { I as A, n as I } from "../image-quiz.ce-CpI6lZ9m.js";
 const _ = /* @__PURE__ */ l({
   __name: "ImageQuizzes.ce",
   props: {

package/dist/components/llm-compare-messages.ce.js.js

@@ -1,6 +1,6 @@
-import { d as c, c as t, o as s, a as e, A as n, F as r, b as m, D as i, _ as p, f as g } from "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { L as l } from "../LLMMessage.ce-qbRxqNxR.js";
-import { p as u } from "../shadow-dom-CFAQERh6.js";
+import { d as c, c as t, o as s, a as e, t as n, F as r, b as m, E as i, _ as p, f as g } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { L as l } from "../LLMMessage.ce-Cjpb0CiE.js";
+import { p as u } from "../shadow-dom-DZbyKUWP.js";
 const f = {
   class: "header",
   "aria-hidden": "true"

package/dist/components/llm-messages.ce.js.js

@@ -1,6 +1,6 @@
-import { d as c, H as m, I as i, c as t, o as e, F as p, b as d, e as f, _ as g, f as u } from "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { L as h } from "../LLMMessage.ce-qbRxqNxR.js";
-import { p as _ } from "../shadow-dom-CFAQERh6.js";
+import { d as c, I as m, J as i, c as t, o as e, F as p, b as d, e as f, _ as g, f as u } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { L as h } from "../LLMMessage.ce-Cjpb0CiE.js";
+import { p as _ } from "../shadow-dom-DZbyKUWP.js";
 const x = {
   class: "llm-messages",
   "aria-live": "polite"

package/dist/components/llm-prompt-select.ce.js.js

@@ -1,7 +1,7 @@
-import { d as h, r as c, E as y, c as d, o as m, D as w, a, G as k, F as b, b as L, A as S, _ as C, f as P } from "../_plugin-vue_export-helper-D7ghZaw4.js";
+import { d as h, r as c, G as y, c as d, o as m, E as w, a, H as k, F as b, b as L, t as S, _ as C, f as P } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
 import { u as N } from "../normalize-props-AlmAfi_u.js";
 import "./llm-messages.ce.js.js";
-const E = { class: "prompt-select" }, M = { class: "prompt-select__options" }, A = ["disabled", "onClick"], B = /* @__PURE__ */ h({
+const E = { class: "prompt-select" }, M = { class: "prompt-select__options" }, B = ["disabled", "onClick"], V = /* @__PURE__ */ h({
   __name: "LLMPromptSelect.ce",
   props: {
     messages: { type: Array },
@@ -58,13 +58,13 @@ const E = { class: "prompt-select" }, M = { class: "prompt-select__options" }, A
               key: i,
               disabled: n.disabled || l.value,
               onClick: (f) => v(n)
-            }, S(n.prompt), 9, A))), 128))
+            }, S(n.prompt), 9, B))), 128))
           ])
         ])
       ], 64);
     };
   }
-}), V = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}llm-messages{display:block;height:400px}.prompt-select{font-family:Roboto,sans-serif;border-top:solid 1px #253858;padding:16px 24px 24px}.prompt-select__label{margin-top:0;font-weight:700;color:#253858}.prompt-select__options{display:flex;gap:1rem;justify-content:left;flex-wrap:wrap}.prompt-select__options>button{padding:1rem 1.5rem;border:none;background:#cec3f4;border-radius:16px;border:1px solid #ffffff;color:#130261;font-size:.875rem;box-shadow:0 4px 12px -4px #957ee833}.prompt-select__options>button:hover:not(:disabled){background:#9a8dc7;color:#fff;cursor:pointer}.prompt-select__options>button:disabled{cursor:not-allowed;color:#1010104d}", z = /* @__PURE__ */ C(B, [["styles", [V]]]), _ = P(z);
+}), z = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}llm-messages{display:block;height:400px}.prompt-select{font-family:Roboto,sans-serif;border-top:solid 1px #253858;padding:16px 24px 24px}.prompt-select__label{margin-top:0;font-weight:700;color:#253858}.prompt-select__options{display:flex;gap:1rem;justify-content:left;flex-wrap:wrap}.prompt-select__options>button{padding:1rem 1.5rem;border:none;background:#cec3f4;border-radius:16px;border:1px solid #ffffff;color:#130261;font-size:.875rem;box-shadow:0 4px 12px -4px #957ee833}.prompt-select__options>button:hover:not(:disabled){background:#9a8dc7;color:#fff;cursor:pointer}.prompt-select__options>button:disabled{cursor:not-allowed;color:#1010104d}", A = /* @__PURE__ */ C(V, [["styles", [z]]]), _ = P(A);
 _.prototype.normalizeProps = (r) => ({
   ...r,
   speed: N(r.speed)

package/dist/components/message-conversation.ce.js.js

@@ -1,11 +1,11 @@
-import { d as S, r as x, k as D, h as B, c as n, o as s, y as k, v as g, a as _, G as w, A as v, D as E, K as z, m as P, F as b, b as M, _ as N, g as T, e as V, f as F } from "../_plugin-vue_export-helper-D7ghZaw4.js";
-import { L } from "../Loading.ce-CiVWBT3g.js";
+import { d as M, r as x, y as S, v as B, c as n, o as s, n as w, B as g, a as _, H as k, t as v, E, M as z, m as P, F as b, b as N, _ as D, q as T, e as V, f as F } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
+import { L } from "../Loading.ce-1tk4uU9c.js";
 import { u as j, a as I } from "../normalize-props-AlmAfi_u.js";
-const O = ["part"], G = {
+const O = ["part"], q = {
   key: 1,
   class: "message__loader message__content",
   "aria-hidden": "true"
-}, K = ["part"], R = { key: 1 }, q = { key: 0 }, H = /* @__PURE__ */ S({
+}, H = ["part"], R = { key: 1 }, G = { key: 0 }, J = /* @__PURE__ */ M({
   __name: "Message.ce",
   props: {
     displaySender: { type: Boolean, default: !0 },
@@ -15,7 +15,7 @@ const O = ["part"], G = {
     loadingDuration: { type: Number }
   },
   setup(e, { expose: d }) {
-    const i = x("hidden"), l = x([]), p = D(() => e.message.content.split(`
+    const i = x("hidden"), l = x([]), p = S(() => e.message.content.split(`
 `));
     function m(t) {
       return new Promise((a) => {
@@ -33,7 +33,7 @@ const O = ["part"], G = {
     return d({
       reset: f
     }), (t, a) => (s(), n("div", {
-      class: k(["message", [
+      class: w(["message", [
         `message--${e.message.direction}`,
         { "hidden-state": i.value === "hidden" }
       ]])
@@ -44,25 +44,25 @@ const O = ["part"], G = {
         part: `sender ${e.message.direction}`
       }, [
         a[0] || (a[0] = _("span", { class: "sr-only" }, "Message de ", -1)),
-        w(v(e.message.userName), 1)
+        k(v(e.message.userName), 1)
       ], 8, O)) : g("", !0),
-      i.value === "loading" ? (s(), n("div", G, [
+      i.value === "loading" ? (s(), n("div", q, [
         E(L)
       ])) : g("", !0),
       _("p", {
-        class: k(["message__content", { "hidden-state": i.value !== "visible" }]),
+        class: w(["message__content", { "hidden-state": i.value !== "visible" }]),
         part: `message ${e.message.direction}`
       }, [
         e.message.image ? (s(), n("img", z(P({ key: 0 }, e.message.image)), null, 16)) : g("", !0),
         e.message.image ? (s(), n("br", R)) : g("", !0),
-        (s(!0), n(b, null, M(p.value, (o, r) => (s(), n(b, { key: r }, [
-          r > 0 ? (s(), n("br", q)) : g("", !0),
-          w(" " + v(o), 1)
+        (s(!0), n(b, null, N(p.value, (o, r) => (s(), n(b, { key: r }, [
+          r > 0 ? (s(), n("br", G)) : g("", !0),
+          k(" " + v(o), 1)
         ], 64))), 128))
-      ], 10, K)
+      ], 10, H)
     ], 2));
   }
-}), J = ".message{max-width:80%;position:relative}.message--incoming{align-self:start}.message--incoming .message__sender{padding-left:10px}.message--incoming .message__loader{left:10px}.message--incoming .message__content{background-color:#e8e8e8}.message--outgoing{align-self:end}.message--outgoing .message__sender{padding-right:10px;text-align:right}.message--outgoing .message__loader{right:10px}.message--outgoing .message__content{background-color:#d1eaff}.message__sender{color:#444;font-size:.8rem;font-weight:700;margin:0}.message__loader{position:absolute;width:24px}.message__content{border-radius:16px;margin:0;padding:10px 14px}.message__content:not(.hidden-state){animation:fade .3s ease-in-out both}.message__content>img{max-width:100%}.hidden-state{visibility:hidden}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.message__content:not(.hidden-state){animation:none}.message__loader{display:none}.hidden-state{visibility:visible}}", Q = /* @__PURE__ */ N(H, [["styles", [J]]]), U = { part: "conversation" }, W = { class: "sr-only" }, X = /* @__PURE__ */ S({
+}), K = ".message{max-width:80%;position:relative}.message--incoming{align-self:start}.message--incoming .message__sender{padding-left:10px}.message--incoming .message__loader{left:10px}.message--incoming .message__content{background-color:#e8e8e8}.message--outgoing{align-self:end}.message--outgoing .message__sender{padding-right:10px;text-align:right}.message--outgoing .message__loader{right:10px}.message--outgoing .message__content{background-color:#d1eaff}.message__sender{color:#444;font-size:.8rem;font-weight:700;margin:0}.message__loader{position:absolute;width:24px}.message__content{border-radius:16px;margin:0;padding:10px 14px}.message__content:not(.hidden-state){animation:fade .3s ease-in-out both}.message__content>img{max-width:100%}.hidden-state{visibility:hidden}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.message__content:not(.hidden-state){animation:none}.message__loader{display:none}.hidden-state{visibility:visible}}", Q = /* @__PURE__ */ D(J, [["styles", [K]]]), U = { part: "conversation" }, W = { class: "sr-only" }, X = /* @__PURE__ */ M({
   __name: "MessageConversation.ce",
   props: {
     title: { default: "Conversation par messages", type: String },
@@ -70,7 +70,7 @@ const O = ["part"], G = {
     animationSpeed: { default: 20, type: Number }
   },
   setup(e, { expose: d }) {
-    const i = 50 * e.animationSpeed, l = 50 * e.animationSpeed, p = D(
+    const i = 50 * e.animationSpeed, l = 50 * e.animationSpeed, p = S(
       () => e.messages.reduce(
         (t, a, o) => {
           const r = c(a);
@@ -80,8 +80,8 @@ const O = ["part"], G = {
             message: u,
             startAnimation: y,
             animationDuration: h
-          } = t.at(-1), C = a.direction !== u.direction || a.userName !== u.userName, $ = y + h + i;
-          return [...t, { message: a, displaySender: C, startAnimation: $, animationDuration: r }];
+          } = t.at(-1), A = a.direction !== u.direction || a.userName !== u.userName, $ = y + h + i;
+          return [...t, { message: a, displaySender: A, startAnimation: $, animationDuration: r }];
         },
         []
       )
@@ -97,7 +97,7 @@ const O = ["part"], G = {
       reset: f
     }), (t, a) => (s(), n("figure", U, [
       _("figcaption", W, v(e.title), 1),
-      (s(!0), n(b, null, M(p.value, ({ message: o, displaySender: r, startAnimation: u, animationDuration: y }, h) => (s(), V(Q, {
+      (s(!0), n(b, null, N(p.value, ({ message: o, displaySender: r, startAnimation: u, animationDuration: y }, h) => (s(), V(Q, {
         ref_for: !0,
         ref: "messages",
         message: o,
@@ -109,8 +109,8 @@ const O = ["part"], G = {
       }, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
     ]));
   }
-}), Y = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", Z = /* @__PURE__ */ N(X, [["styles", [Y]]]), A = F(Z);
-A.prototype.normalizeProps = (e) => ({
+}), Y = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", Z = /* @__PURE__ */ D(X, [["styles", [Y]]]), C = F(Z);
+C.prototype.normalizeProps = (e) => ({
   ...e,
   animationSpeed: j(e.animationSpeed),
   messages: e.messages.map((d) => ({
@@ -118,4 +118,4 @@ A.prototype.normalizeProps = (e) => ({
     image: I(d.image)
   }))
 });
-window.customElements.define("message-conversation", A);
+window.customElements.define("message-conversation", C);