Channel Tabs & UI Gradient Now Available in TextChatService

Hey Creators!

We’re excited to share a few updates to TextChatService, our default in-experience chat system:

  1. Channel tabs are now available in TextChatService. Channel tabs will allow you to split chat conversations into different tabs, rather than having all messages all appear in a single window.
  2. UIGradient can now be used to customize chat messages. This means you can use color and transparency gradients to stylize text in the chat window.
  3. Guide docs on how to send messages from NPCs in chat are now available. We know NPCs play a big role in making experiences immersive, so we want to make sure creators can use existing TextChatService capabilities to simulate NPC dialogue.

Below, we’ll dive into more details about each update, so please continue reading!

Channel Tabs

Read more about channel tabs:

Channel tabs will allow you to split chat conversations into different tabs, rather than having all messages all appear in a single window.

How to Enable Channel Tabs

You can turn on channel tabs in Studio, using the Enabled property of the new ChannelTabsConfiguration class that appears under TextChatService in the Explorer panel:

You can also enable channel tabs through a LocalScript within StarterPlayerScript:

LocalScript

local TextChatService = game:GetService("TextChatService")

local channelTabsConfiguration = TextChatService:FindFirstChildOfClass("ChannelTabsConfiguration")

if channelTabsConfiguration then
	channelTabsConfiguration.Enabled = true
end

How Channel Tabs Work

For custom TextChannels, one tab will be created for each TextChannel and the name of the tab will correspond to the Name property of the channel. Default TextChannels will have the following behavior and names:

Default TextChannel Name Tab Name
RBXGeneral General
RBXSystem General (combined into a single tab with RBXGeneral)
RBXTeam[Brick Color] Team
RBXWhisper Username of other player

Customizing Channel Tabs

The ChannelTabsConfiguration class contains many properties that allow you customize the appearance of channel tabs. This includes changing the color, transparency, and font of the tabs. You can find a full list of these properties in our creator documentation.

You can use TextChannel:DisplaySystemMessage to send custom welcome messages for each tab. By default, a system message saying “You are privately chatting with [username]” will be displayed after the first message sent in a whisper conversation.

UIGradient Support

Read more about UIGradient support:

ChatWindowMessageProperties is a new Instance that can be used with the new TextChatService.OnChatWindowAdded callback to customize the appearance of chat messages, including adding gradients. However, note that it only impacts how messages appear in the chat window; Bubble Chat customizations are handled separately.

How to Use ChatWindowMessageProperties

There are several ways you can customize messages using ChatWindowMessageProperties, but we’ll only show a code sample using UIGradient here. You can read more about different ways to customize in our chat guide docs.

You can apply gradients to chat message prefixes using ChatWindowMessageProperties.PrefixTextProperties. ChatWindowMessageProperties is instantiated with TextChatService.ChatWindowConfiguration:DeriveNewMessageProperties() and inherits from TextChatMessageProperties:

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 2, 234)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(0, 226, 255)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(134, 0, 255))
}

TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
	local properties = chatWindowConfiguration:DeriveNewMessageProperties()

	local textSource = message.TextSource
	if textSource then
		properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
		gradient:Clone().Parent = properties.PrefixTextProperties
	end

	return properties
end

Rich Text Support

While ChatWindowMessageProperties has font, color, and size properties for you to customize, you can still use rich text tags to apply formatting to your chat messages if you prefer. Here’s an example of using ChatWindowMessageProperties.PrefixTextProperties to apply a gradient to a VIP tag and using rich text to change the color of the username:

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration

local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 2, 234)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(0, 226, 255)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(134, 0, 255))
}

TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
	local properties = chatWindowConfiguration:DeriveNewMessageProperties()

	if message.TextSource then
		properties.PrefixText = "[VIP]"
		properties.Text = string.format("<font color='#F5CD30'>%s</font>", message.PrefixText) .. " " .. message.Text

		properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
		gradient:Clone().Parent = properties.PrefixTextProperties
	end

	return properties
end

NPC Speakers

Read more about NPC speakers:

In addition to adding channel tabs to our TextChatService documentation, we’ve also added a guide on how to send messages from NPCs in chat. We know NPCs play a big role in making experiences immersive, so we want to make sure creators can use existing TextChatService capabilities to simulate NPC dialogue.

You can use TextChannel:DisplaySystemMessage and TextChatMessageProperties:PrefixText to format a system message so that it appears to come from a character. You can also use TextChatService:DisplayBubble to have a chat bubble appear over the appropriate NPC.

local TextChatService = game:GetService("TextChatService")

TextChatService.OnIncomingMessage = function(message)
	local properties = Instance.new("TextChatMessageProperties")

	-- Check for system messages that contain metadata
	if not message.TextSource and message.Metadata ~= "" then

		-- Add prefix to make message look like message was sent by a user
		properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "50C878", message.Metadata)

		-- Add bubble chat
		TextChatService:DisplayBubble(workspace.Tree.Leaf, message.Text)
	end

	return properties
end

local message = "Welcome! I will be your guide."
local speakerName = "Wise Tree"
local channel = TextChatService.TextChannels.RBXGeneral
channel:displaySystemMessage(message, speakerName)

Migrating to TextChatService

Last week, we announced that the legacy chat system will be removed on April 30th, 2025 and creators have until that date to migrate to TextChatService. We are making these changes to make sure that all experiences respect parental settings and comply with regulations without having to ask you to constantly implement new requirements. Read more about legacy deprecation here.

We’re continuing to focus on improving TextChatService performance, especially for bubble chat. Additionally, in the upcoming weeks, we plan to introduce improved documentation for TextChatService, focusing on helping you solve use cases. We’ll plan to answer your questions and work on specific guides focused on migration.

As always, please let us know if you have any questions or suggestions. Thanks!

260 Likes

This topic was automatically opened after 10 minutes.

This is exciting, Honestly really exciting updates for immersive chat features we could use the channel tabs for seperate NPC dialogue and it just makes organization so much easier, Love it, looking to see more organization updates such as this one

23 Likes

This is one step in the right direction, but what if we don’t use classic chat and only use bubble chat? For our roleplay type games, we use bubble chat and text channels, by forking the chat module and trying to do it our way.

But…we want some official implementation of this and maybe making it easier to do it? Can we like have an MessageCreate event and then we can override the bubble chat (just an example, theres probably a million other issues with this implementation) or something.

Here’s some of the feature requests (including mine in the TextChatService private beta):

and probably a lot more. This is the main reason I can’t use TextChatService, because of the lack of APIs so we can do these things.

29 Likes

THANK YOU! This brings so much potential for my game. I plan on adding staff channels and a vip only channel! Is there a limit of how many channels we can have?

Are we able to change the text colour of the message as well, like the username?


Overall, this update is great, thank you! In the future could we see more features like text to speech, an emoji keyboard etc coming?

14 Likes

Can you guys PLEASE add an offset option to the chat window

9 Likes

Can UIGradient be changed live while message was already sent?

12 Likes

W UPDATE!!! I can finally have gradients on my chat tags! NPC messages in chat is pretty cool too.

10 Likes

Just wanted to mention that there’s no easy organic way to discover how to add extra channels from the TextChatService or TextChannel API documentation.

Love the extra customizability, been waiting a long time for this.

13 Likes

Alas, after 3 long years, we’ve finally achieved Channel Tabs… Thank you…

Still not liking the force update though.

13 Likes

Finally, when is the Draggable and Scalable Options Features be added?

10 Likes

Really excited to see these changes.

Are there any plans to allow us to see messages sent before the user joined (like the legacy chat had)? That’s one of the big ones that I’ve been waiting for.

11 Likes

I hope you dont forget the Drag/Drop and Resize feature the old chat had. Also custom /emote emotes do not work as we can no longer edit the valid emotes list.

11 Likes

image

:deciduous_tree: : Welcome! I will be your guide.

17 Likes

Has anyone figured out how to add new channels yet or is everyone in the same boat?..

Edit: Just figured it out! If anyone else is struggling, here’s how you add new TextChannels:

  • On the server, create a new TextChannel object in the TextChannels Folder located in TextChatService
  • Add players to a new channel using TextChannel:AddUserAsync(UserId)

{F99758C4-6C64-4BF0-9FC1-7F71B5D8DC87}

20 Likes

oh my gosh is this awesome!! RIP legacy but this makes me happy with the new features

6 Likes

tysm for adding chat channels I remember me and @GFink were tryna implement them a while ago

6 Likes

I like this a lot cant wait to be able to use it!

5 Likes

ooh, i think i might love this

i change my mind about hating the change :smiley:

4 Likes

Is parenting UIStrokes to ChatWindowMessageProperties.PrefixTextProperties currently supported? I am trying to do it right now but it doesn’t seem to be working. Whenever I use the TextStrokeColor3 property my chat tags become very thick.

With TextStrokeColor3:
image
Without TextStrokeColor3 (forced to use black as it is the default):
image

6 Likes