how to make a player chatted board (when a message is said, it shows up on a SurfaceGUI)?

Alright, so you want to do this. To detect when a player chats, you have to use the Player.Chatted event on server scripts only

game:GetService("Players").PlayerAdded:Connect(function(Player)
    Player.Chatted:Connect(function(message) --A parameter of .Chatted is the message string
        --do a thing
    end)
end)

Learn more here: https://developer.roblox.com/en-us/api-reference/event/Player/Chatted

Now we need to create a new TextLabel with the text as the message. We can clone a sample frame in order to do this.

local clone = script.Sample:Clone() --a Frame named "Sample" is now cloned within a vairable
clone.Parent = script.Parent.ScrollingFrame --There the scrollingframe has a UIListLayout to format the messages
clone.Message.Text = message --The parameter used for Player.Chatted

In the end we have something like this:

game:GetService("Players").PlayerAdded:Connect(function(Player)
    Player.Chatted:Connect(function(message)
        local clone = script.Sample:Clone()
        clone.Parent = script.Parent.ScrollingFrame
        clone.Message.Text = message
        clone.PlayerName.Text = Player.Name --Just for convience
        --You could also use ranks, but that's for you to do yourself :)
    end)
end)

Hope this helped, the above was an example. Keep in mind Player.Chatted only works server side, so do this in a server script.