@tellescope/chat 0.0.58 → 0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.58",
+  "version": "0.0.61",
   "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.58",
-    "@tellescope/react-components": "^0.0.58",
-    "@tellescope/sdk": "^0.0.58",
-    "@tellescope/types-client": "^0.0.58",
-    "@tellescope/types-models": "^0.0.58",
-    "@tellescope/types-utilities": "^0.0.58",
-    "@tellescope/utilities": "^0.0.58",
+    "@tellescope/constants": "^0.0.61",
+    "@tellescope/react-components": "^0.0.61",
+    "@tellescope/sdk": "^0.0.61",
+    "@tellescope/types-client": "^0.0.61",
+    "@tellescope/types-models": "^0.0.61",
+    "@tellescope/types-utilities": "^0.0.61",
+    "@tellescope/utilities": "^0.0.61",
     "@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": "62c6def8118570898eebf960a615baca605f17c7",
+  "gitHead": "6ece184f7d132d52dc5b702febde55a6bd86446b",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -20,6 +20,8 @@ import {
   useChats,
   useChatRoomDisplayInfo,
   ChatRoomDisplayInfo,
+  SecureImage,
+  ImageDimensions,
 } from "@tellescope/react-components"
 
 import {
@@ -152,32 +154,53 @@ export const Message = ({
   const textBGStyle = message.senderId === chatUserId ? sentMessageStyle : receivedMessageStyle
   const textStyle = message.senderId === chatUserId ? sentMessageTextStyle : receivedMessageTextStyle
 
+  if (!message.message) {
+    textBGStyle.backgroundColor = undefined
+  }
+
+  const messageComponent = IN_REACT_WEB ? (
+    <Typography component="div" style={{ ...textStyle, ...textBGStyle }}>
+      {message.message}
+    </Typography>
+  ) : (
+    <Flex style={{ ...textBGStyle }}>
+      <Typography component="div" style={{ ...textStyle }}>
+        {message.message}
+      </Typography>   
+    </Flex>
+  )
+
   return (
     <Flex style={{ margin: 5 }}> 
       {message.senderId !== chatUserId && displayPicture}
-      {IN_REACT_WEB ? (
-        <Typography component="div" style={{ ...textStyle, ...textBGStyle }}>
-          {message.message}
-        </Typography>   
-      )
-      : (
-        <Flex style={{ ...textBGStyle }}>
-          <Typography component="div" style={{ ...textStyle }}>
-            {message.message}
-          </Typography>   
-        </Flex>
-      )}
+      {messageComponent}
       {message.senderId === chatUserId && displayPicture}
     </Flex>
   )
 }
 
+export const MessageAttachments = ({ message, chatUserId, imageDimensions } : { message: ChatMessage, chatUserId: string, imageDimensions?: ImageDimensions }) => {
+  if (!message.attachments) return null
+  if (message.attachments.length === 0) return null
+
+  return (
+    <Flex column alignSelf={message.senderId === chatUserId ? "flex-end" : "flex-start"}>
+      {message.attachments.filter(a => a.type === 'image').map(a => (
+        <Flex style={{ margin: 10 }}>
+        <SecureImage key={a.secureName} secureName={a.secureName} alt="image attachment" {...imageDimensions} />
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+
 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 = ({ 
   resolveSenderName,
@@ -186,13 +209,19 @@ export const Messages = ({
   Header=MessagesHeader,
   headerProps,
   style,
+  imageDimensions,
   ...messageStyles 
 }: Messages_T & Styled) => (
   <LoadingLinear data={messages} render={messages => (
     <Flex column flex={1}>
       {Header && <Header {...headerProps}/>}
       <List reverse style={style} items={messages} render={message => (
-        <Message key={message.id} message={message} {...messageStyles}/>
+        <Flex column>
+          <Message key={message.id} message={message} {...messageStyles} />
+          {!!message.attachments && message.attachments.length > 0 && 
+            <MessageAttachments message={message} chatUserId={chatUserId} imageDimensions={imageDimensions} />
+          }
+        </Flex>
       )}/>    
     </Flex>
   )}/>