AudioThreadDialog
Use the
<AudioThreadDialog> component to render an audio thread in a dialog (chat bubble and an audio chat panel).app.tsx
import {
SuperinterfaceProvider,
AudioThreadDialog,
} from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<AudioThreadDialog />
</SuperinterfaceProvider>
)
Subcomponents
AudioThreadDialog.Trigger
Control dialog visibility with
AudioThreadDialog.Trigger. Wrap the button with
AudioThreadDialog.Trigger.Root and render the clickable element with
AudioThreadDialog.Trigger.Button.app.tsx
<AudioThreadDialog.Root>
<AudioThreadDialog.Trigger.Root>
<AudioThreadDialog.Trigger.Button>
Voice chat
</AudioThreadDialog.Trigger.Button>
</AudioThreadDialog.Trigger.Root>
</AudioThreadDialog.Root>
AudioThreadDialog.Content
Renders the audio chat interface. Use
AudioThreadDialog.Content.Messages to
show chat history and AudioThreadDialog.Content.FormContainer to place the
audio form. Wrap everything with AudioThreadDialog.Content.Root.app.tsx
<AudioThreadDialog.Root>
<AudioThreadDialog.Content.Root>
<AudioThreadDialog.Content.Messages />
<AudioThreadDialog.Content.FormContainer>
<AudioThread />
</AudioThreadDialog.Content.FormContainer>
</AudioThreadDialog.Content.Root>
</AudioThreadDialog.Root>
AudioThreadDialog.Root
Wrap trigger and content with
AudioThreadDialog.Root to manage dialog state.