How to make Chat frame display messages from bottom to top?

I am trying to make the default Roblox Chat UI display new messages from bottom to top, and there are no specific setting for it in the “ChatSettings” ModuleScript.

The setting for ChatWindow’s AnchorPoint aren’t there either, but I use a LocalScript to set the AnchorPoint to (0, 1) so that I can have the Chat Window on the bottom-left corner with position at UDim2(0, 0, 1, 0). I think ChatWindow’s AnchorPoint should be added into the ChatSettings Module with the new message order?

Thanks in advance
~MXKhronos

2 Likes

Doesn’t it already do that?

Either way, if you wanted to make something like this yourself you would just change the math to be the opposite of whatever it is now.

3 Likes

well make maybe a CustomChatGui then add a UiListLayout and make it start from LeftBottom then paste just the message frame inside the chatbox and the uilist will do its job.

2 Likes

I didn’t want to re-make the default chat ui but I did manage to customize it after it loads in. Here’s what I wanted.

image

image

image

Sharing this for everyone who wants to customize their chat frame.

--chatFrame parameter refers to the Frame inside of the Chat ScreenGui.
local ChatInterface = {};

function ChatInterface.Initialize(chatFrame)
	if chatFrame:FindFirstChild("Initialized") then return end;
	local initializedTag = Instance.new("BoolValue", chatFrame); initializedTag.Name = "Initialized";
	local chatChannelParentFrame = chatFrame:WaitForChild("ChatChannelParentFrame");
	local chatBarParentFrame = chatFrame:WaitForChild("ChatBarParentFrame");
	local chatMessageLog = chatChannelParentFrame:WaitForChild("Frame_MessageLogDisplay"):WaitForChild("Scroller");
	local function resizeChatFrame()
		local frames = chatMessageLog:GetChildren();
		local totalSize = 10;
		for a=1, #frames do
			if frames[a]:IsA("Frame") then
				totalSize = totalSize + frames[a].AbsoluteSize.Y;
			end
		end
		chatFrame.AnchorPoint = Vector2.new(0, 1);
		chatFrame.Position = UDim2.new(0, 5, 1, -5);
		chatMessageLog.Position = UDim2.new(0, 0, 0, 5);
		chatMessageLog.Size = UDim2.new(1, -4, 1, -10);
		chatMessageLog.BottomImage = "rbxasset://textures/ui/Scroll/scroll-middle.png";
		chatMessageLog.TopImage = "rbxasset://textures/ui/Scroll/scroll-middle.png";
		chatChannelParentFrame.AnchorPoint = Vector2.new(0, 1);
		chatChannelParentFrame.Position = UDim2.new(0, 0, 1, -40);
		chatBarParentFrame.Position = UDim2.new(0, 0, 1, -40);
		chatBarParentFrame.Size = UDim2.new(1, 0, 0, 40);
		local inputBoxFrame = chatBarParentFrame:FindFirstChild("BoxFrame", true);
		local inputChatBar = chatBarParentFrame:FindFirstChild("ChatBar", true);
		local inputTextLabel = chatBarParentFrame:FindFirstChild("TextLabel", true);
		if inputBoxFrame then
			inputBoxFrame.BackgroundColor3 = Color3.fromRGB(0, 0, 0);
			inputBoxFrame.Position = UDim2.new(0, 5, 0, 5);
			inputBoxFrame.Size = UDim2.new(1, -10, 1, -10);
		end
		if inputChatBar then
			inputChatBar.TextColor3 = Color3.fromRGB(255, 255, 255);
			inputChatBar.TextYAlignment = Enum.TextYAlignment.Center;
		end
		if inputTextLabel then
			inputTextLabel.TextColor3 = Color3.fromRGB(255, 255, 255);
			inputTextLabel.TextYAlignment = Enum.TextYAlignment.Center;
		end
		chatChannelParentFrame.Size = UDim2.new(1, 0, 0, math.clamp(totalSize, 15, 140));
	end
	
	chatMessageLog.ChildAdded:Connect(resizeChatFrame);
	chatMessageLog.ChildRemoved:Connect(resizeChatFrame);
	resizeChatFrame();
end

return ChatInterface;
2 Likes