@websolutespa/bom-llm 0.0.55 → 0.0.57

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.57
+
+### Patch Changes
+
+- Added: Action, LlmChunkAction, onAction handler
+
+## 0.0.56
+
+### Patch Changes
+
+- Fixing: mock default
+
 ## 0.0.55
 
 ### 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