Smart reply
Three reply suggestions for the last message in a thread: chips, a stack, or ghost text inside the input, with an optional tone picker.
Mock· scripted answersNo model runs in a browser, so every answer here is scripted. On a phone it comes from the model.
- Apple Foundation Models: supported
- Gemini Nano: supported
- Llama (not yet supported): not supported
- A cloud model: supported
Install
npx ondai add smart-replyUsage
import { SmartReply } from '@/components/ondai/smart-reply'
<SmartReply thread={messages} presentation="chips" onSelect={(text) => composer.setText(text)} />- Only the last six messages are sent, trimmed from the start.
- The
ghostpresentation shows the first suggestion as faded text inside the input; Tab or the arrow accepts it.
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<SmartReply
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ reply: Search, insert: null }}
labels={{ placeholder: '…', inputLabel: '…' }}
/>| Prop | What it does |
|---|---|
variant | The look of the whole component: clean, minimal, glass, pop, candy, metal, shine |
size | sm, md, lg; type, rows, icons and keys scale together |
tint | Any colour; the variant paints its keys, tiles and glow in it |
radius | Corner radius of the container |
icons | Replace any icon (a lucide component, an element, or null to hide it): reply, insert, accept, more |
labels | Every visible and spoken string; defaults are exported as smartReplyLabels: placeholder, inputLabel, thinking, thinkingOne, more, moreLabel, accept, empty, tone, toneNeutral, toneFriendly, toneFormal, toneBrief |
| Slots | Draw a part yourself: renderReply, renderEmpty, renderFooter, renderAccept |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
variant | clean, minimal, glass, pop, candy, metal, shine |
presentation | chips, stack, ghost |
size | sm, md, lg |
tone | neutral, friendly, formal, brief |
Token budget
Input budget: 1200 tokens. Only the last 6 messages are sent, trimmed from the start.
Fallback
When no provider is ready the component renders the unavailable state (AvailabilityGate copy) and, where a deterministic path exists, keeps working without the model.
Eval score
Fixtures: evals/smart-reply/fixtures.json.
Files
Registry dependencies: button, chip, on-device-badge, shimmer-text, skeleton, surface
npm dependencies: @ondai/core, @ondai/tokens, expo-haptics, lucide-react-native, react-native-reanimated, zod