@websolutespa/bom-mixer-llm 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-llm
 
+## 0.0.5
+
+### Patch Changes
+
+- Added: shared state between instances
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -155,30 +155,11 @@
 llm-embed {
   display: block;
   width: 100%;
+  height: 760px;
   max-height: 100vh;
   background: transparent;
   overflow: clip;
 }
-@media (max-width: 799px) {
-  llm-embed {
-    height: 100vh;
-  }
-}
-@media (min-width: 800px) {
-  llm-embed {
-    aspect-ratio: 1/1;
-  }
-}
-@media (min-width: 1080px) {
-  llm-embed {
-    aspect-ratio: 4/3;
-  }
-}
-@media (min-width: 1440px) {
-  llm-embed {
-    aspect-ratio: 16/9;
-  }
-}
 
 .llm {
   display: flex;
@@ -1018,7 +999,14 @@ llm-embed {
   height: 100%;
 }
 .llm.-embedded .llm__content {
-  padding: 80px 0 0 0;
+  padding-top: 40px;
+  padding-bottom: 180px;
+}
+@media (min-width: 1024px) {
+  .llm.-embedded .llm__content {
+    padding-top: 60px;
+    padding-bottom: 180px;
+  }
 }
 .llm:not(.-embedded) .llm__main {
   position: absolute;
@@ -1029,7 +1017,7 @@ llm-embed {
 }
 @media (min-width: 1024px) {
   .llm:not(.-embedded) .llm__content {
-    padding: 200px 0;
+    padding-top: 200px;
     padding-bottom: 280px;
   }
 }
@@ -1502,15 +1490,17 @@ llm-embed {
   border: 2px solid rgba(255, 255, 255, 0.4);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
+  display: block;
+  margin: 1rem 0;
+  font-size: 0;
+  text-decoration: none;
+}
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img > img {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 320px;
-  font-size: 0;
-  text-decoration: none;
-}
-.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img > img {
   object-fit: cover;
 }
 .llm .llm__text-disclaimer {

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ var framerMotion = require('framer-motion');
 var react = require('react');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var reactLenis = require('@studio-freight/react-lenis');
+var react$2 = require('lenis/react');
 var ArrayBuffer = require('nanogl/arraybuffer');
 var Program = require('nanogl/program');
 var bomMixerIcons = require('@websolutespa/bom-mixer-icons');
@@ -1502,13 +1502,156 @@ function stripEmojis(text) {
   return text.replace(/(\s?)([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '');
 }
 
+const createLlmViewStore = _ref => {
+  let {
+    threadId,
+    opened,
+    embedded,
+    send
+  } = _ref;
+  const props = {
+    opened: opened != null || embedded != null ? Boolean(opened || embedded) : threadId != null ? true : false,
+    embedded: embedded || false,
+    hidden: false,
+    fixed: false,
+    idle: true,
+    direction: 0
+  };
+  let lenis_ = undefined;
+  let autoScroll = true;
+  const useStore = zustand.createStore((set, get) => Object.assign(Object.assign({}, props), {
+    actions: {
+      initView: () => __awaiter(void 0, void 0, void 0, function* () {
+        get();
+        // handle idle times
+        const setIdleTimeout = () => {
+          return setTimeout(() => {
+            set(() => ({
+              idle: true
+            }));
+          }, 6000);
+        };
+        const handleIdleTimes = () => {
+          let to = setIdleTimeout();
+          let lastScrollTop = 0;
+          window.addEventListener('scroll', () => {
+            const st = window.scrollY || document.documentElement.scrollTop;
+            let direction = 0;
+            if (st > lastScrollTop) {
+              direction = 1;
+            } else if (st < lastScrollTop) {
+              direction = -1;
+            }
+            lastScrollTop = st <= 0 ? 0 : st;
+            if (direction === 1) {
+              if (to) {
+                clearTimeout(to);
+              }
+              set(() => ({
+                idle: false
+              }));
+              to = setIdleTimeout();
+            }
+          });
+        };
+        setTimeout(() => {
+          set(() => ({
+            idle: false
+          }));
+          handleIdleTimes();
+        }, 2000);
+      }),
+      send: (prompt, onMessage, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
+        const state = get();
+        autoScroll = true;
+        state.actions.scrollToBottom();
+        yield send(prompt, response => {
+          state.actions.scrollToBottom();
+          if (typeof onMessage === 'function') {
+            onMessage(response);
+          }
+        }, response => {
+          state.actions.scrollToBottom();
+          if (typeof onEnd === 'function') {
+            onEnd(response);
+          }
+        });
+      }),
+      open: () => set(state => ({
+        opened: !state.opened
+      })),
+      setLenis: lenis => {
+        if (lenis_ !== lenis) {
+          lenis_ = lenis;
+          if (lenis) {
+            lenis.on('scroll', event => {
+              const {
+                direction,
+                targetScroll,
+                limit
+              } = event;
+              if (limit === targetScroll) {
+                autoScroll = true;
+              } else if (direction == -1 && Math.abs(limit - targetScroll) > 100) {
+                autoScroll = false;
+              }
+              const scrolled = targetScroll > 100;
+              const fixed = direction == -1 && scrolled && !autoScroll;
+              const hidden = autoScroll || direction == 1 && scrolled;
+              const state = get();
+              if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction) {
+                set(state => ({
+                  hidden,
+                  fixed,
+                  direction
+                }));
+              }
+            });
+          }
+        }
+      },
+      scrollToBottom: () => {
+        if (lenis_ && autoScroll) {
+          lenis_.scrollTo('bottom', {
+            immediate: true
+          });
+        }
+      }
+    }
+  }));
+  return useStore;
+};
+const LlmViewContext = /*#__PURE__*/react.createContext(null);
+function LlmViewProvider(_a) {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  const {
+    send
+  } = useLlm(state => state.actions);
+  const storeRef = react.useRef();
+  if (!storeRef.current) {
+    storeRef.current = createLlmViewStore(Object.assign(Object.assign({}, props), {
+      send
+    }));
+  }
+  return storeRef.current && jsxRuntime.jsx(LlmViewContext.Provider, {
+    value: storeRef.current,
+    children: children
+  });
+}
+function useLlmView(selector) {
+  const store = react.useContext(LlmViewContext);
+  if (!store) throw new Error('Missing LlmContext.Provider in the tree');
+  return zustand.useStore(store, selector);
+}
+
 const createLlmStore = _ref => {
   let {
     appKey,
     apiKey,
     threadId,
-    opened,
-    embedded,
     decorateUrl,
     endpoint,
     test,
@@ -1521,25 +1664,10 @@ const createLlmStore = _ref => {
     prompt: '',
     locale: 'en',
     streaming: false,
-    opened: opened != null || embedded != null ? Boolean(opened || embedded) : threadId != null ? true : false,
-    embedded: embedded || false,
-    hidden: false,
-    fixed: false,
-    idle: true,
-    direction: 0,
     speakEnabled: true
   };
   let messageService = undefined;
   const speech = new Speech();
-  let lenis_ = undefined;
-  let autoScroll = true;
-  const scrollToBottom = () => {
-    if (lenis_ && autoScroll) {
-      lenis_.scrollTo('bottom', {
-        immediate: true
-      });
-    }
-  };
   function getApi(options) {
     const origin = endpoint || (bomCore.isBrowser ? window.location.origin : process.env.STORE_URL);
     const baseUrl = `${origin}/api/llm`;
@@ -1646,45 +1774,8 @@ const createLlmStore = _ref => {
           app,
           locale
         }, thread));
-        // handle idle times
-        const setIdleTimeout = () => {
-          return setTimeout(() => {
-            set(() => ({
-              idle: true
-            }));
-          }, 6000);
-        };
-        const handleIdleTimes = () => {
-          let to = setIdleTimeout();
-          let lastScrollTop = 0;
-          window.addEventListener('scroll', () => {
-            const st = window.scrollY || document.documentElement.scrollTop;
-            let direction = 0;
-            if (st > lastScrollTop) {
-              direction = 1;
-            } else if (st < lastScrollTop) {
-              direction = -1;
-            }
-            lastScrollTop = st <= 0 ? 0 : st;
-            if (direction === 1) {
-              if (to) {
-                clearTimeout(to);
-              }
-              set(() => ({
-                idle: false
-              }));
-              to = setIdleTimeout();
-            }
-          });
-        };
-        setTimeout(() => {
-          set(() => ({
-            idle: false
-          }));
-          handleIdleTimes();
-        }, 2000);
       }),
-      send: (prompt, onChunk, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
+      send: (prompt, onMessage, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
         if (test) {
           const {
             locale
@@ -1705,8 +1796,6 @@ const createLlmStore = _ref => {
           prompt: '',
           streaming: true
         }));
-        autoScroll = true;
-        scrollToBottom();
         const state = get();
         const origin = endpoint || window.location.origin;
         const url = `${origin}/api/llm/message?locale=${state.locale}`;
@@ -1737,10 +1826,9 @@ const createLlmStore = _ref => {
           set(state => ({
             chunks: response.chunks
           }));
-          if (typeof onChunk === 'function') {
-            onChunk(response);
+          if (typeof onMessage === 'function') {
+            onMessage(response);
           }
-          scrollToBottom();
         },
         // onEnd
         response => {
@@ -1781,7 +1869,6 @@ const createLlmStore = _ref => {
           if (typeof onEnd === 'function') {
             onEnd(response);
           }
-          scrollToBottom();
         },
         // onChunk
         chunks => {
@@ -1873,42 +1960,9 @@ const createLlmStore = _ref => {
         }
         return url || defaultUrl || '#';
       }),
-      open: () => set(state => ({
-        opened: !state.opened
-      })),
       clear: () => set(state => ({
         messages: []
-      })),
-      setLenis: lenis => {
-        if (lenis_ !== lenis) {
-          lenis_ = lenis;
-          if (lenis) {
-            lenis.on('scroll', event => {
-              const {
-                direction,
-                targetScroll,
-                limit
-              } = event;
-              if (limit === targetScroll) {
-                autoScroll = true;
-              } else if (direction == -1 && Math.abs(limit - targetScroll) > 100) {
-                autoScroll = false;
-              }
-              const scrolled = targetScroll > 100;
-              const fixed = direction == -1 && scrolled && !autoScroll;
-              const hidden = autoScroll || direction == 1 && scrolled;
-              const state = get();
-              if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction) {
-                set(state => ({
-                  hidden,
-                  fixed,
-                  direction
-                }));
-              }
-            });
-          }
-        }
-      }
+      }))
     }
   }), {
     name: 'llm',
@@ -1939,6 +1993,13 @@ const createLlmStore = _ref => {
   }));
   return useStore;
 };
+let sharedLlmStore;
+function createSharedLlmStore(props) {
+  if (!sharedLlmStore) {
+    sharedLlmStore = createLlmStore(props);
+  }
+  return sharedLlmStore;
+}
 const LlmContext = /*#__PURE__*/react.createContext(null);
 function LlmProvider(_a) {
   var {
@@ -1948,13 +2009,15 @@ function LlmProvider(_a) {
   const label = bomMixerHooks.useLabel();
   const storeRef = react.useRef();
   if (!storeRef.current) {
-    storeRef.current = createLlmStore(Object.assign(Object.assign({}, props), {
+    storeRef.current = createSharedLlmStore(Object.assign(Object.assign({}, props), {
       label
     }));
   }
   return storeRef.current && jsxRuntime.jsx(LlmContext.Provider, {
     value: storeRef.current,
-    children: children
+    children: jsxRuntime.jsx(LlmViewProvider, Object.assign({}, props, {
+      children: children
+    }))
   });
 }
 function useLlm(selector) {
@@ -2183,9 +2246,9 @@ const Header = props => {
   const app = useLlm(state => state.app);
   const {
     open
-  } = useLlm(state => state.actions);
-  const hidden = useLlm(state => state.hidden);
-  const fixed = useLlm(state => state.fixed);
+  } = useLlmView(state => state.actions);
+  const hidden = useLlmView(state => state.hidden);
+  const fixed = useLlmView(state => state.fixed);
   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;
@@ -2236,10 +2299,10 @@ const QuickLinks = () => {
   const {
     width
   } = bomMixerHooks.useWindowSize();
+  const app = useLlm(state => state.app);
   const {
     send
-  } = useLlm(state => state.actions);
-  const app = useLlm(state => state.app);
+  } = useLlmView(state => state.actions);
   const swiperProps = {
     spaceBetween: clamp(8, 16),
     slidesOffsetAfter: clamp(20, 110),
@@ -2248,7 +2311,7 @@ const QuickLinks = () => {
   };
   const onClick = item => __awaiter(void 0, void 0, void 0, function* () {
     yield send(item.message || item.title, response => {
-      // console.log('QuickLinks.onChunk', response.chunks);
+      // console.log('QuickLinks.onMessage', response.chunks);
     }, response => {
       // console.log('QuickLinks.onEnd', response);
     });
@@ -2489,7 +2552,7 @@ const Suggestions = () => {
   const app = useLlm(state => state.app);
   const {
     send
-  } = useLlm(state => state.actions);
+  } = useLlmView(state => state.actions);
   const swiperProps = {
     modules: [swiper.FreeMode],
     spaceBetween: 8,
@@ -2500,7 +2563,7 @@ const Suggestions = () => {
   };
   const onClick = item => __awaiter(void 0, void 0, void 0, function* () {
     yield send(item.sampleInputText, response => {
-      // console.log('Suggestions.onChunk', response.chunks);
+      // console.log('Suggestions.onMessage', response.chunks);
     }, response => {
       // console.log('Suggestions.onEnd', response);
     });
@@ -2526,7 +2589,6 @@ const Prompt = () => {
   const streaming = useLlm(state => state.streaming);
   const speakEnabled = useLlm(state => state.speakEnabled);
   const {
-    send,
     setPrompt,
     recognizeStart,
     recognizeStop,
@@ -2534,6 +2596,9 @@ const Prompt = () => {
     toggleSpeak,
     hasSpeechSupport
   } = useLlm(state => state.actions);
+  const {
+    send
+  } = useLlmView(state => state.actions);
   useAutosizeTextArea(textArea.current, prompt);
   const onChange = event => {
     var _a;
@@ -2719,9 +2784,11 @@ const Cta = props => {
 const Event = props => {
   const label = bomMixerHooks.useLabel();
   const {
-    send,
     decorateUrl
   } = useLlm(state => state.actions);
+  const {
+    send
+  } = useLlmView(state => state.actions);
   const onTellMeMore = () => __awaiter(void 0, void 0, void 0, function* () {
     const prompt = `${label('llm.tellMeMoreAbout')} ${props.title}`;
     yield send(prompt, response => {
@@ -3158,9 +3225,11 @@ const FormRequest = _ref => {
 const Poi = props => {
   const label = bomMixerHooks.useLabel();
   const {
-    send,
     decorateUrl
   } = useLlm(state => state.actions);
+  const {
+    send
+  } = useLlmView(state => state.actions);
   const onTellMeMore = () => __awaiter(void 0, void 0, void 0, function* () {
     const prompt = `${label('llm.tellMeMoreAbout')} ${props.title}`;
     yield send(prompt, response => {
@@ -3440,11 +3509,11 @@ const Thread = () => {
 const Main = () => {
   var _a;
   const lenisRef = react.useRef(null);
-  const embedded = useLlm(state => state.embedded);
   const messages = useLlm(state => state.messages);
+  const embedded = useLlmView(state => state.embedded);
   const {
     setLenis
-  } = useLlm(state => state.actions);
+  } = useLlmView(state => state.actions);
   const classNames = bomCore.getClassNames('llm__main');
   setLenis((_a = lenisRef.current) === null || _a === void 0 ? void 0 : _a.lenis);
   const reveal = {
@@ -3512,7 +3581,7 @@ const Main = () => {
       animate: "show",
       exit: "exit",
       children: !embedded && jsxRuntime.jsx(Header, {})
-    }), jsxRuntime.jsx(reactLenis.ReactLenis, {
+    }), jsxRuntime.jsx(react$2.ReactLenis, {
       ref: lenisRef,
       className: "llm__scroller",
       children: jsxRuntime.jsxs(framerMotion.motion.div, {
@@ -3534,10 +3603,10 @@ const Main = () => {
 };
 
 const Trigger = () => {
+  const app = useLlm(state => state.app);
   const {
     open
-  } = useLlm(state => state.actions);
-  const app = useLlm(state => state.app);
+  } = useLlmView(state => state.actions);
   const label = bomMixerHooks.useLabel();
   return jsxRuntime.jsxs(framerMotion.motion.div, {
     initial: {
@@ -3590,13 +3659,16 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
     locale
   } = bomMixerHooks.useLayout();
   const {
-    init,
-    open
+    init
   } = useLlm(state => state.actions);
   const app = useLlm(state => state.app);
-  const idle = useLlm(state => state.idle);
-  const opened = useLlm(state => state.opened);
-  const embedded = useLlm(state => state.embedded);
+  const {
+    initView,
+    open
+  } = useLlmView(state => state.actions);
+  const idle = useLlmView(state => state.idle);
+  const opened = useLlmView(state => state.opened);
+  const embedded = useLlmView(state => state.embedded);
   react.useImperativeHandle(ref, () => ({
     open: () => {
       open();
@@ -3604,10 +3676,13 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
   }));
   react.useEffect(() => {
     init(locale);
-  }, [init, locale]);
+    initView();
+  }, [init, locale, initView]);
   react.useEffect(() => {
-    document.documentElement.style.overflow = opened ? 'hidden' : 'auto';
-  }, [opened]);
+    if (!embedded) {
+      document.documentElement.style.overflow = opened ? 'hidden' : 'auto';
+    }
+  }, [opened, embedded]);
   const mounted = bomMixerHooks.useMounted();
   const classNames = bomCore.getClassNames('llm', {
     '-open': opened,