react native chatgpt
1.0.0
Um wrapper React Native em torno do ChatGPT da OpenAI para integrá-lo perfeitamente aos seus aplicativos. Ele lida com autenticação, respostas transmitidas e controle de conversas. Tudo sem a necessidade de um servidor.
ChatGptProvideruseChatGptconversationId e messageId junto com a mensagemEsta não é uma biblioteca oficial do ChatGPT. É um esforço para facilitar a integração do ChatGPT com aplicativos React Native. Como tal, trate-o como experimental e use-o com cautela na produção.
? Execute o aplicativo de exemplo de lanche para vê-lo em ação. O código-fonte do exemplo está na pasta /example.
npm install react-native-chatgpt Você também precisa instalar react-native-webview e expo-secure-store
npx expo install react-native-webview expo-secure-storeNenhuma etapa adicional é necessária.
Você também precisa instalar react-native-webview , react-native-vector-icons e expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeApós a conclusão da instalação, você também deve seguir algumas instruções adicionais para configurar as bibliotecas:
Esta biblioteca exporta um componente provedor e um gancho como sua API principal.
ChatGptProviderO componente provedor deve ser colocado na raiz do seu aplicativo React Native, conforme mostrado no exemplo abaixo:
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Os seguintes adereços ChatGptProvider permitem que você personalize a aparência do modal que lida com a autenticação com ChatGPT e os tempos limite para as solicitações do chatbot.
| Nome | Obrigatório | Tipo | Descrição |
|---|---|---|---|
children | sim | React.Node | A árvore de componentes do seu aplicativo |
containerStyles | não | StyleProp<ViewStyle> | Estilo extra aplicado ao contêiner webview |
backdropStyles | não | StyleProp<ViewStyle> | Estilo extra aplicado à visualização do plano de fundo. Por padrão, ele usa uma cor de fundo semitransparente rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon | não | (closeModal: () => void) => React.Node | Um renderizador de botão Fechar personalizado para ser colocado no topo da visualização da web. Por padrão, ele renderiza uma cruz preta (X) no canto superior direito. Não se esqueça de conectar a função closeModal fornecida como argumento ao seu evento onPress |
requestTimeout | não | number | A quantidade máxima de tempo em ms que você deseja esperar por uma solicitação normal antes de cancelá-la; o padrão é 30.000 ms |
streamedRequestTimeout | não | number | A quantidade máxima de tempo em ms que você deseja esperar por uma solicitação baseada em streaming antes de cancelá-la; o padrão é 15.000 ms |
useChatGptO gancho retorna um objeto com as seguintes propriedades:
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : indica que a biblioteca está sendo inicializada. Você não deve assumir nada em relação ao estado de autenticação e esperar até que esse valor mude para logged-out ou authenticated .logged-out indica que você ainda não se autenticou ou que seu token de acesso ChatGPT expirougetting_auth_token : estado transitório que dura alguns segundos logo após o modal de login ser descartado. Isso reflete o fato de que a biblioteca está recebendo um token de autenticação ChatGPT em segundo plano. Você pode usar esse status para renderizar um indicador de carregamento.authenticated : indica que você está logado. Somente neste status você poderá interagir com o chatbot. ChatGPT emite tokens JWT que expiram em 7 dias, então você teria que autenticar novamente aproximadamente uma vez por semana. A biblioteca informará isso alterando o status de authenticated para logged-out .
login function login ( ) : void ;Uma função que, quando executada, abre o modal e aciona o fluxo de autenticação ChatGPT.
Após a conclusão bem-sucedida, status mudará de logged-out para getting_auth_token (por alguns segundos) e finalmente para authenticated
sendMessageEsta é a função central da biblioteca. Ele envia uma mensagem ao chatbot e retorna a resposta. Pode ser usado de duas maneiras diferentes dependendo dos argumentos passados:
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Ele retorna uma promessa com a resposta. Esta é a maneira mais simples de usá-lo, mas será mais lento processar a resposta enquanto espera que a resposta completa esteja disponível.
Se você quiser rastrear a conversa, use conversationId e messageId no objeto de resposta e passe-os para sendMessage novamente.
Se o servidor rejeitar a solicitação ou o tempo limite disparar, um ChatGptError será lançado.
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 ;Ele aceita uma função de retorno de chamada que será constantemente invocada com atualizações de resposta. Esta versão é útil para cenários onde a resposta precisa ser exibida assim que estiver disponível, semelhante à forma como a API ChatGPT funciona no web playground.
Se você quiser rastrear a conversa, use conversationId e messageId no objeto de resposta e passe-os para sendMessage novamente.
Verifique a propriedade isDone no objeto de resposta para detectar quando a resposta for concluída.
Se ocorrer um erro, o retorno de chamada onError será chamado com 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 >
) ;
} ;Consulte o guia de contribuição para saber como contribuir com o repositório e o fluxo de trabalho de desenvolvimento.
MIT © Raúl Gomez Acuna
Se você achou este projeto interessante, considere me seguir no twitter
