Browse Source

fix: show quick reply buttons immediately without waiting for sessionId

Buttons now appear as soon as the widget opens. If the user clicks before
the session API call returns, the message is queued in pendingMessage and
sent automatically in startSession.onSuccess.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Tony T 5 ngày trước cách đây
mục cha
commit
eb967cd7b5
1 tập tin đã thay đổi với 19 bổ sung2 xóa
  1. 19 2
      client/src/components/ChatbotWidgetLive.tsx

+ 19 - 2
client/src/components/ChatbotWidgetLive.tsx

@@ -23,6 +23,7 @@ export default function ChatbotWidgetLive() {
   const [localMessages, setLocalMessages] = useState<Array<{ id: number; sender: string; content: string; createdAt: string }>>([]);
   const [isTyping, setIsTyping] = useState(false);
   const [showQuickReplies, setShowQuickReplies] = useState(true);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
   const [csatRating, setCsatRating] = useState<number | null>(null);
   const [csatHover, setCsatHover] = useState<number | null>(null);
   const [csatSubmitted, setCsatSubmitted] = useState(false);
@@ -33,6 +34,10 @@ export default function ChatbotWidgetLive() {
   const startSession = trpc.chat.startSession.useMutation({
     onSuccess: (data) => {
       setSessionId(data.sessionId);
+      if (pendingMessage) {
+        sendMessage.mutate({ sessionId: data.sessionId, content: pendingMessage });
+        setPendingMessage(null);
+      }
     },
   });
 
@@ -112,7 +117,19 @@ export default function ChatbotWidgetLive() {
   };
 
   const handleQuickReply = (reply: typeof QUICK_REPLIES[0]) => {
-    handleSend(reply.value);
+    const text = reply.value;
+    setShowQuickReplies(false);
+    setIsTyping(true);
+    isNearBottomRef.current = true;
+    setLocalMessages(prev => [...prev, {
+      id: Date.now(), sender: "visitor", content: text, createdAt: new Date().toISOString(),
+    }]);
+    if (sessionId) {
+      sendMessage.mutate({ sessionId, content: text });
+    } else {
+      // Session still starting — queue until onSuccess fires
+      setPendingMessage(text);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -208,7 +225,7 @@ export default function ChatbotWidgetLive() {
                 )}
 
                 {/* Quick reply buttons — Tidio-style */}
-                {showQuickReplies && !hasUserMessages && sessionId && (
+                {showQuickReplies && !hasUserMessages && (
                   <div className="flex flex-wrap gap-2 justify-center py-2">
                     {QUICK_REPLIES.map((reply) => (
                       <button