@ihoomanai/chat-widget 2.5.6 → 2.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihoomanai/chat-widget",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "type": "module",
   "description": "Universal chat support widget for any website - secure Widget ID based initialization",
   "main": "dist/index.cjs.js",

package/src/types.ts

@@ -60,6 +60,18 @@ export interface BrandingConfig {
   poweredBy?: boolean;
 }
 
+/**
+ * Preset question for quick access
+ */
+export interface PresetQuestion {
+  /** Unique identifier */
+  id: string;
+  /** Question text displayed to users */
+  text: string;
+  /** Optional emoji icon */
+  icon?: string;
+}
+
 /**
  * Main widget configuration options
  */

package/src/widget.ts

@@ -111,6 +111,7 @@ interface WidgetElements {
   historyList?: HTMLElement;
   historyNewBtn?: HTMLButtonElement;
   messages?: HTMLElement;
+  presetQuestions?: HTMLElement;
   input?: HTMLTextAreaElement;
   sendBtn?: HTMLButtonElement;
   attachBtn?: HTMLButtonElement | null;
@@ -367,6 +368,11 @@ function generateStyles(): string {
     .ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
     .ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
+    .ihooman-preset-questions { padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
+    .ihooman-preset-questions:empty { display: none; }
+    .ihooman-preset-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 16px; border: 1px solid ${borderColor}; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'}; color: ${textColor}; font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
+    .ihooman-preset-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; border-color: ${primaryColor}; }
+    .ihooman-preset-btn .icon { font-size: 14px; }
     @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; max-height: none; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } }
   `;
 }
@@ -415,6 +421,7 @@ function createWidget(): void {
         <div class="ihooman-chat-view">
           <div class="ihooman-status-bar"></div>
           <div class="ihooman-messages" role="log" aria-live="polite"></div>
+          <div class="ihooman-preset-questions"></div>
           <div class="ihooman-input-area">
             <div class="ihooman-input-wrapper">
               ${config.enableFileUpload ? `<button class="ihooman-input-btn attach" title="Attach file">${icons.attach}</button><input type="file" class="ihooman-file-input">` : ''}
@@ -463,6 +470,7 @@ function createWidget(): void {
     historyList: widget.querySelector('.ihooman-history-list') as HTMLElement,
     historyNewBtn: widget.querySelector('.ihooman-history-new') as HTMLButtonElement,
     messages: widget.querySelector('.ihooman-messages') as HTMLElement,
+    presetQuestions: widget.querySelector('.ihooman-preset-questions') as HTMLElement,
     input: widget.querySelector('.ihooman-input') as HTMLTextAreaElement,
     sendBtn: widget.querySelector('.ihooman-input-btn.send') as HTMLButtonElement,
     attachBtn: widget.querySelector('.ihooman-input-btn.attach') as HTMLButtonElement | null,
@@ -479,6 +487,9 @@ function createWidget(): void {
 
   // Set up event listeners
   setupEventListeners();
+  
+  // Render preset questions
+  renderPresetQuestions();
 }
 
 /**
@@ -619,6 +630,54 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   return message;
 }
 
+/**
+ * Render preset questions in the widget
+ */
+function renderPresetQuestions(): void {
+  if (!elements.presetQuestions || presetQuestions.length === 0) {
+    if (elements.presetQuestions) {
+      elements.presetQuestions.innerHTML = '';
+    }
+    return;
+  }
+
+  elements.presetQuestions.innerHTML = presetQuestions.map(q => `
+    <button class="ihooman-preset-btn" data-question-id="${escapeHtml(q.id)}" data-question-text="${escapeHtml(q.text)}">
+      ${q.icon ? `<span class="icon">${escapeHtml(q.icon)}</span>` : ''}
+      <span>${escapeHtml(q.text)}</span>
+    </button>
+  `).join('');
+
+  // Add click handlers
+  elements.presetQuestions.querySelectorAll('.ihooman-preset-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const questionText = (btn as HTMLElement).dataset.questionText;
+      if (questionText) {
+        handlePresetQuestionClick(questionText);
+      }
+    });
+  });
+}
+
+/**
+ * Handle preset question click - send the question as a message
+ */
+function handlePresetQuestionClick(questionText: string): void {
+  // Add the question as a user message
+  addMessage(questionText, 'user');
+  
+  // Show typing indicator
+  showTyping();
+  
+  // Send to server
+  sendMessageToServer(questionText);
+  
+  // Hide preset questions after first use (optional - can be removed if you want them to persist)
+  if (elements.presetQuestions) {
+    elements.presetQuestions.style.display = 'none';
+  }
+}
+
 /**
  * Handle escalation action button clicks
  */
@@ -1618,6 +1677,11 @@ async function fetchWidgetConfig(widgetId: string, serverUrl: string): Promise<{
   }
 }
 
+/**
+ * Preset questions from server config
+ */
+let presetQuestions: Array<{ id: string; text: string; icon?: string }> = [];
+
 /**
  * Apply server configuration to local config
  */
@@ -1630,6 +1694,7 @@ function applyServerConfig(serverConfig: {
   position: string;
   behavior: Record<string, boolean>;
   branding: Record<string, unknown>;
+  presetQuestions?: Array<{ id: string; text: string; icon?: string }>;
 }): void {
   // Apply basic settings
   config.title = serverConfig.title || config.title;
@@ -1664,6 +1729,11 @@ function applyServerConfig(serverConfig: {
     config.avatarUrl = (serverConfig.branding.avatarUrl as string) || config.avatarUrl;
     config.poweredBy = serverConfig.branding.poweredBy as boolean ?? config.poweredBy;
   }
+
+  // Store preset questions
+  if (serverConfig.presetQuestions && Array.isArray(serverConfig.presetQuestions)) {
+    presetQuestions = serverConfig.presetQuestions;
+  }
 }
 
 /**