[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.

[rbren]

@AutoLTX thanks for taking this on!

I'd like to get some fuller designs done, but for now let's put the button inside the conversation card's context menu, and then show the costs in a modal

Does that work for you?

[AutoLTX]

@rbren Certainly! I will follow your advice. And I guarantee to complete it before this weekend
By the way, do you think it's ok to expose accumulated_cost, total_tokens, prompt_tokens, and completion tokens in a window directly? Or you prefer just show cost in the window, and click some buttons like "detailed" and show usage related things?

[rbren]

Awesome! Let's just show everything inside the pop-up modal

[AutoLTX]

Hi, @amanape.I've update the code to align with @rbren 's requirement. Now all the CI passed. Could you please review it?
Latest result:


By the way, do we need to update the doc/release note to show the display cost feature?

[rbren]

@AutoLTX good work! We have an existing modal UI though, which should look nicer (e.g. for the close button). @amanape can probably point you in the right direction

[AutoLTX]

Thanks for remind. @rbren I checked the code and use baseModal now. The window will be closed when users use "esc" or click other space of the website. I don't add additional close button.

[AutoLTX]

Gently ping, @amanape Could you please review this PR?

[amanape]

Will do soon, hopefully later today.

[turian]

Related: #7107 #7105 #7102

[turian]

@AutoLTX How difficult would it be to include this information in the PR comments pushed ?

[amanape]

LGTM! Made a few small changes, but awesome work overall. Thanks!