@a.izzuddin/ai-chat 0.2.25 → 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

@@ -25,6 +25,7 @@ interface Message {
     faqs?: FAQ[];
     suggestedQuestions?: SuggestedQuestion[];
     confidence?: Confidence;
+    language?: string;
 }
 /**
  * AI Chat Web Component
@@ -212,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

@@ -25,6 +25,7 @@ interface Message {
     faqs?: FAQ[];
     suggestedQuestions?: SuggestedQuestion[];
     confidence?: Confidence;
+    language?: string;
 }
 /**
  * AI Chat Web Component
@@ -212,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.24-beta.0");
+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")) {
@@ -5791,7 +5810,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           id: (Date.now() + 1).toString(),
           role: "assistant",
           content: responseText,
-          suggestedQuestions
+          suggestedQuestions,
+          language: this.language
         };
         this.messages = [...this.messages, assistantMessage];
         this.clearPendingRequest();
@@ -5940,7 +5960,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           content: responseText,
           faqs,
           suggestedQuestions,
-          confidence
+          confidence,
+          language: this.language
         };
         this.messages = [...this.messages, assistantMessage];
         this.clearPendingRequest();
@@ -6027,7 +6048,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         id: (Date.now() + 1).toString(),
         role: "assistant",
         content: responseText,
-        suggestedQuestions
+        suggestedQuestions,
+        language: this.language
       };
       this.messages = [...this.messages, assistantMessage];
       this.clearPendingRequest();
@@ -6196,7 +6218,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         content: responseText,
         faqs,
         suggestedQuestions,
-        confidence
+        confidence,
+        language: this.language
       };
       this.messages = [...this.messages, assistantMessage];
       this.clearPendingRequest();
@@ -6228,6 +6251,13 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
       <!-- Header -->
       <div class="header" style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight}; --primary-color-hover: ${this.primaryColorHover};">
         <div class="header-content">
+          ${this.mode === "widget" ? lit.html`
+            <button class="header-back-button" @click=${this.toggleWidget} aria-label="Back">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+          ` : ""}
           <div class="header-avatar">
             ${this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="Bot" class="header-avatar-image" />` : lit.html`<svg viewBox="0 0 24 24" fill="none" stroke="${this.primaryColor}" stroke-width="2" style="width: 1.5rem; height: 1.5rem;">
                   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -6278,7 +6308,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                   ` : ""}
                   ${msg.role === "assistant" && msg.suggestedQuestions && msg.suggestedQuestions.length > 0 ? lit.html`
                     <div class="faq-section">
-                      <p class="faq-title">${this.language === "ms" || this.language === "my" ? "Cadangan Soalan:" : "Suggested Questions:"}</p>
+                      <p class="faq-title">${msg.language === "ms" || msg.language === "my" ? "Cadangan Soalan:" : "Suggested Questions:"}</p>
                       <ul class="faq-list">
                         ${msg.suggestedQuestions.map((question) => lit.html`
                           <li class="faq-item" @click=${(e) => this.handleFAQClick(question, e)}>
@@ -6370,14 +6400,18 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           <button
             class=${classMap_js.classMap({
         "widget-button": true,
-        "widget-button-no-bg": !!this.widgetIconUrl,
-        "widget-button-hidden": this.isOpen
+        "widget-button-no-bg": !this.isOpen && !!this.widgetIconUrl,
+        "widget-button-close": this.isOpen
       })}
             style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight};"
             @click=${this.toggleWidget}
             aria-label=${this.isOpen ? "Close chat" : "Open chat"}
           >
-            ${this.widgetIconUrl ? lit.html`
+            ${this.isOpen ? lit.html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            ` : this.widgetIconUrl ? lit.html`
               <img src="${this.widgetIconUrl}" alt="Chat" class="widget-button-icon" />
             ` : lit.html`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -6402,6 +6436,7 @@ exports.AIChat.styles = lit.css`
       display: flex;
       flex-direction: column;
       height: 100vh;
+      height: var(--viewport-height, 100dvh);
       background: #ffffff;
     }
 
@@ -6453,8 +6488,19 @@ exports.AIChat.styles = lit.css`
       transform: scale(1.1);
     }
 
-    .widget-button-hidden {
-      display: none;
+    .widget-button-close {
+      background: var(--primary-color, #3681D3);
+      box-shadow: 0 4px 16px rgba(54, 129, 211, 0.3);
+    }
+
+    .widget-button-close:hover {
+      background: var(--primary-color, #3681D3);
+      box-shadow: 0 6px 20px rgba(54, 129, 211, 0.4);
+      transform: scale(1.05);
+    }
+
+    .widget-button-close svg {
+      color: #ffffff;
     }
 
     .widget-speech-bubble {
@@ -6505,7 +6551,7 @@ exports.AIChat.styles = lit.css`
 
     .widget-window {
       position: absolute;
-      bottom: 0;
+      bottom: 90px;
       right: 0;
       width: var(--widget-width, 380px);
       height: var(--widget-height, 600px);
@@ -6551,10 +6597,14 @@ exports.AIChat.styles = lit.css`
     /* Mobile portrait */
     @media (max-width: 480px) and (orientation: portrait) {
       .widget-window {
-        width: calc(100vw - 40px);
-        height: 70vh;
-        bottom: 0;
+        position: fixed;
+        top: var(--viewport-offset-top, 0px);
+        left: 0;
         right: 0;
+        width: 100vw;
+        height: 100vh;
+        height: var(--viewport-height, 100dvh);
+        border-radius: 0;
       }
 
       .widget-button {
@@ -6571,10 +6621,14 @@ exports.AIChat.styles = lit.css`
     /* Mobile landscape */
     @media (max-width: 900px) and (orientation: landscape) {
       .widget-window {
-        width: var(--widget-width, 500px);
-        height: calc(100vh - 100px);
-        bottom: 0;
+        position: fixed;
+        top: var(--viewport-offset-top, 0px);
+        left: 0;
         right: 0;
+        width: 100vw;
+        height: 100vh;
+        height: var(--viewport-height, 100dvh);
+        border-radius: 0;
       }
 
       .widget-button {
@@ -6835,6 +6889,41 @@ exports.AIChat.styles = lit.css`
       height: 1.25rem;
     }
 
+    .header-back-button {
+      display: none;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #fff;
+      padding: 0.3rem;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: background 0.2s;
+      flex-shrink: 0;
+    }
+
+    .header-back-button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .header-back-button svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    @media (max-width: 480px) {
+      .header-back-button {
+        display: flex;
+      }
+    }
+
+    @media (max-width: 900px) and (orientation: landscape) {
+      .header-back-button {
+        display: flex;
+      }
+    }
+
     .messages-area {
       flex: 1;
       overflow-y: auto;