import { Box } from '@rocket.chat/fuselage' ; import * as UiKit from '@rocket.chat/ui-kit' ; import { BlockContext , ElementType } from '@rocket.chat/ui-kit' ; import React , { FC } from 'react' ; import { BlockProps } from '../../utils/BlockProps' ; type ContextElementProps = BlockProps < UiKit . ContextBlock > ; export const ContextElementItem = ( { element , surfaceRenderer , index } ) => { const renderedElement = surfaceRenderer . renderContext ( element , BlockContext . CONTEXT , undefined , index ) ; if ( ! renderedElement ) { return null ; } switch ( element . type ) { case ElementType . PLAIN_TEXT : case ElementType . MARKDOWN : return ( < Box is = 'span' withTruncatedText fontScale = 'c1' color = 'info' margin = { 4 } > { renderedElement } < /Box>); default : return < > { renderedElement } < />; } } ;