Studio: Add UI for clearing chat messages

src/components/ai-input.tsx

@@ -1,7 +1,8 @@
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, moreVertical, keyboardReturn } from '@wordpress/icons';
+import { Icon, moreVertical, keyboardReturn, reset } from '@wordpress/icons';
 import React, { useRef, useEffect } from 'react';
-import Button from './button';
+import { getIpcApi } from '../lib/get-ipc-api';
 import { AssistantIcon } from './icons/assistant';
 
 interface AIInputProps {
@@ -79,6 +80,21 @@ export const AIInput = ( {
 		return isAssistantThinking ? __( 'Generating...' ) : __( 'What would you like to learn?' );
 	};
 
+	const handleClearConversation = async () => {
+		const CLEAR_CONVERSATION_BUTTON_INDEX = 0;
+		const CANCEL_BUTTON_INDEX = 1;
+
+		const { response } = await getIpcApi().showMessageBox( {
+			message: __( 'Are you sure you want to clear the conversation?' ),
+			buttons: [ __( 'Ok' ), __( 'Cancel' ) ],
+			cancelId: CANCEL_BUTTON_INDEX,
+		} );
+
+		if ( response === CLEAR_CONVERSATION_BUTTON_INDEX ) {
+			clearInput();
+		}
+	};
+
 	return (
 		<div className="px-8 py-5 bg-white flex items-center border border-gray-200">
 			<div className="flex w-full border border-gray-300 rounded-sm focus-within:border-a8c-blueberry">
@@ -101,16 +117,26 @@ export const AIInput = ( {
 						<Icon icon={ keyboardReturn } size={ 13 } fill="#cccccc" />
 					</div>
 				) }
-				<div className="flex items-end py-2 ltr:mr-2 rtl:ml-1">
-					<Button
-						disabled={ disabled }
-						aria-label="menu"
-						className="py-2 px-1 cursor-pointer"
-						onClick={ clearInput }
-					>
-						<Icon icon={ moreVertical } size={ 22 } />
-					</Button>
-				</div>
+				<DropdownMenu icon={ moreVertical } label="Assistant Menu" className="p-2">
+					{ ( { onClose }: { onClose: () => void } ) => (
+						<>
+							<MenuGroup>
+								<MenuItem
+									data-testid="clear-conversation-button"
+									onClick={ () => {
+										handleClearConversation();
+										onClose();
+									} }
+								>
+									<Icon className="text-red-600" icon={ reset } />
+									<span className="ltr:pl-2 rtl:pl-2 text-red-600">
+										{ __( 'Clear conversation' ) }
+									</span>
+								</MenuItem>
+							</MenuGroup>
+						</>
+					) }
+				</DropdownMenu>
 			</div>
 		</div>
 	);

src/components/tests/ai-input.test.tsx

@@ -1,7 +1,15 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { AIInput } from '../ai-input';
 
+const mockShowMessageBox = jest.fn();
+jest.mock( '../../lib/get-ipc-api', () => ( {
+	getIpcApi: () => ( {
+		openURL: jest.fn(),
+		generateProposedSitePath: jest.fn(),
+		showMessageBox: mockShowMessageBox,
+	} ),
+} ) );
+
 describe( 'AIInput Component', () => {
 	let handleSend: jest.Mock;
 	let handleKeyDown: jest.Mock;
@@ -76,4 +84,21 @@ describe( 'AIInput Component', () => {
 		expect( setInput ).toHaveBeenCalledWith( longText );
 		expect( textarea.scrollTop ).toBe( textarea.scrollHeight - textarea.clientHeight );
 	} );
+
+	it( 'clears input and chat history when clear conversation button is pressed', async () => {
+		const textarea = getInput();
+		const longText = 'Line\n'.repeat( 100 );
+		fireEvent.change( textarea, { target: { value: longText } } );
+		const assistantMenu = screen.getByLabelText( 'Assistant Menu' );
+		fireEvent.click( assistantMenu );
+
+		const clearConversationButton = screen.getByTestId( 'clear-conversation-button' );
+		mockShowMessageBox.mockResolvedValueOnce( { response: 0 } );
+		fireEvent.click( clearConversationButton );
+
+		await waitFor( () => {
+			expect( mockShowMessageBox ).toHaveBeenCalled();
+			expect( clearInput ).toHaveBeenCalled();
+		} );
+	} );
 } );

src/components/tests/content-tab-assistant.test.tsx

@@ -76,17 +76,6 @@ describe( 'ContentTabAssistant', () => {
 		expect( textInput.placeholder ).toBe( 'What would you like to learn?' );
 	} );
 
-	test( 'clears input and chat history when MenuIcon is clicked', () => {
-		render( <ContentTabAssistant selectedSite={ runningSite } /> );
-		const textInput = getInput();
-		const menuIcon = screen.getByLabelText( 'menu' );
-		fireEvent.change( textInput, { target: { value: 'Hello, Assistant!' } } );
-		expect( textInput.value ).toBe( 'Hello, Assistant!' );
-		fireEvent.click( menuIcon );
-		expect( textInput.value ).toBe( '' );
-		expect( screen.queryByText( 'Hello, Assistant!' ) ).not.toBeInTheDocument();
-	} );
-
 	test( 'saves and retrieves conversation from localStorage', async () => {
 		const storageKey = `${ runningSite.name }`;
 		localStorage.setItem( storageKey, JSON.stringify( initialMessages ) );