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

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.21-beta.0");
+console.log("Chatbot Ver = 0.2.21-beta.2");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5405,6 +5405,7 @@ var AIChat = class extends 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;
@@ -5946,6 +5947,16 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
               </div>
               <div class="message-content">
                 <div class="message-text">${unsafeHTML(this.formatMessageContent(msg.content))}</div>
+                ${msg.role === "assistant" && msg.confidence && !msg.confidence.is_confident ? 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 ? html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
@@ -6251,7 +6262,6 @@ AIChat.styles = css`
 
       .message-content {
         max-width: 100%;
-        padding: 0.625rem 0.875rem;
         font-size: 0.9375rem;
       }
 
@@ -6558,7 +6568,7 @@ AIChat.styles = 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;
@@ -6589,13 +6599,24 @@ AIChat.styles = css`
     }
 
     .message-text {
-      white-space: pre-wrap;
       margin: 0;
       word-wrap: break-word;
       overflow-wrap: break-word;
       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;
@@ -6624,6 +6645,63 @@ AIChat.styles = 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;
@@ -6694,6 +6772,32 @@ AIChat.styles = 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;
@@ -6835,7 +6939,8 @@ 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([
   state()