feat: allow sending messages with pending uploads

examples/vite/src/App.tsx

@@ -71,6 +71,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 { installSlowUploadHarness } from './SendWhilePendingUploads';
 
 const PUBLIC_VITE_EXAMPLE_API_KEY = 'xzwhhgtazy6h';
 
@@ -228,6 +230,9 @@ const CustomAttachmentWithActions = (props: AttachmentProps) => (
 const App = () => {
   const { tokenProvider, userId, userImage, userName } = useUser();
   const chatView = useAppSettingsSelector((state) => state.chatView);
+  const { sendMessagesWithPendingUploads, slowUploads } = useAppSettingsSelector(
+    (state) => state.composer,
+  );
   const { mode: themeMode } = useAppSettingsSelector((state) => state.theme);
   const initialSearchParams = useMemo(
     () => new URLSearchParams(window.location.search),
@@ -335,26 +340,48 @@ const App = () => {
     if (!chatClient) return;
 
     chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      // Dev-only: stretch uploads so the in-flight and confirmation-pending windows are
+      // observable. Independent of sendMessagesWithPendingUploads — a slow upload is just as
+      // useful for watching the default blocked behaviour.
+      //
+      // The delay is read from settings on every upload rather than captured here, so editing
+      // the number in Settings → Composer takes effect without re-running setup — which matters
+      // because a custom doUploadRequest cannot be un-set once installed.
+      if (slowUploads) {
+        installSlowUploadHarness(composer, () => {
+          const { slowUploadMs, slowUploads: armed } =
+            appSettingsStore.getLatestValue().composer;
+
+          return armed ? slowUploadMs : 0;
+        });
+      }
+
       // 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 +397,7 @@ const App = () => {
         location: { enabled: true },
       });
     });
-  }, [chatClient]);
+  }, [chatClient, slowUploads]);
 
   const chatTheme = themeMode === 'dark' ? 'str-chat__theme-dark' : 'messaging light';
   const initialAppLayoutStyle = useMemo(
@@ -435,9 +462,14 @@ const App = () => {
           i18nInstance={i18nInstance}
           isMessageAIGenerated={isMessageAIGenerated}
           searchController={searchController}
+          // App Settings → Composer, off by default.
+          // See src/SendWhilePendingUploads/README.md
+          sendMessagesWithPendingUploads={sendMessagesWithPendingUploads}
           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(() => {

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

@@ -8,10 +8,10 @@ import {
   Prompt,
   useChatContext,
   useDialogIsOpen,
-  useDialogOnNearestManager,
   useDropdownContext,
 } from 'stream-chat-react';
 import { DraggableDialog } from '../DraggableDialog';
+import { usePersistentDialog } from '../usePersistentDialog';
 import {
   buildFreshWebSocketEventPayload,
   createInitialSimulationState,
@@ -659,9 +659,7 @@ export const WebSocketEventPromptDialog = ({
   const [recentlyAddedIntervalId, setRecentlyAddedIntervalId] = useState<string | null>(
     null,
   );
-  const { dialog, dialogManager } = useDialogOnNearestManager({
-    id: webSocketEventPromptDialogId,
-  });
+  const { dialog, dialogManager } = usePersistentDialog(webSocketEventPromptDialogId);
   const dialogIsOpen = useDialogIsOpen(webSocketEventPromptDialogId, dialogManager?.id);
 
   useEffect(() => {

examples/vite/src/AppSettings/ActionsMenu/usePersistentDialog.ts

@@ -0,0 +1,23 @@
+import { useDialog, useNearestDialogManagerContext } from 'stream-chat-react';
+
+/**
+ * Registers a dialog that must not close when the user clicks elsewhere in the app.
+ *
+ * **Every call site touching the same dialog id has to use this hook.**
+ * `DialogManager.getOrCreate` applies `closeOnClickOutside` only when it *creates* the dialog,
+ * and these dialogs are resolved twice — once by whatever opens them (the Actions menu, a
+ * message action) and once by the dialog component itself. Whichever runs first wins, so if one
+ * of them registered without the override the other's would be silently ignored.
+ *
+ * `useDialogOnNearestManager` cannot be used for this: it accepts only `id`.
+ */
+export const usePersistentDialog = (id: string) => {
+  const { dialogManager } = useNearestDialogManagerContext() ?? {};
+  const dialog = useDialog({
+    closeOnClickOutside: false,
+    dialogManagerId: dialogManager?.id,
+    id,
+  });
+
+  return { dialog, dialogManager };
+};