@websolutespa/bom-llm 0.0.52 → 0.0.54

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.54
+
+### Patch Changes
+
+- Added: ScrollProposition, imperative flag
+
+## 0.0.53
+
+### Patch Changes
+
+- Modified: disclaimer css
+
 ## 0.0.52
 
 ### Patch Changes

package/README.md

@@ -74,6 +74,11 @@ document.addEventListener('DOMContentLoaded', () => {
 Using imperatively.
 
 ```js
+const options = {
+  appKey: 'MY_APP_KEY',
+  apiKey: 'MY_API_KEY',
+  imperative: true, // hide trigger button
+};
 const llm = bomLlm(options);
 // using open command imperatively
 setTimeout(() => {

package/dist/index.d.ts

@@ -90,6 +90,7 @@ type LlmViewOptions = {
     preview?: boolean;
     opened?: boolean;
     dismissable?: boolean;
+    imperative?: boolean;
     skipCustomIntro?: boolean;
     embedded?: boolean;
 };

package/dist/umd/index.css

@@ -1890,10 +1890,18 @@ llm-embed {
   left: 0;
   bottom: 0;
   */
+  padding: 10px 15px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 10px 15px;
+  gap: 4px;
+  text-align: justify;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-footer {
+    flex-direction: row;
+  }
 }
 .llm .llm__prompt-powered-by {
   margin: 0;
@@ -1931,7 +1939,7 @@ llm-embed {
   font-size: 11px;
   line-height: 1.1;
   color: var(--llm-color-foreground);
-  opacity: 0.4;
+  opacity: 0.8;
   transition: opacity ease-in-out 250ms;
 }
 .llm .llm__prompt-powered-by:focus, .llm .llm__prompt-powered-by:focus-visible {
@@ -4273,6 +4281,30 @@ llm-embed {
   left: -1px;
 }
 
+.llm .llm__scroll-proposition {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -50px;
+  left: 50%;
+  width: var(--llm-scroll-proposition-size);
+  height: var(--llm-scroll-proposition-size);
+  border-radius: var(--llm-scroll-proposition-border-radius);
+  font-size: var(--llm-scroll-proposition-border-radius);
+  z-index: 1000;
+  transform: translateX(-50%);
+  background: var(--llm-scroll-proposition-background);
+  color: var(--llm-scroll-proposition-foreground);
+  box-shadow: var(--llm-scroll-proposition-box-shadow);
+  cursor: pointer;
+}
+.llm .llm__scroll-proposition svg {
+  width: var(--llm-scroll-proposition-border-radius);
+  height: var(--llm-scroll-proposition-border-radius);
+  transform: rotate(90deg);
+}
+
 /**
  * Swiper 8.4.7
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/umd/index.js

@@ -18065,6 +18065,13 @@
 	  accent: "var(--llm-color-base-100)",
 	  borderRadius: "8px"
 	};
+	var scrollProposition = {
+	  size: "32px",
+	  borderRadius: "16px",
+	  background: "var(--llm-color-neutral-100)",
+	  foreground: "var(--llm-color-neutral-900)",
+	  boxShadow: "0 6px 8px -4px rgba(0, 0, 0, 0.5)"
+	};
 	var promptSubmit = {
 	  background: "var(--llm-trigger-background)",
 	  foreground: "var(--llm-trigger-foreground)"
@@ -18145,6 +18152,7 @@
 	  hintIcon: hintIcon,
 	  pill: pill,
 	  input: input,
+	  scrollProposition: scrollProposition,
 	  promptSubmit: promptSubmit,
 	  checkbox: checkbox,
 	  user: user,
@@ -22707,6 +22715,7 @@ ${Object.entries(vars).map(_ref2 => {
 	  let {
 	    threadId,
 	    dismissable = true,
+	    imperative = false,
 	    skipCustomIntro = false,
 	    opened,
 	    embedded,
@@ -22716,6 +22725,7 @@ ${Object.entries(vars).map(_ref2 => {
 	  const props = {
 	    opened: opened != null ? opened : embedded != null || threadId != null ? true : false,
 	    dismissable: embedded ? false : dismissable,
+	    imperative,
 	    skipCustomIntro: skipCustomIntro,
 	    embedded: embedded || false,
 	    introed: skipCustomIntro ? true : false,
@@ -22723,6 +22733,7 @@ ${Object.entries(vars).map(_ref2 => {
 	    fixed: false,
 	    idle: true,
 	    visible: false,
+	    scrollable: false,
 	    direction: 0
 	  };
 	  let scroller_ = undefined;
@@ -22737,12 +22748,14 @@ ${Object.entries(vars).map(_ref2 => {
 	      const scrolled = targetScroll > 100;
 	      const fixed = direction == -1 && scrolled;
 	      const hidden = direction == 1 && scrolled;
+	      const scrollable = limit - targetScroll > 100;
 	      const state = get();
-	      if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction) {
+	      if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction || state.scrollable !== scrollable) {
 	        set(state => ({
 	          hidden,
 	          fixed,
-	          direction
+	          direction,
+	          scrollable
 	        }));
 	      }
 	      // console.log('onScrollerScroll', event, event.progress, event.direction);
@@ -22871,6 +22884,9 @@ ${Object.entries(vars).map(_ref2 => {
 	        setVisible: visible => set(state => ({
 	          visible
 	        })),
+	        setScrollable: scrollable => set(state => ({
+	          scrollable
+	        })),
 	        setScroller: scroller => {
 	          if (scroller_ !== scroller) {
 	            if (scroller_) {
@@ -30392,7 +30408,12 @@ void main(void) {
 	      })]
 	    }), /*#__PURE__*/jsxRuntimeExports.jsxs("nav", {
 	      className: "llm__prompt-footer",
-	      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	      children: [disclaimer && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	        className: "llm__prompt-disclaimer",
+	        dangerouslySetInnerHTML: {
+	          __html: disclaimer
+	        }
+	      }), /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
 	        className: "llm__prompt-powered-by",
 	        href: "https://www.websolute.com/",
 	        target: "_blank",
@@ -30403,11 +30424,6 @@ void main(void) {
 	        }), " ", /*#__PURE__*/jsxRuntimeExports.jsx(IconWebsolute, {
 	          "aria-label": "Websolute"
 	        })]
-	      }), disclaimer && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-	        className: "llm__prompt-disclaimer",
-	        dangerouslySetInnerHTML: {
-	          __html: disclaimer
-	        }
 	      })]
 	    })]
 	  });
@@ -30470,7 +30486,8 @@ void main(void) {
 	  const app = useLlm(state => state.app);
 	  const introed = useLlmView(state => state.introed);
 	  const {
-	    setScroller
+	    setScroller,
+	    setScrollable
 	  } = useLlmView(state => state.actions);
 	  const allowScroll = !app?.contents.customIntro || introed;
 	  reactExports.useEffect(() => {
@@ -30543,6 +30560,33 @@ void main(void) {
 	    }
 	    return () => {};
 	  }, []);
+	  reactExports.useEffect(() => {
+	    // console.log('useCanvasOffscreen', canvasRef.current);
+	    if (isBrowser$1 && innerRef.current && scrollerRef.current) {
+	      const scroller = scrollerRef.current;
+	      const element = innerRef.current;
+	      const target = element.querySelector('.llm__content');
+	      const onResize = _ref2 => {
+	        // const entryHeight = entry.contentRect.height;
+	        const limit = element.scrollHeight - element.offsetHeight;
+	        const targetScroll = element.scrollTop;
+	        // const scrollable = limit - targetScroll > 100;
+	        // console.log('onResize', limit, targetScroll, scrollable);
+	        scroller.emit('scroll', {
+	          limit,
+	          targetScroll,
+	          direction: 0
+	        });
+	      };
+	      const resizeObserver = new ResizeObserver(onResize);
+	      resizeObserver.observe(target);
+	      return () => {
+	        resizeObserver.disconnect();
+	      };
+	    } else {
+	      return () => {};
+	    }
+	  }, [innerRef]);
 	  const classNames = getClassNames('llm__scroller', {
 	    '-scroller-disabled': !allowScroll
 	  });
@@ -30553,6 +30597,60 @@ void main(void) {
 	  });
 	};
 
+	const slideIn = function (direction, percent) {
+	  if (direction === void 0) {
+	    direction = 1;
+	  }
+	  if (percent === void 0) {
+	    percent = 30;
+	  }
+	  return {
+	    hidden: {
+	      y: `${percent * direction}%`,
+	      opacity: 0
+	    },
+	    show: {
+	      y: 0,
+	      opacity: 1,
+	      transition: {
+	        type: 'tween',
+	        duration: .3
+	      }
+	    },
+	    exit: {
+	      y: `${percent * direction}%`,
+	      opacity: 0,
+	      transition: {
+	        type: 'tween',
+	        duration: .2
+	      }
+	    }
+	  };
+	};
+	function ScrollProposition() {
+	  const label = useLabel();
+	  // const hasChunks = useLlm(state => state.chunks != null);
+	  const scrollable = useLlmView(state => state.scrollable);
+	  const {
+	    scrollToBottom
+	  } = useLlmView(state => state.actions);
+	  const onClick = () => {
+	    scrollToBottom();
+	  };
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
+	    children: scrollable && /*#__PURE__*/jsxRuntimeExports.jsx(motion.button, {
+	      className: "llm__scroll-proposition",
+	      "aria-label": label('llm.scrollToBottom'),
+	      onClick: onClick,
+	      variants: slideIn(-1),
+	      initial: "hidden",
+	      animate: "show",
+	      exit: "exit",
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowRight, {})
+	    })
+	  });
+	}
+
 	const Dialog = _ref => {
 	  let {
 	    children,
@@ -33760,6 +33858,7 @@ void main(void) {
 	  });
 	  const shouldShowPrompt = !app?.contents.customIntro || introed;
 	  const trapRef = reactExports.useRef(null);
+	  // !!! do not remove
 	  useFocusTrap(trapRef, {
 	    disabled: embedded
 	  });
@@ -33791,13 +33890,13 @@ void main(void) {
 	      children: [app && !theme.canvas.enabled && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__underlay",
 	        "aria-hidden": true
-	      }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.main, {
+	      }), /*#__PURE__*/jsxRuntimeExports.jsxs(motion.main, {
 	        className: "llm__bottom",
 	        variants: slideIn(1),
 	        initial: "hidden",
 	        animate: "show",
 	        exit: "exit",
-	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Prompt, {})
+	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(ScrollProposition, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Prompt, {})]
 	      })]
 	    })]
 	  }, "main-container");
@@ -33888,6 +33987,7 @@ void main(void) {
 	  const opened = useLlmView(state => state.opened);
 	  const introed = useLlmView(state => state.introed);
 	  const embedded = useLlmView(state => state.embedded);
+	  const imperative = useLlmView(state => state.imperative);
 	  reactExports.useImperativeHandle(ref, () => ({
 	    open: () => {
 	      open();
@@ -33907,7 +34007,7 @@ void main(void) {
 	      document.documentElement.style.overflow = opened ? 'hidden' : 'auto';
 	    }
 	  }, [opened, embedded]);
-	  const shouldShowTrigger = !opened && !idle && !embed || app?.contents.customIntro && !introed;
+	  const shouldShowTrigger = !opened && !idle && !embed && !imperative || app?.contents.customIntro && !introed;
 	  const classNames = getClassNames('llm', {
 	    '-open': opened,
 	    '-embedded': embedded,
@@ -34285,6 +34385,12 @@ void main(void) {
 	    en: "Hide",
 	    it: "Nascondi"
 	  }
+	}, {
+	  id: "llm.scrollToBottom",
+	  text: {
+	    en: "Scroll to bottom",
+	    it: "Scorri in fondo"
+	  }
 	}];
 
 	const App = _a => {
@@ -34365,6 +34471,7 @@ void main(void) {
 	      // console.log('App', llmRef.current, instance);
 	      Object.assign(instance, llmRef.current);
 	    }
+	    // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
 	  return jsxRuntimeExports.jsx(ErrorBoundary, {
 	    FallbackComponent: ErrorHandler,