@a.izzuddin/ai-chat 0.2.22 → 0.2.24

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.22-beta.0");
+console.log("Chatbot Ver = 0.2.24-beta.0");
 var md = new lib_default({
   html: false,
   // Disable HTML tags in source for security
@@ -5448,6 +5448,43 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
   getStorageKey() {
     return `ai-chat-messages-${this.sessionId}`;
   }
+  getPendingRequestKey() {
+    return `ai-chat-pending-${this.sessionId}`;
+  }
+  savePendingRequest(question, type = "ask", questionData) {
+    try {
+      const pendingRequest = {
+        question,
+        type,
+        questionData,
+        timestamp: Date.now()
+      };
+      const key = this.getPendingRequestKey();
+      localStorage.setItem(key, JSON.stringify(pendingRequest));
+    } catch (error2) {
+      console.warn("Failed to save pending request to localStorage:", error2);
+    }
+  }
+  loadPendingRequest() {
+    try {
+      const key = this.getPendingRequestKey();
+      const saved = localStorage.getItem(key);
+      if (saved) {
+        return JSON.parse(saved);
+      }
+    } catch (error2) {
+      console.warn("Failed to load pending request from localStorage:", error2);
+    }
+    return null;
+  }
+  clearPendingRequest() {
+    try {
+      const key = this.getPendingRequestKey();
+      localStorage.removeItem(key);
+    } catch (error2) {
+      console.warn("Failed to clear pending request from localStorage:", error2);
+    }
+  }
   saveMessagesToStorage() {
     try {
       const storageKey = this.getStorageKey();
@@ -5545,6 +5582,19 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         }];
       }
     }
+    const pendingRequest = this.loadPendingRequest();
+    if (pendingRequest) {
+      const messagesWithoutErrors = this.messages.filter((msg) => {
+        if (msg.role === "assistant" && msg.content === this.errorMessage) {
+          return false;
+        }
+        return true;
+      });
+      this.messages = messagesWithoutErrors;
+      setTimeout(() => {
+        this.retryPendingRequest(pendingRequest);
+      }, 500);
+    }
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -5678,7 +5728,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
     const results = await Promise.all(fetchPromises);
     return results.filter((q) => q !== null);
   }
-  async handleFAQClick(question) {
+  async handleFAQClick(question, event) {
     if (this.isLoading) return;
     if (question.Id && question.QuestionType || question.id && question.question_type) {
       await this.handleSuggestedQuestionClick(question);
@@ -5688,6 +5738,233 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
       this.handleSubmit(submitEvent);
     }
   }
+  /**
+   * Retry a pending request without adding duplicate user messages
+   * The user message is already in the chat history from before the interruption
+   */
+  async retryPendingRequest(pendingRequest) {
+    this.isLoading = true;
+    if (pendingRequest.type === "suggested" && pendingRequest.questionData) {
+      try {
+        const { questionId, questionType } = pendingRequest.questionData;
+        let baseUrl = "";
+        if (this.initialQuestionsUrl) {
+          try {
+            const urlObj = new URL(this.initialQuestionsUrl);
+            baseUrl = `${urlObj.protocol}//${urlObj.host}`;
+          } catch {
+            baseUrl = "http://43.217.183.120:8080";
+          }
+        } else {
+          baseUrl = "http://43.217.183.120:8080";
+        }
+        const url = `${baseUrl}/api/questions/${questionId}?question_type=${questionType}&language=${this.language}`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Backend error: ${response.status} ${errorText}`);
+        }
+        const data = await response.json();
+        let responseText = "No response from agent";
+        let suggestedQuestions = void 0;
+        if (data && typeof data === "object") {
+          if (data.question && data.question.answer_text) {
+            responseText = data.question.answer_text;
+          }
+          if (data.related_questions && Array.isArray(data.related_questions) && data.related_questions.length > 0) {
+            if (typeof data.related_questions[0] === "object" && data.related_questions[0].question_text) {
+              suggestedQuestions = data.related_questions.map((q) => ({
+                id: q.id,
+                question_type: q.question_type,
+                question_text: q.question_text,
+                category: q.category
+              }));
+            }
+          }
+        }
+        const assistantMessage = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: responseText,
+          suggestedQuestions
+        };
+        this.messages = [...this.messages, assistantMessage];
+        this.clearPendingRequest();
+        this.dispatchEvent(new CustomEvent("response-received", {
+          detail: assistantMessage,
+          bubbles: true,
+          composed: true
+        }));
+      } catch (err) {
+        console.error("Retry suggested question API failed:", err);
+        const errorMessage = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: this.errorMessage
+        };
+        this.messages = [...this.messages, errorMessage];
+        this.dispatchEvent(new CustomEvent("error", {
+          detail: err,
+          bubbles: true,
+          composed: true
+        }));
+      } finally {
+        this.isLoading = false;
+      }
+    } else {
+      try {
+        const response = await fetch(`${this.apiUrl}/ask`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            session_id: this.sessionId,
+            question: pendingRequest.question
+          })
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Backend error: ${response.status} ${errorText}`);
+        }
+        const data = await response.json();
+        let responseText = "No response from agent";
+        let faqs = void 0;
+        let suggestedQuestions = void 0;
+        let confidence = void 0;
+        let responseLanguage = void 0;
+        if (data && typeof data === "object" && data.response && typeof data.response === "string") {
+          const trimmedResponse = data.response.trim();
+          if (trimmedResponse.startsWith("{") || trimmedResponse.startsWith("[")) {
+            try {
+              const innerData = JSON.parse(data.response);
+              if (innerData && innerData.response && typeof innerData.response === "string") {
+                responseText = innerData.response;
+                faqs = innerData.faq_used || innerData.faqs_used || void 0;
+                suggestedQuestions = this.normalizeSuggestedQuestions(innerData.suggested_follow_ups || innerData.suggested_questions);
+                confidence = innerData.confident || innerData.confidence || "true";
+                responseLanguage = innerData.language || void 0;
+              } else {
+                responseText = data.response;
+                faqs = data.faq_used || data.faqs_used || void 0;
+                suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
+                confidence = data.confident || data.confidence || void 0;
+                responseLanguage = data.language || void 0;
+              }
+            } catch (parseError) {
+              const responsePattern = /"response"\s*:\s*"([^"]*(?:\\.[^"]*)*)"/s;
+              const responseMatch = data.response.match(responsePattern);
+              if (responseMatch) {
+                responseText = responseMatch[1].replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\r/g, "\r").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+              } else {
+                responseText = "Error: Could not parse response";
+              }
+              const faqsPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[^\]]*\])/s;
+              const faqsMatch = data.response.match(faqsPattern);
+              if (faqsMatch) {
+                try {
+                  faqs = JSON.parse(faqsMatch[1]);
+                } catch {
+                  const faqsMultiPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[\s\S]*?\n\s*\])/;
+                  const faqsMultiMatch = data.response.match(faqsMultiPattern);
+                  if (faqsMultiMatch) {
+                    try {
+                      faqs = JSON.parse(faqsMultiMatch[1]);
+                    } catch {
+                      faqs = void 0;
+                    }
+                  }
+                }
+              }
+              const suggestedPattern = /"(?:suggested_follow_ups|suggested_questions)"\s*:\s*(\[[^\]]*\])/s;
+              const suggestedMatch = data.response.match(suggestedPattern);
+              if (suggestedMatch) {
+                try {
+                  const parsedQuestions = JSON.parse(suggestedMatch[1]);
+                  suggestedQuestions = this.normalizeSuggestedQuestions(parsedQuestions);
+                } catch {
+                  const suggestedMultiPattern = /"(?:suggested_follow_ups|suggested_questions)"\s*:\s*(\[[\s\S]*?\n\s*\])/;
+                  const suggestedMultiMatch = data.response.match(suggestedMultiPattern);
+                  if (suggestedMultiMatch) {
+                    try {
+                      const parsedQuestions = JSON.parse(suggestedMultiMatch[1]);
+                      suggestedQuestions = this.normalizeSuggestedQuestions(parsedQuestions);
+                    } catch {
+                      suggestedQuestions = void 0;
+                    }
+                  }
+                }
+              }
+            }
+          } else {
+            responseText = data.response;
+            faqs = data.faq_used || data.faqs_used || void 0;
+            suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
+            confidence = data.confident || data.confidence || void 0;
+            responseLanguage = data.language || void 0;
+          }
+        } else if (typeof data === "string") {
+          responseText = data;
+        } else if (data && typeof data === "object") {
+          responseText = data.message || data.answer || "Error: Unexpected response format";
+          faqs = data.faq_used || data.faqs_used || void 0;
+          suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
+          confidence = data.confident || data.confidence || void 0;
+          responseLanguage = data.language || void 0;
+        }
+        if (suggestedQuestions && suggestedQuestions.length > 0) {
+          const questionsNeedingText = suggestedQuestions.filter(
+            (q) => (q.Id || q.id) && (q.QuestionType || q.question_type) && !q.question_text
+          );
+          if (questionsNeedingText.length > 0) {
+            const questionsToFetch = questionsNeedingText.map((q) => ({
+              Id: q.Id || q.id?.toString(),
+              QuestionType: q.QuestionType || q.question_type
+            }));
+            const fetchedQuestions = await this.fetchQuestionTexts(questionsToFetch);
+            suggestedQuestions = [
+              ...suggestedQuestions.filter((q) => q.question_text),
+              ...fetchedQuestions
+            ];
+          }
+        }
+        if (responseLanguage) {
+          this.language = responseLanguage;
+        }
+        const assistantMessage = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: responseText,
+          faqs,
+          suggestedQuestions,
+          confidence
+        };
+        this.messages = [...this.messages, assistantMessage];
+        this.clearPendingRequest();
+        this.dispatchEvent(new CustomEvent("response-received", {
+          detail: assistantMessage,
+          bubbles: true,
+          composed: true
+        }));
+      } catch (err) {
+        console.error("Retry backend connection failed:", err);
+        const errorMessage = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: this.errorMessage
+        };
+        this.messages = [...this.messages, errorMessage];
+        this.dispatchEvent(new CustomEvent("error", {
+          detail: err,
+          bubbles: true,
+          composed: true
+        }));
+      } finally {
+        this.isLoading = false;
+      }
+    }
+  }
   async handleSuggestedQuestionClick(question) {
     const questionId = question.Id || question.id;
     const questionType = question.QuestionType || question.question_type;
@@ -5699,6 +5976,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
     };
     this.messages = [...this.messages, userMessage];
     this.isLoading = true;
+    this.savePendingRequest(question.question_text, "suggested", { questionId, questionType });
     this.dispatchEvent(new CustomEvent("message-sent", {
       detail: userMessage,
       bubbles: true,
@@ -5750,6 +6028,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         suggestedQuestions
       };
       this.messages = [...this.messages, assistantMessage];
+      this.clearPendingRequest();
       this.dispatchEvent(new CustomEvent("response-received", {
         detail: assistantMessage,
         bubbles: true,
@@ -5784,6 +6063,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
     const questionText = this.input.trim();
     this.input = "";
     this.isLoading = true;
+    this.savePendingRequest(questionText, "ask");
     this.dispatchEvent(new CustomEvent("message-sent", {
       detail: userMessage,
       bubbles: true,
@@ -5917,6 +6197,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         confidence
       };
       this.messages = [...this.messages, assistantMessage];
+      this.clearPendingRequest();
       this.dispatchEvent(new CustomEvent("response-received", {
         detail: assistantMessage,
         bubbles: true,
@@ -5990,7 +6271,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                       <p class="faq-title">Cadangan Soalan:</p>
                       <ul class="faq-list">
                         ${msg.suggestedQuestions.map((question) => html`
-                          <li class="faq-item" @click=${() => this.handleFAQClick(question)}>
+                          <li class="faq-item" @click=${(e) => this.handleFAQClick(question, e)}>
                             ${question.question_text}
                           </li>
                         `)}
@@ -6261,6 +6542,21 @@ AIChat.styles = css`
       }
     }
 
+    /* Desktop responsive styles - reduce excessive margins on large screens */
+    @media (min-width: 1025px) {
+      .message.user {
+        margin-left: 2rem;
+      }
+
+      .message.assistant {
+        margin-right: 1.5rem;
+      }
+
+      .contact-support-wrapper {
+        margin-left: 1.5rem;
+      }
+    }
+
     /* Mobile responsive styles for all modes */
     @media (max-width: 768px) {
       .contact-support-wrapper {
@@ -6304,7 +6600,7 @@ AIChat.styles = css`
 
       .message-content {
         max-width: 100%;
-        font-size: 0.9375rem;
+        font-size: 1.2rem;
         padding: 0.875rem 1.25rem;
       }
 
@@ -6460,8 +6756,8 @@ AIChat.styles = css`
     }
 
     .header-avatar {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 3.5rem;
+      height: 3.5rem;
       border-radius: 50%;
       background: #fff;
       display: flex;
@@ -6610,8 +6906,8 @@ AIChat.styles = css`
     }
 
     .avatar {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 3.5rem;
+      height: 3.5rem;
       border-radius: 9999px;
       background: #E5E7EB;
       display: flex;
@@ -6637,12 +6933,13 @@ AIChat.styles = css`
 
     .message-content {
       max-width: 36rem;
-      padding: 1rem 1.5rem;
       border-radius: 1.25rem;
       line-height: 1.6;
       overflow-wrap: break-word;
       word-wrap: break-word;
       min-width: 0;
+      font-size: 1.2rem;
+      padding: 1rem 1.5rem;
     }
 
     .message.user .message-content {
@@ -6784,7 +7081,7 @@ AIChat.styles = css`
     }
 
     .faq-title {
-      font-size: 0.875rem;
+      font-size: 1.1rem;
       font-weight: 600;
       color: var(--primary-color, #3681D3);
       margin: 0 0 0.375rem 0;
@@ -6804,7 +7101,7 @@ AIChat.styles = css`
     }
 
     .faq-item {
-      font-size: 0.875rem;
+      font-size: 1.2rem;
       color: var(--primary-color, #3681D3);
       padding: 0;
       border-radius: 0.5rem;
@@ -6960,7 +7257,7 @@ AIChat.styles = css`
       padding: 0 1rem;
       border: 1px solid #d1d5db;
       border-radius: 1.5rem;
-      font-size: 0.9375rem;
+      font-size: 1.2rem;
       font-family: inherit;
       background: #fff;
       color: #374151;