diff --git a/web/src/components/AssistantChat/messages/MessageActions.test.tsx b/web/src/components/AssistantChat/messages/MessageActions.test.tsx index 3765d093..f4767e45 100644 --- a/web/src/components/AssistantChat/messages/MessageActions.test.tsx +++ b/web/src/components/AssistantChat/messages/MessageActions.test.tsx @@ -140,6 +140,23 @@ describe('MessageActions', () => { expect(screen.queryByRole('button', { name: 'Rewind' })).toBeNull() }) + it('renders Fork and Rewind as compact icon actions', () => { + renderActions({ + align: 'end', + copyText: 'body', + showFork: true, + showRewind: true, + onFork: async () => {}, + onRewind: async () => {} + }) + + for (const name of ['Fork', 'Rewind']) { + const button = screen.getByRole('button', { name }) + expect(button.className.split(' ')).toContain('w-5') + expect(button.querySelector('svg')).not.toBeNull() + } + }) + it('shows Fork confirm dialog and calls onFork only after confirm', async () => { const onFork = vi.fn(async () => {}) renderActions({ align: 'start', copyText: 'body', showFork: true, onFork }) diff --git a/web/src/components/AssistantChat/messages/MessageActions.tsx b/web/src/components/AssistantChat/messages/MessageActions.tsx index 37e0eb17..28cf0a0a 100644 --- a/web/src/components/AssistantChat/messages/MessageActions.tsx +++ b/web/src/components/AssistantChat/messages/MessageActions.tsx @@ -1,7 +1,7 @@ import * as Popover from '@radix-ui/react-popover' import { useState } from 'react' import { useAuiState } from '@assistant-ui/react' -import { CheckIcon, CopyIcon, InfoIcon } from '@/components/icons' +import { CheckIcon, CopyIcon, ForkIcon, InfoIcon, RewindIcon } from '@/components/icons' import { useCopyToClipboard } from '@/hooks/useCopyToClipboard' import { useTranslation } from '@/lib/use-translation' import { MessageMetadata, buildMessageMetadataLabels, type MessageMetadataProps } from './MessageMetadata' @@ -65,10 +65,10 @@ export function MessageActions({ title={t('message.fork')} aria-label={t('message.fork')} disabled={actionsLocked} - className="flex h-5 items-center rounded px-1 text-[11px] text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)] disabled:opacity-40" + className="flex h-5 w-5 items-center justify-center rounded text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)] disabled:opacity-40" onClick={() => setForkOpen(true)} > - {t('message.fork')} + ) : null} {showRewind && onRewind ? ( @@ -77,10 +77,10 @@ export function MessageActions({ title={t('message.rewind')} aria-label={t('message.rewind')} disabled={actionsLocked} - className="flex h-5 items-center rounded px-1 text-[11px] text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)] disabled:opacity-40" + className="flex h-5 w-5 items-center justify-center rounded text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)] disabled:opacity-40" onClick={() => setRewindOpen(true)} > - {t('message.rewind')} + ) : null} diff --git a/web/src/components/icons.tsx b/web/src/components/icons.tsx index 7e65aedf..67da6a2a 100644 --- a/web/src/components/icons.tsx +++ b/web/src/components/icons.tsx @@ -73,6 +73,31 @@ export function InfoIcon(props: IconProps) { ) } +export function ForkIcon(props: IconProps) { + return createIcon( + <> + + + + + + , + props, + 2 + ) +} + +export function RewindIcon(props: IconProps) { + return createIcon( + <> + + + , + props, + 2 + ) +} + /** Composer schedule-send clock — circle + hands (matches ComposerButtons). */ export function ScheduleIcon(props: IconProps) { return createIcon(