Let visitors type a follow-up while the Assistant is answering (RND-11789) (#4377)

Co-authored-by: Claude <noreply@anthropic.com>

Author: zenoachtig

.changeset/assistant-type-while-answering.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Assistant: you can now send follow-up questions while an answer is still being written. Each one appears as your own message with a "Queued" badge (hover for when it will send, × to cancel), and they're sent automatically one at a time as each answer completes.

packages/gitbook/src/components/AI/useAIChat.tsx

@@ -123,6 +123,14 @@ export type AIChatState = {
      * this value (seeding its editable content) and then clears it back to an empty string.
      */
     draft: string;
+
+    /**
+     * Follow-ups the visitor submitted while a previous turn was still streaming. They are held
+     * here and sent automatically, one at a time in submission order, as each answer finishes
+     * (see the flush in `streamResponse`), so submitting mid-stream isn't lost. Empty when
+     * nothing is queued.
+     */
+    queuedMessages: string[];
 };
 
 export type AIChatEvent =
@@ -158,6 +166,8 @@ export type AIChatController = {
     focus: () => void;
     /** Pre-fill the chat input with draft text, without sending it. */
     setDraft: (draft: string) => void;
+    /** Remove a follow-up queued to send after the current answer finishes, by its queue index. */
+    cancelQueuedMessage: (index: number) => void;
     /** Register an event listener */
     on: <T extends AIChatEvent['type']>(
         event: T,
@@ -182,6 +192,7 @@ const globalState = zustand.create<AIChatState>(() => {
         initialQuery: null,
         references: [],
         draft: '',
+        queuedMessages: [],
     };
 });
 
@@ -257,6 +268,9 @@ export function AIChatProvider(props: {
         notify(eventsRef.current.get('close'), {});
     }, [setSearchState]);
 
+    // Lets `streamResponse` flush a queued follow-up via `onPostMessage`, which is defined later.
+    const postMessageRef = React.useRef<((input: { message: string }) => void) | null>(null);
+
     // Stream a message with the AI backend
     const streamResponse = React.useCallback(
         async (input: {
@@ -512,6 +526,15 @@ export function AIChatProvider(props: {
                         loading: false,
                         error: false,
                     }));
+
+                    // Turn settled: send the next queued follow-up (oldest first). Held back while a
+                    // control is pending, since posting would throw; it flushes after that resolves.
+                    const { queuedMessages, control: activeControl } = globalState.getState();
+                    const [next, ...rest] = queuedMessages;
+                    if (next !== undefined && !activeControl) {
+                        globalState.setState((state) => ({ ...state, queuedMessages: rest }));
+                        postMessageRef.current?.({ message: next });
+                    }
                 }
             } catch (error) {
                 console.error('Error streaming AI response', error);
@@ -545,8 +568,12 @@ export function AIChatProvider(props: {
                 throw new Error("We can't post a message when a control is active");
             }
 
-            // Ignore duplicates while a previous turn is still streaming
+            // Still streaming: queue this follow-up instead of dropping it (flushed in order in `streamResponse`).
             if (responding) {
+                globalState.setState((state) => ({
+                    ...state,
+                    queuedMessages: [...state.queuedMessages, input.message],
+                }));
                 return;
             }
 
@@ -607,6 +634,21 @@ export function AIChatProvider(props: {
         [setSearchState, siteSpaceId, trackEvent, streamResponse]
     );
 
+    // Keep the ref current so `streamResponse` can flush a queued follow-up via the latest callback.
+    postMessageRef.current = onPostMessage;
+
+    // Remove a follow-up queued while the assistant is still answering (the × on the affordance).
+    const onCancelQueuedMessage = React.useCallback((index: number) => {
+        globalState.setState((state) =>
+            index < 0 || index >= state.queuedMessages.length
+                ? state
+                : {
+                      ...state,
+                      queuedMessages: state.queuedMessages.filter((_, i) => i !== index),
+                  }
+        );
+    }, []);
+
     // Clear the conversation and reset ask parameter
     const onClear = React.useCallback(() => {
         globalState.setState((state) => ({
@@ -621,6 +663,7 @@ export function AIChatProvider(props: {
             error: false,
             initialQuery: null,
             references: [],
+            queuedMessages: [],
         }));
 
         // Reset ask parameter to empty string (keeps chat open but clears content)
@@ -704,6 +747,7 @@ export function AIChatProvider(props: {
             clearReferences: onClearReferences,
             focus: onFocus,
             setDraft: onSetDraft,
+            cancelQueuedMessage: onCancelQueuedMessage,
             on: onEvent,
         };
     }, [
@@ -716,6 +760,7 @@ export function AIChatProvider(props: {
         onClearReferences,
         onFocus,
         onSetDraft,
+        onCancelQueuedMessage,
         onEvent,
     ]);
 

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -35,6 +35,7 @@ import { AIChatExpandButton } from './AIChatExpandButton';
 import { AIChatIcon } from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
 import { AIChatMessages } from './AIChatMessages';
+import { AIChatQueuedMessage } from './AIChatQueuedMessage';
 import { AIChatResizeHandle } from './AIChatResizeHandle';
 import AIChatSuggestedQuestions from './AIChatSuggestedQuestions';
 
@@ -119,6 +120,7 @@ export function AIChat() {
                             chat={chat}
                             suggestions={config.suggestions}
                             trademark={config.trademark}
+                            assistantName={config.assistantName}
                         />
                     </EmbeddableFrameBody>
                 </EmbeddableFrameMain>
@@ -207,14 +209,17 @@ export function AIChatBody(props: {
     welcomeMessage?: string;
     suggestions?: string[];
     trademark?: boolean;
+    /** Custom assistant name override; falls back to the branded/unbranded default name. */
+    assistantName?: string;
     greeting?: {
         title: string;
         subtitle: string;
     };
 }) {
-    const { chatController, chat, suggestions, greeting, trademark } = props;
+    const { chatController, chat, suggestions, greeting, trademark, assistantName } = props;
 
     const language = useLanguage();
+    const resolvedAssistantName = assistantName ?? getAIChatName(language, trademark ?? true);
     const now = useNow(60 * 60 * 1000); // Refresh every hour for greeting
 
     const isEmpty = !chat.messages.length;
@@ -280,13 +285,24 @@ export function AIChatBody(props: {
             </ScrollContainer>
 
             <div className="flex max-h-3/4 min-h-0 flex-col gap-2 not-embed:px-4 pb-4">
+                {!chat.error &&
+                    chat.queuedMessages.map((message, index) => (
+                        <AIChatQueuedMessage
+                            // Queue order is stable and items carry no local state, so the index is a
+                            // safe key here.
+                            key={index}
+                            message={message}
+                            assistantName={resolvedAssistantName}
+                            onRemove={() => chatController.cancelQueuedMessage(index)}
+                        />
+                    ))}
                 {/* Display an error banner when something went wrong. */}
                 {chat.error ? <AIChatError chatController={chatController} /> : null}
 
                 {chat.control ? <AIChatControl control={chat.control} /> : null}
                 <AIChatInput
                     responding={chat.responding}
-                    disabled={chat.responding || chat.error}
+                    disabled={chat.error}
                     onSubmit={(value) => {
                         chatController.postMessage({ message: value });
                     }}

packages/gitbook/src/components/AIChat/AIChatInput.tsx

@@ -11,7 +11,8 @@ import { AIChatReferenceChips } from './AIChatReferenceChips';
 export function AIChatInput(props: {
     disabled?: boolean;
     /**
-     * When true, the input is disabled
+     * When true, the assistant is streaming an answer. The field stays editable and submitting a
+     * follow-up queues it (sent automatically once the answer finishes) rather than being blocked.
      */
     responding: boolean;
     onSubmit: (value: string) => void;
@@ -110,7 +111,7 @@ export function AIChatInput(props: {
                       }
                     : undefined
             }
-            disabled={disabled || responding || chat.control !== null}
+            disabled={disabled || chat.control !== null}
             aria-busy={responding}
             ref={inputRef}
             header={

packages/gitbook/src/components/AIChat/AIChatQueuedMessage.tsx

@@ -0,0 +1,44 @@
+import { t, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
+import { Icon } from '@gitbook/icons';
+import { Button, Tooltip } from '../primitives';
+
+/**
+ * Shows a follow-up the visitor submitted while the assistant was still answering. It mirrors a
+ * sent user message — a right-aligned, tinted bubble — so it reads as "theirs", with a clock icon
+ * marking it as pending and a tooltip (on the whole bubble) explaining it will be sent once the
+ * current answer finishes. The × beside the bubble drops it from the queue.
+ */
+export function AIChatQueuedMessage(props: {
+    message: string;
+    assistantName: string;
+    onRemove: () => void;
+}) {
+    const { message, assistantName, onRemove } = props;
+    const language = useLanguage();
+
+    return (
+        <div className="flex max-w-[80%] origin-top-right animate-scale-in items-center gap-1 self-end">
+            <Tooltip label={t(language, 'ai_chat_queued_message', assistantName)}>
+                <div
+                    className={tcls(
+                        'flex min-w-0 items-center gap-2 circular-corners:rounded-2xl rounded-corners:rounded-md',
+                        'bg-primary-solid/1 px-4 py-2 text-tint'
+                    )}
+                >
+                    <Icon icon="clock" className="size-3.5 shrink-0 text-tint" />
+                    <span className="min-w-0 break-words">{message}</span>
+                </div>
+            </Tooltip>
+            <Button
+                variant="blank"
+                size="small"
+                iconOnly
+                icon="xmark"
+                label={t(language, 'clear')}
+                onClick={onRemove}
+                className="shrink-0 text-tint"
+            />
+        </div>
+    );
+}

packages/gitbook/src/components/Embeddable/EmbeddableAIChat.tsx

@@ -102,6 +102,7 @@ export function EmbeddableAIChat(props: EmbeddableAIChatProps) {
                             suggestions={siteConfig.suggestions}
                             greeting={siteConfig.greeting}
                             trademark={trademark}
+                            assistantName={siteConfig.assistantName}
                         />
                     </LinkContext>
                 </EmbeddableFrameBody>

packages/gitbook/src/components/primitives/Input.tsx

@@ -195,7 +195,8 @@ export const Input = React.forwardRef<InputElement, InputProps>((props, passedRe
     };
 
     const inputClassName = tcls(
-        'peer -m-2 max-h-64 grow shrink resize-none leading-normal text-left outline-none placeholder:text-tint/8 placeholder-shown:text-ellipsis aria-busy:cursor-progress',
+        // `aria-busy` must not change the cursor: a busy field can still be editable.
+        'peer -m-2 max-h-64 grow shrink resize-none leading-normal text-left outline-none placeholder:text-tint/8 placeholder-shown:text-ellipsis',
         sizes[sizing].input
     );
 
@@ -228,7 +229,6 @@ export const Input = React.forwardRef<InputElement, InputProps>((props, passedRe
                           'focus-within:border-primary-hover focus-within:depth-subtle:shadow-lg focus-within:shadow-primary-subtle focus-within:ring-2 hover:not-has-[button:hover]:cursor-text hover:not-has-[button:hover]:border-tint-hover hover:not-has-[button:hover]:not-focus-within:bg-tint-subtle depth-subtle:hover:not-has-[button:hover]:not-focus-within:shadow-md focus-within:hover:not-has-[button:hover]:border-primary-hover',
                       ],
                 multiline ? 'flex-col' : 'flex-row',
-                ariaBusy ? 'cursor-progress' : '',
                 sizes[sizing].container,
                 className
             )}

packages/gitbook/src/intl/translations/ar.ts

@@ -133,6 +133,7 @@ export const ar: TranslationLanguage = {
     ai_chat_context_previous_messages: 'الرسائل في محادثتك',
     ai_chat_context_disclaimer: 'قد تحتوي إجابات الذكاء الاصطناعي على أخطاء.',
     ai_chat_input_placeholder: 'اسأل أو ابحث أو اشرح...',
+    ai_chat_queued_message: 'سيتم إرسال هذه الرسالة بعد أن ينتهي ${1}',
     send: 'إرسال',
     actions: 'إجراءات',
     ai_chat_suggested_questions_title: 'أسئلة مقترحة',

packages/gitbook/src/intl/translations/bg.ts

@@ -137,6 +137,7 @@ export const bg: TranslationLanguage = {
     ai_chat_context_previous_messages: 'Съобщения във вашия разговор',
     ai_chat_context_disclaimer: 'AI отговорите може да съдържат грешки.',
     ai_chat_input_placeholder: 'Попитайте, потърсете или обяснете...',
+    ai_chat_queued_message: 'Това съобщение ще бъде изпратено, след като ${1} приключи',
     send: 'Изпращане',
     actions: 'Действия',
     ai_chat_suggested_questions_title: 'Предложени въпроси',

packages/gitbook/src/intl/translations/cs.ts

@@ -135,6 +135,7 @@ export const cs: TranslationLanguage = {
     ai_chat_context_previous_messages: 'Zprávy ve vaší konverzaci',
     ai_chat_context_disclaimer: 'Odpovědi AI mohou obsahovat chyby.',
     ai_chat_input_placeholder: 'Zeptejte se, hledejte nebo vysvětlete...',
+    ai_chat_queued_message: 'Tato zpráva se odešle, až ${1} dokončí odpověď',
     send: 'Odeslat',
     actions: 'Akce',
     ai_chat_suggested_questions_title: 'Navrhované otázky',