استفاده از OpenAI در React به سادگی آب خوردن!

				
					// src/ChatBot.js
import React, { useState } from 'react';
import { OpenAI } from 'openai';

const openai = new OpenAI({
  apiKey: process.env.REACT_APP_OPENAI_KEY,
  dangerouslyAllowBrowser: true, 
});

function ChatBot() {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

  const sendMessage = async () => {
    const chatCompletion = await openai.chat.completions.create({
      model: 'gpt-4o', // یا gpt-3.5-turbo
      messages: [{ role: 'user', content: input }],
    });

    setResponse(chatCompletion.choices[0]?.message?.content || 'پاسخی نبود');
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h2>💬 چت‌بات باحال با GPT</h2>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="سؤالت رو بنویس"
        style={{ width: '100%', padding: '0.5rem' }}
      />
      <button onClick={sendMessage} style={{ marginTop: '1rem' }}>
        ارسال
      </button>
      <div style={{ marginTop: '2rem' }}>
        <strong>پاسخ:</strong>
        <p>{response}</p>
      </div>
    </div>
  );
}

export default ChatBot;