Thread.Messages
Use the
<Thread.Messages> component to render thread messages.app.tsx
import {
SuperinterfaceProvider,
Thread,
useMessages,
} from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<Thread.Root>
<Thread.Messages />
</Thread.Root>
</SuperinterfaceProvider>
)
Subcomponents
Thread.Messages.Message – render a single message inside the listThread.Messages.Root – wrap your own message listThread.Messages.NextPageSkeleton – loading placeholder while fetching more messagesThread.Messages.Root
Wrap your own message list with
Thread.Messages.Root to control layout.app.tsx
const { messages } = useMessages()
return (
<Thread.Messages.Root className="space-y-2">
{messages.map((m) => (
<Thread.Messages.Message
key={m.id}
message={m}
/>
))}
</Thread.Messages.Root>
)
Thread.Messages.NextPageSkeleton
Show a loading placeholder when fetching the next page of messages.
app.tsx
<Thread.Messages.Root>
<Thread.Messages.Message message={message} />
<Thread.Messages.NextPageSkeleton />
</Thread.Messages.Root>