📘

This guide is about the data/domain layer

This page describes how to to query the patient data, allowing you to build your own UI. If you'd rather use our built-in customisable UI components, check out the Messaging UI Components page.

Watchers and cached data

Our messaging core SDK has a cache layer that persists the latest fetched data from the network to a disk cache, allowing to retrieve these data without network at any time.

Every watcher returns a Response object that contains 3 things:

• A data property that contains the data itself
• A isDataFresh boolean property that indicates if the emitted data is fresh or not.
• A refreshingState property that has 3 different states:
  • Refreshing: the data emitted comes from the cache, we are refreshing it in background. isDataFresh should be false when that happens, and you can expect another emit following with the result of the background refresh.
  • Refreshed: the data emitted comes from the network or is local only and no follow-up attempt to refresh it will be made. isDataFresh should be true when that happens.
  • ErrorWhileRefreshing: the background refresh of the data has failed and no follow-up attempt to refresh will be made. isDataFresh should be false when that happens.

🚧

If no cached data are available and the network fetch fails, the watcher will terminate with an error, so you need to provide and error callback even for cached flows.
For the vast majority of apps, showing cached data is a good user experience, especially if you're showing a hint to the user when it's not fresh. If your app needs to show only fresh data, you can filter items that aren't fresh and you can relaunch the watcher to trigger a new network fetch if needed.

Watch patient conversations list

You can watch the list of conversations a user has access to.
The successCallback will be called every time there's a change in those conversations and will always return all the data (you don't need to accumulate it in your own properties):

const subscription = NablaMessagingClient.getInstance().watchConversations(
  (error) => {
    // TODO: handle error
    subscription.remove();
  },
  (response: Response<PaginatedList<Conversation>, NablaError>) => {
    // You can update your UI with the list of conversations:
    const conversations = result.data.elements;

    // If hasMore is true, more conversations are available, otherwise you already have all the conversations
    // To load more conversation, you can use `NablaMessagingClient.getInstance().loadMoreConversations`
    const hasMore = result.data.hasMore;
  }
);

Create a new conversation

If you want your user to be able to start a new conversation, you can allow to create it into your app directly:

NablaMessagingClient.getInstance().startConversation((conversationId) => {
  NablaMessagingUI.navigateToConversation(conversationId);
});

Note that this conversation is created locally on the device first and will be created server side once the Patient sends a first message in it.

Watch a conversation

To watch the items (message and conversation activity) of a conversation, the same pagination principles applies:

const subscription =
  NablaMessagingClient.getInstance().watchItemsOfConversation(
    conversationId,
    (error) => {
      // TODO: handle error
      subscription.remove();
    },
    (response: Response<PaginatedList<ConversationItem>, NablaError>) => {
      // You can update your UI with the list of messages
      const items = response.data.elements;

      // If hasMore is true, more conversations are available, otherwise you already have all the conversations
      // To load more conversation, you can use `NablaMessagingClient.getInstance().loadMoreItemsInConversation`
      const hasMore = response.data.hasMore;
    }
  );

You can also watch for a conversation details update (like a Provider typing status):

const subscription = NablaMessagingClient.getInstance().watchConversation(
  conversationId,
  (error) => {
    // TODO: handle error
    subscription.remove();
  },
  (response: Response<Conversation, NablaError>) => {
    // You can update your UI with the new data
  }
);

Send a new message

Creating and sending your message

The user can send a message in an existing conversation:

NablaMessagingClient.getInstance().sendMessage(
  (error) => {
    // TODO: handle error
  },
  () => {
    // Message has been sent successfully!
  },
  new TextMessageInput("Hello World!"),
  conversationId
);

📘

Message sending is asynchronous

Note that here you don't need to handle failure or success directly: As soon as you call sendMessage(..) the new message will be locally added to the conversation: its status will be SendStatus.Sending.

Different types of messages

You can send following types of messages:

• Text
• Image
• Video
• Document
• Audio

Here is how to create each of them:

const textMessageInput = new TextMessageInput("Hello World!");

const imageMessageInput = new ImageMessageInput(
  "file:///uri/from/device/img.jpg",
  ImageMimeType.Jpeg,
  "File name"
);

const videoMessageInput = new VideoMessageInput(
  "file:///uri/from/device/video.mp4",
  VideoMimeType.mp4,
  "File name"
);

const documentMessageInput = new DocumentMessageInput(
  "file:///uri/from/device/document.pdf",
  DocumentMimeType.pdf,
  "File name"
);

const audioMessageInput = new AudioMessageInput(
  "file:///uri/from/device/audio.mpeg",
  AudioMimeType.mpeg,
  "File name"
);