Custom text chat UI

This example shows how to use the TextChatService class to design your own frontend. It reuses the default text channels from CreateDefaultTextChannels and is very simple compared to the default UI.

1. Disable the default UI that comes with the TextChatService by setting the ChatWindowConfiguration.Enabled and ChatInputBarConfiguration.Enabled properties to false in Studio's Properties window.

2. Create a replacement for the chat input bar. This is the text box that emits messages when the user presses Enter.

   1. Create a ScreenGui and parent it to StarterGui.

   2. Create a TextBox and parent it to the new ScreenGui, then reposition and resize it as desired.

   3. Create a LocalScript and parent it to the new TextBox.

   4. Add the following code to the LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral is the default public channel
      local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")
      
      local textBox = script.Parent
      textBox.FocusLost:Connect(function(enterPressed)
      	local text = textBox.Text
      	if enterPressed and #text > 0 then
      		local success, response = pcall(function()
      			return RBXGeneral:SendAsync(textBox.Text)
      		end)
      
      		if not success then
      			RBXGeneral:DisplaySystemMessage("Failed to send message")
      		end
      
      		-- Users expect the input box to be cleared after sending a message
      		textBox.Text = ""
      	end
      end)

3. Create a replacement for the chat window. This is the ScrollingFrame that displays messages as they are received from TextChatService.MessageReceived. This step also creates a UIListLayout to automatically layout the messages.

   1. Create another new ScreenGui and parent it to StarterGui.

   2. Create a ScrollingFrame and parent it to the ScreenGui, then reposition and resize it as desired.

   3. Create a UIListLayout and parent it to the ScrollingFrame.

   4. Create a LocalScript and parent it to the ScrollingFrame.

   5. Add the following code to the LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Function to create a new text label for each message received
      local function addMessageGui(textChatMessage: TextChatMessage)
      	local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending
      
      	local parent = script.Parent
      
      	local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
      	if originalLabel then
      		originalLabel.Text = textChatMessage.Text
      		originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      	else
      		local textLabel = Instance.new("TextLabel")
      		textLabel.BorderSizePixel = 0
      		textLabel.Font = Enum.Font.BuilderSans
      		textLabel.TextSize = 18
      		textLabel.TextXAlignment = Enum.TextXAlignment.Left
      		textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      		textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
      		textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
      		textLabel.Name = textChatMessage.MessageId
      		textLabel.AutomaticSize = Enum.AutomaticSize.XY
      		textLabel.Text = textChatMessage.Text
      		textLabel.Parent = parent
      	end
      end
      
      -- Start listening for incoming messages
      TextChatService.MessageReceived:Connect(addMessageGui)

      When using the TextChatService.MessageReceived event, it's important to check if the message already exists in the chat window. This event is called once when sending and once when the message is received from the server.

4. Test your experience by sending messages in the chat input bar. You should see the messages appear in the chat window. You can then expand on this example by adding features such as focusing the TextBox when a key is pressed or adding chat tags.