API Reference - @liveblocks/emails

import { isThreadNotificationEvent, WebhookHandler } from "@liveblocks/node";import { Liveblocks } from "@liveblocks/node";import { prepareThreadNotificationEmailAsReact } from "@liveblocks/emails";
const liveblocks = new Liveblocks({  secret: "sk_prod_xxxx…xxxxxxsk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const webhookHandler = new WebhookHandler(  process.env.LIVEBLOCKS_WEBHOOK_SECRET_KEY as string);
export async function POST(request: Request) {  const body = await request.json();  const headers = request.headers;
  // Verify if this is a real webhook request  let event;  try {    event = webhookHandler.verifyRequest({      headers: headers,      rawBody: JSON.stringify(body),    });  } catch (err) {    console.error(err);    return new Response("Could not verify webhook call", { status: 400 });  }
  // Using `@liveblocks/emails` to create an email  if (isThreadNotificationEvent(event)) {    const emailData = await prepareThreadNotificationEmailAsReact(      liveblocks,      event    );
    if (emailData.type === "unreadMention") {      const email = (        <div>          <div>            @{emailData.comment.author.id} at {emailData.comment.createdAt}          </div>          <div>{emailData.comment.body}</div>        </div>      );
      // Send unread mention email      // ...    }  }
  return new Response(null, { status: 200 });}

import { prepareThreadNotificationEmailAsReact } from "@liveblocks/emails";import { isThreadNotificationEvent } from "@liveblocks/node";
// Get `liveblocks` and `event` (see "Setup" section)// ...
if (isThreadNotificationEvent(event)) {  const emailData = await prepareThreadNotificationEmailAsReact(    liveblocks,    event  );  let email;
  switch (emailData.type) {    case "unreadMention": {      email = (        <div>          <div>            @{emailData.comment.author.id} at {emailData.comment.createdAt}          </div>          <div>{emailData.comment.body}</div>        </div>      );      break;    }
    case "unreadReplies": {      email = (        <div>          {emailData.comments.map((comment) => (            <div key={comment.id}>              <div>                @{comment.author.id} at {comment.createdAt}              </div>              <div>{comment.body}</div>            </div>          ))}        </div>      );      break;    }  }}
// Send your email// ...

const emailData = await prepareThreadNotificationEmailAsReact(  liveblocks,  webhookEvent,  {    resolveUsers: async ({ userIds }) => {      const usersData = await __getUsersFromDB__(userIds);
      return usersData.map((userData) => ({        name: userData.name, // "Nimesh"        avatar: userData.avatar.src, // "https://..."      }));    },    resolveGroupsInfo: async ({ groupIds }) => {      const groupsData = await __getGroupsFromDB__(groupIds);
      return groupsData.map((groupData) => ({        name: groupData.name, // "Engineering"        avatar: groupData.avatar.src, // "https://..."      }));    },    resolveRoomInfo({ roomId }) {      return {        name: roomId, // "my-room-name"        url: `https://example.com/${roomId}`,      };    },  });
// { type: "unreadMention", comment: { ... }, ... }console.log(emailData);
// { name: "Nimesh", avatar: "https://..." }console.log(emailData.comment.author.info);
// { name: "my-room-name", url: "https://example.com/my-room-name" }console.log(emailData.roomInfo);

const emailData = await prepareThreadNotificationEmailAsReact(  liveblocks,  webhookEvent,  {    components: {      Paragraph: ({ children }) => <p>{children}</p>,
      // `react-email` components are supported      Text: ({ children }) => (        <Text className="text-sm text-black m-0 mb-4">{children}</Text>      ),
      // `user` and `group` are the optional data returned from `resolveUsers` and `resolveGroupsInfo`      Mention: ({ element, user, group }) => (        <span style={{ color: "red" }}>          @{user?.name ?? group?.name ?? element.id}        </span>      ),
      // If the link is rich-text render it, otherwise use the URL      Link: ({ element, href }) => <a href={href}>{element?.text ?? href}</a>,    },  });
// { type: "unreadMention", comment: { ... }, ... }console.log(emailData);
// The previously defined components are used in the body property, now formatted as React nodes.console.log(emailData.comment.body);

const emailData = await prepareThreadNotificationEmailAsHtml(  liveblocks,  webhookEvent,  {    resolveUsers: async ({ userIds }) => {      const usersData = await __getUsersFromDB__(userIds);
      return usersData.map((userData) => ({        name: userData.name, // "Nimesh"        avatar: userData.avatar.src, // "https://..."      }));    },    resolveGroupsInfo: async ({ groupIds }) => {      const groupsData = await __getGroupsFromDB__(groupIds);
      return groupsData.map((groupData) => ({        name: groupData.name, // "Engineering"        avatar: groupData.avatar.src, // "https://..."      }));    },    resolveRoomInfo({ roomId }) {      return {        name: roomId, // "my-room-name"        url: `https://example.com/${roomId}`,      };    },  });
// { type: "unreadMention", comment: { ... }, ... }console.log(emailData);
// { name: "Nimesh", avatar: "https://..." }console.log(emailData.comment.author.info);
// { name: "my-room-name", url: "https://example.com/my-room-name" }console.log(emailData.roomInfo);

const emailData = await prepareThreadNotificationEmailAsHtml(  liveblocks,  webhookEvent,  {    styles: {      paragraph: { margin: "12px 0" },
      mention: {        fontWeight: "bold",        color: "red",      },
      link: {        textDecoration: "underline",      },    },  });
// { type: "unreadMention", comment: { ... }, ... }console.log(emailData);
// The elements in the comment body are now styledconsole.log(emailData.comment.body);

import { prepareTextMentionNotificationEmailAsReact } from "@liveblocks/emails";import { isTextMentionNotificationEvent } from "@liveblocks/node";
// Get `liveblocks` and `event` (see "Setup" section)// ...
if (isTextMentionNotificationEvent(event)) {  const emailData = await prepareTextMentionNotificationEmailAsReact(    liveblocks,    event  );
  const email = (    <div>      <div>        @{emailData.mention.author.id} at {emailData.mention.createdAt}      </div>      <div>{emailData.mention.content}</div>    </div>  );}
// Send your email// ...

const emailData = await prepareTextMentionNotificationEmailAsReact(  liveblocks,  webhookEvent,  {    resolveUsers: async ({ userIds }) => {      const usersData = await __getUsersFromDB__(userIds);
      return usersData.map((userData) => ({        name: userData.name, // "Nimesh"        avatar: userData.avatar.src, // "https://..."      }));    },    resolveGroupsInfo: async ({ groupIds }) => {      const groupsData = await __getGroupsFromDB__(groupIds);
      return groupsData.map((groupData) => ({        name: groupData.name, // "Engineering"        avatar: groupData.avatar.src, // "https://..."      }));    },    resolveRoomInfo({ roomId }) {      return {        name: roomId, // "my-room-name"        url: `https://example.com/${roomId}`,      };    },  });
// { mention: { ... }, ... }console.log(emailData);
// { name: "Nimesh", avatar: "https://..." }console.log(emailData.mention.author.info);
// { name: "my-room-name", url: "https://example.com/my-room-name" }console.log(emailData.roomInfo);

const emailData = await prepareThreadNotificationEmailAsReact(  liveblocks,  webhookEvent,  {    components: {      // `react-email` components are supported      Container: ({ children }) => <Section>{children}</Section>,
      Text: ({ children }) => (        <Text className="text-sm text-black m-0 mb-4">{children}</Text>      ),
      // `user` and `group` are the optional data returned from `resolveUsers` and `resolveGroupsInfo`      Mention: ({ element, user, group }) => (        <span style={{ color: "red" }}>          @{user?.name ?? group?.name ?? element.id}        </span>      ),    },  });
// { mention: { ... }, ... }console.log(emailData);
// The components are now used in this React contentconsole.log(emailData.mention.content);``;

import { prepareTextMentionNotificationEmailAsHtml } from "@liveblocks/emails";import { isTextMentionNotificationEvent } from "@liveblocks/node";
// Get `liveblocks` and `event` (see "Setup" section)// ...
if (isTextMentionNotificationEvent(event)) {  const emailData = await prepareTextMentionNotificationEmailAsHtml(    liveblocks,    event  );
  const email = (    <div>      <div>        @{emailData.mention.author.id} at {emailData.mention.createdAt}      </div>      <div>{emailData.mention.content}</div>    </div>  );}
// Send your email// ...

const emailData = await prepareTextMentionNotificationEmailAsHtml(  liveblocks,  webhookEvent,  {    resolveUsers: async ({ userIds }) => {      const usersData = await __getUsersFromDB__(userIds);
      return usersData.map((userData) => ({        name: userData.name, // "Nimesh"        avatar: userData.avatar.src, // "https://..."      }));    },    resolveGroupsInfo: async ({ groupIds }) => {      const groupsData = await __getGroupsFromDB__(groupIds);
      return groupsData.map((groupData) => ({        name: groupData.name, // "Engineering"        avatar: groupData.avatar.src, // "https://..."      }));    },    resolveRoomInfo({ roomId }) {      return {        name: roomId, // "my-room-name"        url: `https://example.com/${roomId}`,      };    },  });
// { mention: { ... }, ... }console.log(emailData);
// { name: "Nimesh", avatar: "https://..." }console.log(emailData.mention.author.info);
// { name: "my-room-name", url: "https://example.com/my-room-name" }console.log(emailData.roomInfo);

const emailData = await prepareTextMentionNotificationEmailAsHtml(  liveblocks,  webhookEvent,  {    styles: {      paragraph: { margin: "12px 0" },
      mention: {        fontWeight: "bold",        color: "red",      },    },  });
// { mention: { ... }, ... }console.log(emailData);
// The elements in the mention content are now styledconsole.log(emailData.mention.content);