diff --git a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
index 50682e18e7..e20ea0a3f3 100644
--- a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
+++ b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
@@ -18,6 +18,10 @@ import {
   AttachmentPromptDialog,
   attachmentPromptDialogId,
 } from './AttachmentPromptDialog';
+import {
+  WebSocketEventPromptDialog,
+  webSocketEventPromptDialogId,
+} from './WebSocketEventPromptDialog';
 
 const actionsMenuDialogId = 'app-actions-menu';
 
@@ -91,6 +95,20 @@ function TriggerAttachmentAction({ onTrigger }: { onTrigger: () => void }) {
   );
 }
 
+function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) {
+  const { closeMenu } = useContextMenuContext();
+
+  return (
+    <ContextMenuButton
+      label='Trigger WS Event'
+      onClick={() => {
+        closeMenu();
+        onTrigger();
+      }}
+    />
+  );
+}
+
 const ActionsMenuInner = ({ iconOnly }: { iconOnly: boolean }) => {
   const [menuButtonElement, setMenuButtonElement] = useState<HTMLButtonElement | null>(
     null,
@@ -104,6 +122,9 @@ const ActionsMenuInner = ({ iconOnly }: { iconOnly: boolean }) => {
   const { dialog: attachmentDialog } = useDialogOnNearestManager({
     id: attachmentPromptDialogId,
   });
+  const { dialog: webSocketEventDialog } = useDialogOnNearestManager({
+    id: webSocketEventPromptDialogId,
+  });
   const menuIsOpen = useDialogIsOpen(actionsMenuDialogId, dialogManager?.id);
 
   return (
@@ -127,9 +148,11 @@ const ActionsMenuInner = ({ iconOnly }: { iconOnly: boolean }) => {
       >
         <TriggerNotificationAction onTrigger={notificationDialog.open} />
         <TriggerAttachmentAction onTrigger={attachmentDialog.open} />
+        <TriggerWebSocketEventAction onTrigger={webSocketEventDialog.open} />
       </ContextMenu>
       <NotificationPromptDialog referenceElement={menuButtonElement} />
       <AttachmentPromptDialog referenceElement={menuButtonElement} />
+      <WebSocketEventPromptDialog referenceElement={menuButtonElement} />
     </div>
   );
 };
diff --git a/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx
index c095c4a4bd..e213d620e1 100644
--- a/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx
+++ b/examples/vite/src/AppSettings/ActionsMenu/AttachmentPromptDialog.tsx
@@ -1,18 +1,16 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { PointerEvent as ReactPointerEvent } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { LocalAttachment } from 'stream-chat';
 import {
-  DialogAnchor,
   Prompt,
   useChatContext,
   useDialogIsOpen,
   useDialogOnNearestManager,
 } from 'stream-chat-react';
+import { DraggableDialog } from './DraggableDialog';
 
 export const attachmentPromptDialogId = 'app-attachment-prompt-dialog';
 type AttachmentEditorTab = 'unsupported-file' | 'unsupported-object';
 
-const VIEWPORT_MARGIN = 8;
 const defaultUnsupportedAttachment = {
   asset_url: 'https://example.com/unsupported.bin',
   file_size: 128000,
@@ -43,11 +41,6 @@ const initialUnsupportedObjectValue = JSON.stringify(
   2,
 );
 
-const clamp = (value: number, min: number, max: number) => {
-  if (max < min) return min;
-  return Math.min(Math.max(value, min), max);
-};
-
 export const AttachmentPromptDialog = ({
   referenceElement,
 }: {
@@ -61,8 +54,6 @@ export const AttachmentPromptDialog = ({
     initialUnsupportedObjectValue,
   );
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-  const shellRef = useRef<HTMLDivElement | null>(null);
   const { channel } = useChatContext();
   const { dialog, dialogManager } = useDialogOnNearestManager({
     id: attachmentPromptDialogId,
@@ -75,41 +66,6 @@ export const AttachmentPromptDialog = ({
     setUnsupportedFileInput(initialUnsupportedFileValue);
     setUnsupportedObjectInput(initialUnsupportedObjectValue);
     setErrorMessage(null);
-    setDragOffset({ x: 0, y: 0 });
-  }, [dialogIsOpen]);
-
-  useEffect(() => {
-    if (!dialogIsOpen) return;
-
-    const clampToViewport = () => {
-      const shell = shellRef.current;
-      if (!shell) return;
-
-      const rect = shell.getBoundingClientRect();
-      const nextLeft = clamp(
-        rect.left,
-        VIEWPORT_MARGIN,
-        window.innerWidth - rect.width - VIEWPORT_MARGIN,
-      );
-      const nextTop = clamp(
-        rect.top,
-        VIEWPORT_MARGIN,
-        window.innerHeight - rect.height - VIEWPORT_MARGIN,
-      );
-
-      if (nextLeft === rect.left && nextTop === rect.top) return;
-
-      setDragOffset((current) => ({
-        x: current.x + (nextLeft - rect.left),
-        y: current.y + (nextTop - rect.top),
-      }));
-    };
-
-    window.addEventListener('resize', clampToViewport);
-
-    return () => {
-      window.removeEventListener('resize', clampToViewport);
-    };
   }, [dialogIsOpen]);
 
   const closeDialog = useCallback(() => {
@@ -145,159 +101,99 @@ export const AttachmentPromptDialog = ({
     [channel, closeDialog, unsupportedFileInput, unsupportedObjectInput],
   );
 
-  const handleHeaderPointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (event.button !== 0) return;
-      if (!(event.target instanceof HTMLElement)) return;
-      if (event.target.closest('button')) return;
-
-      const shell = shellRef.current;
-      if (!shell) return;
-
-      event.preventDefault();
-
-      const startClientX = event.clientX;
-      const startClientY = event.clientY;
-      const startOffset = dragOffset;
-      const startRect = shell.getBoundingClientRect();
-
-      const handlePointerMove = (moveEvent: PointerEvent) => {
-        const nextLeft = clamp(
-          startRect.left + (moveEvent.clientX - startClientX),
-          VIEWPORT_MARGIN,
-          window.innerWidth - startRect.width - VIEWPORT_MARGIN,
-        );
-        const nextTop = clamp(
-          startRect.top + (moveEvent.clientY - startClientY),
-          VIEWPORT_MARGIN,
-          window.innerHeight - startRect.height - VIEWPORT_MARGIN,
-        );
-
-        setDragOffset({
-          x: startOffset.x + (nextLeft - startRect.left),
-          y: startOffset.y + (nextTop - startRect.top),
-        });
-      };
-
-      const handlePointerUp = () => {
-        window.removeEventListener('pointermove', handlePointerMove);
-        window.removeEventListener('pointerup', handlePointerUp);
-      };
-
-      window.addEventListener('pointermove', handlePointerMove);
-      window.addEventListener('pointerup', handlePointerUp);
-    },
-    [dragOffset],
-  );
-
-  const shellStyle = {
-    transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)`,
-  };
-
   return (
-    <DialogAnchor
-      allowFlip
-      className='app__attachment-dialog'
+    <DraggableDialog
+      dialogClassName='app__attachment-dialog'
+      dialogId={attachmentPromptDialogId}
+      dialogIsOpen={dialogIsOpen}
       dialogManagerId={dialogManager?.id}
-      id={attachmentPromptDialogId}
-      placement='right-start'
+      dragHandleClassName='app__attachment-dialog__drag-handle'
+      onClose={closeDialog}
+      promptClassName='app__attachment-dialog__prompt'
       referenceElement={referenceElement}
-      tabIndex={-1}
-      trapFocus
-      updatePositionOnContentResize
+      shellClassName='app__attachment-dialog__shell'
+      title='Message Composer'
     >
-      <div className='app__attachment-dialog__shell' ref={shellRef} style={shellStyle}>
-        <Prompt.Root className='app__attachment-dialog__prompt'>
+      <Prompt.Body className='app__attachment-dialog__body'>
+        <div className='app__attachment-dialog__subsection'>
+          <h3 className='app__attachment-dialog__subsection-title'>
+            Attach Unsupported Attachment
+          </h3>
           <div
-            className='app__attachment-dialog__drag-handle'
-            onPointerDown={handleHeaderPointerDown}
+            aria-label='Attachment type'
+            className='app__attachment-dialog__tabs'
+            role='tablist'
           >
-            <Prompt.Header close={closeDialog} title='Message Composer' />
+            <button
+              aria-selected={activeTab === 'unsupported-file'}
+              className='app__attachment-dialog__tab'
+              onClick={() => {
+                setActiveTab('unsupported-file');
+                if (errorMessage) setErrorMessage(null);
+              }}
+              role='tab'
+              type='button'
+            >
+              Unsupported file
+            </button>
+            <button
+              aria-selected={activeTab === 'unsupported-object'}
+              className='app__attachment-dialog__tab'
+              onClick={() => {
+                setActiveTab('unsupported-object');
+                if (errorMessage) setErrorMessage(null);
+              }}
+              role='tab'
+              type='button'
+            >
+              Unsupported object
+            </button>
           </div>
-          <Prompt.Body className='app__attachment-dialog__body'>
-            <div className='app__attachment-dialog__subsection'>
-              <h3 className='app__attachment-dialog__subsection-title'>
-                Attach Unsupported Attachment
-              </h3>
-              <div
-                aria-label='Attachment type'
-                className='app__attachment-dialog__tabs'
-                role='tablist'
+          <label className='app__attachment-dialog__field'>
+            <span className='app__attachment-dialog__field-label'>Attachment JSON</span>
+            <textarea
+              className='app__attachment-dialog__textarea'
+              onChange={(event) => {
+                if (activeTab === 'unsupported-file') {
+                  setUnsupportedFileInput(event.target.value);
+                } else {
+                  setUnsupportedObjectInput(event.target.value);
+                }
+                if (errorMessage) setErrorMessage(null);
+              }}
+              rows={12}
+              spellCheck={false}
+              value={
+                activeTab === 'unsupported-file'
+                  ? unsupportedFileInput
+                  : unsupportedObjectInput
+              }
+            />
+          </label>
+          <div className='app__attachment-dialog__subsection-actions'>
+            {activeTab === 'unsupported-file' ? (
+              <Prompt.FooterControlsButtonPrimary
+                size='sm'
+                onClick={() => attachToComposer('unsupported-file')}
+              >
+                Attach Unsupported file
+              </Prompt.FooterControlsButtonPrimary>
+            ) : (
+              <Prompt.FooterControlsButtonPrimary
+                size='sm'
+                onClick={() => attachToComposer('unsupported-object')}
               >
-                <button
-                  aria-selected={activeTab === 'unsupported-file'}
-                  className='app__attachment-dialog__tab'
-                  onClick={() => {
-                    setActiveTab('unsupported-file');
-                    if (errorMessage) setErrorMessage(null);
-                  }}
-                  role='tab'
-                  type='button'
-                >
-                  Unsupported file
-                </button>
-                <button
-                  aria-selected={activeTab === 'unsupported-object'}
-                  className='app__attachment-dialog__tab'
-                  onClick={() => {
-                    setActiveTab('unsupported-object');
-                    if (errorMessage) setErrorMessage(null);
-                  }}
-                  role='tab'
-                  type='button'
-                >
-                  Unsupported object
-                </button>
-              </div>
-              <label className='app__attachment-dialog__field'>
-                <span className='app__attachment-dialog__field-label'>
-                  Attachment JSON
-                </span>
-                <textarea
-                  className='app__attachment-dialog__textarea'
-                  onChange={(event) => {
-                    if (activeTab === 'unsupported-file') {
-                      setUnsupportedFileInput(event.target.value);
-                    } else {
-                      setUnsupportedObjectInput(event.target.value);
-                    }
-                    if (errorMessage) setErrorMessage(null);
-                  }}
-                  rows={12}
-                  spellCheck={false}
-                  value={
-                    activeTab === 'unsupported-file'
-                      ? unsupportedFileInput
-                      : unsupportedObjectInput
-                  }
-                />
-              </label>
-              <div className='app__attachment-dialog__subsection-actions'>
-                {activeTab === 'unsupported-file' ? (
-                  <Prompt.FooterControlsButtonPrimary
-                    size='sm'
-                    onClick={() => attachToComposer('unsupported-file')}
-                  >
-                    Attach Unsupported file
-                  </Prompt.FooterControlsButtonPrimary>
-                ) : (
-                  <Prompt.FooterControlsButtonPrimary
-                    size='sm'
-                    onClick={() => attachToComposer('unsupported-object')}
-                  >
-                    Attach Unsupported object
-                  </Prompt.FooterControlsButtonPrimary>
-                )}
-              </div>
-              {errorMessage && (
-                <div className='app__attachment-dialog__error' role='alert'>
-                  {errorMessage}
-                </div>
-              )}
+                Attach Unsupported object
+              </Prompt.FooterControlsButtonPrimary>
+            )}
+          </div>
+          {errorMessage && (
+            <div className='app__attachment-dialog__error' role='alert'>
+              {errorMessage}
             </div>
-          </Prompt.Body>
-        </Prompt.Root>
-      </div>
-    </DialogAnchor>
+          )}
+        </div>
+      </Prompt.Body>
+    </DraggableDialog>
   );
 };
diff --git a/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx
new file mode 100644
index 0000000000..5959f278cf
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/DraggableDialog.tsx
@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+import { DialogAnchor, ModalContextProvider, Prompt } from 'stream-chat-react';
+
+const VIEWPORT_MARGIN = 8;
+
+const clamp = (value: number, min: number, max: number) => {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+};
+
+export const DraggableDialog = ({
+  children,
+  dialogClassName,
+  dialogId,
+  dialogIsOpen,
+  dialogManagerId,
+  dragHandleClassName,
+  onClose,
+  promptClassName,
+  referenceElement,
+  shellClassName,
+  title,
+}: {
+  children: ReactNode;
+  dialogClassName: string;
+  dialogId: string;
+  dialogIsOpen: boolean;
+  dialogManagerId?: string;
+  dragHandleClassName: string;
+  onClose: () => void;
+  promptClassName: string;
+  referenceElement: HTMLElement | null;
+  shellClassName: string;
+  title: string;
+}) => {
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const shellRef = useRef<HTMLDivElement | null>(null);
+  const modalContextValue = {
+    close: onClose,
+    dialogId,
+  };
+
+  useEffect(() => {
+    if (dialogIsOpen) return;
+    setDragOffset({ x: 0, y: 0 });
+  }, [dialogIsOpen]);
+
+  useEffect(() => {
+    if (!dialogIsOpen) return;
+
+    const clampToViewport = () => {
+      const shell = shellRef.current;
+      if (!shell) return;
+
+      const rect = shell.getBoundingClientRect();
+      const nextLeft = clamp(
+        rect.left,
+        VIEWPORT_MARGIN,
+        window.innerWidth - rect.width - VIEWPORT_MARGIN,
+      );
+      const nextTop = clamp(
+        rect.top,
+        VIEWPORT_MARGIN,
+        window.innerHeight - rect.height - VIEWPORT_MARGIN,
+      );
+
+      if (nextLeft === rect.left && nextTop === rect.top) return;
+
+      setDragOffset((current) => ({
+        x: current.x + (nextLeft - rect.left),
+        y: current.y + (nextTop - rect.top),
+      }));
+    };
+
+    window.addEventListener('resize', clampToViewport);
+
+    return () => {
+      window.removeEventListener('resize', clampToViewport);
+    };
+  }, [dialogIsOpen]);
+
+  const handleHeaderPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.button !== 0) return;
+      if (!(event.target instanceof HTMLElement)) return;
+      if (event.target.closest('button')) return;
+
+      const shell = shellRef.current;
+      if (!shell) return;
+
+      event.preventDefault();
+
+      const startClientX = event.clientX;
+      const startClientY = event.clientY;
+      const startOffset = dragOffset;
+      const startRect = shell.getBoundingClientRect();
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const nextLeft = clamp(
+          startRect.left + (moveEvent.clientX - startClientX),
+          VIEWPORT_MARGIN,
+          window.innerWidth - startRect.width - VIEWPORT_MARGIN,
+        );
+        const nextTop = clamp(
+          startRect.top + (moveEvent.clientY - startClientY),
+          VIEWPORT_MARGIN,
+          window.innerHeight - startRect.height - VIEWPORT_MARGIN,
+        );
+
+        setDragOffset({
+          x: startOffset.x + (nextLeft - startRect.left),
+          y: startOffset.y + (nextTop - startRect.top),
+        });
+      };
+
+      const handlePointerUp = () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+      };
+
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+    },
+    [dragOffset],
+  );
+
+  const shellStyle: CSSProperties = {
+    transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)`,
+  };
+
+  return (
+    <DialogAnchor
+      allowFlip
+      className={dialogClassName}
+      dialogManagerId={dialogManagerId}
+      id={dialogId}
+      placement='right-start'
+      referenceElement={referenceElement}
+      tabIndex={-1}
+      trapFocus
+      updatePositionOnContentResize
+    >
+      <div className={shellClassName} ref={shellRef} style={shellStyle}>
+        <ModalContextProvider value={modalContextValue}>
+          <Prompt.Root className={promptClassName}>
+            <div className={dragHandleClassName} onPointerDown={handleHeaderPointerDown}>
+              <Prompt.Header close={onClose} title={title} />
+            </div>
+            {children}
+          </Prompt.Root>
+        </ModalContextProvider>
+      </div>
+    </DialogAnchor>
+  );
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/MessageInfoPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/MessageInfoPromptDialog.tsx
new file mode 100644
index 0000000000..133bc87412
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/MessageInfoPromptDialog.tsx
@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import type { LocalMessage } from 'stream-chat';
+import { Prompt } from 'stream-chat-react';
+
+import { DraggableDialog } from './DraggableDialog';
+
+const safeJsonStringify = (value: unknown) => {
+  const seen = new WeakSet<object>();
+
+  return JSON.stringify(
+    value,
+    (_, currentValue: unknown) => {
+      if (typeof currentValue === 'bigint') return currentValue.toString();
+      if (!currentValue || typeof currentValue !== 'object') return currentValue;
+      if (seen.has(currentValue)) return '[Circular]';
+      seen.add(currentValue);
+      return currentValue;
+    },
+    2,
+  );
+};
+
+export const messageInfoPromptDialogId = 'app-message-info-prompt-dialog';
+
+export const MessageInfoPromptDialog = ({
+  dialogId,
+  dialogIsOpen,
+  dialogManagerId,
+  message,
+  onClose,
+  referenceElement,
+}: {
+  dialogId: string;
+  dialogIsOpen: boolean;
+  dialogManagerId?: string;
+  message: LocalMessage | null;
+  onClose: () => void;
+  referenceElement: HTMLElement | null;
+}) => {
+  const messageJson = useMemo(() => {
+    if (!message) return '';
+
+    try {
+      return safeJsonStringify(message);
+    } catch (error) {
+      if (error instanceof Error) return error.message;
+      return 'Unable to serialize message';
+    }
+  }, [message]);
+
+  return (
+    <DraggableDialog
+      dialogClassName='app__message-info-dialog'
+      dialogId={dialogId}
+      dialogIsOpen={dialogIsOpen}
+      dialogManagerId={dialogManagerId}
+      dragHandleClassName='app__message-info-dialog__drag-handle'
+      onClose={onClose}
+      promptClassName='app__message-info-dialog__prompt'
+      referenceElement={referenceElement}
+      shellClassName='app__message-info-dialog__shell'
+      title='Message info'
+    >
+      <Prompt.Body className='app__message-info-dialog__body'>
+        <div className='app__message-info-dialog__field'>
+          <span className='app__message-info-dialog__field-label'>Message JSON</span>
+          <pre className='app__message-info-dialog__code-block'>
+            <code>{messageJson}</code>
+          </pre>
+        </div>
+      </Prompt.Body>
+    </DraggableDialog>
+  );
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx
index 798b438a8b..f8f49cbd7d 100644
--- a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx
+++ b/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx
@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import type { Dispatch, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 import type { NotificationSeverity } from 'stream-chat';
 import {
   IconArrowDown,
   IconArrowLeft,
   IconChevronRight,
   Button,
-  DialogAnchor,
   IconRefresh,
   IconArrowUp,
   IconCheckmark,
@@ -25,6 +24,7 @@ import {
   type NotificationListEnterFrom,
   type NotificationTargetPanel,
 } from 'stream-chat-react';
+import { DraggableDialog } from './DraggableDialog';
 import {
   buildNotificationActions,
   entryDirectionOptions,
@@ -39,13 +39,6 @@ import {
 
 export const notificationPromptDialogId = 'app-notification-prompt-dialog';
 
-const VIEWPORT_MARGIN = 8;
-
-const clamp = (value: number, min: number, max: number) => {
-  if (max < min) return min;
-  return Math.min(Math.max(value, min), max);
-};
-
 const severityIcons: Partial<
   Record<NotificationSeverity, React.ComponentType<{ className?: string }>>
 > = {
@@ -336,9 +329,7 @@ export const NotificationPromptDialog = ({
   const [queuedNotifications, setQueuedNotifications] = useState<QueuedNotification[]>(
     [],
   );
-  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const chipIdRef = useRef(0);
-  const shellRef = useRef<HTMLDivElement | null>(null);
   const { addNotification } = useNotificationApi();
   const { dialog, dialogManager } = useDialogOnNearestManager({
     id: notificationPromptDialogId,
@@ -348,7 +339,6 @@ export const NotificationPromptDialog = ({
   const resetState = useCallback(() => {
     setDraft(initialDraft);
     setQueuedNotifications([]);
-    setDragOffset({ x: 0, y: 0 });
   }, []);
 
   useEffect(() => {
@@ -356,40 +346,6 @@ export const NotificationPromptDialog = ({
     resetState();
   }, [dialogIsOpen, resetState]);
 
-  useEffect(() => {
-    if (!dialogIsOpen) return;
-
-    const clampToViewport = () => {
-      const shell = shellRef.current;
-      if (!shell) return;
-
-      const rect = shell.getBoundingClientRect();
-      const nextLeft = clamp(
-        rect.left,
-        VIEWPORT_MARGIN,
-        window.innerWidth - rect.width - VIEWPORT_MARGIN,
-      );
-      const nextTop = clamp(
-        rect.top,
-        VIEWPORT_MARGIN,
-        window.innerHeight - rect.height - VIEWPORT_MARGIN,
-      );
-
-      if (nextLeft === rect.left && nextTop === rect.top) return;
-
-      setDragOffset((current) => ({
-        x: current.x + (nextLeft - rect.left),
-        y: current.y + (nextTop - rect.top),
-      }));
-    };
-
-    window.addEventListener('resize', clampToViewport);
-
-    return () => {
-      window.removeEventListener('resize', clampToViewport);
-    };
-  }, [dialogIsOpen]);
-
   const closeDialog = useCallback(() => {
     dialog.close();
   }, [dialog]);
@@ -442,85 +398,27 @@ export const NotificationPromptDialog = ({
     setQueuedNotifications((current) => current.filter((item) => item.id !== id));
   }, []);
 
-  const handleHeaderPointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (event.button !== 0) return;
-      if (!(event.target instanceof HTMLElement)) return;
-      if (event.target.closest('button')) return;
-
-      const shell = shellRef.current;
-      if (!shell) return;
-
-      event.preventDefault();
-
-      const startClientX = event.clientX;
-      const startClientY = event.clientY;
-      const startOffset = dragOffset;
-      const startRect = shell.getBoundingClientRect();
-
-      const handlePointerMove = (moveEvent: PointerEvent) => {
-        const nextLeft = clamp(
-          startRect.left + (moveEvent.clientX - startClientX),
-          VIEWPORT_MARGIN,
-          window.innerWidth - startRect.width - VIEWPORT_MARGIN,
-        );
-        const nextTop = clamp(
-          startRect.top + (moveEvent.clientY - startClientY),
-          VIEWPORT_MARGIN,
-          window.innerHeight - startRect.height - VIEWPORT_MARGIN,
-        );
-
-        setDragOffset({
-          x: startOffset.x + (nextLeft - startRect.left),
-          y: startOffset.y + (nextTop - startRect.top),
-        });
-      };
-
-      const handlePointerUp = () => {
-        window.removeEventListener('pointermove', handlePointerMove);
-        window.removeEventListener('pointerup', handlePointerUp);
-      };
-
-      window.addEventListener('pointermove', handlePointerMove);
-      window.addEventListener('pointerup', handlePointerUp);
-    },
-    [dragOffset],
-  );
-
-  const shellStyle = {
-    transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)`,
-  };
-
   return (
-    <DialogAnchor
-      allowFlip
-      className='app__notification-dialog'
+    <DraggableDialog
+      dialogClassName='app__notification-dialog'
+      dialogId={notificationPromptDialogId}
+      dialogIsOpen={dialogIsOpen}
       dialogManagerId={dialogManager?.id}
-      id={notificationPromptDialogId}
-      placement='right-start'
+      dragHandleClassName='app__notification-dialog__drag-handle'
+      onClose={closeDialog}
+      promptClassName='app__notification-dialog__prompt'
       referenceElement={referenceElement}
-      tabIndex={-1}
-      trapFocus
-      updatePositionOnContentResize
+      shellClassName='app__notification-dialog__shell'
+      title='Trigger Notification'
     >
-      <div className='app__notification-dialog__shell' ref={shellRef} style={shellStyle}>
-        <Prompt.Root className='app__notification-dialog__prompt'>
-          <div
-            className='app__notification-dialog__drag-handle'
-            onPointerDown={handleHeaderPointerDown}
-          >
-            <Prompt.Header close={closeDialog} title='Trigger Notification' />
-          </div>
-          <NotificationDraftForm
-            draft={draft}
-            queueCurrentDraft={queueCurrentDraft}
-            queuedNotifications={queuedNotifications}
-            registerQueuedNotifications={registerQueuedNotifications}
-            removeQueuedNotification={removeQueuedNotification}
-            setDraft={setDraft}
-          />
-        </Prompt.Root>
-      </div>
-    </DialogAnchor>
+      <NotificationDraftForm
+        draft={draft}
+        queueCurrentDraft={queueCurrentDraft}
+        queuedNotifications={queuedNotifications}
+        registerQueuedNotifications={registerQueuedNotifications}
+        removeQueuedNotification={removeQueuedNotification}
+        setDraft={setDraft}
+      />
+    </DraggableDialog>
   );
 };
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx
new file mode 100644
index 0000000000..50b05fc17c
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx
@@ -0,0 +1,1918 @@
+import type { ReactNode, Ref } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Dropdown,
+  type DropdownTriggerProps,
+  IconChevronDown,
+  Prompt,
+  useChatContext,
+  useDialogIsOpen,
+  useDialogOnNearestManager,
+  useDropdownContext,
+} from 'stream-chat-react';
+import { DraggableDialog } from '../DraggableDialog';
+import {
+  buildFreshWebSocketEventPayload,
+  createInitialSimulationState,
+  emitWebSocketEventPayload,
+} from './websocketEventAutomation';
+import {
+  getStoredSavedPipelines,
+  hydrateSavedPipeline,
+  persistSavedPipelines,
+  serializePipelineForStorage,
+} from './websocketEventPipelineStorage';
+
+import {
+  buildInitialWebSocketEventDrafts,
+  buildWebSocketEventPresetDraft,
+  buildWebSocketEventDraft,
+  createWebSocketEventTemplateContext,
+  readyWebsocketEventTypes,
+  supportedWebsocketEventTypes,
+  type SupportedWebsocketEventType,
+  todoWebsocketEventTypes,
+  websocketEventPresetOptions,
+  websocketEventTemplateDefinitions,
+  type WebSocketEventPresetId,
+} from './websocketEventTemplates';
+import type {
+  DialogMode,
+  EventPipeline,
+  IntervalEmitter,
+  PayloadMode,
+  PipelineEmitStep,
+  PipelineStep,
+  SavedEventPipeline,
+  SimulationState,
+} from './types';
+
+export const webSocketEventPromptDialogId = 'app-websocket-event-prompt-dialog';
+
+const initialEventType: SupportedWebsocketEventType = 'message.new';
+const defaultDialogMode: DialogMode = 'single';
+
+const assignReferenceRef = (
+  referenceRef: Ref<HTMLElement> | undefined,
+  element: HTMLButtonElement | null,
+) => {
+  if (!referenceRef) return;
+
+  if (typeof referenceRef === 'function') {
+    referenceRef(element);
+    return;
+  }
+
+  referenceRef.current = element;
+};
+
+const createPipelineEmitStep = ({
+  eventType,
+  id,
+  payload,
+  payloadMode = 'fresh',
+}: {
+  eventType: SupportedWebsocketEventType;
+  id: string;
+  payload: string;
+  payloadMode?: PayloadMode;
+}): PipelineEmitStep => ({
+  emitCount: 0,
+  eventType,
+  id,
+  kind: 'emit',
+  lastEmittedAt: null,
+  payload,
+  payloadMode,
+});
+
+const createDefaultPipeline = ({
+  createId,
+  drafts,
+}: {
+  createId: (prefix: string) => string;
+  drafts: Record<SupportedWebsocketEventType, string>;
+}): EventPipeline => ({
+  id: createId('pipeline'),
+  loop: false,
+  name: 'Message + reaction flow',
+  steps: [
+    createPipelineEmitStep({
+      eventType: 'message.new',
+      id: createId('pipeline-step'),
+      payload: drafts['message.new'],
+    }),
+    {
+      id: createId('pipeline-step'),
+      kind: 'delay',
+      ms: 1000,
+    },
+    createPipelineEmitStep({
+      eventType: 'reaction.new',
+      id: createId('pipeline-step'),
+      payload: drafts['reaction.new'],
+    }),
+  ],
+});
+
+const createDefaultIntervalEmitters = ({
+  createId,
+  drafts,
+}: {
+  createId: (prefix: string) => string;
+  drafts: Record<SupportedWebsocketEventType, string>;
+}): IntervalEmitter[] => [
+  {
+    active: false,
+    emitCount: 0,
+    eventType: 'message.new',
+    everyMs: 3000,
+    id: createId('interval'),
+    lastEmittedAt: null,
+    name: 'Messages',
+    payload: drafts['message.new'],
+    payloadMode: 'fresh',
+  },
+  {
+    active: false,
+    emitCount: 0,
+    eventType: 'reaction.new',
+    everyMs: 5000,
+    id: createId('interval'),
+    lastEmittedAt: null,
+    name: 'Reactions',
+    payload: drafts['reaction.new'],
+    payloadMode: 'fresh',
+  },
+];
+
+const SectionLabel = ({ children }: { children: ReactNode }) => (
+  <div className='app__websocket-event-dialog__dropdown-section'>{children}</div>
+);
+
+const EventTypeDropdownItem = ({
+  eventType,
+  onSelect,
+  selected,
+}: {
+  eventType: SupportedWebsocketEventType;
+  onSelect: (eventType: SupportedWebsocketEventType) => void;
+  selected: boolean;
+}) => {
+  const { close } = useDropdownContext();
+
+  return (
+    <button
+      aria-checked={selected}
+      className='app__websocket-event-dialog__dropdown-item'
+      onClick={() => {
+        onSelect(eventType);
+        close();
+      }}
+      role='menuitemradio'
+      type='button'
+    >
+      <span className='app__websocket-event-dialog__dropdown-item-label'>
+        {eventType}
+      </span>
+      {!selected && 'todo' in websocketEventTemplateDefinitions[eventType] && (
+        <span className='app__websocket-event-dialog__dropdown-item-badge'>TODO</span>
+      )}
+    </button>
+  );
+};
+
+const EventPresetDropdownItem = ({
+  onSelect,
+  presetId,
+  selected,
+}: {
+  onSelect: (presetId: WebSocketEventPresetId) => void;
+  presetId: WebSocketEventPresetId;
+  selected: boolean;
+}) => {
+  const { close } = useDropdownContext();
+  const preset = websocketEventPresetOptions.find((option) => option.id === presetId);
+
+  if (!preset) return null;
+
+  return (
+    <button
+      aria-checked={selected}
+      className='app__websocket-event-dialog__dropdown-item'
+      onClick={() => {
+        onSelect(presetId);
+        close();
+      }}
+      role='menuitemradio'
+      type='button'
+    >
+      <span className='app__websocket-event-dialog__dropdown-item-label'>
+        {preset.label}
+      </span>
+    </button>
+  );
+};
+
+const EventTypeDropdownItems = ({
+  eventSearchQuery,
+  onSearchChange,
+  onSelectPreset,
+  onSelect,
+  selectedEventPresetId,
+  selectedEventType,
+}: {
+  eventSearchQuery: string;
+  onSearchChange: (value: string) => void;
+  onSelectPreset: (presetId: WebSocketEventPresetId) => void;
+  onSelect: (eventType: SupportedWebsocketEventType) => void;
+  selectedEventPresetId: WebSocketEventPresetId | null;
+  selectedEventType: SupportedWebsocketEventType;
+}) => {
+  const normalizedQuery = eventSearchQuery.trim().toLowerCase();
+  const filteredPresetOptions = websocketEventPresetOptions.filter((option) =>
+    option.label.toLowerCase().includes(normalizedQuery),
+  );
+  const filteredReadyEventTypes = readyWebsocketEventTypes.filter((eventType) =>
+    eventType.toLowerCase().includes(normalizedQuery),
+  );
+  const filteredTodoEventTypes = todoWebsocketEventTypes.filter((eventType) =>
+    eventType.toLowerCase().includes(normalizedQuery),
+  );
+  const hasMatches =
+    filteredPresetOptions.length > 0 ||
+    filteredReadyEventTypes.length > 0 ||
+    filteredTodoEventTypes.length > 0;
+
+  return (
+    <>
+      <div
+        className='app__websocket-event-dialog__dropdown-search'
+        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <input
+          autoFocus
+          className='app__websocket-event-dialog__dropdown-search-input'
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder='Search events'
+          type='text'
+          value={eventSearchQuery}
+        />
+      </div>
+      {filteredPresetOptions.length > 0 && <SectionLabel>Presets</SectionLabel>}
+      {filteredPresetOptions.map((preset) => (
+        <EventPresetDropdownItem
+          key={preset.id}
+          onSelect={onSelectPreset}
+          presetId={preset.id}
+          selected={selectedEventPresetId === preset.id}
+        />
+      ))}
+      {filteredReadyEventTypes.length > 0 && <SectionLabel>Ready</SectionLabel>}
+      {filteredReadyEventTypes.map((eventType) => (
+        <EventTypeDropdownItem
+          eventType={eventType}
+          key={eventType}
+          onSelect={onSelect}
+          selected={!selectedEventPresetId && selectedEventType === eventType}
+        />
+      ))}
+      {filteredTodoEventTypes.length > 0 && (
+        <SectionLabel>TODO placeholders</SectionLabel>
+      )}
+      {filteredTodoEventTypes.map((eventType) => (
+        <EventTypeDropdownItem
+          eventType={eventType}
+          key={eventType}
+          onSelect={onSelect}
+          selected={selectedEventType === eventType}
+        />
+      ))}
+      {!hasMatches && (
+        <div className='app__websocket-event-dialog__dropdown-empty'>
+          No matching events
+        </div>
+      )}
+    </>
+  );
+};
+
+const SavedPipelineDropdownItem = ({
+  onSelect,
+  savedPipeline,
+  selected,
+}: {
+  onSelect: (savedPipelineId: string) => void;
+  savedPipeline: SavedEventPipeline;
+  selected: boolean;
+}) => {
+  const { close } = useDropdownContext();
+
+  return (
+    <button
+      aria-checked={selected}
+      className='app__websocket-event-dialog__dropdown-item'
+      onClick={() => {
+        onSelect(savedPipeline.id);
+        close();
+      }}
+      role='menuitemradio'
+      type='button'
+    >
+      <span className='app__websocket-event-dialog__dropdown-item-label'>
+        {savedPipeline.name}
+      </span>
+      <span className='app__websocket-event-dialog__saved-pipeline-meta'>
+        {new Date(savedPipeline.savedAt).toLocaleString()}
+      </span>
+    </button>
+  );
+};
+
+const SavedPipelineDropdownItems = ({
+  onSearchChange,
+  onSelect,
+  savedPipelineSearchQuery,
+  savedPipelines,
+  selectedSavedPipelineId,
+}: {
+  onSearchChange: (value: string) => void;
+  onSelect: (savedPipelineId: string) => void;
+  savedPipelineSearchQuery: string;
+  savedPipelines: SavedEventPipeline[];
+  selectedSavedPipelineId: string | null;
+}) => {
+  const normalizedQuery = savedPipelineSearchQuery.trim().toLowerCase();
+  const filteredSavedPipelines = savedPipelines.filter((savedPipeline) =>
+    savedPipeline.name.toLowerCase().includes(normalizedQuery),
+  );
+
+  return (
+    <>
+      <div
+        className='app__websocket-event-dialog__dropdown-search'
+        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <input
+          autoFocus
+          className='app__websocket-event-dialog__dropdown-search-input'
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder='Search saved pipelines'
+          type='text'
+          value={savedPipelineSearchQuery}
+        />
+      </div>
+      {filteredSavedPipelines.length > 0 && <SectionLabel>Saved pipelines</SectionLabel>}
+      {filteredSavedPipelines.map((savedPipeline) => (
+        <SavedPipelineDropdownItem
+          key={savedPipeline.id}
+          onSelect={onSelect}
+          savedPipeline={savedPipeline}
+          selected={selectedSavedPipelineId === savedPipeline.id}
+        />
+      ))}
+      {filteredSavedPipelines.length === 0 && (
+        <div className='app__websocket-event-dialog__dropdown-empty'>
+          {savedPipelines.length === 0
+            ? 'No saved pipelines'
+            : 'No matching saved pipelines'}
+        </div>
+      )}
+    </>
+  );
+};
+
+const ModeTabButton = ({
+  active,
+  children,
+  onClick,
+}: {
+  active: boolean;
+  children: ReactNode;
+  onClick: () => void;
+}) => (
+  <button
+    aria-selected={active}
+    className='app__websocket-event-dialog__mode-tab'
+    onClick={onClick}
+    role='tab'
+    type='button'
+  >
+    {children}
+  </button>
+);
+
+type SearchableSelectOption<T extends string> = {
+  label: string;
+  value: T;
+};
+
+const SearchableSelectOptionItem = <T extends string>({
+  onSelect,
+  option,
+  selected,
+}: {
+  onSelect: (value: T) => void;
+  option: SearchableSelectOption<T>;
+  selected: boolean;
+}) => {
+  const { close } = useDropdownContext();
+
+  return (
+    <button
+      aria-checked={selected}
+      className='app__websocket-event-dialog__dropdown-item'
+      onClick={() => {
+        onSelect(option.value);
+        close();
+      }}
+      role='menuitemradio'
+      type='button'
+    >
+      <span className='app__websocket-event-dialog__dropdown-item-label'>
+        {option.label}
+      </span>
+    </button>
+  );
+};
+
+const SearchableSelectDropdownItems = <T extends string>({
+  onSearchChange,
+  onSelect,
+  options,
+  searchPlaceholder,
+  searchQuery,
+  selectedValue,
+}: {
+  onSearchChange: (value: string) => void;
+  onSelect: (value: T) => void;
+  options: SearchableSelectOption<T>[];
+  searchPlaceholder: string;
+  searchQuery: string;
+  selectedValue: T;
+}) => {
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(normalizedQuery),
+  );
+
+  return (
+    <>
+      <div
+        className='app__websocket-event-dialog__dropdown-search'
+        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <input
+          autoFocus
+          className='app__websocket-event-dialog__dropdown-search-input'
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder={searchPlaceholder}
+          type='text'
+          value={searchQuery}
+        />
+      </div>
+      {filteredOptions.map((option) => (
+        <SearchableSelectOptionItem
+          key={option.value}
+          onSelect={onSelect}
+          option={option}
+          selected={selectedValue === option.value}
+        />
+      ))}
+      {filteredOptions.length === 0 && (
+        <div className='app__websocket-event-dialog__dropdown-empty'>
+          No matching options
+        </div>
+      )}
+    </>
+  );
+};
+
+const SearchableSelect = <T extends string>({
+  onChange,
+  options,
+  searchPlaceholder,
+  value,
+}: {
+  onChange: (value: T) => void;
+  options: SearchableSelectOption<T>[];
+  searchPlaceholder: string;
+  value: T;
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const selectedOption =
+    options.find((option) => option.value === value) ?? options[0] ?? null;
+
+  const TriggerComponent = useMemo(
+    () =>
+      function SearchableSelectTrigger({
+        onClick,
+        referenceRef,
+        ...props
+      }: DropdownTriggerProps) {
+        return (
+          <button
+            {...props}
+            className='app__websocket-event-dialog__select app__websocket-event-dialog__select-trigger'
+            onClick={onClick}
+            ref={(element) => assignReferenceRef(referenceRef, element)}
+            type='button'
+          >
+            <span className='app__websocket-event-dialog__trigger-value'>
+              {selectedOption?.label ?? ''}
+            </span>
+            <span
+              aria-hidden='true'
+              className='app__websocket-event-dialog__trigger-icon'
+            >
+              <IconChevronDown />
+            </span>
+          </button>
+        );
+      },
+    [selectedOption],
+  );
+
+  return (
+    <Dropdown
+      className='app__websocket-event-dialog__dropdown'
+      matchReferenceWidth
+      onClose={() => setSearchQuery('')}
+      onOpen={() => setSearchQuery('')}
+      placement='bottom-start'
+      TriggerComponent={TriggerComponent}
+    >
+      <SearchableSelectDropdownItems
+        onSearchChange={setSearchQuery}
+        onSelect={onChange}
+        options={options}
+        searchPlaceholder={searchPlaceholder}
+        searchQuery={searchQuery}
+        selectedValue={value}
+      />
+    </Dropdown>
+  );
+};
+
+const eventTypeOptions: SearchableSelectOption<SupportedWebsocketEventType>[] =
+  supportedWebsocketEventTypes.map((value) => ({
+    label: value,
+    value,
+  }));
+
+const payloadModeOptions: SearchableSelectOption<PayloadMode>[] = [
+  { label: 'Fixed payload', value: 'fixed' },
+  { label: 'Fresh payload', value: 'fresh' },
+];
+
+const EventTypeSelect = ({
+  eventType,
+  onChange,
+}: {
+  eventType: SupportedWebsocketEventType;
+  onChange: (eventType: SupportedWebsocketEventType) => void;
+}) => (
+  <SearchableSelect
+    onChange={onChange}
+    options={eventTypeOptions}
+    searchPlaceholder='Search events'
+    value={eventType}
+  />
+);
+
+const PayloadModeSelect = ({
+  onChange,
+  payloadMode,
+}: {
+  onChange: (payloadMode: PayloadMode) => void;
+  payloadMode: PayloadMode;
+}) => (
+  <SearchableSelect
+    onChange={onChange}
+    options={payloadModeOptions}
+    searchPlaceholder='Search payload modes'
+    value={payloadMode}
+  />
+);
+
+const formatLastEmittedAt = (value: string | null) => {
+  if (!value) return 'Never';
+  return new Date(value).toLocaleTimeString();
+};
+
+export const WebSocketEventPromptDialog = ({
+  referenceElement,
+}: {
+  referenceElement: HTMLElement | null;
+}) => {
+  const { channel, client } = useChatContext();
+  const idCounterRef = useRef(0);
+  const createId = useCallback((prefix: string) => {
+    idCounterRef.current += 1;
+    return `${prefix}-${idCounterRef.current}`;
+  }, []);
+  const [selectedEventType, setSelectedEventType] =
+    useState<SupportedWebsocketEventType>(initialEventType);
+  const [selectedEventPresetId, setSelectedEventPresetId] =
+    useState<WebSocketEventPresetId | null>(null);
+  const templateContext = useMemo(
+    () => createWebSocketEventTemplateContext({ channel, client }),
+    [channel, client],
+  );
+  const [eventDrafts, setEventDrafts] = useState<
+    Record<SupportedWebsocketEventType, string>
+  >(() => buildInitialWebSocketEventDrafts(templateContext));
+  const [activeMode, setActiveMode] = useState<DialogMode>(defaultDialogMode);
+  const [pipeline, setPipeline] = useState<EventPipeline>(() =>
+    createDefaultPipeline({
+      createId,
+      drafts: buildInitialWebSocketEventDrafts(templateContext),
+    }),
+  );
+  const [intervalEmitters, setIntervalEmitters] = useState<IntervalEmitter[]>(() =>
+    createDefaultIntervalEmitters({
+      createId,
+      drafts: buildInitialWebSocketEventDrafts(templateContext),
+    }),
+  );
+  const [savedPipelines, setSavedPipelines] = useState<SavedEventPipeline[]>(() =>
+    getStoredSavedPipelines(),
+  );
+  const [selectedSavedPipelineId, setSelectedSavedPipelineId] = useState<string | null>(
+    null,
+  );
+  const [pipelineRunning, setPipelineRunning] = useState(false);
+  const [eventSearchQuery, setEventSearchQuery] = useState('');
+  const [savedPipelineSearchQuery, setSavedPipelineSearchQuery] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const simulationStateRef = useRef<SimulationState>(
+    createInitialSimulationState({ channel, templateContext }),
+  );
+  const intervalsListRef = useRef<HTMLDivElement | null>(null);
+  const intervalHandlesRef = useRef<Map<string, number>>(new Map());
+  const intervalEmittersRef = useRef(intervalEmitters);
+  const pipelineRunIdRef = useRef(0);
+  const [recentlyAddedIntervalId, setRecentlyAddedIntervalId] = useState<string | null>(
+    null,
+  );
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: webSocketEventPromptDialogId,
+  });
+  const dialogIsOpen = useDialogIsOpen(webSocketEventPromptDialogId, dialogManager?.id);
+
+  useEffect(() => {
+    intervalEmittersRef.current = intervalEmitters;
+  }, [intervalEmitters]);
+
+  useEffect(() => {
+    if (!recentlyAddedIntervalId) return;
+
+    const timeoutId = window.setTimeout(() => {
+      setRecentlyAddedIntervalId(null);
+    }, 2500);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [recentlyAddedIntervalId]);
+
+  const stopIntervalEmitter = useCallback((intervalId: string) => {
+    const handle = intervalHandlesRef.current.get(intervalId);
+
+    if (handle) {
+      window.clearInterval(handle);
+      intervalHandlesRef.current.delete(intervalId);
+    }
+
+    setIntervalEmitters((current) =>
+      current.map((intervalEmitter) =>
+        intervalEmitter.id === intervalId
+          ? {
+              ...intervalEmitter,
+              active: false,
+            }
+          : intervalEmitter,
+      ),
+    );
+  }, []);
+
+  const stopAllIntervalEmitters = useCallback(() => {
+    intervalHandlesRef.current.forEach((handle) => {
+      window.clearInterval(handle);
+    });
+    intervalHandlesRef.current.clear();
+    setIntervalEmitters((current) =>
+      current.map((intervalEmitter) => ({
+        ...intervalEmitter,
+        active: false,
+      })),
+    );
+  }, []);
+
+  const cancelPipeline = useCallback(() => {
+    pipelineRunIdRef.current += 1;
+    setPipelineRunning(false);
+  }, []);
+
+  const resetState = useCallback(() => {
+    const nextDrafts = buildInitialWebSocketEventDrafts(templateContext);
+    stopAllIntervalEmitters();
+    cancelPipeline();
+    simulationStateRef.current = createInitialSimulationState({
+      channel,
+      templateContext,
+    });
+    setActiveMode(defaultDialogMode);
+    setSelectedEventType(initialEventType);
+    setSelectedEventPresetId(null);
+    setEventDrafts(nextDrafts);
+    setPipeline(
+      createDefaultPipeline({
+        createId,
+        drafts: nextDrafts,
+      }),
+    );
+    setSelectedSavedPipelineId(null);
+    setIntervalEmitters(
+      createDefaultIntervalEmitters({
+        createId,
+        drafts: nextDrafts,
+      }),
+    );
+    setEventSearchQuery('');
+    setSavedPipelineSearchQuery('');
+    setErrorMessage(null);
+  }, [cancelPipeline, channel, createId, stopAllIntervalEmitters, templateContext]);
+
+  useEffect(() => {
+    if (dialogIsOpen) return;
+    resetState();
+  }, [dialogIsOpen, resetState]);
+
+  const closeDialog = useCallback(() => {
+    dialog.close();
+  }, [dialog]);
+
+  useEffect(
+    () => () => {
+      stopAllIntervalEmitters();
+      cancelPipeline();
+    },
+    [cancelPipeline, stopAllIntervalEmitters],
+  );
+
+  const currentDraft = eventDrafts[selectedEventType];
+  const currentTemplateDefinition = websocketEventTemplateDefinitions[selectedEventType];
+  const selectedEventPreset =
+    websocketEventPresetOptions.find((option) => option.id === selectedEventPresetId) ??
+    null;
+  const selectedSavedPipeline =
+    savedPipelines.find(
+      (savedPipeline) => savedPipeline.id === selectedSavedPipelineId,
+    ) ?? null;
+
+  const updateSavedPipelines = useCallback(
+    (updater: (current: SavedEventPipeline[]) => SavedEventPipeline[]) => {
+      setSavedPipelines((current) => {
+        const nextSavedPipelines = updater(current).sort((left, right) =>
+          right.savedAt.localeCompare(left.savedAt),
+        );
+        persistSavedPipelines(nextSavedPipelines);
+        return nextSavedPipelines;
+      });
+    },
+    [],
+  );
+
+  const updateSelectedDraft = useCallback(
+    (value: string) => {
+      setEventDrafts((current) => ({
+        ...current,
+        [selectedEventType]: value,
+      }));
+    },
+    [selectedEventType],
+  );
+
+  const parsePayloadInput = useCallback((payloadInput: string) => {
+    const parsedPayload = JSON.parse(payloadInput) as unknown;
+
+    if (
+      !parsedPayload ||
+      typeof parsedPayload !== 'object' ||
+      Array.isArray(parsedPayload)
+    ) {
+      throw new Error('Payload must be a JSON object');
+    }
+
+    return parsedPayload as Record<string, unknown>;
+  }, []);
+
+  const emitConfiguredEvent = useCallback(
+    ({
+      eventType,
+      payload,
+      payloadMode,
+      source,
+    }: {
+      eventType: SupportedWebsocketEventType;
+      payload: string;
+      payloadMode: PayloadMode;
+      source:
+        | { kind: 'single' }
+        | { kind: 'pipeline'; stepId: string }
+        | { kind: 'interval'; intervalId: string };
+    }) => {
+      try {
+        const emittedPayload =
+          payloadMode === 'fresh'
+            ? buildFreshWebSocketEventPayload({
+                eventType,
+                simulationState: simulationStateRef.current,
+                templateContext,
+              })
+            : parsePayloadInput(payload);
+
+        const emittedEvent = emitWebSocketEventPayload({
+          client,
+          eventType,
+          payload: emittedPayload,
+          simulationState: simulationStateRef.current,
+          templateContext,
+        });
+        const emittedPayloadString = JSON.stringify(emittedEvent, null, 2);
+        const emittedAt = new Date().toISOString();
+
+        if (source.kind === 'single') {
+          setEventDrafts((current) => ({
+            ...current,
+            [eventType]: emittedPayloadString,
+          }));
+        }
+
+        if (source.kind === 'pipeline') {
+          setPipeline((current) => ({
+            ...current,
+            steps: current.steps.map((step) =>
+              step.kind === 'emit' && step.id === source.stepId
+                ? {
+                    ...step,
+                    emitCount: step.emitCount + 1,
+                    lastEmittedAt: emittedAt,
+                    payload: emittedPayloadString,
+                  }
+                : step,
+            ),
+          }));
+        }
+
+        if (source.kind === 'interval') {
+          setIntervalEmitters((current) =>
+            current.map((intervalEmitter) =>
+              intervalEmitter.id === source.intervalId
+                ? {
+                    ...intervalEmitter,
+                    emitCount: intervalEmitter.emitCount + 1,
+                    lastEmittedAt: emittedAt,
+                    payload: emittedPayloadString,
+                  }
+                : intervalEmitter,
+            ),
+          );
+        }
+
+        setErrorMessage(null);
+        return true;
+      } catch (error) {
+        setErrorMessage(error instanceof Error ? error.message : 'Failed to emit event');
+        return false;
+      }
+    },
+    [client, parsePayloadInput, templateContext],
+  );
+
+  const handleResetPayload = useCallback(() => {
+    updateSelectedDraft(
+      selectedEventPresetId
+        ? buildWebSocketEventPresetDraft(selectedEventPresetId, templateContext)
+        : buildWebSocketEventDraft(selectedEventType, templateContext),
+    );
+    setErrorMessage(null);
+  }, [selectedEventPresetId, selectedEventType, templateContext, updateSelectedDraft]);
+
+  const handleTriggerEvent = useCallback(() => {
+    emitConfiguredEvent({
+      eventType: selectedEventType,
+      payload: currentDraft,
+      payloadMode: 'fixed',
+      source: { kind: 'single' },
+    });
+  }, [currentDraft, emitConfiguredEvent, selectedEventType]);
+
+  const insertPipelineStep = useCallback((insertAtIndex: number, step: PipelineStep) => {
+    setPipeline((current) => {
+      const nextSteps = [...current.steps];
+      nextSteps.splice(insertAtIndex, 0, step);
+
+      return {
+        ...current,
+        steps: nextSteps,
+      };
+    });
+  }, []);
+
+  const addPipelineEmitStep = useCallback(
+    (insertAtIndex: number) => {
+      insertPipelineStep(
+        insertAtIndex,
+        createPipelineEmitStep({
+          eventType: selectedEventType,
+          id: createId('pipeline-step'),
+          payload: eventDrafts[selectedEventType],
+        }),
+      );
+    },
+    [createId, eventDrafts, insertPipelineStep, selectedEventType],
+  );
+
+  const addPipelineDelayStep = useCallback(
+    (insertAtIndex: number) => {
+      insertPipelineStep(insertAtIndex, {
+        id: createId('pipeline-step'),
+        kind: 'delay',
+        ms: 1000,
+      });
+    },
+    [createId, insertPipelineStep],
+  );
+
+  const movePipelineStep = useCallback((stepId: string, direction: -1 | 1) => {
+    setPipeline((current) => {
+      const index = current.steps.findIndex((step) => step.id === stepId);
+
+      if (index === -1) return current;
+
+      const nextIndex = index + direction;
+
+      if (nextIndex < 0 || nextIndex >= current.steps.length) {
+        return current;
+      }
+
+      const nextSteps = [...current.steps];
+      const [step] = nextSteps.splice(index, 1);
+
+      if (!step) return current;
+
+      nextSteps.splice(nextIndex, 0, step);
+
+      return {
+        ...current,
+        steps: nextSteps,
+      };
+    });
+  }, []);
+
+  const removePipelineStep = useCallback((stepId: string) => {
+    setPipeline((current) => ({
+      ...current,
+      steps: current.steps.filter((step) => step.id !== stepId),
+    }));
+  }, []);
+
+  const updatePipelineStep = useCallback(
+    (stepId: string, updater: (step: PipelineStep) => PipelineStep) => {
+      setPipeline((current) => ({
+        ...current,
+        steps: current.steps.map((step) => (step.id === stepId ? updater(step) : step)),
+      }));
+    },
+    [],
+  );
+
+  const runPipeline = useCallback(async () => {
+    if (pipelineRunning || pipeline.steps.length === 0) return;
+
+    const pipelineSnapshot = pipeline;
+    const runId = pipelineRunIdRef.current + 1;
+    pipelineRunIdRef.current = runId;
+    setPipelineRunning(true);
+    setErrorMessage(null);
+
+    try {
+      do {
+        for (const step of pipelineSnapshot.steps) {
+          if (pipelineRunIdRef.current !== runId) {
+            return;
+          }
+
+          if (step.kind === 'delay') {
+            await new Promise<void>((resolve) => {
+              window.setTimeout(resolve, step.ms);
+            });
+            continue;
+          }
+
+          const succeeded = emitConfiguredEvent({
+            eventType: step.eventType,
+            payload: step.payload,
+            payloadMode: step.payloadMode,
+            source: {
+              kind: 'pipeline',
+              stepId: step.id,
+            },
+          });
+
+          if (!succeeded) {
+            return;
+          }
+        }
+      } while (pipelineSnapshot.loop && pipelineRunIdRef.current === runId);
+    } finally {
+      if (pipelineRunIdRef.current === runId) {
+        setPipelineRunning(false);
+      }
+    }
+  }, [emitConfiguredEvent, pipeline, pipelineRunning]);
+
+  const loadSavedPipeline = useCallback(
+    (savedPipelineId: string) => {
+      const savedPipeline = savedPipelines.find((item) => item.id === savedPipelineId);
+
+      if (!savedPipeline) return;
+
+      cancelPipeline();
+      setPipeline(
+        hydrateSavedPipeline({
+          createId,
+          savedPipeline,
+        }),
+      );
+      setSelectedSavedPipelineId(savedPipeline.id);
+      setSavedPipelineSearchQuery('');
+      setErrorMessage(null);
+    },
+    [cancelPipeline, createId, savedPipelines],
+  );
+
+  const saveCurrentPipeline = useCallback(() => {
+    const normalizedName = pipeline.name.trim();
+
+    if (!normalizedName) {
+      setErrorMessage('Pipeline name is required');
+      return;
+    }
+
+    const existingSavedPipeline = savedPipelines.find(
+      (savedPipeline) =>
+        savedPipeline.name.trim().toLowerCase() === normalizedName.toLowerCase(),
+    );
+    const savedPipelineId =
+      selectedSavedPipelineId ?? existingSavedPipeline?.id ?? createId('saved-pipeline');
+    const savedPipeline = serializePipelineForStorage({
+      pipeline: {
+        ...pipeline,
+        name: normalizedName,
+      },
+      savedPipelineId,
+    });
+
+    updateSavedPipelines((current) => [
+      savedPipeline,
+      ...current.filter((item) => item.id !== savedPipeline.id),
+    ]);
+    setPipeline((current) => ({
+      ...current,
+      name: normalizedName,
+    }));
+    setSelectedSavedPipelineId(savedPipeline.id);
+    setErrorMessage(null);
+  }, [createId, pipeline, savedPipelines, selectedSavedPipelineId, updateSavedPipelines]);
+
+  const deleteSavedPipeline = useCallback(
+    (savedPipelineId?: string) => {
+      const resolvedSavedPipelineId = savedPipelineId ?? selectedSavedPipelineId;
+
+      if (!resolvedSavedPipelineId) return;
+
+      updateSavedPipelines((current) =>
+        current.filter((savedPipeline) => savedPipeline.id !== resolvedSavedPipelineId),
+      );
+
+      if (selectedSavedPipelineId === resolvedSavedPipelineId) {
+        setSelectedSavedPipelineId(null);
+      }
+
+      setErrorMessage(null);
+    },
+    [selectedSavedPipelineId, updateSavedPipelines],
+  );
+
+  const addIntervalEmitter = useCallback(() => {
+    const intervalId = createId('interval');
+
+    setIntervalEmitters((current) => [
+      {
+        active: false,
+        emitCount: 0,
+        eventType: selectedEventType,
+        everyMs: 4000,
+        id: intervalId,
+        lastEmittedAt: null,
+        name: `Emitter ${current.length + 1}`,
+        payload: eventDrafts[selectedEventType],
+        payloadMode: 'fresh',
+      },
+      ...current,
+    ]);
+    setRecentlyAddedIntervalId(intervalId);
+    intervalsListRef.current?.scrollTo({ top: 0 });
+  }, [createId, eventDrafts, selectedEventType]);
+
+  const updateIntervalEmitter = useCallback(
+    (
+      intervalId: string,
+      updater: (intervalEmitter: IntervalEmitter) => IntervalEmitter,
+    ) => {
+      setIntervalEmitters((current) =>
+        current.map((intervalEmitter) =>
+          intervalEmitter.id === intervalId ? updater(intervalEmitter) : intervalEmitter,
+        ),
+      );
+    },
+    [],
+  );
+
+  const removeIntervalEmitter = useCallback(
+    (intervalId: string) => {
+      stopIntervalEmitter(intervalId);
+      setIntervalEmitters((current) =>
+        current.filter((intervalEmitter) => intervalEmitter.id !== intervalId),
+      );
+    },
+    [stopIntervalEmitter],
+  );
+
+  const startIntervalEmitter = useCallback(
+    (intervalId: string) => {
+      if (intervalHandlesRef.current.has(intervalId)) return;
+
+      const intervalEmitter = intervalEmittersRef.current.find(
+        (currentIntervalEmitter) => currentIntervalEmitter.id === intervalId,
+      );
+
+      if (!intervalEmitter) return;
+
+      const emitOnce = () => {
+        const latestIntervalEmitter = intervalEmittersRef.current.find(
+          (currentIntervalEmitter) => currentIntervalEmitter.id === intervalId,
+        );
+
+        if (!latestIntervalEmitter) return;
+
+        const succeeded = emitConfiguredEvent({
+          eventType: latestIntervalEmitter.eventType,
+          payload: latestIntervalEmitter.payload,
+          payloadMode: latestIntervalEmitter.payloadMode,
+          source: {
+            kind: 'interval',
+            intervalId,
+          },
+        });
+
+        if (!succeeded) {
+          stopIntervalEmitter(intervalId);
+        }
+      };
+
+      emitOnce();
+      const handle = window.setInterval(emitOnce, intervalEmitter.everyMs);
+
+      intervalHandlesRef.current.set(intervalId, handle);
+      setIntervalEmitters((current) =>
+        current.map((currentIntervalEmitter) =>
+          currentIntervalEmitter.id === intervalId
+            ? {
+                ...currentIntervalEmitter,
+                active: true,
+              }
+            : currentIntervalEmitter,
+        ),
+      );
+    },
+    [emitConfiguredEvent, stopIntervalEmitter],
+  );
+
+  const startAllIntervalEmitters = useCallback(() => {
+    intervalEmittersRef.current.forEach((intervalEmitter) => {
+      if (!intervalEmitter.active) {
+        startIntervalEmitter(intervalEmitter.id);
+      }
+    });
+  }, [startIntervalEmitter]);
+
+  const EventTypeTrigger = useMemo(
+    () =>
+      function EventTypeTriggerComponent({
+        onClick,
+        referenceRef,
+        ...props
+      }: DropdownTriggerProps) {
+        return (
+          <button
+            {...props}
+            className='app__websocket-event-dialog__trigger'
+            onClick={onClick}
+            ref={(element) => assignReferenceRef(referenceRef, element)}
+            type='button'
+          >
+            <span className='app__websocket-event-dialog__trigger-value'>
+              {selectedEventPreset?.label ?? selectedEventType}
+            </span>
+            <span
+              aria-hidden='true'
+              className='app__websocket-event-dialog__trigger-icon'
+            >
+              <IconChevronDown />
+            </span>
+          </button>
+        );
+      },
+    [selectedEventPreset, selectedEventType],
+  );
+
+  const SavedPipelineTrigger = useMemo(
+    () =>
+      function SavedPipelineTriggerComponent({
+        onClick,
+        referenceRef,
+        ...props
+      }: DropdownTriggerProps) {
+        return (
+          <button
+            {...props}
+            className='app__websocket-event-dialog__trigger'
+            onClick={onClick}
+            ref={(element) => assignReferenceRef(referenceRef, element)}
+            type='button'
+          >
+            <span className='app__websocket-event-dialog__trigger-value'>
+              {selectedSavedPipeline?.name ?? 'Load saved pipeline'}
+            </span>
+            <span
+              aria-hidden='true'
+              className='app__websocket-event-dialog__trigger-icon'
+            >
+              <IconChevronDown />
+            </span>
+          </button>
+        );
+      },
+    [selectedSavedPipeline],
+  );
+
+  const renderPayloadTextarea = ({
+    onChange,
+    payload,
+    payloadMode,
+    rows = 10,
+  }: {
+    onChange: (value: string) => void;
+    payload: string;
+    payloadMode: PayloadMode;
+    rows?: number;
+  }) => (
+    <textarea
+      className='app__websocket-event-dialog__textarea'
+      onChange={(event) => onChange(event.target.value)}
+      readOnly={payloadMode === 'fresh'}
+      rows={rows}
+      spellCheck={false}
+      value={payload}
+    />
+  );
+
+  return (
+    <DraggableDialog
+      dialogClassName='app__websocket-event-dialog'
+      dialogId={webSocketEventPromptDialogId}
+      dialogIsOpen={dialogIsOpen}
+      dialogManagerId={dialogManager?.id}
+      dragHandleClassName='app__websocket-event-dialog__drag-handle'
+      onClose={closeDialog}
+      promptClassName='app__websocket-event-dialog__prompt'
+      referenceElement={referenceElement}
+      shellClassName='app__websocket-event-dialog__shell'
+      title='Trigger WS Event'
+    >
+      <Prompt.Body className='app__websocket-event-dialog__body'>
+        <div className='app__websocket-event-dialog__mode-tabs' role='tablist'>
+          <ModeTabButton
+            active={activeMode === 'single'}
+            onClick={() => setActiveMode('single')}
+          >
+            Single Event
+          </ModeTabButton>
+          <ModeTabButton
+            active={activeMode === 'pipeline'}
+            onClick={() => setActiveMode('pipeline')}
+          >
+            Pipeline
+          </ModeTabButton>
+          <ModeTabButton
+            active={activeMode === 'intervals'}
+            onClick={() => setActiveMode('intervals')}
+          >
+            Intervals
+          </ModeTabButton>
+        </div>
+        <div className='app__websocket-event-dialog__body-scroll'>
+          {activeMode === 'single' && (
+            <>
+              <div className='app__websocket-event-dialog__meta'>
+                <p className='app__websocket-event-dialog__note'>
+                  Single Event emits one event immediately using the payload shown below.
+                </p>
+              </div>
+              <div className='app__websocket-event-dialog__field'>
+                <span className='app__websocket-event-dialog__field-label'>
+                  Event type
+                </span>
+                <Dropdown
+                  className='app__websocket-event-dialog__dropdown'
+                  matchReferenceWidth
+                  onClose={() => setEventSearchQuery('')}
+                  onOpen={() => setEventSearchQuery('')}
+                  placement='bottom-start'
+                  TriggerComponent={EventTypeTrigger}
+                >
+                  <EventTypeDropdownItems
+                    eventSearchQuery={eventSearchQuery}
+                    onSearchChange={setEventSearchQuery}
+                    onSelectPreset={(presetId) => {
+                      const preset = websocketEventPresetOptions.find(
+                        (option) => option.id === presetId,
+                      );
+
+                      if (!preset) return;
+
+                      setSelectedEventType(preset.eventType);
+                      setSelectedEventPresetId(presetId);
+                      setEventDrafts((current) => ({
+                        ...current,
+                        [preset.eventType]: buildWebSocketEventPresetDraft(
+                          presetId,
+                          templateContext,
+                        ),
+                      }));
+                      setErrorMessage(null);
+                    }}
+                    onSelect={(eventType) => {
+                      setSelectedEventType(eventType);
+                      setSelectedEventPresetId(null);
+                      setErrorMessage(null);
+                    }}
+                    selectedEventPresetId={selectedEventPresetId}
+                    selectedEventType={selectedEventType}
+                  />
+                </Dropdown>
+              </div>
+              <div className='app__websocket-event-dialog__meta'>
+                <p className='app__websocket-event-dialog__description'>
+                  {selectedEventPreset?.description ??
+                    currentTemplateDefinition.description}
+                </p>
+                {'todo' in currentTemplateDefinition && (
+                  <p className='app__websocket-event-dialog__todo'>
+                    {currentTemplateDefinition.todo}
+                  </p>
+                )}
+                <p className='app__websocket-event-dialog__note'>
+                  Most event templates assume there is an active channel selected in the
+                  preview.
+                </p>
+              </div>
+              <label className='app__websocket-event-dialog__field'>
+                <span className='app__websocket-event-dialog__field-label'>
+                  Payload JSON
+                </span>
+                {renderPayloadTextarea({
+                  onChange: (value) => {
+                    updateSelectedDraft(value);
+                    if (errorMessage) setErrorMessage(null);
+                  },
+                  payload: currentDraft,
+                  payloadMode: 'fixed',
+                  rows: 16,
+                })}
+              </label>
+            </>
+          )}
+
+          {activeMode === 'pipeline' && (
+            <div className='app__websocket-event-dialog__panel'>
+              <div className='app__websocket-event-dialog__inline-fields'>
+                <label className='app__websocket-event-dialog__field'>
+                  <span className='app__websocket-event-dialog__field-label'>
+                    Saved pipelines
+                  </span>
+                  <Dropdown
+                    className='app__websocket-event-dialog__dropdown'
+                    matchReferenceWidth
+                    onClose={() => setSavedPipelineSearchQuery('')}
+                    onOpen={() => setSavedPipelineSearchQuery('')}
+                    placement='bottom-start'
+                    TriggerComponent={SavedPipelineTrigger}
+                  >
+                    <SavedPipelineDropdownItems
+                      onSearchChange={setSavedPipelineSearchQuery}
+                      onSelect={loadSavedPipeline}
+                      savedPipelineSearchQuery={savedPipelineSearchQuery}
+                      savedPipelines={savedPipelines}
+                      selectedSavedPipelineId={selectedSavedPipelineId}
+                    />
+                  </Dropdown>
+                </label>
+                <div className='app__websocket-event-dialog__saved-pipeline-actions'>
+                  <button
+                    className='app__websocket-event-dialog__action-button'
+                    onClick={saveCurrentPipeline}
+                    type='button'
+                  >
+                    Save current
+                  </button>
+                  <button
+                    className='app__websocket-event-dialog__action-button app__websocket-event-dialog__action-button--danger'
+                    disabled={!selectedSavedPipeline}
+                    onClick={() => deleteSavedPipeline()}
+                    type='button'
+                  >
+                    Delete saved
+                  </button>
+                </div>
+              </div>
+
+              <div className='app__websocket-event-dialog__inline-fields'>
+                <label className='app__websocket-event-dialog__field'>
+                  <span className='app__websocket-event-dialog__field-label'>
+                    Pipeline name
+                  </span>
+                  <input
+                    className='app__websocket-event-dialog__text-input'
+                    onChange={(event) =>
+                      setPipeline((current) => ({
+                        ...current,
+                        name: event.target.value,
+                      }))
+                    }
+                    type='text'
+                    value={pipeline.name}
+                  />
+                </label>
+                <label className='app__websocket-event-dialog__checkbox-label'>
+                  <input
+                    checked={pipeline.loop}
+                    onChange={(event) =>
+                      setPipeline((current) => ({
+                        ...current,
+                        loop: event.target.checked,
+                      }))
+                    }
+                    type='checkbox'
+                  />
+                  Loop pipeline
+                </label>
+              </div>
+
+              <div className='app__websocket-event-dialog__meta'>
+                <p className='app__websocket-event-dialog__note'>
+                  Pipeline runs one ordered script of emits and delays. When Loop pipeline
+                  is enabled, the whole script restarts from the first step after the last
+                  step finishes. Payload mode controls how each emit step builds its
+                  event: Fixed payload uses the JSON currently shown in the editor, while
+                  Fresh payload regenerates semantically valid data on every emit.
+                </p>
+              </div>
+
+              <div className='app__websocket-event-dialog__stack'>
+                {pipeline.steps.length === 0 && (
+                  <div className='app__websocket-event-dialog__toolbar app__websocket-event-dialog__pipeline-insert-controls'>
+                    <button
+                      className='app__websocket-event-dialog__action-button'
+                      onClick={() => addPipelineEmitStep(0)}
+                      type='button'
+                    >
+                      Add emit step
+                    </button>
+                    <button
+                      className='app__websocket-event-dialog__action-button'
+                      onClick={() => addPipelineDelayStep(0)}
+                      type='button'
+                    >
+                      Add delay
+                    </button>
+                  </div>
+                )}
+                {pipeline.steps.map((step, index) => (
+                  <div className='app__websocket-event-dialog__stack' key={step.id}>
+                    <div className='app__websocket-event-dialog__automation-card'>
+                      <div className='app__websocket-event-dialog__automation-card-header'>
+                        <div className='app__websocket-event-dialog__automation-card-title'>
+                          <span className='app__websocket-event-dialog__automation-kind'>
+                            {step.kind === 'emit' ? 'Emit' : 'Delay'}
+                          </span>
+                          <span>Step {index + 1}</span>
+                          {step.kind === 'emit' && (
+                            <span className='app__websocket-event-dialog__automation-summary'>
+                              {step.emitCount} emits, last{' '}
+                              {formatLastEmittedAt(step.lastEmittedAt)}
+                            </span>
+                          )}
+                        </div>
+                        <div className='app__websocket-event-dialog__automation-card-controls'>
+                          <button
+                            className='app__websocket-event-dialog__mini-button'
+                            disabled={index === 0}
+                            onClick={() => movePipelineStep(step.id, -1)}
+                            type='button'
+                          >
+                            Up
+                          </button>
+                          <button
+                            className='app__websocket-event-dialog__mini-button'
+                            disabled={index === pipeline.steps.length - 1}
+                            onClick={() => movePipelineStep(step.id, 1)}
+                            type='button'
+                          >
+                            Down
+                          </button>
+                          <button
+                            className='app__websocket-event-dialog__mini-button app__websocket-event-dialog__mini-button--danger'
+                            onClick={() => removePipelineStep(step.id)}
+                            type='button'
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      </div>
+
+                      {step.kind === 'emit' ? (
+                        <div className='app__websocket-event-dialog__stack'>
+                          <div className='app__websocket-event-dialog__inline-fields'>
+                            <label className='app__websocket-event-dialog__field'>
+                              <span className='app__websocket-event-dialog__field-label'>
+                                Event type
+                              </span>
+                              <EventTypeSelect
+                                eventType={step.eventType}
+                                onChange={(eventType) =>
+                                  updatePipelineStep(step.id, (currentStep) =>
+                                    currentStep.kind === 'emit'
+                                      ? {
+                                          ...currentStep,
+                                          eventType,
+                                          payload: eventDrafts[eventType],
+                                        }
+                                      : currentStep,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label className='app__websocket-event-dialog__field'>
+                              <span className='app__websocket-event-dialog__field-label'>
+                                Payload mode
+                              </span>
+                              <PayloadModeSelect
+                                onChange={(payloadMode) =>
+                                  updatePipelineStep(step.id, (currentStep) =>
+                                    currentStep.kind === 'emit'
+                                      ? {
+                                          ...currentStep,
+                                          payloadMode,
+                                        }
+                                      : currentStep,
+                                  )
+                                }
+                                payloadMode={step.payloadMode}
+                              />
+                            </label>
+                          </div>
+                          <label className='app__websocket-event-dialog__field'>
+                            <span className='app__websocket-event-dialog__field-label'>
+                              {step.payloadMode === 'fresh'
+                                ? 'Latest generated payload preview'
+                                : 'Payload JSON'}
+                            </span>
+                            {renderPayloadTextarea({
+                              onChange: (value) =>
+                                updatePipelineStep(step.id, (currentStep) =>
+                                  currentStep.kind === 'emit'
+                                    ? {
+                                        ...currentStep,
+                                        payload: value,
+                                      }
+                                    : currentStep,
+                                ),
+                              payload: step.payload,
+                              payloadMode: step.payloadMode,
+                            })}
+                          </label>
+                        </div>
+                      ) : (
+                        <label className='app__websocket-event-dialog__field'>
+                          <span className='app__websocket-event-dialog__field-label'>
+                            Delay (ms)
+                          </span>
+                          <input
+                            className='app__websocket-event-dialog__number-input'
+                            min={0}
+                            onChange={(event) => {
+                              const value = Number(event.target.value);
+                              updatePipelineStep(step.id, (currentStep) =>
+                                currentStep.kind === 'delay'
+                                  ? {
+                                      ...currentStep,
+                                      ms: Number.isFinite(value) ? Math.max(value, 0) : 0,
+                                    }
+                                  : currentStep,
+                              );
+                            }}
+                            type='number'
+                            value={step.ms}
+                          />
+                        </label>
+                      )}
+                    </div>
+                    <div className='app__websocket-event-dialog__toolbar app__websocket-event-dialog__pipeline-insert-controls'>
+                      <button
+                        className='app__websocket-event-dialog__action-button'
+                        onClick={() => addPipelineEmitStep(index + 1)}
+                        type='button'
+                      >
+                        Add emit step
+                      </button>
+                      <button
+                        className='app__websocket-event-dialog__action-button'
+                        onClick={() => addPipelineDelayStep(index + 1)}
+                        type='button'
+                      >
+                        Add delay
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {activeMode === 'intervals' && (
+            <div className='app__websocket-event-dialog__panel app__websocket-event-dialog__intervals-panel'>
+              <div className='app__websocket-event-dialog__toolbar'>
+                <button
+                  className='app__websocket-event-dialog__action-button'
+                  onClick={addIntervalEmitter}
+                  type='button'
+                >
+                  Add interval
+                </button>
+              </div>
+
+              <div
+                className='app__websocket-event-dialog__stack app__websocket-event-dialog__intervals-list'
+                ref={intervalsListRef}
+              >
+                <div className='app__websocket-event-dialog__meta'>
+                  <p className='app__websocket-event-dialog__note'>
+                    Intervals run independent emitters in parallel, each on its own timer.
+                    Use this for concurrent background traffic rather than a single
+                    ordered sequence. Payload mode controls how each interval tick builds
+                    its event: Fixed payload reuses the configured JSON, while Fresh
+                    payload regenerates data every tick so messages and reactions stay
+                    semantically coherent.
+                  </p>
+                </div>
+                {intervalEmitters.map((intervalEmitter) => (
+                  <div
+                    className={
+                      intervalEmitter.id === recentlyAddedIntervalId
+                        ? 'app__websocket-event-dialog__automation-card app__websocket-event-dialog__automation-card--new'
+                        : 'app__websocket-event-dialog__automation-card'
+                    }
+                    key={intervalEmitter.id}
+                  >
+                    <div className='app__websocket-event-dialog__automation-card-header'>
+                      <div className='app__websocket-event-dialog__automation-card-title'>
+                        <span
+                          className={
+                            intervalEmitter.active
+                              ? 'app__websocket-event-dialog__automation-status app__websocket-event-dialog__automation-status--running'
+                              : 'app__websocket-event-dialog__automation-status'
+                          }
+                        >
+                          {intervalEmitter.active ? 'Running' : 'Idle'}
+                        </span>
+                        <span>{intervalEmitter.name || 'Unnamed interval'}</span>
+                        <span className='app__websocket-event-dialog__automation-summary'>
+                          {intervalEmitter.emitCount} emits, last{' '}
+                          {formatLastEmittedAt(intervalEmitter.lastEmittedAt)}
+                        </span>
+                      </div>
+                      <div className='app__websocket-event-dialog__automation-card-controls'>
+                        {intervalEmitter.active ? (
+                          <button
+                            className='app__websocket-event-dialog__mini-button app__websocket-event-dialog__mini-button--danger'
+                            onClick={() => stopIntervalEmitter(intervalEmitter.id)}
+                            type='button'
+                          >
+                            Stop
+                          </button>
+                        ) : (
+                          <button
+                            className='app__websocket-event-dialog__mini-button app__websocket-event-dialog__mini-button--primary'
+                            onClick={() => startIntervalEmitter(intervalEmitter.id)}
+                            type='button'
+                          >
+                            Start
+                          </button>
+                        )}
+                        <button
+                          className='app__websocket-event-dialog__mini-button app__websocket-event-dialog__mini-button--danger'
+                          onClick={() => removeIntervalEmitter(intervalEmitter.id)}
+                          type='button'
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className='app__websocket-event-dialog__stack'>
+                      <div className='app__websocket-event-dialog__inline-fields'>
+                        <label className='app__websocket-event-dialog__field'>
+                          <span className='app__websocket-event-dialog__field-label'>
+                            Name
+                          </span>
+                          <input
+                            className='app__websocket-event-dialog__text-input'
+                            onChange={(event) =>
+                              updateIntervalEmitter(
+                                intervalEmitter.id,
+                                (currentInterval) => ({
+                                  ...currentInterval,
+                                  name: event.target.value,
+                                }),
+                              )
+                            }
+                            type='text'
+                            value={intervalEmitter.name}
+                          />
+                        </label>
+                        <label className='app__websocket-event-dialog__field'>
+                          <span className='app__websocket-event-dialog__field-label'>
+                            Every (ms)
+                          </span>
+                          <input
+                            className='app__websocket-event-dialog__number-input'
+                            min={100}
+                            onChange={(event) => {
+                              const value = Number(event.target.value);
+                              updateIntervalEmitter(
+                                intervalEmitter.id,
+                                (currentInterval) => ({
+                                  ...currentInterval,
+                                  everyMs: Number.isFinite(value)
+                                    ? Math.max(value, 100)
+                                    : 100,
+                                }),
+                              );
+                            }}
+                            type='number'
+                            value={intervalEmitter.everyMs}
+                          />
+                        </label>
+                      </div>
+
+                      <div className='app__websocket-event-dialog__inline-fields'>
+                        <label className='app__websocket-event-dialog__field'>
+                          <span className='app__websocket-event-dialog__field-label'>
+                            Event type
+                          </span>
+                          <EventTypeSelect
+                            eventType={intervalEmitter.eventType}
+                            onChange={(eventType) =>
+                              updateIntervalEmitter(
+                                intervalEmitter.id,
+                                (currentInterval) => ({
+                                  ...currentInterval,
+                                  eventType,
+                                  payload: eventDrafts[eventType],
+                                }),
+                              )
+                            }
+                          />
+                        </label>
+                        <label className='app__websocket-event-dialog__field'>
+                          <span className='app__websocket-event-dialog__field-label'>
+                            Payload mode
+                          </span>
+                          <PayloadModeSelect
+                            onChange={(payloadMode) =>
+                              updateIntervalEmitter(
+                                intervalEmitter.id,
+                                (currentInterval) => ({
+                                  ...currentInterval,
+                                  payloadMode,
+                                }),
+                              )
+                            }
+                            payloadMode={intervalEmitter.payloadMode}
+                          />
+                        </label>
+                      </div>
+
+                      <label className='app__websocket-event-dialog__field'>
+                        <span className='app__websocket-event-dialog__field-label'>
+                          {intervalEmitter.payloadMode === 'fresh'
+                            ? 'Latest generated payload preview'
+                            : 'Payload JSON'}
+                        </span>
+                        {renderPayloadTextarea({
+                          onChange: (value) =>
+                            updateIntervalEmitter(
+                              intervalEmitter.id,
+                              (currentInterval) => ({
+                                ...currentInterval,
+                                payload: value,
+                              }),
+                            ),
+                          payload: intervalEmitter.payload,
+                          payloadMode: intervalEmitter.payloadMode,
+                        })}
+                      </label>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {errorMessage && (
+            <div className='app__websocket-event-dialog__error' role='alert'>
+              {errorMessage}
+            </div>
+          )}
+        </div>
+      </Prompt.Body>
+      <Prompt.Footer className='app__websocket-event-dialog__footer'>
+        <Prompt.FooterControls className='app__websocket-event-dialog__footer-controls'>
+          {activeMode === 'single' ? (
+            <>
+              <Prompt.FooterControlsButtonSecondary onClick={handleResetPayload}>
+                Reset payload
+              </Prompt.FooterControlsButtonSecondary>
+              <Prompt.FooterControlsButtonPrimary onClick={handleTriggerEvent}>
+                Trigger event
+              </Prompt.FooterControlsButtonPrimary>
+            </>
+          ) : activeMode === 'pipeline' ? (
+            <>
+              <Prompt.FooterControlsButtonSecondary onClick={closeDialog}>
+                Close
+              </Prompt.FooterControlsButtonSecondary>
+              {pipelineRunning ? (
+                <Prompt.FooterControlsButtonPrimary onClick={cancelPipeline}>
+                  Stop pipeline
+                </Prompt.FooterControlsButtonPrimary>
+              ) : (
+                <Prompt.FooterControlsButtonPrimary
+                  onClick={() => {
+                    void runPipeline();
+                  }}
+                >
+                  Run pipeline
+                </Prompt.FooterControlsButtonPrimary>
+              )}
+            </>
+          ) : activeMode === 'intervals' ? (
+            <>
+              <Prompt.FooterControlsButtonSecondary onClick={closeDialog}>
+                Close
+              </Prompt.FooterControlsButtonSecondary>
+              <Prompt.FooterControlsButtonSecondary onClick={stopAllIntervalEmitters}>
+                Stop all
+              </Prompt.FooterControlsButtonSecondary>
+              <Prompt.FooterControlsButtonPrimary onClick={startAllIntervalEmitters}>
+                Run all
+              </Prompt.FooterControlsButtonPrimary>
+            </>
+          ) : (
+            <Prompt.FooterControlsButtonSecondary onClick={closeDialog}>
+              Close
+            </Prompt.FooterControlsButtonSecondary>
+          )}
+        </Prompt.FooterControls>
+      </Prompt.Footer>
+    </DraggableDialog>
+  );
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/index.ts b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/index.ts
new file mode 100644
index 0000000000..0dea8231c2
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/index.ts
@@ -0,0 +1,2 @@
+export * from './WebSocketEventPromptDialog';
+export * from './websocketEventTemplates';
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/types.ts b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/types.ts
new file mode 100644
index 0000000000..9fae425909
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/types.ts
@@ -0,0 +1,77 @@
+import type { SupportedWebsocketEventType } from './websocketEventTemplates';
+
+export type PayloadMode = 'fixed' | 'fresh';
+
+export type PipelineEmitStep = {
+  emitCount: number;
+  eventType: SupportedWebsocketEventType;
+  id: string;
+  kind: 'emit';
+  lastEmittedAt: string | null;
+  payload: string;
+  payloadMode: PayloadMode;
+};
+
+export type PipelineDelayStep = {
+  id: string;
+  kind: 'delay';
+  ms: number;
+};
+
+export type PipelineStep = PipelineEmitStep | PipelineDelayStep;
+
+export type EventPipeline = {
+  id: string;
+  loop: boolean;
+  name: string;
+  steps: PipelineStep[];
+};
+
+export type SavedPipelineEmitStep = {
+  eventType: SupportedWebsocketEventType;
+  kind: 'emit';
+  payload: string;
+  payloadMode: PayloadMode;
+};
+
+export type SavedPipelineDelayStep = {
+  kind: 'delay';
+  ms: number;
+};
+
+export type SavedPipelineStep = SavedPipelineEmitStep | SavedPipelineDelayStep;
+
+export type SavedEventPipeline = {
+  id: string;
+  loop: boolean;
+  name: string;
+  savedAt: string;
+  steps: SavedPipelineStep[];
+};
+
+export type IntervalEmitter = {
+  active: boolean;
+  emitCount: number;
+  eventType: SupportedWebsocketEventType;
+  everyMs: number;
+  id: string;
+  lastEmittedAt: string | null;
+  name: string;
+  payload: string;
+  payloadMode: PayloadMode;
+};
+
+export type DialogMode = 'single' | 'pipeline' | 'intervals';
+
+export type SimulationUser = Record<string, unknown> & {
+  id: string;
+};
+
+export type SimulationState = {
+  membersByCid: Record<string, Record<string, Record<string, unknown>>>;
+  messageIdsByCid: Record<string, string[]>;
+  nextReactionTypeIndex: number;
+  nextSequence: number;
+  nextUserIndexByCid: Record<string, number>;
+  usersByCid: Record<string, SimulationUser[]>;
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventAutomation.ts b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventAutomation.ts
new file mode 100644
index 0000000000..42036ef295
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventAutomation.ts
@@ -0,0 +1,534 @@
+import type { Channel, StreamChat } from 'stream-chat';
+
+import {
+  websocketEventTemplateDefinitions,
+  type SupportedWebsocketEventType,
+  type WebSocketEventTemplateContext,
+} from './websocketEventTemplates';
+import type { SimulationState, SimulationUser } from './types';
+
+type JsonObject = Record<string, unknown>;
+type HandleEventArgument = Parameters<StreamChat['handleEvent']>[0];
+
+const messageTextFragments = [
+  'debug event payload',
+  'fresh simulated message',
+  'pipeline message',
+  'interval event',
+  'synthetic chat traffic',
+];
+
+const reactionTypes = ['love', 'haha', 'wow', 'like', 'sad'] as const;
+
+const asJsonObject = (value: unknown): JsonObject | undefined => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return undefined;
+  }
+
+  return value as JsonObject;
+};
+
+const getId = (value: unknown) => {
+  if (typeof value === 'string' && value.length > 0) {
+    return value;
+  }
+
+  return undefined;
+};
+
+const getUserId = (user: unknown) => getId(asJsonObject(user)?.id);
+
+const getMessageId = (message: unknown) => getId(asJsonObject(message)?.id);
+
+const getMessageUser = (message: unknown) => asJsonObject(asJsonObject(message)?.user);
+
+const getMessageMember = (message: unknown) =>
+  asJsonObject(asJsonObject(message)?.member);
+
+const buildRandomMessageText = (sequence: number) =>
+  `${messageTextFragments[sequence % messageTextFragments.length]} #${sequence}`;
+
+const buildReactionState = ({ reaction }: { reaction: JsonObject }): JsonObject => {
+  const reactionType = getId(reaction.type) ?? 'love';
+  const reactionScore =
+    typeof reaction.score === 'number' && Number.isFinite(reaction.score)
+      ? reaction.score
+      : 1;
+  const reactionTimestamp = getId(reaction.created_at) ?? new Date().toISOString();
+
+  return {
+    latest_reactions: [reaction],
+    reaction_counts: {
+      [reactionType]: 1,
+    },
+    reaction_groups: {
+      [reactionType]: {
+        count: 1,
+        first_reaction_at: reactionTimestamp,
+        last_reaction_at: reactionTimestamp,
+        latest_reactions_by: [],
+        sum_scores: reactionScore,
+      },
+    },
+    reaction_scores: {
+      [reactionType]: reactionScore,
+    },
+  };
+};
+
+const uniquePush = <T extends string>(items: T[], value: T) => {
+  if (items.includes(value)) return items;
+  return [...items, value];
+};
+
+const upsertUser = (users: SimulationUser[], nextUser: SimulationUser) => {
+  const existingIndex = users.findIndex((user) => user.id === nextUser.id);
+
+  if (existingIndex === -1) {
+    return [...users, nextUser];
+  }
+
+  const clonedUsers = [...users];
+  clonedUsers[existingIndex] = {
+    ...clonedUsers[existingIndex],
+    ...nextUser,
+  };
+  return clonedUsers;
+};
+
+const getChannelMembersForCid = (
+  cid: string,
+  simulationState: SimulationState,
+  templateContext: WebSocketEventTemplateContext,
+) => {
+  const knownMembers = Object.values(simulationState.membersByCid[cid] ?? {});
+
+  if (knownMembers.length > 0) {
+    return knownMembers;
+  }
+
+  return templateContext.channelMembers;
+};
+
+const buildFreshContext = (
+  templateContext: WebSocketEventTemplateContext,
+  simulationState: SimulationState,
+): WebSocketEventTemplateContext => {
+  const sequence = simulationState.nextSequence;
+  const createdAt = new Date().toISOString();
+  const channelMembers = getChannelMembersForCid(
+    templateContext.cid,
+    simulationState,
+    templateContext,
+  );
+  const memberCount = channelMembers.length || templateContext.memberCount;
+  const baseChannel = asJsonObject(templateContext.channel) ?? {};
+
+  return {
+    ...templateContext,
+    channel: {
+      ...baseChannel,
+      member_count: memberCount,
+      members: channelMembers,
+    },
+    channelMembers,
+    createdAt,
+    lastReadAt: createdAt,
+    memberCount,
+    messageId: `sim-message-${sequence}`,
+    parentMessageId: `sim-parent-${sequence}`,
+    pollId: `sim-poll-${sequence}`,
+    reminderId: `sim-reminder-${sequence}`,
+  };
+};
+
+const getUsersForCid = (
+  cid: string,
+  simulationState: SimulationState,
+  templateContext: WebSocketEventTemplateContext,
+) => {
+  const existingUsers = simulationState.usersByCid[cid];
+
+  if (existingUsers?.length) {
+    return existingUsers;
+  }
+
+  return [
+    templateContext.actor as SimulationUser,
+    templateContext.otherUser as SimulationUser,
+  ];
+};
+
+const pickNextUser = (
+  simulationState: SimulationState,
+  templateContext: WebSocketEventTemplateContext,
+) => {
+  const cid = templateContext.cid;
+  const users = getUsersForCid(cid, simulationState, templateContext);
+
+  const nextIndex = simulationState.nextUserIndexByCid[cid] ?? 0;
+  const user =
+    users[nextIndex % users.length] ?? (templateContext.actor as SimulationUser);
+
+  simulationState.nextUserIndexByCid[cid] = nextIndex + 1;
+
+  const member =
+    simulationState.membersByCid[cid]?.[user.id] ??
+    (user.id === getUserId(templateContext.otherUser)
+      ? templateContext.otherMember
+      : templateContext.actorMember);
+
+  return {
+    member,
+    user,
+  };
+};
+
+const pickMessageId = (
+  simulationState: SimulationState,
+  templateContext: WebSocketEventTemplateContext,
+) => {
+  const messageIds = simulationState.messageIdsByCid[templateContext.cid];
+
+  if (messageIds?.length) {
+    return messageIds[messageIds.length - 1] ?? templateContext.messageId;
+  }
+
+  return templateContext.messageId;
+};
+
+const pickReactionType = (simulationState: SimulationState) => {
+  const reactionType =
+    reactionTypes[simulationState.nextReactionTypeIndex % reactionTypes.length] ??
+    reactionTypes[0];
+  simulationState.nextReactionTypeIndex += 1;
+  return reactionType;
+};
+
+const registerUserAndMember = ({
+  cid,
+  member,
+  simulationState,
+  user,
+}: {
+  cid: string;
+  member?: JsonObject;
+  simulationState: SimulationState;
+  user?: JsonObject;
+}) => {
+  if (user) {
+    const userId = getUserId(user);
+
+    if (userId) {
+      simulationState.usersByCid[cid] = upsertUser(
+        simulationState.usersByCid[cid] ?? [],
+        user as SimulationUser,
+      );
+    }
+  }
+
+  if (member) {
+    const memberUserId = getUserId(member.user);
+
+    if (memberUserId) {
+      simulationState.membersByCid[cid] = {
+        ...(simulationState.membersByCid[cid] ?? {}),
+        [memberUserId]: member,
+      };
+    }
+  }
+};
+
+export const createInitialSimulationState = ({
+  channel,
+  templateContext,
+}: {
+  channel?: Channel;
+  templateContext: WebSocketEventTemplateContext;
+}): SimulationState => {
+  const cid = templateContext.cid;
+  const state: SimulationState = {
+    membersByCid: {
+      [cid]: {},
+    },
+    messageIdsByCid: {
+      [cid]: [],
+    },
+    nextReactionTypeIndex: 0,
+    nextSequence: 1,
+    nextUserIndexByCid: {
+      [cid]: 0,
+    },
+    usersByCid: {
+      [cid]: [],
+    },
+  };
+
+  registerUserAndMember({
+    cid,
+    member: templateContext.actorMember,
+    simulationState: state,
+    user: templateContext.actor,
+  });
+  registerUserAndMember({
+    cid,
+    member: templateContext.otherMember,
+    simulationState: state,
+    user: templateContext.otherUser,
+  });
+
+  const channelMembers = channel ? Object.values(channel.state.members) : [];
+  channelMembers.forEach((member) => {
+    const memberObject = asJsonObject(member);
+    const userObject = asJsonObject(memberObject?.user);
+
+    registerUserAndMember({
+      cid,
+      member: memberObject,
+      simulationState: state,
+      user: userObject,
+    });
+  });
+
+  const channelMessages = channel?.state.messages ?? [];
+
+  channelMessages.forEach((message) => {
+    const messageObject = asJsonObject(message);
+    const messageId = getMessageId(messageObject);
+
+    if (messageId) {
+      state.messageIdsByCid[cid] = uniquePush(
+        state.messageIdsByCid[cid] ?? [],
+        messageId,
+      );
+    }
+
+    registerUserAndMember({
+      cid,
+      member: getMessageMember(messageObject),
+      simulationState: state,
+      user: getMessageUser(messageObject),
+    });
+  });
+
+  return state;
+};
+
+export const buildFreshWebSocketEventPayload = ({
+  eventType,
+  simulationState,
+  templateContext,
+}: {
+  eventType: SupportedWebsocketEventType;
+  simulationState: SimulationState;
+  templateContext: WebSocketEventTemplateContext;
+}): JsonObject => {
+  const freshContext = buildFreshContext(templateContext, simulationState);
+  const basePayload = websocketEventTemplateDefinitions[eventType].buildDefault(
+    freshContext,
+  ) as JsonObject;
+
+  switch (eventType) {
+    case 'message.new':
+    case 'notification.message_new': {
+      const { member, user } = pickNextUser(simulationState, freshContext);
+      const messageId = freshContext.messageId;
+      const text = buildRandomMessageText(simulationState.nextSequence);
+      simulationState.nextSequence += 1;
+
+      const baseMessage = asJsonObject(basePayload.message) ?? {};
+
+      return {
+        ...basePayload,
+        created_at: freshContext.createdAt,
+        message: {
+          ...baseMessage,
+          created_at: freshContext.createdAt,
+          html: `<p>${text}</p>\n`,
+          id: messageId,
+          member,
+          text,
+          updated_at: freshContext.createdAt,
+          user,
+        },
+        message_id: messageId,
+        user: eventType === 'message.new' ? user : basePayload.user,
+      };
+    }
+    case 'reaction.new':
+    case 'reaction.updated':
+    case 'reaction.deleted': {
+      const { member, user } = pickNextUser(simulationState, freshContext);
+      const messageId = pickMessageId(simulationState, freshContext);
+      const baseMessage = asJsonObject(basePayload.message) ?? {};
+      const baseReaction = asJsonObject(basePayload.reaction) ?? {};
+      const reactionType = pickReactionType(simulationState);
+      const reactionScore = eventType === 'reaction.updated' ? 2 : 1;
+      const reaction = {
+        ...baseReaction,
+        created_at: freshContext.createdAt,
+        message_id: messageId,
+        type: reactionType,
+        updated_at: freshContext.createdAt,
+        user,
+        user_id: user.id,
+        score: reactionScore,
+      };
+
+      return {
+        ...basePayload,
+        channel: basePayload.channel,
+        channel_member_count:
+          typeof basePayload.channel_member_count === 'number'
+            ? basePayload.channel_member_count
+            : freshContext.memberCount,
+        created_at: freshContext.createdAt,
+        message: {
+          ...baseMessage,
+          id: messageId,
+          member,
+          updated_at: freshContext.createdAt,
+          user,
+          ...buildReactionState({ reaction }),
+        },
+        message_id: messageId,
+        reaction,
+        user,
+      };
+    }
+    case 'typing.start':
+    case 'typing.stop':
+    case 'user.watching.start':
+    case 'user.watching.stop': {
+      const { user } = pickNextUser(simulationState, freshContext);
+
+      return {
+        ...basePayload,
+        created_at: freshContext.createdAt,
+        user,
+      };
+    }
+    case 'message.updated':
+    case 'message.deleted':
+    case 'message.undeleted': {
+      const messageId = pickMessageId(simulationState, freshContext);
+      const { member, user } = pickNextUser(simulationState, freshContext);
+      const baseMessage = asJsonObject(basePayload.message) ?? {};
+
+      return {
+        ...basePayload,
+        created_at: freshContext.createdAt,
+        message: {
+          ...baseMessage,
+          id: messageId,
+          member,
+          updated_at: freshContext.createdAt,
+          user,
+        },
+        user,
+      };
+    }
+    case 'message.read':
+    case 'notification.mark_unread': {
+      const messageId = pickMessageId(simulationState, freshContext);
+
+      return {
+        ...basePayload,
+        created_at: freshContext.createdAt,
+        first_unread_message_id: messageId,
+        last_read_at: freshContext.createdAt,
+        last_read_message_id: messageId,
+      };
+    }
+    default:
+      simulationState.nextSequence += 1;
+      return {
+        ...basePayload,
+        created_at: freshContext.createdAt,
+      };
+  }
+};
+
+export const trackSimulationStateFromPayload = ({
+  payload,
+  simulationState,
+  templateContext,
+}: {
+  payload: JsonObject;
+  simulationState: SimulationState;
+  templateContext: WebSocketEventTemplateContext;
+}) => {
+  const cid = getId(payload.cid) ?? templateContext.cid;
+  const message = asJsonObject(payload.message);
+  const messageId = getMessageId(message) ?? getId(payload.message_id);
+
+  if (messageId) {
+    simulationState.messageIdsByCid[cid] = uniquePush(
+      simulationState.messageIdsByCid[cid] ?? [],
+      messageId,
+    );
+  }
+
+  registerUserAndMember({
+    cid,
+    member: asJsonObject(payload.member),
+    simulationState,
+    user: asJsonObject(payload.user),
+  });
+  registerUserAndMember({
+    cid,
+    member: getMessageMember(message),
+    simulationState,
+    user: getMessageUser(message),
+  });
+
+  const channelObject = asJsonObject(payload.channel);
+
+  if (Array.isArray(channelObject?.members)) {
+    simulationState.membersByCid[cid] = {};
+
+    channelObject.members.forEach((memberValue) => {
+      const member = asJsonObject(memberValue);
+
+      if (!member) return;
+
+      registerUserAndMember({
+        cid,
+        member,
+        simulationState,
+        user: asJsonObject(member.user),
+      });
+    });
+  }
+};
+
+export const emitWebSocketEventPayload = ({
+  client,
+  eventType,
+  payload,
+  simulationState,
+  templateContext,
+}: {
+  client: StreamChat;
+  eventType: SupportedWebsocketEventType;
+  payload: JsonObject;
+  simulationState: SimulationState;
+  templateContext: WebSocketEventTemplateContext;
+}) => {
+  const emittedPayload = {
+    ...payload,
+    type: eventType,
+  };
+
+  client.handleEvent({
+    data: JSON.stringify(emittedPayload),
+  } as HandleEventArgument);
+
+  trackSimulationStateFromPayload({
+    payload: emittedPayload,
+    simulationState,
+    templateContext,
+  });
+
+  return emittedPayload;
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventPipelineStorage.ts b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventPipelineStorage.ts
new file mode 100644
index 0000000000..06aae98f28
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventPipelineStorage.ts
@@ -0,0 +1,147 @@
+import { supportedWebsocketEventTypes } from './websocketEventTemplates';
+import type { EventPipeline, SavedEventPipeline, SavedPipelineStep } from './types';
+
+const savedPipelinesStorageKey = 'stream-chat-react:vite:websocket-event-pipelines';
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && !Array.isArray(value);
+
+const isSupportedEventType = (
+  value: unknown,
+): value is (typeof supportedWebsocketEventTypes)[number] =>
+  typeof value === 'string' &&
+  supportedWebsocketEventTypes.includes(
+    value as (typeof supportedWebsocketEventTypes)[number],
+  );
+
+const normalizeSavedPipelineStep = (value: unknown): SavedPipelineStep | undefined => {
+  if (!isRecord(value) || value.kind === undefined) return;
+
+  if (value.kind === 'delay') {
+    if (typeof value.ms !== 'number' || !Number.isFinite(value.ms)) return;
+
+    return {
+      kind: 'delay',
+      ms: Math.max(value.ms, 0),
+    };
+  }
+
+  if (value.kind === 'emit') {
+    if (!isSupportedEventType(value.eventType)) return;
+    if (typeof value.payload !== 'string') return;
+    if (value.payloadMode !== 'fixed' && value.payloadMode !== 'fresh') return;
+
+    return {
+      eventType: value.eventType,
+      kind: 'emit',
+      payload: value.payload,
+      payloadMode: value.payloadMode,
+    };
+  }
+};
+
+const normalizeSavedPipeline = (value: unknown): SavedEventPipeline | undefined => {
+  if (!isRecord(value)) return;
+  if (typeof value.id !== 'string' || typeof value.name !== 'string') return;
+  if (typeof value.savedAt !== 'string' || typeof value.loop !== 'boolean') return;
+  if (!Array.isArray(value.steps)) return;
+
+  const steps = value.steps
+    .map(normalizeSavedPipelineStep)
+    .filter((step): step is SavedPipelineStep => !!step);
+
+  if (steps.length !== value.steps.length) return;
+
+  return {
+    id: value.id,
+    loop: value.loop,
+    name: value.name,
+    savedAt: value.savedAt,
+    steps,
+  };
+};
+
+export const getStoredSavedPipelines = (): SavedEventPipeline[] => {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const storedValue = window.localStorage.getItem(savedPipelinesStorageKey);
+
+    if (!storedValue) return [];
+
+    const parsedValue = JSON.parse(storedValue) as unknown;
+
+    if (!Array.isArray(parsedValue)) return [];
+
+    return parsedValue
+      .map(normalizeSavedPipeline)
+      .filter((pipeline): pipeline is SavedEventPipeline => !!pipeline);
+  } catch {
+    return [];
+  }
+};
+
+export const persistSavedPipelines = (savedPipelines: SavedEventPipeline[]) => {
+  if (typeof window === 'undefined') return;
+
+  try {
+    window.localStorage.setItem(savedPipelinesStorageKey, JSON.stringify(savedPipelines));
+  } catch {
+    // ignore persistence failures in environments where localStorage is unavailable
+  }
+};
+
+export const serializePipelineForStorage = ({
+  pipeline,
+  savedPipelineId,
+}: {
+  pipeline: EventPipeline;
+  savedPipelineId: string;
+}): SavedEventPipeline => ({
+  id: savedPipelineId,
+  loop: pipeline.loop,
+  name: pipeline.name.trim(),
+  savedAt: new Date().toISOString(),
+  steps: pipeline.steps.map((step) =>
+    step.kind === 'delay'
+      ? {
+          kind: 'delay',
+          ms: step.ms,
+        }
+      : {
+          eventType: step.eventType,
+          kind: 'emit',
+          payload: step.payload,
+          payloadMode: step.payloadMode,
+        },
+  ),
+});
+
+export const hydrateSavedPipeline = ({
+  createId,
+  savedPipeline,
+}: {
+  createId: (prefix: string) => string;
+  savedPipeline: SavedEventPipeline;
+}): EventPipeline => ({
+  id: createId('pipeline'),
+  loop: savedPipeline.loop,
+  name: savedPipeline.name,
+  steps: savedPipeline.steps.map((step) =>
+    step.kind === 'delay'
+      ? {
+          id: createId('pipeline-step'),
+          kind: 'delay' as const,
+          ms: step.ms,
+        }
+      : {
+          emitCount: 0,
+          eventType: step.eventType,
+          id: createId('pipeline-step'),
+          kind: 'emit' as const,
+          lastEmittedAt: null,
+          payload: step.payload,
+          payloadMode: step.payloadMode,
+        },
+  ),
+});
diff --git a/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventTemplates.ts b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventTemplates.ts
new file mode 100644
index 0000000000..6b54283b91
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventTemplates.ts
@@ -0,0 +1,1805 @@
+import type { Channel, StreamChat } from 'stream-chat';
+
+type JsonObject = Record<string, unknown>;
+
+export const supportedWebsocketEventTypes = [
+  'ai_indicator.clear',
+  'ai_indicator.stop',
+  'ai_indicator.update',
+  'channel.created',
+  'channel.deleted',
+  'channel.hidden',
+  'channel.kicked',
+  'channel.muted',
+  'channel.truncated',
+  'channel.unmuted',
+  'channel.updated',
+  'channel.visible',
+  'draft.deleted',
+  'draft.updated',
+  'health.check',
+  'live_location_sharing.started',
+  'live_location_sharing.stopped',
+  'member.added',
+  'member.removed',
+  'member.updated',
+  'message.deleted',
+  'message.delivered',
+  'message.new',
+  'message.read',
+  'message.updated',
+  'message.undeleted',
+  'notification.added_to_channel',
+  'notification.channel_deleted',
+  'notification.channel_mutes_updated',
+  'notification.channel_truncated',
+  'notification.invite_accepted',
+  'notification.invite_rejected',
+  'notification.invited',
+  'notification.mark_read',
+  'notification.mark_unread',
+  'notification.message_new',
+  'notification.mutes_updated',
+  'notification.reminder_due',
+  'notification.removed_from_channel',
+  'notification.thread_message_new',
+  'poll.closed',
+  'poll.updated',
+  'poll.vote_casted',
+  'poll.vote_changed',
+  'poll.vote_removed',
+  'reaction.deleted',
+  'reaction.new',
+  'reaction.updated',
+  'reminder.created',
+  'reminder.deleted',
+  'reminder.updated',
+  'thread.updated',
+  'typing.start',
+  'typing.stop',
+  'user.banned',
+  'user.deleted',
+  'user.messages.deleted',
+  'user.presence.changed',
+  'user.unbanned',
+  'user.unread_message_reminder',
+  'user.updated',
+  'user.watching.start',
+  'user.watching.stop',
+] as const;
+
+export type SupportedWebsocketEventType = (typeof supportedWebsocketEventTypes)[number];
+
+export type WebSocketEventTemplateDefinition = {
+  buildDefault: (context: WebSocketEventTemplateContext) => JsonObject;
+  description: string;
+  todo?: string;
+};
+
+export type WebSocketEventPresetOption = {
+  description: string;
+  eventType: SupportedWebsocketEventType;
+  id: string;
+  label: string;
+};
+
+export type WebSocketEventTemplateContext = {
+  actor: JsonObject;
+  actorMember: JsonObject;
+  actorId: string;
+  channel: JsonObject;
+  channelMembers: JsonObject[];
+  channelId: string;
+  channelName: string;
+  channelType: string;
+  cid: string;
+  createdAt: string;
+  lastReadAt: string;
+  memberCount: number;
+  messageId: string;
+  otherMember: JsonObject;
+  otherUser: JsonObject;
+  parentMessageId: string;
+  pollId: string;
+  reactionType: string;
+  reminderId: string;
+  unreadChannels: number;
+  unreadCount: number;
+  watcherCount: number;
+};
+
+const createFallbackUser = (id: string, createdAt: string): JsonObject => ({
+  banned: false,
+  blocked_user_ids: [],
+  created_at: createdAt,
+  id,
+  invisible: false,
+  language: '',
+  last_active: createdAt,
+  name: id,
+  online: true,
+  role: 'user',
+  shadow_banned: false,
+  teams: [],
+  updated_at: createdAt,
+});
+
+const getUserId = (user: JsonObject) =>
+  typeof user.id === 'string' ? user.id : 'debug-user';
+
+const createMember = (user: JsonObject): JsonObject => {
+  const createdAt =
+    typeof user.created_at === 'string' ? user.created_at : new Date().toISOString();
+
+  return {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: createdAt,
+    notifications_muted: false,
+    role: 'member',
+    shadow_banned: false,
+    status: 'member',
+    updated_at: createdAt,
+    user,
+    user_id: getUserId(user),
+  };
+};
+
+const getMemberUserId = (member: { user?: unknown; user_id?: unknown }) => {
+  if (typeof member.user_id === 'string') {
+    return member.user_id;
+  }
+
+  const { user } = member;
+  if (!user || typeof user !== 'object' || !('id' in user)) {
+    return undefined;
+  }
+
+  return typeof user.id === 'string' ? user.id : undefined;
+};
+
+const buildChannel = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => {
+  const createdAt = context.createdAt;
+
+  return {
+    cid: context.cid,
+    config: {
+      automod: 'disabled',
+      blocklist_behavior: 'flag',
+      commands: [
+        {
+          args: '[@username] [text]',
+          description: 'Ban a user',
+          name: 'ban',
+          set: 'moderation_set',
+        },
+        {
+          args: '[@username]',
+          description: 'Unban a user',
+          name: 'unban',
+          set: 'moderation_set',
+        },
+        {
+          args: '[@username]',
+          description: 'Mute a user',
+          name: 'mute',
+          set: 'moderation_set',
+        },
+        {
+          args: '[@username]',
+          description: 'Unmute a user',
+          name: 'unmute',
+          set: 'moderation_set',
+        },
+        {
+          args: '[text]',
+          description: 'Post a random gif to the channel',
+          name: 'giphy',
+          set: 'fun_set',
+        },
+      ],
+      connect_events: true,
+      count_messages: false,
+      created_at: createdAt,
+      custom_events: true,
+      delivery_events: true,
+      mark_messages_pending: false,
+      max_message_length: 5000,
+      message_retention: 'infinite',
+      mutes: true,
+      name: context.channelType,
+      polls: true,
+      push_level: 'all',
+      push_notifications: true,
+      quotes: true,
+      reactions: true,
+      read_events: true,
+      reminders: true,
+      replies: true,
+      search: true,
+      shared_locations: true,
+      skip_last_msg_update_for_system_msgs: false,
+      typing_events: true,
+      updated_at: createdAt,
+      uploads: true,
+      url_enrichment: true,
+      user_message_reminders: true,
+    },
+    created_at: createdAt,
+    created_by: context.actor,
+    disabled: false,
+    frozen: false,
+    hidden: false,
+    id: context.channelId,
+    last_message_at: createdAt,
+    member_count: context.memberCount,
+    members: context.channelMembers,
+    name: context.channelName,
+    type: context.channelType,
+    updated_at: createdAt,
+    ...overrides,
+  };
+};
+
+const buildMe = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  ...context.actor,
+  channel_mutes: [],
+  devices: [],
+  invisible:
+    typeof context.actor.invisible === 'boolean' ? context.actor.invisible : false,
+  mutes: [],
+  total_unread_count: 0,
+  unread_channels: 0,
+  unread_count: 0,
+  unread_threads: 0,
+  ...overrides,
+});
+
+const buildNotificationChannelMutesUpdatedPayload = (
+  context: WebSocketEventTemplateContext,
+  channelMutes: JsonObject[],
+) => ({
+  created_at: context.createdAt,
+  me: buildMe(context, {
+    channel_mutes: channelMutes,
+  }),
+  type: 'notification.channel_mutes_updated',
+});
+
+const buildMuteEntry = (
+  context: WebSocketEventTemplateContext,
+  target: JsonObject = context.otherUser,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  created_at: context.createdAt,
+  target,
+  updated_at: context.createdAt,
+  user: context.actor,
+  ...overrides,
+});
+
+const buildNotificationMutesUpdatedPayload = (
+  context: WebSocketEventTemplateContext,
+  mutes: JsonObject[],
+) => ({
+  created_at: context.createdAt,
+  me: buildMe(context, {
+    channel_mutes: [],
+    mutes,
+  }),
+  type: 'notification.mutes_updated',
+});
+
+const buildReminderPayload = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  channel: buildChannel(context),
+  channel_cid: context.cid,
+  created_at: context.createdAt,
+  message: buildMessage(context, {
+    html: '',
+    member: undefined,
+    poll: buildPollWithAnswerComment(context, 'Some new comment X'),
+    poll_id: context.pollId,
+    text: '',
+    updated_at: context.createdAt,
+    user: context.otherUser,
+  }),
+  message_id: context.messageId,
+  remind_at: null,
+  updated_at: context.createdAt,
+  user: context.actor,
+  user_id: context.actorId,
+  ...overrides,
+});
+
+const buildMessageReminderSummary = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  channel_cid: context.cid,
+  created_at: context.createdAt,
+  message_id: context.messageId,
+  remind_at: null,
+  updated_at: context.createdAt,
+  user_id: context.actorId,
+  ...overrides,
+});
+
+const buildBaseEvent = (
+  context: WebSocketEventTemplateContext,
+  type: SupportedWebsocketEventType,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  channel_id: context.channelId,
+  channel_type: context.channelType,
+  cid: context.cid,
+  created_at: context.createdAt,
+  type,
+  ...overrides,
+});
+
+const buildMessage = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  attachments: [],
+  cid: context.cid,
+  created_at: context.createdAt,
+  deleted_reply_count: 0,
+  html: '<p>Debug websocket event payload</p>\n',
+  id: context.messageId,
+  latest_reactions: [],
+  member: context.actorMember,
+  mentioned_channel: false,
+  mentioned_here: false,
+  mentioned_users: [],
+  own_reactions: [],
+  pinned: false,
+  pinned_at: null,
+  pinned_by: null,
+  pin_expires: null,
+  reaction_counts: {},
+  reaction_groups: {},
+  reaction_scores: {},
+  reply_count: 0,
+  restricted_visibility: [],
+  shadowed: false,
+  silent: false,
+  text: 'Debug websocket event payload',
+  type: 'regular',
+  updated_at: context.createdAt,
+  user: context.actor,
+  ...overrides,
+});
+
+const buildReaction = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  created_at: context.createdAt,
+  message_id: context.messageId,
+  score: 1,
+  type: context.reactionType,
+  updated_at: context.createdAt,
+  user: context.actor,
+  user_id: context.actorId,
+  ...overrides,
+});
+
+const buildReactionState = ({
+  latestReactions,
+  reactionType,
+  score,
+  timestamp,
+}: {
+  latestReactions: JsonObject[];
+  reactionType: string;
+  score: number;
+  timestamp: string;
+}): JsonObject => ({
+  latest_reactions: latestReactions,
+  reaction_counts: {
+    [reactionType]: latestReactions.length,
+  },
+  reaction_groups: {
+    [reactionType]: {
+      count: latestReactions.length,
+      first_reaction_at: timestamp,
+      last_reaction_at: timestamp,
+      latest_reactions_by: [],
+      sum_scores: latestReactions.length * score,
+    },
+  },
+  reaction_scores: {
+    [reactionType]: latestReactions.length * score,
+  },
+});
+
+const buildPollOptions = () =>
+  Array.from({ length: 12 }, (_, index) => ({
+    id: `debug-poll-option-${index + 1}`,
+    text: `Option ${index + 1}`,
+  }));
+
+const buildPollVote = (
+  context: WebSocketEventTemplateContext,
+  optionId: string,
+): JsonObject => ({
+  created_at: context.createdAt,
+  id: `debug-poll-vote-${Date.now()}`,
+  option_id: optionId,
+  poll_id: context.pollId,
+  updated_at: context.createdAt,
+  user: context.actor,
+  user_id: context.actorId,
+});
+
+const buildPollAnswerVote = (
+  context: WebSocketEventTemplateContext,
+  answerText: string,
+  overrides: JsonObject = {},
+): JsonObject => ({
+  answer_text: answerText,
+  created_at: context.createdAt,
+  id: `debug-poll-answer-${Date.now()}`,
+  is_answer: true,
+  option_id: '',
+  poll_id: context.pollId,
+  updated_at: context.createdAt,
+  user: context.actor,
+  user_id: context.actorId,
+  ...overrides,
+});
+
+const buildPoll = (
+  context: WebSocketEventTemplateContext,
+  overrides: JsonObject = {},
+): JsonObject => {
+  const options = buildPollOptions();
+  const firstOptionId = options[0]?.id ?? 'debug-poll-option-1';
+  const ownVote = buildPollVote(context, firstOptionId);
+
+  return {
+    allow_answers: true,
+    allow_user_suggested_options: true,
+    answers_count: 0,
+    created_at: context.createdAt,
+    created_by: context.otherUser,
+    created_by_id:
+      typeof context.otherUser.id === 'string'
+        ? context.otherUser.id
+        : 'debug-poll-author',
+    description: '',
+    enforce_unique_vote: false,
+    id: context.pollId,
+    latest_answers: [],
+    latest_votes_by_option: {},
+    max_votes_allowed: 10,
+    name: 'Test Poll',
+    options,
+    own_votes: [ownVote],
+    updated_at: context.createdAt,
+    vote_count: 1,
+    vote_counts_by_option: {
+      [firstOptionId]: 1,
+    },
+    voting_visibility: 'anonymous',
+    ...overrides,
+  };
+};
+
+const buildClosedPoll = (context: WebSocketEventTemplateContext): JsonObject => ({
+  allow_answers: false,
+  allow_user_suggested_options: false,
+  answers_count: 0,
+  created_at: context.lastReadAt,
+  created_by: context.actor,
+  created_by_id: context.actorId,
+  description: '',
+  enforce_unique_vote: true,
+  id: context.pollId,
+  is_closed: true,
+  latest_answers: [],
+  latest_votes_by_option: {},
+  max_votes_allowed: null,
+  name: 'Asking a question',
+  options: [
+    {
+      id: 'debug-poll-option-1',
+      text: 'Option1',
+    },
+    {
+      id: 'debug-poll-option-2',
+      text: 'Option2',
+    },
+  ],
+  own_votes: [],
+  updated_at: context.createdAt,
+  vote_count: 0,
+  vote_counts_by_option: {},
+  voting_visibility: 'public',
+});
+
+const getPollOptionId = (poll: JsonObject) =>
+  Array.isArray(poll.options) &&
+  poll.options[0] &&
+  typeof poll.options[0] === 'object' &&
+  poll.options[0] &&
+  'id' in poll.options[0] &&
+  typeof poll.options[0].id === 'string'
+    ? poll.options[0].id
+    : 'debug-poll-option-1';
+
+const buildPollWithAnswerComment = (
+  context: WebSocketEventTemplateContext,
+  answerText: string,
+) => {
+  const answerCreatedAt = new Date(Date.now() - 60_000).toISOString();
+  const pollVote = buildPollAnswerVote(context, answerText, {
+    created_at: answerCreatedAt,
+    updated_at: context.createdAt,
+  });
+
+  return buildPoll(context, {
+    answers_count: 1,
+    latest_answers: [pollVote],
+    options: [
+      ...buildPollOptions(),
+      {
+        id: 'debug-poll-option-13',
+        text: 'New option',
+      },
+    ],
+    own_votes: [
+      {
+        answer_text: answerText,
+        created_at: answerCreatedAt,
+        id:
+          typeof pollVote.id === 'string'
+            ? pollVote.id
+            : `debug-poll-answer-${Date.now()}`,
+        is_answer: true,
+        option_id: '',
+        poll_id: context.pollId,
+        updated_at: context.createdAt,
+        user: context.actor,
+        user_id: context.actorId,
+      },
+    ],
+    updated_at: context.createdAt,
+    vote_count: 0,
+    vote_counts_by_option: {},
+  });
+};
+
+const buildMessageUpdatedPinnedPayload = (context: WebSocketEventTemplateContext) =>
+  buildBaseEvent(context, 'message.updated', {
+    channel_custom: {
+      name: context.channelName,
+    },
+    channel_member_count: context.memberCount,
+    message: buildMessage(context, {
+      html: '',
+      member: undefined,
+      pinned: true,
+      pinned_at: context.createdAt,
+      pinned_by: context.actor,
+      poll: buildPollWithAnswerComment(context, 'Some new comment X'),
+      poll_id: context.pollId,
+      text: '',
+      updated_at: context.createdAt,
+      user: context.otherUser,
+    }),
+    message_id: context.messageId,
+    message_update: {
+      change_set: {
+        attachments: false,
+        custom: false,
+        html: false,
+        mentioned_user_ids: false,
+        mml: false,
+        pin: true,
+        quoted_message_id: false,
+        silent: false,
+        text: false,
+      },
+    },
+    user: context.actor,
+  });
+
+const buildMessageUpdatedUnpinnedPayload = (context: WebSocketEventTemplateContext) =>
+  buildBaseEvent(context, 'message.updated', {
+    channel_custom: {
+      name: context.channelName,
+    },
+    channel_member_count: context.memberCount,
+    message: buildMessage(context, {
+      html: '',
+      member: undefined,
+      pinned: false,
+      pinned_at: null,
+      pinned_by: null,
+      poll: buildPollWithAnswerComment(context, 'Some new comment X'),
+      poll_id: context.pollId,
+      text: '',
+      updated_at: context.createdAt,
+      user: context.otherUser,
+    }),
+    message_id: context.messageId,
+    message_update: {
+      change_set: {
+        attachments: false,
+        custom: false,
+        html: false,
+        mentioned_user_ids: false,
+        mml: false,
+        pin: true,
+        quoted_message_id: false,
+        silent: false,
+        text: false,
+      },
+    },
+    user: context.actor,
+  });
+
+const buildChannelUpdatedEvent = (
+  context: WebSocketEventTemplateContext,
+  channelOverrides: JsonObject = {},
+  eventOverrides: JsonObject = {},
+) =>
+  buildBaseEvent(context, 'channel.updated', {
+    channel: buildChannel(context, channelOverrides),
+    channel_member_count:
+      typeof channelOverrides.member_count === 'number'
+        ? channelOverrides.member_count
+        : context.memberCount,
+    user: context.actor,
+    ...eventOverrides,
+  });
+
+const buildChannelUpdatedRemovedMemberPayload = (
+  context: WebSocketEventTemplateContext,
+) => {
+  const nextMembers = context.channelMembers.filter(
+    (member) => getMemberUserId(member) !== getMemberUserId(context.otherMember),
+  );
+  const nextMemberCount = Math.max(context.memberCount - 1, 0);
+
+  return buildChannelUpdatedEvent(
+    context,
+    {
+      member_count: nextMemberCount,
+      members: nextMembers,
+    },
+    {
+      channel_member_count: nextMemberCount,
+    },
+  );
+};
+
+const buildChannelUpdatedDisabledPayload = (
+  context: WebSocketEventTemplateContext,
+  disabled: boolean,
+) =>
+  buildChannelUpdatedEvent(context, {
+    disabled,
+  });
+
+const buildChannelUpdatedFrozenPayload = (
+  context: WebSocketEventTemplateContext,
+  frozen: boolean,
+) =>
+  buildChannelUpdatedEvent(context, {
+    frozen,
+  });
+
+const buildChannelUpdatedRenamedPayload = (context: WebSocketEventTemplateContext) => {
+  const nextName = `${context.channelName} (updated)`;
+
+  return buildChannelUpdatedEvent(
+    context,
+    {
+      name: nextName,
+    },
+    {
+      channel_custom: { name: nextName },
+    },
+  );
+};
+
+const buildMemberUpdatedPayload = (
+  context: WebSocketEventTemplateContext,
+  memberOverrides: JsonObject = {},
+) =>
+  buildBaseEvent(context, 'member.updated', {
+    channel: buildChannel(context),
+    channel_member_count: context.memberCount,
+    member: {
+      ...context.actorMember,
+      updated_at: context.createdAt,
+      ...memberOverrides,
+    },
+    user: context.actor,
+  });
+
+const createTodoTemplate = (
+  description: string,
+  todo: string,
+): WebSocketEventTemplateDefinition => ({
+  buildDefault: () => ({}),
+  description,
+  todo,
+});
+
+export const createWebSocketEventTemplateContext = ({
+  channel,
+  client,
+}: {
+  channel?: Channel;
+  client: StreamChat;
+}): WebSocketEventTemplateContext => {
+  const createdAt = new Date().toISOString();
+  const actorUser =
+    client.user && typeof client.user === 'object'
+      ? ({ ...client.user } as JsonObject)
+      : createFallbackUser('debug-user', createdAt);
+  const actorId = typeof actorUser.id === 'string' ? actorUser.id : 'debug-user';
+
+  const members = channel ? Object.values(channel.state.members) : [];
+  const actorMemberFromChannel = members.find(
+    (member) => getMemberUserId(member) === actorId,
+  );
+  const actorMember = actorMemberFromChannel
+    ? ({ ...actorMemberFromChannel } as JsonObject)
+    : createMember(actorUser);
+
+  const otherMemberFromChannel = members.find(
+    (member) => getMemberUserId(member) !== actorId,
+  );
+  const otherUser =
+    otherMemberFromChannel?.user && typeof otherMemberFromChannel.user === 'object'
+      ? ({ ...otherMemberFromChannel.user } as JsonObject)
+      : createFallbackUser('debug-other-user', createdAt);
+  const otherMember = otherMemberFromChannel
+    ? ({ ...otherMemberFromChannel } as JsonObject)
+    : createMember(otherUser);
+  const channelMembers = (
+    members.length
+      ? members.map((member) => ({ ...member }) as JsonObject)
+      : [actorMember, otherMember]
+  ) as JsonObject[];
+
+  const channelData = channel?.data as
+    | {
+        frozen?: boolean;
+        hidden?: boolean;
+        name?: string;
+      }
+    | undefined;
+
+  const channelType = channel?.type ?? 'messaging';
+  const channelId = channel?.id ?? 'debug';
+  const cid = channel?.cid ?? `${channelType}:${channelId}`;
+  const channelName = channelData?.name ?? channelId;
+  const memberCount = members.length || 2;
+  const watcherCount =
+    Object.keys(channel?.state.watchers ?? {}).length || Math.max(memberCount, 1);
+  const unreadCount = channel?.state.unreadCount ?? 1;
+
+  return {
+    actor: actorUser,
+    actorId,
+    actorMember,
+    channel: buildChannel(
+      {
+        actor: actorUser,
+        actorId,
+        actorMember,
+        channel: {},
+        channelMembers,
+        channelId,
+        channelName,
+        channelType,
+        cid,
+        createdAt,
+        lastReadAt: createdAt,
+        memberCount,
+        messageId: 'debug-message-id',
+        otherMember,
+        otherUser,
+        parentMessageId: 'debug-parent-message-id',
+        pollId: 'debug-poll-id',
+        reactionType: 'love',
+        reminderId: 'debug-reminder-id',
+        unreadChannels: 1,
+        unreadCount,
+        watcherCount,
+      },
+      {
+        frozen: channelData?.frozen ?? false,
+        hidden: channelData?.hidden ?? false,
+      },
+    ),
+    channelId,
+    channelMembers,
+    channelName,
+    channelType,
+    cid,
+    createdAt,
+    lastReadAt: createdAt,
+    memberCount,
+    messageId: `debug-message-${Date.now()}`,
+    otherMember,
+    otherUser,
+    parentMessageId: `debug-parent-${Date.now()}`,
+    pollId: `debug-poll-${Date.now()}`,
+    reactionType: 'love',
+    reminderId: `debug-reminder-${Date.now()}`,
+    unreadChannels: 1,
+    unreadCount,
+    watcherCount,
+  };
+};
+
+export const websocketEventTemplateDefinitions = {
+  'ai_indicator.clear': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'ai_indicator.clear', {
+        user: context.actor,
+      }),
+    description: 'Clear an AI indicator for the active channel.',
+  },
+  'ai_indicator.stop': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'ai_indicator.stop', {
+        user: context.actor,
+      }),
+    description: 'Stop an AI indicator for the active channel.',
+  },
+  'ai_indicator.update': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'ai_indicator.update', {
+        ai_message: 'Debug AI indicator payload',
+        ai_state: 'thinking',
+        user: context.actor,
+      }),
+    description: 'Update the AI indicator for the active channel.',
+  },
+  'channel.created': createTodoTemplate(
+    'Channel creation event.',
+    'Populate with a realistic channel.created payload after validating the example flow.',
+  ),
+  'channel.deleted': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'channel.deleted', {
+        channel: buildChannel(context),
+      }),
+    description: 'Delete the active channel locally.',
+  },
+  'channel.hidden': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'channel.hidden', {
+        channel: buildChannel(context, { blocked: false, hidden: true }),
+        clear_history: false,
+      }),
+    description: 'Hide the active channel.',
+  },
+  'channel.kicked': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'channel.kicked', {
+        user: context.actor,
+      }),
+    description: 'Simulate the current user being kicked from the active channel.',
+  },
+  'channel.muted': createTodoTemplate(
+    'Channel mute state update.',
+    'Populate after validating the expected notification/channel mute payload shape.',
+  ),
+  'channel.truncated': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'channel.truncated', {
+        channel: buildChannel(context, { truncated_at: context.createdAt }),
+      }),
+    description: 'Truncate the active channel history.',
+  },
+  'channel.unmuted': createTodoTemplate(
+    'Channel unmute state update.',
+    'Populate after validating the expected notification/channel mute payload shape.',
+  ),
+  'channel.updated': {
+    buildDefault: (context) => buildChannelUpdatedRenamedPayload(context),
+    description: 'Update the active channel metadata.',
+  },
+  'channel.visible': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'channel.visible', {
+        channel: buildChannel(context, { blocked: false, hidden: false }),
+      }),
+    description: 'Show the active channel again.',
+  },
+  'draft.deleted': createTodoTemplate(
+    'Draft deletion event.',
+    'Populate after validating draft.deleted websocket payloads from the backend.',
+  ),
+  'draft.updated': createTodoTemplate(
+    'Draft creation or update event.',
+    'Populate after validating draft.updated websocket payloads from the backend.',
+  ),
+  'health.check': createTodoTemplate(
+    'Connection health check event.',
+    'Populate after validating the full me payload returned by connection health checks.',
+  ),
+  'live_location_sharing.started': createTodoTemplate(
+    'Live location sharing started event.',
+    'Populate after validating live location event payloads from the backend.',
+  ),
+  'live_location_sharing.stopped': createTodoTemplate(
+    'Live location sharing stopped event.',
+    'Populate after validating live location event payloads from the backend.',
+  ),
+  'member.added': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'member.added', {
+        member: context.otherMember,
+        user: context.otherUser,
+      }),
+    description: 'Add another member to the active channel.',
+  },
+  'member.removed': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'member.removed', {
+        member: context.otherMember,
+        user: context.otherUser,
+      }),
+    description: 'Remove another member from the active channel.',
+  },
+  'member.updated': {
+    buildDefault: (context) =>
+      buildMemberUpdatedPayload(context, {
+        archived_at: context.createdAt,
+      }),
+    description:
+      'Update a channel member, for example when their membership is archived.',
+  },
+  'message.deleted': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.deleted', {
+        hard_delete: false,
+        message: buildMessage(context, {
+          text: 'Deleted message payload',
+          type: 'deleted',
+        }),
+        user: context.actor,
+      }),
+    description: 'Delete a message in the active channel.',
+  },
+  'message.delivered': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.delivered', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        last_delivered_at: context.createdAt.replace(/\.\d+Z$/, 'Z'),
+        last_delivered_message_id: context.messageId,
+        user: context.otherUser,
+      }),
+    description: 'Confirm delivery of the latest message for another user.',
+  },
+  'message.new': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.new', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        message: buildMessage(context),
+        message_id: context.messageId,
+        total_unread_count: context.unreadCount,
+        unread_channels: context.unreadChannels,
+        unread_count: context.unreadCount,
+        user: context.actor,
+        watcher_count: context.watcherCount,
+      }),
+    description: 'Insert a new message into the active channel.',
+  },
+  'message.read': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.read', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        last_read_message_id: context.messageId,
+        user: context.actor,
+      }),
+    description: 'Mark the active channel as read for the current user.',
+  },
+  'message.updated': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.updated', {
+        message: buildMessage(context, {
+          html: '<p>Updated websocket event payload</p>\n',
+          text: 'Updated websocket event payload',
+          updated_at: context.createdAt,
+        }),
+        user: context.actor,
+      }),
+    description: 'Update a message in the active channel.',
+  },
+  'message.undeleted': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'message.undeleted', {
+        message: buildMessage(context, {
+          text: 'Restored websocket event payload',
+        }),
+        user: context.actor,
+      }),
+    description: 'Restore a deleted message in the active channel.',
+  },
+  'notification.added_to_channel': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'notification.added_to_channel', {
+        channel: buildChannel(context),
+        channel_member_count: context.memberCount,
+        member: context.otherMember,
+        total_unread_count: 0,
+        unread_channels: 0,
+        unread_count: 0,
+      }),
+    description: 'Notify the current user that they were added to a channel.',
+  },
+  'notification.channel_deleted': createTodoTemplate(
+    'Channel deleted notification event.',
+    'Populate after validating notification.channel_deleted payloads from the backend.',
+  ),
+  'notification.channel_mutes_updated': {
+    buildDefault: (context) =>
+      buildNotificationChannelMutesUpdatedPayload(context, [
+        {
+          channel: buildChannel(context, {
+            message_count: 0,
+          }),
+          created_at: context.createdAt,
+          updated_at: context.createdAt,
+          user: context.actor,
+        },
+      ]),
+    description: 'Update the current user channel mute list.',
+  },
+  'notification.channel_truncated': createTodoTemplate(
+    'Channel truncated notification event.',
+    'Populate after validating notification.channel_truncated payloads from the backend.',
+  ),
+  'notification.invite_accepted': createTodoTemplate(
+    'Invite accepted notification event.',
+    'Populate after validating notification.invite_accepted payloads from the backend.',
+  ),
+  'notification.invite_rejected': createTodoTemplate(
+    'Invite rejected notification event.',
+    'Populate after validating notification.invite_rejected payloads from the backend.',
+  ),
+  'notification.invited': createTodoTemplate(
+    'Channel invited notification event.',
+    'Populate after validating notification.invited payloads from the backend.',
+  ),
+  'notification.mark_read': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'notification.mark_read', {
+        channel: buildChannel(context),
+        channel_member_count: context.memberCount,
+        last_read_message_id: context.messageId,
+        total_unread_count: 0,
+        unread_channels: 0,
+        unread_count: 0,
+        unread_thread_messages: null,
+        unread_threads: null,
+        user: context.actor,
+      }),
+    description: 'Reset global unread counts for the current user.',
+  },
+  'notification.mark_unread': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'notification.mark_unread', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        first_unread_message_id: context.messageId,
+        last_read_at: context.lastReadAt,
+        last_read_message_id: context.messageId,
+        total_unread_count: context.unreadCount,
+        unread_channels: context.unreadChannels,
+        unread_count: context.unreadCount,
+        unread_thread_messages: null,
+        unread_threads: 0,
+        unread_messages: context.unreadCount,
+        user: context.actor,
+      }),
+    description: 'Mark the current channel unread for the current user.',
+  },
+  'notification.message_new': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'notification.message_new', {
+        channel: buildChannel(context),
+        message: buildMessage(context),
+        total_unread_count: context.unreadCount,
+        unread_channels: context.unreadChannels,
+        unread_count: context.unreadCount,
+      }),
+    description: 'Trigger a message notification for a watched channel.',
+  },
+  'notification.mutes_updated': {
+    buildDefault: (context) =>
+      buildNotificationMutesUpdatedPayload(context, [buildMuteEntry(context)]),
+    description: 'Update the current user mute list.',
+  },
+  'notification.reminder_due': createTodoTemplate(
+    'Reminder due notification event.',
+    'Populate after validating notification.reminder_due payloads from the backend.',
+  ),
+  'notification.removed_from_channel': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'notification.removed_from_channel', {
+        channel: buildChannel(context),
+        channel_member_count: context.memberCount,
+        member: context.otherMember,
+        user: context.otherUser,
+      }),
+    description: 'Notify that a member was removed from a channel.',
+  },
+  'notification.thread_message_new': createTodoTemplate(
+    'Thread message notification event.',
+    'Populate after validating notification.thread_message_new payloads from the backend.',
+  ),
+  'poll.closed': {
+    buildDefault: (context) => ({
+      cid: context.cid,
+      created_at: context.createdAt,
+      message_id: context.messageId,
+      poll: buildClosedPoll(context),
+      type: 'poll.closed',
+    }),
+    description: 'Close a poll attached to a message.',
+  },
+  'poll.updated': {
+    buildDefault: (context) => ({
+      cid: context.cid,
+      created_at: context.createdAt,
+      message_id: context.messageId,
+      poll: buildPoll(context, {
+        options: [
+          ...buildPollOptions(),
+          {
+            id: 'debug-poll-option-13',
+            text: 'New option',
+          },
+        ],
+        own_votes: [],
+        updated_at: context.createdAt,
+        vote_count: 0,
+        vote_counts_by_option: {},
+      }),
+      type: 'poll.updated',
+    }),
+    description: 'Update a poll, for example when a suggested option is added.',
+  },
+  'poll.vote_casted': {
+    buildDefault: (context) => {
+      const poll = buildPoll(context);
+      const optionId = getPollOptionId(poll);
+
+      return {
+        cid: context.cid,
+        created_at: context.createdAt,
+        message_id: context.messageId,
+        poll,
+        poll_vote: buildPollVote(context, optionId),
+        type: 'poll.vote_casted',
+      };
+    },
+    description: 'Cast a vote on a poll attached to a message.',
+  },
+  'poll.vote_changed': {
+    buildDefault: (context) => {
+      const originalCreatedAt = new Date(Date.now() - 60_000).toISOString();
+      const answerText = 'Some new comment X';
+      const pollVote = buildPollAnswerVote(context, answerText, {
+        created_at: originalCreatedAt,
+        updated_at: context.createdAt,
+      });
+
+      return {
+        cid: context.cid,
+        created_at: context.createdAt,
+        message_id: context.messageId,
+        poll: buildPoll(context, {
+          answers_count: 1,
+          latest_answers: [pollVote],
+          own_votes: [
+            {
+              answer_text: answerText,
+              created_at: originalCreatedAt,
+              id:
+                typeof pollVote.id === 'string'
+                  ? pollVote.id
+                  : `debug-poll-answer-${Date.now()}`,
+              is_answer: true,
+              option_id: '',
+              poll_id: context.pollId,
+              updated_at: context.createdAt,
+              user_id: context.actorId,
+            },
+          ],
+          options: [
+            ...buildPollOptions(),
+            {
+              id: 'debug-poll-option-13',
+              text: 'New option',
+            },
+          ],
+          updated_at: context.createdAt,
+          vote_count: 0,
+          vote_counts_by_option: {},
+        }),
+        poll_vote: pollVote,
+        type: 'poll.vote_changed',
+      };
+    },
+    description: 'Update a poll answer or comment.',
+  },
+  'poll.vote_removed': {
+    buildDefault: (context) => {
+      const poll = buildPoll(context, {
+        own_votes: [],
+        vote_count: 0,
+        vote_counts_by_option: {},
+      });
+      const optionId = getPollOptionId(poll);
+
+      return {
+        cid: context.cid,
+        created_at: context.createdAt,
+        message_id: context.messageId,
+        poll,
+        poll_vote: buildPollVote(context, optionId),
+        type: 'poll.vote_removed',
+      };
+    },
+    description: 'Remove a vote from a poll attached to a message.',
+  },
+  'reaction.deleted': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'reaction.deleted', {
+        channel: context.channel,
+        channel_member_count: context.memberCount,
+        message: buildMessage(context, {
+          ...buildReactionState({
+            latestReactions: [buildReaction(context)],
+            reactionType: context.reactionType,
+            score: 1,
+            timestamp: context.createdAt,
+          }),
+        }),
+        message_id: context.messageId,
+        reaction: buildReaction(context),
+        user: context.actor,
+      }),
+    description: 'Delete a reaction from a message.',
+  },
+  'reaction.new': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'reaction.new', {
+        channel: context.channel,
+        channel_member_count: context.memberCount,
+        message: buildMessage(context, {
+          ...buildReactionState({
+            latestReactions: [buildReaction(context)],
+            reactionType: context.reactionType,
+            score: 1,
+            timestamp: context.createdAt,
+          }),
+        }),
+        message_id: context.messageId,
+        reaction: buildReaction(context),
+        user: context.actor,
+      }),
+    description: 'Add a reaction to a message.',
+  },
+  'reaction.updated': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'reaction.updated', {
+        channel: context.channel,
+        channel_member_count: context.memberCount,
+        message: buildMessage(context, {
+          ...buildReactionState({
+            latestReactions: [buildReaction(context, { score: 2 })],
+            reactionType: context.reactionType,
+            score: 2,
+            timestamp: context.createdAt,
+          }),
+        }),
+        message_id: context.messageId,
+        reaction: buildReaction(context, { score: 2 }),
+        user: context.actor,
+      }),
+    description: 'Update a reaction on a message.',
+  },
+  'reminder.created': {
+    buildDefault: (context) => ({
+      cid: context.cid,
+      created_at: context.createdAt,
+      message_id: context.messageId,
+      reminder: buildReminderPayload(context),
+      type: 'reminder.created',
+      user_id: context.actorId,
+    }),
+    description: 'Create a reminder for a message.',
+  },
+  'reminder.deleted': {
+    buildDefault: (context) => ({
+      cid: context.cid,
+      created_at: context.createdAt,
+      message_id: context.messageId,
+      reminder: buildReminderPayload(context),
+      type: 'reminder.deleted',
+      user_id: context.actorId,
+    }),
+    description: 'Remove a reminder from a message.',
+  },
+  'reminder.updated': createTodoTemplate(
+    'Reminder updated event.',
+    'Populate after validating reminder.updated payloads from the backend.',
+  ),
+  'thread.updated': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'thread.updated', {
+        thread: {
+          active_participant_count: 2,
+          created_at: context.createdAt,
+          deleted_at: null,
+          last_message_at: context.createdAt,
+          parent_message_id: context.parentMessageId,
+          participant_count: 2,
+          reply_count: 3,
+          title: 'Debug thread',
+          updated_at: context.createdAt,
+        },
+        user: context.actor,
+      }),
+    description: 'Update thread metadata for the active channel.',
+  },
+  'typing.start': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'typing.start', {
+        channel_last_message_at:
+          typeof context.channel.last_message_at === 'string'
+            ? context.channel.last_message_at
+            : context.createdAt,
+        user: context.actor,
+      }),
+    description: 'Start typing in the active channel.',
+  },
+  'typing.stop': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'typing.stop', {
+        channel_last_message_at:
+          typeof context.channel.last_message_at === 'string'
+            ? context.channel.last_message_at
+            : context.createdAt,
+        user: context.actor,
+      }),
+    description: 'Stop typing in the active channel.',
+  },
+  'user.banned': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'user.banned', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        created_by: context.actor,
+        expiration: new Date(Date.now() + 60 * 60_000).toISOString(),
+        reason: 'because',
+        user: context.otherUser,
+      }),
+    description: 'Ban another user from the active channel.',
+  },
+  'user.deleted': createTodoTemplate(
+    'User deleted event.',
+    'Populate after validating user.deleted payloads from the backend.',
+  ),
+  'user.messages.deleted': createTodoTemplate(
+    'User messages deleted event.',
+    'Populate after validating user.messages.deleted payloads from the backend.',
+  ),
+  'user.presence.changed': {
+    buildDefault: (context) => ({
+      created_at: context.createdAt,
+      type: 'user.presence.changed',
+      user: {
+        ...context.actor,
+        last_active: context.createdAt,
+        online: false,
+      },
+    }),
+    description: 'Change the current user presence state.',
+  },
+  'user.unbanned': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'user.unbanned', {
+        channel_custom: { name: context.channelName },
+        channel_member_count: context.memberCount,
+        user: context.otherUser,
+      }),
+    description: 'Unban another user in the active channel.',
+  },
+  'user.unread_message_reminder': createTodoTemplate(
+    'Unread message reminder event.',
+    'Populate after validating user.unread_message_reminder payloads from the backend.',
+  ),
+  'user.updated': {
+    buildDefault: (context) => ({
+      created_at: context.createdAt,
+      type: 'user.updated',
+      user: {
+        ...context.actor,
+        name: 'Updated Debug User',
+        updated_at: context.createdAt,
+      },
+    }),
+    description: 'Update the current user object.',
+  },
+  'user.watching.start': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'user.watching.start', {
+        user: context.otherUser,
+        watcher_count: context.watcherCount + 1,
+      }),
+    description: 'Add another watcher to the active channel.',
+  },
+  'user.watching.stop': {
+    buildDefault: (context) =>
+      buildBaseEvent(context, 'user.watching.stop', {
+        user: context.otherUser,
+        watcher_count: Math.max(context.watcherCount - 1, 0),
+      }),
+    description: 'Remove a watcher from the active channel.',
+  },
+} satisfies Record<SupportedWebsocketEventType, WebSocketEventTemplateDefinition>;
+
+const compareEventTypesAlphabetically = (
+  left: SupportedWebsocketEventType,
+  right: SupportedWebsocketEventType,
+) => left.localeCompare(right);
+
+const comparePresetOptionsAlphabetically = (
+  left: WebSocketEventPresetOption,
+  right: WebSocketEventPresetOption,
+) => left.label.localeCompare(right.label);
+
+export const readyWebsocketEventTypes = supportedWebsocketEventTypes
+  .filter((eventType) => !('todo' in websocketEventTemplateDefinitions[eventType]))
+  .sort(compareEventTypesAlphabetically);
+
+export const todoWebsocketEventTypes = supportedWebsocketEventTypes
+  .filter((eventType) => 'todo' in websocketEventTemplateDefinitions[eventType])
+  .sort(compareEventTypesAlphabetically);
+
+const websocketEventPresetOptionsSource = [
+  {
+    description: 'Use poll.vote_casted to represent an answer or comment being added.',
+    eventType: 'poll.vote_casted',
+    id: 'poll.vote_casted.answer',
+    label: 'poll.vote_casted: answer/comment',
+  },
+  {
+    description: 'Use message.updated to represent a message being pinned.',
+    eventType: 'message.updated',
+    id: 'message.updated.pinned',
+    label: 'message.updated: pinned',
+  },
+  {
+    description: 'Use message.updated to represent a message being unpinned.',
+    eventType: 'message.updated',
+    id: 'message.updated.unpinned',
+    label: 'message.updated: unpinned',
+  },
+  {
+    description: 'Use notification.channel_mutes_updated to represent a channel mute.',
+    eventType: 'notification.channel_mutes_updated',
+    id: 'notification.channel_mutes_updated.muted',
+    label: 'notification.channel_mutes_updated: muted',
+  },
+  {
+    description: 'Use notification.channel_mutes_updated to represent a channel unmute.',
+    eventType: 'notification.channel_mutes_updated',
+    id: 'notification.channel_mutes_updated.unmuted',
+    label: 'notification.channel_mutes_updated: unmuted',
+  },
+  {
+    description: 'Use notification.mutes_updated to represent muting another user.',
+    eventType: 'notification.mutes_updated',
+    id: 'notification.mutes_updated.muted',
+    label: 'notification.mutes_updated: muted',
+  },
+  {
+    description: 'Use notification.mutes_updated to represent unmuting another user.',
+    eventType: 'notification.mutes_updated',
+    id: 'notification.mutes_updated.unmuted',
+    label: 'notification.mutes_updated: unmuted',
+  },
+  {
+    description: 'Use reminder.created to represent a scheduled reminder.',
+    eventType: 'reminder.created',
+    id: 'reminder.created.timed',
+    label: 'reminder.created: timed',
+  },
+  {
+    description: 'Use reminder.deleted to represent removing a scheduled reminder.',
+    eventType: 'reminder.deleted',
+    id: 'reminder.deleted.timed',
+    label: 'reminder.deleted: timed',
+  },
+  {
+    description: 'Use member.updated to represent a member being archived.',
+    eventType: 'member.updated',
+    id: 'member.updated.archived',
+    label: 'member.updated: archived',
+  },
+  {
+    description: 'Use member.updated to represent a member being pinned.',
+    eventType: 'member.updated',
+    id: 'member.updated.pinned',
+    label: 'member.updated: pinned',
+  },
+  {
+    description: 'Use member.updated to represent a member being unpinned.',
+    eventType: 'member.updated',
+    id: 'member.updated.unpinned',
+    label: 'member.updated: unpinned',
+  },
+  {
+    description: 'Use member.updated to represent a member being unarchived.',
+    eventType: 'member.updated',
+    id: 'member.updated.unarchived',
+    label: 'member.updated: unarchived',
+  },
+  {
+    description: 'Use channel.updated to represent a member being removed.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.member_removed',
+    label: 'channel.updated: member removed',
+  },
+  {
+    description: 'Use channel.updated to mark the channel as disabled.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.disabled_on',
+    label: 'channel.updated: disabled on',
+  },
+  {
+    description: 'Use channel.updated to mark the channel as enabled again.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.disabled_off',
+    label: 'channel.updated: disabled off',
+  },
+  {
+    description: 'Use channel.updated to freeze the channel.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.frozen_on',
+    label: 'channel.updated: frozen on',
+  },
+  {
+    description: 'Use channel.updated to unfreeze the channel.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.frozen_off',
+    label: 'channel.updated: frozen off',
+  },
+  {
+    description: 'Use channel.updated to rename the channel.',
+    eventType: 'channel.updated',
+    id: 'channel.updated.renamed',
+    label: 'channel.updated: renamed',
+  },
+] as const satisfies readonly WebSocketEventPresetOption[];
+
+export const websocketEventPresetOptions = [...websocketEventPresetOptionsSource].sort(
+  comparePresetOptionsAlphabetically,
+);
+
+export type WebSocketEventPresetId =
+  (typeof websocketEventPresetOptionsSource)[number]['id'];
+
+const websocketEventPresetDefinitions = {
+  'message.updated.pinned': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMessageUpdatedPinnedPayload(context),
+  },
+  'message.updated.unpinned': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMessageUpdatedUnpinnedPayload(context),
+  },
+  'poll.vote_casted.answer': {
+    buildDefault: (context: WebSocketEventTemplateContext) => {
+      const answerText = 'Some new comment';
+      const pollVote = buildPollAnswerVote(context, answerText);
+
+      return {
+        cid: context.cid,
+        created_at: context.createdAt,
+        message_id: context.messageId,
+        poll: buildPoll(context, {
+          answers_count: 1,
+          latest_answers: [pollVote],
+          own_votes: [
+            {
+              answer_text: answerText,
+              created_at: context.createdAt,
+              id:
+                typeof pollVote.id === 'string'
+                  ? pollVote.id
+                  : `debug-poll-answer-${Date.now()}`,
+              is_answer: true,
+              option_id: '',
+              poll_id: context.pollId,
+              updated_at: context.createdAt,
+              user_id: context.actorId,
+            },
+          ],
+          updated_at: context.createdAt,
+          vote_count: 0,
+          vote_counts_by_option: {},
+        }),
+        poll_vote: pollVote,
+        type: 'poll.vote_casted',
+      };
+    },
+  },
+  'notification.channel_mutes_updated.muted': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildNotificationChannelMutesUpdatedPayload(context, [
+        {
+          channel: buildChannel(context, {
+            message_count: 0,
+          }),
+          created_at: context.createdAt,
+          updated_at: context.createdAt,
+          user: context.actor,
+        },
+      ]),
+  },
+  'notification.channel_mutes_updated.unmuted': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildNotificationChannelMutesUpdatedPayload(context, []),
+  },
+  'notification.mutes_updated.muted': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildNotificationMutesUpdatedPayload(context, [buildMuteEntry(context)]),
+  },
+  'notification.mutes_updated.unmuted': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildNotificationMutesUpdatedPayload(context, [
+        buildMuteEntry(context, context.otherUser, {
+          created_at: context.lastReadAt,
+          updated_at: context.createdAt,
+        }),
+      ]),
+  },
+  'reminder.created.timed': {
+    buildDefault: (context: WebSocketEventTemplateContext) => ({
+      cid: context.cid,
+      created_at: context.createdAt,
+      message_id: context.messageId,
+      reminder: buildReminderPayload(context, {
+        remind_at: new Date(Date.now() + 2 * 60_000).toISOString(),
+      }),
+      type: 'reminder.created',
+      user_id: context.actorId,
+    }),
+  },
+  'reminder.deleted.timed': {
+    buildDefault: (context: WebSocketEventTemplateContext) => {
+      const remindAt = new Date(Date.now() + 2 * 60_000).toISOString();
+
+      return {
+        cid: context.cid,
+        created_at: context.createdAt,
+        message_id: context.messageId,
+        reminder: buildReminderPayload(context, {
+          message: buildMessage(context, {
+            html: '',
+            member: undefined,
+            poll: buildPollWithAnswerComment(context, 'Some new comment X'),
+            poll_id: context.pollId,
+            reminder: buildMessageReminderSummary(context, {
+              remind_at: remindAt,
+            }),
+            text: '',
+            updated_at: context.createdAt,
+            user: context.otherUser,
+          }),
+          remind_at: remindAt,
+        }),
+        type: 'reminder.deleted',
+        user_id: context.actorId,
+      };
+    },
+  },
+  'member.updated.archived': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMemberUpdatedPayload(context, {
+        archived_at: context.createdAt,
+      }),
+  },
+  'member.updated.pinned': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMemberUpdatedPayload(context, {
+        pinned_at: context.createdAt,
+      }),
+  },
+  'member.updated.unpinned': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMemberUpdatedPayload(context),
+  },
+  'member.updated.unarchived': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildMemberUpdatedPayload(context),
+  },
+  'channel.updated.disabled_off': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedDisabledPayload(context, false),
+  },
+  'channel.updated.disabled_on': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedDisabledPayload(context, true),
+  },
+  'channel.updated.frozen_off': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedFrozenPayload(context, false),
+  },
+  'channel.updated.frozen_on': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedFrozenPayload(context, true),
+  },
+  'channel.updated.member_removed': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedRemovedMemberPayload(context),
+  },
+  'channel.updated.renamed': {
+    buildDefault: (context: WebSocketEventTemplateContext) =>
+      buildChannelUpdatedRenamedPayload(context),
+  },
+} satisfies Record<
+  WebSocketEventPresetId,
+  { buildDefault: (context: WebSocketEventTemplateContext) => JsonObject }
+>;
+
+export const buildWebSocketEventPresetDraft = (
+  presetId: WebSocketEventPresetId,
+  context: WebSocketEventTemplateContext,
+) =>
+  JSON.stringify(
+    websocketEventPresetDefinitions[presetId].buildDefault(context),
+    null,
+    2,
+  );
+
+export const buildWebSocketEventDraft = (
+  eventType: SupportedWebsocketEventType,
+  context: WebSocketEventTemplateContext,
+) =>
+  JSON.stringify(
+    websocketEventTemplateDefinitions[eventType].buildDefault(context),
+    null,
+    2,
+  );
+
+export const buildInitialWebSocketEventDrafts = (
+  context: WebSocketEventTemplateContext,
+): Record<SupportedWebsocketEventType, string> => {
+  const drafts = {} as Record<SupportedWebsocketEventType, string>;
+
+  supportedWebsocketEventTypes.forEach((eventType) => {
+    drafts[eventType] = buildWebSocketEventDraft(eventType, context);
+  });
+
+  return drafts;
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/index.ts b/examples/vite/src/AppSettings/ActionsMenu/index.ts
index 63eb75d2a4..4e218e6fb4 100644
--- a/examples/vite/src/AppSettings/ActionsMenu/index.ts
+++ b/examples/vite/src/AppSettings/ActionsMenu/index.ts
@@ -1 +1,2 @@
 export * from './ActionsMenu';
+export * from './WebSocketEventPromptDialog';
diff --git a/examples/vite/src/AppSettings/AppSettings.scss b/examples/vite/src/AppSettings/AppSettings.scss
index b99807f195..043adabe23 100644
--- a/examples/vite/src/AppSettings/AppSettings.scss
+++ b/examples/vite/src/AppSettings/AppSettings.scss
@@ -36,6 +36,16 @@
     max-width: min(480px, calc(100vw - 32px));
   }
 
+  .app__message-info-dialog {
+    min-width: min(520px, calc(100vw - 32px));
+    max-width: min(520px, calc(100vw - 32px));
+  }
+
+  .app__websocket-event-dialog {
+    min-width: min(560px, calc(100vw - 32px));
+    max-width: min(560px, calc(100vw - 32px));
+  }
+
   .app__notification-dialog__prompt {
     display: flex;
     flex-direction: column;
@@ -52,16 +62,39 @@
     overflow: hidden;
   }
 
-  .app__attachment-dialog__drag-handle {
+  .app__message-info-dialog__prompt {
+    display: flex;
+    flex-direction: column;
+    width: min(520px, calc(100vw - 32px));
+    max-height: min(640px, calc(100vh - 32px));
+    overflow: hidden;
+    padding-bottom: 20px;
+  }
+
+  .app__websocket-event-dialog__prompt {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, calc(100vw - 32px));
+    max-height: min(640px, calc(100vh - 32px));
+    overflow: hidden;
+  }
+
+  .app__attachment-dialog__drag-handle,
+  .app__message-info-dialog__drag-handle,
+  .app__websocket-event-dialog__drag-handle {
     cursor: grab;
     touch-action: none;
   }
 
-  .app__attachment-dialog__drag-handle:active {
+  .app__attachment-dialog__drag-handle:active,
+  .app__message-info-dialog__drag-handle:active,
+  .app__websocket-event-dialog__drag-handle:active {
     cursor: grabbing;
   }
 
-  .app__attachment-dialog__body {
+  .app__attachment-dialog__body,
+  .app__message-info-dialog__body,
+  .app__websocket-event-dialog__body {
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -69,14 +102,70 @@
     padding-top: 4px;
   }
 
-  .app__attachment-dialog__field {
+  .app__websocket-event-dialog__body {
+    flex: 1 1 auto;
+  }
+
+  .app__message-info-dialog__body {
+    flex: 1 1 auto;
+  }
+
+  .app__websocket-event-dialog__body-scroll {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 12px;
+    margin-inline-end: calc(var(--str-chat__spacing-xl) * -1);
+    min-height: 0;
+    overflow-y: auto;
+    padding-inline-end: var(--str-chat__spacing-xl);
+  }
+
+  .app__message-info-dialog__code-block,
+  .app__websocket-event-dialog__body-scroll,
+  .app__websocket-event-dialog__intervals-list,
+  .app__websocket-event-dialog__textarea {
+    scrollbar-color: var(--str-chat__border-core-default) transparent;
+    scrollbar-width: thin;
+  }
+
+  .app__message-info-dialog__code-block::-webkit-scrollbar,
+  .app__websocket-event-dialog__body-scroll::-webkit-scrollbar,
+  .app__websocket-event-dialog__intervals-list::-webkit-scrollbar,
+  .app__websocket-event-dialog__textarea::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  .app__message-info-dialog__code-block::-webkit-scrollbar-track,
+  .app__websocket-event-dialog__body-scroll::-webkit-scrollbar-track,
+  .app__websocket-event-dialog__intervals-list::-webkit-scrollbar-track,
+  .app__websocket-event-dialog__textarea::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .app__message-info-dialog__code-block::-webkit-scrollbar-thumb,
+  .app__websocket-event-dialog__body-scroll::-webkit-scrollbar-thumb,
+  .app__websocket-event-dialog__intervals-list::-webkit-scrollbar-thumb,
+  .app__websocket-event-dialog__textarea::-webkit-scrollbar-thumb {
+    background: var(--str-chat__border-core-default);
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    border-radius: 999px;
+  }
+
+  .app__attachment-dialog__field,
+  .app__message-info-dialog__field,
+  .app__websocket-event-dialog__field {
     display: flex;
     flex-direction: column;
     gap: 8px;
     min-height: 0;
   }
 
-  .app__attachment-dialog__field-label {
+  .app__attachment-dialog__field-label,
+  .app__message-info-dialog__field-label,
+  .app__websocket-event-dialog__field-label {
     color: var(--str-chat__text-primary);
     font-size: 14px;
     font-weight: 600;
@@ -122,10 +211,10 @@
     color: var(--str-chat__text-primary);
   }
 
-  .app__attachment-dialog__textarea {
+  .app__attachment-dialog__textarea,
+  .app__message-info-dialog__code-block,
+  .app__websocket-event-dialog__textarea {
     width: 100%;
-    min-height: 200px;
-    resize: vertical;
     border: 1px solid var(--str-chat__border-core-default);
     border-radius: 10px;
     padding: 10px 12px;
@@ -141,12 +230,42 @@
     line-height: 1.4;
   }
 
-  .app__attachment-dialog__textarea:focus-visible {
+  .app__attachment-dialog__textarea,
+  .app__websocket-event-dialog__textarea {
+    resize: vertical;
+  }
+
+  .app__attachment-dialog__textarea {
+    min-height: 200px;
+  }
+
+  .app__message-info-dialog__code-block {
+    margin: 0;
+    margin-inline-end: calc(var(--str-chat__spacing-xl) * -1);
+    min-height: 360px;
+    overflow: auto;
+    padding-inline-end: calc(12px + var(--str-chat__spacing-xl));
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .app__websocket-event-dialog__textarea {
+    min-height: 280px;
+  }
+
+  .app__attachment-dialog__textarea:focus-visible,
+  .app__websocket-event-dialog__textarea:focus-visible {
     outline: 2px solid var(--str-chat__border-utility-selected);
     outline-offset: 1px;
   }
 
-  .app__attachment-dialog__error {
+  .app__message-info-dialog__code-block code {
+    display: block;
+    min-width: max-content;
+  }
+
+  .app__attachment-dialog__error,
+  .app__websocket-event-dialog__error {
     color: var(--text-error);
     font-size: 13px;
   }
@@ -162,10 +281,361 @@
     flex-shrink: 0;
   }
 
-  .app__attachment-dialog__footer-controls {
+  .app__attachment-dialog__footer-controls,
+  .app__websocket-event-dialog__footer-controls {
     margin-inline-start: 0;
   }
 
+  .app__websocket-event-dialog__mode-tabs {
+    display: flex;
+    gap: 8px;
+  }
+
+  .app__websocket-event-dialog__mode-tab {
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 999px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-secondary);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 8px 12px;
+  }
+
+  .app__websocket-event-dialog__mode-tab[aria-selected='true'] {
+    background: var(--str-chat__background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+    color: var(--str-chat__text-primary);
+  }
+
+  .app__websocket-event-dialog__panel,
+  .app__websocket-event-dialog__stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .app__websocket-event-dialog__intervals-panel {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .app__websocket-event-dialog__intervals-list {
+    flex: 1 1 auto;
+    margin-inline-end: calc(var(--str-chat__spacing-xl) * -1);
+    min-height: 0;
+    overflow-y: auto;
+    padding-inline-end: var(--str-chat__spacing-xl);
+  }
+
+  .app__websocket-event-dialog__inline-fields {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .app__websocket-event-dialog__select,
+  .app__websocket-event-dialog__text-input,
+  .app__websocket-event-dialog__number-input {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 0 12px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    font: inherit;
+  }
+
+  .app__websocket-event-dialog__select-trigger {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+  }
+
+  .app__websocket-event-dialog__select:focus-visible,
+  .app__websocket-event-dialog__text-input:focus-visible,
+  .app__websocket-event-dialog__number-input:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-selected);
+    outline-offset: 1px;
+  }
+
+  .app__websocket-event-dialog__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 0 12px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+
+  .app__websocket-event-dialog__trigger:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-selected);
+    outline-offset: 1px;
+  }
+
+  .app__websocket-event-dialog__trigger-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app__websocket-event-dialog__trigger-icon {
+    color: var(--str-chat__text-secondary);
+    flex-shrink: 0;
+    font-size: 12px;
+  }
+
+  .app__websocket-event-dialog__dropdown {
+    max-height: min(360px, calc(100vh - 80px));
+    min-width: min(420px, calc(100vw - 32px));
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 12px;
+    background: var(--str-chat__background-core-elevation-2);
+    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
+    overflow-y: auto;
+    padding: 6px;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    z-index: 1;
+  }
+
+  .app__websocket-event-dialog__dropdown::-webkit-scrollbar {
+    display: none;
+  }
+
+  .app__websocket-event-dialog__dropdown-section {
+    color: var(--str-chat__text-secondary);
+    font-size: 12px;
+    font-weight: 700;
+    padding: 8px 8px 4px;
+    text-transform: uppercase;
+  }
+
+  .app__websocket-event-dialog__dropdown-search {
+    padding: 4px 4px 8px;
+    position: sticky;
+    top: 0;
+    background: var(--str-chat__background-core-elevation-2);
+    z-index: 1;
+  }
+
+  .app__websocket-event-dialog__dropdown-search-input {
+    width: 100%;
+    min-height: 36px;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 0 10px;
+    background: var(--str-chat__background-core-elevation-3);
+    color: var(--str-chat__text-primary);
+    font: inherit;
+  }
+
+  .app__websocket-event-dialog__dropdown-search-input:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-selected);
+    outline-offset: 1px;
+  }
+
+  .app__websocket-event-dialog__dropdown-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    border: 0;
+    border-radius: 10px;
+    padding: 10px 12px;
+    background: transparent;
+    color: var(--str-chat__text-primary);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+
+  .app__websocket-event-dialog__dropdown-item[aria-checked='true'] {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .app__websocket-event-dialog__dropdown-item:hover {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .app__websocket-event-dialog__dropdown-item-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app__websocket-event-dialog__dropdown-item-badge {
+    color: var(--str-chat__text-secondary);
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .app__websocket-event-dialog__saved-pipeline-meta {
+    color: var(--str-chat__text-secondary);
+    flex-shrink: 0;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .app__websocket-event-dialog__dropdown-empty {
+    color: var(--str-chat__text-secondary);
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+
+  .app__websocket-event-dialog__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .app__websocket-event-dialog__action-button,
+  .app__websocket-event-dialog__mini-button {
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    cursor: pointer;
+    font: inherit;
+    padding: 8px 12px;
+  }
+
+  .app__websocket-event-dialog__mini-button {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .app__websocket-event-dialog__action-button--primary,
+  .app__websocket-event-dialog__mini-button--primary {
+    background: var(--str-chat__background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+  }
+
+  .app__websocket-event-dialog__action-button--danger,
+  .app__websocket-event-dialog__mini-button--danger {
+    color: var(--text-error);
+  }
+
+  .app__websocket-event-dialog__checkbox-label {
+    align-items: center;
+    color: var(--str-chat__text-primary);
+    display: inline-flex;
+    gap: 10px;
+    min-height: 40px;
+  }
+
+  .app__websocket-event-dialog__saved-pipeline-actions {
+    align-items: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .app__websocket-event-dialog__automation-card {
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    background: var(--background-core-surface);
+  }
+
+  .app__websocket-event-dialog__automation-card--new {
+    border-color: var(--str-chat__border-utility-selected);
+    box-shadow: 0 0 0 1px var(--str-chat__border-utility-selected);
+  }
+
+  .app__websocket-event-dialog__automation-card-header {
+    align-items: flex-start;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
+  .app__websocket-event-dialog__automation-card-title {
+    align-items: center;
+    color: var(--str-chat__text-primary);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .app__websocket-event-dialog__automation-card-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .app__websocket-event-dialog__automation-kind,
+  .app__websocket-event-dialog__automation-status {
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 999px;
+    color: var(--str-chat__text-secondary);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 4px 8px;
+    text-transform: uppercase;
+  }
+
+  .app__websocket-event-dialog__automation-status--running {
+    background: var(--str-chat__background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+    color: var(--str-chat__text-primary);
+  }
+
+  .app__websocket-event-dialog__automation-summary {
+    color: var(--str-chat__text-secondary);
+    font-size: 12px;
+  }
+
+  .app__websocket-event-dialog__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .app__websocket-event-dialog__description,
+  .app__websocket-event-dialog__todo,
+  .app__websocket-event-dialog__note {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .app__websocket-event-dialog__description {
+    background: var(--str-chat__surface-color);
+    border-radius: 10px;
+    color: var(--str-chat__text-primary);
+    padding: 8px 10px;
+  }
+
+  .app__websocket-event-dialog__todo,
+  .app__websocket-event-dialog__note {
+    color: var(--str-chat__text-secondary);
+  }
+
+  .app__websocket-event-dialog__footer {
+    flex-shrink: 0;
+  }
+
   .app__notification-dialog__drag-handle {
     cursor: grab;
     touch-action: none;
@@ -505,16 +975,30 @@
   @media (max-width: 760px) {
     .app__actions-menu,
     .app__notification-dialog,
-    .app__attachment-dialog {
+    .app__attachment-dialog,
+    .app__websocket-event-dialog {
       min-width: min(360px, calc(100vw - 24px));
       max-width: min(360px, calc(100vw - 24px));
     }
 
     .app__notification-dialog__prompt,
-    .app__attachment-dialog__prompt {
+    .app__attachment-dialog__prompt,
+    .app__websocket-event-dialog__prompt {
       width: min(360px, calc(100vw - 24px));
     }
 
+    .app__websocket-event-dialog__dropdown {
+      min-width: min(320px, calc(100vw - 24px));
+    }
+
+    .app__websocket-event-dialog__inline-fields {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .app__websocket-event-dialog__automation-card-header {
+      flex-direction: column;
+    }
+
     .app__settings-modal {
       width: min(92vw, 680px);
     }
diff --git a/examples/vite/src/AppSettings/state.ts b/examples/vite/src/AppSettings/state.ts
index dee561d2a2..1a69a002b3 100644
--- a/examples/vite/src/AppSettings/state.ts
+++ b/examples/vite/src/AppSettings/state.ts
@@ -26,6 +26,7 @@ export type MessageActionsSettingsState = {
       enableOptionConfiguration: boolean;
     };
     markOwnUnread: boolean;
+    viewMessageInfo: boolean;
   };
 };
 
@@ -87,6 +88,7 @@ const defaultAppSettingsState: AppSettingsState = {
         enableOptionConfiguration: false,
       },
       markOwnUnread: false,
+      viewMessageInfo: false,
     },
   },
   messageList: {
diff --git a/examples/vite/src/AppSettings/tabs/MessageActions/MessageActionsTab.tsx b/examples/vite/src/AppSettings/tabs/MessageActions/MessageActionsTab.tsx
index 0aa459928f..8ed41283da 100644
--- a/examples/vite/src/AppSettings/tabs/MessageActions/MessageActionsTab.tsx
+++ b/examples/vite/src/AppSettings/tabs/MessageActions/MessageActionsTab.tsx
@@ -56,6 +56,27 @@ export const MessageActionsTab = () => {
           Mark own messages as unread too
         </SwitchField>
       </div>
+
+      <div className='app__settings-modal__field'>
+        <div className='app__settings-modal__field-label'>View message info</div>
+        <SwitchField
+          checked={customMessageActions.viewMessageInfo}
+          id='view-message-info-switch'
+          onChange={(event) =>
+            appSettingsStore.partialNext({
+              messageActions: {
+                ...messageActions,
+                customMessageActions: {
+                  ...customMessageActions,
+                  viewMessageInfo: event.target.checked,
+                },
+              },
+            })
+          }
+        >
+          Show JSON viewer action in the message actions menu
+        </SwitchField>
+      </div>
     </div>
   );
 };
diff --git a/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx b/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx
index 2bdb11c126..558b67674b 100644
--- a/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx
+++ b/examples/vite/src/CustomMessageActions/ConfigurableMessageActions.tsx
@@ -14,12 +14,15 @@ import {
   defaultMessageActionSet,
   GlobalModal,
   IconDelete,
+  IconEyeFill,
   IconNotification,
   MessageActions,
   SwitchField,
   type MessageActionSetItem,
   useComponentContext,
   useContextMenuContext,
+  useDialogIsOpen,
+  useDialogOnNearestManager,
   useMessageContext,
   useModalContext,
   useNotificationApi,
@@ -27,6 +30,10 @@ import {
 } from 'stream-chat-react';
 
 import { useAppSettingsSelector } from '../AppSettings';
+import {
+  MessageInfoPromptDialog,
+  messageInfoPromptDialogId,
+} from '../AppSettings/ActionsMenu/MessageInfoPromptDialog';
 
 const getErrorMessage = (error: unknown, fallback: string) =>
   error instanceof Error && error.message ? error.message : fallback;
@@ -140,6 +147,7 @@ type OpenDeleteDialogParams = {
 
 type CustomDeleteActionContextValue = {
   openDeleteDialog: (params: OpenDeleteDialogParams) => void;
+  openMessageInfoDialog: (params: OpenMessageInfoDialogParams) => void;
 };
 
 const CustomDeleteActionContext = createContext<
@@ -231,7 +239,37 @@ const CustomMarkOwnUnreadMessageAction = () => {
   );
 };
 
-type SupportedCustomMessageActionType = 'delete' | 'markOwnUnread';
+type OpenMessageInfoDialogParams = {
+  message: LocalMessage;
+  referenceElement: HTMLElement | null;
+};
+
+const CustomViewMessageInfoAction = () => {
+  const { anchorReferenceElement, closeMenu } = useContextMenuContext();
+  const { openMessageInfoDialog } = useCustomDeleteActionContext();
+  const { message } = useMessageContext();
+
+  return (
+    <ContextMenuButton
+      className='str-chat__message-actions-list-item-button'
+      Icon={IconEyeFill}
+      onClick={(event) => {
+        openMessageInfoDialog({
+          message,
+          referenceElement:
+            anchorReferenceElement instanceof HTMLElement
+              ? anchorReferenceElement
+              : event.currentTarget,
+        });
+        closeMenu();
+      }}
+    >
+      View message info
+    </ContextMenuButton>
+  );
+};
+
+type SupportedCustomMessageActionType = 'delete' | 'markOwnUnread' | 'viewMessageInfo';
 
 type CustomMessageActionOverrideSpec = {
   actionSetItem: MessageActionSetItem;
@@ -280,11 +318,22 @@ const applyCustomMessageActionOverrides = ({
 export const ConfigurableMessageActions = (
   props: React.ComponentProps<typeof MessageActions>,
 ) => {
+  const { message: currentMessage } = useMessageContext();
   const { addNotification } = useNotificationApi();
   const { Modal = GlobalModal } = useComponentContext();
   const [deleteDialogTarget, setDeleteDialogTarget] =
     useState<OpenDeleteDialogParams | null>(null);
+  const [messageInfoDialogTarget, setMessageInfoDialogTarget] =
+    useState<OpenMessageInfoDialogParams | null>(null);
   const { t } = useTranslationContext();
+  const currentMessageInfoDialogId = `${messageInfoPromptDialogId}-${currentMessage.id}`;
+  const { dialog: messageInfoDialog, dialogManager } = useDialogOnNearestManager({
+    id: currentMessageInfoDialogId,
+  });
+  const messageInfoDialogIsOpen = useDialogIsOpen(
+    currentMessageInfoDialogId,
+    dialogManager?.id,
+  );
   const { customMessageActions } = useAppSettingsSelector(
     (state) => state.messageActions,
   );
@@ -312,6 +361,15 @@ export const ConfigurableMessageActions = (
         insertBeforeType: 'remindMe',
         mode: 'append',
       },
+      viewMessageInfo: {
+        actionSetItem: {
+          Component: CustomViewMessageInfoAction,
+          placement: 'dropdown',
+          type: 'viewMessageInfo',
+        },
+        insertBeforeType: 'remindMe',
+        mode: 'append',
+      },
     };
 
     const overrides: CustomMessageActionOverrideSpec[] = [
@@ -323,13 +381,33 @@ export const ConfigurableMessageActions = (
         ...actionOverrides.markOwnUnread,
         enabled: customMessageActions.markOwnUnread,
       },
+      {
+        ...actionOverrides.viewMessageInfo,
+        enabled: customMessageActions.viewMessageInfo,
+      },
     ];
 
     return applyCustomMessageActionOverrides({ messageActionSet: actionSet, overrides });
-  }, [customDeleteEnabled, customMessageActions.markOwnUnread, props.messageActionSet]);
+  }, [
+    customDeleteEnabled,
+    customMessageActions.markOwnUnread,
+    customMessageActions.viewMessageInfo,
+    props.messageActionSet,
+  ]);
   const openDeleteDialog = useCallback((params: OpenDeleteDialogParams) => {
     setDeleteDialogTarget(params);
   }, []);
+  const closeMessageInfoDialog = useCallback(() => {
+    messageInfoDialog.close();
+    setMessageInfoDialogTarget(null);
+  }, [messageInfoDialog]);
+  const openMessageInfoDialog = useCallback(
+    (params: OpenMessageInfoDialogParams) => {
+      setMessageInfoDialogTarget(params);
+      messageInfoDialog.open();
+    },
+    [messageInfoDialog],
+  );
 
   useEffect(() => {
     if (!customDeleteEnabled && deleteDialogTarget) {
@@ -337,9 +415,34 @@ export const ConfigurableMessageActions = (
     }
   }, [customDeleteEnabled, deleteDialogTarget]);
 
+  useEffect(() => {
+    if (customMessageActions.viewMessageInfo) return;
+    if (!messageInfoDialogTarget) return;
+
+    closeMessageInfoDialog();
+  }, [
+    closeMessageInfoDialog,
+    customMessageActions.viewMessageInfo,
+    messageInfoDialogTarget,
+  ]);
+
   return (
-    <CustomDeleteActionContext.Provider value={{ openDeleteDialog }}>
+    <CustomDeleteActionContext.Provider
+      value={{ openDeleteDialog, openMessageInfoDialog }}
+    >
       <MessageActions {...props} messageActionSet={configurableActionSet} />
+      {messageInfoDialogTarget && (
+        <MessageInfoPromptDialog
+          dialogId={currentMessageInfoDialogId}
+          dialogIsOpen={messageInfoDialogIsOpen}
+          dialogManagerId={dialogManager?.id}
+          message={
+            customMessageActions.viewMessageInfo ? messageInfoDialogTarget.message : null
+          }
+          onClose={closeMessageInfoDialog}
+          referenceElement={messageInfoDialogTarget.referenceElement}
+        />
+      )}
       <Modal
         open={customDeleteEnabled && Boolean(deleteDialogTarget)}
         onClose={() => {