@websolutespa/bom-llm 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @websolutespa/bom-llm
 
+## 0.0.7
+
+### Patch Changes
+
+- Modified: components dangerouslySetInnerHTML, styles, useLlm status opened with threadId
+
+## 0.0.6
+
+### Patch Changes
+
+- Fixing: threads
+- Modified: MessageService, FormRecap, useLlm
+
 ## 0.0.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -10,6 +10,7 @@ type LlmOptions = {
     market?: string;
     test?: boolean;
     threadId?: string;
+    opened?: boolean;
 };
 
 declare function bomLlm(props: LlmOptions): void;

package/dist/umd/index.css

@@ -1415,6 +1415,9 @@
 .-llm-scrolled .llm .llm__header-logo-full {
   display: none;
 }
+.llm .llm__header-logo-full > img {
+  object-fit: contain;
+}
 .llm .llm__header-logo-mini {
   position: relative;
   overflow: hidden;
@@ -1444,6 +1447,9 @@
 .-llm-scrolled .llm .llm__header-logo-mini {
   display: block;
 }
+.llm .llm__header-logo-mini > img {
+  object-fit: contain;
+}
 .llm .llm__header-back {
   color: white;
   text-transform: uppercase;
@@ -1765,7 +1771,12 @@
 }
 .llm .llm__message--assistant .llm__inner--string:not(:first-child) .llm__text .llm__text-body ol,
 .llm .llm__message--assistant .llm__inner--string:not(:first-child) .llm__text .llm__text-body ul {
-  margin-left: 0.9em;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(24px,
+    calc(24px + (100vw - 375px) / (1920 - 375) * (8)),
+    32px);
+  margin-left: 1em;
 }
 .llm .llm__message--assistant .llm__inner--string:not(:first-child) .llm__text .llm__text-body ul {
   list-style: disc;

package/dist/umd/index.js

@@ -22873,8 +22873,18 @@
 	  let decodedChunks = [];
 	  try {
 	    // const replacedText = decodedText.replace(/(^\[)|(,$)|(\]$)/g, '');
-	    const replacedText = decodedText.replace(/(,$)/g, '');
-	    // console.log('textToChunks', `[${replacedText}]`);
+	    let replacedText = decodedText;
+	    // replacedText = replacedText.replace(/(^,")/, '",');
+	    replacedText = replacedText.replace(/(,$)/, '');
+	    // replacedText = replacedText.replace(/}\s{/g, '},{');
+	    /*
+	    replacedText = replacedText.split(',').map(x => {
+	      return x.replace(/^"([^{]*)"$/m, (m, g) => {
+	        return '"' + g.replace('"', '\\"') + '"';
+	      });
+	    }).join(',');
+	    */
+	    // console.log('textToChunks.replacedText', `[${replacedText}]`);
 	    const chunks = JSON.parse(`[${replacedText}]`);
 	    // console.log('chunks', chunks);
 	    /*
@@ -22959,19 +22969,24 @@
 	          chunks.push(x);
 	      }
 	    } else if (typeof x === 'string') {
-	      if (lastMessage && lastMessage.type === 'string') {
-	        const content = lastMessage.content + x;
-	        const contents = content.split('\n');
-	        contents.forEach((content, i) => {
-	          if (i === 0) {
-	            lastMessage.content = content;
-	          } else if (content.length > 0 || i === contents.length - 1) {
-	            chunks.push({
-	              type: 'string',
-	              content
-	            });
-	          }
-	        });
+	      // console.warn('chunksToChunkItems typeof string');
+	      if (lastMessage && lastMessage.type === 'string' && !lastMessage.content.includes('\n')) {
+	        if (x.includes('\n')) {
+	          const contents = x.split('\n');
+	          contents.forEach((content, i) => {
+	            const lastChar = contents.length > i + 1 ? '\n' : '';
+	            if (i === 0) {
+	              lastMessage.content += content + lastChar;
+	            } else if (content.length > 0) {
+	              chunks.push({
+	                type: 'string',
+	                content: content + lastChar
+	              });
+	            }
+	          });
+	        } else {
+	          lastMessage.content += x;
+	        }
 	      } else {
 	        chunks.push({
 	          type: 'string',
@@ -22983,19 +22998,39 @@
 	  return chunks;
 	}
 	function decodeMessages(messages) {
-	  return messages.map(x => ({
-	    ...x,
-	    chunks: chunksToChunkItems(textToChunks(x.content.split('\r\n').map(x => {
-	      if (['{', '['].includes(x.substring(0, 1))) {
-	        // console.log('obj', x);
-	        return x;
-	      } else {
-	        // console.log('str', `"${x.replace(/\n/g, '\\n')}"`);
-	        return `"${x.replace(/\n/g, '\\n')}"`;
-	      }
-	    }).join(',')))
-	  }));
+	  return messages.map(x => {
+	    if (x.role === 'user') {
+	      return {
+	        ...x,
+	        chunks: [{
+	          type: 'string',
+	          content: x.content
+	        }]
+	      };
+	    }
+	    return {
+	      ...x,
+	      chunks: chunksToChunkItems(textToChunks(x.content))
+	      /*
+	      chunks: chunksToChunkItems(textToChunks(
+	        x.content
+	          .split('\r\n')
+	          .map(x => {
+	            if (['{', '['].includes(x.substring(0, 1))) {
+	              // console.log('obj', x);
+	              return x;
+	            } else {
+	              // console.log('str', `"${x.replace(/\n/g, '\\n')}"`);
+	              return `"${x.replace(/\n/g, '\\n')}"`;
+	            }
+	          })
+	          .join(',')
+	      )),
+	      */
+	    };
+	  });
 	}
+
 	function shouldAddFormRequest(messages) {
 	  const hasFormRequest = messages.find(x => x.chunks.find(x => x.type === 'formRequest') !== undefined);
 	  const importantMessages = messages.filter(x => x.chunks.find(x => ['event', 'eventItem', 'eventGroup', 'poi', 'poiItem', 'poiGroup', 'tripadvisor', 'tripadvisorItem', 'tripadvisorGroup'].includes(x.type)) !== undefined);
@@ -23745,26 +23780,24 @@
 	    appKey,
 	    apiKey,
 	    threadId,
+	    opened,
 	    decorateUrl,
 	    endpoint,
 	    test,
 	    storage,
 	    label
 	  } = _ref;
-	  /*
-	  endpoint = endpoint || 'http://localhost:4000/bowl';
-	  test = false;
-	  */
-
 	  const props = {
 	    hydrated: false,
 	    messages: [],
 	    prompt: '',
 	    locale: 'en',
 	    streaming: false,
-	    opened: false,
+	    opened: opened != null ? opened : threadId != null ? true : false,
 	    hidden: false,
 	    fixed: false,
+	    idle: true,
+	    direction: 0,
 	    speakEnabled: false
 	  };
 	  let messageService = undefined;
@@ -23783,35 +23816,49 @@
 	    const baseUrl = `${origin}/api/llm`;
 	    return {
 	      get: async pathname => {
-	        const response = await fetch(`${baseUrl}${pathname}${pathname.indexOf('?') !== -1 ? '&' : '?'}locale=${options.locale}`, {
-	          method: 'GET',
-	          headers: {
-	            'Content-Type': 'application/json'
+	        const url = `${baseUrl}${pathname}${pathname.indexOf('?') !== -1 ? '&' : '?'}locale=${options.locale}`;
+	        try {
+	          const response = await fetch(url, {
+	            method: 'GET',
+	            headers: {
+	              'Content-Type': 'application/json'
+	            }
+	          });
+	          if (response.ok) {
+	            const data = await response.json();
+	            return data;
+	          } else {
+	            console.error('useLlm.api.get', url, response);
+	            return undefined;
 	          }
-	        });
-	        if (response.ok) {
-	          const data = await response.json();
-	          return data;
-	        } else {
-	          throw response;
+	        } catch (error) {
+	          console.error('useLlm.api.get', url, error);
+	          return undefined;
 	        }
 	      },
 	      post: async (pathname, payload) => {
-	        const response = await fetch(`${baseUrl}${pathname}${pathname.indexOf('?') !== -1 ? '&' : '?'}locale=${options.locale}`, {
-	          method: 'POST',
-	          body: JSON.stringify({
-	            ...options,
-	            ...payload
-	          }),
-	          headers: {
-	            'Content-Type': 'application/json'
+	        const url = `${baseUrl}${pathname}${pathname.indexOf('?') !== -1 ? '&' : '?'}locale=${options.locale}`;
+	        try {
+	          const response = await fetch(url, {
+	            method: 'POST',
+	            body: JSON.stringify({
+	              ...options,
+	              ...payload
+	            }),
+	            headers: {
+	              'Content-Type': 'application/json'
+	            }
+	          });
+	          if (response.ok) {
+	            const data = await response.json();
+	            return data;
+	          } else {
+	            console.error('useLlm.api.post', response, url);
+	            return undefined;
 	          }
-	        });
-	        if (response.ok) {
-	          const data = await response.json();
-	          return data;
-	        } else {
-	          throw response;
+	        } catch (error) {
+	          console.error('useLlm.api.post', error, url);
+	          return undefined;
 	        }
 	      }
 	    };
@@ -23834,21 +23881,19 @@
 	      },
 	      init: async locale => {
 	        const fetchApp = async () => {
-	          try {
-	            const api = getApi({
-	              locale,
-	              appKey,
-	              apiKey,
-	              threadId
-	            });
-	            const app = await api.post('/info');
-	            return app;
-	          } catch (error) {
-	            console.log('useLlm.init.error', error);
-	            throw error;
-	          }
+	          const api = getApi({
+	            locale,
+	            appKey,
+	            apiKey,
+	            threadId
+	          });
+	          const app = await api.post('/info');
+	          return app;
 	        };
 	        const app = await fetchApp();
+	        if (!app) {
+	          return;
+	        }
 	        const state = get();
 	        speech.lang = locale;
 	        speech.enabled = state.speakEnabled;
@@ -23868,6 +23913,43 @@
 	          locale,
 	          ...thread
 	        }));
+	        // handle idle times
+	        const setIdleTimeout = () => {
+	          return setTimeout(() => {
+	            set(() => ({
+	              idle: true
+	            }));
+	          }, 6000);
+	        };
+	        const handleIdleTimes = () => {
+	          let to = setIdleTimeout();
+	          let lastScrollTop = 0;
+	          window.addEventListener('scroll', () => {
+	            const st = window.scrollY || document.documentElement.scrollTop;
+	            let direction = 0;
+	            if (st > lastScrollTop) {
+	              direction = 1;
+	            } else if (st < lastScrollTop) {
+	              direction = -1;
+	            }
+	            lastScrollTop = st <= 0 ? 0 : st;
+	            if (direction === 1) {
+	              if (to) {
+	                clearTimeout(to);
+	              }
+	              set(() => ({
+	                idle: false
+	              }));
+	              to = setIdleTimeout();
+	            }
+	          });
+	        };
+	        setTimeout(() => {
+	          set(() => ({
+	            idle: false
+	          }));
+	          handleIdleTimes();
+	        }, 2000);
 	      },
 	      send: async (prompt, onChunk, onEnd) => {
 	        if (test) {
@@ -23918,7 +24000,7 @@
 	        await messageService.sendMessage(request,
 	        // onMessage
 	        response => {
-	          // console.log('response.chunks', response.chunks);
+	          // console.log('messageService.sendMessage.onMessage', response.chunks);
 	          set(state => ({
 	            chunks: response.chunks
 	          }));
@@ -23929,7 +24011,7 @@
 	        },
 	        // onEnd
 	        response => {
-	          // console.log('response.chunks', response.chunks);
+	          // console.log('messageService.sendMessage.onEnd', response.chunks);
 	          const chunks = [...response.chunks];
 	          const assistantMessage = {
 	            chunks,
@@ -23942,17 +24024,22 @@
 	              type: 'formRequest'
 	            });
 	          }
-	          assistantMessage.content = chunks.filter(x => !['info', 'end', 'formRequest', 'formRecap', 'formRecapSuccess', 'formRecapError'].includes(x.type)).map(x => {
-	            let text = '';
-	            switch (x.type) {
-	              case 'string':
-	                text += x.content;
-	                break;
-	              default:
-	                text += JSON.stringify(x);
+	          // filtering history
+	          const validChunks = chunks.filter(x => !['info', 'end', 'formRequest', 'formRecap', 'formRecapSuccess', 'formRecapError'].includes(x.type));
+	          const parsedChunks = [];
+	          validChunks.reduce((p, c) => {
+	            const firstChunk = p.length > 1 && p[p.length - 2];
+	            const secondChunk = p.length > 1 && p[p.length - 1];
+	            if (firstChunk && secondChunk && c.type === 'string' && firstChunk.type === 'string' && secondChunk.type === 'string') {
+	              secondChunk.content += c.content;
+	            } else {
+	              p.push({
+	                ...c
+	              });
 	            }
-	            return text;
-	          }).join('\r\n');
+	            return p;
+	          }, parsedChunks);
+	          assistantMessage.content = parsedChunks.map(x => JSON.stringify(x)).join(',') + ',';
 	          set(state => ({
 	            chunks: undefined,
 	            messages,
@@ -24029,7 +24116,9 @@
 	        }));
 	      },
 	      formRecap: error => {
-	        console.log('useLlm.formRecap', error);
+	        if (error) {
+	          console.warn('useLlm.formRecap', error);
+	        }
 	        const messages = [];
 	        const assistantMessage = {
 	          chunks: [{
@@ -24074,10 +24163,14 @@
 	              const scrolled = targetScroll > 100;
 	              const fixed = direction == -1 && scrolled && !autoScroll;
 	              const hidden = autoScroll || direction == 1 && scrolled;
-	              set(state => ({
-	                hidden,
-	                fixed
-	              }));
+	              const state = get();
+	              if (state.hidden !== hidden || state.fixed !== fixed || state.direction !== direction) {
+	                set(state => ({
+	                  hidden,
+	                  fixed,
+	                  direction
+	                }));
+	              }
 	            });
 	          }
 	        }
@@ -24106,16 +24199,20 @@
 	      */
 	      currentState.hydrated = true;
 	      return currentState;
-	    }
+	    },
+	    partialize: state => Object.fromEntries(Object.entries(state).filter(_ref2 => {
+	      let [key] = _ref2;
+	      return ['app', 'locale', 'speakEnabled'].includes(key);
+	    }))
 	  }));
 	  return useStore;
 	};
 	const LlmContext = /*#__PURE__*/reactExports.createContext(null);
-	function LlmProvider(_ref2) {
+	function LlmProvider(_ref3) {
 	  let {
 	    children,
 	    ...props
-	  } = _ref2;
+	  } = _ref3;
 	  const label = useLabel();
 	  const storeRef = reactExports.useRef();
 	  if (!storeRef.current) {
@@ -25558,13 +25655,17 @@ void main(void) {
 	          children: label('llm.eventPretitle')
 	        }), props.title && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	          className: "llm__event-title",
-	          children: props.title
+	          dangerouslySetInnerHTML: {
+	            __html: props.title
+	          }
 	        }), props.abstract && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	          className: "llm__event-body",
-	          children: props.abstract
+	          dangerouslySetInnerHTML: {
+	            __html: props.abstract
+	          }
 	        }), props.place && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          className: "llm__event-location",
-	          children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPin, {}), props.place]
+	          children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPin, {}), " ", props.place]
 	        }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          className: "llm__event-ctas",
 	          children: [/*#__PURE__*/jsxRuntimeExports.jsx(Cta, {
@@ -25654,6 +25755,7 @@ void main(void) {
 
 	const FormRecap = () => {
 	  const label = useLabel();
+	  const app = useLlm(state => state.app);
 	  const threadId = useLlm(state => state.threadId);
 	  const {
 	    formRecap,
@@ -25670,12 +25772,19 @@ void main(void) {
 	      data.threadId = threadId;
 	      const payload = {
 	        ...data,
-	        html: getEmailHtml(data)
+	        html: getEmailHtml(data, app)
 	      };
 	      const api = getApi();
 	      const response = await api.post('/summary', payload);
-	      console.warn('FormRecap.onSubmit.success', response, payload);
-	      formRecap();
+	      if (response) {
+	        console.warn('FormRecap.onSubmit.success', response, payload);
+	        formRecap();
+	      } else {
+	        console.warn('FormRecap.onSubmit.error');
+	        formRecap({
+	          message: 'unknown error'
+	        });
+	      }
 	    } catch (error) {
 	      console.warn('FormRecap.onSubmit.error', error);
 	      formRecap(error);
@@ -25731,12 +25840,13 @@ void main(void) {
 	    })
 	  });
 	};
-	function getEmailHtml(data) {
+	function getEmailHtml(data, app) {
 	  const firstName = data.fullName ? data.fullName.split(' ')[0] : '';
+	  const name = app?.contents?.shortWelcomeText || 'PlatformAI';
 	  const title = `Ciao ${firstName}`;
 	  const paragraphs = `<p>${['Ecco il tuo promemoria,', 'per qualunque altra cosa sai dove potermi trovare, sarò sempre lieto di parlare con te. 👋'].join('</p><p>')}</p>`;
 	  const colorAccent = '#00aeff';
-	  const threadUrl = window.location.href + `${window.location.search ? '&' : '?'}threadId=${data.threadId}`;
+	  const threadUrl = window.location.href + `${window.location.search ? '&' : '?'}llmThreadId=${data.threadId}`;
 	  return `
 <!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
@@ -25834,7 +25944,7 @@ void main(void) {
                   <tbody>
                     <tr>
                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family:Inter;font-size:20px;font-weight:600;line-height:24px;text-align:left;color:#3b3b3b;">platform@websolute.ai</div>
+                        <div style="font-family:Inter;font-size:20px;font-weight:600;line-height:24px;text-align:left;color:#3b3b3b;">${name}</div>
                       </td>
                     </tr>
                     <tr>
@@ -28312,10 +28422,14 @@ void main(void) {
 	      className: "llm__poi-content",
 	      children: [props.title && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__poi-title",
-	        children: props.title
+	        dangerouslySetInnerHTML: {
+	          __html: props.title
+	        }
 	      }), props.abstract && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__poi-body",
-	        children: props.abstract
+	        dangerouslySetInnerHTML: {
+	          __html: props.abstract
+	        }
 	      }), (props.time || props.place) && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	        className: "llm__poi-tags",
 	        children: [props.time && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -28397,7 +28511,7 @@ void main(void) {
 	          })
 	        }), props.address && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          className: "llm__tripadv-location",
-	          children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPin, {}), props.address]
+	          children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPin, {}), " ", props.address]
 	        }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          className: "llm__tripadv-ctas",
 	          children: [props.book && /*#__PURE__*/jsxRuntimeExports.jsx(Cta, {
@@ -28678,8 +28792,17 @@ void main(void) {
 	  const app = useLlm(state => state.app);
 	  const label = useLabel();
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
+	    initial: {
+	      y: '200%',
+	      opacity: 0
+	    },
+	    animate: {
+	      y: 0,
+	      opacity: 1
+	    },
 	    exit: {
-	      y: '200%'
+	      y: '200%',
+	      opacity: 0
 	    },
 	    transition: {
 	      duration: .4
@@ -28722,6 +28845,7 @@ void main(void) {
 	    init
 	  } = useLlm(state => state.actions);
 	  const app = useLlm(state => state.app);
+	  const idle = useLlm(state => state.idle);
 	  const opened = useLlm(state => state.opened);
 	  reactExports.useEffect(() => {
 	    init(locale);
@@ -28735,14 +28859,14 @@ void main(void) {
 	  });
 	  if (mounted) {
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-	      children: app && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+	      children: app && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: classNames,
 	        ...props,
-	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
-	          children: !opened && /*#__PURE__*/jsxRuntimeExports.jsx(Trigger, {})
-	        }), /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
-	          children: opened && /*#__PURE__*/jsxRuntimeExports.jsx(Main, {})
-	        })]
+	        children: /*#__PURE__*/jsxRuntimeExports.jsxs(AnimatePresence, {
+	          mode: "wait",
+	          initial: false,
+	          children: [!opened && !idle && /*#__PURE__*/jsxRuntimeExports.jsx(Trigger, {}), opened && /*#__PURE__*/jsxRuntimeExports.jsx(Main, {})]
+	        })
 	      })
 	    });
 	  } else {