diff --git a/src/components/assistant-thinking.tsx b/src/components/assistant-thinking.tsx index 9181d8c43..991ee0399 100644 --- a/src/components/assistant-thinking.tsx +++ b/src/components/assistant-thinking.tsx @@ -1,6 +1,8 @@ +import { __ } from '@wordpress/i18n'; + export function MessageThinking() { return ( -
+
{ +export const Message = ( { children, id, isUser, className }: MessageProps ) => { const [ cliOutput, setCliOutput ] = useState< string | null >( null ); const [ cliStatus, setCliStatus ] = useState< 'success' | 'error' | null >( null ); const [ cliTime, setCliTime ] = useState< string | null >( null ); @@ -158,11 +159,19 @@ export const Message = ( { children, isUser, className }: MessageProps ) => { ) } >
+
+ + { isUser ? __( 'Your message' ) : __( 'Studio Assistant' ) }, + +
{ typeof children === 'string' ? (
{ children } @@ -185,12 +194,12 @@ const AuthenticatedView = memo( } ) => ( <> { messages.map( ( message, index ) => ( - + { message.content } ) ) } { isAssistantThinking && ( - + ) } @@ -199,7 +208,7 @@ const AuthenticatedView = memo( ); const UnauthenticatedView = ( { onAuthenticate }: { onAuthenticate: () => void } ) => ( - +
{ __( 'Hold up!' ) }
{ __( 'You need to log in to your WordPress.com account to use the assistant.' ) } diff --git a/src/components/icons/assistant.tsx b/src/components/icons/assistant.tsx index 7e62853c7..ea885b105 100644 --- a/src/components/icons/assistant.tsx +++ b/src/components/icons/assistant.tsx @@ -1,10 +1,16 @@ +import { ReactSVG, SVGProps } from 'react'; + interface AssistantIconProps { size?: number; } -export function AssistantIcon( { size = 14 }: AssistantIconProps ) { +export function AssistantIcon( { + size = 14, + 'aria-hidden': ariaHidden, +}: AssistantIconProps & SVGProps< ReactSVG > ) { return (