feat: allow sending messages with pending uploads

examples/tutorial/package.json

@@ -16,7 +16,7 @@
     "emoji-mart": "^5.6.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "^9.50.2",
+    "stream-chat": "^9.52.0",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/vite/package.json

@@ -16,7 +16,7 @@
     "modern-normalize": "^3.0.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "^9.50.2",
+    "stream-chat": "^9.52.0",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/vite/src/App.tsx

@@ -4,14 +4,17 @@ import type {
   ChannelOptions,
   ChannelSort,
   LocalMessage,
+  MessageComposer,
   TextComposerMiddleware,
 } from 'stream-chat';
 import {
   ChannelSearchSource,
   createActiveCommandGuardMiddleware,
+  createAttachmentsCompositionMiddleware,
   createCommandInjectionMiddleware,
   createCommandStringExtractionMiddleware,
   createDraftCommandInjectionMiddleware,
+  createSendWithPendingUploadsAttachmentsMiddleware,
   SearchController,
   UserSearchSource,
 } from 'stream-chat';
@@ -71,6 +74,8 @@ import { ConfigurableMessageActions } from './CustomMessageActions';
 import { InlineEditableMessage } from './InlineEditMessage';
 import { SidebarToggle } from './Sidebar/SidebarToggle.tsx';
 import { CommandModeAttachmentSelector } from './CommandModeAttachmentSelector.tsx';
+import { StreamDebugHandles } from './Debug';
+import { installUploadHarness } from './SendWhilePendingUploads';
 
 const PUBLIC_VITE_EXAMPLE_API_KEY = 'xzwhhgtazy6h';
 
@@ -225,9 +230,27 @@ const CustomAttachmentWithActions = (props: AttachmentProps) => (
   <Attachment {...props} AttachmentActions={CustomAttachmentActions} />
 );
 
+/**
+ * Swaps the composition middleware that decides whether a message may be composed while its
+ * attachments are still uploading. Installing it is the whole switch: `MessageComposer` reads
+ * `allowsPendingUploads` off the installed middleware for sendability, and `Channel`'s send path
+ * reads the same flag to serialise sends and await the uploads.
+ *
+ * Both middleware share an id, so `replace` keeps the position in the chain either way.
+ */
+const applyPendingUploadsMiddleware = (composer: MessageComposer, enabled: boolean) => {
+  composer.compositionMiddlewareExecutor.replace([
+    enabled
+      ? createSendWithPendingUploadsAttachmentsMiddleware(composer)
+      : createAttachmentsCompositionMiddleware(composer),
+  ]);
+};
+
 const App = () => {
   const { tokenProvider, userId, userImage, userName } = useUser();
   const chatView = useAppSettingsSelector((state) => state.chatView);
+  const { failUploads, sendMessagesWithPendingUploads, slowUploads } =
+    useAppSettingsSelector((state) => state.composer);
   const { mode: themeMode } = useAppSettingsSelector((state) => state.theme);
   const initialSearchParams = useMemo(
     () => new URLSearchParams(window.location.search),
@@ -335,26 +358,54 @@ const App = () => {
     if (!chatClient) return;
 
     chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      applyPendingUploadsMiddleware(composer, sendMessagesWithPendingUploads);
+
+      // Dev-only: stretch uploads so the in-flight and confirmation-pending windows are
+      // observable, and/or make them fail so the failed-message and retry paths are reachable.
+      // Independent of sendMessagesWithPendingUploads — both are just as useful for watching the
+      // default blocked behaviour.
+      //
+      // Settings are read on every upload rather than captured here, so changing them in
+      // Settings → Composer takes effect without re-running setup — which matters because a
+      // custom doUploadRequest cannot be un-set once installed.
+      if (slowUploads || failUploads !== 'off') {
+        installUploadHarness(composer, () => {
+          const {
+            failUploads: failureMode,
+            slowUploadMs,
+            slowUploads: slowArmed,
+          } = appSettingsStore.getLatestValue().composer;
+
+          return { delayMs: slowArmed ? slowUploadMs : 0, failureMode };
+        });
+      }
+
       // todo: find a way to register multiple setup functions so that the SDK can have own setup independent from the integrator setup
       composer.compositionMiddlewareExecutor.insert({
         middleware: [createCommandInjectionMiddleware(composer)],
         position: { after: 'stream-io/message-composer-middleware/attachments' },
         unique: true,
       });
 
+      // `unique: true` on the inserts below matters now that this setup function re-runs
+      // whenever the Composer setting changes — without it each toggle would append another
+      // copy of the same middleware.
       composer.draftCompositionMiddlewareExecutor.insert({
         middleware: [createDraftCommandInjectionMiddleware(composer)],
         position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
+        unique: true,
       });
 
       composer.textComposer.middlewareExecutor.insert({
         middleware: [createActiveCommandGuardMiddleware() as TextComposerMiddleware],
         position: { before: 'stream-io/text-composer/commands-middleware' },
+        unique: true,
       });
 
       composer.textComposer.middlewareExecutor.insert({
         middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
         position: { after: 'stream-io/text-composer/commands-middleware' },
+        unique: true,
       });
 
       composer.textComposer.middlewareExecutor.insert({
@@ -370,7 +421,24 @@ const App = () => {
         location: { enabled: true },
       });
     });
-  }, [chatClient]);
+
+    // The setup function only runs when a composer is created, so composers the user already
+    // has open have to be updated too - otherwise the switch would need a reload to be seen.
+    Object.values(chatClient.activeChannels).forEach((channel) => {
+      applyPendingUploadsMiddleware(
+        channel.messageComposer,
+        sendMessagesWithPendingUploads,
+      );
+    });
+    chatClient.threads.state
+      .getLatestValue()
+      .threads.forEach((thread) =>
+        applyPendingUploadsMiddleware(
+          thread.messageComposer,
+          sendMessagesWithPendingUploads,
+        ),
+      );
+  }, [chatClient, failUploads, sendMessagesWithPendingUploads, slowUploads]);
 
   const chatTheme = themeMode === 'dark' ? 'str-chat__theme-dark' : 'messaging light';
   const initialAppLayoutStyle = useMemo(
@@ -438,6 +506,8 @@ const App = () => {
           theme={chatTheme}
         >
           <ChatSkipNavigation />
+          {/* Publishes window.streamDebug — see src/Debug/StreamDebugHandles.tsx */}
+          <StreamDebugHandles />
           <div
             className='app-chat-layout'
             data-variant={messageUiVariant ?? undefined}

examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx

@@ -22,6 +22,8 @@ import {
   WebSocketEventPromptDialog,
   webSocketEventPromptDialogId,
 } from './WebSocketEventPromptDialog';
+import { ComposerStateDialog, useComposerStateDialog } from '../../Debug';
+import { usePersistentDialog } from './usePersistentDialog';
 
 const actionsMenuDialogId = 'app-actions-menu';
 
@@ -70,15 +72,14 @@ export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => {
   const { dialog: actionsMenuDialog, dialogManager } = useDialogOnNearestManager({
     id: actionsMenuDialogId,
   });
-  const { dialog: notificationDialog } = useDialogOnNearestManager({
-    id: notificationPromptDialogId,
-  });
-  const { dialog: attachmentDialog } = useDialogOnNearestManager({
-    id: attachmentPromptDialogId,
-  });
-  const { dialog: webSocketEventDialog } = useDialogOnNearestManager({
-    id: webSocketEventPromptDialogId,
-  });
+  const { dialog: notificationDialog } = usePersistentDialog(notificationPromptDialogId);
+  const { dialog: attachmentDialog } = usePersistentDialog(attachmentPromptDialogId);
+  const { dialog: webSocketEventDialog } = usePersistentDialog(
+    webSocketEventPromptDialogId,
+  );
+  // Shared hook so the dialog is registered with closeOnClickOutside disabled regardless of
+  // which of the two call sites reaches getOrCreate first.
+  const { dialog: composerStateDialog } = useComposerStateDialog();
   const menuIsOpen = useDialogIsOpen(actionsMenuDialogId, dialogManager?.id);
 
   return (
@@ -103,10 +104,12 @@ export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => {
         <TriggerNotificationAction onTrigger={notificationDialog.open} />
         <TriggerAttachmentAction onTrigger={attachmentDialog.open} />
         <TriggerWebSocketEventAction onTrigger={webSocketEventDialog.open} />
+        <TriggerComposerStateInspectorAction onTrigger={composerStateDialog.open} />
       </ContextMenu>
       <NotificationPromptDialog referenceElement={menuButtonElement} />
       <AttachmentPromptDialog referenceElement={menuButtonElement} />
       <WebSocketEventPromptDialog referenceElement={menuButtonElement} />
+      <ComposerStateDialog referenceElement={menuButtonElement} />
     </div>
   );
 };
@@ -152,3 +155,17 @@ function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) {
     />
   );
 }
+
+function TriggerComposerStateInspectorAction({ onTrigger }: { onTrigger: () => void }) {
+  const { closeMenu } = useContextMenuContext();
+
+  return (
+    <ContextMenuButton
+      label='Composer State'
+      onClick={() => {
+        closeMenu();
+        onTrigger();
+      }}
+    />
+  );
+}

examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx

@@ -1,12 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { LocalAttachment } from 'stream-chat';
-import {
-  Prompt,
-  useChatContext,
-  useDialogIsOpen,
-  useDialogOnNearestManager,
-} from 'stream-chat-react';
+import { Prompt, useChatContext, useDialogIsOpen } from 'stream-chat-react';
 import { DraggableDialog } from './DraggableDialog';
+import { usePersistentDialog } from './usePersistentDialog';
 
 export const attachmentPromptDialogId = 'app-attachment-prompt-dialog';
 type AttachmentEditorTab = 'unsupported-file' | 'unsupported-object';
@@ -54,9 +50,7 @@ export const AttachmentPromptDialog = ({
   );
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const { channel } = useChatContext();
-  const { dialog, dialogManager } = useDialogOnNearestManager({
-    id: attachmentPromptDialogId,
-  });
+  const { dialog, dialogManager } = usePersistentDialog(attachmentPromptDialogId);
   const dialogIsOpen = useDialogIsOpen(attachmentPromptDialogId, dialogManager?.id);
 
   useEffect(() => {

examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.scss

@@ -0,0 +1,19 @@
+/*
+ * `DraggableDialog` applies the drag offset as a `transform` on its inner shell, so the
+ * `DialogAnchor` element keeps the layout box it was first positioned into — anchored to the
+ * button that opened it — while the panel is painted somewhere else entirely.
+ *
+ * The SDK gives `.str-chat__dialog-contents` `pointer-events: auto`, so that stale invisible
+ * box swallows clicks meant for the app underneath: you drag a panel aside and the region it
+ * *used* to occupy stays dead. Only the visible shell may capture.
+ *
+ * These rules live in the `stream-app-overrides` layer, which wins over the SDK's rule
+ * regardless of specificity.
+ */
+.app__draggable-dialog {
+  pointer-events: none;
+}
+
+.app__draggable-dialog__shell {
+  pointer-events: auto;
+}

examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { CSSProperties, ReactNode, PointerEvent as ReactPointerEvent } from 'react';
+import clsx from 'clsx';
 import { DialogAnchor, ModalContextProvider, Prompt } from 'stream-chat-react';
 
 const VIEWPORT_MARGIN = 8;
@@ -9,30 +10,62 @@ const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };
 
+/**
+ * Stable classes applied alongside whatever the caller passes, so one stylesheet rule can
+ * govern pointer behaviour for every draggable dialog.
+ */
+export const DRAGGABLE_DIALOG_ANCHOR_CLASS = 'app__draggable-dialog';
+export const DRAGGABLE_DIALOG_SHELL_CLASS = 'app__draggable-dialog__shell';
+
+/**
+ * A floating, draggable, **non-modal** dialog.
+ *
+ * The defaults below deliberately differ from a normal prompt: these panels exist to be kept
+ * open while you use the app — trigger an event, watch what happens, trigger another — so they
+ * do not trap focus, do not steal focus on open, and dismiss only via their close button.
+ * Callers can opt back in per dialog.
+ */
 export const DraggableDialog = ({
   children,
+  closeOnClickOutside = false,
+  closeOnEscape = false,
   dialogClassName,
   dialogId,
   dialogIsOpen,
   dialogManagerId,
   dragHandleClassName,
+  focus = false,
   onClose,
   promptClassName,
   referenceElement,
   shellClassName,
   title,
+  trapFocus = false,
 }: {
   children: ReactNode;
+  /** @default false — dismiss via the close button only. */
+  closeOnClickOutside?: boolean;
+  /** @default false — dismiss via the close button only. */
+  closeOnEscape?: boolean;
   dialogClassName: string;
   dialogId: string;
   dialogIsOpen: boolean;
   dialogManagerId?: string;
   dragHandleClassName: string;
+  /** Whether the dialog grabs focus when it opens. @default false */
+  focus?: boolean;
   onClose: () => void;
   promptClassName: string;
   referenceElement: HTMLElement | null;
   shellClassName: string;
   title: string;
+  /**
+   * Contain focus within the dialog. `true` also makes DialogAnchor render `role="dialog"`
+   * with `aria-modal`, telling assistive tech the rest of the app is inert — correct for a
+   * prompt, wrong for a panel meant to stay open while the user works elsewhere.
+   * @default false
+   */
+  trapFocus?: boolean;
 }) => {
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const shellRef = useRef<HTMLDivElement | null>(null);
@@ -132,16 +165,23 @@ export const DraggableDialog = ({
   return (
     <DialogAnchor
       allowFlip
-      className={dialogClassName}
+      className={clsx(DRAGGABLE_DIALOG_ANCHOR_CLASS, dialogClassName)}
+      closeOnClickOutside={closeOnClickOutside}
+      closeOnEscape={closeOnEscape}
       dialogManagerId={dialogManagerId}
+      focus={focus}
       id={dialogId}
       placement='right-start'
       referenceElement={referenceElement}
       tabIndex={-1}
-      trapFocus
+      trapFocus={trapFocus}
       updatePositionOnContentResize
     >
-      <div className={shellClassName} ref={shellRef} style={shellStyle}>
+      <div
+        className={clsx(DRAGGABLE_DIALOG_SHELL_CLASS, shellClassName)}
+        ref={shellRef}
+        style={shellStyle}
+      >
         <ModalContextProvider value={modalContextValue}>
           <Prompt.Root className={promptClassName}>
             <div className={dragHandleClassName} onPointerDown={handleHeaderPointerDown}>

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -24,11 +24,11 @@ import {
   Prompt,
   TextInput,
   useDialogIsOpen,
-  useDialogOnNearestManager,
   useNotificationApi,
   Viewer,
 } from 'stream-chat-react';
 import { DraggableDialog } from './DraggableDialog';
+import { usePersistentDialog } from './usePersistentDialog';
 import {
   buildNotificationActions,
   entryDirectionOptions,
@@ -506,9 +506,7 @@ export const NotificationPromptDialog = ({
   const [globalModalOpen, setGlobalModalOpen] = useState(false);
   const chipIdRef = useRef(0);
   const { addNotification } = useNotificationApi();
-  const { dialog, dialogManager } = useDialogOnNearestManager({
-    id: notificationPromptDialogId,
-  });
+  const { dialog, dialogManager } = usePersistentDialog(notificationPromptDialogId);
   const dialogIsOpen = useDialogIsOpen(notificationPromptDialogId, dialogManager?.id);
 
   const resetState = useCallback(() => {