@a.izzuddin/ai-chat 0.2.21-beta.1 → 0.2.21-beta.2

package/custom-elements.json

@@ -756,6 +756,16 @@
               "default": "'Maaf, terdapat masalah semasa menghubungi pelayan. Sila cuba lagi.'",
               "attribute": "error-message"
             },
+            {
+              "kind": "field",
+              "name": "lowConfidenceMessage",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Sila hubungi helpdesk untuk pengesahan lanjut.'",
+              "attribute": "low-confidence-message"
+            },
             {
               "kind": "field",
               "name": "messages",
@@ -1192,6 +1202,14 @@
               },
               "default": "'Maaf, terdapat masalah semasa menghubungi pelayan. Sila cuba lagi.'",
               "fieldName": "errorMessage"
+            },
+            {
+              "name": "low-confidence-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Sila hubungi helpdesk untuk pengesahan lanjut.'",
+              "fieldName": "lowConfidenceMessage"
             }
           ],
           "superclass": {

package/dist/index.d.mts

@@ -88,6 +88,7 @@ declare class AIChat extends LitElement {
     language: string;
     showRelatedFaqs: boolean;
     errorMessage: string;
+    lowConfidenceMessage: string;
     private messages;
     private input;
     private isLoading;
@@ -179,6 +180,10 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        lowConfidenceMessage: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;

package/dist/index.d.ts

@@ -88,6 +88,7 @@ declare class AIChat extends LitElement {
     language: string;
     showRelatedFaqs: boolean;
     errorMessage: string;
+    lowConfidenceMessage: string;
     private messages;
     private input;
     private isLoading;
@@ -179,6 +180,10 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        lowConfidenceMessage: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;

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.21-beta.1");
+console.log("Chatbot Ver = 0.2.21-beta.2");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5407,6 +5407,7 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.language = "en";
     this.showRelatedFaqs = false;
     this.errorMessage = "Maaf, terdapat masalah semasa menghubungi pelayan. Sila cuba lagi.";
+    this.lowConfidenceMessage = "Sila hubungi helpdesk untuk pengesahan lanjut.";
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -5948,6 +5949,16 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
               </div>
               <div class="message-content">
                 <div class="message-text">${unsafeHtml_js.unsafeHTML(this.formatMessageContent(msg.content))}</div>
+                ${msg.role === "assistant" && msg.confidence && !msg.confidence.is_confident ? lit.html`
+                  <div class="low-confidence-warning">
+                    <svg class="warning-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                      <line x1="12" y1="9" x2="12" y2="13"></line>
+                      <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                    </svg>
+                    <span>${this.lowConfidenceMessage}</span>
+                  </div>
+                ` : ""}
                 ${msg.role === "assistant" && this.showRelatedFaqs && msg.faqs && msg.faqs.length > 0 ? lit.html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
@@ -6253,7 +6264,6 @@ exports.AIChat.styles = lit.css`
 
       .message-content {
         max-width: 100%;
-        padding: 0.625rem 0.875rem;
         font-size: 0.9375rem;
       }
 
@@ -6560,7 +6570,7 @@ exports.AIChat.styles = lit.css`
 
     .message-content {
       max-width: 36rem;
-      padding: 0.875rem 1.125rem;
+      padding: 1.125rem;
       border-radius: 1.25rem;
       line-height: 1.6;
       overflow-wrap: break-word;
@@ -6597,6 +6607,18 @@ exports.AIChat.styles = lit.css`
       word-break: break-word;
     }
 
+    .message-text p {
+      margin: 0 0 0.75rem 0;
+    }
+
+    .message-text p:last-child {
+      margin-bottom: 0;
+    }
+
+    .message-text p:first-child {
+      margin-top: 0;
+    }
+
     .message-text ul,
     .message-text ol {
       margin: 0.5rem 0;
@@ -6625,6 +6647,63 @@ exports.AIChat.styles = lit.css`
       list-style-type: decimal;
     }
 
+    .message-text h1,
+    .message-text h2,
+    .message-text h3,
+    .message-text h4,
+    .message-text h5,
+    .message-text h6 {
+      margin: 0.75rem 0 0.5rem 0;
+      font-weight: 600;
+    }
+
+    .message-text h1:first-child,
+    .message-text h2:first-child,
+    .message-text h3:first-child,
+    .message-text h4:first-child,
+    .message-text h5:first-child,
+    .message-text h6:first-child {
+      margin-top: 0;
+    }
+
+    .message-text blockquote {
+      margin: 0.5rem 0;
+      padding-left: 1rem;
+      border-left: 3px solid #d1d5db;
+    }
+
+    :host([theme="dark"]) .message-text blockquote {
+      border-left-color: #3f3f46;
+    }
+
+    .message-text code {
+      background: rgba(0, 0, 0, 0.05);
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+      font-size: 0.875em;
+    }
+
+    :host([theme="dark"]) .message-text code {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .message-text pre {
+      margin: 0.5rem 0;
+      padding: 0.75rem;
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 0.5rem;
+      overflow-x: auto;
+    }
+
+    :host([theme="dark"]) .message-text pre {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .message-text pre code {
+      background: transparent;
+      padding: 0;
+    }
+
     .faq-section {
       margin-top: 0.75rem;
       padding-top: 0.75rem;
@@ -6695,6 +6774,32 @@ exports.AIChat.styles = lit.css`
       color: #9CA3AF;
     } */
 
+    .low-confidence-warning {
+      margin-top: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: #FEF3C7;
+      border-left: 4px solid #F59E0B;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      color: #92400E;
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    :host([theme="dark"]) .low-confidence-warning {
+      background: #451A03;
+      border-left-color: #F59E0B;
+      color: #FDE68A;
+    }
+
+    .warning-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+    }
+
     .loading {
       display: flex;
       gap: 1rem;
@@ -6836,7 +6941,8 @@ exports.AIChat.properties = {
   initialQuestionsUrl: { type: String, attribute: "initial-questions-url" },
   language: { type: String, attribute: "language" },
   showRelatedFaqs: { type: Boolean, attribute: "show-related-faqs" },
-  errorMessage: { type: String, attribute: "error-message" }
+  errorMessage: { type: String, attribute: "error-message" },
+  lowConfidenceMessage: { type: String, attribute: "low-confidence-message" }
 };
 __decorateClass([
   decorators_js.state()