Developers
Start building
Themes/Theme SDK/Modules/inbox/Parts: InboxRoot to InboxKnowledgeArticle

Parts: InboxRoot to InboxKnowledgeArticle

The parts of @poltura/theme-sdk/inbox, InboxRoot to InboxKnowledgeArticle.

On this page
import { … } from '@poltura/theme-sdk/inbox';

InboxRoot

The chat's frame: it pins the chat to its corner, applies the merchant's colours and shares the chat state with the parts inside it.

InboxRoot(props: InboxRootProps): ReactElement | null

Props: InboxRootProps

Example

import {
  InboxComposer,
  InboxConversation,
  InboxLauncher,
  InboxPanel,
  InboxPanelHeader,
  InboxRoot,
} from '@poltura/theme-sdk/inbox';

export function Chat() {
  return (
    <InboxRoot>
      <InboxPanel>
        <InboxPanelHeader />
        <InboxConversation />
        <InboxComposer />
      </InboxPanel>
      <InboxLauncher />
    </InboxRoot>
  );
}

InboxLauncher

The round button that opens and closes the panel, with the unread count while the panel is closed.

InboxLauncher(props: InboxLauncherProps): ReactElement

Props: InboxLauncherProps

Example

import { InboxChatGlyph, InboxLauncher } from '@poltura/theme-sdk/inbox';

export function ChatButton() {
  return (
    <InboxLauncher>
      <InboxChatGlyph size={28} />
    </InboxLauncher>
  );
}

InboxPanel

The chat panel that opens above the launcher.

InboxPanel(props: InboxPanelProps): ReactElement | null

Props: InboxPanelProps

Example

import { InboxConversation, InboxPanel, InboxPanelHeader } from '@poltura/theme-sdk/inbox';

export function ReadOnlyPanel() {
  return (
    <InboxPanel>
      <InboxPanelHeader />
      <InboxConversation />
    </InboxPanel>
  );
}

InboxPanelHeader

The panel header with the title, whether someone is online and the close button.

InboxPanelHeader(props: InboxPanelHeaderProps): ReactElement

Props: InboxPanelHeaderProps

Example

import { InboxPanel, InboxPanelHeader } from '@poltura/theme-sdk/inbox';

export function TitledPanel() {
  return (
    <InboxPanel>
      <InboxPanelHeader title="Ask our team" />
    </InboxPanel>
  );
}

InboxConversation

The conversation area: the message list, or the open help article in its place.

InboxConversation(props: InboxConversationProps): ReactElement | null

Props: InboxConversationProps

Example

import { InboxConversation } from '@poltura/theme-sdk/inbox';

export function PlainConversation() {
  return <InboxConversation renderMessage={(message) => <p key={message.id}>{message.content}</p>} />;
}

InboxMessageList

The messages of the conversation with day separators, the help search, suggestions and a jump to the latest message.

InboxMessageList(props: InboxMessageListProps): ReactElement | null

Props: InboxMessageListProps

Example

import { InboxMessageList } from '@poltura/theme-sdk/inbox';

export function Messages() {
  return <InboxMessageList className="gap-2" />;
}

InboxMessageBubble

One message with its author, text, files and, for the shopper's own messages, how far it has been delivered.

InboxMessageBubble(props: InboxMessageBubbleProps): ReactElement

Props: InboxMessageBubbleProps

Example

import { InboxMessageBubble, useInbox } from '@poltura/theme-sdk/inbox';

export function LastMessage() {
  const { view } = useInbox();
  const message = view.messages.at(-1);
  return message ? <InboxMessageBubble message={message} /> : null;
}

InboxComposer

The message field with the attach and send buttons and the files waiting to be sent.

InboxComposer(props: InboxComposerProps): ReactElement

Props: InboxComposerProps

Example

import { InboxComposer } from '@poltura/theme-sdk/inbox';

export function Ask() {
  return <InboxComposer placeholder="Ask about this product" />;
}

InboxOfflineForm

The contact form that replaces the composer while no one is online: name, email and a message sent as an email.

InboxOfflineForm(props: InboxOfflineFormProps): ReactElement | null

Props: InboxOfflineFormProps

Example

import { InboxComposer, InboxOfflineForm, useInbox } from '@poltura/theme-sdk/inbox';

export function Dock() {
  const { view } = useInbox();
  return view.online ? <InboxComposer /> : <InboxOfflineForm />;
}

InboxStatusLine

The line above the composer that says the chat is reconnecting or that this is a preview.

InboxStatusLine(props: InboxStatusLineProps): ReactElement | null

Props: InboxStatusLineProps

Example

import { InboxComposer, InboxStatusLine } from '@poltura/theme-sdk/inbox';

export function Dock() {
  return (
    <>
      <InboxStatusLine />
      <InboxComposer />
    </>
  );
}

InboxKnowledgeSearch

The help article search with its results, drawn only when the store offers help articles in the chat.

InboxKnowledgeSearch(props: InboxKnowledgeSearchProps): ReactElement | null

Props: InboxKnowledgeSearchProps

Example

import { InboxKnowledgeSearch } from '@poltura/theme-sdk/inbox';

export function HelpSearch() {
  return <InboxKnowledgeSearch placeholder="Search our help" />;
}

InboxKnowledgeSuggestions

A short list of help articles offered before the shopper writes, drawn only when there are some.

InboxKnowledgeSuggestions(props: InboxKnowledgeSuggestionsProps): ReactElement | null

Props: InboxKnowledgeSuggestionsProps

Example

import { InboxKnowledgeSuggestions } from '@poltura/theme-sdk/inbox';

export function Suggested() {
  return <InboxKnowledgeSuggestions limit={3} />;
}

InboxKnowledgeArticle

The help article the shopper opened, with a button back to the results; draws nothing while none is open.

InboxKnowledgeArticle(props: InboxKnowledgeArticleProps): ReactElement | null

Props: InboxKnowledgeArticleProps

Example

import { InboxKnowledgeArticle, InboxKnowledgeSearch } from '@poltura/theme-sdk/inbox';

export function Help() {
  return (
    <>
      <InboxKnowledgeSearch />
      <InboxKnowledgeArticle />
    </>
  );
}
Last updated