@messenger-box/tailwind-ui-inbox 10.0.3-alpha.70 → 10.0.3-alpha.72

package/src/components/InboxMessage/message-widgets/CommonMessage.tsx

@@ -14,34 +14,52 @@ interface ICommonMessageProps {
 
 export const CommonMessage = (props: ICommonMessageProps) => {
     const { message, index, onOpen, currentUser } = props;
+
+    // Determine if this is an AI/system message for special styling
+    const isSystemMessage =
+        message?.author?.username?.toLowerCase().includes('ai') ||
+        message?.author?.username?.toLowerCase().includes('assistant') ||
+        message?.author?.username?.toLowerCase().includes('system');
+
     return (
         <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
             <div className="flex-grow flex">
-                <img
-                    className="w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer"
-                    src={message?.author?.picture}
-                    alt={message?.author?.username || 'User avatar'}
-                    onClick={onOpen}
-                />
+                {/* User avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <img
+                        className="w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer"
+                        src={message?.author?.picture}
+                        alt={message?.author?.username || 'User avatar'}
+                        onClick={onOpen}
+                    />
+                )}
                 <div className="flex-grow">
-                    <div className="flex flex-grow mt-1.5">
-                        <p className="text-sm text-gray-600 font-bold">
-                            {message?.author?.familyName && message?.author?.givenName
-                                ? message?.author?.givenName + ' ' + message?.author?.familyName
-                                : message?.author?.username}
-                        </p>
-                        <p className="text-sm text-gray-500 ml-2.5">
-                            {formatDistance(new Date(message?.createdAt), new Date(), {
-                                includeSeconds: true,
-                                addSuffix: true,
-                            })}
-                        </p>
-                    </div>
-                    <p className="text-sm mt-1.5 whitespace-pre-line">{message?.message}</p>
+                    {/* Author header - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex flex-grow mt-1.5">
+                            <p className="text-sm text-gray-600 font-bold">
+                                {message?.author?.familyName && message?.author?.givenName
+                                    ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                    : message?.author?.username}
+                            </p>
+                            <p className="text-sm text-gray-500 ml-2.5">
+                                {formatDistance(new Date(message?.createdAt), new Date(), {
+                                    includeSeconds: true,
+                                    addSuffix: true,
+                                })}
+                            </p>
+                        </div>
+                    )}
+                    {/* <p className="text-sm mt-1.5 whitespace-pre-line">{message?.message}</p> */}
+                    <div
+                        className="text-sm mt-1.5 whitespace-pre-wrap prose prose-sm max-w-none"
+                        dangerouslySetInnerHTML={{ __html: message?.message || '' }}
+                    />
                     {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
                 </div>
             </div>
-            {currentUser?.id !== message?.author?.id && (
+            {/* Flag button - Only show for non-system messages */}
+            {!isSystemMessage && currentUser?.id !== message?.author?.id && (
                 <div className="ml-2">
                     <BsFlag className="text-gray-600 w-6 h-6" />
                 </div>