@@ -29,11 +29,7 @@ interface IMessagesList {
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
 }
 
-export const UserMessage = React.memo(function UserMessage({
-	setCurrentSrc,
-	setModal,
-	...props
-}: IMessagesList) {
+export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setModal, ...props }: IMessagesList) {
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
 	const open = Boolean(anchorEl)
 	const desktop = props.device === 'desktop'
@@ -124,9 +120,7 @@ export const UserMessage = React.memo(function UserMessage({
 
 							<Box display='flex' justifyContent='end'>
 								{props.message.file ? (
-									/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg|\.wav/.test(
-										props.message.file as string
-									) ? (
+									/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg|\.wav/.test(props.message.file as string) ? (
 										<Box
 											sx={{
 												display: 'flex',
@@ -139,48 +133,30 @@ export const UserMessage = React.memo(function UserMessage({
 											<Box sx={{ position: 'relative' }}>
 												<Image
 													onClick={() => {
-														if (!props.message.file)
-															return
-														setCurrentSrc(
-															props.message.file
-																.toString()
-																.split('?type')[0]
-														)
+														if (!props.message.file) return
+														setCurrentSrc(props.message.file.toString().split('?type')[0])
 														setModal(true)
 													}}
-													onLoadingComplete={() =>
-														setLoaded(true)
-													}
+													onLoadingComplete={() => setLoaded(true)}
 													style={{
 														objectFit: 'contain',
 														height: '100%',
 														width: '100%',
 														borderRadius: '13px',
 														cursor: 'pointer',
-														opacity: loaded
-															? '100%'
-															: '0%',
+														opacity: loaded ? '100%' : '0%',
 														minWidth: '100px',
 														minHeight: '100px',
 													}}
 													width={500}
 													height={500}
-													src={
-														props.message.file
-															.toString()
-															.split('?type')[0]
-													}
-													alt={
-														'К сожалению, изображение не загрузилось'
-													}
+													src={props.message.file.toString().split('?type')[0]}
+													alt={'К сожалению, изображение не загрузилось'}
 												/>
 												{!loaded && (
 													<Skeleton
 														sx={{
-															background:
-																theme === 'dark'
-																	? '#2d2d2f'
-																	: '#EFF0F2',
+															background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
 															position: 'absolute',
 															top: '0',
 															left: '0',
@@ -196,27 +172,12 @@ export const UserMessage = React.memo(function UserMessage({
 											<Box display='flex'>
 												<Box marginRight={1}>
 													<Box
-														aria-controls={
-															open
-																? 'message-menu'
-																: undefined
-														}
+														aria-controls={open ? 'message-menu' : undefined}
 														aria-haspopup='true'
-														aria-expanded={
-															open ? 'true' : undefined
-														}
+														aria-expanded={open ? 'true' : undefined}
 													>
-														<TooltipCustom
-															title={'Открыть меню'}
-														>
-															<button
-																className={
-																	styles.button
-																}
-																onClick={
-																	handleClick
-																}
-															>
+														<TooltipCustom title={'Открыть меню'}>
+															<button className={styles.button} onClick={handleClick}>
 																<svg
 																	width='22'
 																	height='22'
@@ -271,23 +232,13 @@ export const UserMessage = React.memo(function UserMessage({
 														onClick={handleClose}
 														sx={{
 															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
+																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
 																color: '#8280FF',
-																borderRadius:
-																	'15px',
+																borderRadius: '15px',
 															},
 															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius:
-																	'15px',
+																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+																borderRadius: '15px',
 															},
 														}}
 													>
@@ -297,15 +248,11 @@ export const UserMessage = React.memo(function UserMessage({
 																fontSize: '15px',
 																fontWeight: '500',
 																display: 'flex',
-																alignItems:
-																	'center',
+																alignItems: 'center',
 																gap: '10px',
 															}}
 															onClick={() => {
-																copy(
-																	props.message
-																		.content
-																)
+																copy(props.message.content)
 															}}
 														>
 															<svg
@@ -345,19 +292,11 @@ export const UserMessage = React.memo(function UserMessage({
 																fontSize: '15px',
 																fontWeight: '500',
 																display: 'flex',
-																alignItems:
-																	'center',
+																alignItems: 'center',
 																gap: '5px',
 															}}
 															onClick={() => {
-																if (
-																	props.deleteMessage
-																)
-																	props.deleteMessage(
-																		props
-																			.message
-																			.uid
-																	)
+																if (props.deleteMessage) props.deleteMessage(props.message.uid)
 															}}
 														>
 															<svg
@@ -389,35 +328,30 @@ export const UserMessage = React.memo(function UserMessage({
 															height={20}
 															width={20}
 															alt='1'
-															src={
-																'/svg/important.svg'
-															}
+															src={'/svg/important.svg'}
 														/>
 													)}
 												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content
-																.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
+												{props.message.content && props.message.content.length > 0 && (
+													<Typography
+														className='smallScroll'
+														sx={{
+															overflowY: 'scroll',
+															padding: '10px 15px',
+															backgroundColor: '#7F7DF3',
+															borderRadius: '13px',
+															color: '#FFFFFF',
+															lineHeight: '21px',
+															fontSize: '15px',
+															fontWeight: '400px',
+															marginTop: 0.4,
+															textAlign: 'left',
+															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
+														}}
+													>
+														{props.message.content}
+													</Typography>
+												)}
 											</Box>
 										</Box>
 									) : (
@@ -433,11 +367,7 @@ export const UserMessage = React.memo(function UserMessage({
 												<Box
 													onClick={() => {
 														if (props.message.file) {
-															window.open(
-																props.message
-																	.file as string,
-																'_blank'
-															)
+															window.open(props.message.file as string, '_blank')
 														}
 													}}
 													className='smallScroll'
@@ -446,18 +376,13 @@ export const UserMessage = React.memo(function UserMessage({
 														position: 'relative',
 														padding: '15px 23px',
 
-														border: `1px solid ${
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2'
-														}`,
+														border: `1px solid ${theme === 'dark' ? '#303035' : '#EFF0F2'}`,
 
 														boxShadow: 'none',
 														fontSize: '15px',
 														marginTop: 0.5,
 														textAlign: 'left',
-														fontFamily:
-															'Raleway,sans-serif',
+														fontFamily: 'Raleway,sans-serif',
 														borderRadius: '13px',
 														'&  p': {
 															color: 'inherit',
@@ -488,29 +413,18 @@ export const UserMessage = React.memo(function UserMessage({
 														</svg>
 													</Box>
 
-													<Markdown
-														content={fileName}
-														theme={theme}
-													/>
+													<Markdown content={fileName} theme={theme} />
 												</Box>
 											</Box>
 											<Box display='flex'>
 												<Box marginRight={1}>
 													<Box
 														onClick={handleClick}
-														aria-controls={
-															open
-																? 'message-menu'
-																: undefined
-														}
+														aria-controls={open ? 'message-menu' : undefined}
 														aria-haspopup='true'
-														aria-expanded={
-															open ? 'true' : undefined
-														}
+														aria-expanded={open ? 'true' : undefined}
 													>
-														<TooltipCustom
-															title={'Открыть меню'}
-														>
+														<TooltipCustom title={'Открыть меню'}>
 															<svg
 																width='22'
 																height='22'
@@ -545,13 +459,7 @@ export const UserMessage = React.memo(function UserMessage({
 																	stroke='#A4AAB5'
 																	strokeWidth='2'
 																/>
-																<circle
-																	cx='14.5'
-																	cy='4.5'
-																	r='3.5'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
+																<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
 															</svg>
 														</TooltipCustom>
 													</Box>
@@ -564,93 +472,73 @@ export const UserMessage = React.memo(function UserMessage({
 														onClick={handleClose}
 														sx={{
 															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
+																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
 																color: '#8280FF',
-																borderRadius:
-																	'15px',
+																borderRadius: '15px',
 															},
 															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius:
-																	'15px',
+																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+																borderRadius: '15px',
 															},
 														}}
 													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems:
-																	'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(
-																	props.message
-																		.content
-																)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
+														{props.message.content && props.message.content.length > 0 && (
+															<MenuItem
+																autoFocus={false}
+																sx={{
+																	fontSize: '15px',
+																	fontWeight: '500',
+																	display: 'flex',
+																	alignItems: 'center',
+																	gap: '10px',
+																}}
+																onClick={() => {
+																	copy(props.message.content)
+																}}
 															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
+																<svg
+																	width='14'
+																	height='14'
+																	viewBox='0 0 19 19'
+																	fill='none'
+																	xmlns='http://www.w3.org/2000/svg'
+																>
+																	<g id='Group 29094'>
+																		<rect
+																			id='Rectangle 3340'
+																			x='0.85'
+																			y='3.85'
+																			width='14.3'
+																			height='14.3'
+																			rx='2.15'
+																			fill='transparent'
+																			stroke='#8280FF'
+																			strokeWidth='1.7'
+																		/>
+																		<path
+																			id='Vector 40'
+																			d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
+																			stroke='#8280FF'
+																			strokeWidth='1.7'
+																			strokeLinecap='round'
+																			strokeLinejoin='round'
+																		/>
+																	</g>
+																</svg>
+																Копировать
+															</MenuItem>
+														)}
 														<MenuItem
 															autoFocus={false}
 															sx={{
 																fontSize: '15px',
 																fontWeight: '500',
 																display: 'flex',
-																alignItems:
-																	'center',
+																alignItems: 'center',
 																gap: '5px',
 															}}
 															onClick={() => {
-																if (
-																	props.deleteMessage
-																)
-																	props.deleteMessage(
-																		props
-																			.message
-																			.uid
-																	)
+																if (props.deleteMessage) props.deleteMessage(props.message.uid)
 															}}
 														>
 															<svg
@@ -682,35 +570,30 @@ export const UserMessage = React.memo(function UserMessage({
 															height={20}
 															width={20}
 															alt='1'
-															src={
-																'/svg/important.svg'
-															}
+															src={'/svg/important.svg'}
 														/>
 													)}
 												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content
-																.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
+												{props.message.content && props.message.content.length > 0 && (
+													<Typography
+														className='smallScroll'
+														sx={{
+															overflowY: 'scroll',
+															padding: '10px 15px',
+															backgroundColor: '#7F7DF3',
+															borderRadius: '13px',
+															color: '#FFFFFF',
+															lineHeight: '21px',
+															fontSize: '15px',
+															fontWeight: '400px',
+															marginTop: 0.4,
+															textAlign: 'left',
+															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
+														}}
+													>
+														{props.message.content}
+													</Typography>
+												)}
 											</Box>
 										</Box>
 									)
@@ -723,23 +606,16 @@ export const UserMessage = React.memo(function UserMessage({
 									>
 										<Box marginRight={1}>
 											<Box
-												aria-controls={
-													open ? 'message-menu' : undefined
-												}
+												aria-controls={open ? 'message-menu' : undefined}
 												aria-haspopup='true'
-												aria-expanded={
-													open ? 'true' : undefined
-												}
+												aria-expanded={open ? 'true' : undefined}
 												sx={{
 													position: 'sticky',
 													top: '20px',
 												}}
 											>
 												<TooltipCustom title={'Открыть меню'}>
-													<button
-														className={styles.button}
-														onClick={handleClick}
-													>
+													<button className={styles.button} onClick={handleClick}>
 														<svg
 															width='22'
 															height='22'
@@ -774,13 +650,7 @@ export const UserMessage = React.memo(function UserMessage({
 																stroke='#A4AAB5'
 																strokeWidth='2'
 															/>
-															<circle
-																cx='14.5'
-																cy='4.5'
-																r='3.5'
-																stroke='#A4AAB5'
-																strokeWidth='2'
-															/>
+															<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
 														</svg>
 													</button>
 												</TooltipCustom>
@@ -794,18 +664,12 @@ export const UserMessage = React.memo(function UserMessage({
 												onClick={handleClose}
 												sx={{
 													'& .MuiMenu-list': {
-														backgroundColor:
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2',
+														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
 														color: '#8280FF',
 														borderRadius: '15px',
 													},
 													'& .MuiPopover-paper': {
-														backgroundColor:
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2',
+														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
 														borderRadius: '15px',
 													},
 												}}
@@ -864,10 +728,7 @@ export const UserMessage = React.memo(function UserMessage({
 														gap: '5px',
 													}}
 													onClick={() => {
-														if (props.deleteMessage)
-															props.deleteMessage(
-																props.message.uid
-															)
+														if (props.deleteMessage) props.deleteMessage(props.message.uid)
 													}}
 												>
 													<svg
@@ -903,28 +764,26 @@ export const UserMessage = React.memo(function UserMessage({
 												/>
 											)}
 										</TooltipCustom>
-										<Typography
-											className='smallScroll'
-											sx={{
-												overflowY: 'scroll',
-												padding: '10px 15px',
-												backgroundColor: '#7F7DF3',
-												borderRadius: '13px',
-												color: '#FFFFFF',
-												lineHeight: '21px',
-												fontSize: '15px',
-												fontWeight: '400px',
-												marginTop: 0.4,
-												textAlign: 'left',
-												whiteSpace:
-													props.message.content.length > 30
-														? 'pre-wrap'
-														: 'pre',
-											}}
-										>
-											{/*<Markdown content={props.message.content} />*/}
-											{props.message.content}
-										</Typography>
+										{props.message.content && props.message.content.length > 0 && (
+											<Typography
+												className='smallScroll'
+												sx={{
+													overflowY: 'scroll',
+													padding: '10px 15px',
+													backgroundColor: '#7F7DF3',
+													borderRadius: '13px',
+													color: '#FFFFFF',
+													lineHeight: '21px',
+													fontSize: '15px',
+													fontWeight: '400px',
+													marginTop: 0.4,
+													textAlign: 'left',
+													whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
+												}}
+											>
+												{props.message.content}
+											</Typography>
+										)}
 									</Box>
 								)}
 							</Box>