Skip to content

Conversation

@cpsievert
Copy link
Collaborator

@cpsievert cpsievert commented Feb 28, 2025

With the current approach of always applying styling intended for inline text to any data-suggestion, you can wind up with unwanted :after content in situations like:

<div data-suggestion="My suggestion element">
   Some text here
  <img src="foo.jpg">
</div>

6bc832e takes a fairly aggressive approach of removing basically all of that styling, but it seems like a defensible take given you can add that styling with .suggestion

Note 6bc832e also adds a bit of special case if a data-suggestion is on a ui.card(), which makes something like this possible:

Screenshot 2025-02-27 at 3 46 29 PM
from shiny.express import expressify, ui

@expressify
def card_suggestion(title: str, suggestion: str, img_src: str, img_alt: str):
    with ui.card(data_suggestion=suggestion):
        ui.card_header(title)
        ui.img(
            src=img_src,
            alt=img_alt,
            style="margin-top:auto; margin-bottom:auto;",
        )

@expressify
def card_suggestions():
    with ui.layout_column_wrap():
        card_suggestion(
            title="Learn Python",
            suggestion="Teach me Python",
            img_src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg",
            img_alt="Python logo",
        )
        card_suggestion(
            title="Learn R",
            suggestion="Teach me R",
            img_src="https://upload.wikimedia.org/wikipedia/commons/1/1b/R_logo.svg",
            img_alt="R logo",
        )


with ui.hold() as suggestions:
    card_suggestions()

welcome = f"""
**Hello!** How can I help you today?

Here are a couple suggestions:

{suggestions[0]}
"""

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

chat.ui()

@chat.on_user_submit
async def handle_user_input(user_input: str):
    await chat.append_message(f"You said: {user_input}")

…bute. Also, add a bit of a special case for card suggestions
@cpsievert cpsievert requested a review from gadenbuie February 28, 2025 00:27
@cpsievert cpsievert added this to the Next Release milestone Feb 28, 2025
Copy link
Collaborator

@gadenbuie gadenbuie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@cpsievert cpsievert merged commit c65ca17 into main Feb 28, 2025
40 of 41 checks passed
@cpsievert cpsievert deleted the chat-data-suggestion-styling branch February 28, 2025 20:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants