@a.izzuddin/ai-chat 0.2.25-beta.3 → 0.2.25-beta.5

package/dist/index.d.mts

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

package/dist/index.d.ts

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

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.25-beta.1");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5791,7 +5791,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 +5941,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           content: responseText,
           faqs,
           suggestedQuestions,
-          confidence
+          confidence,
+          language: this.language
         };
         this.messages = [...this.messages, assistantMessage];
         this.clearPendingRequest();
@@ -6027,7 +6029,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 +6199,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         content: responseText,
         faqs,
         suggestedQuestions,
-        confidence
+        confidence,
+        language: this.language
       };
       this.messages = [...this.messages, assistantMessage];
       this.clearPendingRequest();
@@ -6228,6 +6232,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 +6289,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 +6381,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">
@@ -6453,8 +6468,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 +6531,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 +6577,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: 0;
+        left: 0;
         right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        border-radius: 0;
       }
 
       .widget-button {
@@ -6571,10 +6601,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: 0;
+        left: 0;
         right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        border-radius: 0;
       }
 
       .widget-button {
@@ -6835,6 +6869,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;