@tellescope/chat 0.0.74 → 0.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.74",
+  "version": "0.0.77",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,13 +33,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^0.0.74",
-    "@tellescope/react-components": "^0.0.74",
-    "@tellescope/sdk": "^0.0.74",
-    "@tellescope/types-client": "^0.0.74",
-    "@tellescope/types-models": "^0.0.74",
-    "@tellescope/types-utilities": "^0.0.74",
-    "@tellescope/utilities": "^0.0.74",
+    "@tellescope/constants": "^0.0.77",
+    "@tellescope/react-components": "^0.0.77",
+    "@tellescope/sdk": "^0.0.77",
+    "@tellescope/types-client": "^0.0.77",
+    "@tellescope/types-models": "^0.0.77",
+    "@tellescope/types-utilities": "^0.0.77",
+    "@tellescope/utilities": "^0.0.77",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -50,7 +50,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "5c8f1fe123cf59fb26edb7dade9edd83b0dc1ec4",
+  "gitHead": "f822cc4b665a4de776b27cd89464b2bc48639f4c",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -129,7 +129,8 @@ export const Message = ({
   sentMessageTextStyle=defaultSentTextStyle,
   receivedMessageTextStyle=defaultReceivedTextStyle,
   imageDimensions,
-}: MessageProps) => {
+  style,
+}: MessageProps & Styled) => {
   const session = useResolvedSession()
   const chatUserId = session.userInfo.id
 
@@ -172,10 +173,9 @@ export const Message = ({
   )
 
   return (
-    <Flex style={{ margin: 5, flexWrap: 'nowrap' }}> 
+    <Flex style={{ margin: 5, flexWrap: 'nowrap', ...style }}> 
       {message.senderId !== chatUserId && displayPicture}
       {messageComponent}
-      
       {message.senderId === chatUserId && displayPicture}
     </Flex>
   )
@@ -200,11 +200,10 @@ interface Messages_T extends MessageStyles {
   resolveSenderName?: (room: ChatRoom) => React.ReactNode; 
   messages: LoadedData<ChatMessage[]>,
   chatUserId: string,
-  Header?: React.JSXElementConstructor<MessagesHeaderProps>,
   headerProps?: MessagesHeaderProps,
   imageDimensions?: ImageDimensions,
 }
-export const Messages = ({ 
+export const MessagesWithHeader = ({ 
   resolveSenderName,
   messages, 
   chatUserId, 
@@ -213,11 +212,11 @@ export const Messages = ({
   style,
   imageDimensions,
   ...messageStyles 
-}: Messages_T & Styled) => (
+}: Messages_T & Styled & { Header?: React.JSXElementConstructor<MessagesHeaderProps> }) => (
   <LoadingLinear data={messages} render={messages => (
-    <Flex column flex={1}>
+    <Flex column flex={1} style={{ ...style, overflowY: 'scroll' }}>
       {Header && <Header {...headerProps}/>}
-      <List reverse style={style} items={messages} render={(message, i) => (
+      <List reverse items={messages} render={(message, i) => (
         <Flex column>
           <Message message={message} imageDimensions={imageDimensions} {...messageStyles} />
         </Flex>
@@ -226,6 +225,22 @@ export const Messages = ({
   )}/>
 )
 
+export const Messages = ({ 
+  resolveSenderName,
+  messages, 
+  chatUserId, 
+  headerProps,
+  style,
+  imageDimensions,
+  ...messageStyles 
+}: Messages_T & Styled) => (
+  <LoadingLinear data={messages} render={messages => (
+    <List reverse items={messages} style={style} render={(message) => (
+      <Message message={message} imageDimensions={imageDimensions} {...messageStyles} />
+    )}/>    
+  )}/>
+)
+
 const defaultSidebarStyle: CSSProperties  = {
   borderRadius: 5,
   overflowY: 'auto',
@@ -317,14 +332,16 @@ interface ConversationsProps extends SidebarInfo {
   rooms: LoadedData<ChatRoom[]>;
 }
 export const Conversations = ({ rooms, selectedRoom, onRoomSelect, PreviewComponent=ConversationPreview, style, selectedItemStyle, itemStyle } : ConversationsProps) => {
-
   return ( 
     <LoadingLinear data={rooms} render={rooms =>
-      <List style={style ?? defaultSidebarStyle} items={rooms} onClick={r => onRoomSelect(r.id)} render={(room, { onClick, index }) => 
-        <PreviewWithData key={room.id} room={room} onClick={onClick} selected={selectedRoom === room.id} 
-          selectedStyle={selectedItemStyle} style={itemStyle} PreviewComponent={PreviewComponent}
-        />
-      }/>    
+      <List items={rooms.sort((r1, r2) => new Date(r2.updatedAt).getTime() - new Date(r1.updatedAt).getTime() )} 
+        style={style ?? defaultSidebarStyle} onClick={r => onRoomSelect(r.id)} 
+        render={(room, { onClick, index }) => 
+          <PreviewWithData key={room.id} room={room} onClick={onClick} selected={selectedRoom === room.id} 
+            selectedStyle={selectedItemStyle} style={itemStyle} PreviewComponent={PreviewComponent}
+          />
+        }  
+      />    
     }/>
   )
 }