浏览代码

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 天之前
父节点
当前提交
eb967cd7b5
共有 1 个文件被更改,包括 19 次插入2 次删除
  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