@websolutespa/bom-mixer-llm 1.8.26 → 1.8.28

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.28
+
+### Patch Changes
+
+- Modified idle timeout
+
+## 1.8.27
+
+### Patch Changes
+
+- Modified: theme & styles
+
 ## 1.8.26
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -676,8 +676,8 @@ llm-embed {
   position: relative;
   pointer-events: auto;
   inset: 0;
-  background: var(--llm-color-background);
-  color: var(--llm-color-foreground);
+  background: var(--llm-main-background);
+  color: var(--llm-main-foreground);
 }
 .llm .llm__content {
   position: relative;
@@ -688,6 +688,15 @@ llm-embed {
   width: 100%;
   overflow: hidden;
 }
+.llm .llm__underlay {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  height: 240px;
+  background: linear-gradient(transparent, var(--llm-main-background), var(--llm-main-background));
+  pointer-events: none;
+}
 .llm.-embedded .llm__main {
   width: 100%;
   height: 100%;
@@ -715,12 +724,12 @@ llm-embed {
 }
 .llm:not(.-embedded) .llm__content {
   padding-top: 100px;
-  padding-bottom: calc(100vh - 240px);
+  padding-bottom: min(256px, 40dvh);
 }
 @media (min-width: 1024px) {
   .llm:not(.-embedded) .llm__content {
     padding-top: 200px;
-    padding-bottom: calc(100vh - 240px);
+    padding-bottom: min(256px, 40dvh);
   }
 }
 .llm:not(.-embedded).-custom-intro .llm__content {
@@ -1091,6 +1100,7 @@ llm-embed {
   color: var(--llm-hint-foreground);
   border: var(--llm-hint-border);
   font-family: var(--llm-hint-font-family);
+  box-shadow: var(--llm-hint-box-shadow);
   backdrop-filter: blur(20px);
 }
 .llm .llm__hint:focus, .llm .llm__hint:focus-visible {
@@ -1109,11 +1119,17 @@ llm-embed {
 }
 .llm .llm__hint-title {
   display: flex;
-  align-items: center;
   gap: var(--llm-size-2, 1rem);
   text-transform: uppercase;
   color: var(--llm-hint-title-color, inherit);
 }
+.llm .llm__hint-title.row {
+  flex-direction: row;
+  align-items: center;
+}
+.llm .llm__hint-title.column {
+  flex-direction: column;
+}
 .llm .llm__hint-title i {
   flex-shrink: 0;
   display: block;
@@ -1137,7 +1153,7 @@ llm-embed {
 .llm .llm__prompt-input {
   position: relative;
   box-shadow: var(--llm-shadow-xs);
-  border-radius: 8px;
+  border-radius: var(--llm-input-border-radius, 8px);
   overflow: visible;
   background: var(--llm-input-background);
   width: 100%;
@@ -1200,7 +1216,7 @@ llm-embed {
   font-family: var(--llm-input-font-family);
   font-size: calc(var(--rem, 1rem) * 1);
   line-height: 1.3;
-  border-radius: 8px;
+  border-radius: var(--llm-input-border-radius, 8px);
   background: transparent;
   color: var(--llm-input-foreground);
   pointer-events: auto;
@@ -1412,11 +1428,11 @@ llm-embed {
   align-items: center;
   column-gap: 0.35em;
   padding: 0.2em 1em;
-  border-radius: 8px;
   margin-bottom: 0.3rem;
   font-size: 12px;
   background: var(--llm-pill-background);
   color: var(--llm-pill-foreground);
+  border-radius: 8px;
   backdrop-filter: blur(20px);
 }
 .llm .llm__prompt-upload-file:focus, .llm .llm__prompt-upload-file:focus-visible {
@@ -1492,8 +1508,8 @@ llm-embed {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--llm-trigger-background);
-  color: var(--llm-trigger-foreground);
+  background: var(--llm-prompt-submit-background);
+  color: var(--llm-prompt-submit-foreground);
   border-radius: 50%;
 }
 .llm .llm__prompt-submit:focus, .llm .llm__prompt-submit:focus-visible, .llm .llm__prompt-stop:focus, .llm .llm__prompt-stop:focus-visible {
@@ -1622,9 +1638,9 @@ llm-embed {
   line-height: var(--llm-typography-cta2-line-height);
   letter-spacing: var(--llm-typography-cta2-letter-spacing);
   font-size: clamp(var(--llm-typography-cta2-font-size-min) * 1px * var(--s, 1), var(--llm-typography-cta2-font-size-min) * 1px * var(--s, 1) + (var(--u, 1vw) * 100 - 375px) / 1545 * (var(--llm-typography-cta2-font-size-max) - var(--llm-typography-cta2-font-size-min)) * var(--s, 1), var(--llm-typography-cta2-font-size-max) * 1px * var(--s, 1));
-  padding: var(--llm-size-1, 0.5rem);
-  border-radius: var(--llm-pill-border-radius);
+  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);

package/dist/cjs/index.js

@@ -355,6 +355,10 @@ 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
@@ -391,9 +395,11 @@ var hint = {
   background: "linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)",
   foreground: "var(--llm-color-foreground)",
   border: "1px solid rgba(237, 237, 237, 0.3)",
-  borderRadius: "12px"
+  borderRadius: "12px",
+  boxShadow: "none"
 };
 var hintTitle = {
+  flexDirection: "row",
   color: "var(--llm-color-foreground)"
 };
 var hintIcon = {
@@ -402,6 +408,7 @@ var hintIcon = {
   color: "var(--llm-color-foreground)"
 };
 var pill = {
+  padding: "8px",
   fontFamily: "var(--llm-font-primary)",
   background: "rgba(255, 255, 255, 0.2)",
   foreground: "var(--llm-color-title-foreground)",
@@ -412,7 +419,12 @@ var input = {
   fontFamily: "var(--llm-font-secondary)",
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-neutral-900)",
-  accent: "var(--llm-color-base-100)"
+  accent: "var(--llm-color-base-100)",
+  borderRadius: "8px"
+};
+var promptSubmit = {
+  background: "var(--llm-trigger-background)",
+  foreground: "var(--llm-trigger-foreground)"
 };
 var checkbox = {
   border: "2px solid var(--llm-color-neutral-100)"
@@ -472,6 +484,7 @@ var theme = {
   typography: typography,
   color: color,
   border: border,
+  main: main,
   canvas: canvas,
   chat: chat,
   trigger: trigger,
@@ -482,6 +495,7 @@ var theme = {
   hintIcon: hintIcon,
   pill: pill,
   input: input,
+  promptSubmit: promptSubmit,
   checkbox: checkbox,
   user: user,
   assistant: assistant,
@@ -2727,7 +2741,7 @@ const createLlmViewStore = _ref => {
               set(() => ({
                 idle: true
               }));
-            }, 6000);
+            }, 8000);
           };
           const handleIdleTimes = () => {
             let to = setIdleTimeout();
@@ -3841,7 +3855,7 @@ const Hints = _ref => {
   const {
     width
   } = bomMixerHooks.useWindowSize();
-  useLlm(state => state.app);
+  const theme = useLlm(state => state.theme);
   const {
     send
   } = useLlmView(state => state.actions);
@@ -3859,12 +3873,13 @@ const Hints = _ref => {
     });
   });
   const getCard = (item, index) => {
+    const direction = theme.hintTitle.flexDirection || 'row';
     return jsxRuntime.jsxs("button", {
       type: "button",
       className: "llm__hint",
       onClick: () => onClick(item),
       children: [jsxRuntime.jsxs("div", {
-        className: "llm__hint-title -llm-t-label1",
+        className: bomCore.getClassNames('llm__hint-title -llm-t-label1', direction),
         children: [item.icon && jsxRuntime.jsx("i", {
           children: jsxRuntime.jsx("img", {
             src: item.icon.src || item.icon.url,
@@ -4146,11 +4161,15 @@ const Intro = () => {
           }), extendedWelcomeText && (embedded ? jsxRuntime.jsx(framerMotion.motion.h2, {
             variants: motionItem,
             className: "llm__intro-title -llm-t-display2",
-            children: extendedWelcomeText
+            dangerouslySetInnerHTML: {
+              __html: extendedWelcomeText
+            }
           }) : jsxRuntime.jsx(framerMotion.motion.h1, {
             variants: motionItem,
             className: "llm__intro-title -llm-t-display2",
-            children: extendedWelcomeText
+            dangerouslySetInnerHTML: {
+              __html: extendedWelcomeText
+            }
           }))]
         }), hints.length > 0 && jsxRuntime.jsx(framerMotion.motion.div, {
           variants: motionItem,
@@ -6008,6 +6027,7 @@ const Thread = () => {
 
 const Main = () => {
   const app = useLlm(state => state.app);
+  const theme = useLlm(state => state.theme);
   const messages = useLlm(state => state.messages);
   const introed = useLlmView(state => state.introed);
   const visible = useLlmView(state => state.visible);
@@ -6093,13 +6113,18 @@ const Main = () => {
         className: "llm__content",
         children: [jsxRuntime.jsx(Intro, {}), messages && messages.length > 0 && jsxRuntime.jsx(Thread, {})]
       })
-    }), shouldShowPrompt && jsxRuntime.jsx(framerMotion.motion.main, {
-      className: "llm__bottom",
-      variants: slideIn(1),
-      initial: "hidden",
-      animate: "show",
-      exit: "exit",
-      children: jsxRuntime.jsx(Prompt, {})
+    }), shouldShowPrompt && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [app && !theme.canvas.enabled && jsxRuntime.jsx("div", {
+        className: "llm__underlay",
+        "aria-hidden": true
+      }), jsxRuntime.jsx(framerMotion.motion.main, {
+        className: "llm__bottom",
+        variants: slideIn(1),
+        initial: "hidden",
+        animate: "show",
+        exit: "exit",
+        children: jsxRuntime.jsx(Prompt, {})
+      })]
     })]
   }, "main-container");
 };