Fix/embedded chat channelname not switching #1048

deepak0x · 2026-01-01T19:46:34Z

Enable Channel Switching by Channel Name

Closes #452

Overview

This PR adds the ability to switch channels using channel names instead of requiring room IDs. Previously, users had to find and provide the room ID to switch channels, which was difficult. Now, users can simply provide the channel name (e.g., "public", "embedded", "general") and the component will automatically resolve it to the correct room ID.

Problem

Before this change, the EmbeddedChat component only supported switching channels using roomId. Channel IDs are not user-friendly and difficult to find, making it hard for developers to integrate the component with specific channels.

Solution

The component now supports channel switching using the channelName prop. When channelName is provided:

The component waits for user authentication
Once authenticated, it calls the Rocket.Chat API to resolve the channel name to a room ID
The resolved room ID is used to connect to the correct channel
Messages and channel information are properly loaded for the resolved channel

Changes

Core Functionality

Added resolvedRoomId state to manage dynamically resolved room IDs
Added explicitRoomId state to track when a room ID is explicitly provided
Implemented channel name to room ID resolution using /api/v1/rooms.info?roomName=... API endpoint
Updated re-instantiation logic to properly clear messages when switching channels
Added proper error handling for authentication and API failures

UI Updates

Updated ChatHeader to prioritize channelName prop for display
Updated ChatInput placeholder to use channelName when available
Added error handling for unauthorized channel info requests

API Changes

Updated EmbeddedChatApi.channelInfo() to check for authentication before making API calls
Returns proper error response when authentication is not available

Usage

Using Channel Name (New)

<EmbeddedChat
  host="http://localhost:3000"
  channelName="public"
  auth={{
    flow: 'PASSWORD'
  }}
/>

Using Room ID (Still Supported)

<EmbeddedChat
  host="http://localhost:3000"
  roomId="6956b4ced42fcf35f5783b1d"
  channelName="public"
  auth={{
    flow: 'PASSWORD'
  }}
/>

How It Works

If roomId is explicitly provided, it is used directly
If only channelName is provided:
- Component waits for user authentication
- Once authenticated, makes API call to resolve channel name to room ID
- Uses resolved room ID to connect to the channel
If neither is provided, defaults to "GENERAL" channel

Before / After

Before

After (with channel name)

After (with room ID)

Technical Details

The resolution happens asynchronously after authentication
The component properly handles cases where authentication is not yet complete
Messages and channel state are cleared when switching channels to prevent showing wrong channel data
The component re-instantiates the connection when the resolved room ID changes

Testing

Tested with channel names: "public", "embedded", "general"
Verified that channel switching works correctly with only channel name provided
Verified that explicit room ID still works as before
Verified that messages are properly cleared when switching channels
Verified that authentication errors are handled gracefully

- Add channelName to roomId resolution using Rocket.Chat API - Implement resolvedRoomId state management to handle dynamic room resolution - Fix re-instantiation logic to properly clear messages when switching channels - Wait for authentication before resolving channelName to prevent 401 errors - Update ChatHeader and ChatInput to prioritize channelName prop for display Fixes: Channel switching now works correctly when only channelName is provided

Spiral-Memory · 2026-01-03T06:24:30Z

packages/react/src/views/EmbeddedChat.js


 const EmbeddedChat = (props) => {
  const [config, setConfig] = useState(() => props);
+  // Track if roomId was explicitly provided (not just the default)


Please remove all the comments

… implementation

deepak0x · 2026-01-03T13:49:10Z

@Spiral-Memory I removed all the comments...

deepak0x · 2026-01-03T14:08:31Z

@Spiral-Memory I fixed that yarn lint issue
was coming due to empty block

deepak0x · 2026-01-03T14:19:00Z

@Spiral-Memory fixed the EmbeddedChatApi.ts to pass format check

Spiral-Memory · 2026-01-15T08:51:40Z

packages/react/src/views/EmbeddedChat.js

+          if (data?.success && data?.room?._id) {
+            setResolvedRoomId(data.room._id);
+          } else {
+            setResolvedRoomId('GENERAL');


Do we really need to have this fallback ?

I set this If a user provides a channelName that doesn't exist or they lack access, falling back to 'GENERAL' hides the failure.

packages/react/src/views/EmbeddedChat.js

Spiral-Memory · 2026-01-15T09:17:26Z

Hi @deepak0x
This approach seems to involve too much manual work, so I wouldn’t recommend it.

async getRoomIdByName(channelName: string): Promise<string> { could be part of the API instead.

Rather than manually handling hasMounted, we could use a key-based approach. A custom hook, like useRoomId or something similar, could also be created.

Please look into finding a more elegant and efficient solution.

deepak0x · 2026-01-15T09:47:35Z

Sure @Spiral-Memory

- Add getRoomIdByName method to EmbeddedChatApi for resolving channel names to room IDs - Create useRoomId custom hook to encapsulate room ID resolution logic - Refactor EmbeddedChat to use key-based approach instead of manual state tracking - Remove fallback to GENERAL when channel name resolution fails - Display clear error messages when channel not found or inaccessible - Show error UI and toast notifications for failed channel resolution - Maintain backward compatibility with explicit roomId prop

- Use temporary 'GENERAL' roomId when channelName is provided but user is not authenticated yet - Only show error UI when there's an actual error, not when waiting for auth - Fixes e2e tests that were failing due to component not rendering

deepak0x · 2026-01-17T22:41:37Z

Hey @Spiral-Memory
Have addressed issues reported by you.. pls check...

- Use roomId prop as fallback when resolvedRoomId is not available - Ensure component renders when explicit roomId is provided in e2e tests - Fixes e2e test failures where component was not rendering

- Remove toast dispatch usage before ToastBarProvider is mounted - Prevent render crash that hid the embedded chat in e2e tests

- Add null check before creating RCInstance to prevent errors - Ensure component always renders when roomId is provided - Fixes e2e test failures where component was not visible

deepak0x added 3 commits January 2, 2026 01:06

fix: resolve lint errors (prettier formatting and code style)

4612126

checking final Functionality

1cb376d

Spiral-Memory reviewed Jan 3, 2026

View reviewed changes

deepak0x added 2 commits January 3, 2026 14:42

refactor: remove comments added during channel name switching feature…

b47d66c

… implementation

refactor: remove comment from .gitignore

1cbe0af

fix: remove empty block statement to resolve lint error

f19ab01

fix: format EmbeddedChatApi.ts to pass format check

903b7b5

deepak0x requested a review from Spiral-Memory January 8, 2026 21:30

Spiral-Memory reviewed Jan 15, 2026

View reviewed changes

packages/react/src/views/EmbeddedChat.js Show resolved Hide resolved

deepak0x requested a review from Spiral-Memory January 15, 2026 08:52

Spiral-Memory added the nudge minor tweaks suggested label Jan 15, 2026

deepak0x and others added 5 commits January 15, 2026 15:17

Merge branch 'develop' into fix/embedded-chat-channelname-not-switching

d01c4f8

Merge branch 'develop' into fix/embedded-chat-channelname-not-switching

b0067ee

Merge branch 'develop' into fix/embedded-chat-channelname-not-switching

2156d22

fix: ensure RCInstance is always created when roomId is provided

aaf85c4

- Use roomId prop as fallback when resolvedRoomId is not available - Ensure component renders when explicit roomId is provided in e2e tests - Fixes e2e test failures where component was not rendering

deepak0x force-pushed the fix/embedded-chat-channelname-not-switching branch from a95c222 to aaf85c4 Compare January 18, 2026 13:01

deepak0x added 2 commits January 18, 2026 19:26

fix: avoid toast hook before provider in EmbeddedChat

e7fc017

- Remove toast dispatch usage before ToastBarProvider is mounted - Prevent render crash that hid the embedded chat in e2e tests

fix: ensure RCInstance is always created with valid roomId

3b2e2c0

- Add null check before creating RCInstance to prevent errors - Ensure component always renders when roomId is provided - Fixes e2e test failures where component was not visible

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix/embedded chat channelname not switching #1048

Fix/embedded chat channelname not switching #1048

deepak0x commented Jan 1, 2026 •

edited

Loading

Uh oh!

Spiral-Memory Jan 3, 2026

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

Spiral-Memory Jan 15, 2026

Uh oh!

deepak0x Jan 15, 2026

Uh oh!

Uh oh!

Spiral-Memory commented Jan 15, 2026

Uh oh!

deepak0x commented Jan 15, 2026

Uh oh!

deepak0x commented Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix/embedded chat channelname not switching #1048

Are you sure you want to change the base?

Fix/embedded chat channelname not switching #1048

Conversation

deepak0x commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Enable Channel Switching by Channel Name

Overview

Problem

Solution

Changes

Core Functionality

UI Updates

API Changes

Usage

Using Channel Name (New)

Using Room ID (Still Supported)

How It Works

Before / After

Technical Details

Testing

Uh oh!

Spiral-Memory Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

deepak0x commented Jan 3, 2026

Uh oh!

Spiral-Memory Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

deepak0x Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Spiral-Memory commented Jan 15, 2026

Uh oh!

deepak0x commented Jan 15, 2026

Uh oh!

deepak0x commented Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

deepak0x commented Jan 1, 2026 •

edited

Loading