feat(emojis): restore reacting with any emoji via loadDefaultExtendedReactionOptions

The reaction selector's "+" (react with any emoji) was driven by
`reactionOptions.extended`, which the examples used to populate from the full
`@emoji-mart/data` via `mapEmojiMartData`. Removing emoji-mart left `extended`
empty, so only the handful of quick reactions showed — and, because
`useProcessReactions` renders a reaction only when its type is a known option,
arbitrary-emoji reactions could no longer be displayed either.

Add `loadDefaultExtendedReactionOptions()` to the `stream-chat-react/emojis`
entry: it builds the full extended map (every vendored emoji, keyed by unicode)
from the lazily code-split dataset, so importing it costs nothing until called
and the dataset never enters an app's initial bundle. Core stays emoji-free —
the loader lives in the opt-in emojis entry and only depends on the pure
`mapEmojiMartData` from core.

Wire it into the vite example (load + merge into reactionOptions.extended) and
document the pattern in AI.md.

Author: oliverlaz

AI.md

@@ -271,8 +271,29 @@ import 'stream-chat-react/css/emoji-picker.css';
 - `pickerProps` accepts only `theme` and `style`. emoji-mart `Picker` options
   (`data`, `set`, `custom`, `categories`, `perLine`, `emojiVersion`, `locale`, …) are
   no longer supported: the type rejects them and any passed via `as` casts are
-  ignored with a console warning. For custom reaction emoji use `mapEmojiMartData`;
-  for appearance use the `--str-chat__emoji-picker-*` CSS variables.
+  ignored with a console warning. For appearance use the `--str-chat__emoji-picker-*`
+  CSS variables.
+- To let users **react with any emoji** (the reaction selector's `+` button), fill
+  `reactionOptions.extended` with the full emoji set. It also gates display — a reaction
+  whose type isn't in `quick`/`extended` is not rendered. Load it lazily from the emojis
+  entry (the dataset is code-split, so this adds nothing to your initial bundle):
+
+  ```tsx
+  import { defaultReactionOptions, type ReactionOptions } from 'stream-chat-react';
+  import { loadDefaultExtendedReactionOptions } from 'stream-chat-react/emojis';
+
+  const [reactionOptions, setReactionOptions] =
+    useState<ReactionOptions>(defaultReactionOptions);
+  useEffect(() => {
+    loadDefaultExtendedReactionOptions().then((extended) =>
+      setReactionOptions({ ...defaultReactionOptions, extended }),
+    );
+  }, []);
+
+  <Channel reactionOptions={reactionOptions}>{/* ... */}</Channel>;
+  ```
+
+  For a curated subset instead, build the `extended` map yourself with `mapEmojiMartData`.
 
 **Reference**: See `examples/tutorial/src/6-emoji-picker/`
 

examples/vite/src/App.tsx

@@ -29,7 +29,6 @@ import {
   ChatView,
   defaultReactionOptions,
   DialogManagerProvider,
-  mapEmojiMartData,
   MessageReactions,
   NotificationList,
   type NotificationListProps,
@@ -39,7 +38,11 @@ import {
   useCreateChatClient,
   WithComponents,
 } from 'stream-chat-react';
-import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
+import {
+  createTextComposerEmojiMiddleware,
+  EmojiPicker,
+  loadDefaultExtendedReactionOptions,
+} from 'stream-chat-react/emojis';
 import { humanId } from 'human-id';
 
 import { appSettingsStore, useAppSettingsSelector } from './AppSettings';
@@ -105,23 +108,6 @@ const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 // @ts-expect-error ai_generated isn't on LocalMessage's public type yet
 const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 
-// A few extra reactions, built from emoji-mart-shaped data via `mapEmojiMartData`.
-const extendedReactionData = {
-  emojis: {
-    clap: { name: 'Clapping Hands', skins: [{ native: '👏' }] },
-    eyes: { name: 'Eyes', skins: [{ native: '👀' }] },
-    hundred: { name: 'Hundred Points', skins: [{ native: '💯' }] },
-    pray: { name: 'Folded Hands', skins: [{ native: '🙏' }] },
-    rocket: { name: 'Rocket', skins: [{ native: '🚀' }] },
-    tada: { name: 'Party Popper', skins: [{ native: '🎉' }] },
-  },
-};
-
-const newReactionOptions: ReactionOptions = {
-  ...defaultReactionOptions,
-  extended: mapEmojiMartData(extendedReactionData),
-};
-
 const useUser = () => {
   const searchParams = useMemo(() => new URLSearchParams(window.location.search), []);
 
@@ -271,6 +257,21 @@ const CustomAttachmentWithActions = (props: AttachmentProps) => (
 
 const App = () => {
   const { tokenProvider, userId, userImage, userName } = useUser();
+  // Restore "react with any emoji": lazily load the full emoji set and expose it as the
+  // extended reaction options (the reaction selector's "+" list). The dataset loads on
+  // demand via the same code-split chunk the picker uses; until it resolves only the
+  // quick reactions show.
+  const [reactionOptions, setReactionOptions] =
+    useState<ReactionOptions>(defaultReactionOptions);
+  useEffect(() => {
+    let active = true;
+    loadDefaultExtendedReactionOptions().then((extended) => {
+      if (active) setReactionOptions({ ...defaultReactionOptions, extended });
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
   const chatView = useAppSettingsSelector((state) => state.chatView);
   const { mode: themeMode } = useAppSettingsSelector((state) => state.theme);
   const initialSearchParams = useMemo(
@@ -472,7 +473,7 @@ const App = () => {
         EmojiPicker: EmojiPickerWithCustomOptions,
         NotificationList: ConfigurableNotificationList,
         MessageReactions: CustomMessageReactions,
-        reactionOptions: newReactionOptions,
+        reactionOptions,
         Search: CustomChannelSearch,
         HeaderEndContent: SidebarToggle,
         HeaderStartContent: SidebarToggle,

src/plugins/Emojis/__tests__/reactions.test.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { loadDefaultExtendedReactionOptions } from '../reactions';
+import { emojiToUnicode } from '../../../components/Reactions/reactionOptions';
+
+describe('loadDefaultExtendedReactionOptions', () => {
+  it('builds an extended reaction map covering the full emoji dataset', async () => {
+    const extended = await loadDefaultExtendedReactionOptions();
+
+    // The full vendored set (~1,870 emoji) — far beyond the handful of quick reactions,
+    // so the picker's "+" list lets you react with essentially any emoji again.
+    expect(Object.keys(extended).length).toBeGreaterThan(1000);
+  });
+
+  it('keys entries by unicode and renders the native glyph', async () => {
+    const extended = await loadDefaultExtendedReactionOptions();
+    const grinningUnicode = emojiToUnicode('😀'); // U+1F600
+
+    const entry = extended[grinningUnicode];
+    expect(entry).toBeDefined();
+    expect(entry.unicode).toBe(grinningUnicode);
+
+    const { container } = render(<entry.Component />);
+    expect(container).toHaveTextContent('😀');
+  });
+
+  it('memoizes: repeated calls resolve the same map (no rebuild per reaction render)', async () => {
+    const first = await loadDefaultExtendedReactionOptions();
+    const second = await loadDefaultExtendedReactionOptions();
+
+    expect(first).toBe(second);
+  });
+});

src/plugins/Emojis/index.ts

@@ -3,4 +3,5 @@ export * from './components';
 export * from './data';
 export * from './EmojiPicker';
 export * from './middleware';
+export * from './reactions';
 export * from './search';

src/plugins/Emojis/reactions.ts

@@ -0,0 +1,24 @@
+import { mapEmojiMartData } from '../../components/Reactions/reactionOptions';
+import { loadEmojiData } from './data';
+import { memoizeAsyncWithReset } from './memoizeAsyncWithReset';
+
+/**
+ * Loads the full set of "extended" reaction options — every vendored emoji, keyed by
+ * unicode — for use as `reactionOptions.extended`. This restores reacting with (almost)
+ * any emoji via the reaction selector's "+" button, which previously came from feeding
+ * the whole `@emoji-mart/data` object into `mapEmojiMartData`.
+ *
+ * Both halves of that feature read `reactionOptions.extended`: the selector only shows
+ * "+" when it is non-empty, and `useProcessReactions` renders a reaction only when its
+ * type is a known option — so without this map an arbitrary-emoji reaction can be sent
+ * but not displayed.
+ *
+ * The dataset is fetched through the same lazily code-split dynamic import the picker
+ * uses (and the result is memoized), so importing this loader costs nothing until it is
+ * actually called and the ~340 KB JSON never lands in an app's initial bundle.
+ * Integrators call it once — e.g. in an effect — and merge the result into their
+ * reaction options; see the emoji migration notes in `AI.md`.
+ */
+export const loadDefaultExtendedReactionOptions = memoizeAsyncWithReset(async () =>
+  mapEmojiMartData(await loadEmojiData()),
+);