@tellescope/chat 1.2.5 → 1.3.2

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.2.5",
+  "version": "1.3.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
+  "react-native": "./lib/esm/index.js",
   "types": "./lib/esm/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -33,13 +34,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^1.2.5",
-    "@tellescope/react-components": "^1.2.5",
-    "@tellescope/sdk": "^1.2.5",
-    "@tellescope/types-client": "^1.2.5",
-    "@tellescope/types-models": "^1.2.5",
+    "@tellescope/constants": "^1.3.2",
+    "@tellescope/react-components": "^1.3.2",
+    "@tellescope/sdk": "^1.3.2",
+    "@tellescope/types-client": "^1.3.2",
+    "@tellescope/types-models": "^1.3.2",
     "@tellescope/types-utilities": "^1.2.2",
-    "@tellescope/utilities": "^1.2.5",
+    "@tellescope/utilities": "^1.3.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -50,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": "f1e12f7af228ec1768e3183c16b7164640a4978c",
+  "gitHead": "df1bc04efdaa81af6df1ecb189630bb9b83f5ef2",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -1,16 +1,13 @@
-import React, { useState, CSSProperties, useEffect } from "react"
+import React, { useState, CSSProperties, useEffect, useRef } from "react"
 
 import {
-  AsyncIconButton,
   DisplayPicture,
   IN_REACT_WEB,
   List,
   Flex,
   Badge,
-  SendIcon,
   Styled,
   Typography,
-  TextField,
   LoadingLinear,
   value_is_loaded,
   useSession,
@@ -22,6 +19,7 @@ import {
   ChatRoomDisplayInfo,
   SecureImage,
   ImageDimensions,
+  SecureVideo,
 } from "@tellescope/react-components"
 
 import {
@@ -52,6 +50,7 @@ import {
   Session,
   EnduserSession,
 } from "@tellescope/sdk"
+import { SendMessage } from "./components"
 
 export {
   user_display_name, // for convenience
@@ -114,6 +113,10 @@ interface MessageStyles {
   receivedMessageTextStyle?: CSSProperties,
   sentMessageStyle?: CSSProperties,
   sentMessageTextStyle?: CSSProperties,
+  sentBgColor?: string,
+  sentTextColor?: string,
+  receivedBgColor?: string,
+  receivedTextColor?: string,
 }
 
 interface MessageProps extends MessageStyles {
@@ -124,6 +127,10 @@ interface MessageProps extends MessageStyles {
 export const Message = ({ 
   message, 
   iconSize=30,
+  sentBgColor,
+  sentTextColor,
+  receivedBgColor,
+  receivedTextColor,
   sentMessageStyle=defaultSentStyle,
   receivedMessageStyle=defaultReceivedStyle, 
   sentMessageTextStyle=defaultSentTextStyle,
@@ -143,6 +150,22 @@ export const Message = ({
 
   if (!message.message) {
     textBGStyle.backgroundColor = undefined
+  } else {
+    if (message.senderId === chatUserId) {
+      if (sentBgColor) {
+        textBGStyle.backgroundColor = sentBgColor;
+      }
+      if (sentTextColor) {
+        textBGStyle.color = sentTextColor;
+      }
+    } else {
+      if (receivedBgColor) {
+        textBGStyle.backgroundColor = receivedBgColor;
+      }
+      if (receivedTextColor) {
+        textBGStyle.color = receivedTextColor;
+      }
+    }
   }
 
   const attachments = (
@@ -184,24 +207,38 @@ export const Message = ({
 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 key={a.secureName} style={{ margin: 10 }}>
-          <SecureImage key={a.secureName} secureName={a.secureName} alt="image attachment" {...imageDimensions} />
+        <Flex key={a.secureName} style={{ 
+          marginRight: message.senderId === chatUserId ? 0 : 10, 
+          marginLeft: message.senderId === chatUserId ? 10 : 0, 
+          justifyContent: message.senderId === chatUserId ? "flex-end" : "flex-start",
+        }}>
+          <SecureImage secureName={a.secureName} alt="image attachment" {...imageDimensions} />
+        </Flex>
+      ))}
+      {message.attachments.filter(a => a.type === 'video').map(a=> (
+        <Flex key={a.secureName} style={{ 
+          justifyContent: message.senderId === chatUserId ? "flex-end" : "flex-start",
+        }}>
+          <SecureVideo secureName={a.secureName} {...imageDimensions} />
         </Flex>
       ))}
     </Flex>
   )
 }
 
+export type MessageTheme = { theme?: string }
+
 interface Messages_T extends MessageStyles {
   resolveSenderName?: (room: ChatRoom) => React.ReactNode; 
   messages: LoadedData<ChatMessage[]>,
   chatUserId: string,
   headerProps?: MessagesHeaderProps,
   imageDimensions?: ImageDimensions,
+  markRead?: boolean,
 }
 export const MessagesWithHeader = ({ 
   resolveSenderName,
@@ -212,7 +249,7 @@ export const MessagesWithHeader = ({
   style,
   imageDimensions,
   ...messageStyles 
-}: Messages_T & Styled & { Header?: React.JSXElementConstructor<MessagesHeaderProps> }) => (
+}: 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}/>}
@@ -232,14 +269,37 @@ export const Messages = ({
   headerProps,
   style,
   imageDimensions,
+  markRead,
   ...messageStyles 
-}: Messages_T & Styled) => (
-  <LoadingLinear data={messages} render={messages => (
-    <List reverse items={messages} style={style} render={(message) => (
-      <Message message={message} imageDimensions={imageDimensions} {...messageStyles} />
-    )}/>    
-  )}/>
-)
+}: Messages_T & Styled) => {
+  const session = useResolvedSession()
+  const [, { updateLocalElement: updateRoom }] = useChatRooms()
+  const markReadRef = useRef(false)
+  
+  useEffect(() => {
+    if (!markRead) return
+    if (!value_is_loaded(messages)) return
+    if (messages.value.length === 0) return
+
+    if (markReadRef.current) return
+    markReadRef.current = true
+
+    session.api.chat_rooms.mark_read({ id: messages.value[0].roomId })
+    .then(({ updated }) => {
+      updateRoom(updated.id, updated)
+    })
+    .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} />
+      )}/>    
+    )}/>
+  )
+}
 
 const defaultSidebarStyle: CSSProperties  = {
   borderRadius: 5,
@@ -351,84 +411,6 @@ export const EndusersConversations = ({ enduserId, ...p } : SidebarInfo & { endu
 // deprecated while Conversations relies on useResolvedSession
 export const UsersConversations = ({ userId, ...p } : SidebarInfo & { userId: string }) => <Conversations {...p} rooms={useChatRooms()[0]}/>
 
-interface SendMessage_T {
-  roomId: string,
-  onNewMessage?: (m: ChatMessage) => void;
-  placeholderText?: string;
-  Icon?: React.ElementType<any>;
-  style?: CSSProperties;
-
-  // web only
-  sendOnEnterPress?: boolean,
-  multiline?: boolean,
-  maxRows?: number,
-}
-export const SendMessage = ({ 
-  roomId, 
-  Icon=SendIcon, 
-  onNewMessage, 
-  placeholderText="Enter a message", 
-  style={},
-  sendOnEnterPress,
-  multiline,
-  maxRows,
-}: SendMessage_T) => {
-  const [message, setMessage] = useState('')
-  const [sending, setSending] = useState(false)
-
-  const [disabled, setDisabled] = useState(false)
-  const [chatFocused, setChatFocused] = React.useState(false)
-  
-  const [, { createElement: createMessage }] = useChats(roomId)
-
-  useEffect(() => {
-    if (!chatFocused) return
-    if (!sendOnEnterPress) return
-    if (typeof window === 'undefined') return
-
-    const handleSend = (e: any) => {
-      if (e.key !== 'Enter') return
-      setDisabled(true)
-
-      createMessage({ message, roomId })
-      .then(m => {
-        setMessage('')
-        onNewMessage?.(m)
-      })
-      .catch(console.error)
-      .finally(() => setDisabled(false))
-    }    
-
-    window.addEventListener('keypress', handleSend)
-    return () => { window.removeEventListener('keypress', handleSend) }
-  }, [sendOnEnterPress, chatFocused, message, roomId])
-
-  return (
-    <Flex row flex={1} alignContent="center" style={style}>
-      <Flex column flex={1}>
-        <TextField variant="outlined" value={message} onChange={setMessage} disabled={sending}
-          aria-label="Enter a message" 
-          multiline={multiline} maxRows={maxRows}
-          placeholder={placeholderText} 
-          onFocus={() => setChatFocused(true)}
-          onBlur={() => setChatFocused(false)}
-        />
-      </Flex>
-      <Flex column alignSelf="center">
-        <AsyncIconButton label="send" Icon={Icon} 
-          disabled={message === '' || disabled}  
-          action={() => createMessage({ message, roomId })}
-          onSuccess={m => {
-            setMessage('')
-            onNewMessage?.(m)
-          }}
-          onChange={setSending}
-        />
-      </Flex>
-    </Flex> 
-  )
-}
-
 const defaultSplitChatStyle: CSSProperties = {}
 interface SplitChat_T {
   session: EnduserSession | Session,

package/src/components.native.tsx

@@ -0,0 +1,174 @@
+import { launchImageLibrary, launchCamera } from 'react-native-image-picker';
+import { Modal, View, TextInput } from "react-native"
+import { Avatar } from 'react-native-paper'
+import {
+  useFileUpload,
+  Flex,
+  Typography,
+  useEnduserSession,
+  AsyncIconButton,
+  SendIcon,
+  LabeledIconButton,
+  Button,
+  Paper,
+  useChats, 
+} from "@tellescope/react-components"
+import { useState } from 'react';
+
+const CHAT_ICON_SIZE = 35
+const SendImageOrVideo = ({ 
+  onUpload, 
+  disabled 
+} : { 
+  disabled?: boolean, 
+  onUpload: (file: { secureName: string }, assetType: 'image' | 'video') => void,
+}) => {
+  const session = useEnduserSession()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const { handleUpload, uploading } = useFileUpload({ enduserId: session.userInfo.id })
+
+  const handleImageSelect = async (type: 'library' | 'camera') => {
+    if (uploading) return
+    setErrorMessage('')
+
+    const result = await (type === 'library' ? launchImageLibrary : launchCamera)({
+      mediaType: 'mixed', // library' ? 'mixed' : 'photo', // mixed only works for library
+      maxWidth: 500,
+      maxHeight: 500,
+    })
+    if (result.didCancel) return
+    if (result.errorCode || result.errorMessage) {
+      setErrorMessage(
+        result.errorCode === 'camera_unavailable' ? "Your camera is unavailable"
+      : result.errorCode === 'permission' ? "We do have permission to access your camera"
+      : result.errorMessage || 'An error occurred' 
+      )
+      return
+    }
+    const image = result.assets?.[0]
+    if (!image) return
+
+    const blob = await (await fetch(image.uri as string)).blob()
+    const actualSize = blob.size // image.size is incorrect by an unpredictable margin
+
+    try {
+      const file = await handleUpload({ 
+        name: image.fileName as string,
+        size: actualSize, // image.fileSize as number,
+        type: image.type as string,
+      }, {
+        uri: image.uri as string,
+        name: image.fileName as string,
+        type: image.type as string,
+      })
+      onUpload(
+        file,
+        result.assets?.[0]?.duration ? 'video' : 'image',
+      )
+      setMenuOpen(false)
+    } catch(err: any) {
+      setErrorMessage(err?.message ?? err.toString())
+    }
+  }
+
+  const menuDisabled = uploading || disabled
+  return (
+    <>
+    <Modal animationType='fade' transparent={true}
+      visible={menuOpen} onRequestClose={() => setMenuOpen(false)}
+    >
+      <Flex flex={1} alignItems="center" justifyContent="center">
+      <Paper flex style={{ padding: 25, margin: 10, }} >
+        <Button disabled={menuDisabled} variant="contained" onPress={() => handleImageSelect('library')}
+          style={{ marginBottom: 20 }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', minHeight: 40 }}>
+            <Typography style={{ fontSize: 18, marginRight: 10 }}>Upload</Typography>
+            <Avatar.Icon icon="image" size={CHAT_ICON_SIZE} />
+          </View>
+        </Button>
+        <Button disabled={menuDisabled} variant="contained" onPress={() => handleImageSelect('camera')}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', minHeight: 40 }}>
+            <Typography style={{ fontSize: 18, marginRight: 10 }}>Take Photo</Typography>
+            <Avatar.Icon icon="camera" size={CHAT_ICON_SIZE} />
+          </View>
+        </Button>
+        <Button variant='outlined' onPress={() => setMenuOpen(false)} style={{ marginTop: 25 }}>
+          Cancel
+        </Button> 
+
+        <Typography style={{ marginTop: 5, color: '#ff4444'}}>
+          {errorMessage}
+        </Typography>
+      </Paper>
+      </Flex>
+    </Modal>
+
+    <LabeledIconButton label="attach image" disabled={menuDisabled} 
+      onClick={() => setMenuOpen(true)}
+      Icon={() => <Avatar.Icon icon={'image'} size={CHAT_ICON_SIZE} />}
+    />
+    </>
+  )
+}
+
+interface SendMessage_T {
+  roomId: string,
+  placeholderText?: string;
+  style?: React.CSSProperties;
+}
+export const SendMessage = ({ 
+  roomId, 
+  placeholderText="Enter a message", 
+  style={},
+}: SendMessage_T) => {
+  const [message, setMessage] = useState('')
+  const [sending, setSending] = useState(false)
+  
+  const [, { createElement: createMessage }] = useChats(roomId)
+
+  return (
+    <Flex row flex={1} alignContent="center" style={{ marginTop: 8, ...style }}>
+      <Flex column flex={1} style={{ marginLeft: 5, marginRight: 5 }}>
+        <TextInput value={message} onChangeText={setMessage} 
+          style={{ 
+            width: '100%',
+            borderColor: '#0f0f0f',
+            borderWidth: 1,
+            padding: 10,
+            borderRadius: 5,
+          }}
+          aria-label="Enter a message..." 
+          placeholder={placeholderText} 
+        />
+      </Flex>
+      <Flex alignSelf="center">
+        <Flex style={{ marginRight: 5 }}>
+        <AsyncIconButton label="send" Icon={() => <SendIcon size={CHAT_ICON_SIZE} />} 
+          disabled={message === ''}  
+          action={() => createMessage({ message, roomId })}
+          onSuccess={() => setMessage('')}
+          onChange={setSending}
+        />
+        </Flex>
+
+        <Flex style={{ marginRight: 5 }}>
+        <SendImageOrVideo disabled={sending} onUpload={async ({ secureName }, type) => {
+          setSending(true)
+          try {
+            await createMessage({ 
+              roomId, message: '',
+              attachments: [{ type, secureName }]
+            })
+          } catch(err: any) {
+            console.error(err)
+          } finally {
+            setSending(false)
+          }
+         }} />
+         </Flex>
+      </Flex>
+    </Flex> 
+  )
+}

package/src/components.tsx

@@ -0,0 +1,88 @@
+import React, { CSSProperties, useEffect, useState } from "react"
+import { ChatMessage } from "@tellescope/types-client";
+
+import {
+  AsyncIconButton,
+  Flex,
+  SendIcon,
+  TextField,
+  useChats,
+} from "@tellescope/react-components"
+
+interface SendMessage_T {
+  roomId: string,
+  onNewMessage?: (m: ChatMessage) => void;
+  placeholderText?: string;
+  Icon?: React.ElementType<any>;
+  style?: CSSProperties;
+
+  // web only
+  sendOnEnterPress?: boolean,
+  multiline?: boolean,
+  maxRows?: number,
+}
+export const SendMessage = ({ 
+  roomId, 
+  Icon=SendIcon, 
+  onNewMessage, 
+  placeholderText="Enter a message", 
+  style={},
+  sendOnEnterPress,
+  multiline,
+  maxRows,
+}: SendMessage_T) => {
+  const [message, setMessage] = useState('')
+  const [sending, setSending] = useState(false)
+
+  const [disabled, setDisabled] = useState(false)
+  const [chatFocused, setChatFocused] = React.useState(false)
+  
+  const [, { createElement: createMessage }] = useChats(roomId)
+
+  useEffect(() => {
+    if (!chatFocused) return
+    if (!sendOnEnterPress) return
+    if (typeof window === 'undefined') return
+
+    const handleSend = (e: any) => {
+      if (e.key !== 'Enter') return
+      setDisabled(true)
+
+      createMessage({ message, roomId })
+      .then(m => {
+        setMessage('')
+        onNewMessage?.(m)
+      })
+      .catch(console.error)
+      .finally(() => setDisabled(false))
+    }    
+
+    window.addEventListener('keypress', handleSend)
+    return () => { window.removeEventListener('keypress', handleSend) }
+  }, [sendOnEnterPress, chatFocused, message, roomId])
+
+  return (
+    <Flex row flex={1} alignContent="center" style={style}>
+      <Flex column flex={1}>
+        <TextField variant="outlined" value={message} onChange={setMessage} disabled={sending}
+          aria-label="Enter a message" 
+          multiline={multiline} maxRows={maxRows}
+          placeholder={placeholderText} 
+          onFocus={() => setChatFocused(true)}
+          onBlur={() => setChatFocused(false)}
+        />
+      </Flex>
+      <Flex column alignSelf="center">
+        <AsyncIconButton label="send" Icon={Icon} 
+          disabled={message === '' || disabled}  
+          action={() => createMessage({ message, roomId })}
+          onSuccess={m => {
+            setMessage('')
+            onNewMessage?.(m)
+          }}
+          onChange={setSending}
+        />
+      </Flex>
+    </Flex> 
+  )
+}

package/src/index.native.ts

@@ -1 +1,2 @@
-export * from "./chat" 
+export * from "./chat" 
+export * from "./components"

package/src/index.ts

@@ -1 +1,2 @@
-export * from "./chat";
+export * from "./chat";
+export * from "./components"