Fix/embedded chat channelname not switching

[deepak0x]

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:

1. The component waits for user authentication
2. Once authenticated, it calls the Rocket.Chat API to resolve the channel name to a room ID
3. The resolved room ID is used to connect to the correct channel
4. 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

1. If roomId is explicitly provided, it is used directly
2. 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
3. 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

[deepak0x]

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

[deepak0x]

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

[deepak0x]

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

[Spiral-Memory]

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]

Sure @Spiral-Memory

[deepak0x]

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

[deepak0x]

hey @Spiral-Memory If u get time you can check this pr have fixed the logic as per previous description pls check and let me know if any issue Thanks ;)