@websolutespa/bom-mixer-llm 1.8.21 → 1.8.23

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.23
+
+### Patch Changes
+
+- Added: Speech.cancel
+- Modified: style
+
+## 1.8.22
+
+### Patch Changes
+
+- Modified: suggestions a11y
+
 ## 1.8.21
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -362,7 +362,7 @@ llm-embed {
 }
 
 .llm__container {
-  margin: 0 clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
+  padding: 0 clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
 }
 
 .llm .llm__stream-error .llm__text-body {
@@ -673,6 +673,8 @@ llm-embed {
   flex-direction: column;
   justify-content: center;
   min-height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 .llm.-embedded .llm__main {
   width: 100%;
@@ -1111,19 +1113,19 @@ llm-embed {
   width: 100%;
 }
 .llm .llm__prompt-input.-speech-synthesis > .llm__prompt-textarea {
-  padding-left: 40px;
+  padding-left: 50px;
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-input.-speech-synthesis > .llm__prompt-textarea {
-    padding-left: 40px;
+    padding-left: 50px;
   }
 }
 .llm .llm__prompt-input.-speech-recognition > .llm__prompt-textarea {
-  padding-right: 40px;
+  padding-right: 50px;
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-input.-speech-recognition > .llm__prompt-textarea {
-    padding-right: 40px;
+    padding-right: 50px;
   }
 }
 .llm .llm__prompt-input .llm__busyIndicator {
@@ -1162,7 +1164,6 @@ llm-embed {
   display: block;
   width: 100%;
   min-height: 0;
-  padding: var(--llm-size-3, 1.5rem) var(--llm-size-3, 1.5rem);
   margin: 0;
   border: none;
   resize: none;
@@ -1174,9 +1175,12 @@ llm-embed {
   background: transparent;
   color: var(--llm-input-foreground);
   pointer-events: auto;
+  overflow: clip;
   cursor: pointer;
   outline: 2px solid transparent;
   outline-offset: 2px;
+  padding: 8px var(--llm-size-2, 1rem);
+  field-sizing: content;
 }
 .llm .llm__prompt-textarea:focus {
   outline-color: currentColor;
@@ -1194,6 +1198,11 @@ llm-embed {
 .llm .llm__prompt-textarea[aria-disabled=true]::placeholder {
   color: transparent;
 }
+@media (min-width: 768px) {
+  .llm .llm__prompt-textarea {
+    padding: var(--llm-size-3, 1.5rem) var(--llm-size-3, 1.5rem);
+  }
+}
 .llm .llm__prompt-speak, .llm .llm__prompt-microphone {
   margin: 0;
   padding: 0;
@@ -1330,30 +1339,43 @@ llm-embed {
   max-width: calc(100% + var(--margin) * 2);
   margin: 0 var(--negative-margin);
   padding: 4px var(--margin);
-  overflow-x: auto;
-  overflow-y: hidden;
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  /* Hide scrollbar for IE, Edge and Firefox */
-}
-.llm .llm__prompt-suggestions .llm__suggestions::-webkit-scrollbar {
-  display: none;
+  flex-wrap: wrap;
+  /* if device has a touch screen */
+  /* if device has no touch screen */
+  /*
+  @media (any-pointer: fine) {
+  }
+  */
 }
-.llm .llm__prompt-suggestions .llm__suggestions {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
+@media (any-pointer: coarse) {
+  .llm .llm__prompt-suggestions .llm__suggestions {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    /* Hide scrollbar for IE, Edge and Firefox */
+  }
+  .llm .llm__prompt-suggestions .llm__suggestions::-webkit-scrollbar {
+    display: none;
+  }
+  .llm .llm__prompt-suggestions .llm__suggestions {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+  .llm .llm__prompt-suggestions .llm__suggestions .llm__pill {
+    white-space: nowrap;
+  }
 }
 .llm .llm__prompt-suggestions .llm__suggestions .llm__pill {
-  white-space: nowrap;
+  box-shadow: var(--llm-shadow-xs);
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-suggestions .llm__suggestions {
     max-width: calc(100% + 8px);
     margin: 0 -4px;
     padding: 4px;
-    flex-wrap: wrap;
-    overflow: hidden;
   }
 }
 .llm .llm__prompt-suggestions .swiper {
@@ -1852,8 +1874,12 @@ llm-embed {
   */
 }
 .llm .llm__cards {
-  width: 100%;
-  margin: 0 auto calc(var(--rem, 1rem) * 3) auto;
+  width: calc(100% + clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * 2);
+  margin-left: calc(clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * -1);
+  margin-right: calc(clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * -1);
+  overflow: hidden;
+  padding-left: clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
+  padding-right: clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
   overflow: hidden;
 }
 .llm .llm__cards .swiper {
@@ -2960,9 +2986,9 @@ llm-embed {
   width: calc(100% + clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * 2);
   margin-left: calc(clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * -1);
   margin-right: calc(clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)) * -1);
+  overflow: hidden;
   padding-left: clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
   padding-right: clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1));
-  overflow: hidden;
 }
 .llm .llm__events .swiper {
   position: relative;

package/dist/cjs/index.js

@@ -99,16 +99,24 @@ function __asyncGenerator(thisArg, _arguments, generator) {
   var g = generator.apply(thisArg, _arguments || []),
     i,
     q = [];
-  return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () {
+  return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () {
     return this;
   }, i;
-  function verb(n) {
-    if (g[n]) i[n] = function (v) {
-      return new Promise(function (a, b) {
-        q.push([n, v, a, b]) > 1 || resume(n, v);
-      });
+  function awaitReturn(f) {
+    return function (v) {
+      return Promise.resolve(v).then(f, reject);
     };
   }
+  function verb(n, f) {
+    if (g[n]) {
+      i[n] = function (v) {
+        return new Promise(function (a, b) {
+          q.push([n, v, a, b]) > 1 || resume(n, v);
+        });
+      };
+      if (f) i[n] = f(i[n]);
+    }
+  }
   function resume(n, v) {
     try {
       step(g[n](v));
@@ -2132,6 +2140,15 @@ class Speech extends Emitter$1 {
       this.textToSpeech_.speak(text);
     }
   }
+  cancel() {
+    try {
+      if (this.textToSpeech_) {
+        this.textToSpeech_.cancel();
+      }
+    } catch (error) {
+      console.log('Speech.cancel.error', error);
+    }
+  }
   recognizeStart() {
     if (this.speechToText_) {
       this.speechToText_.start(this.lang);
@@ -2928,6 +2945,7 @@ const createLlmStore = _ref => {
         }));
       }),
       send: (prompt, onPrompt, onMessage, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
+        speech.cancel();
         const state = get();
         messageService = new MessageService({
           apiKey,
@@ -3006,6 +3024,7 @@ const createLlmStore = _ref => {
         });
       }),
       abort: () => {
+        speech.cancel();
         if (messageService) {
           messageService.abort();
           messageService = undefined;
@@ -3590,7 +3609,7 @@ function Canvas() {
 }
 
 const Header = props => {
-  var _a, _b;
+  var _a, _b, _c;
   const app = useLlm(state => state.app);
   const {
     open
@@ -3601,7 +3620,8 @@ const Header = props => {
   const label = bomMixerHooks.useLabel();
   const logo = app === null || app === void 0 ? void 0 : app.contents.logo;
   const logoMini = (_a = app === null || app === void 0 ? void 0 : app.contents) === null || _a === void 0 ? void 0 : _a.logoMini;
-  const additionalLogos = (_b = app === null || app === void 0 ? void 0 : app.contents) === null || _b === void 0 ? void 0 : _b.additionalLogos;
+  const openingSound = (_b = app === null || app === void 0 ? void 0 : app.contents) === null || _b === void 0 ? void 0 : _b.openingSound;
+  const additionalLogos = (_c = app === null || app === void 0 ? void 0 : app.contents) === null || _c === void 0 ? void 0 : _c.additionalLogos;
   const classes = bomCore.getClassNames('llm__header', {
     hidden,
     fixed
@@ -3635,11 +3655,17 @@ const Header = props => {
         href: "#llm-prompt-textarea",
         className: "llm__header-skip",
         children: label('llm.skip')
-      }), dismissable && jsxRuntime.jsxs("button", {
-        type: "button",
-        className: "llm__header-back -llm-t-cta3",
-        onClick: () => open(),
-        children: [label('llm.back'), jsxRuntime.jsx(bomMixerIcons.IconLlmArrowCornerRightUp, {})]
+      }), dismissable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs("button", {
+          type: "button",
+          className: "llm__header-back -llm-t-cta3",
+          onClick: () => open(),
+          children: [label('llm.back'), jsxRuntime.jsx(bomMixerIcons.IconLlmArrowCornerRightUp, {})]
+        }), openingSound && jsxRuntime.jsx("audio", {
+          src: openingSound.src || openingSound.url,
+          autoPlay: true,
+          loop: false
+        })]
       })]
     })
   });
@@ -3689,11 +3715,14 @@ const messageMapper = text => {
   }));
 };
 
-const Hints = () => {
+const Hints = _ref => {
+  let {
+    hints
+  } = _ref;
   const {
     width
   } = bomMixerHooks.useWindowSize();
-  const app = useLlm(state => state.app);
+  useLlm(state => state.app);
   const {
     send
   } = useLlmView(state => state.actions);
@@ -3734,12 +3763,12 @@ const Hints = () => {
   const getCards = () => {
     if (width < 768) {
       return jsxRuntime.jsx(react$1.Swiper, Object.assign({}, swiperProps, {
-        children: app === null || app === void 0 ? void 0 : app.contents.layoutBuilder.map((item, j) => jsxRuntime.jsx(react$1.SwiperSlide, {
+        children: hints.map((item, j) => jsxRuntime.jsx(react$1.SwiperSlide, {
           children: getCard(item, j)
         }, j))
       }));
     } else {
-      return app === null || app === void 0 ? void 0 : app.contents.layoutBuilder.map(getCard);
+      return hints.map(getCard);
     }
   };
   return jsxRuntime.jsx("section", {
@@ -3945,7 +3974,7 @@ const Intro = () => {
       return () => window.removeEventListener('message', onMessage);
     }
     return () => {};
-  }, [setIntroed]);
+  }, [setIntroed, send]);
   react.useEffect(() => {
     const onLenisScroll = () => {
       if (iframeRef.current) {
@@ -3964,6 +3993,8 @@ const Intro = () => {
     return;
   }
   const contents = app.contents;
+  const extendedWelcomeText = contents.extendedWelcomeText;
+  const hints = (app === null || app === void 0 ? void 0 : app.contents.layoutBuilder) || [];
   return contents.customIntro ? skipCustomIntro ? null : jsxRuntime.jsx("section", {
     className: "llm__customIntro",
     children: jsxRuntime.jsx("iframe", {
@@ -3981,7 +4012,10 @@ const Intro = () => {
         className: "llm__intro-wrapper llm__row",
         children: [jsxRuntime.jsxs(framerMotion.motion.div, {
           variants: motionItem,
-          className: "llm__intro-text llm__col --md-6 --lg-5",
+          className: bomCore.getClassNames('llm__intro-text llm__col', {
+            '--md-6 --lg-5': hints.length > 0,
+            '--sm-9 --md-8 --lg-7': hints.length === 0
+          }),
           children: [jsxRuntime.jsx("div", {
             className: "llm__intro-blob",
             children: jsxRuntime.jsx(framerMotion.motion.div, {
@@ -3990,19 +4024,21 @@ const Intro = () => {
               animate: "bottom",
               children: jsxRuntime.jsx(Blob, {})
             })
-          }), embedded ? jsxRuntime.jsx(framerMotion.motion.h2, {
+          }), extendedWelcomeText && (embedded ? jsxRuntime.jsx(framerMotion.motion.h2, {
             variants: motionItem,
             className: "llm__intro-title -llm-t-display2",
-            children: contents.extendedWelcomeText
+            children: extendedWelcomeText
           }) : jsxRuntime.jsx(framerMotion.motion.h1, {
             variants: motionItem,
             className: "llm__intro-title -llm-t-display2",
-            children: contents.extendedWelcomeText
-          })]
-        }), jsxRuntime.jsx(framerMotion.motion.div, {
+            children: extendedWelcomeText
+          }))]
+        }), hints.length > 0 && jsxRuntime.jsx(framerMotion.motion.div, {
           variants: motionItem,
           className: "llm__intro-hints llm__col --end-md-12 --md-6 --lg-5",
-          children: jsxRuntime.jsx(Hints, {})
+          children: jsxRuntime.jsx(Hints, {
+            hints: hints
+          })
         })]
       })
     })
@@ -5904,6 +5940,7 @@ const Trigger = () => {
   } = useLlmView(state => state.actions);
   const label = bomMixerHooks.useLabel();
   const collapsedWelcomeText = messageMapper(app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeText);
+  const collapsedWelcomeTextCta = messageMapper(app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta);
   const collapsedWelcomeTextHover = messageMapper(app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextHover);
   const position = theme.trigger.position || 'bottom';
   return jsxRuntime.jsxs(framerMotion.motion.nav, {
@@ -5928,22 +5965,22 @@ const Trigger = () => {
     children: [jsxRuntime.jsxs("button", {
       type: "button",
       className: bomCore.getClassNames('llm__trigger-btn', {
-        'llm__trigger-btn--hover': app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextHover
+        'llm__trigger-btn--hover': collapsedWelcomeTextHover !== undefined
       }),
       children: [jsxRuntime.jsx(Blob, {}), jsxRuntime.jsx("span", {
         children: label('llm.button')
       })]
-    }), !opened && jsxRuntime.jsxs("div", {
+    }), !opened && (collapsedWelcomeText || collapsedWelcomeTextCta || collapsedWelcomeTextHover) && jsxRuntime.jsxs("div", {
       className: "llm__trigger-popup -llm-t-body2",
-      children: [jsxRuntime.jsxs(framerMotion.motion.div, {
+      children: [(collapsedWelcomeText || collapsedWelcomeTextCta) && jsxRuntime.jsxs(framerMotion.motion.div, {
         className: "llm__trigger-message",
         exit: {
           opacity: 0
         },
-        children: [jsxRuntime.jsx(Canvas, {}), collapsedWelcomeText, (app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta) && jsxRuntime.jsx("button", {
+        children: [jsxRuntime.jsx(Canvas, {}), collapsedWelcomeText, collapsedWelcomeTextCta && jsxRuntime.jsx("button", {
           type: "button",
           className: "llm__trigger-cta",
-          children: app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta
+          children: collapsedWelcomeTextCta
         })]
       }), collapsedWelcomeTextHover && jsxRuntime.jsxs(framerMotion.motion.div, {
         className: "llm__trigger-message",