feat(ScheduledMessages): scheduled messages for v15

ai-docs/ai-migration-v14-v15.md

@@ -3601,7 +3601,7 @@ export const RemoveButton = ({ label }: { label: string }) => {
 };
 ```
 
-Four formatter keys carry English day words inside their `calendarFormats` (`timestamp.DateSeparator`, `timestamp.ReminderNotification`, `timestamp.ChannelPreviewTimestamp`, `timestamp.ChannelDetailPinnedMessageTimestamp`) and must be overridden to translate Today / Tomorrow / Yesterday / Last; `dayjsLocaleConfigForLanguage` does not reach them.
+Eight formatter keys carry English words inside their formats (`timestamp.DateSeparator`, `timestamp.ReminderNotification`, `timestamp.ChannelPreviewTimestamp`, `timestamp.ChannelDetailPinnedMessageTimestamp`, `timestamp.ScheduledMessageConfirmation`, `timestamp.ScheduledMessageGroup`, `timestamp.ScheduledMessageSendTime`, `timestamp.SchedulePreset`) and must be overridden to translate Today / Tomorrow / Yesterday / Last / at; `dayjsLocaleConfigForLanguage` does not reach them.
 
 ---
 

ai-docs/i18n-v15-migration.md

@@ -177,7 +177,7 @@ These v14 keys (from `src/i18n/en.json` at `v14.10.0`, plural suffixes folded) h
   That writes `en.json` in the repo root with the 619 translatable keys. The 14 `timestamp.*`,
   `duration.*` and `translationBuilderTopic.*` entries are left out on purpose — they are dayjs and
   i18next expressions, and a TMS that "translates" `{{value, notification}}` breaks notifications
-  outright. Four of them do carry English day words; those are handled by overriding the key, see
+  outright. Eight of them do carry English words; those are handled by overriding the key, see
   [Date and time](#date-and-time). Pass `--all` for the complete 633-key catalog.
 
   [`ai-docs/i18n-v15-key-map.json`](https://github.com/GetStream/stream-chat-react/blob/master/ai-docs/i18n-v15-key-map.json) also lists every key, alongside the v14 string it replaced.
@@ -243,7 +243,7 @@ formatter expressions, not text:
 "timestamp.MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: false; format: HH:mm) }}"
 ```
 
-Most of them only need overriding to change _how_ a date is formatted. **Four of them also carry
+Most of them only need overriding to change _how_ a date is formatted. **Eight of them also carry
 English words**, because dayjs takes the calendar wording as part of the format string:
 
 | Key                                             | English baked into `calendarFormats`           |
@@ -252,8 +252,12 @@ English words**, because dayjs takes the calendar wording as part of the format
 | `timestamp.ReminderNotification`                | `Today`, `Tomorrow`, `Yesterday`, `Last`, `at` |
 | `timestamp.ChannelPreviewTimestamp`             | `Yesterday`                                    |
 | `timestamp.ChannelDetailPinnedMessageTimestamp` | `Yesterday`                                    |
+| `timestamp.ScheduledMessageConfirmation`        | `at`                                           |
+| `timestamp.ScheduledMessageGroup`               | `Today`, `Tomorrow`, `Yesterday`, `Last`       |
+| `timestamp.ScheduledMessageSendTime`            | `at`                                           |
+| `timestamp.SchedulePreset`                      | `Today`, `Tomorrow`, `Yesterday`, `Last`, `at` |
 
-Translating those four means overriding the key itself — `dayjsLocaleConfigForLanguage` does not
+Translating those eight means overriding the key itself — `dayjsLocaleConfigForLanguage` does not
 reach them. See [Date and time](#date-and-time) for the how and why.
 
 `relativeTime.*` ("Today", "{{ count }}d ago") is ordinary copy and translates normally, as does

examples/vite/src/App.tsx

@@ -96,6 +96,10 @@ import { ConfigurableMessageActions } from './CustomMessageActions';
 import { InlineEditableMessage } from './InlineEditMessage';
 import { ThreadListHeaderWithSidebarToggle } from './Sidebar/HeaderContent.tsx';
 import { CommandModeAttachmentSelector } from './CommandModeAttachmentSelector.tsx';
+import {
+  EventInviteAwareAttachmentPreviewList,
+  EventInviteMessageAttachment,
+} from './EventInvite';
 import {
   ConfigurableComposerPreviews,
   ConfigurableStartRecordingAudioButton,
@@ -274,8 +278,14 @@ const chatViewLayouts = [
   { id: 'threads' as const, slots: [MAIN_THREAD_SLOT, OPTIONAL_THREAD_SLOT] },
 ];
 
+// The SDK renders every attachment type it does not know with `UnsupportedAttachment`, which is
+// where this app's `event` attachments (EventInvite/) get their UI.
+const AppAttachment = (props: AttachmentProps) => (
+  <Attachment UnsupportedAttachment={EventInviteMessageAttachment} {...props} />
+);
+
 const CustomAttachmentWithActions = (props: AttachmentProps) => (
-  <Attachment {...props} AttachmentActions={CustomAttachmentActions} />
+  <AppAttachment {...props} AttachmentActions={CustomAttachmentActions} />
 );
 
 const APP_TITLE = 'Stream Chat React';
@@ -695,6 +705,8 @@ const App = () => {
         Search: CustomChannelSearch,
         ThreadListHeader: ThreadListHeaderWithSidebarToggle,
         MessageActions: ConfigurableMessageActions,
+        Attachment: AppAttachment,
+        AttachmentPreviewList: EventInviteAwareAttachmentPreviewList,
         AttachmentSelector: CommandModeAttachmentSelector,
         MessageBubbleContent: ConfigurableMessageBubbleContent,
         MessageComposerPreviews: ConfigurableComposerPreviews,

examples/vite/src/AppSettings/state.ts

@@ -120,6 +120,11 @@ export type ComposerSettingsState = {
    * also removes the composer's way into it (e.g. `attachments` drops the selector's File option).
    */
   disabledPreviewSections: string[];
+  /**
+   * Adds an Event action to the attachment selector, which attaches an event invite: a custom
+   * attachment type (`event`) the SDK does not ship. See `EventInvite/`.
+   */
+  eventInvites: boolean;
   /**
    * The composer's preview sections in render order. A default preview missing from it is
    * appended (see `resolvePreviewSectionOrder`).
@@ -210,6 +215,7 @@ const defaultAppSettingsState: AppSettingsState = {
   composer: {
     customCdnUrl: '',
     disabledPreviewSections: [],
+    eventInvites: false,
     failUploads: 'off',
     previewSectionOrder: defaultMessageComposerPreviewSet.map(({ type }) => type),
     sendMessagesWithPendingUploads: false,

examples/vite/src/AppSettings/tabs/Composer/ComposerTab.tsx

@@ -26,6 +26,7 @@ export const ComposerTab = ({ close }: ComposerTabProps) => {
     composer,
     composer: {
       customCdnUrl,
+      eventInvites,
       failUploads,
       sendMessagesWithPendingUploads,
       slowUploadMs,
@@ -61,6 +62,26 @@ export const ComposerTab = ({ close }: ComposerTabProps) => {
           <PreviewSectionsField />
         </div>
 
+        <div className='app__settings-modal__field'>
+          <div className='app__settings-modal__field-label'>Custom attachment type</div>
+          <SwitchField
+            checked={eventInvites}
+            id='event-invites-switch'
+            onChange={(event) =>
+              appSettingsStore.partialNext({
+                composer: { ...composer, eventInvites: event.target.checked },
+              })
+            }
+            title='Event invites'
+          />
+          <div className='app__settings-modal__field-comment'>
+            Adds an <strong>Event</strong> action to the attachment menu. It attaches an
+            invite of a custom type (<code>event</code>), which the message list renders
+            with an <strong>Add to calendar</strong> button. Built from public extension
+            points only; see <code>EventInvite/</code>. Needs the Files preview section.
+          </div>
+        </div>
+
         <div className='app__settings-modal__field'>
           <div className='app__settings-modal__field-label'>Pending uploads</div>
           <SwitchField

examples/vite/src/CommandModeAttachmentSelector.tsx

@@ -9,6 +9,7 @@ import {
 } from 'stream-chat-react';
 
 import { useAppSettingsSelector } from './AppSettings';
+import { withEventInviteAction } from './EventInvite';
 
 const textComposerCommandSelector = ({ command }: TextComposerState) => ({ command });
 
@@ -18,18 +19,20 @@ export const CommandModeAttachmentSelector = (props: AttachmentSelectorProps) =>
     messageComposer.textComposer.state,
     textComposerCommandSelector,
   );
-  const { disabledPreviewSections } = useAppSettingsSelector((state) => state.composer);
+  const { disabledPreviewSections, eventInvites } = useAppSettingsSelector(
+    (state) => state.composer,
+  );
   const filesDisabled = disabledPreviewSections.includes('attachments');
   const attachmentSelectorActionSet = useMemo(() => {
     const actionSet =
       props.attachmentSelectorActionSet ?? defaultAttachmentSelectorActionSet;
-    // A composer without the Files preview offers no File option. Polls and location are gated
-    // through the composer config instead (see the setup function in App.tsx), which the SDK's
-    // own selector filter already reads.
-    return filesDisabled
-      ? actionSet.filter(({ type }) => type !== 'uploadFile')
-      : actionSet;
-  }, [filesDisabled, props.attachmentSelectorActionSet]);
+    // A composer without the Files preview offers no File option, and no Event option either,
+    // since that preview is where the invite shows. Polls and location are gated through the
+    // composer config instead (see the setup function in App.tsx), which the SDK's own selector
+    // filter already reads.
+    if (filesDisabled) return actionSet.filter(({ type }) => type !== 'uploadFile');
+    return eventInvites ? withEventInviteAction(actionSet) : actionSet;
+  }, [eventInvites, filesDisabled, props.attachmentSelectorActionSet]);
 
   return (
     <DefaultAttachmentSelector

examples/vite/src/ComposerPreviews/previewSections.ts

@@ -25,12 +25,21 @@ export const PREVIEW_SECTION_INFO: Record<PreviewSectionType, PreviewSectionInfo
   attachments: {
     label: 'Files',
     removes:
-      'The File option in the attachment selector; dropped and pasted files are rejected.',
+      'The File option in the attachment selector, and the Event option while Event invites is on; dropped and pasted files are rejected.',
   },
   editedMessage: {
     label: 'Edited message',
     removes: 'The Edit and Edit inline message actions.',
   },
+  editedScheduledMessage: {
+    label: 'Edited scheduled message',
+    removes: 'Nothing else; only the banner shown while editing a scheduled message.',
+  },
+  failedScheduledMessage: {
+    label: 'Failed scheduled message',
+    removes:
+      'Nothing else; only the banner shown while retrying a failed scheduled message.',
+  },
   linkPreviews: {
     label: 'Link previews',
     removes: 'Link scraping while typing.',

examples/vite/src/EventInvite/EventInvite.scss

@@ -0,0 +1,199 @@
+// The event invite: its picker (EventInviteDialog.tsx), composer preview and message card
+// (EventInviteAttachment.tsx), styled with the SDK's tokens so both themes follow.
+
+// A percentage width is ignored while the modal sizes the dialog to its content, which would
+// widen the dialog to its description's line and push the panel off-centre.
+.app__event-invite-dialog {
+  width: min(420px, 100vw);
+
+  // The SDK's buttons capitalize every word ("15 Min", "Add Event"); this dialog's labels are
+  // sentence case.
+  .str-chat__button {
+    text-transform: none;
+  }
+}
+
+// The date and time inputs draw their picker icons and popups from `color-scheme`, which the
+// SDK's dark theme leaves at `normal`: dark icons on the dark field, and a light popup.
+.str-chat__theme-dark .app__event-invite-dialog {
+  color-scheme: dark;
+}
+
+// The form wraps the prompt's body and footer without adding a box of its own.
+.app__event-invite-dialog__form {
+  display: contents;
+}
+
+.app__event-invite-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-md);
+}
+
+.app__event-invite-dialog__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--str-chat__spacing-sm);
+}
+
+.app__event-invite-dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-xs);
+}
+
+.app__event-invite-dialog__field-label {
+  // As the SDK's TextInput labels above and below it.
+  font: var(--str-chat__font-heading-xs);
+  color: var(--str-chat__text-primary);
+}
+
+.app__event-invite-dialog__durations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--str-chat__spacing-xs);
+}
+
+// The SDK's button draws the pressed state; a text colour on top of it would fail contrast.
+.app__event-invite-dialog__duration[aria-pressed='true'] {
+  font-weight: 600;
+}
+
+// Shared by the message card and the composer preview. Colours come from the surface each one
+// sits on, set below.
+
+// A 40px tile like the SDK's link preview image and location preview placeholder.
+.app__event-invite__date-tile {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: var(--str-chat__message-bubble-radius-attachment-inline, 8px);
+  background-color: var(--str-chat__background-core-overlay-light);
+  line-height: 1;
+}
+
+.app__event-invite__date-tile-month {
+  font: var(--str-chat__font-metadata-emphasis);
+  text-transform: uppercase;
+}
+
+.app__event-invite__date-tile-day {
+  font: var(--str-chat__font-heading-xs);
+}
+
+.app__event-invite__details {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--str-chat__spacing-xxs);
+  min-width: 0;
+}
+
+.app__event-invite__title,
+.app__event-invite__schedule,
+.app__event-invite__location {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.app__event-invite__schedule,
+.app__event-invite__location {
+  font: var(--str-chat__font-metadata-default);
+}
+
+// In a message: the summary above an "Add to calendar" button. Like the SDK's link preview and
+// location attachments, it sits on the attachment background `.str-chat__message-attachment` sets
+// (`--chat-bg-attachment`) and takes the bubble's own variables, which `.str-chat__message`
+// switches between incoming and outgoing.
+.app__event-invite {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-xs);
+  padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm)
+    var(--str-chat__spacing-sm) var(--str-chat__spacing-xs);
+  color: var(--chat-text);
+
+  .app__event-invite__title {
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  // As the link preview attachment's source link: the bubble's text colour. The link colour of
+  // the message text does not reach AA contrast on the incoming attachment background. The
+  // underline tells the link apart from the text around it.
+  .app__event-invite__location a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+.app__event-invite__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-xs);
+  min-width: 0;
+}
+
+// The button sits on the bubble, so it takes the bubble's colours instead of the app-wide
+// secondary button colours, as the location attachment's "Stop sharing" button does.
+.app__event-invite__add-to-calendar {
+  --str-chat__button-secondary-text: var(
+    --chat-text,
+    var(--str-chat__chat-text-incoming)
+  );
+  --str-chat__button-secondary-border: var(
+    --chat-border-on-chat,
+    var(--str-chat__chat-border-on-chat-incoming)
+  );
+  align-self: stretch;
+  // Sentence case, against the SDK button's capitalized words ("Add To Calendar").
+  text-transform: none;
+  gap: var(--str-chat__spacing-xs);
+
+  .str-chat__icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// In the composer: in the attachment preview list, so sized and coloured like the SDK's file
+// previews beside it.
+.app__event-invite-preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-sm);
+  width: 290px;
+  max-width: 100%;
+  padding: var(--str-chat__spacing-sm);
+  padding-inline-end: var(--str-chat__spacing-md);
+  border: 1px solid var(--str-chat__border-core-default);
+  border-radius: var(--str-chat__radius-lg);
+  background: transparent;
+  color: var(--str-chat__text-primary);
+
+  .app__event-invite__title {
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  // Off the bubble, the overlay would vanish against the composer: the card surface the SDK's
+  // poll dialogs use for their content boxes.
+  .app__event-invite__date-tile {
+    background-color: var(--str-chat__background-core-surface-card);
+  }
+
+  .app__event-invite__schedule,
+  .app__event-invite__location {
+    color: var(--str-chat__text-secondary);
+  }
+
+  .app__event-invite__location a {
+    color: var(--str-chat__text-link);
+  }
+}