@tellescope/chat 1.23.4 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.23.4",
+  "version": "1.24.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,13 +34,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^1.23.4",
-    "@tellescope/react-components": "^1.23.4",
-    "@tellescope/sdk": "^1.23.4",
-    "@tellescope/types-client": "^1.23.4",
-    "@tellescope/types-models": "^1.23.4",
+    "@tellescope/constants": "^1.24.0",
+    "@tellescope/react-components": "^1.24.0",
+    "@tellescope/sdk": "^1.24.0",
+    "@tellescope/types-client": "^1.24.0",
+    "@tellescope/types-models": "^1.24.0",
     "@tellescope/types-utilities": "^1.5.1",
-    "@tellescope/utilities": "^1.23.4",
+    "@tellescope/utilities": "^1.24.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -51,7 +51,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "082ddd0f17665871fd0fba7abfe74b64db6a83a5",
+  "gitHead": "719e54ce57bdb212d4d6eae9a272218948884abb",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -48,6 +48,7 @@ import {
 
 import {
   ActivityOptions,
+  formatted_date,
   user_display_name, user_is_active,
 } from "@tellescope/utilities"
 
@@ -132,6 +133,7 @@ interface MessageProps extends MessageStyles {
   message: ChatMessage,
   iconSize?: number,
   imageDimensions?: ImageDimensions,
+  showDate?: boolean,
 }
 export const Message = ({ 
   message, 
@@ -146,6 +148,7 @@ export const Message = ({
   receivedMessageTextStyle=defaultReceivedTextStyle,
   imageDimensions,
   style,
+  showDate,
 }: MessageProps & Styled) => {
   const session = useResolvedSession()
   const chatUserId = session.userInfo.id
@@ -215,10 +218,19 @@ export const Message = ({
   )
 
   return (
-    <Flex style={{ margin: 5, flexWrap: 'nowrap', ...style }}> 
-      {message.senderId !== chatUserId && displayPicture}
-      {messageComponent}
-      {message.senderId === chatUserId && displayPicture}
+    <Flex column>
+      {showDate && (
+        <Flex alignSelf="center">
+          {formatted_date(new Date(message.createdAt))}
+        </Flex>
+      )
+
+      }
+      <Flex style={{ margin: 5, flexWrap: 'nowrap', ...style }}> 
+        {message.senderId !== chatUserId && displayPicture}
+        {messageComponent}
+        {message.senderId === chatUserId && displayPicture}
+      </Flex>
     </Flex>
   )
 }
@@ -253,7 +265,7 @@ export const MessageAttachments = ({ message, chatUserId, imageDimensions } : {
 
 export type MessageTheme = { theme?: string }
 
-interface Messages_T extends MessageStyles {
+export interface Messages_T extends MessageStyles {
   resolveSenderName?: (room: ChatRoom) => React.ReactNode; 
   messages: LoadedData<ChatMessage[]>,
   chatUserId: string,
@@ -271,16 +283,29 @@ export const MessagesWithHeader = ({
   imageDimensions,
   ...messageStyles 
 }: Omit<Messages_T, 'markRead'> & Styled & { Header?: React.JSXElementConstructor<MessagesHeaderProps> }) => (
-  <LoadingLinear data={messages} render={messages => (
-    <Flex column flex={1} style={{ ...style, overflowY: 'scroll' }}>
-      {Header && <Header {...headerProps}/>}
-      <List reverse items={messages} render={(message, i) => (
-        <Flex column>
-          <Message message={message} imageDimensions={imageDimensions} {...messageStyles} />
+  <LoadingLinear data={messages} render={messages => {
+      let lastDate = 0
+      return (
+        <Flex column flex={1} style={{ ...style, overflowY: 'scroll' }}>
+          {Header && <Header {...headerProps}/>}
+            <List reverse items={messages} render={(message) => {
+              // show after 10+ minute exchanges 
+              const timestamp = new Date(message.createdAt).getTime()
+              const shouldShowDate = timestamp > (lastDate + 1000 * 60 * 10 )
+              if (shouldShowDate) {
+                lastDate = timestamp
+              }
+              return (
+                <Flex column>
+                  <Message message={message} imageDimensions={imageDimensions} showDate={shouldShowDate} {...messageStyles} />
+                </Flex>
+              )
+            }}
+          />
         </Flex>
-      )}/>    
-    </Flex>
-  )}/>
+      )}
+    }
+    />
 )
 
 export const Messages = ({ 
@@ -312,13 +337,30 @@ export const Messages = ({
     .catch(console.error)
   }, [session, markRead, messages, markReadRef, updateRoom])
 
-
   return (
-    <LoadingLinear data={messages} render={messages => (
-      <List reverse items={messages} style={style} render={(message) => (
-        <Message message={message} imageDimensions={imageDimensions} {...messageStyles} />
-      )}/>    
-    )}/>
+    <LoadingLinear data={messages} render={_messages => {
+      const sorted = _messages.sort((m1, m2) => new Date(m1.createdAt).getTime() - new Date(m2.createdAt).getTime())
+      
+      let lastDate = 0
+
+      const showDateForMessage = {} as Record<string, boolean>
+      for (const message of sorted) {
+        const timestamp = new Date(message.createdAt).getTime()
+        const showDate = timestamp > (lastDate + 1000 * 60 * 10 )
+        if (showDate) {
+          lastDate = timestamp
+        }
+        showDateForMessage[message.id] = showDate
+      }
+       
+      return (
+        <List items={sorted} 
+          style={style} render={(message) => (
+            <Message message={message} imageDimensions={imageDimensions} showDate={showDateForMessage[message.id]} {...messageStyles} />
+          )}
+        />    
+      )}}
+    />
   )
 }
 
@@ -361,7 +403,6 @@ export const resolve_chat_room_name = (room: ChatRoom, displayInfo: { [index: st
     return user_display_name(displayInfo[room?.enduserIds?.[0] ?? room.creator ?? ''])
   }
   if (userType === 'enduser') {
-    console.log(room.recentSender, room.creator, displayInfo[room.creator])
     return user_display_name(displayInfo[room?.userIds?.[0] ?? room.creator ?? ''])
   }
   return ''