একটি ওয়েবসাইটের জন্য AI চ্যাটবট তৈরি করা

<button id="chatToggle" onclick="toggleChat()">Chat with AI</button>

<div id="chatWindow" class="hidden">
  <div id="chatHeader">
    <span>AI Assistant</span>
    <button onclick="toggleChat()">✕</button>
  </div>
  <div id="chatMessages">
    <div class="msg bot">Hello! How can I help you today?</div>
  </div>
  <div id="chatInput">
    <input type="text" id="userInput" placeholder="Type your message..."
           onkeypress="if(event.key==='Enter') sendMessage()">
    <button onclick="sendMessage()">Send</button>
  </div>
</div>

const SYSTEM_PROMPT = `You are a helpful customer service assistant.
Answer questions about our courses, fees, and timings. If you don't
know something, say you'll connect the user with a staff member.
Keep responses under 100 words.`;

let messageHistory = [{ role: "system", content: SYSTEM_PROMPT }];

async function sendMessage() {
  const input = document.getElementById('userInput');
  const userText = input.value.trim();
  if (!userText) return;

  addMessage(userText, 'user');
  messageHistory.push({ role: "user", content: userText });
  input.value = '';
  addMessage('...', 'bot');

  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: messageHistory })
  });

  const data = await response.json();
  removeTypingIndicator();

  if (data.reply) {
    addMessage(data.reply, 'bot');
    messageHistory.push({ role: "assistant", content: data.reply });
  } else {
    addMessage('Sorry, I had trouble responding. Please try again.', 'bot');
  }
}

<?php
header('Content-Type: application/json');

$data = json_decode(file_get_contents('php://input'), true);
$userMessage = htmlspecialchars($data['message'] ?? '');

$apiKey = 'YOUR_KEY_HERE'; // নিরাপদ — ব্যবহারকারীরা এই ফাইলের বিষয়বস্তু কখনো দেখেন না

$payload = json_encode([
  'model' => 'gpt-4o-mini',
  'messages' => [
    ['role' => 'system', 'content' => 'You are a helpful assistant.'],
    ['role' => 'user', 'content' => $userMessage],
  ],
  'max_tokens' => 300,
]);

$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json',
  "Authorization: Bearer $apiKey",
]);

echo curl_exec($ch);