ThreadDialog
Use the
<ThreadDialog> component to render a thread in a dialog (chat bubble and a chat panel).app.tsx
import { SuperinterfaceProvider, ThreadDialog } from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<ThreadDialog />
</SuperinterfaceProvider>
)
Subcomponents
ThreadDialog.Trigger
Use
ThreadDialog.Trigger to control when the dialog opens. Customize the button
with ThreadDialog.Trigger.Button and wrap it with ThreadDialog.Trigger.Root.app.tsx
<ThreadDialog.Root>
<ThreadDialog.Trigger.Root>
<ThreadDialog.Trigger.Button>Open chat</ThreadDialog.Trigger.Button>
</ThreadDialog.Trigger.Root>
</ThreadDialog.Root>
ThreadDialog.Content
ThreadDialog.Content renders the dialog body. Use ThreadDialog.Content.Messages
to show the chat history and ThreadDialog.Content.FormContainer to place a
message form. Wrap everything with ThreadDialog.Content.Root.app.tsx
<ThreadDialog.Root>
<ThreadDialog.Content.Root>
<ThreadDialog.Content.Messages />
<ThreadDialog.Content.FormContainer>
<Thread.MessageForm />
</ThreadDialog.Content.FormContainer>
</ThreadDialog.Content.Root>
</ThreadDialog.Root>
ThreadDialog.Root
Wrap trigger and content with
ThreadDialog.Root to manage dialog state.