Chatbox

You can use all options in Talk.ChatboxOptions as props to fine-tune the behavior of your chat UI.

If any of these props change, <Chatbox> will apply it directly through a setter such as setFeedFilter. If no such setter exists, it will recreate the Talk.Chatbox.

See below for an example of how to use chatbox options.

You can pass all events (methods with names starting with on) accepted by the Chatbox in the JavaScript SDK to the Chatbox component as props with the same name.

See below for an example of how to use event props.

Create a chatbox and load the existing conversation with an id of welcome:

1import { Chatbox } from '@talkjs/react';
2
3// ...
4
5<Chatbox
6  conversationId="welcome"
7  style={{ width: 400, height: 600 }}
8  className="chat-container"
9/>;

Create or update user data with the syncConversation prop. This prop expects a callback that uses the regular TalkJS JavaScript SDK to create a ConversationBuilder object with getOrCreateConversation:

1import { useCallback } from 'react';
2import { Chatbox } from '@talkjs/react';
3import Talk from 'talkjs';
4
5// ...
6
7const syncConversation = useCallback((session: Talk.Session) => {
8  // regular TalkJS JavaScript code here
9  const conversation = session.getOrCreateConversation('welcome');
10  conversation.setParticipant(session.me);
11  return conversation;
12}, []);
13
14<Chatbox
15  syncConversation={syncConversation}
16  style={{ width: 400, height: 600 }}
17  className="chat-container"
18/>;

To display a placeholder component while TalkJS is loading, pass a React node to the loadingComponent prop:

1import { Chatbox } from '@talkjs/react';
2
3// ...
4
5<Chatbox conversationId="welcome" loadingComponent={<h1>Loading..</h1>} />;

To reference a chatbox outside the Chatbox component, assign the underlying Talk.Chatbox object to a ref:

1import { useRef, useCallback } from 'react';
2import { Chatbox } from '@talkjs/react';
3
4const chatbox = useRef<Talk.Chatbox>();
5
6// ...
7
8const onSomeEvent = useCallback(async () => {
9  // do something with the chatbox
10  if (chatbox.current?.isAlive) {
11    chatbox.current.sendLocation();
12  }
13}, []);
14
15<Chatbox conversationId="welcome" chatboxRef={chatbox} />;

The ref will be set once the Talk.Chatbox object has been created, and it will be set back to undefined once it has been destroyed.

Make sure you always check the isAlive property to ensure that the object is not destroyed because React is prone to trigger race conditions here (especially when React.StrictMode is enabled or when using a development setup with hot reloading, both of which cause a lot of destroying).

Respond to events (in this case, sending a message and triggering a custom message action) by printing details to the console:

1import { Chatbox } from '@talkjs/react';
2
3// ...
4
5<Chatbox
6  conversationId="welcome"
7  onSendMessage={(event) => console.log(event.message.text)}
8  onCustomMessageAction={(event) => console.log(event.action)}
9/>;

Customize the chatbox with any options from Talk.ChatboxOptions. In this example, we filter out hidden conversations, remove the back button on mobile, and customize the message field placeholder text:

1<Chatbox
2  // only show conversations where `custom.state != 'hidden'`
3  feedFilter={{ custom: { state: ['!=', 'hidden'] } }}
4  showMobileBackButton={false}
5  messageField={{ placeholder: 'Write a message..' }}
6  //...
7/>