update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dialogue-chatbox",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "main": "./dist-components/index.umd.js",
   "module": "./dist-components/index.es.js",

src/components/body.tsx

@@ -39,6 +39,18 @@ const Body = () => {
       return <CardsMessage key={`${msg.createdAt}+${index}`} message={msg} />
     }
 
+    if (msg.type === 'image') {
+      return (
+        <Message message={msg}>
+          <img
+            src={msg.url}
+            alt=''
+            className='rounded-md object-cover h-full w-full'
+          />
+        </Message>
+      )
+    }
+
     return <Message key={`${msg.createdAt}+${index}`} message={msg} />
   }
 

src/components/message.tsx

@@ -50,7 +50,7 @@ const Message = ({ message, children }: Props) => {
               backgroundColor: isLeft ? undefined : customStyles?.color,
             }}
           >
-            {message.message}
+            {message.message.trim().length ? message.message : null}
             {children}
           </div>
         </div>

src/types/chatbox.ts

@@ -27,6 +27,8 @@ export type TMessage<T = any> = {
   createdAt: string
   isTest?: boolean
   adminId?: string
+  type?: 'image' | 'text'
+  url?: string
 }
 
 export type TButtonsMessage = TMessage<TButton>