@websolutespa/llm-plugin-maxmeyer 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @websolutespa/llm-plugin-maxmeyer
+
+## 0.0.1
+
+### Patch Changes
+
+- init

package/README.md

@@ -0,0 +1,159 @@
+# @websolutespa/llm-plugin
+
+[![npm version](https://badge.fury.io/js/%40websolutespa%2Fllm-plugin.svg)](https://badge.fury.io/js/%40websolutespa%2Fllm-plugin)
+
+[![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](https://shields.io/)
+
+LLM module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).
+
+# Bom LLM Plugin
+
+This plugin automatically adds UI components to manage LLM Chatbot by [websolute](https://www.websolute.com/).
+
+### Requirements:
+
+- You need a personal appKey and apiKey to use this plugin, for more info contact [websolute](https://www.websolute.com/contatti)
+
+## Usage
+
+You can load the script directly via jsDelivr or installing via npm.
+
+### Using jsDelivr
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/llm-plugin@latest/dist/index.css">
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@websolutespa/llm-plugin@latest/dist/umd/index.min.js"></script>
+  <script type="module">
+
+    document.addEventListener('DOMContentLoaded', () => {
+      if ('llmDefault' in window) {
+        const searchParams = new URLSearchParams(window.location.search);
+        const options = {
+          endpoint: 'https://platform-ai-dev.ws-deploy-01.wslabs.it',
+          appKey: 'MY_APP_KEY',
+          apiKey: 'MY_API_KEY',
+          threadId: searchParams.get('llmThreadId'),
+          test: searchParams.get('mock') === 'true' ? llm.mock : undefined,
+          idleTime: 1000 * 60,
+        };
+        llmDefault(options);
+      }
+    });
+
+  </script>
+```
+
+### Using npm
+
+Install library using npm.
+
+```bash
+npm i @websolutespa/llm-plugin --save
+```
+
+Import css from node_modules.
+
+```html
+<link rel="stylesheet" href="node_modules/@websolutespa/llm-plugin/dist/umd/index.css">
+```
+
+Import and consume plugin.
+
+```js
+import { llmDefault } from '@websolutespa/llm-plugin';
+
+document.addEventListener('DOMContentLoaded', () => {
+  if ('llmDefault' in window) {
+    const searchParams = new URLSearchParams(window.location.search);
+    const options = {
+      appKey: 'MY_APP_KEY',
+      apiKey: 'MY_API_KEY',
+      threadId: searchParams.get('llmThreadId'),
+    };
+    // returned instance
+    const llm = llmDefault(options);
+  }
+});
+```
+
+Using imperatively.
+
+```js
+const options = {
+  appKey: 'MY_APP_KEY',
+  apiKey: 'MY_API_KEY',
+  imperative: true, // hide trigger button
+};
+const llm = llmDefault(options);
+// using open command imperatively
+setTimeout(() => {
+  llm.open();
+}, 4000);
+```
+
+Using embed tag.
+
+```html
+<llm-embed />
+```
+
+### Running test
+
+Add parameter test = true.
+
+```js
+  const searchParams = new URLSearchParams(window.location.search);
+  const options = {
+    appKey: 'MY_APP_KEY',
+    apiKey: 'MY_API_KEY',
+    threadId: searchParams.get('llmThreadId'),
+    test: true,
+  };
+  llmDefault(options);
+```
+
+### Decorate external url
+
+You can decorate every json item from the knowledgeBase customizing its external url.  
+decorateUrl method can be a promise.  
+
+```js
+  const searchParams = new URLSearchParams(window.location.search);
+  const options = {
+    appKey: 'MY_APP_KEY',
+    apiKey: 'MY_API_KEY',
+    threadId: searchParams.get('llmThreadId'),
+    decorateUrl: (item) => {
+      switch (item.type) {
+        case 'event':
+        case 'eventItem':
+          return `https://acme.com/event?id=${item.id}`;
+        default:
+          return;
+      }
+    },
+  };
+  llmDefault(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);
+    },
+  };
+  llmDefault(options);
+```
+
+---
+
+##### *this library is for internal usage and not production ready*

package/dist/esm/__tests/example.test.js

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+describe('Example', ()=>{
+    it('passes', async ()=>{
+        const value = 'test';
+        expect(value).toEqual(value);
+    });
+});
+
+//# sourceMappingURL=example.test.js.map

package/dist/esm/__tests/example.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/__tests/example.test.ts"],"sourcesContent":["import '@testing-library/jest-dom';\n\ndescribe('Example', () => {\n  it('passes', async () => {\n    const value = 'test';\n    expect(value).toEqual(value);\n  });\n});\n"],"names":["describe","it","value","expect","toEqual"],"mappings":"AAAA,OAAO,4BAA4B;AAEnCA,SAAS,WAAW;IAClBC,GAAG,UAAU;QACX,MAAMC,QAAQ;QACdC,OAAOD,OAAOE,OAAO,CAACF;IACxB;AACF"}

package/dist/esm/blocks/Action/action.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '@websolutespa/bom-core';
+import { useLabel } from '@websolutespa/bom-mixer-hooks';
+import { IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';
+import { Cta, useLlm, useLlmView } from '@websolutespa/bom-mixer-llm';
+import style from './action.module.scss';
+export const Action = (props)=>{
+    const { item } = 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(item);
+        if (dismissable && shouldClose !== false) {
+            open();
+        }
+    };
+    const classNames = getClassNames(style.action, {
+        [`llm__action--${item.type}`]: !!item.type
+    });
+    return /*#__PURE__*/ _jsx(Cta, {
+        type: "button",
+        className: classNames,
+        label: item.title || label('llm.tellMeMore'),
+        icon: /*#__PURE__*/ _jsx(IconLlmArrowRight, {}),
+        onClick: onAction_
+    });
+};
+
+//# sourceMappingURL=action.js.map

package/dist/esm/blocks/Action/action.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/Action/action.tsx"],"sourcesContent":["import { getClassNames } from '@websolutespa/bom-core';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';\nimport { Cta, LlmBlock, LlmChunkAction, LlmChunkActionItem, useLlm, useLlmView } from '@websolutespa/bom-mixer-llm';\nimport style from './action.module.scss';\n\nexport const Action: React.FC<LlmBlock<LlmChunkActionItem | LlmChunkAction>> = (props) => {\n  const { item } = props;\n  const label = useLabel();\n  const { onAction } = useLlm(state => state.actions);\n  const { open } = useLlmView(state => state.actions);\n  const dismissable = useLlmView(state => state.dismissable);\n  const onAction_ = async (event: React.MouseEvent) => {\n    // console.log('Action.onAction', props.id);\n    const shouldClose = await onAction(item);\n    if (dismissable && shouldClose !== false) {\n      open();\n    }\n  };\n  const classNames = getClassNames(style.action, { [`llm__action--${item.type}`]: !!item.type });\n  return (\n    <Cta\n      type=\"button\"\n      className={classNames} label={item.title || label('llm.tellMeMore')}\n      icon={<IconLlmArrowRight />}\n      onClick={onAction_}\n    />\n  );\n};\n\n"],"names":["getClassNames","useLabel","IconLlmArrowRight","Cta","useLlm","useLlmView","style","Action","props","item","label","onAction","state","actions","open","dismissable","onAction_","event","shouldClose","classNames","action","type","className","title","icon","onClick"],"mappings":";AAAA,SAASA,aAAa,QAAQ,yBAAyB;AACvD,SAASC,QAAQ,QAAQ,gCAAgC;AACzD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,GAAG,EAAgDC,MAAM,EAAEC,UAAU,QAAQ,8BAA8B;AACpH,OAAOC,WAAW,uBAAuB;AAEzC,OAAO,MAAMC,SAAkE,CAACC;IAC9E,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,QAAQT;IACd,MAAM,EAAEU,QAAQ,EAAE,GAAGP,OAAOQ,CAAAA,QAASA,MAAMC,OAAO;IAClD,MAAM,EAAEC,IAAI,EAAE,GAAGT,WAAWO,CAAAA,QAASA,MAAMC,OAAO;IAClD,MAAME,cAAcV,WAAWO,CAAAA,QAASA,MAAMG,WAAW;IACzD,MAAMC,YAAY,OAAOC;QACvB,4CAA4C;QAC5C,MAAMC,cAAc,MAAMP,SAASF;QACnC,IAAIM,eAAeG,gBAAgB,OAAO;YACxCJ;QACF;IACF;IACA,MAAMK,aAAanB,cAAcM,MAAMc,MAAM,EAAE;QAAE,CAAC,CAAC,aAAa,EAAEX,KAAKY,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAACZ,KAAKY,IAAI;IAAC;IAC5F,qBACE,KAAClB;QACCkB,MAAK;QACLC,WAAWH;QAAYT,OAAOD,KAAKc,KAAK,IAAIb,MAAM;QAClDc,oBAAM,KAACtB;QACPuB,SAAST;;AAGf,EAAE"}

package/dist/esm/blocks/Action/action.module.scss

@@ -0,0 +1,5 @@
+@import '../../scss/mixin';
+
+.action {
+  // background: red;
+}

package/dist/esm/blocks/ActionGroup/action-group.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '@websolutespa/bom-core';
+import { Action } from '../Action/action';
+import style from './action-group.module.scss';
+export const ActionGroup = (props)=>{
+    const { item } = props;
+    const classNames = getClassNames(style.actionGroup);
+    return /*#__PURE__*/ _jsx("div", {
+        className: classNames,
+        children: item.items.map((item, i)=>/*#__PURE__*/ _jsx(Action, {
+                ...props,
+                item: item
+            }, i))
+    });
+};
+
+//# sourceMappingURL=action-group.js.map

package/dist/esm/blocks/ActionGroup/action-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/ActionGroup/action-group.tsx"],"sourcesContent":["import { getClassNames } from '@websolutespa/bom-core';\nimport { LlmBlock, LlmChunkActionGroup } from '@websolutespa/bom-mixer-llm';\nimport { Action } from '../Action/action';\nimport style from './action-group.module.scss';\n\nexport const ActionGroup: React.FC<LlmBlock<LlmChunkActionGroup>> = (props) => {\n  const { item } = props;\n  const classNames = getClassNames(style.actionGroup);\n  return (\n    <div className={classNames}>\n      {item.items.map((item, i) => (\n        <Action key={i} {...props} item={item} />\n      ))}\n    </div>\n  );\n};\n\n"],"names":["getClassNames","Action","style","ActionGroup","props","item","classNames","actionGroup","div","className","items","map","i"],"mappings":";AAAA,SAASA,aAAa,QAAQ,yBAAyB;AAEvD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,WAAW,6BAA6B;AAE/C,OAAO,MAAMC,cAAuD,CAACC;IACnE,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,aAAaN,cAAcE,MAAMK,WAAW;IAClD,qBACE,KAACC;QAAIC,WAAWH;kBACbD,KAAKK,KAAK,CAACC,GAAG,CAAC,CAACN,MAAMO,kBACrB,KAACX;gBAAgB,GAAGG,KAAK;gBAAEC,MAAMA;eAApBO;;AAIrB,EAAE"}

package/dist/esm/blocks/ActionGroup/action-group.module.scss

@@ -0,0 +1,8 @@
+@import '../../scss/mixin';
+
+.actionGroup {
+  display: flex;
+  gap: size(4);
+  padding-top: size(2);
+  margin-top: auto;
+}

package/dist/esm/blocks/AssistantMessage/assistant-message.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@websolutespa/bom-mixer-llm';
+export const AssistantMessage = (props)=>{
+    const { text, chunkIndex, index } = props;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "llm__row",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "llm__col --sm-10 --sm-9 --md-8 --lg-7 --xl-6",
+            children: /*#__PURE__*/ _jsx(Text, {
+                body: text,
+                chunkIndex: chunkIndex,
+                index: index
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=assistant-message.js.map

package/dist/esm/blocks/AssistantMessage/assistant-message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/AssistantMessage/assistant-message.tsx"],"sourcesContent":["import { LlmTextBlock, Text } from '@websolutespa/bom-mixer-llm';\n\nexport type AssistantMessageProps = LlmTextBlock<'assistant'>;\n\nexport const AssistantMessage: React.FC<AssistantMessageProps> = (props) => {\n  const { text, chunkIndex, index } = props;\n  return (\n    <div className=\"llm__row\">\n      <div className=\"llm__col --sm-10 --sm-9 --md-8 --lg-7 --xl-6\">\n        <Text body={text} chunkIndex={chunkIndex} index={index} />\n      </div>\n    </div>\n  );\n};\n\n"],"names":["Text","AssistantMessage","props","text","chunkIndex","index","div","className","body"],"mappings":";AAAA,SAAuBA,IAAI,QAAQ,8BAA8B;AAIjE,OAAO,MAAMC,mBAAoD,CAACC;IAChE,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGH;IACpC,qBACE,KAACI;QAAIC,WAAU;kBACb,cAAA,KAACD;YAAIC,WAAU;sBACb,cAAA,KAACP;gBAAKQ,MAAML;gBAAMC,YAAYA;gBAAYC,OAAOA;;;;AAIzD,EAAE"}

package/dist/esm/blocks/CustomCard/custom-card.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLabel } from '@websolutespa/bom-mixer-hooks';
+import { Cta, useLlmView } from '@websolutespa/bom-mixer-llm';
+import style from './custom-card.module.scss';
+export const CustomCard = (props)=>{
+    const { item } = props;
+    const label = useLabel();
+    const { send } = useLlmView((state)=>state.actions);
+    const onTellMeMore = async (event)=>{
+        const prompt = `${label('llm.tellMeMoreAbout')} ${item.title}`;
+        await send(prompt, (response)=>{
+        // console.log('Prompt.onChunk', response.chunks);
+        }, (response)=>{
+        // console.log('Prompt.onEnd', response);
+        });
+    };
+    const ariaLabel = label('llm.tellMeMore');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: style.customCard,
+        children: [
+            item.media && /*#__PURE__*/ _jsx(_Fragment, {
+                children: item.href ? /*#__PURE__*/ _jsx("a", {
+                    className: style.customCardMedia,
+                    href: item.href,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    "aria-label": ariaLabel,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: style.customCardAsset,
+                        children: /*#__PURE__*/ _jsx("img", {
+                            src: item.media.url,
+                            alt: ""
+                        })
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    className: style.customCardMedia,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: style.customCardAsset,
+                        children: /*#__PURE__*/ _jsx("img", {
+                            src: item.media.url,
+                            alt: ""
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: style.customCardContent,
+                children: [
+                    item.title && /*#__PURE__*/ _jsx("div", {
+                        className: style.customCardTitle,
+                        dangerouslySetInnerHTML: {
+                            __html: item.title
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Cta, {
+                        url: item.href,
+                        className: style.customCardCta,
+                        type: "button",
+                        label: label('llm.tellMeMore'),
+                        onClick: onTellMeMore
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=custom-card.js.map

package/dist/esm/blocks/CustomCard/custom-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/CustomCard/custom-card.tsx"],"sourcesContent":["import { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { Cta, LlmBlock, useLlmView } from '@websolutespa/bom-mixer-llm';\nimport style from './custom-card.module.scss';\n\nexport type LlmChunkCustomCard = {\n  type: 'customCard';\n  id: string;\n  title?: string;\n  abstract?: string;\n  media?: {\n    type: 'image';\n    url: string;\n  };\n  href?: string;\n};\n\nexport const CustomCard: React.FC<LlmBlock<LlmChunkCustomCard>> = (props) => {\n  const { item } = props;\n  const label = useLabel();\n  const { send } = useLlmView(state => state.actions);\n  const onTellMeMore = async (event: React.MouseEvent) => {\n    const prompt = `${label('llm.tellMeMoreAbout')} ${item.title}`;\n    await send(prompt, (response) => {\n      // console.log('Prompt.onChunk', response.chunks);\n    }, (response) => {\n      // console.log('Prompt.onEnd', response);\n    });\n  };\n  const ariaLabel = label('llm.tellMeMore');\n  return (\n    <div className={style.customCard}>\n      {item.media && (\n        <>\n          {item.href ? (\n            <a className={style.customCardMedia} href={item.href} target=\"_blank\" rel=\"noreferrer\" aria-label={ariaLabel}>\n              <div className={style.customCardAsset}>\n                <img src={item.media.url} alt=\"\" />\n              </div>\n            </a>\n          ) : (\n            <div className={style.customCardMedia}>\n              <div className={style.customCardAsset}>\n                <img src={item.media.url} alt=\"\" />\n              </div>\n            </div>\n          )}\n        </>\n      )}\n      <div className={style.customCardContent}>\n        {item.title && (\n          <div className={style.customCardTitle} dangerouslySetInnerHTML={{ __html: item.title }} />\n        )}\n        <Cta url={item.href} className={style.customCardCta} type=\"button\" label={label('llm.tellMeMore')} onClick={onTellMeMore} />\n      </div>\n    </div>\n  );\n};\n\n"],"names":["useLabel","Cta","useLlmView","style","CustomCard","props","item","label","send","state","actions","onTellMeMore","event","prompt","title","response","ariaLabel","div","className","customCard","media","href","a","customCardMedia","target","rel","aria-label","customCardAsset","img","src","url","alt","customCardContent","customCardTitle","dangerouslySetInnerHTML","__html","customCardCta","type","onClick"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,gCAAgC;AACzD,SAASC,GAAG,EAAYC,UAAU,QAAQ,8BAA8B;AACxE,OAAOC,WAAW,4BAA4B;AAc9C,OAAO,MAAMC,aAAqD,CAACC;IACjE,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,QAAQP;IACd,MAAM,EAAEQ,IAAI,EAAE,GAAGN,WAAWO,CAAAA,QAASA,MAAMC,OAAO;IAClD,MAAMC,eAAe,OAAOC;QAC1B,MAAMC,SAAS,CAAC,EAAEN,MAAM,uBAAuB,CAAC,EAAED,KAAKQ,KAAK,CAAC,CAAC;QAC9D,MAAMN,KAAKK,QAAQ,CAACE;QAClB,kDAAkD;QACpD,GAAG,CAACA;QACF,yCAAyC;QAC3C;IACF;IACA,MAAMC,YAAYT,MAAM;IACxB,qBACE,MAACU;QAAIC,WAAWf,MAAMgB,UAAU;;YAC7Bb,KAAKc,KAAK,kBACT;0BACGd,KAAKe,IAAI,iBACR,KAACC;oBAAEJ,WAAWf,MAAMoB,eAAe;oBAAEF,MAAMf,KAAKe,IAAI;oBAAEG,QAAO;oBAASC,KAAI;oBAAaC,cAAYV;8BACjG,cAAA,KAACC;wBAAIC,WAAWf,MAAMwB,eAAe;kCACnC,cAAA,KAACC;4BAAIC,KAAKvB,KAAKc,KAAK,CAACU,GAAG;4BAAEC,KAAI;;;mCAIlC,KAACd;oBAAIC,WAAWf,MAAMoB,eAAe;8BACnC,cAAA,KAACN;wBAAIC,WAAWf,MAAMwB,eAAe;kCACnC,cAAA,KAACC;4BAAIC,KAAKvB,KAAKc,KAAK,CAACU,GAAG;4BAAEC,KAAI;;;;;0BAMxC,MAACd;gBAAIC,WAAWf,MAAM6B,iBAAiB;;oBACpC1B,KAAKQ,KAAK,kBACT,KAACG;wBAAIC,WAAWf,MAAM8B,eAAe;wBAAEC,yBAAyB;4BAAEC,QAAQ7B,KAAKQ,KAAK;wBAAC;;kCAEvF,KAACb;wBAAI6B,KAAKxB,KAAKe,IAAI;wBAAEH,WAAWf,MAAMiC,aAAa;wBAAEC,MAAK;wBAAS9B,OAAOA,MAAM;wBAAmB+B,SAAS3B;;;;;;AAIpH,EAAE"}

package/dist/esm/blocks/CustomCard/custom-card.module.scss

@@ -0,0 +1,64 @@
+@import '../../scss/mixin';
+
+.customCard {
+  max-width: 700px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--llm-color-neutral-100);
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
+  padding: size(4) size(3);
+}
+
+.customCardMedia {
+  position: relative;
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.customCardAsset {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1;
+  border-radius: 0;
+  overflow: hidden;
+
+  &>img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+}
+
+.customCardContent {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+   padding: 0 size(3) ;
+  gap: size(3);
+}
+
+.customCardTitle {
+  @include text(display5);
+}
+
+.customCardCta {
+  color: var(--llm-color-neutral-100) !important;
+  background: var(--llm-color-base-900) !important;
+  border-radius: 50px;
+  padding: 12px 16px !important;
+  width: fit-content;
+  line-height: 1 !important;
+  display: flex !important;
+  min-height: 0 !important;
+  margin-top: auto;
+  > span {
+    font-size: 16px !important;
+    letter-spacing: 0.02em !important;
+    line-height: 1 !important;
+  }
+}

package/dist/esm/blocks/CustomCardGroup/custom-card-group.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWindowSize } from '@websolutespa/bom-mixer-hooks';
+import { IconLlmArrowLeft, IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';
+import { clamp } from '@websolutespa/bom-mixer-llm';
+import { useRef } from 'react';
+import { Navigation } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { CustomCard } from '../CustomCard/custom-card';
+import style from './custom-card-group.module.scss';
+export const CustomCardGroup = (props)=>{
+    const { item } = props;
+    useWindowSize();
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    const swiperProps = {
+        modules: [
+            Navigation
+        ],
+        spaceBetween: clamp(16, 24),
+        slidesPerView: 1.1,
+        watchOverflow: true,
+        navigation: {
+            prevEl: navigationPrevRef.current,
+            nextEl: navigationNextRef.current
+        },
+        breakpoints: {
+            630: {
+                slidesPerView: 1.5
+            },
+            768: {
+                slidesPerView: 2
+            }
+        }
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: style.customCardGroup,
+        children: /*#__PURE__*/ _jsxs(Swiper, {
+            ...swiperProps,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: style.customCardGroupNav,
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            ref: navigationPrevRef,
+                            children: /*#__PURE__*/ _jsx(IconLlmArrowLeft, {})
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            ref: navigationNextRef,
+                            children: /*#__PURE__*/ _jsx(IconLlmArrowRight, {})
+                        })
+                    ]
+                }),
+                item.items.map((item, i)=>/*#__PURE__*/ _jsx(SwiperSlide, {
+                        className: style.customCardGroupSlide,
+                        children: /*#__PURE__*/ _jsx(CustomCard, {
+                            ...props,
+                            item: item
+                        })
+                    }, i))
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=custom-card-group.js.map

package/dist/esm/blocks/CustomCardGroup/custom-card-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/CustomCardGroup/custom-card-group.tsx"],"sourcesContent":["import { useWindowSize } from '@websolutespa/bom-mixer-hooks';\nimport { IconLlmArrowLeft, IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';\nimport { clamp, LlmBlock } from '@websolutespa/bom-mixer-llm';\nimport { useRef } from 'react';\nimport { Navigation } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { CustomCard, LlmChunkCustomCard } from '../CustomCard/custom-card';\nimport style from './custom-card-group.module.scss';\n\nexport type LlmChunkCustomCardGroup = {\n  type: 'customCardGroup';\n  id: string;\n  items: LlmChunkCustomCard[];\n};\n\nexport const CustomCardGroup: React.FC<LlmBlock<LlmChunkCustomCardGroup>> = (props) => {\n  const { item } = props;\n\n  useWindowSize();\n\n  const navigationPrevRef = useRef(null);\n  const navigationNextRef = useRef(null);\n  const swiperProps = {\n    modules: [Navigation],\n    spaceBetween: clamp(16, 24),\n    slidesPerView: 1.1,\n    watchOverflow: true,\n    navigation: {\n      prevEl: navigationPrevRef.current,\n      nextEl: navigationNextRef.current,\n    },\n    breakpoints: {\n      630: {\n        slidesPerView: 1.5,\n      },\n      768: {\n        slidesPerView: 2,\n      },\n\n    },\n  };\n\n  return (\n    <div className={style.customCardGroup}>\n      <Swiper {...swiperProps}>\n        <div className={style.customCardGroupNav}>\n          <button ref={navigationPrevRef}><IconLlmArrowLeft /></button>\n          <button ref={navigationNextRef}><IconLlmArrowRight /></button>\n        </div>\n        {item.items.map((item, i) => (\n          <SwiperSlide key={i} className={style.customCardGroupSlide}>\n            <CustomCard {...props} item={item} />\n          </SwiperSlide>\n        ))}\n      </Swiper>\n    </div>\n  );\n};\n\n"],"names":["useWindowSize","IconLlmArrowLeft","IconLlmArrowRight","clamp","useRef","Navigation","Swiper","SwiperSlide","CustomCard","style","CustomCardGroup","props","item","navigationPrevRef","navigationNextRef","swiperProps","modules","spaceBetween","slidesPerView","watchOverflow","navigation","prevEl","current","nextEl","breakpoints","div","className","customCardGroup","customCardGroupNav","button","ref","items","map","i","customCardGroupSlide"],"mappings":";AAAA,SAASA,aAAa,QAAQ,gCAAgC;AAC9D,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,gCAAgC;AACpF,SAASC,KAAK,QAAkB,8BAA8B;AAC9D,SAASC,MAAM,QAAQ,QAAQ;AAC/B,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,MAAM,EAAEC,WAAW,QAAQ,eAAe;AACnD,SAASC,UAAU,QAA4B,4BAA4B;AAC3E,OAAOC,WAAW,kCAAkC;AAQpD,OAAO,MAAMC,kBAA+D,CAACC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjBX;IAEA,MAAMa,oBAAoBT,OAAO;IACjC,MAAMU,oBAAoBV,OAAO;IACjC,MAAMW,cAAc;QAClBC,SAAS;YAACX;SAAW;QACrBY,cAAcd,MAAM,IAAI;QACxBe,eAAe;QACfC,eAAe;QACfC,YAAY;YACVC,QAAQR,kBAAkBS,OAAO;YACjCC,QAAQT,kBAAkBQ,OAAO;QACnC;QACAE,aAAa;YACX,KAAK;gBACHN,eAAe;YACjB;YACA,KAAK;gBACHA,eAAe;YACjB;QAEF;IACF;IAEA,qBACE,KAACO;QAAIC,WAAWjB,MAAMkB,eAAe;kBACnC,cAAA,MAACrB;YAAQ,GAAGS,WAAW;;8BACrB,MAACU;oBAAIC,WAAWjB,MAAMmB,kBAAkB;;sCACtC,KAACC;4BAAOC,KAAKjB;sCAAmB,cAAA,KAACZ;;sCACjC,KAAC4B;4BAAOC,KAAKhB;sCAAmB,cAAA,KAACZ;;;;gBAElCU,KAAKmB,KAAK,CAACC,GAAG,CAAC,CAACpB,MAAMqB,kBACrB,KAAC1B;wBAAoBmB,WAAWjB,MAAMyB,oBAAoB;kCACxD,cAAA,KAAC1B;4BAAY,GAAGG,KAAK;4BAAEC,MAAMA;;uBADbqB;;;;AAO5B,EAAE"}

package/dist/esm/blocks/CustomCardGroup/custom-card-group.module.scss

@@ -0,0 +1,58 @@
+@import '../../scss/mixin';
+
+.customCardGroup {
+  @include containerNegative();
+
+  :global(.swiper) {
+    position: relative;
+    overflow: visible;
+    padding-top: size(10);
+    padding-bottom: size(5);
+  }
+
+  :global(.swiper-slide) {
+    height: auto;
+  }
+}
+
+.customCardGroupNav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--llm-color-foreground);
+  display: flex;
+  gap: size(3);
+
+  @include bp(md) {
+    right: 0;
+    left: auto;
+  }
+
+  button {
+    color: currentColor;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &.swiper-button-disabled {
+      opacity: 0.2;
+      cursor: pointer;
+    }
+
+    &.swiper-button-lock {
+      display: none;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.customCardGroupSlide {
+  height: auto;
+
+  :global(.customCard) {
+    height: 100%;
+  }
+}