react native chatgpt
1.0.0
OpenAI의 ChatGPT에 대한 React Native 래퍼로 애플리케이션과 원활하게 통합됩니다. 인증, 스트리밍 응답 및 대화 추적을 처리합니다. 서버가 필요 없이 모두 가능합니다.
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> | Webview 컨테이너에 추가 스타일이 적용되었습니다. |
backdropStyles | 아니요 | StyleProp<ViewStyle> | 배경화면 보기에 추가 스타일이 적용되었습니다. 기본적으로 반투명 배경색인 rgba(0, 0, 0, 0.5) 사용합니다. |
renderCustomCloseIcon | 아니요 | (closeModal: () => void) => React.Node | WebView 상단에 배치할 사용자 정의 닫기 버튼 렌더러입니다. 기본적으로 오른쪽 상단에 검은색 십자가(X)가 렌더링됩니다. onPress 이벤트의 인수로 제공된 closeModal 함수를 연결하는 것을 잊지 마세요. |
requestTimeout | 아니요 | number | 일반 요청을 취소하기 전에 대기할 수 있는 최대 시간(ms), 기본값은 30000ms입니다. |
streamedRequestTimeout | 아니요 | number | 스트리밍 기반 요청을 취소하기 전에 기꺼이 기다릴 수 있는 최대 시간(ms), 기본값은 15000ms입니다. |
useChatGpt후크는 다음 속성을 가진 객체를 반환합니다.
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : 라이브러리가 시작 중임을 나타냅니다. 인증 상태와 관련하여 아무 것도 가정해서는 안 되며 이 값이 logged-out 또는 authenticated 로 변경될 때까지 기다려야 합니다.logged-out 하면 아직 인증하지 않았거나 ChatGPT 액세스 토큰이 만료되었음을 나타냅니다.getting_auth_token : 로그인 모달이 해제된 직후 몇 초 동안 지속되는 임시 상태입니다. 이는 라이브러리가 백그라운드에서 ChatGPT 인증 토큰을 받고 있다는 사실을 반영합니다. 이 상태를 사용하여 로딩 표시기를 렌더링할 수 있습니다.authenticated : 로그인되었음을 나타냅니다. 이 상태에서만 채팅 봇과 상호 작용할 수 있습니다. ChatGPT는 7일 후에 만료되는 JWT 토큰을 발급하므로 대략 일주일에 한 번씩 재인증해야 합니다. 라이브러리는 상태를 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 ;응답 업데이트와 함께 지속적으로 호출되는 콜백 함수를 허용합니다. 이 버전은 ChatGPT API가 웹 놀이터에서 작동하는 방식과 유사하게 응답이 사용 가능해지면 즉시 표시해야 하는 시나리오에 유용합니다.
대화를 추적하려면 응답 객체에서 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 © 라울 고메즈 아쿠나
이 프로젝트가 흥미로웠다면 트위터에서 저를 팔로우하는 것을 고려해 보세요.
