diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css index 40f4791d45..69d9d620e3 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css @@ -1248,9 +1248,19 @@ background: transparent; cursor: pointer; font: 600 12px/18px var(--dsw-font-family); + gap: 2px; user-select: none; } +.thinkingChevron { + flex: none; + transition: transform 120ms var(--ds-ease-in-out); +} + +.thinkingToggle[aria-expanded='true'] .thinkingChevron { + transform: rotate(90deg); +} + .thinkingToggle:hover { color: var(--dsw-alias-label-secondary); } diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 89154626f0..491462d7b5 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -1232,7 +1232,8 @@ function MarkdownRecordContent({ aria-expanded={thinkingExpanded} onClick={() => { onThinkingExpandedChange(!thinkingExpanded) }} > - {thinkingExpanded ? 'Thinking' : 'Thinking ...'} + {thinkingExpanded ? 'Hide thinking' : 'Show thinking'} + {thinkingExpanded && ( { render() fireEvent.click(screen.getByRole('row', { name: /ASSISTANT/ })) - const toggle = screen.getByRole('button', { name: 'Thinking ...' }) + const toggle = screen.getByRole('button', { name: 'Show thinking' }) + expect(toggle.getAttribute('aria-expanded')).toBe('false') expect(screen.queryByText(thinking)).toBeNull() fireEvent.click(toggle) + expect(screen.getByRole('button', { name: 'Hide thinking' })).toBe(toggle) + expect(toggle.getAttribute('aria-expanded')).toBe('true') expect(toggle.parentElement?.textContent?.length).toBeGreaterThan(thinking.length) })