@websolutespa/bom-llm 0.0.56 → 0.0.57

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-llm
 
+## 0.0.57
+
+### Patch Changes
+
+- Added: Action, LlmChunkAction, onAction handler
+
 ## 0.0.56
 
 ### Patch Changes

package/README.md

@@ -131,6 +131,23 @@ decorateUrl method can be a promise.
   bomLlm(options);
 ```
 
+### Handling external actions
+
+You can handle the click event of the generated cta action with the onAction handler.
+
+```js
+  const searchParams = new URLSearchParams(window.location.search);
+  const options = {
+    appKey: 'MY_APP_KEY',
+    apiKey: 'MY_API_KEY',
+    threadId: searchParams.get('llmThreadId'),
+    onAction: (item) => {
+      console.log('onAction', item.id, item.title);
+    },
+  };
+  bomLlm(options);
+```
+
 ### Supported types
 
 Currently available types are:  

package/dist/index.d.ts

@@ -4,6 +4,11 @@ type DeepPartial<T> = T extends object ? {
 type LlmItem = Record<string, any> & {
     type: string;
 };
+type LlmAction = Record<string, any> & {
+    type: 'action' | 'actionItem';
+    id: string | number;
+    title: string;
+};
 type LlmTheme = any;
 type IMedia = Record<string, unknown> & {
     abstract?: string;
@@ -86,6 +91,7 @@ type LlmMock = {
 };
 type LlmTest = undefined | boolean | DeepPartial<LlmMock>;
 type LlmDecorateUrl = (item: LlmItem) => (string | void) | Promise<string | void>;
+type LlmOnAction = (item: LlmAction) => (void) | Promise<boolean | void>;
 type LlmViewOptions = {
     threadId?: string;
     preview?: boolean;
@@ -99,6 +105,7 @@ type LlmOptions = {
     apiKey: string;
     appKey: string;
     decorateUrl?: LlmDecorateUrl;
+    onAction?: LlmOnAction;
     test?: LlmTest;
     customTheme?: Partial<LlmTheme>;
     locale?: string;

package/dist/umd/index.css

@@ -934,7 +934,7 @@ llm-embed {
 .llm .llm__header-wrapper {
   display: flex;
   justify-content: space-between;
-  padding: 0 var(--llm-size-5, 2.5rem);
+  padding: 0 min(var(--llm-size-5, 2.5rem), clamp(20px * var(--s, 1), 20px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * 90 * var(--s, 1), 110px * var(--s, 1)));
   align-items: center;
   height: 70px;
   z-index: 2;
@@ -1241,6 +1241,16 @@ llm-embed {
 .llm .llm__intro-blob > div {
   height: 100%;
 }
+.llm.-chat .llm__intro-blob {
+  width: 50px;
+  height: 50px;
+}
+@media (min-width: 1440px) {
+  .llm.-chat .llm__intro-blob {
+    width: 60px;
+    height: 60px;
+  }
+}
 @media (min-width: 1024px) {
   .llm .llm__intro-wrapper {
     justify-content: space-between;
@@ -1252,6 +1262,9 @@ llm-embed {
   gap: var(--llm-size-5, 2.5rem);
   color: var(--llm-color-title-foreground);
 }
+.llm.-chat .llm__intro-text {
+  gap: var(--llm-size-3, 1.5rem);
+}
 .llm .llm__intro-hints {
   margin-top: var(--llm-size-5, 2.5rem);
 }
@@ -1260,6 +1273,9 @@ llm-embed {
     margin-top: 0;
   }
 }
+.llm.-chat .llm__intro-hints {
+  margin-top: var(--llm-size-3, 1.5rem);
+}
 .llm .llm__customIntro {
   position: absolute;
   top: 0;
@@ -1286,7 +1302,7 @@ llm-embed {
   }
 }
 .llm .llm__hints .swiper-wrapper {
-  padding: 1px 0;
+  padding: 4px 0;
 }
 .llm .llm__hints .swiper-slide {
   height: auto;
@@ -1357,6 +1373,7 @@ llm-embed {
 }
 .llm .llm__hint-title.column {
   flex-direction: column;
+  width: 100%;
 }
 .llm .llm__hint-title i {
   flex-shrink: 0;
@@ -1369,6 +1386,7 @@ llm-embed {
   fill: currentColor;
 }
 .llm .llm__hint-body {
+  width: 100%;
   line-height: 140%;
 }
 
@@ -2049,6 +2067,21 @@ llm-embed {
   border-radius: 12px;
   padding: var(--llm-size-3, 1.5rem) var(--llm-size-4, 2rem);
 }
+.llm.-chat .llm__message--user .llm__text {
+  display: flex;
+  flex-direction: column;
+}
+.llm.-chat .llm__message--user .llm__text .llm__text-body {
+  align-self: flex-end;
+  padding: 0.5em 0;
+  padding: var(--llm-pill-padding, 8px);
+  border: var(--llm-pill-border);
+  border-radius: var(--llm-pill-border-radius);
+  background: var(--llm-pill-background);
+  color: var(--llm-pill-foreground);
+  font-family: var(--llm-pill-font-family);
+  text-align: right;
+}
 .llm .llm__message--assistant .llm__inner--text:first-child .llm__text .llm__text-body, .llm .llm__message--assistant .llm__inner--text:first-child .llm__text .llm__text-body > p, .llm .llm__message--assistant .llm__inner--text:first-child .llm__text .llm__text-body > h2,
 .llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body,
 .llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body > p,
@@ -4368,6 +4401,13 @@ llm-embed {
   transform: rotate(90deg);
 }
 
+.llm .llm__actions {
+  display: flex;
+  gap: var(--llm-size-4, 2rem);
+  padding-top: var(--llm-size-2, 1rem);
+  margin-top: auto;
+}
+
 /**
  * Swiper 8.4.7
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/umd/index.js

@@ -18016,13 +18016,12 @@
 	  error: "#ff4848"
 	};
 	var border = "1px solid var(--llm-color-neutral-200)";
-	var main = {
-	  background: "var(--llm-color-background)",
-	  foreground: "var(--llm-color-foreground)"
-	};
-	var canvas = {
-	  opacity: 0.8,
-	  enabled: true
+	var trigger$1 = {
+	  position: "bottom",
+	  size: "60px",
+	  background: "var(--llm-color-base-200)",
+	  foreground: "var(--llm-color-base-100)",
+	  boxShadow: "var(--llm-shadow-md)"
 	};
 	var chat = {
 	  top: "auto",
@@ -18034,12 +18033,13 @@
 	  borderRadius: "8px",
 	  boxShadow: "var(--llm-shadow-sm)"
 	};
-	var trigger$1 = {
-	  position: "bottom",
-	  size: "60px",
-	  background: "var(--llm-color-base-200)",
-	  foreground: "var(--llm-color-base-100)",
-	  boxShadow: "var(--llm-shadow-md)"
+	var main = {
+	  background: "var(--llm-color-background)",
+	  foreground: "var(--llm-color-foreground)"
+	};
+	var canvas = {
+	  opacity: 0.8,
+	  enabled: true
 	};
 	var popup = {
 	  maxWidth: "210px",
@@ -18159,10 +18159,10 @@
 	  typography: typography,
 	  color: color,
 	  border: border,
+	  trigger: trigger$1,
+	  chat: chat,
 	  main: main,
 	  canvas: canvas,
-	  chat: chat,
-	  trigger: trigger$1,
 	  popup: popup,
 	  triggerCta: triggerCta,
 	  hint: hint,
@@ -19188,7 +19188,9 @@ ${Object.entries(vars).map(_ref2 => {
 	  return chunk.type === 'string';
 	}
 
-	// cards
+	// media
+
+	// actions
 
 	// cards
 
@@ -19352,6 +19354,17 @@ ${Object.entries(vars).map(_ref2 => {
 	              // response = { ...response, ...rest };
 	            }
 	            break;
+	          case 'action':
+	          case 'actionItem':
+	            if (lastMessage && lastMessage.type === 'actionGroup') {
+	              lastMessage.items.push(x);
+	            } else {
+	              chunkItems.push({
+	                type: 'actionGroup',
+	                items: [x]
+	              });
+	            }
+	            break;
 	          case 'cardItem':
 	            if (lastMessage && lastMessage.type === 'cardGroup') {
 	              lastMessage.items.push(x);
@@ -22973,6 +22986,7 @@ ${Object.entries(vars).map(_ref2 => {
 	    apiKey,
 	    threadId,
 	    decorateUrl,
+	    onAction,
 	    endpoint,
 	    storage,
 	    test,
@@ -23303,10 +23317,16 @@ ${Object.entries(vars).map(_ref2 => {
 	      decorateUrl: async (item, defaultUrl) => {
 	        let url;
 	        if (typeof decorateUrl === 'function') {
-	          url = await decorateUrl(item);
+	          url = (await decorateUrl(item)) || undefined;
 	        }
 	        return url || defaultUrl || '#';
 	      },
+	      onAction: async item => {
+	        if (typeof onAction === 'function') {
+	          return await onAction(item);
+	        }
+	        return;
+	      },
 	      clear: () => set(state => ({
 	        messages: []
 	      }))
@@ -30714,6 +30734,70 @@ void main(void) {
 	  });
 	}
 
+	const Cta = props => {
+	  const onClick = event => {
+	    if (typeof props.onClick === 'function') {
+	      props.onClick(event);
+	    }
+	  };
+	  const bg = props.type == 'button' || props.type == 'submit' ? /*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}) : '';
+	  const icon = props.icon || (props.type == 'text' ? /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowRight, {}) : '');
+	  const classNames = getClassNames('llm__cta', `llm__cta--${props.type}`, props.className);
+	  return props.url ? /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	    className: classNames,
+	    href: props.url,
+	    target: props.target,
+	    children: [bg, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	      children: props.label
+	    }), icon]
+	  }) : /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
+	    className: classNames,
+	    onClick: onClick,
+	    type: props.type == 'button' || props.type == 'submit' ? props.type : undefined,
+	    children: [bg, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	      children: props.label
+	    }), icon]
+	  });
+	};
+
+	const Action = props => {
+	  const label = useLabel();
+	  const {
+	    onAction
+	  } = useLlm(state => state.actions);
+	  const {
+	    open
+	  } = useLlmView(state => state.actions);
+	  const dismissable = useLlmView(state => state.dismissable);
+	  const onAction_ = async event => {
+	    // console.log('Action.onAction', props.id);
+	    const shouldClose = await onAction(props);
+	    if (dismissable && shouldClose !== false) {
+	      open();
+	    }
+	  };
+	  const classNames = getClassNames('llm__action', {
+	    [`llm__action--${props.type}`]: !!props.type
+	  });
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(Cta, {
+	    type: "button",
+	    className: classNames,
+	    label: props.title || label('llm.tellMeMore'),
+	    icon: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowRight, {}),
+	    onClick: onAction_
+	  });
+	};
+
+	const ActionGroup = props => {
+	  const classNames = getClassNames('llm__actions');
+	  return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	    className: classNames,
+	    children: props.items.map((item, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Action, {
+	      ...item
+	    }, i))
+	  });
+	};
+
 	const Dialog = _ref => {
 	  let {
 	    children,
@@ -31131,32 +31215,6 @@ void main(void) {
 	  });
 	};
 
-	const Cta = props => {
-	  const onClick = event => {
-	    if (typeof props.onClick === 'function') {
-	      props.onClick(event);
-	    }
-	  };
-	  const bg = props.type == 'button' || props.type == 'submit' ? /*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}) : '';
-	  const icon = props.type == 'text' ? /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowRight, {}) : '';
-	  const classNames = getClassNames('llm__cta', `llm__cta--${props.type}`);
-	  return props.url ? /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
-	    className: classNames,
-	    href: props.url,
-	    target: props.target,
-	    children: [bg, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-	      children: props.label
-	    }), icon]
-	  }) : /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
-	    className: classNames,
-	    onClick: onClick,
-	    type: props.type == 'button' || props.type == 'submit' ? props.type : undefined,
-	    children: [bg, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-	      children: props.label
-	    }), icon]
-	  });
-	};
-
 	const Event = props => {
 	  const label = useLabel();
 	  const {
@@ -33679,6 +33737,19 @@ void main(void) {
 	          ...item
 	        });
 	      }
+	    case 'action':
+	    case 'actionItem':
+	      {
+	        return /*#__PURE__*/jsxRuntimeExports.jsx(Action, {
+	          ...item
+	        });
+	      }
+	    case 'actionGroup':
+	      {
+	        return /*#__PURE__*/jsxRuntimeExports.jsx(ActionGroup, {
+	          ...item
+	        });
+	      }
 	    case 'card':
 	    case 'cardItem':
 	      {