@websolutespa/bom-mixer-llm 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.2
+
+### Patch Changes
+
+- Added: markdown llm_pill click handler
+
+## 1.8.1
+
+### Patch Changes
+
+- Modified: cards css
+
 ## 1.8.0
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1179,6 +1179,7 @@ llm-embed {
   inset: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  max-width: 100%;
   /*
   &.lenis.lenis-stopped {
     overflow-x: hidden;
@@ -1336,6 +1337,14 @@ llm-embed {
   background: var(--llm-input-background);
   width: 100%;
 }
+.llm .llm__prompt-input.-speech-supported > .llm__prompt-textarea {
+  padding: 10px 40px;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-input.-speech-supported > .llm__prompt-textarea {
+    padding: 18px 40px;
+  }
+}
 .llm .llm__prompt-textarea {
   appearance: none;
   display: block;
@@ -1373,14 +1382,6 @@ llm-embed {
     max-height: 220px;
   }
 }
-.-speech-supported .llm .llm__prompt-textarea {
-  padding: 10px 40px;
-}
-@media (min-width: 1024px) {
-  .-speech-supported .llm .llm__prompt-textarea {
-    padding: 18px 40px;
-  }
-}
 .llm .llm__prompt-speak, .llm .llm__prompt-microphone {
   position: absolute;
   display: flex;
@@ -1682,6 +1683,10 @@ llm-embed {
   height: 320px;
   object-fit: cover;
 }
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__pill {
+  max-width: max(400px, 30vw);
+  margin-bottom: 1em;
+}
 .llm .llm__text-disclaimer {
   line-height: 1;
   font-family: var(--llm-font-secondary);
@@ -1916,12 +1921,13 @@ llm-embed {
 }
 .llm .llm__cards {
   width: 100%;
-  max-width: min(1360px, 75vw + 60px);
   margin: 0 auto 3rem auto;
+  overflow: hidden;
 }
 .llm .llm__cards .swiper {
-  position: relative;
+  max-width: min(1360px, 75vw + 60px);
   margin-top: clamp(40px, 40px + (100vw - 375px) / 1545 * 48, 88px);
+  position: relative;
   overflow: visible;
 }
 .llm .llm__cards .swiper-slide {
@@ -2559,14 +2565,15 @@ llm-embed {
 .llm .llm__message--user:last-child {
   margin-bottom: 20vh;
 }
-.llm .llm__inner:empty {
-  display: none;
-}
-.llm .llm__inner--eventGroup {
+.llm .llm__inner {
   width: 100%;
+  margin: 0 clamp(20px, 20px + (100vw - 375px) / 1545 * 90, 110px);
 }
-.llm .llm__inner--tripadvisorGroup {
-  width: 100%;
+.llm .llm__inner--cardGroup {
+  margin: 0;
+}
+.llm .llm__inner:empty {
+  display: none;
 }
 .llm .llm__message--user .llm__inner--string {
   margin-left: auto;
@@ -2869,6 +2876,7 @@ llm-embed {
   height: 30px;
   left: 10px;
   bottom: -50px;
+  margin: 0 clamp(20px, 20px + (100vw - 375px) / 1545 * 90, 110px);
   user-select: none;
   pointer-events: none;
   transition: none;

package/dist/cjs/index.js

@@ -1455,7 +1455,7 @@ class MessageService {
   mockMessage(request, onMessage, onEnd, onChunk) {
     return __awaiter(this, void 0, void 0, function* () {
       var _a, e_2, _b, _c;
-      console.log('mockMessage', request);
+      // console.log('mockMessage', request);
       this.abort();
       const aborter = new AbortController();
       const {
@@ -2311,7 +2311,7 @@ const createLlmViewStore = _ref => {
               */
               if (scroller_) {
                 const userMessages = Array.from(document.querySelectorAll('.llm.-open .llm__message.llm__message--user'));
-                console.log(userMessages);
+                // console.log(userMessages);
                 if (userMessages.length > 0) {
                   const lastUserMessage = userMessages.pop();
                   lastUserMessage.scrollIntoView({
@@ -3560,7 +3560,7 @@ const Prompt = () => {
   const textArea = react.useRef(null);
   const app = useLlm(state => state.app);
   const prompt = useLlm(state => state.prompt);
-  useLlm(state => state.messages);
+  const messages = useLlm(state => state.messages);
   const streaming = useLlm(state => state.streaming);
   const speakEnabled = useLlm(state => state.speakEnabled);
   const {
@@ -3601,7 +3601,7 @@ const Prompt = () => {
     className: "llm__prompt",
     children: jsxRuntime.jsxs("div", {
       className: "llm-container",
-      children: [jsxRuntime.jsx("div", {
+      children: [messages.length === 0 && jsxRuntime.jsx("div", {
         className: "llm__prompt-suggestions",
         children: jsxRuntime.jsx(Suggestions, {})
       }), jsxRuntime.jsxs("form", {
@@ -4600,7 +4600,12 @@ function getEmailHtml(data, app) {
 const Text = props => {
   const label = bomMixerHooks.useLabel();
   const app = useLlm(state => state.app);
+  const {
+    send
+  } = useLlmView(state => state.actions);
   const appDisclaimer = app === null || app === void 0 ? void 0 : app.contents.disclaimer;
+  const disclaimer = props.disclaimer ? appDisclaimer || label('llm.disclaimer') : '';
+  const htmlRef = react.useRef(null);
   const html = react.useMemo(() => {
     marked.marked.use({
       renderer: {
@@ -4617,14 +4622,39 @@ const Text = props => {
             <img src="${href}"${title ? ` title="${title}"` : ''} alt="${text}" />
           </a>`;
         }
+        /*
+        html(html: string, block?: boolean) {
+          console.log('html', html);
+          return html;
+        },
+        */
       }
     });
     return marked.marked.parse(props.body);
   }, [props.body]);
-  const disclaimer = props.disclaimer ? appDisclaimer || label('llm.disclaimer') : '';
+  react.useEffect(() => {
+    let pills = [];
+    if (htmlRef.current) {
+      pills = Array.from(htmlRef.current.querySelectorAll('.llm__pill'));
+    }
+    const pillClickHandler = event => __awaiter(void 0, void 0, void 0, function* () {
+      if (event.currentTarget) {
+        yield send(event.currentTarget.innerText, response => {
+          // console.log('Suggestions.onMessage', response.chunks);
+        }, response => {
+          // console.log('Suggestions.onEnd', response);
+        });
+      }
+    });
+    pills.forEach(x => x.addEventListener('click', pillClickHandler));
+    return () => {
+      pills.forEach(x => x.removeEventListener('click', pillClickHandler));
+    };
+  }, [props.body, send]);
   return jsxRuntime.jsxs("div", {
     className: "llm__text",
     children: [jsxRuntime.jsx("div", {
+      ref: htmlRef,
       className: "llm__text-body",
       dangerouslySetInnerHTML: {
         __html: html
@@ -4964,7 +4994,7 @@ const Stream = props => {
 const Thread = () => {
   const messages = useLlm(state => state.messages);
   return jsxRuntime.jsxs("div", {
-    className: "llm__thread llm-container",
+    className: "llm__thread",
     children: [messages.map((message, m) => jsxRuntime.jsx("div", {
       className: bomCore.getClassNames('llm__message', `llm__message--${message.role}`, 'llm-row'),
       children: message.chunks.map((chunk, c) => jsxRuntime.jsx("div", {