fix(ui-trajectory): limit role tooltips to compact icons
This commit is contained in:
@@ -1961,36 +1961,36 @@ export function TrajectoryTable({
|
|||||||
<span
|
<span
|
||||||
className={css.kindSlot}
|
className={css.kindSlot}
|
||||||
>
|
>
|
||||||
<Tooltip
|
<span
|
||||||
label={KIND_LABEL[record.cell.kind]}
|
className={`${css.kindTag} ${
|
||||||
side="right"
|
record.cell.kind === 'system'
|
||||||
|
? css.systemNeutral
|
||||||
|
: record.cell.kind === 'context'
|
||||||
|
? css.contextGreen
|
||||||
|
: record.cell.kind === 'compacted'
|
||||||
|
? css.compacted
|
||||||
|
: record.cell.kind === 'tool'
|
||||||
|
? css.toolAmber
|
||||||
|
: record.cell.kind === 'message'
|
||||||
|
? css.assistantVioletBright
|
||||||
|
: record.cell.kind === 'subtool'
|
||||||
|
? css.subtoolAmber
|
||||||
|
: css[record.cell.kind]
|
||||||
|
}`}
|
||||||
|
data-role-kind={record.cell.kind}
|
||||||
>
|
>
|
||||||
<span
|
<Tooltip
|
||||||
className={`${css.kindTag} ${
|
label={KIND_LABEL[record.cell.kind]}
|
||||||
record.cell.kind === 'system'
|
side="right"
|
||||||
? css.systemNeutral
|
|
||||||
: record.cell.kind === 'context'
|
|
||||||
? css.contextGreen
|
|
||||||
: record.cell.kind === 'compacted'
|
|
||||||
? css.compacted
|
|
||||||
: record.cell.kind === 'tool'
|
|
||||||
? css.toolAmber
|
|
||||||
: record.cell.kind === 'message'
|
|
||||||
? css.assistantVioletBright
|
|
||||||
: record.cell.kind === 'subtool'
|
|
||||||
? css.subtoolAmber
|
|
||||||
: css[record.cell.kind]
|
|
||||||
}`}
|
|
||||||
data-role-kind={record.cell.kind}
|
|
||||||
>
|
>
|
||||||
<span className={css.kindTagIcon} aria-hidden="true">
|
<span className={css.kindTagIcon} aria-hidden="true">
|
||||||
{KIND_ICON[record.cell.kind]}
|
{KIND_ICON[record.cell.kind]}
|
||||||
</span>
|
</span>
|
||||||
<span className={css.kindTagLabel}>
|
</Tooltip>
|
||||||
{KIND_LABEL[record.cell.kind]}
|
<span className={css.kindTagLabel}>
|
||||||
</span>
|
{KIND_LABEL[record.cell.kind]}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -263,19 +263,22 @@ describe('TrajectoryTable', () => {
|
|||||||
expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px')
|
expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('renders responsive role icons with a custom tooltip', () => {
|
it('shows the custom role tooltip only from the responsive icon', () => {
|
||||||
const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
|
const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
|
||||||
const toolTag = view.container.querySelector<HTMLElement>('[data-role-kind="tool"]')
|
const toolTag = view.container.querySelector<HTMLElement>('[data-role-kind="tool"]')
|
||||||
|
const toolIcon = toolTag?.querySelector<HTMLElement>('[data-role-icon="wrench"]')
|
||||||
|
|
||||||
expect(toolTag).not.toBeNull()
|
expect(toolTag).not.toBeNull()
|
||||||
expect(toolTag?.getAttribute('title')).toBeNull()
|
expect(toolTag?.getAttribute('title')).toBeNull()
|
||||||
expect(toolTag?.querySelector('[data-role-icon="wrench"]')).toBeTruthy()
|
expect(toolIcon).toBeTruthy()
|
||||||
|
|
||||||
fireEvent.mouseEnter(toolTag as HTMLElement)
|
fireEvent.mouseEnter(toolTag as HTMLElement)
|
||||||
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
||||||
|
fireEvent.mouseEnter(toolIcon as HTMLElement)
|
||||||
const tooltip = screen.getByRole('tooltip')
|
const tooltip = screen.getByRole('tooltip')
|
||||||
expect(tooltip.textContent).toBe('TOOL')
|
expect(tooltip.textContent).toBe('TOOL')
|
||||||
expect(tooltip.getAttribute('data-side')).toBe('right')
|
expect(tooltip.getAttribute('data-side')).toBe('right')
|
||||||
fireEvent.mouseLeave(toolTag as HTMLElement)
|
fireEvent.mouseLeave(toolIcon as HTMLElement)
|
||||||
expect(screen.queryByRole('tooltip')).toBeNull()
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user