# Parts: InboxRoot to InboxKnowledgeArticle (/themes/sdk/reference/inbox/parts-1)

```ts
import { … } from '@poltura/theme-sdk/inbox';
```

## `InboxRoot` [#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.

```ts
InboxRoot(props: InboxRootProps): ReactElement | null
```

**Props:** [`InboxRootProps`](/themes/sdk/reference/inbox/types-2#inboxrootprops)

**Example**

```tsx
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` [#inboxlauncher]

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

```ts
InboxLauncher(props: InboxLauncherProps): ReactElement
```

**Props:** [`InboxLauncherProps`](/themes/sdk/reference/inbox/types-2#inboxlauncherprops)

**Example**

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

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

## `InboxPanel` [#inboxpanel]

The chat panel that opens above the launcher.

```ts
InboxPanel(props: InboxPanelProps): ReactElement | null
```

**Props:** [`InboxPanelProps`](/themes/sdk/reference/inbox/types-2#inboxpanelprops)

**Example**

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

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

## `InboxPanelHeader` [#inboxpanelheader]

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

```ts
InboxPanelHeader(props: InboxPanelHeaderProps): ReactElement
```

**Props:** [`InboxPanelHeaderProps`](/themes/sdk/reference/inbox/types-2#inboxpanelheaderprops)

**Example**

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

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

## `InboxConversation` [#inboxconversation]

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

```ts
InboxConversation(props: InboxConversationProps): ReactElement | null
```

**Props:** [`InboxConversationProps`](/themes/sdk/reference/inbox/types-2#inboxconversationprops)

**Example**

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

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

## `InboxMessageList` [#inboxmessagelist]

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

```ts
InboxMessageList(props: InboxMessageListProps): ReactElement | null
```

**Props:** [`InboxMessageListProps`](/themes/sdk/reference/inbox/types-2#inboxmessagelistprops)

**Example**

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

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

## `InboxMessageBubble` [#inboxmessagebubble]

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

```ts
InboxMessageBubble(props: InboxMessageBubbleProps): ReactElement
```

**Props:** [`InboxMessageBubbleProps`](/themes/sdk/reference/inbox/types-2#inboxmessagebubbleprops)

**Example**

```tsx
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` [#inboxcomposer]

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

```ts
InboxComposer(props: InboxComposerProps): ReactElement
```

**Props:** [`InboxComposerProps`](/themes/sdk/reference/inbox/types-2#inboxcomposerprops)

**Example**

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

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

## `InboxOfflineForm` [#inboxofflineform]

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

```ts
InboxOfflineForm(props: InboxOfflineFormProps): ReactElement | null
```

**Props:** [`InboxOfflineFormProps`](/themes/sdk/reference/inbox/types-2#inboxofflineformprops)

**Example**

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

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

## `InboxStatusLine` [#inboxstatusline]

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

```ts
InboxStatusLine(props: InboxStatusLineProps): ReactElement | null
```

**Props:** [`InboxStatusLineProps`](/themes/sdk/reference/inbox/types-2#inboxstatuslineprops)

**Example**

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

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

## `InboxKnowledgeSearch` [#inboxknowledgesearch]

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

```ts
InboxKnowledgeSearch(props: InboxKnowledgeSearchProps): ReactElement | null
```

**Props:** [`InboxKnowledgeSearchProps`](/themes/sdk/reference/inbox/types-2#inboxknowledgesearchprops)

**Example**

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

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

## `InboxKnowledgeSuggestions` [#inboxknowledgesuggestions]

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

```ts
InboxKnowledgeSuggestions(props: InboxKnowledgeSuggestionsProps): ReactElement | null
```

**Props:** [`InboxKnowledgeSuggestionsProps`](/themes/sdk/reference/inbox/types-2#inboxknowledgesuggestionsprops)

**Example**

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

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

## `InboxKnowledgeArticle` [#inboxknowledgearticle]

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

```ts
InboxKnowledgeArticle(props: InboxKnowledgeArticleProps): ReactElement | null
```

**Props:** [`InboxKnowledgeArticleProps`](/themes/sdk/reference/inbox/types-2#inboxknowledgearticleprops)

**Example**

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

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