@websolutespa/bom-mixer-llm 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @websolutespa/bom-mixer-llm
 
+## 0.0.4
+
+### Patch Changes
+
+- Added: embed options
+- Added: returning instance with methods
+
+## 0.0.3
+
+### Patch Changes
+
+- Updating: dependencies
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.2
+  - @websolutespa/bom-mixer-forms@0.3.1
+  - @websolutespa/bom-mixer-hooks@1.7.2
+  - @websolutespa/bom-mixer-icons@0.2.3
+  - @websolutespa/bom-mixer-store@1.7.3
+  - @websolutespa/bom-mixer-ui@1.7.5
+  - @websolutespa/bom-core@1.7.3
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -152,16 +152,46 @@
   box-sizing: border-box;
 }
 
+llm-embed {
+  display: block;
+  width: 100%;
+  max-height: 100vh;
+  background: transparent;
+  overflow: clip;
+}
+@media (max-width: 799px) {
+  llm-embed {
+    height: 100vh;
+  }
+}
+@media (min-width: 800px) {
+  llm-embed {
+    aspect-ratio: 1/1;
+  }
+}
+@media (min-width: 1080px) {
+  llm-embed {
+    aspect-ratio: 4/3;
+  }
+}
+@media (min-width: 1440px) {
+  llm-embed {
+    aspect-ratio: 16/9;
+  }
+}
+
 .llm {
-  position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+.llm:not(.-embedded) {
+  position: fixed;
+  top: 0;
+  left: 0;
   pointer-events: none;
   z-index: 9999;
 }
@@ -938,7 +968,8 @@
 }
 
 .llm .llm__main {
-  position: absolute;
+  display: block;
+  position: relative;
   pointer-events: auto;
   inset: 0;
   background: var(--llm-color-ui-1);
@@ -978,14 +1009,26 @@
 }
 .llm .llm__content {
   min-height: 100%;
-  padding-top: 100px;
-  padding-bottom: 180px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+.llm.-embedded .llm__main {
+  width: 100%;
+  height: 100%;
+}
+.llm.-embedded .llm__content {
+  padding: 80px 0 0 0;
+}
+.llm:not(.-embedded) .llm__main {
+  position: absolute;
+}
+.llm:not(.-embedded) .llm__content {
+  padding-top: 100px;
+  padding-bottom: 180px;
+}
 @media (min-width: 1024px) {
-  .llm .llm__content {
+  .llm:not(.-embedded) .llm__content {
     padding: 200px 0;
     padding-bottom: 280px;
   }

package/dist/cjs/index.js

@@ -1508,6 +1508,7 @@ const createLlmStore = _ref => {
     apiKey,
     threadId,
     opened,
+    embedded,
     decorateUrl,
     endpoint,
     test,
@@ -1520,7 +1521,8 @@ const createLlmStore = _ref => {
     prompt: '',
     locale: 'en',
     streaming: false,
-    opened: opened != null ? opened : threadId != null ? true : false,
+    opened: opened != null || embedded != null ? Boolean(opened || embedded) : threadId != null ? true : false,
+    embedded: embedded || false,
     hidden: false,
     fixed: false,
     idle: true,
@@ -3438,6 +3440,7 @@ const Thread = () => {
 const Main = () => {
   var _a;
   const lenisRef = react.useRef(null);
+  const embedded = useLlm(state => state.embedded);
   const messages = useLlm(state => state.messages);
   const {
     setLenis
@@ -3508,7 +3511,7 @@ const Main = () => {
       initial: "hidden",
       animate: "show",
       exit: "exit",
-      children: jsxRuntime.jsx(Header, {})
+      children: !embedded && jsxRuntime.jsx(Header, {})
     }), jsxRuntime.jsx(reactLenis.ReactLenis, {
       ref: lenisRef,
       className: "llm__scroller",
@@ -3582,16 +3585,23 @@ const Trigger = () => {
   });
 };
 
-const LlmComponent = props => {
+const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
   const {
     locale
   } = bomMixerHooks.useLayout();
   const {
-    init
+    init,
+    open
   } = useLlm(state => state.actions);
   const app = useLlm(state => state.app);
   const idle = useLlm(state => state.idle);
   const opened = useLlm(state => state.opened);
+  const embedded = useLlm(state => state.embedded);
+  react.useImperativeHandle(ref, () => ({
+    open: () => {
+      open();
+    }
+  }));
   react.useEffect(() => {
     init(locale);
   }, [init, locale]);
@@ -3600,7 +3610,8 @@ const LlmComponent = props => {
   }, [opened]);
   const mounted = bomMixerHooks.useMounted();
   const classNames = bomCore.getClassNames('llm', {
-    '-open': opened
+    '-open': opened,
+    '-embedded': embedded
   });
   if (mounted) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -3617,7 +3628,7 @@ const LlmComponent = props => {
   } else {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-};
+});
 
 exports.LlmComponent = LlmComponent;
 exports.LlmContext = LlmContext;