feat: wire FederationBanner into ChatLayout and export federation API from package index

Author: deepak0x

packages/react/src/index.js

@@ -1 +1,5 @@
 export { default as EmbeddedChat } from './views/EmbeddedChat';
+export { FederationProvider, useFederation } from './context/FederationContext';
+export { isMatrixUser, parseMatrixUserId, getMatrixDisplayLabel, getMatrixInitials, getAvatarColor } from './lib/federationUtils';
+export { default as MatrixAvatar } from './views/Message/MatrixAvatar';
+export { default as FederationBanner } from './views/FederationBanner/FederationBanner';

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

@@ -5,6 +5,20 @@ export default {
   component: EmbeddedChat,
 };
 
+/**
+ * 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',
@@ -16,9 +30,7 @@ export const FederatedRoom = {
     showUsername: true,
     enableThreads: true,
     hideHeader: false,
-    auth: {
-      flow: 'PASSWORD',
-    },
+    auth: { flow: 'PASSWORD' },
     dark: false,
     federation: true,
   },
@@ -31,3 +43,11 @@ export const FederatedRoomDark = {
     channelName: 'federated-room (dark)',
   },
 };
+
+export const FederatedRoomAnonymous = {
+  args: {
+    ...FederatedRoom.args,
+    anonymousMode: true,
+    channelName: 'federated-room (anonymous)',
+  },
+};

packages/react/src/views/ChatLayout/ChatLayout.js

@@ -25,6 +25,7 @@ import Roominfo from '../RoomInformation/RoomInformation';
 import UserInformation from '../UserInformation/UserInformation';
 import ChatBody from '../ChatBody/ChatBody';
 import ChatInput from '../ChatInput/ChatInput';
+import FederationBanner from '../FederationBanner/FederationBanner';
 import useDropBox from '../../hooks/useDropBox';
 import AttachmentPreview from '../AttachmentPreview/AttachmentPreview';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
@@ -109,6 +110,7 @@ const ChatLayout = () => {
       onDrop={(e) => handleDragDrop(e)}
     >
       <Box css={styles.chatMain}>
+        <FederationBanner />
         <ChatBody
           anonymousMode={anonymousMode}
           showRoles={showRoles}

packages/react/src/views/FederationBanner/FederationBanner.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { Box, useTheme } from '@embeddedchat/ui-elements';
+import { useFederation } from '../../context/FederationContext';
+
+const getStyles = (theme) => ({
+  banner: css`
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 1rem;
+    background: #0dbd8b18;
+    border-bottom: 1px solid #0dbd8b44;
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: #0dbd8b;
+    letter-spacing: 0.03em;
+  `,
+  dot: css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #0dbd8b;
+    flex-shrink: 0;
+  `,
+  homeserver: css`
+    font-weight: 400;
+    opacity: 0.75;
+    margin-left: 2px;
+  `,
+});
+
+/**
+ * FederationBanner
+ *
+ * Renders a slim banner below the chat header when the active room is
+ * Matrix-bridged. Hidden when the room is not federated or detection is
+ * still in flight.
+ *
+ * Activated automatically by FederationProvider — no props needed.
+ */
+const FederationBanner = () => {
+  const { isFederated, matrixHomeserver, federationLoading } = useFederation();
+  const { theme } = useTheme();
+  const styles = getStyles(theme);
+
+  if (federationLoading || !isFederated) return null;
+
+  return (
+    <Box css={styles.banner} aria-live="polite" role="status">
+      <Box css={styles.dot} />
+      🔗 Matrix federated room
+      {matrixHomeserver && (
+        <Box is="span" css={styles.homeserver}>
+          · {matrixHomeserver}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default FederationBanner;