@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Box, Menu, MenuItem, Skeleton, Slide, Typography } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import Image from 'next/image'
@@ -43,6 +43,13 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 		setAnchorEl(null)
 	}
 
+	const fileName = useMemo(() => {
+		if (!props.message.file) return ''
+		const matches = (props.message.file as string).match(/air-messages\/(.+?)\.(.+?)\?/)
+		if (!matches) return ''
+		return `${matches[1]}.${matches[2]}`
+	}, [])
+
 	const resend = async () => {
 		props.setResendValue(props.message.content)
 		if (props.message.file !== null) {
@@ -405,7 +412,7 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 												display: 'flex',
 												alignItems: 'end',
 												flexDirection: 'column',
-                        gap: '5px',
+												gap: '5px',
 											}}
 										>
 											<Box display={'flex'}>
@@ -468,14 +475,7 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 													</Box>
 
 													<Markdown
-														content={
-															(
-																props.message
-																	.file as string
-															).match(
-																/air-messages\/(.+?)\.(.+?)?/
-															)![1]
-														}
+														content={fileName}
 														theme={theme}
 													/>
 												</Box>