feat(Chat): Add input suggestion links

[cpsievert]

This PR adds the ability to have input suggestion links inside of Chat() messages. This can be done in 2 main ways:

1. Add a .suggestion CSS class to an HTML element (e.g., <span class="suggestion">A suggestion</span>).

   • In this case, the text content of the element is treated like a hyperlink (when clicked, the text gets sent to the input).

2. Add a data-suggestion attribute to an HTML element, which is helpful if:

• The suggestion wants to be different from the displayed text (e.g., <span data-suggestion='The actual suggestion'>A suggestion</span>).
• The suggestion wants to come from non-text content, like an image (e.g., <img data-suggestion='A suggestion' src='...' />

In addition, add a .submit CSS class (or a data-suggestion-submit attribute) to have the suggestion automatically submitted. Alternatively, the user can hold Cmd/Ctrl to submit any suggestion or Opt/Alt to prevent submission.

Here's a minimal example:

from shiny.express import ui

welcome = """
Here is the <span class='suggestion'>1st input suggestion</span>.
And here is a <span data-suggestion='The actual suggestion'>2nd suggestion</span>.
Finally, a <img data-suggestion='A 3rd, image-based, suggestion' src='shiny-hex.svg' height="50px" alt='Shiny logo'> image suggestion.
"""

chat = ui.Chat(
    "chat",
    messages=[welcome],
)

chat.ui()

chat-input-suggestions.mp4

This PR also adds submit and focus arguments to .update_user_input().

Follow up

• Update component docs to mention this feature (Update chat component page py-shiny-site#237)
• Mention this feature in API reference?

[gadenbuie]

I like the approach in this PR as a light-weight and simple way to get suggestions into the chat. That said, I think we absolutely need inline suggestions to be accessible.

I would like to see us offer chat suggestions as buttons separate from the chat and closer to the chat input. That said, I think we could start with the approach in this PR and add separate chat suggestion buttons (and I'd be interested in working on that).

[gregswinehart]

Hmmmm, I really like both of your ideas for the css. I started with a version of @gadenbuie's button idea, but then realized the suggestion might be wrapped text, which is a bummer for buttons. What if it was more of a background color button than an outline button? (Kind of a modified version of highlighted text?) The background color could get darker on hover (which only sort of shows in this mockup 😀)... Actually, there's room for it to be lighter on hover as well, that might look better.

With wrapping text in mind, the underline makes a lot of sense to me. Maybe make it link text, with a dotted border-bottom... But then solid on hover:

[gadenbuie]

Highlights are cool, but I do like the dotted underline look, especially if it makes longer suggestions better. One downside to this appearance is that it's quite close to the link styles and hard to differentiate (first image). I think it's easier to see the suggestions and to understand that you're supposed to click on them when there's an icon included, which could range from ✨ to something less emoji.

Underline only	Emoji	Icon

Styles

.chat-input-suggestion,
[data-input-suggestion] {
  cursor: pointer;
  color: var(--bs-link-color, #007bc2);

  text-decoration-color: var(--bs-link-color, #007bc2);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;

  padding: 2px;

  &:hover {
    text-decoration-style: solid;
  }

  &::before {
    content: "\\2728 ";
    content: "\\25b6\\fe0e ";
    margin-inline-end: 0.25rem;
  }
}

[cpsievert]

we absolutely need inline suggestions to be accessible

Totally agree. I'll have a look and see if it's worth adding before we merge.

I also like the dotted underline look. The emoji/icon idea is cool, and looks awesome in the right context, but I also feel like it could get busy/redundant fairly quickly (e.g., in a bulleted list of suggestions)

[gadenbuie]

The emoji/icon idea is cool, and looks awesome in the right context, but I also feel like it could get busy/redundant fairly quickly (e.g., in a bulleted list of suggestions)

1. Inline suggestions aren't a standard interface used by every Chat UI. Most interfaces do something quite different. I think it's a novel approach and I like it, but as a novel idea I think we need a strong signal to users. In other words, yes the icon would be redundant but without it, it's just not obvious what will happen when you click the suggestion.

2. I don't think inline suggestions are our final word on this; we should collect suggestions in some way at the end of a chat that contains them. If we had that, we wouldn't need the icons and the inline suggestions could be more subtle because there's a stronger signal elsewhere.

[cpsievert]

How do we feel about something like this?

&::after {
  content: "\21B5";
  margin-inline-start: 0.25rem;
}

[gregswinehart]

How do we feel about something like this?

I really like that direction. I should say I like the AI sparkles as well... But something like the carriage return icon feels like a step closer to what we want this link to communicate.

Piggybacking on what @gadenbuie mentioned earlier, about how this kind of inline suggestion isn't settled science.... I could see the world heading this direction OR heading in a direction of "text in buttons" below a paragraph... Prompting someone to click the one they prefer.

[gadenbuie]

Piggybacking on what @gadenbuie mentioned earlier, about how this kind of inline suggestion isn't settled science.... I could see the world heading this direction OR heading in a direction of "text in buttons" below a paragraph... Prompting someone to click the one they prefer.

@gregswinehart That's pretty close to what I had in mind, but I was thinking of smaller buttons that wouldn't try to to include a full sentence. I do like the idea of having explicit buttons, but because the inline suggestions are created (in general) from the markdown that's written directly by the LLM, we don't have much control over what part of the text it will decide to put inside the <span class="suggestion"> and which parts will end up outside the suggestions. In other words, LLMS will often put just the first part of the sentence in the suggestion: Tell me more about this "Shawn Carter" gentleman and please be specific...

[gadenbuie]

LGTM! 😉

[cpsievert]

Do we like overlapping squares over stars (c7625bc)?

[gadenbuie]

I really like diamond/star. I think general chat-bot UI community has unified around ❇️ or ✨ as a universal signal that you'll be interacting with an AI. It's literally everywhere, in fact I just noticed that Google just added Gemini into my email (not that I totally want that) and is using the diamond star image all over the place.