@websolutespa/bom-llm 0.0.28 → 0.0.29

package/CHANGELOG.md

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

package/dist/umd/index.css

@@ -1,5 +1,3 @@
-@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");
 .llm html,
 .llm body,
 .llm p,
@@ -134,34 +132,46 @@
   background-color: transparent;
 }
 
+/*
+@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';
@@ -1015,16 +1025,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);
@@ -1034,23 +1044,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;
@@ -1303,7 +1314,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;
 }
@@ -1379,6 +1390,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);
@@ -1444,11 +1456,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;
@@ -1653,8 +1668,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);
@@ -1677,6 +1693,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 {
@@ -1752,7 +1771,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,
@@ -1788,11 +1807,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);
 }
@@ -1800,13 +1819,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;
@@ -1837,6 +1856,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;
@@ -1846,6 +1866,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/umd/index.js

@@ -17760,7 +17760,8 @@
 
 	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: {
@@ -17922,6 +17923,10 @@
 	  },
 	  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)"
@@ -17948,13 +17953,16 @@
 	  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%)",
@@ -17962,10 +17970,18 @@
 	  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"
 	};
@@ -17978,6 +17994,23 @@
 	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)",
@@ -17998,11 +18031,6 @@
 	  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,
@@ -18010,17 +18038,21 @@
 	  border: border,
 	  canvas: canvas,
 	  trigger: trigger$1,
-	  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;
@@ -21169,6 +21201,46 @@ void main(void) {
 	  }, [canvasOffscreen, canvasRef, pixelRatio]);
 	};
 
+	/*
+	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+	*/
+	const Font = () => {
+	  const app = useLlm(state => state.app);
+	  const theme = useLlm(state => state.theme);
+	  reactExports.useEffect(() => {
+	    if (app && isBrowser$1) {
+	      const head = document.querySelector('head');
+	      if (head) {
+	        const fontId = 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 /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+	};
+
 	function Canvas() {
 	  const ref = reactExports.useRef(null);
 	  useCanvasOffscreen(ref);
@@ -27298,7 +27370,7 @@ void main(void) {
 	            })
 	          }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
 	            variants: motionItem,
-	            className: "llm__intro-title -llm-t-display-3",
+	            className: "llm__intro-title -llm-t-display-2",
 	            children: app?.contents.extendedWelcomeText
 	          })]
 	        }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
@@ -33060,7 +33132,7 @@ void main(void) {
 	        children: label('llm.button')
 	      })]
 	    }), !opened && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-	      className: "llm__trigger-welcome -llm-t-body-2",
+	      className: "llm__trigger-popup -llm-t-body-2",
 	      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
 	        exit: {
 	          opacity: 0
@@ -33069,7 +33141,7 @@ void main(void) {
 	          text: app?.contents.collapsedWelcomeText
 	        }), app?.contents.collapsedWelcomeTextCta && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
 	          type: "button",
-	          className: "llm__trigger-welcome-cta",
+	          className: "llm__trigger-cta",
 	          children: app?.contents.collapsedWelcomeTextCta
 	        })]
 	      }), app?.contents.collapsedWelcomeTextHover && /*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
@@ -33132,8 +33204,8 @@ void main(void) {
 	  });
 	  if (mounted) {
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-	      children: app && /*#__PURE__*/jsxRuntimeExports.jsx(CanvasOffscreenProvider, {
-	        children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+	      children: app && /*#__PURE__*/jsxRuntimeExports.jsxs(CanvasOffscreenProvider, {
+	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Font, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          ref: innerRef,
 	          className: classNames,
 	          ...props,
@@ -33146,7 +33218,7 @@ void main(void) {
 	            initial: false,
 	            children: shouldShowTrigger && /*#__PURE__*/jsxRuntimeExports.jsx(Trigger, {}, "trigger")
 	          })]
-	        })
+	        })]
 	      })
 	    });
 	  } else {