@websolutespa/bom-llm 0.0.16 → 0.0.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.18
+
+### Patch Changes
+
+- Added: flags preview, dismissable, opened, skipCustomIntro
+
+## 0.0.17
+
+### Patch Changes
+
+- Modified: theme & cards
+
 ## 0.0.16
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import { LlmInstance } from '@websolutespa/bom-mixer-llm';
-
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -63,17 +61,25 @@ type LlmMock = {
 };
 type LlmTest = undefined | boolean | DeepPartial<LlmMock>;
 type LlmDecorateUrl = (item: LlmItem) => (string | void) | Promise<string | void>;
+type LlmViewOptions = {
+    threadId?: string;
+    preview?: boolean;
+    opened?: boolean;
+    dismissable?: boolean;
+    skipCustomIntro?: boolean;
+    embedded?: boolean;
+};
 type LlmOptions = {
     apiKey: string;
     appKey: string;
     decorateUrl?: LlmDecorateUrl;
     test?: LlmTest;
-    threadId?: string;
     customTheme?: Partial<LlmTheme>;
-    opened?: boolean;
-    embedded?: boolean;
     locale?: string;
     market?: string;
+} & LlmViewOptions;
+type LlmInstance = {
+    open: () => void;
 };
 
 declare function bomLlm(props: LlmOptions): LlmInstance | undefined;

package/dist/umd/index.css

@@ -1022,8 +1022,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%;
@@ -1041,8 +1040,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;
 }
@@ -1905,7 +1903,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);
@@ -1930,7 +1928,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;
@@ -2148,33 +2146,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/umd/index.js

@@ -23083,6 +23083,9 @@
 	    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%)',
@@ -23108,7 +23111,11 @@
 	  },
 	  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',
@@ -24048,7 +24055,7 @@ ${Object.entries(vars).map(_ref2 => {
 	        message: 'Bad Request: html is missing'
 	      };
 	    }
-	    console.log('/llm/summary', payload);
+	    // console.log('/llm/summary', payload);
 	    return {
 	      code: 'SENT'
 	    };
@@ -24946,15 +24953,19 @@ ${Object.entries(vars).map(_ref2 => {
 	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,
@@ -25157,11 +25168,12 @@ ${Object.entries(vars).map(_ref2 => {
 	    appKey,
 	    apiKey,
 	    threadId,
-	    customTheme,
 	    decorateUrl,
 	    endpoint,
-	    test,
 	    storage,
+	    test,
+	    preview,
+	    customTheme,
 	    label
 	  } = _ref;
 	  const theme = getTheme(customTheme);
@@ -25193,7 +25205,8 @@ ${Object.entries(vars).map(_ref2 => {
 	          threadId,
 	          endpoint,
 	          locale,
-	          test
+	          test,
+	          preview
 	        });
 	        return apiService;
 	      },
@@ -25204,7 +25217,8 @@ ${Object.entries(vars).map(_ref2 => {
 	          threadId,
 	          endpoint,
 	          locale,
-	          test
+	          test,
+	          preview
 	        });
 	        const app = await apiService.getInfo();
 	        if (!app) {
@@ -25481,6 +25495,15 @@ ${Object.entries(vars).map(_ref2 => {
 	    ...props
 	  } = _ref3;
 	  const label = useLabel();
+	  if (props.embedded) {
+	    props.dismissable = false;
+	    props.opened = true;
+	  }
+	  if (props.preview) {
+	    props.dismissable = false;
+	    props.opened = true;
+	    props.skipCustomIntro = true;
+	  }
 	  const storeRef = reactExports.useRef();
 	  if (!storeRef.current) {
 	    storeRef.current = createSharedLlmStore({
@@ -26597,6 +26620,7 @@ void main(void) {
 	  } = useLlmView(state => state.actions);
 	  const hidden = useLlmView(state => state.hidden);
 	  const fixed = useLlmView(state => state.fixed);
+	  const dismissable = useLlmView(state => state.dismissable);
 	  const label = useLabel();
 	  const logo = app?.contents.logo;
 	  const logoMini = app?.contents?.logoMini;
@@ -26623,7 +26647,7 @@ void main(void) {
 	            alt: logoMini.alt
 	          })
 	        })]
-	      }), /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
+	      }), dismissable && /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
 	        className: "llm__header-back -llm-t-cta-3",
 	        onClick: () => open(),
 	        children: [label('llm.back'), /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowCornerRightUp, {})]
@@ -26830,13 +26854,11 @@ void main(void) {
 	const Intro = () => {
 	  const iframeRef = reactExports.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'
@@ -26906,27 +26928,6 @@ void main(void) {
 	    }
 	    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]);
-	  */
-
 	  reactExports.useEffect(() => {
 	    const onLenisScroll = () => {
 	      if (iframeRef.current) {
@@ -26944,7 +26945,7 @@ void main(void) {
 	  if (!app) {
 	    return;
 	  }
-	  return app.contents.customIntro ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	  return app.contents.customIntro ? skipCustomIntro ? null : /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	    className: "llm__customIntro",
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx("iframe", {
 	      ref: iframeRef,
@@ -27313,6 +27314,40 @@ void main(void) {
 	  }) : /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}), portal);
 	};
 
+	const StaticNode = _ref => {
+	  let {
+	    outerRef,
+	    playing,
+	    ...props
+	  } = _ref;
+	  const innerRef = reactExports.useRef(null);
+	  reactExports.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 = getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
+	    '-playing': playing
+	  });
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+	    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	      ref: innerRef,
+	      className: classNames
+	    }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+	      type: "button",
+	      className: "llm__video-reduce",
+	      onClick: () => onClose(),
+	      "aria-label": "Reduce",
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmMinimize, {})
+	    })]
+	  });
+	};
 	const ThronPlayer = props => {
 	  const id = reactExports.useMemo(() => {
 	    return `video-${props.media.xcontentId}-${Math.round(Math.random() * 10000)}`;
@@ -27439,40 +27474,6 @@ void main(void) {
 	    })]
 	  });
 	};
-	const StaticNode = _ref => {
-	  let {
-	    outerRef,
-	    playing,
-	    ...props
-	  } = _ref;
-	  const innerRef = reactExports.useRef(null);
-	  reactExports.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 = getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
-	    '-playing': playing
-	  });
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-	    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-	      ref: innerRef,
-	      className: classNames
-	    }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
-	      type: "button",
-	      className: "llm__video-reduce",
-	      onClick: () => onClose(),
-	      "aria-label": "Reduce",
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmMinimize, {})
-	    })]
-	  });
-	};
 
 	const VideoPlayer = props => {
 	  const id = reactExports.useId();
@@ -27607,7 +27608,7 @@ void main(void) {
 	        dangerouslySetInnerHTML: {
 	          __html: props.abstract
 	        }
-	      }), props.cardType !== 'full' && props.cta.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	      }), props.cta && props.cta.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
 	        className: "llm__card-cta",
 	        href: props.cta.url,
 	        target: "_blank",
@@ -30876,6 +30877,7 @@ void main(void) {
 	    animate: "show",
 	    exit: "exit",
 	    className: classNames,
+	    "data-lenis-prevent": true,
 	    children: [visible && /*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}), !embedded && /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
 	      className: "llm__top",
 	      variants: slideIn(-1),
@@ -30998,42 +31000,6 @@ void main(void) {
 	      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?.contents.customIntro && !introed;
 	  const classNames = getClassNames('llm', {
 	    '-open': opened,
@@ -31352,7 +31318,7 @@ void main(void) {
 	      };
 	    }
 	  }, [locale, market]);
-	  const endpoint = props.test === true ? 'https://bom-sample-basic-web-git-bom-llm-actarian.vercel.app' : 'https://platform.websolute.ai';
+	  const endpoint = typeof props.test !== 'undefined' ? 'https://bom-sample-basic-web-git-bom-llm-actarian.vercel.app' : 'https://platform.websolute.ai';
 	  const layout = {
 	    labels: getLabels(data.locale),
 	    locale: data.locale,