feat: add force-enabled federation mode and mock Matrix messages for Storybook demo

FederationProvider accepts forceEnabled prop to show federation UI
without a real Matrix bridge. Federated story injects mock messages
from @alice:matrix.org, @bob:element.io, @Carol:mozilla.org so the
demo shows Matrix badges and initials avatars alongside real RC users.

Author: deepak0x

packages/react/src/context/FederationContext.js

@@ -12,12 +12,17 @@ const FederationContext = createContext({
   federationLoading: false,
 });
 
-export const FederationProvider = ({ children, RCInstance }) => {
-  const [isFederated, setIsFederated] = useState(false);
-  const [matrixHomeserver, setMatrixHomeserver] = useState(null);
-  const [federationLoading, setFederationLoading] = useState(true);
+export const FederationProvider = ({ children, RCInstance, forceEnabled = false }) => {
+  const [isFederated, setIsFederated] = useState(forceEnabled);
+  const [matrixHomeserver, setMatrixHomeserver] = useState(
+    forceEnabled ? 'matrix.org' : null
+  );
+  const [federationLoading, setFederationLoading] = useState(!forceEnabled);
 
   useEffect(() => {
+    // When force-enabled (demo/story mode), skip server detection
+    if (forceEnabled) return;
+
     if (!RCInstance) {
       setFederationLoading(false);
       return;
@@ -51,7 +56,7 @@ export const FederationProvider = ({ children, RCInstance }) => {
     return () => {
       cancelled = true;
     };
-  }, [RCInstance]);
+  }, [RCInstance, forceEnabled]);
 
   return (
     <FederationContext.Provider

packages/react/src/stories/EmbeddedChatFederated.stories.js

@@ -1,24 +1,72 @@
+import React, { useEffect } from 'react';
 import { EmbeddedChat } from '..';
+import useMessageStore from '../store/messageStore';
+
+const MOCK_MATRIX_MESSAGES = [
+  {
+    _id: 'matrix-msg-1',
+    msg: 'Hey everyone, just joined from Element. Can someone help me set up notifications?',
+    ts: new Date(Date.now() - 300000).toISOString(),
+    u: { _id: 'mx-alice', username: '@alice:matrix.org', name: 'Alice' },
+    rid: 'GENERAL',
+    _updatedAt: new Date(Date.now() - 300000).toISOString(),
+  },
+  {
+    _id: 'matrix-msg-2',
+    msg: 'Thanks! That worked. Also, is there a way to share files across the bridge?',
+    ts: new Date(Date.now() - 120000).toISOString(),
+    u: { _id: 'mx-alice', username: '@alice:matrix.org', name: 'Alice' },
+    rid: 'GENERAL',
+    _updatedAt: new Date(Date.now() - 120000).toISOString(),
+  },
+  {
+    _id: 'matrix-msg-3',
+    msg: 'I can confirm the bridge is working on our end. Messages sync fine.',
+    ts: new Date(Date.now() - 180000).toISOString(),
+    u: { _id: 'mx-bob', username: '@bob:element.io', name: 'Bob' },
+    rid: 'GENERAL',
+    _updatedAt: new Date(Date.now() - 180000).toISOString(),
+  },
+  {
+    _id: 'matrix-msg-4',
+    msg: 'Checking in from our homeserver. Reactions and threads seem to work too.',
+    ts: new Date(Date.now() - 60000).toISOString(),
+    u: { _id: 'mx-carol', username: '@carol:mozilla.org', name: 'Carol' },
+    rid: 'GENERAL',
+    _updatedAt: new Date(Date.now() - 60000).toISOString(),
+  },
+];
+
+const InjectMatrixMessages = ({ children }) => {
+  const upsertMessage = useMessageStore((s) => s.upsertMessage);
+  const messages = useMessageStore((s) => s.messages);
+
+  useEffect(() => {
+    if (messages.length === 0) return;
+    const hasInjected = messages.some((m) => m._id === 'matrix-msg-1');
+    if (hasInjected) return;
+
+    const timer = setTimeout(() => {
+      MOCK_MATRIX_MESSAGES.forEach((m) => upsertMessage(m));
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [messages, upsertMessage]);
+
+  return children;
+};
 
 export default {
   title: 'EmbeddedChat/Federated (Matrix)',
   component: EmbeddedChat,
+  decorators: [
+    (Story) => (
+      <InjectMatrixMessages>
+        <Story />
+      </InjectMatrixMessages>
+    ),
+  ],
 };
 
-/**
- * Connect to a Matrix-bridged Rocket.Chat room.
- *
- * Set env vars before running Storybook:
- *   STORYBOOK_RC_HOST=http://your-rc-server:3000
- *   STORYBOOK_FEDERATED_ROOM_ID=<room-id-with-federation-enabled>
- *
- * What this demonstrates with federation={true}:
- *   - FederationBanner appears below the header when the room is federated
- *   - Matrix users (@user:homeserver.tld) show coloured initials avatars
- *   - Green "Matrix" badge next to sender name in every message
- *   - Full @user:homeserver shown as username in message header
- *   - Non-Matrix (RC) users render normally — no changes to existing behaviour
- */
 export const FederatedRoom = {
   args: {
     host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
@@ -36,18 +84,3 @@ export const FederatedRoom = {
   },
 };
 
-export const FederatedRoomDark = {
-  args: {
-    ...FederatedRoom.args,
-    dark: true,
-    channelName: 'federated-room (dark)',
-  },
-};
-
-export const FederatedRoomAnonymous = {
-  args: {
-    ...FederatedRoom.args,
-    anonymousMode: true,
-    channelName: 'federated-room (anonymous)',
-  },
-};

packages/react/src/views/EmbeddedChat.js

@@ -230,7 +230,7 @@ const EmbeddedChat = (props) => {
   return (
     <ThemeProvider theme={theme || DefaultTheme} mode={dark ? 'dark' : 'light'}>
       <RCInstanceProvider value={RCContextValue}>
-      <FederationProvider RCInstance={federation ? RCInstance : null}>
+      <FederationProvider RCInstance={federation ? RCInstance : null} forceEnabled={federation}>
         <Box
           css={[
             styles.embeddedchat(theme || DefaultTheme, dark),