Syngenta Assistant React Hook

npm install @upliftai/syngenta-assistant-hooks

import React, { useEffect, useMemo, useState, useRef } from 'react';
import { View, Text, TextInput, FlatList, Pressable, ActivityIndicator } from 'react-native';
import { Audio } from 'expo-av';
import { useChatManager, ChatManagerOptions } from '@upliftai/syngenta-assistant-hooks';
import { MessageBubble } from './MessageBubble';
import { styles } from './styles';

const API_BASE_URL = 'https://syngenta-express-staging-0fc8.up.railway.app';

export default function ChatScreen() {
  const [inputText, setInputText] = useState('');
  const [isRecording, setIsRecording] = useState(false);
  const recordingRef = useRef<Audio.Recording | null>(null);

  // In production, get these from your auth system and navigation params
  const config: ChatManagerOptions = useMemo(() => ({
    apiBaseUrl: API_BASE_URL,
    assistantId: 'demo-text-voice',
    authToken: 'your-auth-token',
    userId: 'user-123',
    threadId: Math.random().toString(), // new thread on each component mount.
  }), []);

  const chat = useChatManager(config);

  useEffect(() => {
    chat.loadHistory();
    chat.connect();
  }, [chat.loadHistory, chat.connect]);

  const handleSend = () => {
    if (inputText.trim()) {
      chat.sendTextMessage(inputText);
      setInputText('');
    }
  };

  const startRecording = async () => {
    try {
      // Request permissions
      const { granted } = await Audio.requestPermissionsAsync();
      if (!granted) return;

      // Configure audio mode for recording
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: true,
        playsInSilentModeIOS: true,
      });

      // Start recording
      const { recording } = await Audio.Recording.createAsync(
        Audio.RecordingOptionsPresets.HIGH_QUALITY
      );
      recordingRef.current = recording;
      setIsRecording(true);
    } catch (error) {
      console.error('Failed to start recording:', error);
    }
  };

  const stopRecording = async () => {
    if (!recordingRef.current) return;

    try {
      await recordingRef.current.stopAndUnloadAsync();
      const uri = recordingRef.current.getURI();
      recordingRef.current = null;
      setIsRecording(false);

      // Reset audio mode for playback
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: false,
      });

      // Send the voice message
      if (uri) {
        chat.sendAudioMessage(uri);
      }
    } catch (error) {
      console.error('Failed to stop recording:', error);
    }
  };

  return (
    <View style={styles.container}>
      {chat.connectionState !== 'connected' && (
        <Text style={styles.statusBar}>
          {chat.connectionState === 'connecting' ? 'Connecting...' : 'Disconnected'}
        </Text>
      )}

      {chat.isLoadingHistory && <ActivityIndicator />}

      <FlatList
        data={chat.messages}
        renderItem={({ item }) => <MessageBubble message={item} />}
        keyExtractor={(item) => item.id}
        inverted
        style={styles.messageList}
      />

      {chat.isBotTyping && <Text style={styles.typingText}>Assistant is typing...</Text>}

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={inputText}
          onChangeText={setInputText}
          placeholder="Type a message..."
          onSubmitEditing={handleSend}
        />
        <Pressable
          onPressIn={startRecording}
          onPressOut={stopRecording}
          style={[styles.micButton, isRecording && styles.micButtonRecording]}
        >
          <Text style={styles.micButtonText}>{isRecording ? '🎙️' : '🎤'}</Text>
        </Pressable>
        <Pressable onPress={handleSend}>
          <Text style={styles.sendButton}>Send</Text>
        </Pressable>
      </View>
    </View>
  );
}