<aside> 💡 Allowing endusers to directly access Chat Rooms and Chat Messages on the client side requires authentication and appropriate Tellescope contexts. See the Enduser Authentication page for more ⬇️

Enduser Authentication

</aside>

Including Tellescope chat in React and React Native is largely the same, with a few differences highlighted in the examples below.

Chat Rooms

Chat rooms represent a conversation between any numbers of Users and Endusers. They are included by using their ids in the userIds and enduserIds fields of a chat room.

Accessing Chat Rooms

import { useChatRooms, List, LoadingLinear, Typography } from "@tellescope/react-components"

const ListOfChatRooms = () => {
	const [chatRoomsLoading] = useChatRooms()

	// render chat rooms, allow client to select a room by id
  return (
		<LoadingLinear data={chatRoomsLoading} render={chatRooms => (
		  <List items={chatRooms} render={chatRoom => (
				<Typography key={chatRoom.id}>{chatRoom.title}</Typography>
			)} />
	  )} />
  )
}

Conversation UI (Web)

A simple conversation UI that relies on off-the-shelf components

import { useEnduserSession, Flex } from "@tellescope/react-components"
import { Messages, SendMessage } from "@tellescope/chat"

const SimpleConversationUI = ({ roomId } : { roomId: string }) => {
	const session = useEnduserSession() // for a User, switch to useSession instead
	const [messages] = useChats(roomId)

	return (
		<Flex flex={1}>
			<Flex row flex={8}>
        <Messages messages={messages} chatUserId={session.userInfo.id} 
					imageDimensions={{ maxWidth: 500 }}
				/>
      </Flex>

      <Flex row flex={1} style={{ marginLeft: 10, marginRight: 10 }}>
        <SendMessage roomId={selectedRoom} /> 
      </Flex>
		</Flex>
  )
}

Conversation UI (Native)

A KeyboardAvoidingView and SafeAreaView help to better render a conversation in React Native

import { useEnduserSession, Flex } from "@tellescope/react-components"
import { Messages, SendMessage } from "@tellescope/chat"
import { KeyboardAvoidingView, SafeAreaView } from "react-native"

export const NativeConversation = ({ chatRoomId } : { chatRoomId: string }) => {
  const session = useEnduserSession()
  const [messages] = useChats(chatRoomId)

  return (
    <Flex flex={1} column >
	    <Messages chatUserId={session.userInfo.id} messages={messages} 
				imageDimensions={{
		      minWidth: 250, 
		      minHeight: 175, 
		    }}
			/>
	
	    <KeyboardAvoidingView behavior='padding'>
		    <SafeAreaView>
			    <Flex style={{ marginBottom: 5 }}> 
			      <SendMessage roomId={chatRoomId} />
			    </Flex>
		    </SafeAreaView>
	    </KeyboardAvoidingView>
	  </Flex>
  )
}

Attachments (Native)

Attach pictures from the photo library or camera and send in chat

Depends on react-native-image-picker and react-native-video to support both image and video attachments. UI is baked-in to the SendMessage component when imported in a React Native app.

import React from "react"
import {
	SendMessage,
} from "@tellescope/chat"

Creating a Chat Room (Native)

import { CreateChatRoom, AttendeesList } from "@tellescope/chat"

const AddChatScreen = (
	<CreateChatRoom 
	  onGoBack={() => null} // when provided includes a "back" button
	  onSuccess={c: ChatRoom) => console.log(c)} // called on created rom
	  onError={(e: APIError) => console.error(e)} // called if error creating room
	  roomTitle="Group Chat" // used as title of the created room
    radio={false} // use true to limit to 1 selection
	/>
)

const AttendeesListView = (
	<AttendeesList 
		 // displays a list of the users/endusers in this chat room
	  roomId="60398b1131a295e64f084ff6"

		// style applied to each entry in the list
		attendeeStyle={{ fontSize: 18, marginBottom: 10 }}
	/>
)

Custom Conversation UI

import { useChats } from "@tellescope/react-components"

// roomId is the .id value for a given ChatRoom record
const SimpleConversation = ({ roomId } : { roomId: string }) => {
	const [chatsLoading] = useChats(roomId)

	// render messages with custom UI
  return (
		<LoadingLinear data={chatsLoading} render={chat => (
			<Typography key={chat.message}>{chat.message}</Typography>
    )} />
  )
}