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(