Skip to content

Add copy and info buttons to the chat window and improve small screen UX#719

Merged
cjpais merged 8 commits intomozilla-ai:mainfrom
corebonts:copy-info-buttons
Mar 24, 2025
Merged

Add copy and info buttons to the chat window and improve small screen UX#719
cjpais merged 8 commits intomozilla-ai:mainfrom
corebonts:copy-info-buttons

Conversation

@corebonts
Copy link
Copy Markdown
Contributor

@corebonts corebonts commented Mar 16, 2025

For the copy to clipboard functionality I reused the copy button from the highlight container, which is used for code snippets, so they look the same.

For the info button I again used fontawesome.

image

@corebonts
Copy link
Copy Markdown
Contributor Author

The screenshot is created with an inprogress version, the unit is now added to the speed, e.g. 52.96/s

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 17, 2025

i think it might be helpful to have at least tok/s as the unit, or tokens/s or similar. /s is probably not enough context if we are going to add this

@corebonts
Copy link
Copy Markdown
Contributor Author

image

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 18, 2025

This is much better, and I realize I have a few more things

I think the prefill we should change to something more like

Processed ${numTokens} input tokens in ${ppTimeMs > 1000 ? `${(ppTimeMs / 1000).toFixed(2)}s` : `${ppTimeMs}ms`}

For 'predicted' I think more common language might be:

Generated ${numTokens} tokens in ${tgTimeMs > 1000 ? `${(tgTimeMs / 1000).toFixed(2)}s` : `${tgTimeMs}ms`}

Basically just making the language a bit more familiar to average users as well as moving to seconds for the time when it's greater than a 1000 milliseconds as it'll be easier to read.

Another note is the info button just looks visually a little large in the screenshot, not sure if this is just my eyesight, but if it could be more visually similar in size to the copy button next to it that would be great. I think it's mostly due to the weight (bold) of the icon

@corebonts
Copy link
Copy Markdown
Contributor Author

corebonts commented Mar 18, 2025

Yeah, I also noticed that thing with the buttons, I changed it to text only:
image

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 18, 2025

Nice this is looking great, thank you for the contribution. I'll test it on my machine today or tomorrow and pull it in

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 19, 2025

I tested it and for the info button, if it's possible to show the help text immediately or upon clicking the button, I think it would improve the user experience. Right now it's not very obvious that you have to wait a few seconds before the help text pops up.

The copy button is great.

@corebonts
Copy link
Copy Markdown
Contributor Author

I want to create a pull request in the next days to make the whole chat more mobile friendly, I planned there to show it on click, because on touch devices there's no tooltip at all. So I would keep it for now as it is and have the logic itself in place, and adjust it in that future pull request.

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 19, 2025

Would you want to do that all within one pull request? I can pull this in as is if it's easier for you that way, but I would prefer one pull request with all of the changes if possible. I'll be cutting a new release in the next few days.

I'm happy to leave out these changes for the next release, but can include them if they are ready

@corebonts
Copy link
Copy Markdown
Contributor Author

That also depends on you whether you like smaller iterations with any value or bigger but more complete ones.

@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 20, 2025

I would prefer more complete in this specific instance, really appreciate all your help, it's made my life a lot easier so many thanks

- Full screen "chat application like" interface on small screens
- Smaller spacings and header
This way it is also possible to show it on touch devices.
Start the timer when the request is sent, not when the first chunk
is received.
@corebonts corebonts changed the title Add copy and info buttons to the chat window Add copy and info buttons to the chat window and improve small screen UX Mar 20, 2025
@corebonts
Copy link
Copy Markdown
Contributor Author

Small screen UI (<768px)
Screenshot_20250320_214337_Vivaldi

@cjpais cjpais merged commit fb7ce5a into mozilla-ai:main Mar 24, 2025
1 check passed
@cjpais
Copy link
Copy Markdown
Collaborator

cjpais commented Mar 24, 2025

Thank you so much for the contribution. I just made a few tiny tweaks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants