@websolutespa/bom-llm 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -1,58 +1,71 @@
-# @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.11
+
+### Patch Changes
+
+- Added: shared state between instances
+
+## 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,27 @@
   box-sizing: border-box;
 }
 
+llm-embed {
+  display: block;
+  width: 100%;
+  height: 760px;
+  max-height: 100vh;
+  background: transparent;
+  overflow: clip;
+}
+
 .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 +1083,8 @@
 }
 
 .llm .llm__main {
-  position: absolute;
+  display: block;
+  position: relative;
   pointer-events: auto;
   inset: 0;
   background: var(--llm-color-ui-1);
@@ -1112,15 +1124,34 @@
 }
 .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-top: 40px;
+  padding-bottom: 180px;
+}
+@media (min-width: 1024px) {
+  .llm.-embedded .llm__content {
+    padding-top: 60px;
+    padding-bottom: 180px;
+  }
+}
+.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 {
-    padding: 200px 0;
+  .llm:not(.-embedded) .llm__content {
+    padding-top: 200px;
     padding-bottom: 280px;
   }
 }
@@ -1593,15 +1624,17 @@
   border: 2px solid rgba(255, 255, 255, 0.4);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
+  display: block;
+  margin: 1rem 0;
+  font-size: 0;
+  text-decoration: none;
+}
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img > img {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 320px;
-  font-size: 0;
-  text-decoration: none;
-}
-.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img > img {
   object-fit: cover;
 }
 .llm .llm__text-disclaimer {