@sybilion/uilib 1.2.20 → 1.2.21

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, useChatOutboundPending, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -25,11 +25,13 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
+    const [localUiBusy, setLocalUiBusy] = useState(false);
     const { chats, currentChatId, setCurrentChatId, newChat, sendMessage, addMessage, removeMessageById, } = useChatsForScopeId(effectiveScopeId);
     const chat = useChat(effectiveScopeId, currentChatId);
+    const isOutboundPending = useChatOutboundPending(effectiveScopeId, currentChatId);
+    const isLoading = isOutboundPending || localUiBusy;
     const { searchParams, addSearchParams, removeSearchParams, mutateSearchParams, } = useQueryParams();
     const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-    const [isLoading, setIsLoading] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
     const [promptLinkPrefill, setPromptLinkPrefill] = useState(null);
@@ -215,7 +217,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             if (quickReplyLockRef.current)
                 return;
             quickReplyLockRef.current = true;
-            setIsLoading(true);
+            setLocalUiBusy(true);
             setUsedScriptBranchKeysByChat(prev => ({
                 ...prev,
                 [chatId]: [...new Set([...(prev[chatId] || []), branchKey])],
@@ -266,7 +268,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                     logger.error('Error resolving preset quick reply:', error);
                 }
                 finally {
-                    setIsLoading(false);
+                    setLocalUiBusy(false);
                     quickReplyLockRef.current = false;
                 }
             })();
@@ -274,7 +276,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         }
         endLocalDemoFlow(chatId);
         void (async () => {
-            setIsLoading(true);
             try {
                 await sendMessage(displayLabel);
                 onMessage?.(displayLabel);
@@ -282,9 +283,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             catch (error) {
                 logger.error('Error sending chat message:', error);
             }
-            finally {
-                setIsLoading(false);
-            }
         })();
     }, [
         currentChatId,
@@ -337,7 +335,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 if (quickReplyLockRef.current)
                     return;
                 quickReplyLockRef.current = true;
-                setIsLoading(true);
+                setLocalUiBusy(true);
                 const newAnswers = {
                     ...intake.answers,
                     [intake.scriptStepId]: message,
@@ -381,7 +379,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                         logger.error('Error advancing freeform preset script:', e);
                     }
                     finally {
-                        setIsLoading(false);
+                        setLocalUiBusy(false);
                         quickReplyLockRef.current = false;
                     }
                 })();
@@ -401,7 +399,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 }
             }
         }
-        setIsLoading(true);
         try {
             if (chatId)
                 endLocalDemoFlow(chatId);
@@ -411,9 +408,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         catch (error) {
             logger.error('Error sending chat message:', error);
         }
-        finally {
-            setIsLoading(false);
-        }
     }, [
         currentChatId,
         chat?.messages,
@@ -443,7 +437,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             await handlePromptSubmit(preset.text);
             return;
         }
-        setIsLoading(true);
+        setLocalUiBusy(true);
         try {
             if (!currentChatId)
                 return;
@@ -518,7 +512,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             logger.error('Error sending chat message:', error);
         }
         finally {
-            setIsLoading(false);
+            setLocalUiBusy(false);
         }
     };
     const activeScript = currentChatId
@@ -550,7 +544,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             return;
         const chatId = currentChatId;
         scriptAdvanceLockRef.current = true;
-        setIsLoading(true);
+        setLocalUiBusy(true);
         addMessage(chatId, MessageRole.USER, step.buttonLabel);
         void (async () => {
             try {
@@ -593,7 +587,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 logger.error('Error advancing preset script:', error);
             }
             finally {
-                setIsLoading(false);
+                setLocalUiBusy(false);
                 scriptAdvanceLockRef.current = false;
             }
         })();

package/dist/esm/contexts/chat-context.js

@@ -7,6 +7,10 @@ import { LS } from '@homecode/ui';
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 const ChatContext = createContext(undefined);
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+function outboundPendingKey(scopeId, chatSessionId) {
+    return `${scopeId}\0${chatSessionId}`;
+}
 function getCurrentChatIdKey(scopeId) {
     return `chat-current-id-${scopeId}`;
 }
@@ -86,6 +90,26 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             return {};
         return loadChatsFromLS(userSwitchKey).currentChatId;
     });
+    const [outboundPendingByKey, setOutboundPendingByKey] = useState({});
+    const beginOutboundPending = useCallback((scopeId, chatSessionId) => {
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        setOutboundPendingByKey(prev => ({
+            ...prev,
+            [key]: (prev[key] ?? 0) + 1,
+        }));
+    }, []);
+    const endOutboundPending = useCallback((scopeId, chatSessionId) => {
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        setOutboundPendingByKey(prev => {
+            const next = { ...prev };
+            const n = (next[key] ?? 0) - 1;
+            if (n <= 0)
+                delete next[key];
+            else
+                next[key] = n;
+            return next;
+        });
+    }, []);
     const getChatsForScopeId = useCallback((scopeId) => chats[scopeId] ?? [], [chats]);
     const getCurrentChatId = useCallback((scopeId) => {
         const v = currentChatId[scopeId];
@@ -211,12 +235,14 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
                 userCsvAttachment: message.userCsvAttachment,
             });
         }
+        const pendingChatSessionId = targetChatId;
+        beginOutboundPending(scopeId, pendingChatSessionId);
         try {
-            const data = await sendChatMessageFn(apiPayload, targetChatId);
-            if (data.session_id && data.session_id !== targetChatId) {
+            const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
+            if (data.session_id && data.session_id !== pendingChatSessionId) {
                 setChats(prev => {
                     const scopeChats = prev[scopeId] ?? [];
-                    const updatedChats = scopeChats.map(chat => chat.session_id === targetChatId
+                    const updatedChats = scopeChats.map(chat => chat.session_id === pendingChatSessionId
                         ? { ...chat, session_id: data.session_id }
                         : chat);
                     const chatsKey = getChatsKey(scopeId);
@@ -225,21 +251,32 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
                 });
                 setCurrentChatId(scopeId, data.session_id);
             }
-            addMessage(scopeId, data.session_id ? data.session_id : targetChatId, MessageRole.ASSISTANT, data.response);
+            addMessage(scopeId, data.session_id ? data.session_id : pendingChatSessionId, MessageRole.ASSISTANT, data.response);
             return data.response;
         }
         catch (error) {
             const errorMessage = error instanceof Error
                 ? error.message
                 : 'Sorry, I encountered an error processing your message. Please try again.';
-            addMessage(scopeId, targetChatId, MessageRole.ASSISTANT, errorMessage);
+            addMessage(scopeId, pendingChatSessionId, MessageRole.ASSISTANT, errorMessage);
             throw error;
         }
-    }, [addMessage, getCurrentChatId, sendChatMessageFn, setCurrentChatId]);
+        finally {
+            endOutboundPending(scopeId, pendingChatSessionId);
+        }
+    }, [
+        addMessage,
+        beginOutboundPending,
+        endOutboundPending,
+        getCurrentChatId,
+        sendChatMessageFn,
+        setCurrentChatId,
+    ]);
     useEffect(() => {
         if (userSwitchKey === null) {
             setChats({});
             setCurrentChatIdState({});
+            setOutboundPendingByKey({});
             return;
         }
         const loaded = loadChatsFromLS(userSwitchKey);
@@ -263,6 +300,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             getChatsForScopeId,
             getCurrentChatId,
             deleteChat,
+            outboundPendingByKey,
         }, children: children }));
 }
 const isChatEmpty = (chat) => chat?.messages.length === 0;
@@ -282,15 +320,26 @@ function useChat(scopeId, chatId) {
             null);
     }, [scopeId, chatId, getChatsForScopeId]);
 }
+function useChatOutboundPending(scopeId, chatSessionId) {
+    const { outboundPendingByKey } = useChats();
+    return useMemo(() => {
+        if (!scopeId || !chatSessionId)
+            return false;
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        return (outboundPendingByKey[key] ?? 0) > 0;
+    }, [scopeId, chatSessionId, outboundPendingByKey]);
+}
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
     const currentChatId = getCurrentChatId(scopeId);
     const currentChat = useChat(scopeId, currentChatId ?? undefined);
+    const isOutboundPending = useChatOutboundPending(scopeId, currentChatId);
     return {
         chats,
         currentChat,
         currentChatId,
+        isOutboundPending,
         setCurrentChatId: (targetId) => setCurrentChatId(scopeId, targetId),
         newChat: () => newChat(scopeId),
         addMessage: (chatId, role, text, options) => addMessage(scopeId, chatId, role, text, options),
@@ -309,4 +358,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };

package/dist/esm/index.js

@@ -4,7 +4,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { type Chat, type ChatSendMessagePayload, type UserCsvAttachment, MessageRole } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type ChatSendMessagePayload, MessageRole, type UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 export type SendChatMessageFn = (message: string, targetChatId: string) => Promise<ChatResponse>;
-export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+export type { ChatSendMessagePayload, UserCsvAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
     userCsvAttachment?: UserCsvAttachment;
 };
@@ -16,8 +16,15 @@ export interface ChatContextType {
     getChatsForScopeId: (scopeId: string) => Chat[];
     getCurrentChatId: (scopeId: string) => string | null;
     deleteChat: (scopeId: string, sessionId: string) => void;
+    /**
+     * Ref-count of in-flight `sendChatMessage` requests keyed by
+     * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
+     */
+    outboundPendingByKey: Readonly<Record<string, number>>;
 }
 declare const ChatContext: import("react").Context<ChatContextType>;
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+export declare function outboundPendingKey(scopeId: string, chatSessionId: string): string;
 export interface ChatProviderProps {
     children: ReactNode;
     /** When null, chat state is cleared (logged out). When set, only LS rows for scopes starting with `${userId}-` are loaded. */
@@ -28,10 +35,12 @@ export declare function ChatProvider({ children, userSwitchKey, sendChatMessage:
 export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
+export declare function useChatOutboundPending(scopeId: string | undefined | null, chatSessionId: string | null | undefined): boolean;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;
     currentChatId: string;
+    isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
@@ -44,6 +53,7 @@ export declare function useChatsForDataset(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;
     currentChatId: string;
+    isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -26,6 +26,7 @@ import {
 import {
   isChatEmpty,
   useChat,
+  useChatOutboundPending,
   useChatsForScopeId,
 } from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
@@ -112,6 +113,7 @@ export function useChatPanelChromeModel({
     getShellWidth,
     setChatPanelOpen,
   } = useSidebar();
+  const [localUiBusy, setLocalUiBusy] = useState(false);
   const {
     chats,
     currentChatId,
@@ -122,6 +124,11 @@ export function useChatPanelChromeModel({
     removeMessageById,
   } = useChatsForScopeId(effectiveScopeId);
   const chat = useChat(effectiveScopeId, currentChatId);
+  const isOutboundPending = useChatOutboundPending(
+    effectiveScopeId,
+    currentChatId,
+  );
+  const isLoading = isOutboundPending || localUiBusy;
 
   const {
     searchParams,
@@ -130,7 +137,6 @@ export function useChatPanelChromeModel({
     mutateSearchParams,
   } = useQueryParams();
   const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-  const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
   const [promptLinkPrefill, setPromptLinkPrefill] = useState<string | null>(
@@ -355,7 +361,7 @@ export function useChatPanelChromeModel({
       ) {
         if (quickReplyLockRef.current) return;
         quickReplyLockRef.current = true;
-        setIsLoading(true);
+        setLocalUiBusy(true);
         setUsedScriptBranchKeysByChat(prev => ({
           ...prev,
           [chatId]: [...new Set([...(prev[chatId] || []), branchKey])],
@@ -413,7 +419,7 @@ export function useChatPanelChromeModel({
           } catch (error) {
             logger.error('Error resolving preset quick reply:', error);
           } finally {
-            setIsLoading(false);
+            setLocalUiBusy(false);
             quickReplyLockRef.current = false;
           }
         })();
@@ -422,14 +428,11 @@ export function useChatPanelChromeModel({
 
       endLocalDemoFlow(chatId);
       void (async () => {
-        setIsLoading(true);
         try {
           await sendMessage(displayLabel);
           onMessage?.(displayLabel);
         } catch (error) {
           logger.error('Error sending chat message:', error);
-        } finally {
-          setIsLoading(false);
         }
       })();
     },
@@ -499,7 +502,7 @@ export function useChatPanelChromeModel({
         ) {
           if (quickReplyLockRef.current) return;
           quickReplyLockRef.current = true;
-          setIsLoading(true);
+          setLocalUiBusy(true);
           const newAnswers = {
             ...intake.answers,
             [intake.scriptStepId]: message,
@@ -544,7 +547,7 @@ export function useChatPanelChromeModel({
             } catch (e) {
               logger.error('Error advancing freeform preset script:', e);
             } finally {
-              setIsLoading(false);
+              setLocalUiBusy(false);
               quickReplyLockRef.current = false;
             }
           })();
@@ -569,15 +572,12 @@ export function useChatPanelChromeModel({
         }
       }
 
-      setIsLoading(true);
       try {
         if (chatId) endLocalDemoFlow(chatId);
         await sendMessage(message);
         onMessage?.(message);
       } catch (error) {
         logger.error('Error sending chat message:', error);
-      } finally {
-        setIsLoading(false);
       }
     },
     [
@@ -613,7 +613,7 @@ export function useChatPanelChromeModel({
       return;
     }
 
-    setIsLoading(true);
+    setLocalUiBusy(true);
     try {
       if (!currentChatId) return;
       setScriptCompleteByChatId(prev => {
@@ -683,7 +683,7 @@ export function useChatPanelChromeModel({
     } catch (error) {
       logger.error('Error sending chat message:', error);
     } finally {
-      setIsLoading(false);
+      setLocalUiBusy(false);
     }
   };
 
@@ -717,7 +717,7 @@ export function useChatPanelChromeModel({
 
     const chatId = currentChatId;
     scriptAdvanceLockRef.current = true;
-    setIsLoading(true);
+    setLocalUiBusy(true);
     addMessage(chatId, MessageRole.USER, step.buttonLabel);
 
     void (async () => {
@@ -761,7 +761,7 @@ export function useChatPanelChromeModel({
       } catch (error) {
         logger.error('Error advancing preset script:', error);
       } finally {
-        setIsLoading(false);
+        setLocalUiBusy(false);
         scriptAdvanceLockRef.current = false;
       }
     })();

package/src/contexts/chat-context.tsx

@@ -12,8 +12,8 @@ import {
   type Chat,
   type ChatSendMessagePayload,
   type Message,
-  type UserCsvAttachment,
   MessageRole,
+  type UserCsvAttachment,
 } from '#uilib/components/ui/Chat/Chat.types';
 import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
@@ -24,7 +24,10 @@ export type SendChatMessageFn = (
   targetChatId: string,
 ) => Promise<ChatResponse>;
 
-export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+export type {
+  ChatSendMessagePayload,
+  UserCsvAttachment,
+} from '#uilib/components/ui/Chat/Chat.types';
 
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
@@ -57,10 +60,20 @@ export interface ChatContextType {
   getChatsForScopeId: (scopeId: string) => Chat[];
   getCurrentChatId: (scopeId: string) => string | null;
   deleteChat: (scopeId: string, sessionId: string) => void;
+  /**
+   * Ref-count of in-flight `sendChatMessage` requests keyed by
+   * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
+   */
+  outboundPendingByKey: Readonly<Record<string, number>>;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
 
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+export function outboundPendingKey(scopeId: string, chatSessionId: string) {
+  return `${scopeId}\0${chatSessionId}`;
+}
+
 function getCurrentChatIdKey(scopeId: string) {
   return `chat-current-id-${scopeId}`;
 }
@@ -158,6 +171,35 @@ export function ChatProvider({
     return loadChatsFromLS(userSwitchKey).currentChatId;
   });
 
+  const [outboundPendingByKey, setOutboundPendingByKey] = useState<
+    Record<string, number>
+  >({});
+
+  const beginOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => ({
+        ...prev,
+        [key]: (prev[key] ?? 0) + 1,
+      }));
+    },
+    [],
+  );
+
+  const endOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => {
+        const next = { ...prev };
+        const n = (next[key] ?? 0) - 1;
+        if (n <= 0) delete next[key];
+        else next[key] = n;
+        return next;
+      });
+    },
+    [],
+  );
+
   const getChatsForScopeId = useCallback(
     (scopeId: string): Chat[] => chats[scopeId] ?? [],
     [chats],
@@ -324,19 +366,27 @@ export function ChatProvider({
       if (typeof message === 'string') {
         addMessage(scopeId, targetChatId, MessageRole.USER, message);
       } else {
-        addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
-          userCsvAttachment: message.userCsvAttachment,
-        });
+        addMessage(
+          scopeId,
+          targetChatId,
+          MessageRole.USER,
+          message.displayText,
+          {
+            userCsvAttachment: message.userCsvAttachment,
+          },
+        );
       }
 
+      const pendingChatSessionId = targetChatId;
+      beginOutboundPending(scopeId, pendingChatSessionId);
       try {
-        const data = await sendChatMessageFn(apiPayload, targetChatId);
+        const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
 
-        if (data.session_id && data.session_id !== targetChatId) {
+        if (data.session_id && data.session_id !== pendingChatSessionId) {
           setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
             const updatedChats = scopeChats.map(chat =>
-              chat.session_id === targetChatId
+              chat.session_id === pendingChatSessionId
                 ? { ...chat, session_id: data.session_id! }
                 : chat,
             );
@@ -351,7 +401,7 @@ export function ChatProvider({
 
         addMessage(
           scopeId,
-          data.session_id ? data.session_id : targetChatId,
+          data.session_id ? data.session_id : pendingChatSessionId,
           MessageRole.ASSISTANT,
           data.response,
         );
@@ -363,17 +413,32 @@ export function ChatProvider({
             ? error.message
             : 'Sorry, I encountered an error processing your message. Please try again.';
 
-        addMessage(scopeId, targetChatId, MessageRole.ASSISTANT, errorMessage);
+        addMessage(
+          scopeId,
+          pendingChatSessionId,
+          MessageRole.ASSISTANT,
+          errorMessage,
+        );
         throw error;
+      } finally {
+        endOutboundPending(scopeId, pendingChatSessionId);
       }
     },
-    [addMessage, getCurrentChatId, sendChatMessageFn, setCurrentChatId],
+    [
+      addMessage,
+      beginOutboundPending,
+      endOutboundPending,
+      getCurrentChatId,
+      sendChatMessageFn,
+      setCurrentChatId,
+    ],
   );
 
   useEffect(() => {
     if (userSwitchKey === null) {
       setChats({});
       setCurrentChatIdState({});
+      setOutboundPendingByKey({});
       return;
     }
 
@@ -404,6 +469,7 @@ export function ChatProvider({
         getChatsForScopeId,
         getCurrentChatId,
         deleteChat,
+        outboundPendingByKey,
       }}
     >
       {children}
@@ -436,6 +502,18 @@ export function useChat(
   }, [scopeId, chatId, getChatsForScopeId]);
 }
 
+export function useChatOutboundPending(
+  scopeId: string | undefined | null,
+  chatSessionId: string | null | undefined,
+): boolean {
+  const { outboundPendingByKey } = useChats();
+  return useMemo(() => {
+    if (!scopeId || !chatSessionId) return false;
+    const key = outboundPendingKey(scopeId, chatSessionId);
+    return (outboundPendingByKey[key] ?? 0) > 0;
+  }, [scopeId, chatSessionId, outboundPendingByKey]);
+}
+
 export function useChatsForScopeId(scopeId: string) {
   const {
     getChatsForScopeId,
@@ -450,11 +528,13 @@ export function useChatsForScopeId(scopeId: string) {
   const chats = getChatsForScopeId(scopeId);
   const currentChatId = getCurrentChatId(scopeId);
   const currentChat = useChat(scopeId, currentChatId ?? undefined);
+  const isOutboundPending = useChatOutboundPending(scopeId, currentChatId);
 
   return {
     chats,
     currentChat,
     currentChatId,
+    isOutboundPending,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),
     addMessage: (