Function App

examples/ts-react-native-chat/src/App.tsx:437–627

()

}

export default function App() {
  const [transport, setTransport] = useState<TransportKey>('xhr-http')
  const [input, setInput] = useState('15-minute veggie dinner')
  const connection = useConnection(transport)
  const selectedTransport =
    transports.find((item) => item.key === transport) ?? transports[1]

  const {
    messages,
    sendMessage,
    isLoading,
    error,
    stop,
    reload,
    clear,
    sessionGenerating,
  } = useChat({
    id: `rn-recipe-book-${transport}`,
    connection,
  })

  async function send(nextPrompt = input) {
    const next = nextPrompt.trim()
    if (!next || isLoading) return
    setInput('')
    await sendMessage(next)
  }

  async function reloadLast() {
    if (isLoading || messages.length === 0) return
    await reload()
  }

  function clearChat() {
    clear()
  }

  const latestRecipePart = findLatestRecipePart(messages)
  const expectedFetchError = isExpectedFetchStreamingError(error)
  const displayedError = expectedFetchError
    ? expectedFetchErrorMessage
    : error?.message

  return (
    <SafeAreaView style={styles.screen}>
      <StatusBar barStyle="dark-content" />
      <View style={styles.backgroundSauce} />
      <View style={styles.backgroundSage} />

      <ScrollView
        style={styles.page}
        contentContainerStyle={styles.pageContent}
        keyboardShouldPersistTaps="handled"
      >
        <View style={styles.header}>
          <Text style={styles.eyebrow}>TanStack AI recipes</Text>
          <Text style={styles.title}>Weeknight Kitchen</Text>
          <Text style={styles.subtitle}>