RFE: New Component - ISO Download Card for Chat UI

[asuwebdesign]

RFE: New Component - ISO Download Card for Chat UI

Problem Statement

In conversational AI interfaces like Red Hat Lightspeed, users often need to perform tasks that bridge the gap between the web-based chat and their on-premise environments. A key example is the deployment of bare-metal hosts, which requires the user to download a critical binary asset, such as a Discovery ISO.

Currently, there is no standardized PatternFly component designed to facilitate this specific interaction within a chat context. Presenting a download as a simple link lacks the necessary context to build user confidence. Users need to know essential information like file size (to anticipate download time) and expiration dates (to ensure validity) before committing to the download. Furthermore, after the download is complete, the user is often left without clear guidance on the next steps, creating friction and interrupting the workflow momentum.

Proposed Solution

We propose the creation of a new "ISO Download Card" component. This component is designed to be used within a chat stream to facilitate the delivery of a critical binary asset.

The card would cohesively package the asset with all its essential context, providing a clear call-to-action, prominent metadata, and explicit post-download guidance. This approach is designed to streamline the crucial transition between the cloud-based AI and the user's on-premises hardware, building user confidence and maintaining a smooth workflow.

Key Features:

• Clear Title & Status: A title with an optional status icon (e.g., success check) to immediately convey the state of the asset.

• Contextual Description: A brief description explaining what the asset is and why the user needs it.

• Prominent CTA: A clear and accessible download button.

• Essential Metadata: Display key information like file size and expiration date directly on the card.

• Next Step Guidance: A footnote that tells the user exactly what to do after the download is complete.

• Interaction States: The component should have defined visual states for default, hover, and in-progress (downloading).

Design Specifications & Data Model

Here are the design specifications and the proposed data model for the component.

Screenshots

Component in various states and in-context within the chat UI:

Component Data Model Breakdown:

Component Application Usage:

Component Elements:

• Card Title: Text string, with an optional leading status icon.

• Summary Description: A paragraph of text explaining the download.

• Download Button: A primary button with a text label.

• Metadata: A string for displaying file size and expiration information.

• Next Step Footnote: A final line of text providing post-download instructions.

[asuwebdesign]

@kaylachumley, dropping the Figma concept file here for easy reference.

[rebeccaalpert]

Our plan is to implement this as a demo for now using the custom component injection prop - goal is simply to add a demo similar to #621 or #622.