@a.izzuddin/ai-chat 0.2.26 → 0.2.27

package/dist/index.mjs

@@ -5371,7 +5371,7 @@ MarkdownIt.prototype.renderInline = function(src, env) {
 var lib_default = MarkdownIt;
 
 // src/components/ai-chat.ts
-console.log("Chatbot Ver = 0.2.25-beta.5");
+console.log("Chatbot Ver = 0.2.27");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5383,6 +5383,13 @@ var md = new lib_default({
 var AIChat = class extends LitElement {
   constructor() {
     super();
+    this._viewportResizeHandler = () => {
+      const vv = window.visualViewport;
+      if (vv) {
+        this.style.setProperty("--viewport-height", `${vv.height}px`);
+        this.style.setProperty("--viewport-offset-top", `${vv.offsetTop}px`);
+      }
+    };
     this.apiUrl = "";
     this.sessionId = "default-session";
     this.chatTitle = "My AI Agent";
@@ -5526,6 +5533,11 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
   }
   async connectedCallback() {
     super.connectedCallback();
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", this._viewportResizeHandler);
+      window.visualViewport.addEventListener("scroll", this._viewportResizeHandler);
+      this._viewportResizeHandler();
+    }
     const savedMessages = this.loadMessagesFromStorage();
     if (this.initialMessages && this.initialMessages.length > 0) {
       this.messages = [...this.initialMessages];
@@ -5596,6 +5608,13 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
       }, 500);
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (window.visualViewport) {
+      window.visualViewport.removeEventListener("resize", this._viewportResizeHandler);
+      window.visualViewport.removeEventListener("scroll", this._viewportResizeHandler);
+    }
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("messages")) {
@@ -6415,6 +6434,7 @@ AIChat.styles = css`
       display: flex;
       flex-direction: column;
       height: 100vh;
+      height: var(--viewport-height, 100dvh);
       background: #ffffff;
     }
 
@@ -6576,12 +6596,12 @@ AIChat.styles = css`
     @media (max-width: 480px) and (orientation: portrait) {
       .widget-window {
         position: fixed;
-        top: 0;
+        top: var(--viewport-offset-top, 0px);
         left: 0;
         right: 0;
-        bottom: 0;
         width: 100vw;
         height: 100vh;
+        height: var(--viewport-height, 100dvh);
         border-radius: 0;
       }
 
@@ -6600,12 +6620,12 @@ AIChat.styles = css`
     @media (max-width: 900px) and (orientation: landscape) {
       .widget-window {
         position: fixed;
-        top: 0;
+        top: var(--viewport-offset-top, 0px);
         left: 0;
         right: 0;
-        bottom: 0;
         width: 100vw;
         height: 100vh;
+        height: var(--viewport-height, 100dvh);
         border-radius: 0;
       }