<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
session_start(); // Add this line to initiate the session
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo '<title>Chatbot for </title>';
} else {
echo '<title>روبوت محادثة ......</title>';
}
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
.chat-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.message-container {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #e2f3ff;
}
.bot-message {
background-color: #d3e8d9;
}
.message-content {
margin-top: 5px;
direction: <?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo 'ltr';
} else {
echo 'rtl';
}
?>;
font-family: "Sakkal Majalla", Arial, sans-serif;
}
#chat-log {
max-height: 300px;
overflow-y: auto;
}
#chat-form {
display: flex;
margin-top: 20px;
}
#user-message {
flex-grow: 1;
padding: 5px;
border: none;
border-radius: 4px;
direction: <?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo 'ltr';
} else {
echo 'rtl';
}
?>;
}
#user-message:focus {
outline: none;
}
#user-message::placeholder {
color: #888;
}
#send-button {
padding: 8px 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
#language-select {
position: absolute;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="text-center">
<?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo '<h1>Chatbot for .....</h1>';
} else {
echo '<h1>روبوت محادثة .....</h1>';
}
?>
</div>
<br>
<div id="language-select">
<select onchange="changeLanguage(event)">
<option value="ar" <?php if($selectedLanguage === 'ar') echo 'selected'; ?>>العربية</option>
<option value="en" <?php if($selectedLanguage === 'en') echo 'selected'; ?>>English</option>
</select>
</div>
<div class="chat-container">
<div id="chat-log" class="overflow-auto"></div>
<form id="chat-form" onsubmit="sendMessage(event)" class="mt-4">
<div class="input-group">
<input type="text" id="user-message" class="form-control" placeholder="<?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo 'Enter your message';
} else {
echo 'أدخل رسالتك';
}
?>" maxlength="255" autocomplete="off">
<button id="send-button" type="submit" class="btn btn-primary">
<?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate title based on the selected language
if ($selectedLanguage === 'en') {
echo 'Send';
} else {
echo 'ارسال';
}
?></button>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
function scrollToBottom() {
var chatLog = document.getElementById("chat-log");
chatLog.scrollTop = chatLog.scrollHeight;
}
function displayMessage(message, isUser) {
var messageContainer = document.createElement("div");
messageContainer.className = "message-container";
var messageElement = document.createElement("div");
messageElement.className = isUser ? "message user-message" : "message bot-message";
var messageContent = document.createElement("div");
messageContent.className = "message-content";
// Use nl2br to convert newlines to HTML line breaks and remove ‌
messageContent.innerHTML = message.replace(/\n/g, "<br>").replace(/‌/g, "");
messageElement.appendChild(messageContent);
messageContainer.appendChild(messageElement);
var chatLog = document.getElementById("chat-log");
chatLog.appendChild(messageContainer);
scrollToBottom();
}
function showWaitNotification() {
var waitMessage = "<?php
// Retrieve the selected language from the session
$selectedLanguage = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
// Set the appropriate wait message based on the selected language
if ($selectedLanguage === 'en') {
echo 'Please wait for the response...';
} else {
echo 'الرجاء الانتظار للحصول على الرد...';
}
?>";
displayMessage(waitMessage, false);
}
function sendMessage(event) {
event.preventDefault();
var userMessageInput = document.getElementById("user-message");
var userMessage = userMessageInput.value.trim().slice(0, 255); // Limit to 255 characters
if (userMessage !== "") {
displayMessage(userMessage, true);
userMessageInput.value = "";
// Show wait notification
showWaitNotification();
// Send the user message to the chatbot
fetch("chatbot.php", {
method: "POST",
body: new URLSearchParams({
"user-message": userMessage
})
})
.then(response => response.text())
.then(data => {
// Remove the wait notification
var chatLog = document.getElementById("chat-log");
chatLog.removeChild(chatLog.lastChild);
displayMessage(data, false);
});
}
}
function changeLanguage(event) {
var selectedLanguage = event.target.value;
// Save the selected language in the session (assuming you have a backend that handles sessions)
fetch("save-language.php", {
method: "POST",
body: new URLSearchParams({
"language": selectedLanguage
})
})
.then(response => {
if (response.ok) {
console.log("Language saved successfully!");
location.reload(); // Reload the page to reflect the language change
} else {
console.error("Failed to save language.");
}
});
}
scrollToBottom();
</script>
<footer>
<p style="text-align: center; font-size: small;">Version 1</p>
</footer>
</body>
</html>
|
Download
