@websolutespa/bom-llm 0.0.9 → 0.0.10

package/CHANGELOG.md

@@ -1,58 +1,65 @@
-# @websolutespa/bom-llm
-
-## 0.0.9
-
-### Patch Changes
-
-- Updating: dependencies
-
-## 0.0.8
-
-### Patch Changes
-
-- Modified: Speech synthesis & recognition, disclaimer, markdown
-
-## 0.0.7
-
-### Patch Changes
-
-- Modified: components dangerouslySetInnerHTML, styles, useLlm status opened with threadId
-
-## 0.0.6
-
-### Patch Changes
-
-- Fixing: threads
-- Modified: MessageService, FormRecap, useLlm
-
-## 0.0.5
-
-### Patch Changes
-
-- Added: declarations
-- Modified: FormRecap, QuickLinks
-
-## 0.0.4
-
-### Patch Changes
-
-- Modified: decorateUrl async behaviour
-
-## 0.0.3
-
-### Patch Changes
-
-- Added: markdown support
-
-## 0.0.2
-
-### Patch Changes
-
-- Added: abort stream
-- Modified: speech, useLlm, message service, canvas, icons
-
-## 0.0.1
-
-### Patch Changes
-
-- Added: first release.
+# @websolutespa/bom-llm
+
+## 0.0.10
+
+### Patch Changes
+
+- Added: embed options
+- Added: returning instance with methods
+
+## 0.0.9
+
+### Patch Changes
+
+- Updating: dependencies
+
+## 0.0.8
+
+### Patch Changes
+
+- Modified: Speech synthesis & recognition, disclaimer, markdown
+
+## 0.0.7
+
+### Patch Changes
+
+- Modified: components dangerouslySetInnerHTML, styles, useLlm status opened with threadId
+
+## 0.0.6
+
+### Patch Changes
+
+- Fixing: threads
+- Modified: MessageService, FormRecap, useLlm
+
+## 0.0.5
+
+### Patch Changes
+
+- Added: declarations
+- Modified: FormRecap, QuickLinks
+
+## 0.0.4
+
+### Patch Changes
+
+- Modified: decorateUrl async behaviour
+
+## 0.0.3
+
+### Patch Changes
+
+- Added: markdown support
+
+## 0.0.2
+
+### Patch Changes
+
+- Added: abort stream
+- Modified: speech, useLlm, message service, canvas, icons
+
+## 0.0.1
+
+### Patch Changes
+
+- Added: first release.

package/README.md

@@ -65,11 +65,28 @@ document.addEventListener('DOMContentLoaded', () => {
       apiKey: 'MY_API_KEY',
       threadId: searchParams.get('llmThreadId'),
     };
-    bomLlm(options);
+    // returned instance
+    const llm = bomLlm(options);
   }
 });
 ```
 
+Using imperatively.
+
+```js
+const llm = bomLlm(options);
+// using open command imperatively
+setTimeout(() => {
+  llm.open();
+}, 4000);
+```
+
+Using embed tag.
+
+```html
+<llm-embed />
+```
+
 ### Running test
 
 Add parameter test = true.

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { LlmInstance } from '@websolutespa/bom-mixer-llm';
+
 type LlmItem = Record<string, any> & {
     type: string;
 };
@@ -11,8 +13,9 @@ type LlmOptions = {
     test?: boolean;
     threadId?: string;
     opened?: boolean;
+    embedded?: boolean;
 };
 
-declare function bomLlm(props: LlmOptions): void;
+declare function bomLlm(props: LlmOptions): LlmInstance | undefined;
 
 export { bomLlm };

package/dist/umd/index.css

@@ -286,16 +286,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;
 }
@@ -1072,7 +1102,8 @@
 }
 
 .llm .llm__main {
-  position: absolute;
+  display: block;
+  position: relative;
   pointer-events: auto;
   inset: 0;
   background: var(--llm-color-ui-1);
@@ -1112,14 +1143,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/umd/index.js

@@ -23803,6 +23803,7 @@
 	    apiKey,
 	    threadId,
 	    opened,
+	    embedded,
 	    decorateUrl,
 	    endpoint,
 	    test,
@@ -23815,7 +23816,8 @@
 	    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,
@@ -28797,6 +28799,7 @@ void main(void) {
 
 	const Main = () => {
 	  const lenisRef = reactExports.useRef(null);
+	  const embedded = useLlm(state => state.embedded);
 	  const messages = useLlm(state => state.messages);
 	  const {
 	    setLenis
@@ -28867,7 +28870,7 @@ void main(void) {
 	      initial: "hidden",
 	      animate: "show",
 	      exit: "exit",
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(Header, {})
+	      children: !embedded && /*#__PURE__*/jsxRuntimeExports.jsx(Header, {})
 	    }), /*#__PURE__*/jsxRuntimeExports.jsx(v, {
 	      ref: lenisRef,
 	      className: "llm__scroller",
@@ -28941,16 +28944,23 @@ void main(void) {
 	  });
 	};
 
-	const LlmComponent = props => {
+	const LlmComponent = /*#__PURE__*/reactExports.forwardRef((props, ref) => {
 	  const {
 	    locale
 	  } = 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);
+	  reactExports.useImperativeHandle(ref, () => ({
+	    open: () => {
+	      open();
+	    }
+	  }));
 	  reactExports.useEffect(() => {
 	    init(locale);
 	  }, [init, locale]);
@@ -28959,7 +28969,8 @@ void main(void) {
 	  }, [opened]);
 	  const mounted = useMounted();
 	  const classNames = getClassNames('llm', {
-	    '-open': opened
+	    '-open': opened,
+	    '-embedded': embedded
 	  });
 	  if (mounted) {
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
@@ -28976,7 +28987,7 @@ void main(void) {
 	  } else {
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
 	  }
-	};
+	});
 
 	const ErrorBoundaryContext = /*#__PURE__*/reactExports.createContext(null);
 	const initialState = {
@@ -29230,12 +29241,14 @@ void main(void) {
 	  }
 	}];
 
-	function App(_a) {
+	const App = _a => {
 	  var {
 	      locale,
-	      market
+	      market,
+	      instance
 	    } = _a,
-	    props = __rest(_a, ["locale", "market"]);
+	    props = __rest(_a, ["locale", "market", "instance"]);
+	  const llmRef = reactExports.useRef(null);
 	  const data = reactExports.useMemo(() => {
 	    if (isBrowser$1) {
 	      const htmlLang = getHtmlLang();
@@ -29285,7 +29298,11 @@ void main(void) {
 	    market: data.market,
 	    title: data.title,
 	    abstract: data.description,
-	    category: 'uncategorized',
+	    category: {
+	      id: 'uncategorized',
+	      slug: 'uncategorized',
+	      title: 'uncategorized'
+	    },
 	    slug: data.slug,
 	    href: data.canonical,
 	    id: 1,
@@ -29294,6 +29311,12 @@ void main(void) {
 	    canonical: data.canonical
 	  };
 	  const extra = {};
+	  reactExports.useEffect(() => {
+	    if (llmRef.current && instance) {
+	      // console.log('App', llmRef.current, instance);
+	      Object.assign(instance, llmRef.current);
+	    }
+	  }, []);
 	  return jsxRuntimeExports.jsx(ErrorBoundary, {
 	    FallbackComponent: ErrorHandler,
 	    children: jsxRuntimeExports.jsx(LayoutProvider, {
@@ -29305,14 +29328,16 @@ void main(void) {
 	            extra: extra,
 	            children: jsxRuntimeExports.jsx(LlmProvider, Object.assign({}, props, {
 	              endpoint: endpoint,
-	              children: jsxRuntimeExports.jsx(LlmComponent, {})
+	              children: jsxRuntimeExports.jsx(LlmComponent, {
+	                ref: llmRef
+	              })
 	            }))
 	          })
 	        })
 	      })
 	    })
 	  });
-	}
+	};
 	function getLabels(locale) {
 	  return label.map(x => {
 	    const localizedItem = localizeItem(x, locale, 'en');
@@ -29348,9 +29373,27 @@ void main(void) {
 	  const node = document.createElement('div');
 	  node.setAttribute('id', 'bom-llm');
 	  body.appendChild(node);
-	  client.createRoot(node).render(jsxRuntimeExports.jsx(React.StrictMode, {
-	    children: jsxRuntimeExports.jsx(App, Object.assign({}, props))
+	  const llm = {
+	    open: () => {
+	      console.log('unitialized');
+	    }
+	  };
+	  const root = client.createRoot(node);
+	  root.render(jsxRuntimeExports.jsx(React.StrictMode, {
+	    children: jsxRuntimeExports.jsx(App, Object.assign({}, props, {
+	      instance: llm
+	    }))
 	  }));
+	  const nodes = Array.from(document.querySelectorAll('llm-embed'));
+	  nodes.forEach(node => {
+	    const root = client.createRoot(node);
+	    root.render(jsxRuntimeExports.jsx(React.StrictMode, {
+	      children: jsxRuntimeExports.jsx(App, Object.assign({}, props, {
+	        embedded: true
+	      }))
+	    }));
+	  });
+	  return llm;
 	}
 	if (typeof window !== 'undefined') {
 	  window.bomLlm = bomLlm;