@websolutespa/bom-mixer-llm 1.8.34 → 1.8.35

package/CHANGELOG.md

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

package/dist/cjs/index.css

@@ -800,7 +800,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;
@@ -1107,6 +1107,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;
@@ -1118,6 +1128,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);
 }
@@ -1126,6 +1139,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;
@@ -1152,7 +1168,7 @@ llm-embed {
   }
 }
 .llm .llm__hints .swiper-wrapper {
-  padding: 1px 0;
+  padding: 4px 0;
 }
 .llm .llm__hints .swiper-slide {
   height: auto;
@@ -1223,6 +1239,7 @@ llm-embed {
 }
 .llm .llm__hint-title.column {
   flex-direction: column;
+  width: 100%;
 }
 .llm .llm__hint-title i {
   flex-shrink: 0;
@@ -1235,6 +1252,7 @@ llm-embed {
   fill: currentColor;
 }
 .llm .llm__hint-body {
+  width: 100%;
   line-height: 140%;
 }
 
@@ -1915,6 +1933,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,
@@ -4232,4 +4265,11 @@ llm-embed {
   width: var(--llm-scroll-proposition-border-radius);
   height: var(--llm-scroll-proposition-border-radius);
   transform: rotate(90deg);
+}
+
+.llm .llm__actions {
+  display: flex;
+  gap: var(--llm-size-4, 2rem);
+  padding-top: var(--llm-size-2, 1rem);
+  margin-top: auto;
 }

package/dist/cjs/index.js

@@ -355,13 +355,12 @@ var color = {
   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 = {
+  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",
@@ -373,12 +372,13 @@ var chat = {
   borderRadius: "8px",
   boxShadow: "var(--llm-shadow-sm)"
 };
-var trigger = {
-  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",
@@ -498,10 +498,10 @@ var theme = {
   typography: typography,
   color: color,
   border: border,
+  trigger: trigger,
+  chat: chat,
   main: main,
   canvas: canvas,
-  chat: chat,
-  trigger: trigger,
   popup: popup,
   triggerCta: triggerCta,
   hint: hint,
@@ -1609,6 +1609,17 @@ class MessageDecoder {
               // 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);
@@ -2939,6 +2950,7 @@ const createLlmStore = _ref => {
     apiKey,
     threadId,
     decorateUrl,
+    onAction,
     endpoint,
     storage,
     test,
@@ -3268,10 +3280,16 @@ const createLlmStore = _ref => {
       decorateUrl: (item, defaultUrl) => __awaiter(void 0, void 0, void 0, function* () {
         let url;
         if (typeof decorateUrl === 'function') {
-          url = yield decorateUrl(item);
+          url = (yield decorateUrl(item)) || undefined;
         }
         return url || defaultUrl || '#';
       }),
+      onAction: item => __awaiter(void 0, void 0, void 0, function* () {
+        if (typeof onAction === 'function') {
+          return yield onAction(item);
+        }
+        return;
+      }),
       clear: () => set(state => ({
         messages: []
       }))
@@ -4701,6 +4719,68 @@ function ScrollProposition() {
   });
 }
 
+const Cta = props => {
+  const onClick = event => {
+    if (typeof props.onClick === 'function') {
+      props.onClick(event);
+    }
+  };
+  const bg = props.type == 'button' || props.type == 'submit' ? jsxRuntime.jsx(Canvas, {}) : '';
+  const icon = props.icon || (props.type == 'text' ? jsxRuntime.jsx(bomMixerIcons.IconLlmArrowRight, {}) : '');
+  const classNames = bomCore.getClassNames('llm__cta', `llm__cta--${props.type}`, props.className);
+  return props.url ? jsxRuntime.jsxs("a", {
+    className: classNames,
+    href: props.url,
+    target: props.target,
+    children: [bg, jsxRuntime.jsx("span", {
+      children: props.label
+    }), icon]
+  }) : jsxRuntime.jsxs("button", {
+    className: classNames,
+    onClick: onClick,
+    type: props.type == 'button' || props.type == 'submit' ? props.type : undefined,
+    children: [bg, jsxRuntime.jsx("span", {
+      children: props.label
+    }), icon]
+  });
+};
+
+const Action = props => {
+  const label = bomMixerHooks.useLabel();
+  const {
+    onAction
+  } = useLlm(state => state.actions);
+  const {
+    open
+  } = useLlmView(state => state.actions);
+  const dismissable = useLlmView(state => state.dismissable);
+  const onAction_ = event => __awaiter(void 0, void 0, void 0, function* () {
+    // console.log('Action.onAction', props.id);
+    const shouldClose = yield onAction(props);
+    if (dismissable && shouldClose !== false) {
+      open();
+    }
+  });
+  const classNames = bomCore.getClassNames('llm__action', {
+    [`llm__action--${props.type}`]: !!props.type
+  });
+  return jsxRuntime.jsx(Cta, {
+    type: "button",
+    className: classNames,
+    label: props.title || label('llm.tellMeMore'),
+    icon: jsxRuntime.jsx(bomMixerIcons.IconLlmArrowRight, {}),
+    onClick: onAction_
+  });
+};
+
+const ActionGroup = props => {
+  const classNames = bomCore.getClassNames('llm__actions');
+  return jsxRuntime.jsx("div", {
+    className: classNames,
+    children: props.items.map((item, i) => jsxRuntime.jsx(Action, Object.assign({}, item), i))
+  });
+};
+
 const Dialog = _a => {
   var {
       children,
@@ -5110,32 +5190,6 @@ const CardGroup = props => {
   });
 };
 
-const Cta = props => {
-  const onClick = event => {
-    if (typeof props.onClick === 'function') {
-      props.onClick(event);
-    }
-  };
-  const bg = props.type == 'button' || props.type == 'submit' ? jsxRuntime.jsx(Canvas, {}) : '';
-  const icon = props.type == 'text' ? jsxRuntime.jsx(bomMixerIcons.IconLlmArrowRight, {}) : '';
-  const classNames = bomCore.getClassNames('llm__cta', `llm__cta--${props.type}`);
-  return props.url ? jsxRuntime.jsxs("a", {
-    className: classNames,
-    href: props.url,
-    target: props.target,
-    children: [bg, jsxRuntime.jsx("span", {
-      children: props.label
-    }), icon]
-  }) : jsxRuntime.jsxs("button", {
-    className: classNames,
-    onClick: onClick,
-    type: props.type == 'button' || props.type == 'submit' ? props.type : undefined,
-    children: [bg, jsxRuntime.jsx("span", {
-      children: props.label
-    }), icon]
-  });
-};
-
 const Event = props => {
   const label = bomMixerHooks.useLabel();
   const {
@@ -6038,6 +6092,15 @@ const Chunk = _ref => {
       {
         return jsxRuntime.jsx(StreamError, Object.assign({}, item));
       }
+    case 'action':
+    case 'actionItem':
+      {
+        return jsxRuntime.jsx(Action, Object.assign({}, item));
+      }
+    case 'actionGroup':
+      {
+        return jsxRuntime.jsx(ActionGroup, Object.assign({}, item));
+      }
     case 'card':
     case 'cardItem':
       {