FIX Redesign chat ribbon for clarity and narrow viewports#1736
Open
romanlutz wants to merge 3 commits into
Open
FIX Redesign chat ribbon for clarity and narrow viewports#1736romanlutz wants to merge 3 commits into
romanlutz wants to merge 3 commits into
Conversation
The chat ribbon had several issues:
- Redundant "PyRIT Attack ->" prefix added chrome with no information.
- The target badge showed only type+model with a plain-text tooltip
containing the registry name; none of the rich metadata (endpoint,
capabilities, modalities, parameters) was reachable without leaving
the chat view.
- Below ~700 px the right-side actions (panel toggle and "+ New
Attack") got pushed off-screen entirely.
- Below ~500 px label chips were silently clipped without any
indicator, and the inline "+ Add" button became unreachable.
This change:
1. Drops the "PyRIT Attack" text and arrow. The target stands on its
own as the leftmost element.
2. Introduces a TargetBadge component that shows the type + model in
the badge and exposes the rest of the metadata via a rich tooltip:
registry name, endpoint, capabilities (as outlined badges),
input/output modalities, and any target_specific_params. Fluent's
default Tooltip surface is hard-capped at max-width: 240 px, which
truncated the endpoint and parameter lines; we override the surface
via the Tooltip `content` slot's className with
`width: max-content; min-width: 420 px;
max-width: min(800px, calc(100vw - 64px))` so the surface grows
to fit the longest line and only wraps if a deeply-nested
deployment URL exceeds the cap.
3. Reworks LabelsBar into a single unified layout that scales
gracefully:
- A labels icon (TagRegular) with a count badge of the *total*
number of labels is always present at the leftmost position,
regardless of how many chips happen to fit. The bar's root
reserves min-width: 60 px so the icon button stays visible at
any ribbon width (previously the bar shrank to zero behind the
target badge and clipped the icon at <500 px). Hovering shows
a full tooltip ("N labels - click to view or add"); clicking
opens a popover that contains the complete label list and the
add form, so every action is always reachable.
- As many full chips as fit are rendered inline in declaration
order. The fit calculation uses an off-screen "measure" row so
each chip's natural width is known before layout decisions are
made (the previous getBoundingClientRect approach interacted
poorly with overflow-hidden ancestors).
- The inline "+ Add" button is shown only when every chip already
fits (otherwise the popover already covers the same flow), and
it sits next to the last chip rather than being right-aligned.
4. Hardens the right-side ribbon actions: flexShrink: 0 on the
actions group so neither the panel toggle nor "+ New Attack" can
ever be pushed off-screen, and a media query hides the "New
Attack" text below 600 px - the button collapses to icon-only,
still labelled by aria-label and tooltip.
Tests:
- New TargetBadge.test.tsx: 4 tests covering visible badge text,
accessible name, no-model variant, and minimal-target rendering.
- LabelsBar.test.tsx: 3 new tests asserting that the labels icon is
always present with the total count, that its popover surfaces
every label and the add form, and that the icon stays visible even
when chips have to be hidden because they don't fit. The previous
compact-mode and "+N more" tests are removed since both layouts
have been replaced by the unified design.
- ChatWindow.test.tsx: existing assertions updated to reflect that
"PyRIT Attack" is gone and the target is queried via the new
data-testid="target-badge".
- All 568 frontend tests pass; lint and typecheck are clean.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…moved "PyRIT Attack" header
The chat ribbon redesign in this branch dropped the literal "PyRIT Attack"
prefix text in favour of the target badge as the leftmost element. Twelve
Playwright tests across seven spec files were using page.getByText("PyRIT
Attack") as a "chat is loaded" sentinel; they now wait on
page.getByTestId("new-attack-btn"), which is the equivalent always-present
ribbon element under the new layout. The "should display PyRIT header" test
in chat.spec.ts is renamed to "should display chat ribbon" to match what it
actually asserts. The bounding-box anchor in accessibility.spec.ts switches
to the same testid.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was wrong
The chat ribbon had several issues that compounded each other:
type (model)with a plain-text tooltip containing only the registry name — none of the rich metadata (endpoint, capabilities, modalities, parameters) was reachable without leaving the chat view.What changed
Drops the "PyRIT Attack" text and arrow. The target stands on its own as the leftmost element.
New
TargetBadgecomponent shows the type + model in the badge and exposes the rest of the metadata via a rich tooltip: registry name, endpoint, capabilities (as outlined badges), input/output modalities, and anytarget_specific_params. Fluent's defaultTooltipsurface is hard-capped atmax-width: 240 px, which truncated long endpoint strings; we override the surface via theTooltipcontentslot'sclassNamewithwidth: max-content; min-width: 420 px; max-width: min(800px, calc(100vw - 64px))so the surface grows to fit the longest line and only wraps if a deeply-nested deployment URL exceeds the cap.Unified
LabelsBarlayout. Replaces the older "compact vs. inline" split with one design that scales gracefully:TagRegular) with a count badge of the total number of labels is always present at the leftmost position, regardless of how many chips happen to fit. The bar's root reservesmin-width: 60 pxso the icon button stays visible at any ribbon width (previously the bar shrank to zero behind the target badge and clipped the icon at <500 px). Hovering shows a full tooltip ("N labels — click to view or add"); clicking opens a popover that contains the complete label list and the add form, so every action is always reachable.getBoundingClientRectapproach interacted poorly withoverflow: hiddenancestors).Right-side ribbon actions hardened.
flexShrink: 0on the actions group so neither the panel toggle nor "+ New Attack" can ever be pushed off-screen, and a media query hides the "New Attack" text below 600 px — leaving an icon-only button (still labelled byaria-labeland tooltip).Tests
TargetBadge.test.tsx(4 tests): visible badge text, accessible name, no-model variant, minimal-target rendering.LabelsBar.test.tsx: 3 new tests asserting that the labels icon is always present with the total count, that its popover surfaces every label and the add form, and that the icon stays visible even when chips have to be hidden because they don't fit. The previous compact-mode and "+N more" tests are removed since both layouts have been replaced by the unified design.ChatWindow.test.tsx: existing assertions updated to reflect that "PyRIT Attack" is gone and the target is queried via the newdata-testid="target-badge".Verification
Reproduced before and after at viewport widths 1440 / 700 / 500 / 400 px using a Playwright-driven browser, and verified the new tooltip and labels popover behaviors.
🏷 N) + as many chips as fit; remaining chips reachable via popover; right actions visibleScreenshots
All thumbnails rendered at the same width so before/after sit side-by-side; click to enlarge.
After-only