some design tweaks

[simonpcouch]

Closes #141.

Before:

before.mov

With this PR [EDIT: some further tweaks visible in a screenshot below]:

new-look.mov

[github-actions]

Preview deployed to Connect (dogfood.team.pct.posit.it): https://dogfood.team.pct.posit.it/connect/#/apps/d7a36cae-8f27-448b-a478-61b81fbe3942/draft/364639

Deployed from commit 055be2f.

[github-actions]

Preview deployed to Connect (connect.staging.pct.posit.it): https://connect.staging.pct.posit.it/connect/#/apps/ad662e1b-5048-4acc-9ad7-f9478c92274e/draft/2218

Deployed from commit 055be2f.

[skaltman]

The Working... functionality is really nice. I also like that the stop button is now neutral instead of red.

Generally, the spacing and shape feel like they are moving in two directions. The message composer got taller, while the user messages got more tightly wrapped. I think it would feel more coherent if everything moved in the same direction: more or less padding, more or less boxy. I think I would prefer more horizontal padding and slightly boxier. I like how Posit Assistant's user messages feel, which I think have more horizontal padding than shinychat's.

• The chat composer feels somewhat too tall and clunky, caught between the more compact shinychat pill version and a more expansive, boxier feel. I think it should just move slightly in either direction to feel more intentional.
• The send message button still feels very shinychat-like and prominent to me. What do you think about making it hollow, like Posit Assistant?
• Changing the user message background color might also help it feel less default-shinychat. It could stay gray, but be a different shade, possibly a light blue-gray? I don't feel strongly about this.

[skaltman]

Also, do you think that the send-button spinner is necessary? Could the send button just be disabled and gray during that period instead? This might fall under shinychat work, though.

[simonpcouch]

Here's another take on those shapes!

The default shinychat color is actually a light blue and we had changed it to a light grey. Here's the default blue with the new geometry:

I actually think the default shinychat blue looks fine here!

[skaltman]

This looks nice! I like the shapes in this version

[simonpcouch]

@gadenbuie, do you mind to take a look here and share any reactions? Did my best not to overlap with page_chat() changes and broadly not step on internal shinychat toes.

The "Working..." change specifically might be of interest for shinychat, as an alternative to the spinner icon. The implementation on the shinychat side could be cleaner than the one here, where we use a constant delay to avoid a flicker.

[gadenbuie]

I fixed the missing visual feedback in shinychat when waiting for the API response to start streaming in when you don't have an icon, although I went a slightly different direction that re-uses some existing shinychat design. Also the assistant icon is now disabled by default in dev shinychat

• Default assistant icon off, with an avatar-independent pending indicator shinychat#345

[simonpcouch]

Thank you @gadenbuie! Had just been poking at this again but will wait and see how posit-dev/shinychat#341 comes together before merging.