Embedded Conversation Chat (React)

You can embed a single Bread Crumbs conversation thread inside your React application using the exported ConversationChat component.

Install

npm install @bcrumbs.net/inbox

Import

import { ConversationChat } from '@bcrumbs.net/inbox'

Basic usage

import React from 'react'
import { ConversationChat } from '@bcrumbs.net/inbox'
 
export default function ConversationChatPage() {
  return (
    <div style={{ height: '100vh' }}>
      <ConversationChat convId="<CONVERSATION_ID>" />
    </div>
  )
}

Props

Prop	Type	Description
convId	string	Required conversation id to load and render.
logo	string	Optional logo passed to chat UI.
rtl	boolean	Enables right-to-left layout.
showHeader	boolean	Show/hide the chat header. Defaults to `true`.
onConversationChange	(conversation) => void	Callback fired when the loaded conversation changes.
onConvEnd	() => void	Callback fired after the conversation is ended from the UI.

Component behavior

Renders one conversation thread only (no conversation list/details panel).
If the conversation is ended, a banner is shown with an action to start a new conversation.
Shows loading and not-found/error states automatically.
Uses the same chat experience and permissions model as the full Inbox.

Requirements / notes

The component expects the authenticated workspace context to be available.
Make sure your app provides the same auth/session context used by Bread Crumbs clients.
Initialize i18n (i18next + react-i18next) and load the translations used by Inbox.
Use Apollo + required Bread Crumbs clients similarly to the Embedded Inbox setup.
Set required storage values before rendering:
- ContextId: workspace id
- token: API key used for authorization

Embedded Inbox