仿照 c.level06.com，开发一个 chatGPT 聊天应用，能配置 api 和 key

以下是一个简单的 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" />
```

请注意，该示例仅提供了最基本的实现，实际应用中可能需要添加更多的特性和错误处理逻辑。