@websolutespa/bom-llm 0.0.23 → 0.0.24

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-llm
 
+## 0.0.24
+
+### Patch Changes
+
+- Added: markdown llm_pill click handler
+
 ## 0.0.23
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1471,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;
@@ -1508,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;
@@ -1817,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);

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