react native chatgpt
1.0.0
Оболочка React Native вокруг ChatGPT от OpenAI, позволяющая легко интегрировать его с вашими приложениями. Он обрабатывает аутентификацию, потоковые ответы и отслеживает разговоры. И все это без необходимости использования сервера.
ChatGptProvideruseChatGptconversationId и messageId вместе с сообщением.Это не официальная библиотека ChatGPT. Это попытка упростить интеграцию ChatGPT с приложениями React Native. Поэтому, пожалуйста, относитесь к нему как к экспериментальному и используйте его в рабочей среде с осторожностью.
? Запустите приложение с примером закуски, чтобы увидеть его в действии. Исходный код примера находится в папке /example.
npm install react-native-chatgpt Вам также необходимо установить react-native-webview и expo-secure-store
npx expo install react-native-webview expo-secure-storeНикаких дополнительных действий не требуется.
Вам также необходимо установить react-native-webview , react-native-vector-icons и expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeПосле завершения установки вам также следует следовать некоторым дополнительным инструкциям по настройке библиотек:
Эта библиотека экспортирует компонент провайдера и хук в качестве основного API.
ChatGptProviderКомпонент поставщика должен быть размещен в корне вашего приложения React Native, как показано в примере ниже:
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Следующие реквизиты ChatGptProvider позволяют настроить внешний вид модального окна, которое обрабатывает аутентификацию с помощью ChatGPT, и тайм-ауты для запросов чат-бота.
| Имя | Необходимый | Тип | Описание |
|---|---|---|---|
children | да | React.Node | Дерево компонентов вашего приложения |
containerStyles | нет | StyleProp<ViewStyle> | Дополнительный стиль, примененный к контейнеру веб-просмотра |
backdropStyles | нет | StyleProp<ViewStyle> | К фоновому виду применен дополнительный стиль. По умолчанию используется полупрозрачный цвет фона rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon | нет | (closeModal: () => void) => React.Node | Пользовательский рендерер кнопки закрытия, который будет размещен поверх веб-просмотра. По умолчанию в правом верхнем углу отображается черный крест (X). Не забудьте подключить функцию closeModal, предоставленную в качестве аргумента к вашему событию onPress . |
requestTimeout | нет | number | Максимальное время в мс, в течение которого вы готовы ждать обычного запроса перед его отменой, по умолчанию оно равно 30 000 мс. |
streamedRequestTimeout | нет | number | Максимальное время в мс, в течение которого вы готовы ждать потокового запроса перед его отменой. По умолчанию оно составляет 15 000 мс. |
useChatGptХук возвращает объект со следующими свойствами:
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : указывает, что библиотека запускается. Вам не следует делать никаких предположений относительно состояния аутентификации и ждать, пока это значение не изменится на logged-out или authenticated .logged-out означает, что вы либо еще не прошли аутентификацию, либо срок действия вашего токена доступа ChatGPT истек.getting_auth_token : временное состояние, которое длится несколько секунд сразу после закрытия модального входа в систему. Это отражает тот факт, что библиотека получает токен аутентификации ChatGPT в фоновом режиме. Вы можете использовать этот статус для отображения индикатора загрузки.authenticated : сигнализирует о том, что вы вошли в систему. Только в этом статусе вы сможете взаимодействовать с чат-ботом. ChatGPT выдает токены JWT, срок действия которых истекает через 7 дней, поэтому вам придется проходить повторную аутентификацию примерно раз в неделю. Библиотека сообщит об этом, изменив статус с authenticated на logged-out .
login function login ( ) : void ;Функция, которая при выполнении открывает модальное окно и запускает поток аутентификации ChatGPT.
После успешного завершения status изменится с logged-out на getting_auth_token (на несколько секунд) и, наконец, на authenticated
sendMessageЭто основная функция библиотеки. Он отправляет сообщение чат-боту и возвращает ответ. Его можно использовать двумя разными способами в зависимости от переданных аргументов:
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Он возвращает обещание с ответом. Это самый простой способ его использования, но обработка ответа будет медленнее, поскольку он ожидает доступности полного ответа.
Если вы хотите отслеживать разговор, используйте conversationId и messageId в объекте ответа и снова передайте их в sendMessage .
Если сервер отклоняет запрос или срабатывает таймаут, будет выброшено ChatGptError .
import React from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;
const Example = ( ) => {
const { sendMessage } = useChatGpt ( ) ;
const handleSendMessage = async ( ) => {
try {
const { message , conversationId , messageId } = await sendMessage (
'Outline possible topics for an SEO article'
) ;
// After the user has read the response, send another message
const { message : followUp } = await sendMessage (
'Elaborate on the first suggestion' ,
{
conversationId ,
messageId ,
}
) ;
} catch ( error ) {
if ( error instanceof ChatGptError ) {
// Handle error accordingly
}
}
} ;
return < Button onPress = { handleSendMessage } title = "Send message" / > ;
} ; function sendMessage ( args : {
message : string ;
options ?: {
conversationId ?: string ;
messageId ?: string ;
} ;
onAccumulatedResponse ?: ( response : {
message : string ;
messageId : string ;
conversationId : string ;
isDone ?: boolean ;
} ) => void ;
onError ?: ( err : ChatGptError ) => void ;
} ) : void ;Он принимает функцию обратного вызова, которая будет постоянно вызываться при обновлении ответа. Эта версия полезна для сценариев, в которых ответ необходимо отобразить, как только он станет доступен, аналогично тому, как API ChatGPT работает на веб-площадке.
Если вы хотите отслеживать разговор, используйте conversationId и messageId в объекте ответа и снова передайте их в sendMessage .
Проверьте свойство isDone в объекте ответа, чтобы определить, когда ответ завершен.
Если возникает ошибка, обратный вызов onError вызывается с ChatGptError .
import React , { useState } from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;
const StreamExample = ( ) => {
const { sendMessage } = useChatGpt ( ) ;
const [ response , setResponse ] = useState ( '' ) ;
const handleSendMessage = ( ) => {
sendMessage ( {
message : 'Outline possible topics for an SEO article' ,
onAccumulatedResponse : ( { message , isDone } ) => {
setResponse ( message ) ;
if ( isDone ) {
// The response is complete, you can send another message
}
} ,
onError : ( e ) => {
// Handle error accordingly
} ,
} ) ;
} ;
return (
< View style = { { flex : 1 } } >
< Button onPress = { handleSendMessage } title = "Get streamed response" / >
< Text > { response } < / Text >
< / View >
) ;
} ;См. руководство по участию, чтобы узнать, как внести свой вклад в репозиторий и рабочий процесс разработки.
MIT © Рауль Гомес Акуна
Если этот проект показался вам интересным, пожалуйста, подписайтесь на меня в Твиттере.
