@websolutespa/bom-mixer-llm 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 0.0.12
+
+### Patch Changes
+
+- Added: flags preview, dismissable, opened, skipCustomIntro
+
+## 0.0.11
+
+### Patch Changes
+
+- Modified: theme & cards
+
 ## 0.0.10
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -888,8 +888,7 @@ llm-embed {
   position: absolute;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
   width: calc(100vw - 40px);
-  min-width: 240px;
-  max-width: 460px;
+  max-width: var(--llm-popup-max-width);
   left: 50%;
   bottom: calc(100% + 12px);
   translate: -50% 0%;
@@ -907,8 +906,7 @@ llm-embed {
 }
 .llm .llm__trigger-welcome > div + div {
   width: calc(100vw - 40px);
-  min-width: 240px;
-  max-width: 460px;
+  max-width: var(--llm-popup-max-width);
   translate: -50% 10%;
   opacity: 0;
 }
@@ -1771,7 +1769,7 @@ llm-embed {
   display: flex;
   justify-content: center;
   align-items: center;
-  aspect-ratio: 240/165;
+  aspect-ratio: var(--llm-card-aspect-ratio);
   border-radius: 24px;
   overflow: hidden;
   background: var(--llm-color-neutral-200);
@@ -1796,7 +1794,7 @@ llm-embed {
 }
 .llm .llm__card--video .llm__card-asset {
   border-radius: 0;
-  aspect-ratio: 16/9;
+  aspect-ratio: var(--llm-card-video-aspect-ratio);
 }
 .llm .llm__card--full .llm__card-media {
   position: absolute;
@@ -2014,33 +2012,33 @@ llm-embed {
   cursor: pointer;
 }
 
-.llm .llm__thron-player .th-video .th-video-player .th-video-poster {
+.llm__thron-player .th-video .th-video-player .th-video-poster {
   background-size: cover;
 }
-.llm .llm__thron-player .th-player-external-element.th-std-bars,
-.llm .llm__thron-player .th-player.th-std-bars {
+.llm__thron-player .th-player-external-element.th-std-bars,
+.llm__thron-player .th-player.th-std-bars {
   width: 100%;
   height: 100%;
   border-radius: 0;
   margin: 0;
 }
-.llm .llm__thron-player .th-video .th-video-player .th-display-icon-wrapper {
+.llm__thron-player .th-video .th-video-player .th-display-icon-wrapper {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal.th-top {
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal.th-top {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-time-info {
+.llm__thron-player:not(.-enlarged) .th-time-info {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-button,
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-toggle-button:not(.th-fullscreen-button) {
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-button,
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-toggle-button:not(.th-fullscreen-button) {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-time-rail {
+.llm__thron-player:not(.-enlarged) .th-time-rail {
   display: none;
 }
-.llm .llm__thron-player.-enlarged {
+.llm__thron-player.-enlarged {
   position: fixed;
   width: calc(100vw - 40px);
   height: calc((100vw - 40px) / 16 * 9);

package/dist/cjs/index.js

@@ -223,6 +223,9 @@ const defaultTheme = {
     foreground: 'var(--llm-color-base-100)',
     boxShadow: '0 0 30px rgba(0, 0, 0, 0.3)'
   },
+  popup: {
+    maxWidth: '210px'
+  },
   hint: {
     fontFamily: 'var(--llm-font-primary)',
     background: 'linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)',
@@ -248,7 +251,11 @@ const defaultTheme = {
   },
   card: {
     background: 'var(--llm-color-neutral-100)',
-    foreground: 'var(--llm-color-neutral-900)'
+    foreground: 'var(--llm-color-neutral-900)',
+    aspectRatio: '240 / 165'
+  },
+  cardVideo: {
+    aspectRatio: '16 / 9'
   },
   markdown: {
     marginTop: '0.5rem',
@@ -1190,7 +1197,7 @@ class ApiService {
           message: 'Bad Request: html is missing'
         };
       }
-      console.log('/llm/summary', payload);
+      // console.log('/llm/summary', payload);
       return {
         code: 'SENT'
       };
@@ -2052,15 +2059,19 @@ function stripEmojis(text) {
 const createLlmViewStore = _ref => {
   let {
     threadId,
+    dismissable = true,
+    skipCustomIntro = false,
     opened,
     embedded,
     send,
     setEmbed
   } = _ref;
   const props = {
-    opened: opened != null || embedded != null ? Boolean(opened || embedded) : threadId != null ? true : false,
+    opened: opened != null ? opened : embedded != null || threadId != null ? true : false,
+    dismissable: embedded ? false : dismissable,
+    skipCustomIntro: skipCustomIntro,
     embedded: embedded || false,
-    introed: false,
+    introed: skipCustomIntro ? true : false,
     hidden: false,
     fixed: false,
     idle: true,
@@ -2261,11 +2272,12 @@ const createLlmStore = _ref => {
     appKey,
     apiKey,
     threadId,
-    customTheme,
     decorateUrl,
     endpoint,
-    test,
     storage,
+    test,
+    preview,
+    customTheme,
     label
   } = _ref;
   const theme = getTheme(customTheme);
@@ -2296,7 +2308,8 @@ const createLlmStore = _ref => {
           threadId,
           endpoint,
           locale,
-          test
+          test,
+          preview
         });
         return apiService;
       },
@@ -2308,7 +2321,8 @@ const createLlmStore = _ref => {
           threadId,
           endpoint,
           locale,
-          test
+          test,
+          preview
         });
         const app = yield apiService.getInfo();
         if (!app) {
@@ -2580,6 +2594,15 @@ function LlmProvider(_a) {
     } = _a,
     props = __rest(_a, ["children"]);
   const label = bomMixerHooks.useLabel();
+  if (props.embedded) {
+    props.dismissable = false;
+    props.opened = true;
+  }
+  if (props.preview) {
+    props.dismissable = false;
+    props.opened = true;
+    props.skipCustomIntro = true;
+  }
   const storeRef = react.useRef();
   if (!storeRef.current) {
     storeRef.current = createSharedLlmStore(Object.assign(Object.assign({}, props), {
@@ -2979,6 +3002,7 @@ const Header = props => {
   } = useLlmView(state => state.actions);
   const hidden = useLlmView(state => state.hidden);
   const fixed = useLlmView(state => state.fixed);
+  const dismissable = useLlmView(state => state.dismissable);
   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;
@@ -3005,7 +3029,7 @@ const Header = props => {
             alt: logoMini.alt
           })
         })]
-      }), jsxRuntime.jsxs("button", {
+      }), dismissable && jsxRuntime.jsxs("button", {
         className: "llm__header-back -llm-t-cta-3",
         onClick: () => open(),
         children: [label('llm.back'), jsxRuntime.jsx(bomMixerIcons.IconLlmArrowCornerRightUp, {})]
@@ -3204,13 +3228,11 @@ const Blob = () => {
 const Intro = () => {
   const iframeRef = react.useRef(null);
   const app = useLlm(state => state.app);
-  // const introed = useLlmView(state => state.introed);
-  const {
-    send
-  } = useLlmView(state => state.actions);
   const {
+    send,
     setIntroed
   } = useLlmView(state => state.actions);
+  const skipCustomIntro = useLlmView(state => state.skipCustomIntro);
   const motionItem = {
     hidden: {
       y: '40px'
@@ -3281,25 +3303,6 @@ const Intro = () => {
     }
     return () => {};
   }, [setIntroed]);
-  /*
-  const onIntroed = (newIntroed: boolean) => {
-    console.log('onIntroed', 'introed', introed, 'newIntroed', newIntroed);
-    if (newIntroed !== introed) {
-      setIntroed(newIntroed);
-    }
-  };
-     useEffect(() => {
-    const onScroll = () => {
-      if (iframeRef.current) {
-        const rect = iframeRef.current.getBoundingClientRect();
-        console.log('onScroll', rect.bottom < window.innerHeight);
-        onIntroed(rect.bottom < window.innerHeight);
-      }
-    }
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [setIntroed]);
-  */
   react.useEffect(() => {
     const onLenisScroll = () => {
       if (iframeRef.current) {
@@ -3317,7 +3320,7 @@ const Intro = () => {
   if (!app) {
     return;
   }
-  return app.contents.customIntro ? jsxRuntime.jsx("div", {
+  return app.contents.customIntro ? skipCustomIntro ? null : jsxRuntime.jsx("div", {
     className: "llm__customIntro",
     children: jsxRuntime.jsx("iframe", {
       ref: iframeRef,
@@ -3688,6 +3691,40 @@ const Dialog = _a => {
   })) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), portal);
 };
 
+const StaticNode = _a => {
+  var {
+      outerRef,
+      playing
+    } = _a,
+    props = __rest(_a, ["outerRef", "playing"]);
+  const innerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (innerRef.current && outerRef.current) {
+      outerRef.current.removeAttribute('style');
+      innerRef.current.appendChild(outerRef.current);
+    }
+  }, [innerRef, outerRef]);
+  const onClose = () => {
+    if (typeof props.onClose === 'function') {
+      props.onClose();
+    }
+  };
+  const classNames = bomCore.getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
+    '-playing': playing
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      ref: innerRef,
+      className: classNames
+    }), jsxRuntime.jsx("button", {
+      type: "button",
+      className: "llm__video-reduce",
+      onClick: () => onClose(),
+      "aria-label": "Reduce",
+      children: jsxRuntime.jsx(bomMixerIcons.IconLlmMinimize, {})
+    })]
+  });
+};
 const ThronPlayer = props => {
   const id = react.useMemo(() => {
     return `video-${props.media.xcontentId}-${Math.round(Math.random() * 10000)}`;
@@ -3814,40 +3851,6 @@ const ThronPlayer = props => {
     })]
   });
 };
-const StaticNode = _a => {
-  var {
-      outerRef,
-      playing
-    } = _a,
-    props = __rest(_a, ["outerRef", "playing"]);
-  const innerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (innerRef.current && outerRef.current) {
-      outerRef.current.removeAttribute('style');
-      innerRef.current.appendChild(outerRef.current);
-    }
-  }, [innerRef, outerRef]);
-  const onClose = () => {
-    if (typeof props.onClose === 'function') {
-      props.onClose();
-    }
-  };
-  const classNames = bomCore.getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
-    '-playing': playing
-  });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("div", {
-      ref: innerRef,
-      className: classNames
-    }), jsxRuntime.jsx("button", {
-      type: "button",
-      className: "llm__video-reduce",
-      onClick: () => onClose(),
-      "aria-label": "Reduce",
-      children: jsxRuntime.jsx(bomMixerIcons.IconLlmMinimize, {})
-    })]
-  });
-};
 
 const VideoPlayer = props => {
   const id = react.useId();
@@ -3977,7 +3980,7 @@ const Card = props => {
         dangerouslySetInnerHTML: {
           __html: props.abstract
         }
-      }), props.cardType !== 'full' && props.cta.url && jsxRuntime.jsxs("a", {
+      }), props.cta && props.cta.url && jsxRuntime.jsxs("a", {
         className: "llm__card-cta",
         href: props.cta.url,
         target: "_blank",
@@ -4885,6 +4888,7 @@ const Main = () => {
     animate: "show",
     exit: "exit",
     className: classNames,
+    "data-lenis-prevent": true,
     children: [visible && jsxRuntime.jsx(Canvas, {}), !embedded && jsxRuntime.jsx(framerMotion.motion.div, {
       className: "llm__top",
       variants: slideIn(-1),
@@ -5007,40 +5011,6 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
       document.documentElement.style.overflow = opened ? 'hidden' : 'auto';
     }
   }, [opened, embedded]);
-  /*
-  useEffect(() => {
-    if (innerRef.current) {
-      const observer = new MutationObserver((mutations) => {
-        const target = mutations[0].target as HTMLDivElement;
-        const mutatedVars: Partial<LlmVars> = {};
-        Object.entries(vars).forEach(([k, v]) => {
-          const newValue = target.style.getPropertyValue(k);
-          if (v !== newValue) {
-            mutatedVars[k] = newValue;
-          }
-          if (
-            k === '--llm-color-base-100' ||
-            k === '--llm-color-base-200' ||
-            k === '--llm-color-base-300' ||
-            k === '--llm-color-base-400'
-          ) {
-            console.log(k, newValue, v);
-          }
-        });
-        if (Object.keys(mutatedVars).length > 0) {
-          setVars(mutatedVars);
-        }
-      });
-      observer.observe(innerRef.current, {
-        attributes: true,
-        attributeFilter: ['style'],
-      });
-      return () => observer.disconnect();
-    } else {
-      return () => { };
-    }
-  }, []);
-  */
   const shouldShowTrigger = !opened && !idle && !embed || (app === null || app === void 0 ? void 0 : app.contents.customIntro) && !introed;
   const classNames = bomCore.getClassNames('llm', {
     '-open': opened,