Enabling Multi-Threaded Chats with Chat Components

[AmyL219]

Hello everyone,

In this post, we are going to illustrate how to enable multi-thread chat functionality for your users.

The example starts by setting up a ChatStatefulClient with the required credentials and then acquiring ChatThreadClients for the respective chat threadId. We proceed to use Providers to connect these clients to our components from our UI library, thereby enabling the display of distinct MessageThread components for different chats.

The major advantage of this method is that it allows each chat thread to maintain its own exclusive and isolated chat interface, which means your users can engage in multiple conversations simultaneously.

Of course, there are alternative approaches to managing multi-threaded experiences. We invite you to experiment with our UI library and come up with solutions that best meet the needs of your users!
Have a look at the example and don't hesitate to ask if you have any queries!

export type ContainerProps = {
  userId: string;
  token: string;
  displayName: string;
  endpointUrl: string;
  threadId1: string;
  threadId2: string;
};

export const Examples = (props: ContainerProps): JSX.Element => {
  const [chatClient, setChatClient] = useState<StatefulChatClient>();
  const [chatThreadClient1, setChatThreadClient1] =
    useState<ChatThreadClient>();
  const [chatThreadClient2, setChatThreadClient2] =
    useState<ChatThreadClient>();
  const [activeChat, setActiveChat] = useState(1);
  useEffect(() => {
    (async () => {
      const { userId, token, displayName, endpointUrl, threadId1, threadId2 } =
        props;
      const credential = new AzureCommunicationTokenCredential(token);
      // set up chat client
      const chatClient = createStatefulChatClient({
        credential,
        userId: { communicationUserId: userId },
        displayName,
        endpoint: endpointUrl,
      });
      // start realtime notification
      chatClient.startRealtimeNotifications();
      setChatClient(chatClient);
      setChatThreadClient1(chatClient.getChatThreadClient(threadId1));
      setChatThreadClient2(chatClient?.getChatThreadClient(threadId2));
    })();
  }, []);

  const handleClick = (): void => {
    setActiveChat((prevActiveChat) => (prevActiveChat === 1 ? 2 : 1));
  };

  const chatContainer = chatClient && chatThreadClient1 && (
    <div
      style={{
        position: "absolute",
        zIndex: activeChat === 1 ? 2 : 1,
        width: "100%",
      }}
    >
      <ChatClientProvider chatClient={chatClient}>
        <ChatThreadClientProvider chatThreadClient={chatThreadClient1}>
          <ComponentExample />
        </ChatThreadClientProvider>
      </ChatClientProvider>
    </div>
  );

  const chatContainer2 = chatClient && chatThreadClient2 && (
    <div
      style={{
        position: "absolute",
        zIndex: activeChat === 2 ? 2 : 1,
        width: "100%",
      }}
    >
      <ChatClientProvider chatClient={chatClient}>
        <ChatThreadClientProvider chatThreadClient={chatThreadClient2}>
          <ComponentExample />
        </ChatThreadClientProvider>
      </ChatClientProvider>
    </div>
  );

  return (
    <FluentThemeProvider>
      <div>
        <button onClick={handleClick}>Switch Chat</button>
      </div>
      <div style={{ position: "relative", width: "100%" }}>
        {chatContainer}
        {chatContainer2}
      </div>
    </FluentThemeProvider>
  );
};

export const ComponentExample = (): JSX.Element => {
  const sendBoxProps = usePropsFor(SendBox);
  const messageThreadProps = usePropsFor(MessageThread);
  return (
    <>
      <h3>Connect components to StatefulClient</h3>
      <h5>SendBox(send message here and see what happens in MessageThread):</h5>
      <SendBox {...sendBoxProps} />
      <h5>MessageThread:</h5>
      <div style={{ height: "50rem" }}>
        <MessageThread {...messageThreadProps} />
      </div>
    </>
  );
};