Pre-built chat UI components you can make your own

import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { TalkSession } from '@talkjs/core';
import { useEffect } from 'react';

function Chat() {
  const appId = '<APP_ID>';
  const userId = 'frank';
  const otherUserId = 'nina';
  const conversationId = 'new_conversation';
  const session = getTalkSession({ appId, userId });

  useEffect(() => {
    session.currentUser.createIfNotExists({ name: 'Frank' });
    session.user(otherUserId).createIfNotExists({ name: 'Nina' });

    const conversation = session.conversation(conversationId);
    conversation.createIfNotExists();
    conversation.participant(otherUserId).createIfNotExists();
  }, [session, conversationId, otherUserId]);

  return (
    <div style={{ width: '400px', height: '800px' }}>
      <Chatbox
        appId={appId}
        userId={userId}
        conversationId={conversationId}
      />
    </div>
  );
}
Copy