@websolutespa/bom-mixer-llm 1.8.6 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.7
+
+### Patch Changes
+
+- Modified: theme settings, Added: Font component
+
 ## 1.8.6
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1,33 +1,43 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+/*
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2') format('woff2');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
+*/
 /*
 @font-face {
   font-family: 'Capraia';
@@ -881,16 +891,16 @@ llm-embed {
   }
 }
 @media (hover: hover) {
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div {
     opacity: 0;
     translate: -50% 10%;
   }
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div + div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div + div {
     opacity: 1;
     translate: -50% 0%;
   }
 }
-.llm .llm__trigger-welcome > div {
+.llm .llm__trigger-popup > div {
   position: absolute;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
   width: calc(100vw - 40px);
@@ -900,23 +910,24 @@ llm-embed {
   translate: -50% 0%;
   border-radius: 12px;
   text-align: center;
-  background: var(--llm-color-background);
-  color: var(--llm-color-foreground);
+  background: var(--llm-popup-background);
+  color: var(--llm-popup-foreground);
+  border: var(--llm-popup-border, none);
   transition: 0.4s;
   pointer-events: auto;
   overflow: hidden;
   cursor: pointer;
 }
-.llm .llm__trigger-welcome > div > span {
+.llm .llm__trigger-popup > div > span {
   position: relative;
 }
-.llm .llm__trigger-welcome > div + div {
+.llm .llm__trigger-popup > div + div {
   width: calc(100vw - 40px);
   max-width: var(--llm-popup-max-width);
   translate: -50% 10%;
   opacity: 0;
 }
-.llm .llm__trigger-welcome-cta {
+.llm .llm__trigger-cta {
   position: relative;
   display: block;
   margin: 12px auto 0 auto;
@@ -1169,7 +1180,7 @@ llm-embed {
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 0, 8px);
   text-transform: uppercase;
   user-select: none;
-  color: var(--llm-color-foreground);
+  color: var(--llm-color-title-foreground);
   pointer-events: auto;
   cursor: pointer;
 }
@@ -1245,6 +1256,7 @@ llm-embed {
   display: flex;
   flex-direction: column;
   gap: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
+  color: var(--llm-color-title-foreground);
 }
 .llm .llm__intro-hints {
   margin-top: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
@@ -1310,11 +1322,14 @@ llm-embed {
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   text-transform: uppercase;
+  color: var(--llm-hint-title-color, inherit);
 }
 .llm .llm__hint-title i {
+  flex-shrink: 0;
   display: block;
-  width: 18px;
-  height: 18px;
+  width: var(--llm-hint-icon-width, 18px);
+  height: var(--llm-hint-icon-height, 18px);
+  color: var(--llm-hint-icon-color, inherit);
 }
 .llm .llm__hint-title i svg {
   fill: currentColor;
@@ -1519,8 +1534,9 @@ llm-embed {
   line-height: var(--llm-typography-body1-line-height);
   letter-spacing: var(--llm-typography-body1-letter-spacing);
   font-size: clamp(var(--llm-typography-body1-font-size-min) * 1px, var(--llm-typography-body1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body1-font-size-max) - var(--llm-typography-body1-font-size-min)), var(--llm-typography-body1-font-size-max) * 1px);
-  background: linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%);
-  border: 1px solid rgba(237, 237, 237, 0.3);
+  background: var(--llm-user-background);
+  color: var(--llm-user-foreground);
+  border: var(--llm-user-border);
   backdrop-filter: blur(20px);
   border-radius: 12px;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px) clamp(24px, 24px + (100vw - 375px) / 1545 * 8, 32px);
@@ -1543,6 +1559,9 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body {
   font-family: var(--llm-font-primary);
+  background: var(--llm-assistant-background);
+  color: var(--llm-assistant-foreground);
+  border: var(--llm-assistant-border);
   /*
   &,
   p {
@@ -1618,7 +1637,7 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body b,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body strong {
-  font-weight: 900;
+  font-weight: var(--llm-typography-cta2-font-weight);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h1,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h2,
@@ -1654,11 +1673,11 @@ llm-embed {
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body blockquote {
   margin-bottom: var(--llm-markdown-margin-bottom);
   padding-left: 0.5em;
-  border-left: 4px solid rgba(255, 255, 255, 0.2);
+  border-left: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body hr {
   border: none;
-  border-top: 2px solid rgba(255, 255, 255, 0.2);
+  border-top: var(--llm-markdown-border);
   margin-top: var(--llm-markdown-margin-top);
   margin-bottom: var(--llm-markdown-margin-bottom);
 }
@@ -1666,13 +1685,13 @@ llm-embed {
   text-decoration: underline;
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:link, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:active, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:visited, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:hover {
-  color: var(--llm-color-neutral-100);
+  color: var(--llm-markdown-accent);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body img {
   max-width: 320px;
   padding: 8px;
   border-radius: 8px;
-  border: var(--llm-pill-border);
+  border: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
   display: block;
@@ -1703,6 +1722,7 @@ llm-embed {
   display: flex;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   padding-top: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
+  color: var(--llm-color-foreground);
 }
 .llm .llm__text-disclaimer a {
   text-decoration: underline;
@@ -1712,6 +1732,7 @@ llm-embed {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
+  color: var(--llm-color-accent-foreground);
 }
 .llm .llm__text-disclaimer i svg {
   display: block;

package/dist/cjs/index.js

@@ -159,7 +159,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 var font = {
   primary: "Aeonik, Arial, Helvetica, sans-serif",
-  secondary: "Capraia, Georgia, serif"
+  secondary: "Capraia, Georgia, serif",
+  source: "<link rel=\"stylesheet\" href=\"https://design.wslabs.it/llm/fonts/aeonik.css\"><link rel=\"stylesheet\" href=\"https://design.wslabs.it/llm/fonts/capraia.css\">"
 };
 var typography = {
   display1: {
@@ -321,6 +322,10 @@ var color = {
   },
   background: "var(--llm-color-base-100)",
   foreground: "var(--llm-color-neutral-100)",
+  title: {
+    background: "var(--llm-color-background)",
+    foreground: "var(--llm-color-foreground)"
+  },
   primary: {
     background: "var(--llm-color-base-200)",
     foreground: "var(--llm-color-neutral-100)"
@@ -347,13 +352,16 @@ var trigger = {
   foreground: "var(--llm-color-base-100)",
   boxShadow: "0 0 30px rgba(0, 0, 0, 0.3)"
 };
+var popup = {
+  maxWidth: "210px",
+  background: "var(--llm-color-title-background)",
+  foreground: "var(--llm-color-title-foreground)",
+  border: "none"
+};
 var triggerCta = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-base-100)"
 };
-var popup = {
-  maxWidth: "210px"
-};
 var hint = {
   fontFamily: "var(--llm-font-primary)",
   background: "linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)",
@@ -361,10 +369,18 @@ var hint = {
   border: "1px solid rgba(237, 237, 237, 0.3)",
   borderRadius: "12px"
 };
+var hintTitle = {
+  color: "var(--llm-color-foreground)"
+};
+var hintIcon = {
+  width: "18px",
+  height: "18px",
+  color: "var(--llm-color-foreground)"
+};
 var pill = {
   fontFamily: "var(--llm-font-primary)",
   background: "rgba(255, 255, 255, 0.2)",
-  foreground: "var(--llm-color-foreground)",
+  foreground: "var(--llm-color-title-foreground)",
   border: "1px solid rgba(237, 237, 237, 0.3)",
   borderRadius: "5px"
 };
@@ -377,6 +393,23 @@ var input = {
 var checkbox = {
   border: "2px solid var(--llm-color-neutral-100)"
 };
+var user = {
+  background: "linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)",
+  foreground: "var(--llm-color-title-foreground)",
+  border: "1px solid rgba(237, 237, 237, 0.3)"
+};
+var assistant = {
+  background: "none",
+  foreground: "var(--llm-color-foreground)",
+  border: "none"
+};
+var markdown = {
+  marginTop: "0.5rem",
+  marginBottom: "1rem",
+  marginLeft: "1rem",
+  accent: "var(--llm-color-foreground)",
+  border: "1px solid rgba(237, 237, 237, 0.3)"
+};
 var card = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-neutral-900)",
@@ -397,11 +430,6 @@ var productLabel = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-neutral-900)"
 };
-var markdown = {
-  marginTop: "0.5rem",
-  marginBottom: "1rem",
-  marginLeft: "1rem"
-};
 var theme = {
   font: font,
   typography: typography,
@@ -409,17 +437,21 @@ var theme = {
   border: border,
   canvas: canvas,
   trigger: trigger,
-  triggerCta: triggerCta,
   popup: popup,
+  triggerCta: triggerCta,
   hint: hint,
+  hintTitle: hintTitle,
+  hintIcon: hintIcon,
   pill: pill,
   input: input,
   checkbox: checkbox,
+  user: user,
+  assistant: assistant,
+  markdown: markdown,
   card: card,
   cardVideo: cardVideo,
   product: product,
-  productLabel: productLabel,
-  markdown: markdown
+  productLabel: productLabel
 };
 
 const defaultTheme = theme;
@@ -3177,6 +3209,43 @@ const useCanvasOffscreen = canvasRef => {
   }, [canvasOffscreen, canvasRef, pixelRatio]);
 };
 
+const Font = () => {
+  const app = useLlm(state => state.app);
+  const theme = useLlm(state => state.theme);
+  react.useEffect(() => {
+    if (app && bomCore.isBrowser) {
+      const head = document.querySelector('head');
+      if (head) {
+        const fontId = uuid.v4();
+        const htmlText = theme.font.source || `
+<link rel="stylesheet" href="https://design.wslabs.it/llm/fonts/aeonik.css">
+<link rel="stylesheet" href="https://design.wslabs.it/llm/fonts/capraia.css">
+        `;
+        const parser = new DOMParser();
+        const parsedDocument = parser.parseFromString(htmlText, 'text/html');
+        const nodes = Array.from(parsedDocument.querySelectorAll('head>*'));
+        const selector = `llm-font-${fontId}`;
+        nodes.forEach(node => {
+          node.classList.add(selector);
+          head.appendChild(node);
+          console.log('[mixer-llm] added font node', node);
+        });
+        return () => {
+          const addedNodes = Array.from(document.querySelectorAll(`.${selector}`));
+          addedNodes.forEach(node => {
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+              console.log('[mixer-llm] removed font node', node);
+            }
+          });
+        };
+      }
+    }
+    return () => {};
+  }, [app]);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+
 function Canvas() {
   const ref = react.useRef(null);
   useCanvasOffscreen(ref);
@@ -3540,7 +3609,7 @@ const Intro = () => {
             })
           }), jsxRuntime.jsx(framerMotion.motion.div, {
             variants: motionItem,
-            className: "llm__intro-title -llm-t-display-3",
+            className: "llm__intro-title -llm-t-display-2",
             children: app === null || app === void 0 ? void 0 : app.contents.extendedWelcomeText
           })]
         }), jsxRuntime.jsx(framerMotion.motion.div, {
@@ -5321,7 +5390,7 @@ const Trigger = () => {
         children: label('llm.button')
       })]
     }), !opened && jsxRuntime.jsxs("div", {
-      className: "llm__trigger-welcome -llm-t-body-2",
+      className: "llm__trigger-popup -llm-t-body-2",
       children: [jsxRuntime.jsxs(framerMotion.motion.div, {
         exit: {
           opacity: 0
@@ -5330,7 +5399,7 @@ const Trigger = () => {
           text: app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeText
         }), (app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta) && jsxRuntime.jsx("button", {
           type: "button",
-          className: "llm__trigger-welcome-cta",
+          className: "llm__trigger-cta",
           children: app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta
         })]
       }), (app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextHover) && jsxRuntime.jsxs(framerMotion.motion.div, {
@@ -5393,8 +5462,8 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
   });
   if (mounted) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: app && jsxRuntime.jsx(CanvasOffscreenProvider, {
-        children: jsxRuntime.jsxs("div", Object.assign({
+      children: app && jsxRuntime.jsxs(CanvasOffscreenProvider, {
+        children: [jsxRuntime.jsx(Font, {}), jsxRuntime.jsxs("div", Object.assign({
           ref: innerRef,
           className: classNames
         }, props, {
@@ -5407,7 +5476,7 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
             initial: false,
             children: shouldShowTrigger && jsxRuntime.jsx(Trigger, {}, "trigger")
           })]
-        }))
+        }))]
       })
     });
   } else {