Add support for "error" status to MessageBox component

README.md

@@ -137,7 +137,7 @@ import { MessageBox } from 'react-chat-elements'
 | forwarded               | none       | boolean              | message forward icon                                                                               |
 | replyButton             | none       | boolean              | message reply icon                                                                                 |
 | removeButton            | none       | boolean              | message remove icon                                                                                |
-| status                  | none       | string               | message status info (waiting, sent, received, read)                                                |
+| status                  | none       | string               | message status info (waiting, sent, received, read, error)                                         |
 | notch                   | true       | boolean              | message box notch                                                                                  |
 | avatar                  | none       | url                  | message box avatar url                                                                             |
 | renderAddCmp            | none       | function (component) | adding custom components to message box                                                            |

example/components/MessageListExample.tsx

@@ -40,7 +40,7 @@ function MessageListExample() {
         break
       case 1:
         Addmtype = 'file'
-        setStatus('sent')
+        setStatus('error')
         break
       case 2:
         Addmtype = 'system'

example/utils/MessageTypes.ts

@@ -84,7 +84,7 @@ export const fileMessage: MessageType = {
     },
     size: '100MB',
   },
-  status: 'sent',
+  status: 'error',
   statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',

src/MessageBox/MessageBox.tsx

@@ -16,7 +16,7 @@ import Avatar from '../Avatar/Avatar'
 
 import { RiShareForwardFill } from 'react-icons/ri'
 import { IoIosDoneAll } from 'react-icons/io'
-import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll } from 'react-icons/md'
+import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll, MdError } from 'react-icons/md'
 import { TiArrowForward } from 'react-icons/ti'
 
 import { format } from 'timeago.js'
@@ -193,6 +193,8 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, sty
                   {props.status === 'received' && <IoIosDoneAll />}
 
                   {props.status === 'read' && <MdDoneAll color='#4FC3F7' />}
+
+                  {props.status === 'error' && <MdError color='#FF0B0B' />}
                 </span>
               )}
             </div>

src/type.d.ts

@@ -172,7 +172,7 @@ export interface IMessage {
   forwarded: boolean
   replyButton: boolean
   removeButton: boolean
-  status: 'waiting' | 'sent' | 'received' | 'read'
+  status: 'waiting' | 'sent' | 'received' | 'read' | 'error'
   statusTitle?: string
   notch: boolean
   copiableDate?: boolean