import { Canvas, Meta, Title } from '@storybook/addon-docs/blocks';
import * as RegenerateSuggestionStories from './RegenerateSuggestion.stories';
<Meta of={RegenerateSuggestionStories} name='Usage' />
<Title />
## Purpose
Shows how an agent's suggestion can be retried, and how earlier attempts can still be browsed.
It is also an example of how to compose several interactions and functions within the Suggestion Card. The card gives you the frame and the footer slots; retrying, paging between sets, choosing an option and deciding are all built from other components and the screen's own state.
## Usage
This is a recipe, not a component. It composes the Suggestion Card (single choice), Button and the PDS Compact Pagination.
- Put **Regenerate** in the card's `actionsStart`, next to the decision buttons, as a secondary button with the `rotate` icon. While the agent replies, set the Button to its working state and change its label to "Regenerating".
- When the new set arrives, replace the rows and move to it. Each set keeps its own selection.
- Once there is more than one set, put the PDS Compact Pagination in `actionsEnd` with `pageControlType='static'` and one item per page, so people can step back to an earlier set ("1 of 2").
- The screen owns the sets, the selection and what Regenerate does. The card only provides the slots.
## Implementation
The story is interactive. Press Regenerate, then use the arrows to step between sets.
<hr />
<Canvas of={RegenerateSuggestionStories.Interactive} />
Regenerate a suggestion
A recipe, not a component: one interactive story that composes the Suggestion Card (single choice), the Button and the PDS Compact Pagination.
Extends a PDS componentOpen in Storybook