Suggestions
Use the
<Suggestions> component to render reply suggestions.app.tsx
import { SuperinterfaceProvider, Suggestions } from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<Suggestions>How are you?</Suggestions>
</SuperinterfaceProvider>
)
Props
Here's a summary of the props available for the
<Suggestions> component:children
app.tsx
import { SuperinterfaceProvider, Suggestions } from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<Suggestions>
{`How are you?
What can I ask here?`}
</Suggestions>
</SuperinterfaceProvider>
)
Each line in the
<Suggestions> children block will be rendered as a separate button.
When the button is clicked by the user, the message with that button’s content is sent to the assistant.
This is usually used as part of the MarkdownProvider’s code block.app.tsx
import { useMemo } from 'react'
import { MarkdownProvider, Suggestions, Thread } from '@superinterface/react'
export const App = () => {
const components = useMemo(
() => ({
code: (props: JSX.IntrinsicElements['code']) => {
if (props.className === 'language-suggestions') {
return <Suggestions>{props.children}</Suggestions>
}
return props.children
},
}),
[],
)
return (
<MarkdownProvider components={components}>
<Thread />
</MarkdownProvider>
)
}
Subcomponents
Suggestions.Item
Control rendering of each suggestion button.
app.tsx
<Suggestions>
<Suggestions.Item>
<Suggestions.Item.Content>Yes</Suggestions.Item.Content>
</Suggestions.Item>
</Suggestions>
Suggestions.Item.Content
Customize the inner content of a suggestion button.
app.tsx
<Suggestions.Item.Content className="text-xs">Sure!</Suggestions.Item.Content>