@1024pix/epreuves-components 0.4.1 → 0.5.0

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

@@ -0,0 +1,61 @@
+import { d as m, c as a, o as n, a as s, t, F as i, r as d, b as r, _ as p, e as u } from "../_plugin-vue_export-helper-rf--DmCY.js";
+import { p as f, L as l } from "../LLMMessage.ce-CklO8QgD.js";
+const g = {
+  class: "header",
+  "aria-hidden": "true"
+}, h = { class: "sr-only" }, v = { class: "llm-compare-messages" }, _ = { class: "conversation1" }, y = { class: "conversation2" }, b = { class: "conversation1" }, w = {
+  "aria-hidden": "true",
+  class: "conversation2"
+}, x = /* @__PURE__ */ m({
+  __name: "LLMCompareMessages.ce",
+  props: {
+    conversation1: { type: Object },
+    conversation2: { type: Object },
+    userName: { type: String },
+    messages: { type: Array }
+  },
+  setup(N) {
+    return f(), (e, C) => (n(), a(i, null, [
+      s("div", g, [
+        s("p", null, t(e.conversation1.title), 1),
+        s("p", null, t(e.conversation2.title), 1)
+      ]),
+      s("p", h, " Comparaison entre la conversation " + t(e.conversation1.title) + " et la conversation " + t(e.conversation2.title), 1),
+      s("div", v, [
+        (n(!0), a(i, null, d(e.messages, (o, c) => (n(), a("div", {
+          key: c,
+          class: "llm-compare-messages__row"
+        }, [
+          Array.isArray(o) ? (n(), a(i, { key: 0 }, [
+            s("div", _, [
+              r(l, {
+                message: o[0],
+                name: e.conversation1.llmName
+              }, null, 8, ["message", "name"])
+            ]),
+            s("div", y, [
+              r(l, {
+                message: o[1],
+                name: e.conversation2.llmName
+              }, null, 8, ["message", "name"])
+            ])
+          ], 64)) : (n(), a(i, { key: 1 }, [
+            s("div", b, [
+              r(l, {
+                message: o,
+                name: e.userName
+              }, null, 8, ["message", "name"])
+            ]),
+            s("div", w, [
+              r(l, {
+                message: o,
+                name: e.userName
+              }, null, 8, ["message", "name"])
+            ])
+          ], 64))
+        ]))), 128))
+      ])
+    ], 64));
+  }
+}), L = '*{box-sizing:border-box}:host{display:flex;flex-direction:column}.llm-compare-messages{display:flex;flex-direction:column;padding:24px;gap:24px;position:relative;height:100%;overflow:auto}.llm-compare-messages:after{content:"";position:absolute;height:100%;top:0;left:50%;border-left:dashed 1px grey}.llm-compare-messages__row{display:flex;flex-direction:row;justify-content:space-between}.llm-compare-messages__row>div{display:flex;flex-direction:column;width:calc(50% - 12px)}.conversation1 .inbound .bubble{background:#e9f4c3}.header{display:flex}.header p{background:#e6eaf2;display:flex;width:50%;justify-content:center;align-items:center;padding:1rem;margin:0;font-size:1.2rem;font-weight:700}.header p:first-child{background:#e9f4c3}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}', k = /* @__PURE__ */ p(x, [["styles", [L]]]);
+window.customElements.define("llm-compare-messages", u(k));

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

@@ -0,0 +1,28 @@
+import { d as m, u as i, w as p, c as o, o as s, F as g, r as d, f, _ as u, e as _ } from "../_plugin-vue_export-helper-rf--DmCY.js";
+import { p as h, L as w } from "../LLMMessage.ce-CklO8QgD.js";
+const y = {
+  class: "llm-messages",
+  "aria-live": "polite"
+}, L = /* @__PURE__ */ m({
+  __name: "LLMMessages.ce",
+  props: {
+    messages: { type: Array }
+  },
+  setup(t) {
+    const a = t;
+    h();
+    const e = i();
+    function l() {
+      e.scrollTop = e.scrollHeight;
+    }
+    return p(async () => {
+      a.messages, l();
+    }), (n, B) => (s(), o("div", y, [
+      (s(!0), o(g, null, d(n.messages, (r, c) => (s(), f(w, {
+        key: c,
+        message: r
+      }, null, 8, ["message"]))), 128))
+    ]));
+  }
+}), v = ":host{height:100%;overflow:auto;scroll-behavior:smooth}.llm-messages{display:flex;flex-direction:column;gap:24px;padding:24px}", x = /* @__PURE__ */ u(L, [["styles", [v]]]);
+window.customElements.define("llm-messages", _(x));

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

@@ -0,0 +1,95 @@
+import { _ as f, c as i, o as t, d as x, g as D, k as v, l as S, n as h, p as u, a as p, q as b, t as _, b as $, F as y, r as k, f as M, e as A } from "../_plugin-vue_export-helper-rf--DmCY.js";
+const C = ".loader{width:8px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;transform:translate(100%)}@keyframes l5{0%{box-shadow:13px 0 #000,-13px 0 #0002;background:#000}33%{box-shadow:13px 0 #000,-13px 0 #0002;background:#0002}66%{box-shadow:13px 0 #0002,-13px 0 #000;background:#0002}to{box-shadow:13px 0 #0002,-13px 0 #000;background:#000}}@media (prefers-reduced-motion: reduce){.loader{display:none}}", B = {}, V = { class: "loader" };
+function E(n, s) {
+  return t(), i("div", V);
+}
+const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), z = ["part"], L = {
+  key: 1,
+  class: "message__loader message__content",
+  "aria-hidden": "true"
+}, T = ["part"], j = { key: 0 }, q = /* @__PURE__ */ x({
+  __name: "Message.ce",
+  props: {
+    displaySender: { type: Boolean, default: !0 },
+    message: { type: Object },
+    startAnimation: { type: Number },
+    animationDuration: { type: Number },
+    loadingDuration: { type: Number }
+  },
+  setup(n) {
+    const s = D("hidden"), m = v(() => n.message.content.split(`
+`));
+    function r(e) {
+      return new Promise((a) => setTimeout(a, e));
+    }
+    return S(async () => {
+      await r(n.startAnimation), s.value = "loading", await r(n.loadingDuration), s.value = "visible", await r(n.animationDuration);
+    }), (e, a) => (t(), i("div", {
+      class: h(["message", [
+        `message--${e.message.direction}`,
+        { "hidden-state": s.value === "hidden" }
+      ]])
+    }, [
+      e.displaySender ? (t(), i("p", {
+        key: 0,
+        class: "message__sender",
+        part: `sender ${e.message.direction}`
+      }, [
+        a[0] || (a[0] = p("span", { class: "sr-only" }, "Message de ", -1)),
+        b(_(e.message.userName), 1)
+      ], 8, z)) : u("", !0),
+      s.value === "loading" ? (t(), i("div", L, [
+        $(F)
+      ])) : u("", !0),
+      p("p", {
+        class: h(["message__content", { "hidden-state": s.value !== "visible" }]),
+        part: `message ${e.message.direction}`
+      }, [
+        (t(!0), i(y, null, k(m.value, (d, o) => (t(), i(y, { key: o }, [
+          o > 0 ? (t(), i("br", j)) : u("", !0),
+          b(" " + _(d), 1)
+        ], 64))), 128))
+      ], 10, T)
+    ], 2));
+  }
+}), O = ".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}.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}}", P = /* @__PURE__ */ f(q, [["styles", [O]]]), G = { part: "conversation" }, H = { class: "sr-only" }, I = /* @__PURE__ */ x({
+  __name: "MessageConversation.ce",
+  props: {
+    title: { default: "Conversation par messages", type: String },
+    messages: { type: Array },
+    animationSpeed: { default: 20, type: Number }
+  },
+  setup(n) {
+    const s = 50 * n.animationSpeed, m = v(
+      () => n.messages.reduce(
+        (e, a, d) => {
+          const o = r(a);
+          if (d === 0)
+            return [{ message: a, displaySender: !0, startAnimation: 0, animationDuration: o }];
+          const {
+            message: l,
+            startAnimation: c,
+            animationDuration: g
+          } = e.at(-1), w = a.direction !== l.direction || a.userName !== l.userName, N = c + g + s;
+          return [...e, { message: a, displaySender: w, startAnimation: N, animationDuration: o }];
+        },
+        []
+      )
+    );
+    function r(e) {
+      return e.content.length * n.animationSpeed;
+    }
+    return (e, a) => (t(), i("figure", G, [
+      p("figcaption", H, _(e.title), 1),
+      (t(!0), i(y, null, k(m.value, ({ message: d, displaySender: o, startAnimation: l, animationDuration: c }, g) => (t(), M(P, {
+        message: d,
+        "start-animation": l,
+        "animation-duration": c,
+        "loading-duration": s,
+        "display-sender": o,
+        key: g
+      }, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
+    ]));
+  }
+}), J = "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:rect(0,0,0,0);white-space:nowrap;border:0}", K = /* @__PURE__ */ f(I, [["styles", [J]]]);
+window.customElements.define("message-conversation", A(K));

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

@@ -0,0 +1,97 @@
+import { d as y, g as w, h as C, c as l, o as n, i as g, j as h, n as x, a as k, m as $, t as v, _ as b, k as p, s as N, F as P, r as B, f as S, e as z } from "../_plugin-vue_export-helper-rf--DmCY.js";
+function j(c, t = L) {
+  const a = [...c];
+  for (let o = a.length - 1; o > 0; o--) {
+    const e = t() % (o + 1);
+    [a[o], a[e]] = [a[e], a[o]];
+  }
+  return a;
+}
+function L() {
+  return Math.floor(Math.random() * 2 ** 32);
+}
+const E = ["aria-checked", "tabindex"], I = { key: 0 }, q = /* @__PURE__ */ y({
+  __name: "ImageChoice.ce",
+  props: {
+    choice: { type: Object },
+    maxChoicesPerLine: { type: Number },
+    imageClass: { type: String },
+    nameClass: { type: String },
+    checked: { type: Boolean },
+    focusable: { type: Boolean }
+  },
+  emits: ["check", "checkNext", "checkPrevious"],
+  setup(c) {
+    const t = c, a = w();
+    C(() => {
+      var e;
+      t.checked && ((e = a.value) == null || e.focus());
+    });
+    const o = `image-choice-${(t.choice.response ?? t.choice.name).replace(/[^\w\-_:.]/g, "")}`;
+    return (e, i) => (n(), l("li", {
+      ref_key: "el",
+      ref: a,
+      role: "radio",
+      class: x(["image-choice", `image-choice--max${t.maxChoicesPerLine}`]),
+      "aria-labelledby": o,
+      "aria-checked": e.checked,
+      tabindex: e.focusable ? 0 : -1,
+      onClick: i[0] || (i[0] = h((r) => e.$emit("check"), ["stop"])),
+      onKeydown: [
+        i[1] || (i[1] = g(h((r) => e.$emit("check"), ["stop", "prevent"]), ["enter", "space"])),
+        i[2] || (i[2] = g(h((r) => e.$emit("checkPrevious"), ["stop", "prevent"]), ["up", "left"])),
+        i[3] || (i[3] = g(h((r) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
+      ]
+    }, [
+      e.choice.image ? (n(), l("figure", I, [
+        k("img", $(e.choice.image, {
+          class: e.imageClass,
+          alt: ""
+        }), null, 16),
+        k("figcaption", {
+          class: x(e.nameClass),
+          id: o
+        }, v(e.choice.name), 3)
+      ])) : (n(), l("span", {
+        key: 1,
+        id: o
+      }, v(e.choice.name), 1))
+    ], 42, E));
+  }
+}), M = 'ul,li{padding:0;margin:0}li{list-style:none}.image-choice{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;margin:1em;border:solid 2px #c1c7d0;border-radius:10px;background:#fff;width:calc(20% - 2em);min-width:120px}.image-choice--max4{width:calc(25% - 2em);min-width:175px}.image-choice--max3{width:calc(33% - 2em)}.image-choice--max2{width:calc(50% - 2em);min-width:300px}.image-choice--max1{width:calc(100% - 4em);min-width:300px}.image-choice:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.image-choice:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.image-choice[aria-checked=true]{border-color:#3d68ff}.image-choice[aria-checked=true]:after{content:"";position:absolute;width:100%;height:100%;background:#3d68ff4d;border-radius:10px;z-index:3}.image-choice figure{width:100%;padding:0 10px;margin:3px;text-align:center}.image-choice figure img{max-width:100%;height:auto}.image-choice figure img.icon{max-height:100px;width:auto}.image-choice figure img.medium{max-width:50%;height:auto}.image-choice figure figcaption{margin:1ex}', A = /* @__PURE__ */ b(q, [["styles", [M]]]), F = ["aria-label"], K = /* @__PURE__ */ y({
+  __name: "QCUImage.ce",
+  props: {
+    choices: { type: Array },
+    maxChoicesPerLine: { default: 5, type: Number },
+    name: { type: String },
+    hideChoicesName: { type: Boolean },
+    orderChoices: { type: Boolean },
+    imageChoicesSize: { default: "icon", type: String }
+  },
+  emits: ["answer"],
+  setup(c, { emit: t }) {
+    const a = t, o = p(() => c.hideChoicesName ? "sr-only" : ""), e = p(() => c.orderChoices ? c.choices : j(c.choices)), i = N(), r = p(() => i.value ?? e.value[0]);
+    function u(s) {
+      s === -1 ? i.value = e.value[e.value.length - 1] : s === e.value.length ? i.value = e.value[0] : i.value = e.value[s], a("answer", i.value.response ?? i.value.name);
+    }
+    return (s, R) => (n(), l("ul", {
+      role: "radiogroup",
+      class: "qcu-image",
+      "aria-label": s.name
+    }, [
+      (n(!0), l(P, null, B(e.value, (d, m) => (n(), S(A, {
+        choice: d,
+        "max-choices-per-line": s.maxChoicesPerLine,
+        key: m,
+        "name-class": o.value,
+        "image-class": c.imageChoicesSize,
+        checked: d === i.value,
+        focusable: d === r.value,
+        onCheck: (f) => u(m),
+        onCheckNext: (f) => u(m + 1),
+        onCheckPrevious: (f) => u(m - 1)
+      }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "checked", "focusable", "onCheck", "onCheckNext", "onCheckPrevious"]))), 128))
+    ], 8, F));
+  }
+}), O = "*{box-sizing:border-box}.qcu-image{display:flex;width:100%;flex-wrap:wrap;justify-content:space-around;font-size:110%;font-family:Open Sans,Arial,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}", Q = /* @__PURE__ */ b(K, [["styles", [O]]]);
+window.customElements.define("qcu-image", z(Q));

package/dist/index.js

@@ -1,3 +1,4 @@
-import "./components/message-conversation.js";
-import "./components/qcu-image.js";
-import "./components/cartes-a-retourner.js";
+import "./components/message-conversation.ce.js.js";
+import "./components/llm-messages.ce.js.js";
+import "./components/llm-compare-messages.ce.js.js";
+import "./components/qcu-image.ce.js.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/epreuves-components",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A collection of interactive components to be used in Pix challenges or modules",
   "exports": {
     ".": "./dist/index.js",