keystone-design-bootstrap 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "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;
+  body: string | null;
   sender_type: 'contact' | 'agent' | 'human';
   sender_display_name: string;
   created_at: string;
@@ -126,13 +126,13 @@ export function ChatWidget({
         const newMessages = await loadMessages();
         console.log(`[ChatWidget] Poll attempt ${attempts}: got ${newMessages.length} messages (initial: ${initialCount})`);
         
-        // Check if we got a new agent message
+        // 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] New message detected: sender_type=${latestMessage.sender_type}, body=${latestMessage.body?.substring(0, 50)}`);
-          
-          if (latestMessage.sender_type === 'agent') {
-            console.log('[ChatWidget] ✓ Received agent reply!');
+          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);
@@ -188,7 +188,8 @@ export function ChatWidget({
         
         // Message sent successfully
         if (result.data?.job_id) {
-          // Job is processing - poll for the reply
+          // Sync with server so outbound message is in the list, then poll for reply
+          await loadMessages();
           pollForAgentReply();
         } else if (result.data?.status === 'agent_unavailable' || result.data?.status === 'no_auto_reply') {
           // No agent reply expected
@@ -309,10 +310,14 @@ export function ChatWidget({
                 Start a conversation! We're here to help.
               </li>
             )}
-            
-            {messages.map((message, index) => {
+            {/* 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) => {
               const isUser = message.sender_type === 'contact';
-              const prevMessage = index > 0 ? messages[index - 1] : null;
+              const prevMessage = index > 0 ? toShow[index - 1] : null;
               const showAvatar = !isUser && (!prevMessage || prevMessage.sender_type === 'contact');
               
               return (
@@ -369,12 +374,13 @@ export function ChatWidget({
                           : "rounded-tl-none bg-secondary text-primary ring-secondary"
                       )}
                     >
-                      {message.body}
+                      {message.body ?? ''}
                     </div>
                   </article>
                 </li>
               );
-            })}
+            });
+            })()}
             
             {/* Typing indicator */}
             {waitingForReply && (