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

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

@@ -8,6 +8,8 @@ interface SlackLikeMessageGroupProps {
     currentUser: IAuthUser;
     onOpen: (element?: any) => void;
     onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
 }
 
 interface MessageGroupProps {
@@ -16,6 +18,8 @@ interface MessageGroupProps {
     currentUser: IAuthUser;
     onOpen: (element?: any) => void;
     onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
 }
 
 // Utility function to group messages by user and time
@@ -53,7 +57,15 @@ export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinut
     return groups;
 };
 
-const MessageGroup: React.FC<MessageGroupProps> = ({ author, messages, currentUser, onOpen, onMessageClick }) => {
+const MessageGroup: React.FC<MessageGroupProps> = ({
+    author,
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}) => {
     const isOwnMessage = author?.id === currentUser?.id;
     const authorName =
         author?.givenName && author?.familyName
@@ -67,12 +79,22 @@ const MessageGroup: React.FC<MessageGroupProps> = ({ author, messages, currentUs
     };
 
     return (
-        <div className="mb-1 group hover:bg-white hover:bg-opacity-60 -mx-4 px-4 py-1 rounded transition-colors">
-            <div className="flex items-start space-x-2">
+        <div
+            className={`group hover:bg-white hover:bg-opacity-60 rounded transition-colors ${
+                isDesktopView ? 'mb-8 -mx-6 px-6 py-4' : isSmallScreen ? 'mb-4 -mx-2 px-2 py-2' : 'mb-6 -mx-4 px-4 py-3'
+            }`}
+        >
+            <div
+                className={`flex items-start ${
+                    isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'
+                }`}
+            >
                 {/* Avatar - show for all messages */}
                 <div className="flex-shrink-0 mt-0.5">
                     <img
-                        className="w-9 h-9 rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
+                        className={`rounded-lg cursor-pointer hover:opacity-80 transition-opacity ${
+                            isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
+                        }`}
                         src={author?.picture || '/default-avatar.svg'}
                         alt={authorName}
                         onClick={() => onOpen(firstMessage)}
@@ -82,16 +104,18 @@ const MessageGroup: React.FC<MessageGroupProps> = ({ author, messages, currentUs
                     />
                 </div>
 
-                <div className="flex-1 min-w-0">
+                <div className="flex-1 min-w-0 overflow-hidden">
                     {/* Author name and timestamp - show for all messages */}
                     <div className="flex items-center space-x-2 mb-1">
-                        <span className="text-sm font-bold text-gray-900">{authorName}</span>
-                        <span className="text-xs text-gray-500">{formatTime(firstMessage.createdAt)}</span>
-                        {isOwnMessage && <span className="text-xs text-gray-400 italic">(you)</span>}
+                        <span className="text-sm font-semibold text-gray-900 truncate">{authorName}</span>
+                        <span className="text-xs text-gray-500 flex-shrink-0">
+                            {formatTime(firstMessage.createdAt)}
+                        </span>
+                        {isOwnMessage && <span className="text-xs text-gray-400 italic flex-shrink-0">(you)</span>}
                     </div>
 
                     {/* Messages in the group - single line for each message */}
-                    <div className="space-y-1">
+                    <div className="space-y-0.5">
                         {messages.map((message, index) => (
                             <MessageBubble
                                 key={message.id}
@@ -142,23 +166,27 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({
 
     // All messages use the same format (Slack style - left aligned)
     return (
-        <div className="py-0.5 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 -mx-1 group">
-            <div className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1  rounded" onClick={handleClick}>
+        <div className="py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group relative">
+            <div
+                className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded"
+                onClick={handleClick}
+            >
                 {/* Show timestamp on hover */}
-                <span className="text-xs text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity float-right ml-2">
+                <span className="text-xs text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity absolute right-1 sm:right-2 top-1">
                     {formatTime(message.createdAt)}
                 </span>
 
                 {message.message && (
-                    <span className="whitespace-pre-wrap break-words leading-relaxed">{message.message}</span>
+                    <div className="whitespace-pre-wrap break-words leading-relaxed pr-12 sm:pr-16">
+                        {message.message}
+                    </div>
                 )}
 
                 {message.files?.totalCount > 0 && (
-                    <div className="mt-1 clear-both">
+                    <div className="mt-2 pr-12 sm:pr-16">
                         <FilesList uploaded files={message.files.data} />
                     </div>
                 )}
-                <div className={`${navigator.userAgent.includes('Firefox') ? 'mt-1' : ''} clear-both`}></div>
 
                 {/* Show delivery status for own messages */}
                 {/* {isOwnMessage && message.isDelivered !== undefined && (
@@ -181,6 +209,8 @@ export const SlackLikeMessageGroup: React.FC<SlackLikeMessageGroupProps> = ({
     currentUser,
     onOpen,
     onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
 }) => {
     // Filter out non-message items (like date strings)
     const actualMessages = messages.filter((msg) => typeof msg !== 'string') as IPost[];
@@ -189,7 +219,7 @@ export const SlackLikeMessageGroup: React.FC<SlackLikeMessageGroupProps> = ({
     const messageGroups = groupMessagesByUserAndTime(actualMessages);
 
     return (
-        <div className="space-y-2">
+        <div className={`min-h-fit ${isDesktopView ? 'space-y-8' : isSmallScreen ? 'space-y-4' : 'space-y-6'}`}>
             {messageGroups.map((group, groupIndex) => {
                 const author = group[0]?.author;
                 return (
@@ -200,6 +230,8 @@ export const SlackLikeMessageGroup: React.FC<SlackLikeMessageGroupProps> = ({
                         currentUser={currentUser}
                         onOpen={onOpen}
                         onMessageClick={onMessageClick}
+                        isDesktopView={isDesktopView}
+                        isSmallScreen={isSmallScreen}
                     />
                 );
             })}