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

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.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
@@ -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")) {
@@ -5789,7 +5808,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();
@@ -5938,7 +5958,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           content: responseText,
           faqs,
           suggestedQuestions,
-          confidence
+          confidence,
+          language: this.language
         };
         this.messages = [...this.messages, assistantMessage];
         this.clearPendingRequest();
@@ -6025,7 +6046,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();
@@ -6194,7 +6216,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         content: responseText,
         faqs,
         suggestedQuestions,
-        confidence
+        confidence,
+        language: this.language
       };
       this.messages = [...this.messages, assistantMessage];
       this.clearPendingRequest();
@@ -6226,6 +6249,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" ? 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 ? html`<img src="${this.botAvatarUrl}" alt="Bot" class="header-avatar-image" />` : 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>
@@ -6276,7 +6306,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                   ` : ""}
                   ${msg.role === "assistant" && msg.suggestedQuestions && msg.suggestedQuestions.length > 0 ? 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) => html`
                           <li class="faq-item" @click=${(e) => this.handleFAQClick(question, e)}>
@@ -6368,14 +6398,18 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           <button
             class=${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 ? html`
+            ${this.isOpen ? 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 ? html`
               <img src="${this.widgetIconUrl}" alt="Chat" class="widget-button-icon" />
             ` : html`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -6400,6 +6434,7 @@ AIChat.styles = css`
       display: flex;
       flex-direction: column;
       height: 100vh;
+      height: var(--viewport-height, 100dvh);
       background: #ffffff;
     }
 
@@ -6451,8 +6486,19 @@ AIChat.styles = 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 {
@@ -6503,7 +6549,7 @@ AIChat.styles = css`
 
     .widget-window {
       position: absolute;
-      bottom: 0;
+      bottom: 90px;
       right: 0;
       width: var(--widget-width, 380px);
       height: var(--widget-height, 600px);
@@ -6549,10 +6595,14 @@ AIChat.styles = 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 {
@@ -6569,10 +6619,14 @@ AIChat.styles = 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 {
@@ -6833,6 +6887,41 @@ AIChat.styles = 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;