@websolutespa/bom-llm 0.0.48 → 0.0.50

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.50
+
+### Patch Changes
+
+- Modified idle timeout
+
+## 0.0.49
+
+### Patch Changes
+
+- Modified: theme & styles
+
 ## 0.0.48
 
 ### Patch Changes

package/dist/index.d.ts

@@ -17,6 +17,7 @@ type IMedia = Record<string, unknown> & {
 type LlmCard = {
     id?: string;
     blockType?: string;
+    blockName?: string;
     icon?: IMedia;
     body: string;
     title: string;

package/dist/umd/index.css

@@ -810,8 +810,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;
@@ -822,6 +822,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%;
@@ -849,12 +858,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 {
@@ -1225,6 +1234,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 {
@@ -1243,11 +1253,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;
@@ -1271,7 +1287,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%;
@@ -1334,7 +1350,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;
@@ -1546,11 +1562,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 {
@@ -1626,8 +1642,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 {
@@ -1756,9 +1772,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/umd/index.js

@@ -17998,6 +17998,10 @@
 	  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
@@ -18034,9 +18038,11 @@
 	  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 = {
@@ -18045,6 +18051,7 @@
 	  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)",
@@ -18055,7 +18062,12 @@
 	  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)"
@@ -18115,6 +18127,7 @@
 	  typography: typography,
 	  color: color,
 	  border: border,
+	  main: main,
 	  canvas: canvas,
 	  chat: chat,
 	  trigger: trigger$1,
@@ -18125,6 +18138,7 @@
 	  hintIcon: hintIcon,
 	  pill: pill,
 	  input: input,
+	  promptSubmit: promptSubmit,
 	  checkbox: checkbox,
 	  user: user,
 	  assistant: assistant,
@@ -22742,7 +22756,7 @@ ${Object.entries(vars).map(_ref2 => {
 	              set(() => ({
 	                idle: true
 	              }));
-	            }, 6000);
+	            }, 8000);
 	          };
 	          const handleIdleTimes = () => {
 	            let to = setIdleTimeout();
@@ -29823,7 +29837,7 @@ void main(void) {
 	  const {
 	    width
 	  } = useWindowSize();
-	  useLlm(state => state.app);
+	  const theme = useLlm(state => state.theme);
 	  const {
 	    send
 	  } = useLlmView(state => state.actions);
@@ -29841,12 +29855,13 @@ void main(void) {
 	    });
 	  };
 	  const getCard = (item, index) => {
+	    const direction = theme.hintTitle.flexDirection || 'row';
 	    return /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
 	      type: "button",
 	      className: "llm__hint",
 	      onClick: () => onClick(item),
 	      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-	        className: "llm__hint-title -llm-t-label1",
+	        className: getClassNames('llm__hint-title -llm-t-label1', direction),
 	        children: [item.icon && /*#__PURE__*/jsxRuntimeExports.jsx("i", {
 	          children: /*#__PURE__*/jsxRuntimeExports.jsx("img", {
 	            src: item.icon.src || item.icon.url,
@@ -30128,11 +30143,15 @@ void main(void) {
 	          }), extendedWelcomeText && (embedded ? /*#__PURE__*/jsxRuntimeExports.jsx(motion.h2, {
 	            variants: motionItem,
 	            className: "llm__intro-title -llm-t-display2",
-	            children: extendedWelcomeText
+	            dangerouslySetInnerHTML: {
+	              __html: extendedWelcomeText
+	            }
 	          }) : /*#__PURE__*/jsxRuntimeExports.jsx(motion.h1, {
 	            variants: motionItem,
 	            className: "llm__intro-title -llm-t-display2",
-	            children: extendedWelcomeText
+	            dangerouslySetInnerHTML: {
+	              __html: extendedWelcomeText
+	            }
 	          }))]
 	        }), hints.length > 0 && /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
 	          variants: motionItem,
@@ -33650,6 +33669,7 @@ void main(void) {
 
 	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);
@@ -33735,13 +33755,18 @@ void main(void) {
 	        className: "llm__content",
 	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Intro, {}), messages && messages.length > 0 && /*#__PURE__*/jsxRuntimeExports.jsx(Thread, {})]
 	      })
-	    }), shouldShowPrompt && /*#__PURE__*/jsxRuntimeExports.jsx(motion.main, {
-	      className: "llm__bottom",
-	      variants: slideIn(1),
-	      initial: "hidden",
-	      animate: "show",
-	      exit: "exit",
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(Prompt, {})
+	    }), shouldShowPrompt && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+	      children: [app && !theme.canvas.enabled && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	        className: "llm__underlay",
+	        "aria-hidden": true
+	      }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.main, {
+	        className: "llm__bottom",
+	        variants: slideIn(1),
+	        initial: "hidden",
+	        animate: "show",
+	        exit: "exit",
+	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Prompt, {})
+	      })]
 	    })]
 	  }, "main-container");
 	};