@tellescope/chat 0.0.32 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.32",
+  "version": "0.0.36",
   "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.32",
-    "@tellescope/react-components": "^0.0.32",
-    "@tellescope/sdk": "^0.0.32",
-    "@tellescope/types-client": "^0.0.32",
-    "@tellescope/types-models": "^0.0.32",
-    "@tellescope/types-utilities": "^0.0.32",
-    "@tellescope/utilities": "^0.0.32",
+    "@tellescope/constants": "^0.0.36",
+    "@tellescope/react-components": "^0.0.36",
+    "@tellescope/sdk": "^0.0.36",
+    "@tellescope/types-client": "^0.0.36",
+    "@tellescope/types-models": "^0.0.36",
+    "@tellescope/types-utilities": "^0.0.36",
+    "@tellescope/utilities": "^0.0.36",
     "@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": "2f62f900ab1bc1ce471424d95eafd2c11bbae9f6",
+  "gitHead": "edbbd010db89b775aed1337bf9708e749a8bbb4c",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback, useState, CSSProperties } from "react"
 
+import {
+  DisplayPicture,
+  IN_REACT_WEB,
+} from "@tellescope/react-components"
 import {
   List,
   Flex,
@@ -17,14 +21,18 @@ import {
 import {
   LoadingLinear,
   Resolver,
+  value_is_loaded,
 } from "@tellescope/react-components/lib/esm/loading"
 import {
   useSession,
   useEnduserSession,
+  useResolvedSession,
 } from "@tellescope/react-components/lib/esm/authentication"
 import {
   useChatRooms,
   useChats,
+  useChatRoomDisplayInfo,
+  ChatRoomDisplayInfo,
 } from "@tellescope/react-components/lib/esm/state"
 import {
   useEndusers,
@@ -68,39 +76,48 @@ export {
   user_display_name, // for convenience
 }
 
-const defaultMessagesStyle: CSSProperties = {
-  borderRadius: 5,
+const MESSAGE_BORDER_RADIUS = 25
+
+const defaultSentContainerStyle: CSSProperties = {
+  margin: 5,
 }
-const baseMessageStyle = {
-  borderRadius: 25,
-  paddingRight: 10,
-  paddingLeft: 10,
+const defaultReceivedContainerStyle: CSSProperties = {
   margin: 5,
+}
+
+const baseMessageStyle: CSSProperties = {
+  borderRadius: MESSAGE_BORDER_RADIUS,
   maxWidth: '80%',
+  paddingRight: 10,
+  paddingLeft: 10,
+  paddingTop: 6,
+  paddingBottom: 6,
 }
 const defaultSentStyle: CSSProperties = {
   ...baseMessageStyle,
-  justifyContent: 'flex-end',
   marginLeft: 'auto',
+  marginRight: 5,
   backgroundColor: PRIMARY_HEX,
 }
 const defaultReceivedStyle: CSSProperties = {
   ...baseMessageStyle,
-  justifyContent: 'flex-start',
   marginRight: 'auto',
+  marginLeft: 5,
   backgroundColor: "#444444",
 }
+
 const baseTextStyle = {
   color: "#ffffff",
-  padding: 4,
 }
-const defaultTextSentStyle: CSSProperties = {
+const defaultSentTextStyle = {
   ...baseTextStyle,
-  textAlign: 'right',
+  marginRight: 5,
+  marginLeft: 5,
 }
-const defaultTextReceivedStyle: CSSProperties = {
+const defaultReceivedTextStyle = {
   ...baseTextStyle,
-  textAlign: 'left',
+  marginRight: 5,
+  marginLeft: 5,
 }
 
 export interface MessagesHeaderProps {
@@ -117,16 +134,71 @@ const MessagesHeader = ({ room, resolveSenderName, ...p}: MessagesHeaderProps) =
   </Flex>
 )
 
-interface Messages_T {
+interface MessageStyles {
+  receivedMessageContainerStyle?: CSSProperties,
+  sentMessageContainerStyle?: CSSProperties,
+  receivedMessageStyle?: CSSProperties,
+  receivedMessageTextStyle?: CSSProperties,
+  sentMessageStyle?: CSSProperties,
+  sentMessageTextStyle?: CSSProperties,
+}
+
+interface MessageProps extends MessageStyles {
+  message: ChatMessage,
+  iconSize?: number,
+}
+export const Message = ({ 
+  message, 
+  iconSize=30,
+  sentMessageContainerStyle=defaultSentContainerStyle,
+  receivedMessageContainerStyle=defaultReceivedContainerStyle,
+  sentMessageStyle=defaultSentStyle,
+  receivedMessageStyle=defaultReceivedStyle, 
+  sentMessageTextStyle=defaultSentTextStyle,
+  receivedMessageTextStyle=defaultReceivedTextStyle,
+}: MessageProps) => {
+  const session = useResolvedSession()
+  const chatUserId = session.userInfo.id
+
+  const [displayInfo] = useChatRoomDisplayInfo(message.roomId, session.type)
+  const displayInfoLookup = value_is_loaded(displayInfo) ? displayInfo.value : {} as ChatRoomDisplayInfo
+
+  const displayPicture = (
+    <DisplayPicture 
+      user={displayInfoLookup[message.senderId ?? ''] ?? { id: message.senderId, avatar: '' }}
+      size={iconSize} style={{ position: 'relative' }}
+    />
+  )
+
+  const textBGStyle = message.senderId === chatUserId ? sentMessageStyle : receivedMessageStyle
+  const textStyle = message.senderId === chatUserId ? sentMessageTextStyle : receivedMessageTextStyle
+
+  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>
+      )}
+      {message.senderId === chatUserId && displayPicture}
+    </Flex>
+  )
+}
+
+interface Messages_T extends MessageStyles {
   resolveSenderName?: (room: ChatRoom) => React.ReactNode; 
   messages: LoadedData<ChatMessage[]>,
   chatUserId: string,
   Header?: React.JSXElementConstructor<MessagesHeaderProps>,
   headerProps?: MessagesHeaderProps,
-  receivedMessageStyle?: CSSProperties,
-  receivedMessageTextStyle?: CSSProperties,
-  sentMessageStyle?: CSSProperties,
-  sentMessageTextStyle?: CSSProperties,
 }
 export const Messages = ({ 
   resolveSenderName,
@@ -134,21 +206,14 @@ export const Messages = ({
   chatUserId, 
   Header=MessagesHeader,
   headerProps,
-  style=defaultMessagesStyle,
-  receivedMessageStyle=defaultReceivedStyle, 
-  receivedMessageTextStyle=defaultTextReceivedStyle, 
-  sentMessageStyle=defaultSentStyle,
-  sentMessageTextStyle=defaultTextSentStyle,
+  style,
+  ...messageStyles 
 }: Messages_T & Styled) => (
   <LoadingLinear data={messages} render={messages => (
     <Flex column flex={1}>
       {Header && <Header {...headerProps}/>}
-      <List reverse style={style} items={messages} render={(message) => (
-        <Flex key={message.id} style={message.senderId === chatUserId ? sentMessageStyle : receivedMessageStyle}>
-          <Typography style={message.senderId === chatUserId ? sentMessageTextStyle : receivedMessageTextStyle}>
-            {message.message}
-          </Typography>    
-        </Flex>
+      <List reverse style={style} items={messages} render={message => (
+        <Message key={message.id} message={message} {...messageStyles}/>
       )}/>    
     </Flex>
   )}/>