|
<!DOCTYPE html> |
|
<html dir="rtl" lang="ar"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>مكتبة أستاذ ريمون - دردشة مباشرة</title> |
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--primary-color: #1a237e; |
|
--secondary-color: #283593; |
|
--accent-color: #3949ab; |
|
--background-light: #e8eaf6; |
|
--text-color: #121212; |
|
} |
|
|
|
body { |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
margin: 0; |
|
padding: 20px; |
|
background-color: #f0f2f5; |
|
} |
|
.chat-container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
background: white; |
|
border-radius: 15px; |
|
box-shadow: 0 2px 15px rgba(0,0,0,0.1); |
|
padding: 20px; |
|
} |
|
.header { |
|
text-align: center; |
|
margin-bottom: 20px; |
|
padding: 15px; |
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
color: white; |
|
border-radius: 10px; |
|
position: relative; |
|
} |
|
.header h1 { |
|
margin: 0; |
|
font-size: 24px; |
|
} |
|
.customer-service-icon { |
|
position: absolute; |
|
left: 20px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
font-size: 2.5em; |
|
color: #fff; |
|
} |
|
.chat-box { |
|
height: 400px; |
|
overflow-y: auto; |
|
border: 1px solid #ddd; |
|
padding: 15px; |
|
margin-bottom: 20px; |
|
border-radius: 8px; |
|
background-color: var(--background-light); |
|
} |
|
.input-container { |
|
display: flex; |
|
gap: 10px; |
|
margin-bottom: 10px; |
|
} |
|
input { |
|
flex: 1; |
|
padding: 12px; |
|
border: 2px solid var(--primary-color); |
|
border-radius: 8px; |
|
font-size: 16px; |
|
background-color: white; |
|
} |
|
button { |
|
padding: 12px 25px; |
|
background-color: var(--primary-color); |
|
color: white; |
|
border: none; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
font-weight: bold; |
|
transition: background-color 0.3s ease; |
|
} |
|
button:hover { |
|
background-color: var(--accent-color); |
|
} |
|
button:disabled { |
|
background-color: #cccccc; |
|
cursor: not-allowed; |
|
} |
|
.message { |
|
margin-bottom: 12px; |
|
padding: 12px; |
|
border-radius: 8px; |
|
max-width: 80%; |
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|
white-space: pre-wrap; |
|
} |
|
.user-message { |
|
background-color: #fff; |
|
margin-left: 20%; |
|
border-right: 4px solid var(--accent-color); |
|
} |
|
.bot-message { |
|
background-color: #fff; |
|
margin-right: 20%; |
|
border-left: 4px solid var(--primary-color); |
|
} |
|
.faq-container { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
gap: 10px; |
|
margin-bottom: 15px; |
|
} |
|
.faq-button { |
|
background-color: var(--background-light); |
|
border: 1px solid var(--primary-color); |
|
padding: 10px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
font-weight: bold; |
|
color: var(--primary-color); |
|
} |
|
.faq-button:hover { |
|
background-color: var(--primary-color); |
|
color: white; |
|
} |
|
.typing-indicator { |
|
display: none; |
|
margin-bottom: 12px; |
|
padding: 12px; |
|
border-radius: 8px; |
|
max-width: 80%; |
|
margin-right: 20%; |
|
background-color: #f0f0f0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="chat-container"> |
|
<div class="header"> |
|
<i class="fas fa-headset customer-service-icon"></i> |
|
<h1>مكتبة أستاذ ريمون</h1> |
|
<p>خدمة العملاء - متوفرين على مدار الساعة</p> |
|
</div> |
|
<div class="faq-container"> |
|
<button class="faq-button" onclick="askFAQ('اسعار الورق')"> |
|
<i class="fas fa-file-alt"></i> أسعار الورق |
|
</button> |
|
<button class="faq-button" onclick="askFAQ('تحدث عن مكتبتك التي اسمها مكتبة استاذ ريمون')"> |
|
<i class="fas fa-store"></i> عن المكتبة |
|
</button> |
|
<button class="faq-button" onclick="askFAQ('قائمة المنتجات')"> |
|
<i class="fas fa-list"></i> قائمة المنتجات |
|
</button> |
|
<button class="faq-button" onclick="askFAQ('عروضكم')"> |
|
<i class="fas fa-percentage"></i> العروض |
|
</button> |
|
<button class="faq-button" onclick="askFAQ('طرق الدفع')"> |
|
<i class="fas fa-credit-card"></i> طرق الدفع |
|
</button> |
|
</div> |
|
<div class="chat-box" id="chatBox"> |
|
<div class="typing-indicator" id="typingIndicator">جاري الكتابة...</div> |
|
</div> |
|
<div class="input-container"> |
|
<input type="text" id="userInput" placeholder="اكتب سؤالك هنا..." onkeypress="handleKeyPress(event)"> |
|
<button id="sendButton" onclick="sendMessage()"> |
|
<i class="fas fa-paper-plane"></i> إرسال |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/4000/chat/stream'; |
|
let isWaitingForResponse = false; |
|
|
|
function handleKeyPress(event) { |
|
if (event.key === 'Enter' && !isWaitingForResponse) { |
|
sendMessage(); |
|
} |
|
} |
|
|
|
function askFAQ(question) { |
|
if (!isWaitingForResponse) { |
|
addMessage(question, 'user-message'); |
|
sendToAPI(question); |
|
} |
|
} |
|
|
|
async function sendMessage() { |
|
if (isWaitingForResponse) return; |
|
|
|
const input = document.getElementById('userInput'); |
|
const message = input.value.trim(); |
|
|
|
if (message) { |
|
addMessage(message, 'user-message'); |
|
input.value = ''; |
|
await sendToAPI(message); |
|
} |
|
} |
|
|
|
async function sendToAPI(message) { |
|
const sendButton = document.getElementById('sendButton'); |
|
const userInput = document.getElementById('userInput'); |
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
try { |
|
isWaitingForResponse = true; |
|
sendButton.disabled = true; |
|
userInput.disabled = true; |
|
typingIndicator.style.display = 'block'; |
|
|
|
const response = await fetch(API_URL, { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ |
|
message: message |
|
}) |
|
}); |
|
|
|
if (!response.ok) { |
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
} |
|
|
|
const reader = response.body.getReader(); |
|
let accumulatedResponse = ''; |
|
|
|
while (true) { |
|
const {value, done} = await reader.read(); |
|
if (done) break; |
|
|
|
const chunk = new TextDecoder().decode(value); |
|
accumulatedResponse += chunk; |
|
|
|
|
|
updateLastBotMessage(accumulatedResponse); |
|
} |
|
|
|
} catch (error) { |
|
console.error('Error:', error); |
|
addMessage('عذراً، حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.', 'bot-message'); |
|
} finally { |
|
isWaitingForResponse = false; |
|
sendButton.disabled = false; |
|
userInput.disabled = false; |
|
typingIndicator.style.display = 'none'; |
|
} |
|
} |
|
|
|
function addMessage(text, className) { |
|
const chatBox = document.getElementById('chatBox'); |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = `message ${className}`; |
|
messageDiv.textContent = text; |
|
chatBox.insertBefore(messageDiv, document.getElementById('typingIndicator')); |
|
chatBox.scrollTop = chatBox.scrollHeight; |
|
} |
|
|
|
function updateLastBotMessage(text) { |
|
const chatBox = document.getElementById('chatBox'); |
|
let lastBotMessage = chatBox.querySelector('.bot-message:last-of-type'); |
|
|
|
if (!lastBotMessage) { |
|
lastBotMessage = document.createElement('div'); |
|
lastBotMessage.className = 'message bot-message'; |
|
chatBox.insertBefore(lastBotMessage, document.getElementById('typingIndicator')); |
|
} |
|
|
|
lastBotMessage.textContent = text; |
|
chatBox.scrollTop = chatBox.scrollHeight; |
|
} |
|
|
|
|
|
window.onload = function() { |
|
addMessage("مرحباً بك في مكتبة أستاذ ريمون! كيف يمكنني مساعدتك اليوم؟", 'bot-message'); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
