@a.izzuddin/ai-chat 0.2.10 → 0.2.13

package/dist/index.mjs

@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.10";
+var VERSION = "0.2.13";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -35,6 +35,9 @@ var AIChat = class extends LitElement {
     this.botMessageBg = "#F5F5F5";
     this.welcomeMessage = "How can I help you today?";
     this.welcomeSubtitle = "";
+    this.initialQuestionsUrl = "";
+    this.language = "en";
+    this.showRelatedFaqs = true;
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -78,29 +81,38 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
   saveMessagesToStorage() {
     try {
       const storageKey = this.getStorageKey();
-      localStorage.setItem(storageKey, JSON.stringify(this.messages));
+      sessionStorage.setItem(storageKey, JSON.stringify(this.messages));
+      sessionStorage.setItem("ai-chat-last-session-id", this.sessionId);
     } catch (error) {
-      console.warn("Failed to save messages to localStorage:", error);
+      console.warn("Failed to save messages to sessionStorage:", error);
     }
   }
   loadMessagesFromStorage() {
     try {
+      const lastSessionId = sessionStorage.getItem("ai-chat-last-session-id");
+      if (lastSessionId && lastSessionId !== this.sessionId) {
+        console.log(`\u{1F504} Session changed from "${lastSessionId}" to "${this.sessionId}", clearing old messages`);
+        const oldStorageKey = `ai-chat-messages-${lastSessionId}`;
+        sessionStorage.removeItem(oldStorageKey);
+        sessionStorage.setItem("ai-chat-last-session-id", this.sessionId);
+        return null;
+      }
       const storageKey = this.getStorageKey();
-      const saved = localStorage.getItem(storageKey);
+      const saved = sessionStorage.getItem(storageKey);
       if (saved) {
         return JSON.parse(saved);
       }
     } catch (error) {
-      console.warn("Failed to load messages from localStorage:", error);
+      console.warn("Failed to load messages from sessionStorage:", error);
     }
     return null;
   }
   clearMessagesFromStorage() {
     try {
       const storageKey = this.getStorageKey();
-      localStorage.removeItem(storageKey);
+      sessionStorage.removeItem(storageKey);
     } catch (error) {
-      console.warn("Failed to clear messages from localStorage:", error);
+      console.warn("Failed to clear messages from sessionStorage:", error);
     }
   }
   formatMessageContent(content) {
@@ -184,22 +196,59 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
     }
     return formattedContent;
   }
-  connectedCallback() {
+  async connectedCallback() {
     super.connectedCallback();
     const savedMessages = this.loadMessagesFromStorage();
     if (this.initialMessages && this.initialMessages.length > 0) {
       this.messages = [...this.initialMessages];
     } else if (savedMessages && savedMessages.length > 0) {
       this.messages = savedMessages;
-    } else if (this.welcomeMessage) {
-      const welcomeText = this.welcomeSubtitle ? `${this.welcomeMessage}
+    } else {
+      let suggestedQuestions = void 0;
+      if (this.initialQuestionsUrl) {
+        try {
+          let fetchUrl = this.initialQuestionsUrl;
+          if (this.language) {
+            const separator = fetchUrl.includes("?") ? "&" : "?";
+            fetchUrl = `${fetchUrl}${separator}language=${this.language}`;
+          }
+          console.log("\u{1F4E4} Fetching initial questions from:", fetchUrl);
+          const response = await fetch(fetchUrl);
+          if (response.ok) {
+            const data = await response.json();
+            console.log("\u{1F4E5} Fetched initial questions:", data);
+            let questionsArray = data.questions || data.suggested_questions || data;
+            if (Array.isArray(questionsArray) && questionsArray.length > 0) {
+              if (typeof questionsArray[0] === "object" && questionsArray[0].question_text) {
+                suggestedQuestions = questionsArray.map((q) => ({
+                  id: q.id,
+                  question_type: q.question_type,
+                  question_text: q.question_text,
+                  category: q.category
+                }));
+              } else if (typeof questionsArray[0] === "string") {
+                suggestedQuestions = questionsArray.map((q) => ({
+                  question_text: q
+                }));
+              }
+            }
+            console.log("\u2705 Processed suggested questions:", suggestedQuestions);
+          }
+        } catch (error) {
+          console.warn("Failed to fetch initial questions:", error);
+        }
+      }
+      if (this.welcomeMessage) {
+        const welcomeText = this.welcomeSubtitle ? `${this.welcomeMessage}
 
 ${this.welcomeSubtitle}` : this.welcomeMessage;
-      this.messages = [{
-        id: "welcome-" + Date.now(),
-        role: "assistant",
-        content: welcomeText
-      }];
+        this.messages = [{
+          id: "welcome-" + Date.now(),
+          role: "assistant",
+          content: welcomeText,
+          suggestedQuestions
+        }];
+      }
     }
   }
   updated(changedProperties) {
@@ -218,14 +267,121 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
       }
     }, 100);
   }
+  /**
+   * Normalize suggested questions - converts string arrays to SuggestedQuestion objects
+   */
+  normalizeSuggestedQuestions(questions) {
+    if (!questions || !Array.isArray(questions) || questions.length === 0) {
+      return void 0;
+    }
+    if (typeof questions[0] === "object" && questions[0].question_text) {
+      return questions;
+    }
+    if (typeof questions[0] === "string") {
+      return questions.map((q) => ({
+        question_text: q
+      }));
+    }
+    return void 0;
+  }
   handleInput(e) {
     this.input = e.target.value;
   }
-  handleFAQClick(question) {
+  async handleFAQClick(question) {
     if (this.isLoading) return;
-    this.input = question;
-    const submitEvent = new Event("submit", { cancelable: true });
-    this.handleSubmit(submitEvent);
+    if (question.id && question.question_type) {
+      await this.handleSuggestedQuestionClick(question);
+    } else {
+      this.input = question.question_text;
+      const submitEvent = new Event("submit", { cancelable: true });
+      this.handleSubmit(submitEvent);
+    }
+  }
+  async handleSuggestedQuestionClick(question) {
+    if (!question.id || !question.question_type) return;
+    const userMessage = {
+      id: Date.now().toString(),
+      role: "user",
+      content: question.question_text
+    };
+    this.messages = [...this.messages, userMessage];
+    this.isLoading = true;
+    this.dispatchEvent(new CustomEvent("message-sent", {
+      detail: userMessage,
+      bubbles: true,
+      composed: true
+    }));
+    try {
+      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/${question.id}?question_type=${question.question_type}`;
+      console.log("\u{1F4E4} Calling suggested question API:", url);
+      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();
+      console.log("\u{1F50D} Suggested question API response:", data);
+      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.dispatchEvent(new CustomEvent("response-received", {
+        detail: assistantMessage,
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error("Suggested question API failed:", err);
+      const errorMessage = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: `Error: ${err instanceof Error ? err.message : "Unknown error"}
+
+Please check your API endpoint configuration.`
+      };
+      this.messages = [...this.messages, errorMessage];
+      this.dispatchEvent(new CustomEvent("error", {
+        detail: err,
+        bubbles: true,
+        composed: true
+      }));
+    } finally {
+      this.isLoading = false;
+    }
   }
   async handleSubmit(e) {
     e.preventDefault();
@@ -274,14 +430,14 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
             if (innerData && innerData.response && typeof innerData.response === "string") {
               responseText = innerData.response;
               faqs = innerData.faq_used || innerData.faqs_used || void 0;
-              suggestedQuestions = innerData.suggested_follow_ups || innerData.suggested_questions || void 0;
+              suggestedQuestions = this.normalizeSuggestedQuestions(innerData.suggested_follow_ups || innerData.suggested_questions);
               console.log("\u2705 Extracted text length:", responseText.length);
               console.log("\u2705 Extracted FAQs count:", faqs?.length || 0);
               console.log("\u2705 Extracted suggested questions count:", suggestedQuestions?.length || 0);
             } else {
               responseText = data.response;
               faqs = data.faq_used || data.faqs_used || void 0;
-              suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
+              suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
             }
           } catch (parseError) {
             console.warn("\u26A0\uFE0F JSON.parse failed, using regex extraction...", parseError);
@@ -318,7 +474,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
             const suggestedMatch = data.response.match(suggestedPattern);
             if (suggestedMatch) {
               try {
-                suggestedQuestions = JSON.parse(suggestedMatch[1]);
+                const parsedQuestions = JSON.parse(suggestedMatch[1]);
+                suggestedQuestions = this.normalizeSuggestedQuestions(parsedQuestions);
                 console.log("\u2705 Extracted suggested questions, count:", suggestedQuestions?.length || 0);
               } catch {
                 console.log("\u26A0\uFE0F Could not parse suggested questions, trying multiline...");
@@ -326,7 +483,8 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                 const suggestedMultiMatch = data.response.match(suggestedMultiPattern);
                 if (suggestedMultiMatch) {
                   try {
-                    suggestedQuestions = JSON.parse(suggestedMultiMatch[1]);
+                    const parsedQuestions = JSON.parse(suggestedMultiMatch[1]);
+                    suggestedQuestions = this.normalizeSuggestedQuestions(parsedQuestions);
                     console.log("\u2705 Extracted multi-line suggested questions, count:", suggestedQuestions?.length || 0);
                   } catch {
                     suggestedQuestions = void 0;
@@ -339,7 +497,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           console.log("\u{1F4C4} Direct text response (not JSON)");
           responseText = data.response;
           faqs = data.faq_used || data.faqs_used || void 0;
-          suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
+          suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
         }
       } else if (typeof data === "string") {
         console.log("\u{1F4C4} Response is a plain string");
@@ -348,7 +506,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
         console.warn("\u26A0\uFE0F Unexpected format, using fallback");
         responseText = data.message || data.answer || "Error: Unexpected response format";
         faqs = data.faq_used || data.faqs_used || void 0;
-        suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
+        suggestedQuestions = this.normalizeSuggestedQuestions(data.suggested_follow_ups || data.suggested_questions);
       }
       console.log("\u{1F3AF} Final responseText length:", responseText.length);
       console.log("\u{1F3AF} Final responseText preview:", responseText.substring(0, 100));
@@ -417,13 +575,13 @@ Please check your API endpoint configuration.`
               </div>
               <div class="message-content">
                 <div class="message-text">${unsafeHTML(this.formatMessageContent(msg.content))}</div>
-                ${msg.role === "assistant" && msg.faqs && msg.faqs.length > 0 ? html`
+                ${msg.role === "assistant" && this.showRelatedFaqs && msg.faqs && msg.faqs.length > 0 ? html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
                     <ul class="faq-list">
                       ${msg.faqs.map((faq) => html`
                         <li class="faq-item-static">
-                          ${faq.question}
+                          ${faq.Question}
                         </li>
                       `)}
                     </ul>
@@ -435,7 +593,7 @@ Please check your API endpoint configuration.`
                     <ul class="faq-list">
                       ${msg.suggestedQuestions.map((question) => html`
                         <li class="faq-item" @click=${() => this.handleFAQClick(question)}>
-                          ${question}
+                          ${question.question_text}
                         </li>
                       `)}
                     </ul>
@@ -601,9 +759,12 @@ AIChat.styles = css`
     }
 
     .widget-button-icon {
-      width: auto;
-      height: auto;
-      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      max-width: 60px;
+      max-height: 60px;
+      object-fit: contain;
+      border-radius: 50%;
     }
 
     .widget-window {
@@ -1296,7 +1457,10 @@ AIChat.properties = {
   userMessageBg: { type: String, attribute: "user-message-bg" },
   botMessageBg: { type: String, attribute: "bot-message-bg" },
   welcomeMessage: { type: String, attribute: "welcome-message" },
-  welcomeSubtitle: { type: String, attribute: "welcome-subtitle" }
+  welcomeSubtitle: { type: String, attribute: "welcome-subtitle" },
+  initialQuestionsUrl: { type: String, attribute: "initial-questions-url" },
+  language: { type: String, attribute: "language" },
+  showRelatedFaqs: { type: Boolean, attribute: "show-related-faqs" }
 };
 __decorateClass([
   state()