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>
)
}