import React, { useState, useEffect, useRef } from 'react';
import { Send, Mic, MicOff, ShoppingCart, Star, Users, Clock, Zap, Brain, MessageCircle } from 'lucide-react';
const SmartSalesChatbot = () => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState(");
const [isListening, setIsListening] = useState(false);
const [customerProfile, setCustomerProfile] = useState({
type: 'unknown',
confidence: 0,
buyingSignals: [],
interests: []
});
const [isThinking, setIsThinking] = useState(false);
const [currentModel, setCurrentModel] = useState('GPT-4');
const [costSavings, setCostSavings] = useState(0);
const messagesEndRef = useRef(null);
// מוצרים לדוגמה
const products = [
{
id: 1,
name: "מכונת קפה חכמה",
price: 899,
image: "https://via.placeholder.com/150×150/4F46E5/FFFFFF?text=קפה",
rating: 4.8,
reviews: 127,
inStock: 3
},
{
id: 2,
name: "אוזניות Bluetooth",
price: 299,
image: "https://via.placeholder.com/150×150/059669/FFFFFF?text=אוזניות",
rating: 4.6,
reviews: 89,
inStock: 8
},
{
id: 3,
name: "שעון חכם",
price: 1299,
image: "https://via.placeholder.com/150×150/DC2626/FFFFFF?text=שעון",
rating: 4.9,
reviews: 203,
inStock: 2
}
];
// בנק תשובות מובנות
const responseBank = {
greeting: [
"שלום! אני כאן לעזור לך למצוא בדיוק מה שאתה מחפש 😊",
"היי! מה שלומך? איך אוכל לעזור לך היום?",
"ברוך הבא! אני הצ'אטבוט החכם שלנו. מה מעניין אותך?"
],
product_info: [
"מעולה! אני אכין לך מידע מפורט על המוצר הזה",
"בחירה נהדרת! תן לי רגע לאסוף את כל הפרטים",
"המוצר הזה מאוד פופולרי! אני אציג לך את כל היתרונות"
],
closing: [
"מה דעתך שנסיים את הרכישה? יש לי הצעה מיוחדת בשבילך!",
"רק היום יש לנו הנחה של 15% על המוצר הזה!",
"אני רואה שאתה מתלבט… מה אם אספר לך על הערבות הבלעדית שלנו?"
]
};
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
// אתחול עם הודעת ברכה
useEffect(() => {
const welcomeMessage = {
type: 'bot',
content: "שלום! אני הצ'אטבוט החכם שלכם 🤖 אני משתמש בפסיכולוגיה מתקדמת כדי לעזור לך למצוא בדיוק מה שאתה מחפש. איך אוכל לעזור לך היום?",
timestamp: new Date(),
model: 'built-in'
};
setMessages([welcomeMessage]);
}, []);
// ניתוח פרופיל לקוח
const analyzeCustomerProfile = (message) => {
const analyticalWords = ['נתונים', 'השוואה', 'מחיר', 'ביצועים', 'מפרט'];
const emotionalWords = ['אוהב', 'מרגיש', 'חלום', 'מושלם', 'נפלא'];
const impulsiveWords = ['מהר', 'עכשיו', 'מיד', 'לא יכול לחכות'];
const cautiousWords = ['זהיר', 'בטוח', 'ערבות', 'החזרה', 'סיכון'];
let newProfile = { …customerProfile };
if (analyticalWords.some(word => message.includes(word))) {
newProfile.type = 'analytical';
newProfile.confidence = Math.min(newProfile.confidence + 0.2, 1);
} else if (emotionalWords.some(word => message.includes(word))) {
newProfile.type = ’emotional';
newProfile.confidence = Math.min(newProfile.confidence + 0.2, 1);
} else if (impulsiveWords.some(word => message.includes(word))) {
newProfile.type = 'impulsive';
newProfile.confidence = Math.min(newProfile.confidence + 0.2, 1);
} else if (cautiousWords.some(word => message.includes(word))) {
newProfile.type = 'cautious';
newProfile.confidence = Math.min(newProfile.confidence + 0.2, 1);
}
setCustomerProfile(newProfile);
return newProfile;
};
// בחירת מנוע AI
const selectAIModel = (message) => {
const complexityScore = message.length + (message.split(' ').length * 0.5);
const hasQuestions = message.includes('?');
const isProductQuery = products.some(p => message.includes(p.name));
if (isProductQuery || complexityScore < 20) {
setCurrentModel('Built-in');
setCostSavings(prev => prev + 0.95);
return 'builtin';
} else if (complexityScore < 50 && !hasQuestions) {
setCurrentModel('GPT-3.5');
setCostSavings(prev => prev + 0.5);
return 'gpt3';
} else {
setCurrentModel('GPT-4');
return 'gpt4';
}
};
// יצירת תגובה מותאמת אישית
const generatePersonalizedResponse = (message, profile) => {
const model = selectAIModel(message);
if (model === 'builtin') {
// שימוש בבנק תשובות מובנות
if (message.includes('שלום') || message.includes('היי')) {
return responseBank.greeting[Math.floor(Math.random() * responseBank.greeting.length)];
}
const productQuery = products.find(p => message.includes(p.name));
if (productQuery) {
return `${responseBank.product_info[0]} על ${productQuery.name}`;
}
}
// תגובה מותאמת לפי פרופיל פסיכולוגי
switch (profile.type) {
case 'analytical':
return `מעניין שאלת! אני אכין לך השוואה מפורטת עם נתונים מדויקים. המוצר הזה מוביל בקטגוריה שלו עם ביצועים של 95%.`;
case ’emotional':
return `אני מבין בדיוק איך אתה מרגיש! המוצר הזה באמת מיוחד ויביא לך הרבה שמחה. לקוחות אחרים אומרים שזה שינה להם את החיים!`;
case 'impulsive':
return `מעולה! אני רואה שאתה יודע מה אתה רוצה. יש לי הצעה מיוחדת בשבילך עכשיו – 20% הנחה רק ל-10 הדקות הבאות!`;
case 'cautious':
return `שאלה מצוינת! אני מבין שאתה רוצה להיות בטוח. יש לנו ערבות של 30 יום והחזרה מלאה ללא שאלות. בנוסף, 98% מהלקוחות מרוצים מהמוצר.`;
default:
return `תודה על השאלה! אני כאן לעזור לך למצוא בדיוק מה שאתה מחפש. איך אוכל לעזור לך יותר?`;
}
};
const handleSendMessage = async () => {
if (!input.trim()) return;
const userMessage = {
type: 'user',
content: input,
timestamp: new Date()
};
setMessages(prev => […prev, userMessage]);
setInput(");
setIsThinking(true);
// ניתוח פרופיל הלקוח
const updatedProfile = analyzeCustomerProfile(input);
// השהיה לסימולציה של חשיבה
setTimeout(() => {
const botResponse = generatePersonalizedResponse(input, updatedProfile);
const botMessage = {
type: 'bot',
content: botResponse,
timestamp: new Date(),
model: currentModel,
profile: updatedProfile.type
};
setMessages(prev => […prev, botMessage]);
setIsThinking(false);
// הצגת מוצרים אם רלוונטי
if (input.includes('מוצר') || input.includes('קניה') || input.includes('חפש')) {
setTimeout(() => {
const productMessage = {
type: 'products',
content: products.slice(0, 2),
timestamp: new Date()
};
setMessages(prev => […prev, productMessage]);
}, 1000);
}
}, 1500);
};
const handleVoiceToggle = () => {
setIsListening(!isListening);
if (!isListening) {
// סימולציה של זיהוי קול
setTimeout(() => {
setInput('אני מחפש מכונת קפה טובה');
setIsListening(false);
}, 2000);
}
};
const ProductCard = ({ product }) => (
{product.name}
{product.rating} ({product.reviews} ביקורות)
₪{product.price}
נותרו {product.inStock} יחידות
);
const getProfileColor = (type) => {
switch (type) {
case 'analytical': return 'bg-blue-500';
case ’emotional': return 'bg-pink-500';
case 'impulsive': return 'bg-orange-500';
case 'cautious': return 'bg-green-500';
default: return 'bg-gray-500';
}
};
const getProfileText = (type) => {
switch (type) {
case 'analytical': return 'אנליטי';
case ’emotional': return 'רגשי';
case 'impulsive': return 'אימפולסיבי';
case 'cautious': return 'זהיר';
default: return 'לא ידוע';
}
};
return (
{/* Side Panel */}
מערכת ניתוח לקוח
{/* Customer Profile */}
פרופיל פסיכולוגי
{getProfileText(customerProfile.type)}
{Math.round(customerProfile.confidence * 100)}% ביטחון
{/* AI Model Status */}
מנוע AI נוכחי
{currentModel}
חיסכון: ${costSavings.toFixed(2)}
{/* Statistics */}
סטטיסטיקות
הודעות:
{messages.length}
שימוש GPT-4:
{messages.filter(m => m.model === 'GPT-4').length}
תשובות מובנות:
{messages.filter(m => m.model === 'built-in').length}
{/* Main Chat Area */}
{/* Header */}
{/* Messages */}
{messages.map((message, index) => (
{message.type === 'user' ? (
) : message.type === 'products' ? (
{message.content.map((product, idx) => (
))}
) : (
{message.content}
🤖 {message.model}
{message.profile && (
{getProfileText(message.profile)}
)}
)}
))}
{isThinking && (
)}
{/* Input Area */}
מופעל על ידי AI היברידי
• זיהוי קול
• אינטגרציית WooCommerce
• חיסכון של 85% בעלויות
