@1024pix/epreuves-components 0.5.0 → 0.7.0

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

@@ -0,0 +1,4 @@
+import { d as e } from "../_plugin-vue_export-helper-CAqLqAA7.js";
+import { I as m } from "../ImageQuiz.ce-DZvzQg_l.js";
+window.customElements.define("image-quiz", e(m));
+window.customElements.define("qcu-image", e(m));

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

@@ -0,0 +1,29 @@
+import { a as l, r as f, w, c as z, o as t, b as p, e as d, m as g, F as v, d as _ } from "../_plugin-vue_export-helper-CAqLqAA7.js";
+import { I as A } from "../ImageQuiz.ce-DZvzQg_l.js";
+const h = /* @__PURE__ */ l({
+  __name: "ImageQuizzes.ce",
+  props: {
+    quizzes: { type: Array }
+  },
+  emits: ["answer"],
+  setup(o, { emit: i }) {
+    const n = i, r = f(new Array(o.quizzes.length).fill(void 0));
+    w(() => {
+      if (!r.value.some((e) => e == null)) {
+        if (r.value.some((e) => e === "")) {
+          n("answer", "");
+          return;
+        }
+        n("answer", r.value.join(","));
+      }
+    });
+    function m(e, s) {
+      r.value[s] = e;
+    }
+    return (e, s) => (t(!0), z(v, null, p(e.quizzes, (u, a) => (t(), d(A, g({ key: a }, { ref_for: !0 }, u, {
+      "show-name": !0,
+      onAnswer: (c) => m(c, a)
+    }), null, 16, ["onAnswer"]))), 128));
+  }
+});
+window.customElements.define("image-quizzes", _(h));

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

@@ -1,12 +1,12 @@
-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";
+import { a as d, c as a, o as n, f as s, t, F as i, b as m, g as r, _ as p, d as f } from "../_plugin-vue_export-helper-CAqLqAA7.js";
+import { p as u, L as l } from "../LLMMessage.ce-DMKmB1ZN.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({
+}, x = /* @__PURE__ */ d({
   __name: "LLMCompareMessages.ce",
   props: {
     conversation1: { type: Object },
@@ -15,14 +15,14 @@ const g = {
     messages: { type: Array }
   },
   setup(N) {
-    return f(), (e, C) => (n(), a(i, null, [
+    return u(), (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", {
+        (n(!0), a(i, null, m(e.messages, (o, c) => (n(), a("div", {
           key: c,
           class: "llm-compare-messages__row"
         }, [
@@ -57,5 +57,5 @@ const g = {
       ])
     ], 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));
+}), 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:#fff7da}.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:#fff7da}.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", f(k));

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

@@ -1,5 +1,5 @@
-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";
+import { a as m, u as i, j as p, c as o, o as e, F as d, b as u, e as g, _ as f, d as h } from "../_plugin-vue_export-helper-CAqLqAA7.js";
+import { p as _, L as v } from "../LLMMessage.ce-DMKmB1ZN.js";
 const y = {
   class: "llm-messages",
   "aria-live": "polite"
@@ -10,19 +10,19 @@ const y = {
   },
   setup(t) {
     const a = t;
-    h();
-    const e = i();
+    _();
+    const s = i();
     function l() {
-      e.scrollTop = e.scrollHeight;
+      s.scrollTop = s.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, {
+    }), (r, B) => (e(), o("div", y, [
+      (e(!0), o(d, null, u(r.messages, (n, c) => (e(), g(v, {
         key: c,
-        message: r
+        message: n
       }, 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));
+}), w = ":host{height:100%;overflow:auto;scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){:host{scroll-behavior:auto}}.llm-messages{display:flex;flex-direction:column;gap:24px;padding:24px}", x = /* @__PURE__ */ f(L, [["styles", [w]]]);
+window.customElements.define("llm-messages", h(x));

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

@@ -0,0 +1,67 @@
+import { a as h, r as i, h as y, c, o as d, g as x, f as l, i as w, F as _, b as k, t as S, _ as C, d as L } from "../_plugin-vue_export-helper-CAqLqAA7.js";
+import "./llm-messages.ce.js.js";
+const N = { class: "prompt-select" }, P = { class: "prompt-select__options" }, B = ["disabled", "onClick"], E = /* @__PURE__ */ h({
+  __name: "LLMPromptSelect.ce",
+  props: {
+    messages: { type: Array },
+    prompts: { type: Array },
+    speed: { type: Number }
+  },
+  setup(f, { expose: b }) {
+    const t = f, s = i(t.messages), m = i(t.prompts.map((e) => ({
+      ...e,
+      disabled: !1
+    }))), r = i(!1);
+    function g() {
+      s.value = t.messages, m.value = t.prompts.map((e) => ({
+        ...e,
+        disabled: !1
+      })), r.value = !1;
+    }
+    b({
+      reset: g
+    });
+    async function v(e) {
+      const o = t.speed === 0 || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (s.value = [
+        ...s.value,
+        {
+          direction: "outbound",
+          content: e.prompt
+        },
+        {
+          direction: "inbound",
+          content: o ? e.response : ""
+        }
+      ], e.disabled = !0, o) return;
+      const a = s.value.length - 1;
+      r.value = !0;
+      const n = e.response.split(/(\s+|<[^>]+>)/);
+      for (const p of n)
+        await new Promise((u) => {
+          setTimeout(u, t.speed ?? 20);
+        }), s.value = [...s.value], s.value[a].content += p;
+      r.value = !1;
+    }
+    return (e, o) => {
+      const a = y("llm-messages");
+      return d(), c(_, null, [
+        x(a, { messages: s.value }, null, 8, ["messages"]),
+        l("div", N, [
+          o[0] || (o[0] = l("p", { class: "prompt-select__label" }, [
+            w(" Sélectionner un des prompts "),
+            l("span", { class: "sr-only" }, "  une fois sélectionnés, les prompts ne sont plus disponibles. ")
+          ], -1)),
+          l("div", P, [
+            (d(!0), c(_, null, k(m.value, (n, p) => (d(), c("button", {
+              key: p,
+              disabled: n.disabled || r.value,
+              onClick: (u) => v(n)
+            }, S(n.prompt), 9, B))), 128))
+          ])
+        ])
+      ], 64);
+    };
+  }
+}), M = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}llm-messages{display:block;height:400px}.prompt-select{border-top:solid 1px grey;padding:24px}.prompt-select__label{margin-top:0;font-weight:700}.prompt-select__options{display:flex;gap:1rem;justify-content:left;padding-bottom:1rem;flex-wrap:wrap}.prompt-select__options>button{padding:.5rem 1.5rem;border:none;background:#cec3f4;border-radius:5px;font-size:1rem}.prompt-select__options>button:hover:not(:disabled){background:#9a8dc7;color:#fff;cursor:pointer}.prompt-select__options>button:disabled{cursor:not-allowed}", V = /* @__PURE__ */ C(E, [["styles", [M]]]);
+window.customElements.define("llm-prompt-select", L(V));

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

@@ -1,9 +1,9 @@
-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";
+import { _ as f, c as i, o as t, a as x, r as D, s as v, y as S, q as h, z as u, f as p, i as b, t as _, g as $, F as y, b as w, e as M, d as A } from "../_plugin-vue_export-helper-CAqLqAA7.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) {
+function z(n, s) {
   return t(), i("div", V);
 }
-const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), z = ["part"], L = {
+const E = /* @__PURE__ */ f(B, [["render", z], ["styles", [C]]]), F = ["part"], L = {
   key: 1,
   class: "message__loader message__content",
   "aria-hidden": "true"
@@ -37,15 +37,15 @@ const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), z = ["part"],
       }, [
         a[0] || (a[0] = p("span", { class: "sr-only" }, "Message de ", -1)),
         b(_(e.message.userName), 1)
-      ], 8, z)) : u("", !0),
+      ], 8, F)) : u("", !0),
       s.value === "loading" ? (t(), i("div", L, [
-        $(F)
+        $(E)
       ])) : 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 }, [
+        (t(!0), i(y, null, w(m.value, (d, o) => (t(), i(y, { key: o }, [
           o > 0 ? (t(), i("br", j)) : u("", !0),
           b(" " + _(d), 1)
         ], 64))), 128))
@@ -70,8 +70,8 @@ const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), z = ["part"],
             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 }];
+          } = e.at(-1), k = a.direction !== l.direction || a.userName !== l.userName, N = c + g + s;
+          return [...e, { message: a, displaySender: k, startAnimation: N, animationDuration: o }];
         },
         []
       )
@@ -81,7 +81,7 @@ const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), z = ["part"],
     }
     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, {
+      (t(!0), i(y, null, w(m.value, ({ message: d, displaySender: o, startAnimation: l, animationDuration: c }, g) => (t(), M(P, {
         message: d,
         "start-animation": l,
         "animation-duration": c,

package/dist/index.js

@@ -1,4 +1,6 @@
 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";
+import "./components/llm-prompt-select.ce.js.js";
+import "./components/image-quiz.ce.js.js";
+import "./components/image-quizzes.ce.js.js";

package/package.json

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