@ihoomanai/chat-widget 2.5.12 → 2.5.13

package/src/widget.ts

@@ -370,9 +370,10 @@ function generateStyles(): string {
     .ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
     .ihooman-preset-questions { padding: 10px 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: 6px; border: 1px solid ${borderColor}; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'}; color: ${textColor}; font-size: 12px; font-weight: 500; 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: 12px; flex-shrink: 0; }
+    .ihooman-preset-questions.hidden { display: none !important; }
+    .ihooman-widget .ihooman-preset-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 12px !important; border-radius: 6px !important; border: 1px solid ${borderColor} !important; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'} !important; color: ${textColor} !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important; }
+    .ihooman-widget .ihooman-preset-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} !important; border-color: ${primaryColor} !important; }
+    .ihooman-widget .ihooman-preset-btn .icon { font-size: 12px !important; flex-shrink: 0 !important; }
     @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; } }
   `;
 }
@@ -660,6 +661,9 @@ function renderPresetQuestions(): void {
  * Handle preset question click - send the question as a message
  */
 function handlePresetQuestionClick(questionText: string): void {
+  // Hide preset questions immediately
+  hidePresetQuestions();
+  
   // Add the question as a user message
   addMessage(questionText, 'user');
   
@@ -668,11 +672,6 @@ function handlePresetQuestionClick(questionText: string): void {
   
   // 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';
-  }
 }
 
 /**
@@ -1112,6 +1111,9 @@ function handleSendClick(): void {
   const content = elements.input?.value.trim();
   if (!content) return;
 
+  // Hide preset questions after user sends any message
+  hidePresetQuestions();
+
   if (elements.input) {
     elements.input.value = '';
     elements.input.style.height = 'auto';
@@ -1125,6 +1127,15 @@ function handleSendClick(): void {
   sendMessageToServer(content);
 }
 
+/**
+ * Hide preset questions
+ */
+function hidePresetQuestions(): void {
+  if (elements.presetQuestions) {
+    elements.presetQuestions.classList.add('hidden');
+  }
+}
+
 /**
  * Send message to the server
  * Uses WebSocket if connected, otherwise falls back to REST API