diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json index 998f35bbf..f4d2d920e 100644 --- a/examples/tutorial/package.json +++ b/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": { diff --git a/examples/vite/package.json b/examples/vite/package.json index 34fc1ad5b..ff9fe2c6e 100644 --- a/examples/vite/package.json +++ b/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": { diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 7abfd4087..60c98944a 100644 --- a/examples/vite/src/App.tsx +++ b/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) => ( ); +/** + * 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,6 +358,28 @@ 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)], @@ -342,19 +387,25 @@ const App = () => { 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} > + {/* Publishes window.streamDebug — see src/Debug/StreamDebugHandles.tsx */} +
{ 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 }) => { + +
); }; @@ -152,3 +155,17 @@ function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) { /> ); } + +function TriggerComposerStateInspectorAction({ onTrigger }: { onTrigger: () => void }) { + const { closeMenu } = useContextMenuContext(); + + return ( + { + closeMenu(); + onTrigger(); + }} + /> + ); +} diff --git a/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx index 90953ecbd..4b5eb454c 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx +++ b/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(null); const { channel } = useChatContext(); - const { dialog, dialogManager } = useDialogOnNearestManager({ - id: attachmentPromptDialogId, - }); + const { dialog, dialogManager } = usePersistentDialog(attachmentPromptDialogId); const dialogIsOpen = useDialogIsOpen(attachmentPromptDialogId, dialogManager?.id); useEffect(() => { diff --git a/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.scss b/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.scss new file mode 100644 index 000000000..1e68cf255 --- /dev/null +++ b/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; +} diff --git a/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx index 0e22f817f..c8b1ae6a3 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx +++ b/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(null); @@ -132,16 +165,23 @@ export const DraggableDialog = ({ return ( -
+
diff --git a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx index 69dcd44e0..2c3fca9d7 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx +++ b/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(() => { diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx index 5f4c49b00..6989b864e 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx +++ b/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( null, ); - const { dialog, dialogManager } = useDialogOnNearestManager({ - id: webSocketEventPromptDialogId, - }); + const { dialog, dialogManager } = usePersistentDialog(webSocketEventPromptDialogId); const dialogIsOpen = useDialogIsOpen(webSocketEventPromptDialogId, dialogManager?.id); useEffect(() => { diff --git a/examples/vite/src/AppSettings/ActionsMenu/usePersistentDialog.ts b/examples/vite/src/AppSettings/ActionsMenu/usePersistentDialog.ts new file mode 100644 index 000000000..b9d103f39 --- /dev/null +++ b/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 }; +}; diff --git a/examples/vite/src/AppSettings/AppSettings.scss b/examples/vite/src/AppSettings/AppSettings.scss index 2af6d8e96..91eaf9470 100644 --- a/examples/vite/src/AppSettings/AppSettings.scss +++ b/examples/vite/src/AppSettings/AppSettings.scss @@ -1007,9 +1007,19 @@ font-weight: 600; } + // The navigator's content column is a block element that lets its child grow past it, so the + // stack has to be pinned to the column's height for the tab body's own `overflow-y: auto` to + // have anything to scroll against. Without this, a tall tab (Composer) is clipped by the + // modal's `overflow: hidden` instead of scrolling. + .app__settings-modal__body .str-chat__section-navigator__content { + min-height: 0; + } + .app__settings-modal__content-stack { display: flex; flex-direction: column; + height: 100%; + min-height: 0; } .app__settings-modal__tab-header .str-chat__prompt__header__title { diff --git a/examples/vite/src/AppSettings/AppSettings.tsx b/examples/vite/src/AppSettings/AppSettings.tsx index fd5f87e6a..3816af1ac 100644 --- a/examples/vite/src/AppSettings/AppSettings.tsx +++ b/examples/vite/src/AppSettings/AppSettings.tsx @@ -7,6 +7,7 @@ import { IconEmoji, IconMessageBubble, IconMessageBubbles, + IconUpload, } from 'stream-chat-react'; import { SECTION_NAVIGATOR_LAYOUT, @@ -18,6 +19,7 @@ import { import { ActionsMenu } from './ActionsMenu'; import { ChannelDetailTab } from './tabs/ChannelDetail'; +import { ComposerTab } from './tabs/Composer'; import { GeneralTab } from './tabs/General'; import { MessageActionsTab } from './tabs/MessageActions'; import { NotificationsTab } from './tabs/Notifications'; @@ -35,6 +37,7 @@ import clsx from 'clsx'; type TabId = | 'channelDetail' + | 'composer' | 'general' | 'messageActions' | 'notifications' @@ -66,6 +69,7 @@ const settingsSectionConfig: SettingsSectionConfig[] = [ id: 'messageActions', title: 'Message Actions', }, + { Content: ComposerTab, Icon: IconUpload, id: 'composer', title: 'Composer' }, { Content: NotificationsTab, Icon: IconBell, diff --git a/examples/vite/src/AppSettings/state.ts b/examples/vite/src/AppSettings/state.ts index 7281da3b1..5696759ed 100644 --- a/examples/vite/src/AppSettings/state.ts +++ b/examples/vite/src/AppSettings/state.ts @@ -1,4 +1,6 @@ import { StateStore } from 'stream-chat'; + +import type { UploadFailureMode } from '../SendWhilePendingUploads'; import { useStateStore } from 'stream-chat-react'; export type ReactionsSettingsState = { @@ -70,9 +72,33 @@ export type MessageListSettingsState = { type: 'standard' | 'virtualized'; }; +export type ComposerSettingsState = { + /** + * POC: allow sending a message while its attachments are still uploading. + * Off by default — it swaps composer middleware and shadows a prototype getter, + * so the app should behave exactly like stock until it is turned on. + */ + sendMessagesWithPendingUploads: boolean; + /** + * Dev harness: which uploads should fail instead of completing. `prefixed` fails only files + * whose name starts with `fail-`, which is how a partial failure (and the retry that follows) + * can be reproduced. + */ + failUploads: UploadFailureMode; + /** Delay (ms) applied to every upload while `slowUploads` is on. */ + slowUploadMs: number; + /** + * Dev harness, independent of `sendMessagesWithPendingUploads`: stretches every upload over + * `slowUploadMs` so the in-flight and confirmation-pending windows last long enough to observe. + * Useful for watching the default blocked behaviour too. + */ + slowUploads: boolean; +}; + export type AppSettingsState = { channelDetail: ChannelDetailSettingsState; chatView: ChatViewSettingsState; + composer: ComposerSettingsState; messageActions: MessageActionsSettingsState; messageList: MessageListSettingsState; notifications: NotificationsSettingsState; @@ -117,6 +143,12 @@ const defaultAppSettingsState: AppSettingsState = { chatView: { iconOnly: true, }, + composer: { + failUploads: 'off', + sendMessagesWithPendingUploads: false, + slowUploadMs: 20000, + slowUploads: false, + }, messageActions: { customMessageActions: { delete: { @@ -237,6 +269,37 @@ const getStoredPanelLayoutSettings = (): PanelLayoutSettingsState | undefined => } }; +const slowUploadUrlParam = 'slow_upload'; + +/** Seeded from `?slow_upload=` so a link can carry a specific delay. */ +const getSlowUploadMsFromUrl = (): number | undefined => { + if (typeof window === 'undefined') return; + + const raw = new URLSearchParams(window.location.search).get(slowUploadUrlParam); + if (raw === null) return; + + const parsed = Number(raw); + return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined; +}; + +const sendMessagesWithPendingUploadsUrlParam = 'send_messages_with_pending_uploads'; + +/** + * Deliberately URL-seeded only — never persisted to localStorage. The POC mode has to be + * off on a fresh load, so a stale stored value must not be able to turn it on. + */ +const getSendMessagesWithPendingUploadsFromUrl = (): boolean | undefined => { + if (typeof window === 'undefined') return; + + const raw = new URLSearchParams(window.location.search).get( + sendMessagesWithPendingUploadsUrlParam, + ); + + if (raw === null) return; + + return raw !== '0' && raw !== 'false'; +}; + const getThemeModeFromUrl = (): ThemeSettingsState['mode'] | undefined => { if (typeof window === 'undefined') return; @@ -300,6 +363,16 @@ const persistThemeModeInUrl = (themeMode: ThemeSettingsState['mode']) => { const initialAppSettingsState: AppSettingsState = { ...defaultAppSettingsState, + composer: { + ...defaultAppSettingsState.composer, + sendMessagesWithPendingUploads: + getSendMessagesWithPendingUploadsFromUrl() ?? + defaultAppSettingsState.composer.sendMessagesWithPendingUploads, + slowUploadMs: + getSlowUploadMsFromUrl() ?? defaultAppSettingsState.composer.slowUploadMs, + // A delay in the URL means the harness is wanted, so it arms the switch too. + slowUploads: (getSlowUploadMsFromUrl() ?? 0) > 0, + }, panelLayout: getStoredPanelLayoutSettings() ?? defaultAppSettingsState.panelLayout, theme: { ...defaultAppSettingsState.theme, diff --git a/examples/vite/src/AppSettings/tabs/Composer/ComposerTab.tsx b/examples/vite/src/AppSettings/tabs/Composer/ComposerTab.tsx new file mode 100644 index 000000000..c68525d7b --- /dev/null +++ b/examples/vite/src/AppSettings/tabs/Composer/ComposerTab.tsx @@ -0,0 +1,165 @@ +import { useState } from 'react'; +import { Button, NumericInput, SwitchField } from 'stream-chat-react'; +import { FAILING_FILE_NAME_PREFIX } from '../../../SendWhilePendingUploads'; +import { appSettingsStore, useAppSettingsState } from '../../state'; +import { + SettingsTabBody, + SettingsTabLayoutHeader, +} from '../SettingsTabLayoutComponents.tsx'; + +type ComposerTabProps = { + close: () => void; +}; + +export const ComposerTab = ({ close }: ComposerTabProps) => { + const { + composer, + composer: { failUploads, sendMessagesWithPendingUploads, slowUploadMs, slowUploads }, + } = useAppSettingsState(); + // NumericInput is a text input that also accepts '', which has no numeric equivalent, so the + // typed value is held locally and only committed to the store once it parses. + const [slowUploadDraft, setSlowUploadDraft] = useState(String(slowUploadMs)); + + return ( +
+ + + +
+
Pending uploads
+ + appSettingsStore.partialNext({ + composer: { + ...composer, + sendMessagesWithPendingUploads: event.target.checked, + }, + }) + } + title='Allow sending while attachments are still uploading' + /> +
+ Off by default. When enabled, the send button stays active while an upload is + in flight; the message is added to the list immediately with a live progress + bar and the request is made once the upload settles. Applies to already-open + composers — no reload needed — and to both the channel and thread composers. +
+
+ +
+
Slow uploads
+ + appSettingsStore.partialNext({ + composer: { ...composer, slowUploads: event.target.checked }, + }) + } + title='Slow down uploads' + /> +
+ Dev harness, independent of the switch above. Uploads in this app finish in + well under a second, so there is normally nothing to watch — this stretches + every upload over the delay below: 60% ramping progress to 100%, then the rest + sitting at 100% with the server response still outstanding, which is the + window the indicator renders as indeterminate. Just as useful for watching the{' '} + default behaviour, where the send button stays disabled until the + upload finishes. +
+ + { + const raw = event.target.value; + setSlowUploadDraft(raw); + appSettingsStore.partialNext({ + composer: { ...composer, slowUploadMs: raw === '' ? 0 : Number(raw) }, + }); + }} + step={500} + value={slowUploadDraft} + /> +
+ Takes effect on the next upload; no reload needed. Both switches reset to off + on every page load; seed them from the URL with{' '} + ?send_messages_with_pending_uploads=1&slow_upload=40000 — + a slow_upload value turns this switch on by itself. +
+
+ +
+
Failing uploads
+ + appSettingsStore.partialNext({ + composer: { + ...composer, + failUploads: event.target.checked ? 'all' : 'off', + }, + }) + } + title='Make uploads fail' + /> +
+ Dev harness. The upload rejects instead of completing, which is the only way + to reach the failed-message and retry paths from the UI. Combine it with the + delay above to send a message while the upload is still running and watch it + fail afterwards — the rejection happens at the end of the delay, not at the + start. +
+ +
+ + +
+
+ Every upload fails the whole message.{' '} + + Only {FAILING_FILE_NAME_PREFIX}… files + {' '} + fails just the attachments whose file name starts with{' '} + {FAILING_FILE_NAME_PREFIX}, so a message with one good and one + bad attachment reproduces the partial retry: resending re-uploads only the one + that failed. +
+
+ +
+ ); +}; diff --git a/examples/vite/src/AppSettings/tabs/Composer/index.ts b/examples/vite/src/AppSettings/tabs/Composer/index.ts new file mode 100644 index 000000000..5c622d93b --- /dev/null +++ b/examples/vite/src/AppSettings/tabs/Composer/index.ts @@ -0,0 +1 @@ +export * from './ComposerTab'; diff --git a/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx b/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx index 4f4598d67..dea604741 100644 --- a/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx +++ b/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx @@ -22,7 +22,6 @@ import { useComponentContext, useContextMenuContext, useDialogIsOpen, - useDialogOnNearestManager, useMessageContext, useModalContext, useNotificationApi, @@ -34,6 +33,7 @@ import { MessageInfoPromptDialog, messageInfoPromptDialogId, } from '../AppSettings/ActionsMenu/MessageInfoPromptDialog'; +import { usePersistentDialog } from '../AppSettings/ActionsMenu/usePersistentDialog'; const getErrorMessage = (error: unknown, fallback: string) => error instanceof Error && error.message ? error.message : fallback; @@ -327,9 +327,9 @@ export const ConfigurableMessageActions = ( useState(null); const { t } = useTranslationContext(); const currentMessageInfoDialogId = `${messageInfoPromptDialogId}-${currentMessage.id}`; - const { dialog: messageInfoDialog, dialogManager } = useDialogOnNearestManager({ - id: currentMessageInfoDialogId, - }); + const { dialog: messageInfoDialog, dialogManager } = usePersistentDialog( + currentMessageInfoDialogId, + ); const messageInfoDialogIsOpen = useDialogIsOpen( currentMessageInfoDialogId, dialogManager?.id, diff --git a/examples/vite/src/Debug/ComposerInspector.scss b/examples/vite/src/Debug/ComposerInspector.scss new file mode 100644 index 000000000..ec903282b --- /dev/null +++ b/examples/vite/src/Debug/ComposerInspector.scss @@ -0,0 +1,122 @@ +.app__composer-inspector-dialog__shell { + display: flex; + flex-direction: column; + width: min(520px, calc(100vw - 32px)); + max-height: min(70vh, 720px); +} + +.app__composer-inspector-dialog__drag-handle { + cursor: grab; +} + +.app__composer-inspector { + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: auto; + font-size: 12px; +} + +.app__composer-inspector__picker { + width: 100%; + padding: 4px 6px; + border: 1px solid var(--str-chat__border-core-default, rgb(0 0 0 / 15%)); + border-radius: 6px; + background: var(--str-chat__background-core-elevation-0, transparent); + color: inherit; + font: inherit; +} + +.app__composer-inspector__body { + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; +} + +.app__composer-inspector__flags { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.app__composer-inspector__flag { + padding: 2px 8px; + border-radius: 999px; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +/* Colour-coded rather than printed as `true`/`false` — these four flags are usually the + first thing you check, and reading them as shapes is faster than reading them as words. */ +.app__composer-inspector__flag--on { + background: color-mix( + in srgb, + var(--str-chat__accent-primary, #005fff) 18%, + transparent + ); + color: var(--str-chat__accent-primary, #005fff); +} + +.app__composer-inspector__flag--off { + background: rgb(0 0 0 / 8%); + opacity: 0.7; +} + +.app__composer-inspector__section { + border: 1px solid var(--str-chat__border-core-default, rgb(0 0 0 / 12%)); + border-radius: 6px; + padding: 4px 8px; + min-width: 0; +} + +.app__composer-inspector__section-title { + cursor: pointer; + font-weight: 600; + user-select: none; +} + +.app__composer-inspector__json { + margin: 6px 0 2px; + padding: 6px; + border-radius: 4px; + background: rgb(0 0 0 / 5%); + /* Long values (blob URLs, base64) must scroll inside the block, never widen the dialog. */ + overflow-x: auto; + max-height: 260px; + overflow-y: auto; + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-size: 11px; + line-height: 1.45; + white-space: pre; +} + +.app__composer-inspector__table { + width: 100%; + margin-top: 6px; + border-collapse: collapse; + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-size: 11px; + + th, + td { + padding: 3px 6px; + text-align: start; + border-bottom: 1px solid var(--str-chat__border-core-default, rgb(0 0 0 / 8%)); + white-space: nowrap; + } + + th { + opacity: 0.7; + font-weight: 600; + } +} + +.app__composer-inspector__empty { + padding: 6px 0; + opacity: 0.6; +} + +.app__composer-inspector__copy { + align-self: flex-start; +} diff --git a/examples/vite/src/Debug/ComposerStateDialog.tsx b/examples/vite/src/Debug/ComposerStateDialog.tsx new file mode 100644 index 000000000..775d7bc49 --- /dev/null +++ b/examples/vite/src/Debug/ComposerStateDialog.tsx @@ -0,0 +1,82 @@ +import { useCallback, useMemo } from 'react'; +import { Prompt, useChatContext, useDialogIsOpen } from 'stream-chat-react'; + +import { DraggableDialog } from '../AppSettings/ActionsMenu/DraggableDialog'; +import { usePersistentDialog } from '../AppSettings/ActionsMenu/usePersistentDialog'; +import { ComposerStateInspectorPanel } from './ComposerStateInspector'; +import { listComposers } from './composerRegistry'; + +export const composerStateDialogId = 'app-composer-state-dialog'; + +/** + * Registers the inspector's dialog with outside-click dismissal disabled. + * + * MUST be used by every caller that touches this dialog id — `DialogManager.getOrCreate` + * only applies `closeOnClickOutside` when it *creates* the dialog, and the Actions menu + * resolves it first in order to expose an `open()`. If the menu registered it without the + * override, whatever this component passed later would be silently ignored. + * + * `useDialogOnNearestManager` cannot be used here because it accepts only `id`. + */ +export const useComposerStateDialog = () => usePersistentDialog(composerStateDialogId); + +/** + * Live inspector for any `MessageComposer` the client currently holds. + * + * Rendered next to the Actions menu rather than inside ``: it resolves composers from + * `useChatContext()` and the client's composer cache instead of `useMessageComposerController()`, + * so it can show the channel composer *and* thread/edit composers at once — and it does not need + * to live in the channel subtree to do it. + * + * Dismissal is deliberately limited to the close button: an inspector you have to keep + * reopening every time you click into the composer is useless for watching state change. + */ +export const ComposerStateDialog = ({ + referenceElement, +}: { + referenceElement: HTMLElement | null; +}) => { + const { channel, client } = useChatContext('ComposerStateDialog'); + const { dialog, dialogManager } = useComposerStateDialog(); + const dialogIsOpen = useDialogIsOpen(composerStateDialogId, dialogManager?.id); + + const closeDialog = useCallback(() => { + dialog.close(); + }, [dialog]); + + // Recomputed on every open so newly created thread/edit composers show up. + const composers = useMemo( + () => (dialogIsOpen ? listComposers(client, channel) : []), + [channel, client, dialogIsOpen], + ); + + return ( + + + {client ? ( + + ) : ( +
No client connected.
+ )} + + + ); +}; diff --git a/examples/vite/src/Debug/ComposerStateInspector.tsx b/examples/vite/src/Debug/ComposerStateInspector.tsx new file mode 100644 index 000000000..ea999a176 --- /dev/null +++ b/examples/vite/src/Debug/ComposerStateInspector.tsx @@ -0,0 +1,261 @@ +import { useCallback, useMemo, useState } from 'react'; +import type { MessageComposer, StreamChat } from 'stream-chat'; +import { Button, useStateStore } from 'stream-chat-react'; + +import { readMiddlewareIds } from './composerRegistry'; +import { toDebugJson } from './serialize'; + +/** + * `useStateStore` shallow-compares the selected object's own keys, so selecting the whole store + * value under a single key re-renders whenever the store publishes a new value — which is what + * an inspector wants. Defined at module scope so its identity stays stable. + */ +const identity = (value: unknown) => ({ value }); + +type SectionProps = { + children?: React.ReactNode; + defaultOpen?: boolean; + title: string; + value?: unknown; +}; + +const Section = ({ children, defaultOpen = false, title, value }: SectionProps) => ( +
+ {title} + {children} + {value !== undefined && ( + 
{toDebugJson(value)}
+ )} +
+); + +const Flag = ({ label, on }: { label: string; on: boolean }) => ( + + {label} + +); + +/** + * Everything live about one composer. Keyed by composer in the parent so switching selection + * remounts it rather than trying to swap the subscriptions underneath. + */ +export const ComposerStateInspector = ({ + client, + composer, +}: { + client: StreamChat; + composer: MessageComposer; +}) => { + const { value: composerState } = useStateStore(composer.state, identity); + const { value: editingAudit } = useStateStore(composer.editingAuditState, identity); + const { value: config } = useStateStore(composer.configState, identity); + const { value: text } = useStateStore(composer.textComposer.state, identity); + const { value: attachmentState } = useStateStore( + composer.attachmentManager.state, + identity, + ); + const { value: linkPreviews } = useStateStore( + composer.linkPreviewsManager.state, + identity, + ); + const { value: poll } = useStateStore(composer.pollComposer.state, identity); + const { value: location } = useStateStore(composer.locationComposer.state, identity); + const { value: customData } = useStateStore(composer.customDataManager.state, identity); + const { value: uploadState } = useStateStore(client.uploadManager.state, identity); + + const attachments = composer.attachmentManager.attachments; + const uploads = ( + uploadState as { uploads: Record } + ).uploads; + + const middleware = useMemo( + () => ({ + composition: readMiddlewareIds(composer.compositionMiddlewareExecutor), + draftComposition: readMiddlewareIds(composer.draftCompositionMiddlewareExecutor), + postUpload: readMiddlewareIds( + composer.attachmentManager.postUploadMiddlewareExecutor, + ), + preUpload: readMiddlewareIds( + composer.attachmentManager.preUploadMiddlewareExecutor, + ), + text: readMiddlewareIds(composer.textComposer.middlewareExecutor), + }), + // The chains are mutated in place by setup functions, so recompute whenever anything + // else about the composer changed rather than only when the instance swaps. + // eslint-disable-next-line react-hooks/exhaustive-deps + [composer, editingAudit], + ); + + const snapshot = useMemo( + () => ({ + attachments: attachmentState, + config, + customData, + editingAudit, + identity: { + contextType: composer.contextType, + editedMessageId: composer.editedMessage?.id, + tag: composer.tag, + threadId: composer.threadId, + }, + linkPreviews, + location, + middleware, + poll, + state: composerState, + text, + uploads, + }), + [ + attachmentState, + composer, + composerState, + config, + customData, + editingAudit, + linkPreviews, + location, + middleware, + poll, + text, + uploads, + ], + ); + + const copySnapshot = useCallback(() => { + void navigator.clipboard?.writeText(toDebugJson(snapshot)); + }, [snapshot]); + + return ( +
+
+ + {/* + Whether a composition middleware declaring `allowsPendingUploads` is installed - the + only way to see that the "Allow sending while attachments are still uploading" switch + reached the composer, since nothing else about the chain is observable. + */} + + + + +
+ +
+ +
+ {attachments.length === 0 ? ( +
none
+ ) : ( + + + + + + + + + + + + {attachments.map((attachment) => { + const { + id, + previewUri, + uploadState: state, + } = attachment.localMetadata ?? {}; + return ( + + + + + {/* Read from uploadManager, not the attachment: the value stored on an + attachment carried by a message is frozen at compose time. */} + + + + ); + })} + +
idtypeuploadStatelive progresspreview
{id?.slice(0, 8)}{attachment.type}{state ?? '—'} + {id && uploads[id] + ? `${uploads[id].uploadProgress ?? '?'}%` + : 'no record'} + {previewUri ? 'yes' : '—'}
+ )} +
+ +
+
+
+
+
+
+
+
+
+
+ + +
+ ); +}; + +/** Composer picker + the inspector for whichever is selected. */ +export const ComposerStateInspectorPanel = ({ + client, + composers, +}: { + client: StreamChat; + composers: { composer: MessageComposer; label: string; tag: string }[]; +}) => { + const [selectedTag, setSelectedTag] = useState(null); + + const selected = + composers.find(({ tag }) => tag === selectedTag) ?? composers[0] ?? undefined; + + if (!selected) { + return ( +
+ No composer yet — open a channel. +
+ ); + } + + return ( + <> + {composers.length > 1 && ( + + )} + + + ); +}; diff --git a/examples/vite/src/Debug/README.md b/examples/vite/src/Debug/README.md new file mode 100644 index 000000000..4c1d2c723 --- /dev/null +++ b/examples/vite/src/Debug/README.md @@ -0,0 +1,104 @@ +# Debug tooling + +Two independent aids for working on the message composer. Neither is part of the SDK — both are +example-app only. + +## `window.streamDebug` + +Published by ``, mounted once under `` in `App.tsx`. Saves walking +the React fiber tree from the console to find the client. + +```js +streamDebug.client; // StreamChat +streamDebug.channel; // active Channel +streamDebug.composer; // the active channel's MessageComposer +streamDebug.composers; // [{ tag, label, composer }] incl. thread/edit composers +streamDebug.uploads; // client.uploadManager.uploads, keyed by localMetadata.id +streamDebug.attachments; // the active composer's attachments +streamDebug.messages; // channel.state.messages +``` + +Every entry is a **getter**, so the console always reads current values rather than a snapshot +from the last render. + +## Composer state inspector + +Actions menu (⚡) → **Composer State**. A draggable, non-modal panel that live-subscribes to +every composer store via `useStateStore`. + +**It only closes via its ✕ button** — not on outside click, not on Escape. A panel you have to +reopen every time you click into the composer cannot be used for watching state change. Two +things make that work: + +- `closeOnClickOutside: false`, a per-dialog override the SDK already supports. It has to be + passed by **every** call site that touches the dialog id, because `DialogManager.getOrCreate` + applies it only when it _creates_ the dialog — and the Actions menu resolves it first to get + an `open()`. Hence the shared `useComposerStateDialog()` hook; `useDialogOnNearestManager` + cannot be used, as it accepts only `id`. +- `closeOnEscape: false` on `DialogAnchor`. That flag did not exist — `DialogAnchor` closed on + Escape unconditionally — so it was added to the SDK as an additive, default-`true` prop, + symmetric with `closeOnClickOutside`. + +### …and the app underneath stays clickable + +Two separate things blocked interaction, neither of them the dialog overlay (which is already +`pointer-events: none`): + +1. **The focus trap.** `DraggableDialog` hardcoded `trapFocus`, which also made `DialogAnchor` + render `role="dialog"` + `aria-modal="true"` — telling assistive tech the rest of the app is + inert. `trapFocus` and `focus` are now props; the inspector passes `false` for both, so + opening it does not steal focus from the composer either. + +2. **A stale anchor box.** `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 Actions button, i.e. over the channel list — while the panel is painted + somewhere else entirely. With the SDK's `.str-chat__dialog-contents { pointer-events: auto }` + that invisible box swallowed every click in the sidebar. + + Fixed in `ComposerInspector.scss`: `pointer-events: none` on the anchor, `auto` on the + visible shell. Verified — a point inside the stale anchor box but outside the painted panel + now resolves to the app element underneath, and switching channels with the panel open works + (the inspector follows the new channel). + + Worth knowing: this affects **any** draggable dialog built this way, so the other prompt + dialogs in `ActionsMenu/` have the same latent issue once dragged. Left alone here because + they are modal prompts where it does not bite. + +It resolves composers from `useChatContext()` plus the client's composer cache rather than +`useMessageComposerController()`. That means it can show the channel composer **and** any +thread/edit composers at the same time (a picker appears when there is more than one), and it +does not have to be rendered inside `` to do it. + +Shows: + +- **Flags** — `hasSendableData`, `allowsPendingUploads`, `compositionIsEmpty`, `contentIsEmpty`, + `isCommandSendable`, colour-coded rather than printed as words. `allowsPendingUploads` reports + whether a composition middleware declaring it is installed, which is how you confirm the + Composer tab's "Allow sending while attachments are still uploading" switch reached this + composer. +- **Identity** — `tag`, `contextType`, `threadId`, `editedMessageId`, so it is unambiguous + which instance you are looking at. +- **Attachments** — a table of id / type / `uploadState` / live progress / preview. Progress is + read from `client.uploadManager`, not from the attachment, because the value stored on an + attachment carried by a message is frozen at compose time. +- **uploadManager records**, and every sub-composer store (text, link previews, poll, location, + custom data), plus editing audit and config. +- **Middleware chains** — the ids for the composition, draft, text and pre/post-upload + executors. The fastest way to check whether a `replace()` kept its slot or an `insert()` ran + twice. +- **Copy snapshot JSON**. + +### Two deliberate reaches past the public API + +Both are isolated in `composerRegistry.ts` so they are easy to find if the SDK changes: + +- `FixedSizeQueueCache` declares `keys`/`map` private, so enumerating cached thread/edit + composers reaches into `cache.map`. +- `MiddlewareExecutor` keeps its middleware array private, so the chain ids are recovered by + scanning the executor's own properties for the array of `{ id, handlers }`. + +`serialize.ts` handles what `JSON.stringify` cannot: `File`/`Blob` handles on `localMetadata`, +functions in the config (`doUploadRequest`, `fileUploadFilter`), and self-referencing graphs. +Note its `seen` set is shared across the whole document, so a value referenced twice in +different branches prints as `[circular]` even when it is merely repeated — a deliberate +simplification that guarantees termination. diff --git a/examples/vite/src/Debug/StreamDebugHandles.tsx b/examples/vite/src/Debug/StreamDebugHandles.tsx new file mode 100644 index 000000000..a1e39a87c --- /dev/null +++ b/examples/vite/src/Debug/StreamDebugHandles.tsx @@ -0,0 +1,62 @@ +import { useEffect } from 'react'; +import { useChatContext } from 'stream-chat-react'; + +import { listComposers } from './composerRegistry'; + +/** + * Publishes live debug handles on `window.streamDebug`, so the console can reach the client, + * the active channel, the composers and the upload records without walking the React fiber + * tree to find them. + * + * Every entry is a **getter**, so what you read in the console is the current value rather than + * a snapshot taken when the component last rendered. + * + * streamDebug.client // StreamChat + * streamDebug.channel // active Channel + * streamDebug.composer // the active channel's MessageComposer + * streamDebug.composers // [{ tag, label, composer }] incl. thread/edit composers + * streamDebug.uploads // client.uploadManager.uploads, keyed by localMetadata.id + * streamDebug.attachments // the active composer's attachments + * streamDebug.messages // channel.state.messages + * + * Renders nothing. Mount it once, anywhere under . + */ +export const StreamDebugHandles = () => { + const { channel, client } = useChatContext('StreamDebugHandles'); + + useEffect(() => { + if (typeof window === 'undefined') return; + + const handles = { + get attachments() { + return channel?.messageComposer?.attachmentManager.attachments; + }, + get channel() { + return channel; + }, + get client() { + return client; + }, + get composer() { + return channel?.messageComposer; + }, + get composers() { + return listComposers(client, channel); + }, + get messages() { + return channel?.state.messages; + }, + get uploads() { + return client?.uploadManager?.uploads; + }, + }; + + (window as unknown as Record).streamDebug = handles; + + return () => { + delete (window as unknown as Record).streamDebug; + }; + }, [channel, client]); + + return null; +}; diff --git a/examples/vite/src/Debug/composerRegistry.ts b/examples/vite/src/Debug/composerRegistry.ts new file mode 100644 index 000000000..b588d677c --- /dev/null +++ b/examples/vite/src/Debug/composerRegistry.ts @@ -0,0 +1,80 @@ +import type { Channel, MessageComposer, StreamChat } from 'stream-chat'; + +export type ComposerEntry = { + composer: MessageComposer; + label: string; + tag: string; +}; + +/** + * Debug-only. `FixedSizeQueueCache` declares `keys`/`map` private, so enumerating the cached + * thread and edit composers means reaching past the public API. Kept in one place so the one + * unsupported access is obvious and easy to update if the cache implementation changes. + */ +const readCachedComposers = (client: StreamChat): ComposerEntry[] => { + const cache = client.messageComposerCache as unknown as { + map?: Map; + }; + + if (!(cache?.map instanceof Map)) return []; + + return [...cache.map.entries()].map(([tag, composer]) => ({ + composer, + label: describeComposer(composer, tag), + tag, + })); +}; + +const describeComposer = (composer: MessageComposer, tag: string) => { + if (composer.editedMessage) return `edit · ${composer.editedMessage.id.slice(0, 8)}`; + if (composer.threadId) return `thread · ${composer.threadId.slice(0, 8)}`; + return tag; +}; + +/** + * Every composer instance currently reachable: the active channel's own composer, plus any + * thread/edit composers the client is holding in its cache. + */ +export const listComposers = ( + client: StreamChat | undefined, + activeChannel: Channel | undefined, +): ComposerEntry[] => { + if (!client) return []; + + const entries: ComposerEntry[] = []; + + if (activeChannel?.messageComposer) { + entries.push({ + composer: activeChannel.messageComposer, + label: `channel · ${activeChannel.cid}`, + tag: activeChannel.messageComposer.tag, + }); + } + + for (const entry of readCachedComposers(client)) { + if (entries.some(({ composer }) => composer === entry.composer)) continue; + entries.push(entry); + } + + return entries; +}; + +/** + * Debug-only. Middleware arrays are private on `MiddlewareExecutor`; the ids are the single + * most useful thing to see when a composition behaves unexpectedly (did a `replace()` keep its + * slot? did an `insert()` run twice?), so the inspector digs them out. + */ +export const readMiddlewareIds = (executor: unknown): string[] => { + if (!executor || typeof executor !== 'object') return []; + + for (const value of Object.values(executor as Record)) { + if ( + Array.isArray(value) && + value.every((entry) => entry && typeof entry === 'object' && 'id' in entry) + ) { + return value.map((entry) => String((entry as { id: unknown }).id)); + } + } + + return []; +}; diff --git a/examples/vite/src/Debug/index.ts b/examples/vite/src/Debug/index.ts new file mode 100644 index 000000000..4629bdfb9 --- /dev/null +++ b/examples/vite/src/Debug/index.ts @@ -0,0 +1,9 @@ +export { + ComposerStateDialog, + composerStateDialogId, + useComposerStateDialog, +} from './ComposerStateDialog'; +export { ComposerStateInspectorPanel } from './ComposerStateInspector'; +export { listComposers } from './composerRegistry'; +export { StreamDebugHandles } from './StreamDebugHandles'; +export { toDebugJson } from './serialize'; diff --git a/examples/vite/src/Debug/serialize.ts b/examples/vite/src/Debug/serialize.ts new file mode 100644 index 000000000..7e7725756 --- /dev/null +++ b/examples/vite/src/Debug/serialize.ts @@ -0,0 +1,41 @@ +/** + * JSON replacer for composer state. + * + * Composer state holds things `JSON.stringify` renders uselessly or chokes on: `File`/`Blob` + * handles on `localMetadata`, functions in the config (`doUploadRequest`, `fileUploadFilter`), + * and object graphs that reference each other. + * + * Note the `seen` set is shared across the whole document, so a value referenced twice in + * different branches is reported as `[circular]` even though it is merely repeated. That is a + * deliberate simplification — it guarantees termination, and for debug output "this is the same + * object you already saw" is usually the more useful reading anyway. + */ +const createReplacer = () => { + const seen = new WeakSet(); + + return (_key: string, value: unknown) => { + if (value instanceof File) { + return `File(${value.name}, ${value.size} B, ${value.type || 'no mime type'})`; + } + if (value instanceof Blob) return `Blob(${value.size} B, ${value.type})`; + if (typeof value === 'function') { + return `ƒ ${(value as { name?: string }).name || 'anonymous'}()`; + } + if (value instanceof Date) return value.toISOString(); + if (value instanceof Map) return Object.fromEntries(value.entries()); + if (value instanceof Set) return [...value]; + if (value && typeof value === 'object') { + if (seen.has(value)) return '[circular]'; + seen.add(value); + } + return value; + }; +}; + +export const toDebugJson = (value: unknown) => { + try { + return JSON.stringify(value, createReplacer(), 2) ?? String(value); + } catch (error) { + return ``; + } +}; diff --git a/examples/vite/src/SendWhilePendingUploads/index.ts b/examples/vite/src/SendWhilePendingUploads/index.ts new file mode 100644 index 000000000..0df6afc01 --- /dev/null +++ b/examples/vite/src/SendWhilePendingUploads/index.ts @@ -0,0 +1,5 @@ +export { + FAILING_FILE_NAME_PREFIX, + installUploadHarness, + type UploadFailureMode, +} from './uploadHarness'; diff --git a/examples/vite/src/SendWhilePendingUploads/uploadHarness.ts b/examples/vite/src/SendWhilePendingUploads/uploadHarness.ts new file mode 100644 index 000000000..c6db22ef2 --- /dev/null +++ b/examples/vite/src/SendWhilePendingUploads/uploadHarness.ts @@ -0,0 +1,97 @@ +import type { MessageComposer, UploadRequestOptions } from 'stream-chat'; +import type { FileLike, FileReference } from 'stream-chat'; + +/** Files whose name starts with this fail when the failure mode is `prefixed`. */ +export const FAILING_FILE_NAME_PREFIX = 'fail-'; + +export type UploadFailureMode = 'off' | 'all' | 'prefixed'; + +export type UploadHarnessSettings = { + /** Milliseconds every upload is stretched over. `0` uploads at full speed. */ + delayMs: number; + /** Which uploads should reject instead of completing. */ + failureMode: UploadFailureMode; +}; + +/** + * Dev-only harness wrapping `doUploadRequest`, so uploads can be slowed down and made to fail on + * demand from **Settings → Composer**. + * + * Without the delay there is nothing to look at: this app's Stream project caps uploads at 3 MiB, + * which lands in well under a second. Without the failure switch there is no way to reach the + * failed-message and retry paths from the UI. + * + * Both live in one function because a custom `doUploadRequest` cannot be un-set — + * `MessageComposer.updateConfig` merges via `mergeWith`, which skips `undefined` — and the + * attachment manager holds only one. So the harness is installed once and reads the current + * settings on every upload; with the delay at `0` and failures off it is a pass-through. + * + * Caveat: installing a custom `doUploadRequest` flips `hasCustomDoUploadRequest`, which slightly + * changes the guard in `uploadFiles`. Irrelevant for the demo, but it is why the harness is + * installed only once one of the switches is armed rather than unconditionally. + */ +const PROGRESS_STEPS = 20; +/** + * Share of the delay spent streaming bytes; the rest simulates the server thinking after the + * last byte was sent. That second phase is the whole point — progress reports 100 while the + * response is still outstanding, which is what `UploadRecord.uploadConfirmationPending` marks and + * what makes the indicator go indeterminate. + */ +const RAMP_SHARE = 0.6; + +const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +const getFileName = (fileLike: FileReference | FileLike) => + 'name' in fileLike && typeof fileLike.name === 'string' ? fileLike.name : ''; + +const shouldFail = (fileLike: FileReference | FileLike, mode: UploadFailureMode) => { + if (mode === 'all') return true; + if (mode === 'prefixed') { + return getFileName(fileLike).startsWith(FAILING_FILE_NAME_PREFIX); + } + return false; +}; + +export const installUploadHarness = ( + composer: MessageComposer, + /** + * Read at call time, not at install time, so changing either setting takes effect on the next + * upload without re-running the composer setup. + */ + getSettings: () => UploadHarnessSettings, +) => { + composer.attachmentManager.setCustomUploadFn( + async (fileLike: FileReference | FileLike, options?: UploadRequestOptions) => { + const { delayMs, failureMode } = getSettings(); + const failing = shouldFail(fileLike, failureMode); + + if (delayMs <= 0) { + if (failing) throw new Error('Simulated upload failure'); + return composer.attachmentManager.doDefaultUploadRequest(fileLike, options); + } + + const rampMs = delayMs * RAMP_SHARE; + const stepMs = rampMs / PROGRESS_STEPS; + + // Phase 1 — bytes going out over the wire. + for (let step = 1; step <= PROGRESS_STEPS; step += 1) { + await sleep(stepMs); + if (options?.abortSignal?.aborted) { + throw new DOMException('Upload aborted', 'AbortError'); + } + options?.onProgress?.(Math.round((step / PROGRESS_STEPS) * 100)); + } + + // Phase 2 — every byte is sent and progress reads 100, but the server has not answered. + // A failing upload rejects here rather than at the start, so there is time to send the + // message while the upload is still running and watch it fail afterwards. + await sleep(delayMs - rampMs); + if (options?.abortSignal?.aborted) { + throw new DOMException('Upload aborted', 'AbortError'); + } + if (failing) throw new Error('Simulated upload failure'); + + return composer.attachmentManager.doDefaultUploadRequest(fileLike, options); + }, + ); +}; diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss index a7bbf5723..f67fd5bfe 100644 --- a/examples/vite/src/index.scss +++ b/examples/vite/src/index.scss @@ -7,12 +7,14 @@ @import url('modern-normalize') layer(modern-normalize); @import url('stream-chat-react/dist/css/index.css') layer(stream-new); @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides); +@import url('./AppSettings/ActionsMenu/DraggableDialog.scss') layer(stream-app-overrides); @import url('./CustomMessageActions/CustomMessageActions.scss') layer(stream-app-overrides); @import url('./InlineEditMessage/InlineEditMessage.scss') layer(stream-app-overrides); @import url('./SystemNotification/SystemNotification.scss') layer(stream-app-overrides); @import url('./AccessibilityNavigation/ReturnToSkipNavigation.scss') layer(stream-app-overrides); +@import url('./Debug/ComposerInspector.scss') layer(stream-app-overrides); @import url('stream-chat-react/dist/css/emoji-picker.css') layer(stream-new-plugins); @import url('stream-chat-react/dist/css/channel-detail.css') layer(stream-new-plugins); @@ -699,4 +701,8 @@ body { transform: translateX(0); } } + .app__upload-delay-numeric-field input { + width: unset; + max-width: 8ch; + } } diff --git a/package.json b/package.json index 858af3924..2971bb26b 100644 --- a/package.json +++ b/package.json @@ -113,7 +113,7 @@ "modern-normalize": "^3.0.1", "react": "^19.0.0 || ^18.0.0 || ^17.0.0", "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0", - "stream-chat": "^9.50.2" + "stream-chat": "^9.52.0" }, "peerDependenciesMeta": { "@breezystack/lamejs": { @@ -178,7 +178,7 @@ "react-dom": "^19.2.6", "sass": "^1.100.0", "semantic-release": "^25.0.3", - "stream-chat": "^9.50.2", + "stream-chat": "^9.52.0", "typescript": "^6.0.3", "typescript-eslint": "^8.59.4", "vite": "^8.1.3", diff --git a/src/components/Attachment/AttachmentContainer.tsx b/src/components/Attachment/AttachmentContainer.tsx index 95dcb2332..00cd557c8 100644 --- a/src/components/Attachment/AttachmentContainer.tsx +++ b/src/components/Attachment/AttachmentContainer.tsx @@ -44,8 +44,14 @@ import { SUPPORTED_VIDEO_FORMATS, } from './utils'; import { useChannelStateContext } from '../../context/ChannelStateContext'; +import { useComponentContext } from '../../context/ComponentContext'; import type { ImageAttachmentConfiguration } from '../../types/types'; import { VisibilityDisclaimer } from './VisibilityDisclaimer'; +import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './components'; +import { + getAttachmentPreviewUrl, + hasPendingUploadState, +} from './hooks/useAttachmentUploadState'; import { VideoAttachment } from './VideoAttachment'; import type { AttachmentProps } from './Attachment'; @@ -178,18 +184,38 @@ export const GiphyContainer = (props: RenderAttachmentProps) => { ); }; +/** + * Whether there is anything to render the attachment from: a CDN url, or the local file while + * its upload is in flight — or after it failed, since a failed message can be retried and the + * user has to see what they are retrying. + * + * Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before + * the resolved URL is written back, and gating on the live record would blink the attachment out + * of the DOM in between. + */ +const hasRenderableSource = (attachment: Attachment | LocalAttachment) => + hasPendingUploadState(attachment) || + !!getAttachmentPreviewUrl(attachment, attachment.asset_url); + export const FileContainer = (props: RenderAttachmentProps) => { const { attachment } = props; + // Audio and voice recordings render nothing without a source — `useAudioPlayer` needs one — + // but their containers would still occupy layout, so they are filtered here too. if (isVoiceRecordingAttachment(attachment)) { - return ; + return hasRenderableSource(attachment) ? ( + + ) : null; } if (isAudioAttachment(attachment)) { - return ; + return hasRenderableSource(attachment) ? : null; } - if (!attachment.asset_url || !isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) { + if ( + !hasRenderableSource(attachment) || + !isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS) + ) { return null; } @@ -200,10 +226,16 @@ export const GalleryContainer = ({ attachment, ModalGallery = DefaultModalGallery, }: RenderGalleryProps) => { + const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } = + useComponentContext(); const items = useMemo( () => attachment.items.reduce((acc, attachment) => { - const item = toGalleryItemDescriptors(attachment); + // Falls back to the local blob preview while the upload is still in flight. + const item = toGalleryItemDescriptors({ + ...attachment, + image_url: getAttachmentPreviewUrl(attachment, attachment.image_url), + }); if (item) acc.push(item); return acc; }, []), @@ -212,12 +244,20 @@ export const GalleryContainer = ({ return ( + {/* One combined bar for the gallery — per-item overlays are not possible here, + because ModalGallery receives positioned descriptors, not the attachments. */} + ); }; export const ImageContainer = (props: RenderAttachmentProps) => { const { attachment, Image = DefaultImage } = props; + const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } = + useComponentContext(); const componentType = 'image'; const imageElement = useRef(null); const { imageAttachmentSizeHandler } = useChannelStateContext(); @@ -232,7 +272,9 @@ export const ImageContainer = (props: RenderAttachmentProps) => { } }, [imageElement, imageAttachmentSizeHandler, attachment]); - const imgUrlFromAttachment = attachment.image_url || attachment.thumb_url || ''; + // Falls back to the local blob preview while the upload is still in flight. + const imgUrlFromAttachment = + getAttachmentPreviewUrl(attachment, attachment.image_url, attachment.thumb_url) || ''; const imageConfig: GalleryItem = { ...toGalleryItemDescriptors({ @@ -248,6 +290,7 @@ export const ImageContainer = (props: RenderAttachmentProps) => {
+
@@ -257,6 +300,7 @@ export const ImageContainer = (props: RenderAttachmentProps) => { return ( + ); }; @@ -265,7 +309,8 @@ export const OtherFilesContainer = ({ attachment, File = DefaultFile, }: RenderAttachmentProps) => { - if (!attachment.asset_url) return null; + // Same check as FileContainer, repeated because this is exported and used directly too. + if (!hasRenderableSource(attachment)) return null; return ( @@ -301,18 +346,22 @@ export const VideoContainer = ( props: Omit & { attachment: VideoAttachmentType }, ) => { const { attachment, Media } = props; + const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } = + useComponentContext(); const componentType = 'media'; return attachment.actions?.length ? (
+
) : ( + ); }; diff --git a/src/components/Attachment/Audio.tsx b/src/components/Attachment/Audio.tsx index 5ece01381..4b99eda68 100644 --- a/src/components/Attachment/Audio.tsx +++ b/src/components/Attachment/Audio.tsx @@ -2,9 +2,14 @@ import React from 'react'; import type { Attachment } from 'stream-chat'; import { + AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator, FileSizeIndicator as DefaultFileSizeIndicator, DownloadButton, } from './components'; +import { + getAttachmentPreviewUrl, + useAttachmentUploadState, +} from './hooks/useAttachmentUploadState'; import type { AudioPlayerState } from '../AudioPlayback/AudioPlayer'; import { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback'; import { useStateStore } from '../../store'; @@ -16,11 +21,16 @@ import { DurationDisplay, ProgressBar } from '../AudioPlayback'; type AudioAttachmentUIProps = { audioPlayer: AudioPlayer; + attachment?: Attachment; }; // todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI -const AudioAttachmentUI = ({ audioPlayer }: AudioAttachmentUIProps) => { - const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext(); +const AudioAttachmentUI = ({ attachment, audioPlayer }: AudioAttachmentUIProps) => { + const { + AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator, + FileSizeIndicator = DefaultFileSizeIndicator, + } = useComponentContext(); + const { isUploading } = useAttachmentUploadState(attachment); const dataTestId = 'audio-widget'; const rootClassName = 'str-chat__message-attachment-audio-widget'; @@ -39,31 +49,29 @@ const AudioAttachmentUI = ({ audioPlayer }: AudioAttachmentUIProps) => {
- {durationSeconds ? ( - <> - - - + {/* + While uploading, the upload progress takes this slot — ahead of both the duration and + the file size. It has to outrank the duration: an audio attachment can carry one + (`attachment.duration`, or the player reading it off the local blob), and showing it + instead would leave an upload in flight with no indication at all. + */} + {isUploading ? ( + + ) : durationSeconds ? ( + ) : ( - <> - - - + )} +
@@ -88,7 +96,7 @@ const audioPlayerStateSelector = (state: AudioPlayerState) => ({ */ export const Audio = (props: AudioProps) => { const { - attachment: { asset_url, duration, file_size, mime_type, title }, + attachment: { asset_url, duration, file_size, mime_type, title, waveform_data }, } = props; /** @@ -109,10 +117,13 @@ export const Audio = (props: AudioProps) => { requester: message?.id && `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`, - src: asset_url, + // Falls back to the local blob preview while the upload is still in flight. + src: getAttachmentPreviewUrl(props.attachment, asset_url), title, - waveformData: props.attachment.waveform_data, + waveformData: waveform_data, }); - return audioPlayer ? : null; + return audioPlayer ? ( + + ) : null; }; diff --git a/src/components/Attachment/FileAttachment.tsx b/src/components/Attachment/FileAttachment.tsx index f52ed0330..90ef889db 100644 --- a/src/components/Attachment/FileAttachment.tsx +++ b/src/components/Attachment/FileAttachment.tsx @@ -4,18 +4,24 @@ import { FileIcon } from '../FileIcon'; import type { Attachment } from 'stream-chat'; import { + AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator, FileSizeIndicator as DefaultFileSizeIndicator, DownloadButton, } from './components'; +import { useAttachmentUploadState } from './hooks/useAttachmentUploadState'; export type FileAttachmentProps = { attachment: Attachment; }; export const FileAttachment = ({ attachment }: FileAttachmentProps) => { - const { AttachmentFileIcon, FileSizeIndicator = DefaultFileSizeIndicator } = - useComponentContext(); + const { + AttachmentFileIcon, + AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator, + FileSizeIndicator = DefaultFileSizeIndicator, + } = useComponentContext(); const FileIconComponent = AttachmentFileIcon ?? FileIcon; + const { isUploading } = useAttachmentUploadState(attachment); return (
{
- + {/* While uploading, the upload progress takes the place of the file size. */} + {isUploading ? ( + + ) : ( + + )}
+ {/* DownloadButton renders nothing without an asset_url, which a pending upload lacks. */} (null); const [attachmentConfiguration, setAttachmentConfiguration] = useState(); - const [showVideo, setShowVideo] = React.useState(!shouldGenerateVideoThumbnail); + // A video that mounted while uploading has been showing its player all along, so it stays on + // the player once the upload lands. Falling back to the thumbnail would swap the rendered + // element twice — once when `thumb_url` arrives, once when the user clicks play — and each swap + // resizes the bubble, because the bubble is `fit-content` and the three renderings (local + // `