@a.izzuddin/ai-chat 0.2.11 → 0.2.14

package/custom-elements.json

@@ -74,11 +74,6 @@
           "kind": "variable",
           "name": "suggestedQuestions",
           "default": "void 0"
-        },
-        {
-          "kind": "variable",
-          "name": "faqs",
-          "default": "void 0"
         }
       ],
       "exports": []
@@ -716,6 +711,26 @@
               "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": "false",
+              "attribute": "show-related-faqs"
+            },
             {
               "kind": "field",
               "name": "messages",
@@ -856,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",
@@ -877,7 +911,20 @@
                 {
                   "name": "question",
                   "type": {
-                    "text": "string"
+                    "text": "SuggestedQuestion"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSuggestedQuestionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "question",
+                  "type": {
+                    "text": "SuggestedQuestion"
                   }
                 }
               ]
@@ -1068,6 +1115,22 @@
               },
               "default": "''",
               "fieldName": "initialQuestionsUrl"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "fieldName": "language"
+            },
+            {
+              "name": "show-related-faqs",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showRelatedFaqs"
             }
           ],
           "superclass": {

package/dist/index.d.mts

@@ -6,12 +6,18 @@ interface FAQ {
     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
@@ -71,6 +77,8 @@ declare class AIChat extends LitElement {
     welcomeMessage: string;
     welcomeSubtitle: string;
     initialQuestionsUrl: string;
+    language: string;
+    showRelatedFaqs: boolean;
     private messages;
     private input;
     private isLoading;
@@ -146,6 +154,14 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        language: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        showRelatedFaqs: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
@@ -163,8 +179,13 @@ declare class AIChat extends LitElement {
     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

@@ -6,12 +6,18 @@ interface FAQ {
     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
@@ -71,6 +77,8 @@ declare class AIChat extends LitElement {
     welcomeMessage: string;
     welcomeSubtitle: string;
     initialQuestionsUrl: string;
+    language: string;
+    showRelatedFaqs: boolean;
     private messages;
     private input;
     private isLoading;
@@ -146,6 +154,14 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        language: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        showRelatedFaqs: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
@@ -163,8 +179,13 @@ declare class AIChat extends LitElement {
     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.11";
+var VERSION = "0.2.14";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -38,6 +38,8 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.welcomeMessage = "How can I help you today?";
     this.welcomeSubtitle = "";
     this.initialQuestionsUrl = "";
+    this.language = "en";
+    this.showRelatedFaqs = false;
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -207,16 +209,29 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
       let suggestedQuestions = void 0;
       if (this.initialQuestionsUrl) {
         try {
-          const response = await fetch(this.initialQuestionsUrl);
+          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) => q.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;
+                suggestedQuestions = questionsArray.map((q) => ({
+                  question_text: q
+                }));
               }
             }
             console.log("\u2705 Processed suggested questions:", suggestedQuestions);
@@ -254,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();
@@ -310,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);
@@ -354,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...");
@@ -362,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;
@@ -375,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");
@@ -384,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));
@@ -453,7 +577,7 @@ 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">
@@ -471,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>
@@ -637,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 {
@@ -1333,7 +1460,9 @@ exports.AIChat.properties = {
   botMessageBg: { type: String, attribute: "bot-message-bg" },
   welcomeMessage: { type: String, attribute: "welcome-message" },
   welcomeSubtitle: { type: String, attribute: "welcome-subtitle" },
-  initialQuestionsUrl: { type: String, attribute: "initial-questions-url" }
+  initialQuestionsUrl: { type: String, attribute: "initial-questions-url" },
+  language: { type: String, attribute: "language" },
+  showRelatedFaqs: { type: Boolean, attribute: "show-related-faqs" }
 };
 __decorateClass([
   decorators_js.state()