Native look

const ctx = await app.init()

if (app.isSupported('composer')) {
  app.composer.set({ visible: true, mic: 'dictation', placeholder: 'Ask…' })
}

import { exodeBootScript } from '@exode-team/sdk/miniapp'

<html suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: exodeBootScript() }}/>
  </head>
</html>

useExodeHeader({
  title: 'AI trainer',
  right: [
    { id: 'settings', icon: 'settings', label: 'Settings' },
    { id: 'share', icon: 'share', label: 'Share' },
  ],
  onButton: (id) => (id === 'settings' ? openSettings() : share()),
})

// Without React
app.header.set({ title: 'Catalog', right: [ { id: 'search', icon: 'search', label: 'Search' } ] })
app.on('header:button', ({ id }) => {})

// "Back" goes through the app's screens while a handler is given; null — "Back" leaves the app
useExodeBackButton(screen !== 'home' ? () => setScreen('home') : null)

// Without React
app.backButton.show()
app.on('backButton:pressed', () => goBack())
app.backButton.hide()

useExodeMainButton({ text: 'Continue', loading, disabled, onClick: next })

// Without React
app.mainButton.set({ visible: true, text: 'Done' })
app.on('mainButton:pressed', () => {})
app.mainButton.hide()

const composer = useExodeComposer({
  placeholder: 'Your answer…',
  mic: 'voice',          // 'voice' — a voice message as a file; 'dictation' — speech into the field text; 'none'
  attachments: true,     // or { media: true, file: false }
  busy,                  // the app is answering: "stop" instead of send (onStop), the field glows
  onSubmit: ({ text, files }) => send(text, files),
  onVoice: ({ file, duration }) => transcribe(file),
  onStop: () => cancel(),
})

if (!composer.isSupported) {
  return <MyOwnInput/>
}

const [ heard, setHeard ] = useState('')

const composer = useExodeComposer({
  voiceOnly: true,
  mic: 'dictation',                // speech as text; 'voice' — as a recording in onVoice
  recordAudio: true,               // and the recording of what was said along with the text (SDK 0.6+)
  placeholder: 'Answer the client',
  busy,
  onChange: setHeard,              // what is heard while speaking
  onSubmit: ({ text, voice }) => reply(text, voice?.file),
  onStop: () => cancel(),
  liveTranscript: true,            // the host shows what is heard above its buttons (SDK 0.7+)
  review: true,                    // "Done" puts the text into the host field to edit (SDK 0.7+)
  noCancel: true,                  // a speech once begun cannot be dropped: every attempt is sent (SDK 0.8+)
})

const popup = useExodePopup() // without React — app.popup

await popup.alert('Saved')
const ok = await popup.confirm('Delete the draft?', { destructive: true, okText: 'Delete' })
const name = await popup.prompt({ title: 'What is your name?', placeholder: 'Name', required: true }) // null — cancelled
const id = await popup.show({
  title: 'Choose',
  message: 'What to do with the file?',
  buttons: [
    { id: 'open', text: 'Open' },
    { id: 'delete', type: 'destructive', text: 'Delete' },
    { type: 'cancel' },
  ],
}) // the id of the pressed button, or null

const { insets, isFullscreen, requestFullscreen, exitFullscreen, lockOrientation, unlockOrientation } = useExodeViewport()

await requestFullscreen()          // true — it worked
await lockOrientation('landscape') // the screen rotates and stays so while the app is open
await unlockOrientation()          // the screen follows the device again

const haptic = useExodeHaptic() // without React — app.haptic

haptic.impact('light')          // light | medium | heavy | rigid | soft (medium by default)
haptic.notification('success')  // success | warning | error
haptic.selection()

const { openLink, share, copyText } = useExodeUI()

openLink('https://example.com')                    // in the app — the in-app browser
openLink('https://example.com', { external: true }) // the system browser
const shared = await share({ url, text, title })   // true — shared
const copied = await copyText('Promo code: EXODE') // true — copied

const s = document.createElement('script')
s.src = 'https://static.exode.biz/sdk/latest/miniapp-devtools.global.js'
document.head.append(s)

// the script installs itself:
exodeDevtools.skeleton()                          // the first screen line — to the console and the clipboard
exodeDevtools.show()                              // the silhouette over the page, to compare with the content
exodeDevtools.show('p12,16 g16; c48 208x28; 226') // a preview of your own line
exodeDevtools.hide()

if (process.env.NODE_ENV !== 'production') {
  import('@exode-team/sdk/miniapp/devtools').then((devtools) => devtools.installDevtools())
}