[FrontEnd] Display API cost and token usage in frontend

[AutoLTX]

• This change is worth documenting at https://docs.all-hands.dev/
• Include this change in the Release Notes. If checked, you must provide an end-user friendly description for your change below

End-user friendly description of the problem this fixes or functionality that this introduces.

---

Give a summary of what the PR does, explaining any non-trivial design decisions.
This will expose API cost and usage info to customers in on-demand mode.

• Expose cost and usage info in default mode.
• User can click the hide cost button and hide the Cost and Usage. Then chat will show as original and cover all left channel.
  Some screenshots:
  Expose mode in default:

Hide mode:

---

Link of any specific issues this addresses.
#5257

[AutoLTX]

This PR needs to wait for backend PR #7082 merge first. And I may still change some details of the PR. But the inital design is finished. Let's make sure it can meet your requirement first!

Tagging reviewers for best design discussion: @neubig, @rbren, @enyst, @amanape. All the screenshots
are already uploaded in the PR description.

Now I use tilin/testFrontendE2E branch to test and get the screenshots. Feel free to try it if you need it.