@websolutespa/bom-mixer-llm 1.8.1 → 1.8.2

package/CHANGELOG.md

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

package/dist/cjs/index.css

@@ -1337,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;
@@ -1374,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;
@@ -1683,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);

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