keystone-design-bootstrap 1.0.39 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/components/ChatWidget.tsx

@@ -7,7 +7,7 @@ import { cx } from '../../utils/cx';
 
 interface Message {
   id: string;
-  body: string | null;
+  body: string;
   sender_type: 'contact' | 'agent' | 'human';
   sender_display_name: string;
   created_at: string;
@@ -112,36 +112,32 @@ export function ChatWidget({
   // Poll for agent reply (simpler than WebSockets for public widget)
   const pollForAgentReply = () => {
     setWaitingForReply(true);
-    
-    const initialCount = messages.length;
+
     let attempts = 0;
     const maxAttempts = 30; // 30 seconds max
-    
-    console.log(`[ChatWidget] Starting poll for agent reply (initial count: ${initialCount})`);
-    
+
     const pollInterval = setInterval(async () => {
       attempts++;
-      
+
       try {
         const newMessages = await loadMessages();
-        console.log(`[ChatWidget] Poll attempt ${attempts}: got ${newMessages.length} messages (initial: ${initialCount})`);
-        
-        // Check if we got a new agent message with actual content (ignore pending placeholder with empty body)
-        if (newMessages.length > initialCount) {
-          const latestMessage = newMessages[newMessages.length - 1];
-          console.log(`[ChatWidget] Poll attempt ${attempts}: latest sender_type=${latestMessage.sender_type}, body=${latestMessage.body != null ? `${String(latestMessage.body).substring(0, 50)}` : 'null'}`);
 
-          if (latestMessage.sender_type === 'agent' && (latestMessage.body != null && String(latestMessage.body).trim() !== '')) {
-            console.log('[ChatWidget] ✓ Received agent reply with content');
-            clearInterval(pollInterval);
-            setWaitingForReply(false);
-            setIsLoading(false);
-          }
+        // Clear as soon as the latest message is an agent reply with content (don't rely on count increase — can fail at list cap or with optimistic updates)
+        const latest = newMessages[newMessages.length - 1];
+        const hasAgentReplyWithBody =
+          latest?.sender_type === 'agent' &&
+          latest?.body != null &&
+          String(latest.body).trim() !== '';
+
+        if (hasAgentReplyWithBody) {
+          clearInterval(pollInterval);
+          setWaitingForReply(false);
+          setIsLoading(false);
+          return;
         }
-        
+
         // Stop polling after max attempts
         if (attempts >= maxAttempts) {
-          console.warn('[ChatWidget] ⚠ Polling timeout - no reply received after 30s');
           clearInterval(pollInterval);
           setWaitingForReply(false);
           setIsLoading(false);
@@ -188,8 +184,7 @@ export function ChatWidget({
         
         // Message sent successfully
         if (result.data?.job_id) {
-          // Sync with server so outbound message is in the list, then poll for reply
-          await loadMessages();
+          // Job is processing - poll for the reply
           pollForAgentReply();
         } else if (result.data?.status === 'agent_unavailable' || result.data?.status === 'no_auto_reply') {
           // No agent reply expected
@@ -310,14 +305,10 @@ export function ChatWidget({
                 Start a conversation! We're here to help.
               </li>
             )}
-            {/* Don't show pending agent messages (empty body) - keeps typing indicator until real reply */}
-            {(() => {
-              const toShow = messages.filter(
-                (m) => m.sender_type !== 'agent' || (m.body != null && String(m.body).trim() !== '')
-              );
-              return toShow.map((message, index) => {
+            
+            {messages.map((message, index) => {
               const isUser = message.sender_type === 'contact';
-              const prevMessage = index > 0 ? toShow[index - 1] : null;
+              const prevMessage = index > 0 ? messages[index - 1] : null;
               const showAvatar = !isUser && (!prevMessage || prevMessage.sender_type === 'contact');
               
               return (
@@ -374,13 +365,12 @@ export function ChatWidget({
                           : "rounded-tl-none bg-secondary text-primary ring-secondary"
                       )}
                     >
-                      {message.body ?? ''}
+                      {message.body}
                     </div>
                   </article>
                 </li>
               );
-            });
-            })()}
+            })}
             
             {/* Typing indicator */}
             {waitingForReply && (