UI de chat por texto personalizada

Este exemplo mostra como usar a classe TextChatService para projetar seu próprio frontend. Ele reutiliza os canais de texto padrão de CreateDefaultTextChannels e é muito simples em comparação com a interface padrão.

1. Desative a interface padrão que vem com o TextChatService configurando as propriedades ChatWindowConfiguration.Enabled e ChatInputBarConfiguration.Enabled como false na janela Propriedades do Studio.

2. Crie um substituto para a barra de entrada de chat. Esta é a caixa de texto que emite mensagens quando o usuário pressiona Enter.

   1. Crie um ScreenGui e o coloque como filho de StarterGui.

   2. Crie um TextBox e o coloque como filho do novo ScreenGui, depois reposicione e redimensione conforme desejado.

   3. Crie um LocalScript e o coloque como filho do novo TextBox.

   4. Adicione o seguinte código ao LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral é o canal público padrão
      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("Falha ao enviar mensagem")
      		end
      
      		-- Os usuários esperam que a caixa de entrada seja limpa após enviar uma mensagem
      		textBox.Text = ""
      	end
      end)

3. Crie um substituto para a janela de chat. Esta é a ScrollingFrame que exibe mensagens à medida que são recebidas do TextChatService.MessageReceived. Esta etapa também cria um UIListLayout para layout automático das mensagens.

   1. Crie outro novo ScreenGui e o coloque como filho de StarterGui.

   2. Crie um ScrollingFrame e o coloque como filho do ScreenGui, depois reposicione e redimensione conforme desejado.

   3. Crie um UIListLayout e o coloque como filho do ScrollingFrame.

   4. Crie um LocalScript e o coloque como filho do ScrollingFrame.

   5. Adicione o seguinte código ao LocalScript:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Função para criar um novo rótulo de texto para cada mensagem recebida
      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
      
      -- Comece a escutar por mensagens recebidas
      TextChatService.MessageReceived:Connect(addMessageGui)

      Quando usar o evento TextChatService.MessageReceived, é importante verificar se a mensagem já existe na janela de chat. Este evento é chamado uma vez ao enviar e uma vez quando a mensagem é recebida do servidor.

4. Teste seu jogo enviando mensagens na barra de entrada de chat. Você deve ver as mensagens aparecerem na janela de chat. Você pode então expandir este exemplo adicionando recursos, como focar no TextBox quando uma tecla é pressionada ou adicionar tags de chat.