@websolutespa/bom-llm 0.0.22 → 0.0.24

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.24
+
+### Patch Changes
+
+- Added: markdown llm_pill click handler
+
+## 0.0.23
+
+### Patch Changes
+
+- Modified: cards css
+
 ## 0.0.22
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1313,6 +1313,7 @@ llm-embed {
   inset: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  max-width: 100%;
   /*
   &.lenis.lenis-stopped {
     overflow-x: hidden;
@@ -1470,6 +1471,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;
@@ -1507,14 +1516,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;
@@ -1816,6 +1817,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);
@@ -2050,12 +2055,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 {
@@ -2693,14 +2699,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;
@@ -3003,6 +3010,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/umd/index.js

@@ -19022,7 +19022,7 @@ ${Object.entries(vars).map(_ref2 => {
 	    }
 	  }
 	  async mockMessage(request, onMessage, onEnd, onChunk) {
-	    console.log('mockMessage', request);
+	    // console.log('mockMessage', request);
 	    this.abort();
 	    const aborter = new AbortController();
 	    const {
@@ -19882,7 +19882,7 @@ ${Object.entries(vars).map(_ref2 => {
 	              */
 	              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({
@@ -27255,7 +27255,7 @@ void main(void) {
 	  const textArea = reactExports.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 {
@@ -27295,7 +27295,7 @@ void main(void) {
 	    className: "llm__prompt",
 	    children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	      className: "llm-container",
-	      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	      children: [messages.length === 0 && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__prompt-suggestions",
 	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Suggestions, {})
 	      }), /*#__PURE__*/jsxRuntimeExports.jsxs("form", {
@@ -30639,7 +30639,12 @@ void main(void) {
 	const Text = props => {
 	  const label = useLabel();
 	  const app = useLlm(state => state.app);
+	  const {
+	    send
+	  } = useLlmView(state => state.actions);
 	  const appDisclaimer = app?.contents.disclaimer;
+	  const disclaimer = props.disclaimer ? appDisclaimer || label('llm.disclaimer') : '';
+	  const htmlRef = reactExports.useRef(null);
 	  const html = reactExports.useMemo(() => {
 	    marked.use({
 	      renderer: {
@@ -30656,14 +30661,39 @@ void main(void) {
             <img src="${href}"${title ? ` title="${title}"` : ''} alt="${text}" />
           </a>`;
 	        }
+	        /*
+	        html(html: string, block?: boolean) {
+	          console.log('html', html);
+	          return html;
+	        },
+	        */
 	      }
 	    });
 	    return marked.parse(props.body);
 	  }, [props.body]);
-	  const disclaimer = props.disclaimer ? appDisclaimer || label('llm.disclaimer') : '';
+	  reactExports.useEffect(() => {
+	    let pills = [];
+	    if (htmlRef.current) {
+	      pills = Array.from(htmlRef.current.querySelectorAll('.llm__pill'));
+	    }
+	    const pillClickHandler = async event => {
+	      if (event.currentTarget) {
+	        await 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 /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	    className: "llm__text",
 	    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	      ref: htmlRef,
 	      className: "llm__text-body",
 	      dangerouslySetInnerHTML: {
 	        __html: html
@@ -31021,7 +31051,7 @@ void main(void) {
 	const Thread = () => {
 	  const messages = useLlm(state => state.messages);
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-	    className: "llm__thread llm-container",
+	    className: "llm__thread",
 	    children: [messages.map((message, m) => /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	      className: getClassNames('llm__message', `llm__message--${message.role}`, 'llm-row'),
 	      children: message.chunks.map((chunk, c) => /*#__PURE__*/jsxRuntimeExports.jsx("div", {