@a.izzuddin/ai-chat 0.2.26 → 0.2.27-beta.1

package/custom-elements.json

@@ -987,6 +987,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "_viewportResizeHandler",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "scrollToBottom",

package/dist/index.d.mts

@@ -213,7 +213,9 @@ declare class AIChat extends LitElement {
     private loadMessagesFromStorage;
     private clearMessagesFromStorage;
     private formatMessageContent;
+    private _viewportResizeHandler;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     /**

package/dist/index.d.ts

@@ -213,7 +213,9 @@ declare class AIChat extends LitElement {
     private loadMessagesFromStorage;
     private clearMessagesFromStorage;
     private formatMessageContent;
+    private _viewportResizeHandler;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     /**

package/dist/index.js

@@ -5373,7 +5373,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-beta.1");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5385,6 +5385,13 @@ var md = new lib_default({
 exports.AIChat = class AIChat extends lit.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";
@@ -5528,6 +5535,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];
@@ -5598,6 +5610,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")) {
@@ -6417,6 +6436,7 @@ exports.AIChat.styles = lit.css`
       display: flex;
       flex-direction: column;
       height: 100vh;
+      height: var(--viewport-height, 100dvh);
       background: #ffffff;
     }
 
@@ -6578,12 +6598,12 @@ exports.AIChat.styles = lit.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;
       }
 
@@ -6602,12 +6622,12 @@ exports.AIChat.styles = lit.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;
       }