@websolutespa/bom-mixer-llm 0.0.14 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.0
+
+### Patch Changes
+
+- Updated dependencies [f8a1d97]
+  - @websolutespa/bom-core@1.8.0
+  - @websolutespa/bom-mixer-hooks@1.8.0
+
+## 0.0.15
+
+### Patch Changes
+
+- Modified: scroll behaviour
+
 ## 0.0.14
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1016,12 +1016,12 @@ llm-embed {
 }
 .llm:not(.-embedded) .llm__content {
   padding-top: 100px;
-  padding-bottom: 180px;
+  padding-bottom: calc(100vh - 240px);
 }
 @media (min-width: 1024px) {
   .llm:not(.-embedded) .llm__content {
     padding-top: 200px;
-    padding-bottom: 280px;
+    padding-bottom: calc(100vh - 240px);
   }
 }
 .llm:not(.-embedded).-custom-intro .llm__content {

package/dist/cjs/index.js

@@ -2207,7 +2207,6 @@ const createLlmViewStore = _ref => {
     direction: 0
   };
   let scroller_ = undefined;
-  let autoScroll = true;
   const useStore = zustand.createStore((set, get) => {
     const onScrollerScroll = event => {
       const {
@@ -2216,14 +2215,9 @@ const createLlmViewStore = _ref => {
         limit
       } = event;
       // console.log('onScrollerScroll', direction, targetScroll, limit);
-      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 fixed = direction == -1 && scrolled;
+      const hidden = direction == 1 && scrolled;
       const state = get();
       if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction) {
         set(state => ({
@@ -2306,16 +2300,38 @@ const createLlmViewStore = _ref => {
           handleIntersection();
         },
         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();
+          yield send(prompt, () => {
+            set({
+              skipCustomIntro: true
+            });
+            setTimeout(() => {
+              /*
+              const state = get();
+              state.actions.scrollToBottom();
+              */
+              if (scroller_) {
+                const userMessages = Array.from(document.querySelectorAll('.llm.-open .llm__message.llm__message--user'));
+                console.log(userMessages);
+                if (userMessages.length > 0) {
+                  const lastUserMessage = userMessages.pop();
+                  lastUserMessage.scrollIntoView({
+                    behavior: 'instant',
+                    block: 'start',
+                    inline: 'start'
+                  });
+                  /*
+                  scroller_.scrollTo(lastUserMessage, {
+                    immediate: true,
+                  });
+                  */
+                }
+              }
+            }, 50);
+          }, response => {
             if (typeof onMessage === 'function') {
               onMessage(response);
             }
           }, response => {
-            state.actions.scrollToBottom();
             if (typeof onEnd === 'function') {
               onEnd(response);
             }
@@ -2356,7 +2372,7 @@ const createLlmViewStore = _ref => {
           }
         },
         scrollToBottom: () => {
-          if (scroller_ && autoScroll) {
+          if (scroller_) {
             scroller_.scrollTo('bottom', {
               immediate: true
             });
@@ -2502,7 +2518,7 @@ const createLlmStore = _ref => {
           locale
         }, thread));
       }),
-      send: (prompt, onMessage, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
+      send: (prompt, onPrompt, onMessage, onEnd) => __awaiter(void 0, void 0, void 0, function* () {
         const state = get();
         messageService = new MessageService({
           apiKey,
@@ -2518,6 +2534,9 @@ const createLlmStore = _ref => {
           prompt: '',
           streaming: true
         }));
+        if (typeof onPrompt === 'function') {
+          onPrompt();
+        }
         const request = yield messageService.getRequest(messages, state.threadId);
         const speechReader = speech.getReader();
         yield messageService.sendMessage(request,
@@ -3541,7 +3560,7 @@ const Prompt = () => {
   const textArea = react.useRef(null);
   const app = useLlm(state => state.app);
   const prompt = useLlm(state => state.prompt);
-  const messages = useLlm(state => state.messages);
+  useLlm(state => state.messages);
   const streaming = useLlm(state => state.streaming);
   const speakEnabled = useLlm(state => state.speakEnabled);
   const {
@@ -3582,7 +3601,7 @@ const Prompt = () => {
     className: "llm__prompt",
     children: jsxRuntime.jsxs("div", {
       className: "llm-container",
-      children: [messages.length === 0 && jsxRuntime.jsx("div", {
+      children: [jsxRuntime.jsx("div", {
         className: "llm__prompt-suggestions",
         children: jsxRuntime.jsx(Suggestions, {})
       }), jsxRuntime.jsxs("form", {
@@ -4061,16 +4080,9 @@ const CardWrapper = _a => {
       children
     } = _a,
     props = __rest(_a, ["children"]);
-  const label = bomMixerHooks.useLabel();
+  // const label = useLabel();
   const classNames = bomCore.getClassNames('llm__card', `llm__card--${props.cardType}`);
-  return props.cardType === 'full' && props.cta.url ? jsxRuntime.jsx("a", {
-    className: classNames,
-    href: props.cta.url,
-    target: "_blank",
-    rel: "noreferrer",
-    "aria-label": props.cta.label || label('llm.tellMeMore'),
-    children: children
-  }) : jsxRuntime.jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: classNames,
     children: children
   });
@@ -4078,7 +4090,20 @@ const CardWrapper = _a => {
 const Card = props => {
   const label = bomMixerHooks.useLabel();
   return jsxRuntime.jsxs(CardWrapper, Object.assign({}, props, {
-    children: [props.media.type === 'image' && jsxRuntime.jsx("div", {
+    children: [props.media.type === 'image' && props.cta.url && jsxRuntime.jsx("a", {
+      className: "llm__card-media",
+      href: props.cta.url,
+      target: "_blank",
+      rel: "noreferrer",
+      "aria-label": props.cta.label || label('llm.tellMeMore'),
+      children: jsxRuntime.jsx("div", {
+        className: "llm__card-asset",
+        children: jsxRuntime.jsx("img", {
+          src: props.media.src,
+          alt: props.title
+        })
+      })
+    }), props.media.type === 'image' && !props.cta.url && jsxRuntime.jsx("div", {
       className: "llm__card-media",
       children: jsxRuntime.jsx("div", {
         className: "llm__card-asset",
@@ -5122,6 +5147,7 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
     initIntersection,
     open
   } = useLlmView(state => state.actions);
+  const skipCustomIntro = useLlmView(state => state.skipCustomIntro);
   const idle = useLlmView(state => state.idle);
   const opened = useLlmView(state => state.opened);
   const introed = useLlmView(state => state.introed);
@@ -5149,7 +5175,7 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
   const classNames = bomCore.getClassNames('llm', {
     '-open': opened,
     '-embedded': embedded,
-    '-custom-intro': (app === null || app === void 0 ? void 0 : app.contents.customIntro) != null
+    '-custom-intro': (app === null || app === void 0 ? void 0 : app.contents.customIntro) != null && !skipCustomIntro
   });
   if (mounted) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {