Expo tool approvals

import { useChat } from "@ai-sdk/react";
import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
import { Button, FlatList, Text, View } from "react-native";

export function ApprovalChat() {
  const { messages, sendMessage, addToolApprovalResponse } = useChat({
    api: "https://api.example.com/chat",
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
  });

  return (
    <View>
      <FlatList
        data={messages}
        keyExtractor={(message) => message.id}
        renderItem={({ item }) => (
          <View>
            {item.parts.map((part) => {
              if (part.type === "text") {
                return <Text key={part.text}>{part.text}</Text>;
              }

              if (
                part.type === "tool-sendEmail" &&
                part.state === "approval-requested"
              ) {
                return (
                  <View key={part.toolCallId}>
                    <Text>Approve email to {part.input.to}?</Text>
                    <Button
                      title="Approve"
                      onPress={() =>
                        addToolApprovalResponse({
                          id: part.approval.id,
                          approved: true,
                        })
                      }
                    />
                    <Button
                      title="Deny"
                      onPress={() =>
                        addToolApprovalResponse({
                          id: part.approval.id,
                          approved: false,
                          reason: "Denied from mobile",
                        })
                      }
                    />
                  </View>
                );
              }

              return null;
            })}
          </View>
        )}
      />

      <Button
        title="Ask assistant"
        onPress={() =>
          sendMessage({ text: "Send the customer a shipping update." })
        }
      />
    </View>
  );
}