@websolutespa/bom-llm 0.0.49 → 0.0.51

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.51
+
+### Patch Changes
+
+- Added: disclaimer footer & header ctas
+
+## 0.0.50
+
+### Patch Changes
+
+- Modified idle timeout
+
 ## 0.0.49
 
 ### Patch Changes

package/dist/index.d.ts

@@ -23,16 +23,24 @@ type LlmCard = {
     title: string;
     message?: string;
 };
+type LlmLogo = {
+    logo: IMedia;
+};
 type LlmSampleInputText = {
-    id: string;
+    id?: string;
     sampleInputText: string;
 };
+type LlmHeaderCta = {
+    id?: string;
+    title: string;
+    href: string;
+    target: string;
+    icon?: IMedia;
+};
 type LlmRecognitionMode = ('none' | 'default') & string;
 type LlmSynthesisMode = ('none' | 'default' | 'elevenlabs') & string;
 type LlmContents = {
-    additionalLogos?: {
-        logo: IMedia;
-    }[];
+    additionalLogos?: LlmLogo[];
     collapsedWelcomeText?: string;
     collapsedWelcomeTextCta?: string;
     collapsedWelcomeTextHover?: string;
@@ -41,6 +49,7 @@ type LlmContents = {
     disableSpeechRecognition?: boolean;
     disableSpeechSynthesis?: boolean;
     disclaimer?: string;
+    disclaimerFooter?: boolean;
     enableUpload?: boolean;
     extendedWelcomeText?: string;
     intro?: string;
@@ -50,7 +59,8 @@ type LlmContents = {
     openingSound?: IMedia;
     promptPlaceholder?: string;
     recognitionMode?: LlmRecognitionMode;
-    sampleInputTexts: LlmSampleInputText[];
+    sampleInputTexts?: LlmSampleInputText[];
+    headerCtas?: LlmHeaderCta[];
     shortWelcomeText?: string;
     synthesisMode?: LlmSynthesisMode;
     textToSpeechApiKey?: string;

package/dist/umd/index.css

@@ -889,7 +889,6 @@ llm-embed {
   position: absolute;
   left: 0;
   bottom: 0;
-  padding-bottom: var(--llm-size-5, 2.5rem);
   width: 100%;
   z-index: 2;
 }
@@ -924,6 +923,14 @@ llm-embed {
   backdrop-filter: blur(20px);
   background: rgba(255, 255, 255, 0.2);
 }
+.llm .llm__header.-has-cta .llm__header-back-label {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .llm .llm__header.-has-cta .llm__header-back-label {
+    display: block;
+  }
+}
 .llm .llm__header-wrapper {
   display: flex;
   justify-content: space-between;
@@ -1041,6 +1048,92 @@ llm-embed {
   width: auto !important;
   white-space: normal !important;
 }
+.llm .llm__header-ctas {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--llm-size-1, 0.5rem);
+}
+@media (min-width: 1024px) {
+  .llm .llm__header-ctas {
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+.llm .llm__header-cta {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  align-items: center;
+  gap: var(--llm-size-1, 0.5rem);
+  user-select: none;
+  font-weight: 800;
+  padding: var(--llm-header-cta-padding);
+  border-radius: var(--llm-header-cta-border-radius);
+  background: var(--llm-header-cta-background);
+  color: var(--llm-header-cta-foreground);
+  font-size: 14px;
+  display: none;
+}
+.llm .llm__header-cta:focus, .llm .llm__header-cta:focus-visible {
+  outline-color: var(--llm-color-outline);
+}
+.llm .llm__header-cta:hover {
+  outline-color: color-mix(in srgb, var(--llm-color-outline) 10%, transparent 90%);
+}
+.llm .llm__header-cta:active {
+  outline-color: var(--llm-color-accent-foreground);
+}
+.llm .llm__header-cta:first-child {
+  display: inline-flex;
+}
+@media (min-width: 1024px) {
+  .llm .llm__header-cta {
+    display: inline-flex;
+    font-size: var(--llm-header-cta-font-size);
+  }
+}
+.llm .llm__header-cta.-icon {
+  padding-right: 0.8em;
+}
+.llm .llm__header-cta i {
+  flex-shrink: 0;
+  line-height: 0;
+  display: block;
+  width: 1em;
+  height: 1em;
+  color: var(--llm-header-cta-foreground, inherit);
+  transition: transform ease-in-out 200ms;
+}
+.llm .llm__header-cta i svg {
+  fill: currentColor;
+}
+.llm .llm__header-cta:hover i {
+  transform: scale(1.2, 1.2);
+}
 .llm .llm__header-back {
   margin: 0;
   padding: 0;
@@ -1791,18 +1884,16 @@ llm-embed {
   outline-color: var(--llm-color-accent-foreground);
 }
 .llm .llm__prompt-footer {
+  /*
   position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  */
   display: flex;
   justify-content: center;
   align-items: center;
-  right: 0;
-  left: 0;
-  padding: 4px 0 0 0;
-}
-@media (min-width: 1024px) {
-  .llm .llm__prompt-footer {
-    padding: 6px 0;
-  }
+  padding: 10px 15px;
 }
 .llm .llm__prompt-powered-by {
   margin: 0;
@@ -1835,8 +1926,10 @@ llm-embed {
   display: flex;
   justify-content: center;
   align-items: center;
+  white-space: nowrap;
   column-gap: 4px;
   font-size: 11px;
+  line-height: 1.1;
   color: var(--llm-color-foreground);
   opacity: 0.4;
   transition: opacity ease-in-out 250ms;
@@ -1858,6 +1951,18 @@ llm-embed {
 .llm .llm__prompt-powered-by:hover {
   opacity: 1;
 }
+.llm .llm__prompt-disclaimer {
+  padding: 0 calc(var(--rem, 1rem) * 0.3);
+  font-size: 10px;
+  line-height: 1.1;
+  color: var(--llm-color-foreground);
+  opacity: 0.4;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-disclaimer {
+    font-size: 11px;
+  }
+}
 
 .llm .llm__message--user .llm__text .llm__text-body {
   line-height: 1;

package/dist/umd/index.js

@@ -18120,6 +18120,13 @@
 	  lg: "0 8px 50px -8px rgba(0, 0, 0, 0.6)",
 	  xl: "0 10px 60px -10px rgba(0, 0, 0, 0.8)"
 	};
+	var headerCta = {
+	  fontSize: "18px",
+	  padding: "0.5em 1em",
+	  borderRadius: "2em",
+	  background: "var(--llm-color-primary-background)",
+	  foreground: "var(--llm-color-primary-foreground)"
+	};
 	var theme = {
 	  mode: mode,
 	  scale: scale,
@@ -18148,7 +18155,8 @@
 	  cardVideo: cardVideo,
 	  product: product,
 	  productLabel: productLabel,
-	  shadow: shadow
+	  shadow: shadow,
+	  headerCta: headerCta
 	};
 
 	const defaultTheme = theme;
@@ -18274,14 +18282,11 @@ ${Object.entries(vars).map(_ref2 => {
 	      "extendedWelcomeText": "Ciao, sono l\"Ambasciatore AI di Pesaro2024. Più cose mi dirai su ciò che ti piace, più sarò in grado di aiutarti.",
 	      "disclaimer": "Le risposte che riceverai sono create automaticamente elaborando sia le informazioni presenti sul nostro sito che altre informazioni presenti sul web. Controlla sempre la correttezza delle informazioni fornite.",
 	      "sampleInputTexts": [{
-	        "sampleInputText": "Quali sono gli eventi che posso raggiungere a piedi dalla stazione dei treni?",
-	        "id": "656095350d5d91982799c3fd"
+	        "sampleInputText": "Quali sono gli eventi che posso raggiungere a piedi dalla stazione dei treni?"
 	      }, {
-	        "sampleInputText": "Mostra i prossimi eventi di fotografia",
-	        "id": "6560954e0d5d91982799c3fe"
+	        "sampleInputText": "Mostra i prossimi eventi di fotografia"
 	      }, {
-	        "sampleInputText": "Chi partecipa a Pesaro2024?",
-	        "id": "6560955b0d5d91982799c3ff"
+	        "sampleInputText": "Chi partecipa a Pesaro2024?"
 	      }],
 	      "layoutBuilder": [{
 	        "icon": {
@@ -18400,14 +18405,11 @@ ${Object.entries(vars).map(_ref2 => {
 	      "extendedWelcomeText": "Hi, I'm the AI ​​Ambassador of Pesaro2024. The more you tell me about what you like, the more I will be able to help you.",
 	      "disclaimer": "The answers you will receive are created automatically by processing both the information on our site and other information on the web. Always check the correctness of the information provided.",
 	      "sampleInputTexts": [{
-	        "sampleInputText": "What events can I walk to from the train station?",
-	        "id": "656095350d5d91982799c3fd"
+	        "sampleInputText": "What events can I walk to from the train station?"
 	      }, {
-	        "sampleInputText": "Shows upcoming photography events",
-	        "id": "6560954e0d5d91982799c3fe"
+	        "sampleInputText": "Shows upcoming photography events"
 	      }, {
-	        "sampleInputText": "Who participates in Pesaro2024?",
-	        "id": "6560955b0d5d91982799c3ff"
+	        "sampleInputText": "Who participates in Pesaro2024?"
 	      }],
 	      "layoutBuilder": [{
 	        "icon": {
@@ -22756,7 +22758,7 @@ ${Object.entries(vars).map(_ref2 => {
 	              set(() => ({
 	                idle: true
 	              }));
-	            }, 6000);
+	            }, 8000);
 	          };
 	          const handleIdleTimes = () => {
 	            let to = setIdleTimeout();
@@ -24564,9 +24566,12 @@ void main(void) {
 	  const logoMini = app?.contents?.logoMini;
 	  const openingSound = app?.contents?.openingSound;
 	  const additionalLogos = app?.contents?.additionalLogos;
+	  const headerCtas = app?.contents?.headerCtas;
+	  const hasHeaderCtas = headerCtas && headerCtas.length > 0;
 	  const classes = getClassNames('llm__header', {
 	    hidden,
-	    fixed
+	    fixed,
+	    '-has-cta': hasHeaderCtas
 	  });
 	  return /*#__PURE__*/jsxRuntimeExports.jsx("nav", {
 	    className: classes,
@@ -24598,11 +24603,30 @@ void main(void) {
 	        className: "llm__header-skip",
 	        children: label('llm.skip')
 	      }), dismissable && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-	        children: [/*#__PURE__*/jsxRuntimeExports.jsxs("button", {
+	        children: [hasHeaderCtas && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	          className: "llm__header-ctas",
+	          children: headerCtas.map((x, i) => /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	            href: x.href,
+	            target: x.target || '_blank',
+	            className: getClassNames('llm__header-cta', {
+	              '-icon': x.icon != null
+	            }),
+	            children: [x.title, " ", x.icon && /*#__PURE__*/jsxRuntimeExports.jsx("i", {
+	              children: /*#__PURE__*/jsxRuntimeExports.jsx("img", {
+	                src: x.icon.src || x.icon.url,
+	                alt: ""
+	              })
+	            })]
+	          }, i))
+	        }), /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
 	          type: "button",
+	          "aria-label": label('llm.back'),
 	          className: "llm__header-back -llm-t-cta3",
 	          onClick: () => open(),
-	          children: [label('llm.back'), /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowCornerRightUp, {})]
+	          children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	            className: "llm__header-back-label",
+	            children: label('llm.back')
+	          }), /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowCornerRightUp, {})]
 	        }), openingSound && /*#__PURE__*/jsxRuntimeExports.jsx("audio", {
 	          src: openingSound.src || openingSound.url,
 	          autoPlay: true,
@@ -30200,7 +30224,7 @@ void main(void) {
 	    className: "llm__prompt-suggestions",
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	      className: "llm__suggestions",
-	      children: app?.contents.sampleInputTexts.map((s, j) => /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+	      children: app?.contents.sampleInputTexts?.map((s, j) => /*#__PURE__*/jsxRuntimeExports.jsx("button", {
 	        type: "button",
 	        className: "llm__pill",
 	        onClick: () => onClick(s),
@@ -30214,7 +30238,7 @@ void main(void) {
 	<section className="llm__prompt-suggestions">
 	  <div className="llm__suggestions">
 	    <Swiper {...swiperProps} onInit={swiper => swiper.update()}>
-	      {app?.contents.sampleInputTexts.map((s, j) => (
+	      {app?.contents.sampleInputTexts?.map((s, j) => (
 	        <SwiperSlide key={j}>
 	          <button type="button" className="llm__pill" onClick={() => onClick(s)}>
 	            {s.sampleInputText}
@@ -30274,9 +30298,12 @@ void main(void) {
 	  const hasSpeechSynthesis = hasSpeechSynthesisSupport();
 	  const hasSpeechRecognition = hasSpeechRecognitionSupport();
 	  const hasUpload = hasUploadSupport();
-	  return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	  const appDisclaimer = app?.contents.disclaimer;
+	  const appDisclaimerFooter = app?.contents.disclaimerFooter;
+	  const disclaimer = appDisclaimerFooter ? appDisclaimer || label('llm.disclaimer') : '';
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	    className: "llm__prompt",
-	    children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+	    children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	      className: "llm__container",
 	      children: [messages.length === 0 && /*#__PURE__*/jsxRuntimeExports.jsx(Suggestions, {}), /*#__PURE__*/jsxRuntimeExports.jsx("section", {
 	        id: "llm-prompt",
@@ -30362,22 +30389,27 @@ void main(void) {
 	            })]
 	          })]
 	        })
-	      }), /*#__PURE__*/jsxRuntimeExports.jsx("nav", {
-	        className: "llm__prompt-footer",
-	        children: /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
-	          className: "llm__prompt-powered-by",
-	          href: "https://www.websolute.com/",
-	          target: "_blank",
-	          rel: "noreferrer",
-	          title: "Powered by Websolute",
-	          children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-	            children: "powered by"
-	          }), " ", /*#__PURE__*/jsxRuntimeExports.jsx(IconWebsolute, {
-	            "aria-label": "Websolute"
-	          })]
-	        })
 	      })]
-	    })
+	    }), /*#__PURE__*/jsxRuntimeExports.jsxs("nav", {
+	      className: "llm__prompt-footer",
+	      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	        className: "llm__prompt-powered-by",
+	        href: "https://www.websolute.com/",
+	        target: "_blank",
+	        rel: "noreferrer",
+	        title: "Powered by Websolute",
+	        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	          children: "powered by"
+	        }), " ", /*#__PURE__*/jsxRuntimeExports.jsx(IconWebsolute, {
+	          "aria-label": "Websolute"
+	        })]
+	      }), disclaimer && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	        className: "llm__prompt-disclaimer",
+	        dangerouslySetInnerHTML: {
+	          __html: disclaimer
+	        }
+	      })]
+	    })]
 	  });
 	};