Function App

testing/react-native-smoke/src/App.tsx:43–110

()

}

export default function App() {
  const [transport, setTransport] = useState<TransportKey>('fetch-http')
  const [input, setInput] = useState('Hello from React Native')
  const connection = useConnection(transport)

  const { messages, sendMessage, isLoading, error, stop } = useChat({
    id: `rn-smoke-${transport}`,
    connection,
  })

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

  return (
    <SafeAreaView style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.title}>TanStack AI RN Smoke</Text>
        <Text style={styles.subtitle}>{chatUrl}</Text>
      </View>

      <View style={styles.transportRow}>
        {Object.entries(transportLabels).map(([key, label]) => (
          <Button
            key={key}
            title={label}
            color={transport === key ? '#0f766e' : '#475569'}
            onPress={() => setTransport(key as TransportKey)}
          />
        ))}
      </View>

      <ScrollView style={styles.messages}>
        {messages.map((message) => (
          <View key={message.id} style={styles.message}>
            <Text style={styles.role}>{message.role}</Text>
            {message.parts.map((part, index) =>
              part.type === 'text' ? (
                <Text key={index} style={styles.part}>
                  {part.content}
                </Text>
              ) : null,
            )}
          </View>
        ))}
        {error ? <Text style={styles.error}>{error.message}</Text> : null}
      </ScrollView>

      <View style={styles.composer}>
        <TextInput
          accessibilityLabel="Message"
          style={styles.input}
          value={input}
          onChangeText={setInput}
          editable={!isLoading}