stream-chat 9.42.3 → 9.43.0

package/dist/types/messageComposer/CustomDataManager.d.ts

@@ -6,6 +6,7 @@ export type CustomDataManagerState = {
     message: CustomMessageData;
     custom: CustomMessageComposerData;
 };
+export type CustomDataManagerSnapshot = CustomDataManagerState;
 export type CustomDataManagerOptions = {
     composer: MessageComposer;
     message?: DraftMessage | LocalMessage;
@@ -20,6 +21,8 @@ export declare class CustomDataManager {
     initState: ({ message }?: {
         message?: DraftMessage | LocalMessage;
     }) => void;
+    getSnapshot: () => CustomDataManagerSnapshot;
+    restoreSnapshot: (snapshot: CustomDataManagerSnapshot) => void;
     setMessageData(data: DeepPartial<CustomMessageData>): void;
     setCustomData(data: DeepPartial<CustomMessageComposerData>): void;
 }

package/dist/types/messageComposer/LocationComposer.d.ts

@@ -16,6 +16,7 @@ export type LiveLocationPreview = Omit<LiveLocationPayload, 'end_at'> & {
 export type LocationComposerState = {
     location: StaticLocationPreview | LiveLocationPreview | null;
 };
+export type LocationComposerSnapshot = LocationComposerState;
 export declare class LocationComposer {
     readonly state: StateStore<LocationComposerState>;
     readonly composer: MessageComposer;
@@ -28,6 +29,8 @@ export declare class LocationComposer {
     initState: ({ message }?: {
         message?: DraftMessage | LocalMessage;
     }) => void;
+    getSnapshot: () => LocationComposerSnapshot;
+    restoreSnapshot: (snapshot: LocationComposerSnapshot) => void;
     setData: (data: {
         durationMs?: number;
     } & Coords) => void;

package/dist/types/messageComposer/MessageComposerEffectHandlers.d.ts

@@ -0,0 +1,17 @@
+import type { MessageComposer, MessageComposerEffectHandler } from './messageComposer';
+export type MessageComposerEffectHandlersOptions = {
+    composer: MessageComposer;
+};
+export declare class MessageComposerEffectHandlers {
+    private options;
+    private handlers;
+    constructor(options: MessageComposerEffectHandlersOptions);
+    private registerDefaultHandlers;
+    registerEffectHandler: <T extends {
+        type: string;
+    }>(type: T["type"], handler: MessageComposerEffectHandler<T>) => void;
+    applyEffects: <T extends {
+        type: string;
+    }>(effects?: T[]) => void;
+    private applyEffect;
+}

package/dist/types/messageComposer/attachmentManager.d.ts

@@ -8,6 +8,7 @@ export type FileUploadFilter = (file: Partial<LocalUploadAttachment>) => boolean
 export type AttachmentManagerState = {
     attachments: LocalAttachment[];
 };
+export type AttachmentManagerSnapshot = AttachmentManagerState;
 export type AttachmentManagerOptions = {
     composer: MessageComposer;
     message?: DraftMessage | LocalMessage;
@@ -41,9 +42,15 @@ export declare class AttachmentManager {
     get pendingUploadsCount(): number;
     get availableUploadSlots(): number;
     getUploadsByState(state: AttachmentLoadingState): LocalAttachment[];
+    private cancelAttachmentUploads;
+    private normalizeSnapshotAttachment;
     initState: ({ message }?: {
         message?: DraftMessage | LocalMessage;
     }) => void;
+    getSnapshot: () => AttachmentManagerSnapshot;
+    restoreSnapshot: (snapshot: AttachmentManagerSnapshot) => void;
+    setAttachments: (attachments: LocalAttachment[]) => void;
+    clearAttachments: () => void;
     getAttachmentIndex: (localId: string) => number;
     private prepareAttachmentUpdate;
     updateAttachment: (attachmentToUpdate: LocalAttachment) => void;

package/dist/types/messageComposer/linkPreviewsManager.d.ts

@@ -7,7 +7,7 @@ export type LinkPreview = OGAttachment & {
     status: LinkPreviewStatus;
 };
 export interface ILinkPreviewsManager {
-    /** Function cancels all the scheduled or in-progress URL enrichment queries and resets the state. */
+    /** Function cancels all scheduled or in-progress URL enrichment queries. */
     cancelURLEnrichment: () => void;
     /** Function that triggers the search for URLs and their enrichment. */
     findAndEnrichUrls?: DebouncedFunc<(text: string) => void>;
@@ -29,6 +29,7 @@ export type LinkPreviewMap = Map<LinkURL, LinkPreview>;
 export type LinkPreviewsManagerState = {
     previews: LinkPreviewMap;
 };
+export type LinkPreviewsManagerSnapshot = LinkPreviewsManagerState;
 export type LinkPreviewsManagerOptions = {
     composer: MessageComposer;
     message?: DraftMessage | LocalMessage;
@@ -59,6 +60,8 @@ export declare class LinkPreviewsManager implements ILinkPreviewsManager {
     initState: ({ message }?: {
         message?: DraftMessage | LocalMessage;
     }) => void;
+    getSnapshot: () => LinkPreviewsManagerSnapshot;
+    restoreSnapshot: (snapshot: LinkPreviewsManagerSnapshot) => void;
     private _findAndEnrichUrls;
     cancelURLEnrichment: () => void;
     /**

package/dist/types/messageComposer/messageComposer.d.ts

@@ -11,10 +11,17 @@ import { StateStore } from '../store';
 import { generateUUIDv4 } from '../utils';
 import { Channel } from '../channel';
 import { Thread } from '../thread';
-import type { ChannelAPIResponse, DraftResponse, LocalMessage, LocalMessageBase, MessageResponse } from '../types';
+import type { ChannelAPIResponse, CommandResponse, DraftResponse, LocalMessage, LocalMessageBase, MessageResponse } from '../types';
 import { WithSubscriptions } from '../utils/WithSubscriptions';
 import type { StreamChat } from '../client';
 import type { MessageComposerConfig } from './configuration/types';
+import type { CommandSuggestionDisabledReason, TextComposerCommandActivationEffect, TextComposerCommandClearEffect } from './middleware/textComposer/types';
+import type { AttachmentManagerSnapshot } from './attachmentManager';
+import type { CustomDataManagerSnapshot } from './CustomDataManager';
+import type { LinkPreviewsManagerSnapshot } from './linkPreviewsManager';
+import type { LocationComposerSnapshot } from './LocationComposer';
+import type { PollComposerSnapshot } from './pollComposer';
+import type { TextComposerSnapshot } from './textComposer';
 import type { DeepPartial } from '../types.utility';
 type UnregisterSubscriptions = Unsubscribe;
 export type LastComposerChange = {
@@ -24,6 +31,22 @@ export type LastComposerChange = {
 export type EditingAuditState = {
     lastChange: LastComposerChange;
 };
+export type BuiltInMessageComposerEffect = TextComposerCommandActivationEffect | TextComposerCommandClearEffect;
+export type CustomMessageComposerEffect = {
+    type: string & {};
+} & Record<string, unknown>;
+export type MessageComposerEffect = BuiltInMessageComposerEffect | CustomMessageComposerEffect;
+export type MessageComposerEffectHandler<T extends {
+    type: string;
+} = MessageComposerEffect> = (effect: T, composer: MessageComposer) => void;
+export type MessageComposerSnapshot = {
+    attachmentManager: AttachmentManagerSnapshot;
+    customDataManager: CustomDataManagerSnapshot;
+    linkPreviewsManager: LinkPreviewsManagerSnapshot;
+    locationComposer: LocationComposerSnapshot;
+    pollComposer: PollComposerSnapshot;
+    textComposer: TextComposerSnapshot;
+};
 export type LocalMessageWithLegacyThreadId = LocalMessage & {
     legacyThreadId?: string;
 };
@@ -60,6 +83,8 @@ export declare class MessageComposer extends WithSubscriptions {
     pollComposer: PollComposer;
     locationComposer: LocationComposer;
     customDataManager: CustomDataManager;
+    private snapshots;
+    private effectHandlers;
     constructor({ composition, config, compositionContext, client, }: MessageComposerOptions);
     static evaluateContextType(compositionContext: CompositionContext): "message" | "channel" | "thread" | "legacy_thread";
     static constructTag(compositionContext: CompositionContext): `${ReturnType<typeof MessageComposer.evaluateContextType>}_${string}`;
@@ -76,6 +101,8 @@ export declare class MessageComposer extends WithSubscriptions {
     get draftId(): string | null;
     get lastChange(): LastComposerChange;
     get quotedMessage(): LocalMessageBase | null;
+    getCommandDisabledReason: (command: CommandResponse) => CommandSuggestionDisabledReason | undefined;
+    isCommandDisabled: (command: CommandResponse) => boolean;
     get pollId(): string | null;
     get showReplyInChannel(): boolean;
     get hasSendableData(): boolean;
@@ -89,6 +116,17 @@ export declare class MessageComposer extends WithSubscriptions {
     }) => void;
     initStateFromChannelResponse: (channelApiResponse: ChannelAPIResponse) => void;
     initEditingAuditState: (composition?: DraftResponse | MessageResponse | LocalMessage) => EditingAuditState;
+    clearSnapshots: () => void;
+    getSnapshot: () => MessageComposerSnapshot;
+    restoreSnapshot: (snapshot: MessageComposerSnapshot) => void;
+    captureSnapshot: (snapshot?: MessageComposerSnapshot) => void;
+    popSnapshot: () => MessageComposerSnapshot | undefined;
+    registerEffectHandler: <T extends {
+        type: string;
+    }>(type: T["type"], handler: MessageComposerEffectHandler<T>) => void;
+    applyEffects: <T extends {
+        type: string;
+    }>(effects?: T[]) => void;
     private logStateUpdateTimestamp;
     private logDraftUpdateTimestamp;
     registerDraftEventSubscriptions: () => () => void;

package/dist/types/messageComposer/middleware/textComposer/TextComposerMiddlewareExecutor.d.ts

@@ -1,10 +1,11 @@
 import { MiddlewareExecutor } from '../../../middleware';
 import type { ExecuteParams, MiddlewareExecutionResult, MiddlewareHandler } from '../../../middleware';
-import type { Suggestion, TextComposerMiddlewareExecutorOptions, TextComposerState } from './types';
+import type { Suggestion, TextComposerEffect, TextComposerMiddlewareExecutorOptions, TextComposerState } from './types';
 export type TextComposerMiddlewareExecutorState<T extends Suggestion = Suggestion> = TextComposerState<T> & {
     change?: {
         selectedSuggestion?: T;
     };
+    effects?: TextComposerEffect[];
 };
 export type TextComposerHandlerNames = 'onChange' | 'onSuggestionItemSelect';
 export type TextComposerMiddleware<T extends Suggestion = Suggestion> = {

package/dist/types/messageComposer/middleware/textComposer/commandEffects.d.ts

@@ -0,0 +1,5 @@
+import type { Middleware } from '../../../middleware';
+import type { CommandSuggestion } from './types';
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+export type CommandEffectsMiddleware = Middleware<TextComposerMiddlewareExecutorState<CommandSuggestion>, 'onChange' | 'onSuggestionItemSelect'>;
+export declare const createCommandEffectsMiddleware: () => CommandEffectsMiddleware;

package/dist/types/messageComposer/middleware/textComposer/commandUtils.d.ts

@@ -0,0 +1,7 @@
+import type { MessageComposer } from '../../messageComposer';
+import type { CommandResponse } from '../../../types';
+export declare function escapeCommandRegExp(text: string): string;
+export declare const getRawCommandName: (text?: string) => string | undefined;
+export declare const getCompleteCommandInString: (text: string) => string | null;
+export declare const stripCommandFromText: (text: string, commandName: string) => string;
+export declare const notifyCommandDisabled: (composer: MessageComposer, command: CommandResponse) => true | undefined;

package/dist/types/messageComposer/middleware/textComposer/commands.d.ts

@@ -2,6 +2,7 @@ import type { Channel } from '../../../channel';
 import type { Middleware } from '../../../middleware';
 import type { SearchSourceOptions } from '../../../search';
 import { BaseSearchSourceSync } from '../../../search';
+import type { MessageComposer } from '../../messageComposer';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 export declare class CommandSearchSource extends BaseSearchSourceSync<CommandSuggestion> {
@@ -35,5 +36,6 @@ export declare class CommandSearchSource extends BaseSearchSourceSync<CommandSug
 }
 export type CommandsMiddleware = Middleware<TextComposerMiddlewareExecutorState<CommandSuggestion>, 'onChange' | 'onSuggestionItemSelect'>;
 export declare const createCommandsMiddleware: (channel: Channel, options?: Partial<TextComposerMiddlewareOptions> & {
+    composer?: MessageComposer;
     searchSource?: CommandSearchSource;
 }) => CommandsMiddleware;

package/dist/types/messageComposer/middleware/textComposer/index.d.ts

@@ -1,5 +1,6 @@
 export * from './activeCommandGuard';
 export * from './commands';
+export * from './commandEffects';
 export * from './commandStringExtraction';
 export * from './mentions';
 export * from './validation';

package/dist/types/messageComposer/middleware/textComposer/textMiddlewareUtils.d.ts

@@ -10,7 +10,6 @@ export declare const getTriggerCharWithToken: ({ trigger, text, isCommand, accep
     isCommand?: boolean;
     acceptTrailingSpaces?: boolean;
 }) => string | null;
-export declare const getCompleteCommandInString: (text: string) => string | null;
 export declare const insertItemWithTrigger: ({ insertText, selection, text, trigger, }: {
     insertText: string;
     selection: TextSelection;
@@ -28,39 +27,6 @@ export declare const replaceWordWithEntity: ({ caretPosition, getEntityString, t
     getEntityString: (word: string) => Promise<string | null> | string | null;
     text: string;
 }) => Promise<string>;
-/**
- * Escapes a string for use in a regular expression
- * @param text - The string to escape
- * @returns The escaped string
- * What does this regex do?
-
- The regex escapes special regex characters by adding a backslash before them. Here's what it matches:
- - dash
- [ ] square brackets
- { } curly braces
- ( ) parentheses
- * asterisk
- + plus
- ? question mark
- . period
- , comma
- / forward slash
- \ backslash
- ^ caret
- $ dollar sign
- | pipe
- # hash
-
- The \\$& replacement adds a backslash before any matched character.
- This is needed when you want to use these characters literally
- in a regex pattern instead of their special regex meanings.
- For example:
- escapeRegExp("hello.world")  // Returns: "hello\.world"
- escapeRegExp("[test]")       // Returns: "\[test\]"
-
- This is commonly used when building dynamic regex patterns from user input to prevent special characters from being interpreted as regex syntax.
- */
-export declare function escapeRegExp(text: string): string;
 export type TokenizationPayload = {
     tokenizedDisplayName: {
         token: string;

package/dist/types/messageComposer/middleware/textComposer/types.d.ts

@@ -1,4 +1,5 @@
 import type { MessageComposer } from '../../messageComposer';
+import type { MessageComposerEffect } from '../../messageComposer';
 import type { CommandResponse, UserResponse } from '../../../types';
 import type { TokenizationPayload } from './textMiddlewareUtils';
 import type { SearchSource, SearchSourceSync } from '../../../search';
@@ -9,10 +10,22 @@ export type TextComposerSuggestion<T = unknown> = T & {
 export type BaseSuggestion = {
     id: string;
 };
+export type CommandSuggestionDisabledReason = 'editing' | 'quoted_message';
 export type CommandSuggestion = BaseSuggestion & CommandResponse;
 export type UserSuggestion = BaseSuggestion & UserResponse & TokenizationPayload;
 export type CustomValidSuggestion = BaseSuggestion & CustomTextComposerSuggestion;
 export type Suggestion = CommandSuggestion | UserSuggestion | CustomValidSuggestion;
+export type TextComposerStateSnapshot = TextComposerState;
+export type TextComposerCommandActivationStateToRestore = Partial<TextComposerStateSnapshot>;
+export type TextComposerCommandActivationEffect = {
+    command: CommandResponse;
+    stateToRestore?: TextComposerCommandActivationStateToRestore;
+    type: 'command.activate';
+};
+export type TextComposerCommandClearEffect = {
+    type: 'command.clear';
+};
+export type TextComposerEffect = MessageComposerEffect;
 export type TextComposerMiddlewareOptions = {
     minChars: number;
     trigger: string;

package/dist/types/messageComposer/pollComposer.d.ts

@@ -3,6 +3,7 @@ import { StateStore } from '../store';
 import { VotingVisibility } from '../types';
 import type { MessageComposer } from './messageComposer';
 import type { PollComposerFieldErrors, PollComposerState, UpdateFieldsData } from './middleware/pollComposer';
+export type PollComposerSnapshot = PollComposerState;
 export type PollComposerOptions = {
     composer: MessageComposer;
 };
@@ -25,6 +26,8 @@ export declare class PollComposer {
     get voting_visibility(): VotingVisibility | undefined;
     get canCreatePoll(): boolean;
     initState: () => void;
+    getSnapshot: () => PollComposerSnapshot;
+    restoreSnapshot: (snapshot: PollComposerSnapshot) => void;
     /**
      * Updates specified fields and generates relevant errors
      * @param data

package/dist/types/messageComposer/textComposer.d.ts

@@ -2,7 +2,7 @@ import { TextComposerMiddlewareExecutor } from './middleware';
 import { StateStore } from '../store';
 import type { TextComposerSuggestion } from './middleware/textComposer/types';
 import type { TextSelection } from './middleware/textComposer/types';
-import type { TextComposerState } from './middleware/textComposer/types';
+import type { TextComposerState, TextComposerStateSnapshot } from './middleware/textComposer/types';
 import type { Suggestions } from './middleware/textComposer/types';
 import type { MessageComposer } from './messageComposer';
 import type { CommandResponse, DraftMessage, LocalMessage, UserResponse } from '../types';
@@ -10,6 +10,7 @@ export type TextComposerOptions = {
     composer: MessageComposer;
     message?: DraftMessage | LocalMessage;
 };
+export type TextComposerSnapshot = TextComposerStateSnapshot;
 export declare const textIsEmpty: (text: string) => boolean;
 export declare class TextComposer {
     readonly composer: MessageComposer;
@@ -37,6 +38,8 @@ export declare class TextComposer {
     initState: ({ message }?: {
         message?: DraftMessage | LocalMessage;
     }) => void;
+    getSnapshot: (state?: TextComposerState) => TextComposerSnapshot;
+    restoreSnapshot: (snapshot: TextComposerSnapshot) => void;
     setMentionedUsers(users: UserResponse[]): void;
     clearCommand(): void;
     upsertMentionedUser: (user: UserResponse) => void;
@@ -56,6 +59,7 @@ export declare class TextComposer {
     }) => void;
     setSuggestions: (suggestions: Suggestions) => void;
     closeSuggestions: () => void;
+    private commitState;
     handleChange: ({ text, selection, }: {
         selection: TextSelection;
         text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.42.3",
+  "version": "9.43.0",
   "description": "JS SDK for the Stream Chat API",
   "homepage": "https://getstream.io/chat/",
   "author": {

package/src/messageComposer/CustomDataManager.ts

@@ -13,6 +13,8 @@ export type CustomDataManagerState = {
   custom: CustomMessageComposerData;
 };
 
+export type CustomDataManagerSnapshot = CustomDataManagerState;
+
 export type CustomDataManagerOptions = {
   composer: MessageComposer;
   message?: DraftMessage | LocalMessage;
@@ -50,6 +52,12 @@ export class CustomDataManager {
     this.state.next(initState({ composer: this.composer, message }));
   };
 
+  getSnapshot = (): CustomDataManagerSnapshot => this.state.getLatestValue();
+
+  restoreSnapshot = (snapshot: CustomDataManagerSnapshot) => {
+    this.state.next(snapshot);
+  };
+
   setMessageData(data: DeepPartial<CustomMessageData>) {
     this.state.partialNext({
       message: {

package/src/messageComposer/LocationComposer.ts

@@ -24,6 +24,8 @@ export type LocationComposerState = {
   location: StaticLocationPreview | LiveLocationPreview | null;
 };
 
+export type LocationComposerSnapshot = LocationComposerState;
+
 const MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1000; // 1 minute;
 
 const initState = ({
@@ -79,6 +81,12 @@ export class LocationComposer {
     this.state.next(initState({ message }));
   };
 
+  getSnapshot = (): LocationComposerSnapshot => this.state.getLatestValue();
+
+  restoreSnapshot = (snapshot: LocationComposerSnapshot) => {
+    this.state.next(snapshot);
+  };
+
   setData = (data: { durationMs?: number } & Coords) => {
     if (!this.config.enabled) return;
     if (!data.latitude || !data.longitude) return;

package/src/messageComposer/MessageComposerEffectHandlers.ts

@@ -0,0 +1,87 @@
+import type { MessageComposer, MessageComposerEffectHandler } from './messageComposer';
+import type {
+  TextComposerCommandActivationEffect,
+  TextComposerCommandClearEffect,
+} from './middleware/textComposer/types';
+
+type RegisteredMessageComposerEffectHandler = (
+  effect: { type: string },
+  composer: MessageComposer,
+) => void;
+
+export type MessageComposerEffectHandlersOptions = {
+  composer: MessageComposer;
+};
+
+const applyCommandActivationEffect: MessageComposerEffectHandler<
+  TextComposerCommandActivationEffect
+> = (effect, composer) => {
+  const snapshot = composer.getSnapshot();
+  if (effect.stateToRestore) {
+    snapshot.textComposer = {
+      ...snapshot.textComposer,
+      ...effect.stateToRestore,
+      command: null,
+    };
+  }
+  composer.captureSnapshot(snapshot);
+
+  // we manually clear because we want the command to still persist
+  composer.textComposer.state.next({
+    command: effect.command,
+    mentionedUsers: [],
+    suggestions: undefined,
+    selection: { start: 0, end: 0 },
+    text: '',
+  });
+  composer.attachmentManager.initState();
+  composer.linkPreviewsManager.initState();
+  composer.locationComposer.initState();
+  composer.pollComposer.initState();
+  composer.customDataManager.initState();
+};
+
+const applyCommandClearEffect: MessageComposerEffectHandler<
+  TextComposerCommandClearEffect
+> = (_, composer) => {
+  const snapshot = composer.popSnapshot();
+
+  if (!snapshot) return;
+
+  composer.restoreSnapshot(snapshot);
+};
+
+export class MessageComposerEffectHandlers {
+  private handlers = new Map<string, RegisteredMessageComposerEffectHandler>();
+
+  constructor(private options: MessageComposerEffectHandlersOptions) {
+    this.registerDefaultHandlers();
+  }
+
+  private registerDefaultHandlers = () => {
+    this.registerEffectHandler<TextComposerCommandActivationEffect>(
+      'command.activate',
+      applyCommandActivationEffect,
+    );
+    this.registerEffectHandler<TextComposerCommandClearEffect>(
+      'command.clear',
+      applyCommandClearEffect,
+    );
+  };
+
+  registerEffectHandler = <T extends { type: string }>(
+    type: T['type'],
+    handler: MessageComposerEffectHandler<T>,
+  ): void => {
+    this.handlers.set(type, handler as RegisteredMessageComposerEffectHandler);
+  };
+
+  applyEffects = <T extends { type: string }>(effects: T[] = []) => {
+    effects.forEach((effect) => this.applyEffect(effect));
+  };
+
+  private applyEffect = (effect: { type: string }) => {
+    const handler = this.handlers.get(effect.type);
+    handler?.(effect, this.options.composer);
+  };
+}

package/src/messageComposer/attachmentManager.ts

@@ -41,6 +41,8 @@ export type AttachmentManagerState = {
   attachments: LocalAttachment[];
 };
 
+export type AttachmentManagerSnapshot = AttachmentManagerState;
+
 export type AttachmentManagerOptions = {
   composer: MessageComposer;
   message?: DraftMessage | LocalMessage;
@@ -208,10 +210,63 @@ export class AttachmentManager {
     );
   }
 
+  private cancelAttachmentUploads = (attachments: LocalAttachment[]) => {
+    for (const { localMetadata } of attachments) {
+      this.client.uploadManager.deleteUploadRecord(localMetadata.id);
+    }
+  };
+
+  private normalizeSnapshotAttachment = (attachment: LocalAttachment) => {
+    if (attachment.localMetadata.uploadState !== 'uploading') return attachment;
+
+    this.client.uploadManager.deleteUploadRecord(attachment.localMetadata.id);
+
+    return {
+      ...attachment,
+      localMetadata: {
+        ...attachment.localMetadata,
+        uploadProgress: undefined,
+        uploadState: 'failed',
+      },
+    } as LocalAttachment;
+  };
+
   initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
+    this.cancelAttachmentUploads(this.attachments);
     this.state.next(initState({ message }));
   };
 
+  getSnapshot = (): AttachmentManagerSnapshot => {
+    const state = this.state.getLatestValue();
+    let hasUpdates = false;
+    const attachments = state.attachments.map(this.normalizeSnapshotAttachment);
+
+    for (let i = 0; i < attachments.length; i++) {
+      if (attachments[i] !== state.attachments[i]) {
+        hasUpdates = true;
+        break;
+      }
+    }
+
+    return hasUpdates ? { ...state, attachments } : state;
+  };
+
+  restoreSnapshot = (snapshot: AttachmentManagerSnapshot) => {
+    this.cancelAttachmentUploads(this.attachments);
+    this.state.next(snapshot);
+  };
+
+  setAttachments = (attachments: LocalAttachment[]) => {
+    this.state.partialNext({ attachments });
+  };
+
+  clearAttachments = () => {
+    if (!this.attachments.length) return;
+    this.removeAttachments(
+      this.attachments.map((attachment) => attachment.localMetadata.id),
+    );
+  };
+
   getAttachmentIndex = (localId: string) => {
     const attachmentsById = this.attachmentsById;
 

package/src/messageComposer/linkPreviewsManager.ts

@@ -11,7 +11,7 @@ export type LinkPreview = OGAttachment & {
 };
 
 export interface ILinkPreviewsManager {
-  /** Function cancels all the scheduled or in-progress URL enrichment queries and resets the state. */
+  /** Function cancels all scheduled or in-progress URL enrichment queries. */
   cancelURLEnrichment: () => void;
   /** Function that triggers the search for URLs and their enrichment. */
   findAndEnrichUrls?: DebouncedFunc<(text: string) => void>;
@@ -38,6 +38,8 @@ export type LinkPreviewsManagerState = {
   previews: LinkPreviewMap;
 };
 
+export type LinkPreviewsManagerSnapshot = LinkPreviewsManagerState;
+
 export type LinkPreviewsManagerOptions = {
   composer: MessageComposer;
   message?: DraftMessage | LocalMessage;
@@ -186,9 +188,16 @@ export class LinkPreviewsManager implements ILinkPreviewsManager {
   }
 
   initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
+    this.cancelURLEnrichment();
     this.state.next(initState({ message: this.enabled ? message : undefined }));
   };
 
+  getSnapshot = (): LinkPreviewsManagerSnapshot => this.state.getLatestValue();
+
+  restoreSnapshot = (snapshot: LinkPreviewsManagerSnapshot) => {
+    this.state.next(snapshot);
+  };
+
   private _findAndEnrichUrls = async (text: string) => {
     if (!this.enabled) return;
     const urls = this.config.findURLFn(text);
@@ -254,8 +263,8 @@ export class LinkPreviewsManager implements ILinkPreviewsManager {
   };
 
   cancelURLEnrichment = () => {
-    this.findAndEnrichUrls.cancel();
-    this.findAndEnrichUrls.flush();
+    this.findAndEnrichUrls.cancel?.();
+    this.findAndEnrichUrls.flush?.();
   };
 
   /**