以下是一个简单的 chatGPT 聊天应用的实现,使用 React 和 Axios 库,并支持配置 API 和密钥:
```javascript
import React, { useState } from 'react';
import axios from 'axios';
const ChatGPT = ({ apiKey, apiUrl }) => {
const [messages, setMessages] = useState([]);
const [inputText, setInputText] = useState('');
const handleMessageSubmit = async (e) => {
e.preventDefault();
if (!inputText) return;
try {
const response = await axios.post(apiUrl, {
api_key: apiKey,
text: inputText,
});
const message = response.data;
setMessages((prevMessages) => [...prevMessages, message]);
setInputText('');
} catch (error) {
console.error(error);
}
};
return (
<div>
<ul>
{messages.map((message) => (
<li key={message.id}>
<strong>{message.sender}</strong>: {message.text}
</li>
))}
</ul>
<form onSubmit={handleMessageSubmit}>
<input type="text" value={inputText} onChange={(e) => setInputText(e.target.value)} />
<button type="submit">Send</button>
</form>
</div>
);
};
export default ChatGPT;
```
在使用时,可以将该组件添加到你的应用中,并提供一个 API URL 和 API 密钥作为 props:
```javascript
<ChatGPT apiUrl="https://example.com/api/chat" apiKey="my-api-key" />
```
请注意,该示例仅提供了最基本的实现,实际应用中可能需要添加更多的特性和错误处理逻辑。