@a.izzuddin/ai-chat 0.2.10 → 0.2.13

package/custom-elements.json

@@ -70,11 +70,6 @@
       "kind": "javascript-module",
       "path": "dist/index.js",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "faqs",
-          "default": "void 0"
-        },
         {
           "kind": "variable",
           "name": "suggestedQuestions",
@@ -706,6 +701,36 @@
               "default": "''",
               "attribute": "welcome-subtitle"
             },
+            {
+              "kind": "field",
+              "name": "initialQuestionsUrl",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "initial-questions-url"
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "attribute": "language"
+            },
+            {
+              "kind": "field",
+              "name": "showRelatedFaqs",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "show-related-faqs"
+            },
             {
               "kind": "field",
               "name": "messages",
@@ -846,6 +871,25 @@
               "name": "scrollToBottom",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "normalizeSuggestedQuestions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SuggestedQuestion[] | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "questions",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Normalize suggested questions - converts string arrays to SuggestedQuestion objects"
+            },
             {
               "kind": "method",
               "name": "handleInput",
@@ -867,7 +911,20 @@
                 {
                   "name": "question",
                   "type": {
-                    "text": "string"
+                    "text": "SuggestedQuestion"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSuggestedQuestionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "question",
+                  "type": {
+                    "text": "SuggestedQuestion"
                   }
                 }
               ]
@@ -1050,6 +1107,30 @@
               },
               "default": "''",
               "fieldName": "welcomeSubtitle"
+            },
+            {
+              "name": "initial-questions-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "initialQuestionsUrl"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "fieldName": "language"
+            },
+            {
+              "name": "show-related-faqs",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "showRelatedFaqs"
             }
           ],
           "superclass": {

package/dist/index.d.mts

@@ -3,15 +3,21 @@ import * as lit from 'lit';
 import { LitElement, PropertyValues } from 'lit';
 
 interface FAQ {
-    "no.": string;
-    question: string;
+    No: string;
+    Question: string;
+}
+interface SuggestedQuestion {
+    id?: number;
+    question_type?: string;
+    question_text: string;
+    category?: string;
 }
 interface Message {
     id: string;
     role: 'user' | 'assistant';
     content: string;
     faqs?: FAQ[];
-    suggestedQuestions?: string[];
+    suggestedQuestions?: SuggestedQuestion[];
 }
 /**
  * AI Chat Web Component
@@ -70,6 +76,9 @@ declare class AIChat extends LitElement {
     botMessageBg: string;
     welcomeMessage: string;
     welcomeSubtitle: string;
+    initialQuestionsUrl: string;
+    language: string;
+    showRelatedFaqs: boolean;
     private messages;
     private input;
     private isLoading;
@@ -141,6 +150,18 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        initialQuestionsUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        language: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        showRelatedFaqs: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
@@ -155,11 +176,16 @@ declare class AIChat extends LitElement {
     private loadMessagesFromStorage;
     private clearMessagesFromStorage;
     private formatMessageContent;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
+    /**
+     * Normalize suggested questions - converts string arrays to SuggestedQuestion objects
+     */
+    private normalizeSuggestedQuestions;
     private handleInput;
     private handleFAQClick;
+    private handleSuggestedQuestionClick;
     private handleSubmit;
     private renderChatUI;
     render(): lit_html.TemplateResult<1>;

package/dist/index.d.ts

@@ -3,15 +3,21 @@ import * as lit from 'lit';
 import { LitElement, PropertyValues } from 'lit';
 
 interface FAQ {
-    "no.": string;
-    question: string;
+    No: string;
+    Question: string;
+}
+interface SuggestedQuestion {
+    id?: number;
+    question_type?: string;
+    question_text: string;
+    category?: string;
 }
 interface Message {
     id: string;
     role: 'user' | 'assistant';
     content: string;
     faqs?: FAQ[];
-    suggestedQuestions?: string[];
+    suggestedQuestions?: SuggestedQuestion[];
 }
 /**
  * AI Chat Web Component
@@ -70,6 +76,9 @@ declare class AIChat extends LitElement {
     botMessageBg: string;
     welcomeMessage: string;
     welcomeSubtitle: string;
+    initialQuestionsUrl: string;
+    language: string;
+    showRelatedFaqs: boolean;
     private messages;
     private input;
     private isLoading;
@@ -141,6 +150,18 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        initialQuestionsUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        language: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        showRelatedFaqs: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
@@ -155,11 +176,16 @@ declare class AIChat extends LitElement {
     private loadMessagesFromStorage;
     private clearMessagesFromStorage;
     private formatMessageContent;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
+    /**
+     * Normalize suggested questions - converts string arrays to SuggestedQuestion objects
+     */
+    private normalizeSuggestedQuestions;
     private handleInput;
     private handleFAQClick;
+    private handleSuggestedQuestionClick;
     private handleSubmit;
     private renderChatUI;
     render(): lit_html.TemplateResult<1>;

package/dist/index.js

@@ -16,7 +16,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";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -37,6 +37,9 @@ exports.AIChat = class AIChat extends lit.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;
@@ -80,29 +83,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) {
@@ -186,22 +198,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) {
@@ -220,14 +269,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();
@@ -276,14 +432,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);
@@ -320,7 +476,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...");
@@ -328,7 +485,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;
@@ -341,7 +499,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");
@@ -350,7 +508,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));
@@ -419,13 +577,13 @@ Please check your API endpoint configuration.`
               </div>
               <div class="message-content">
                 <div class="message-text">${unsafeHtml_js.unsafeHTML(this.formatMessageContent(msg.content))}</div>
-                ${msg.role === "assistant" && msg.faqs && msg.faqs.length > 0 ? lit.html`
+                ${msg.role === "assistant" && this.showRelatedFaqs && msg.faqs && msg.faqs.length > 0 ? lit.html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
                     <ul class="faq-list">
                       ${msg.faqs.map((faq) => lit.html`
                         <li class="faq-item-static">
-                          ${faq.question}
+                          ${faq.Question}
                         </li>
                       `)}
                     </ul>
@@ -437,7 +595,7 @@ Please check your API endpoint configuration.`
                     <ul class="faq-list">
                       ${msg.suggestedQuestions.map((question) => lit.html`
                         <li class="faq-item" @click=${() => this.handleFAQClick(question)}>
-                          ${question}
+                          ${question.question_text}
                         </li>
                       `)}
                     </ul>
@@ -603,9 +761,12 @@ exports.AIChat.styles = lit.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 {
@@ -1298,7 +1459,10 @@ exports.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([
   decorators_js.state()