332 lines
14 KiB
JavaScript
332 lines
14 KiB
JavaScript
import React, { useState } from "react";
|
|
import { base44 } from "@/api/base44Client";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Zap, Send, Check, Edit3, MapPin, Clock, Users, AlertCircle, Sparkles } from "lucide-react";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
export default function RapidOrderChat({ onOrderCreated }) {
|
|
const { toast } = useToast();
|
|
const queryClient = useQueryClient();
|
|
const [message, setMessage] = useState("");
|
|
const [conversation, setConversation] = useState([]);
|
|
const [detectedOrder, setDetectedOrder] = useState(null);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
|
|
const { data: user } = useQuery({
|
|
queryKey: ['current-user-rapid'],
|
|
queryFn: () => base44.auth.me(),
|
|
});
|
|
|
|
const { data: businesses } = useQuery({
|
|
queryKey: ['user-businesses'],
|
|
queryFn: () => base44.entities.Business.filter({ contact_name: user?.full_name }),
|
|
enabled: !!user,
|
|
initialData: [],
|
|
});
|
|
|
|
const createRapidOrderMutation = useMutation({
|
|
mutationFn: (orderData) => base44.entities.Event.create(orderData),
|
|
onSuccess: (data) => {
|
|
queryClient.invalidateQueries({ queryKey: ['events'] });
|
|
toast({
|
|
title: "✅ RAPID Order Created",
|
|
description: "Order sent to preferred vendor with priority notification",
|
|
});
|
|
if (onOrderCreated) onOrderCreated(data);
|
|
// Reset
|
|
setConversation([]);
|
|
setDetectedOrder(null);
|
|
setMessage("");
|
|
},
|
|
});
|
|
|
|
const analyzeMessage = async (msg) => {
|
|
setIsProcessing(true);
|
|
|
|
// Add user message to conversation
|
|
setConversation(prev => [...prev, { role: 'user', content: msg }]);
|
|
|
|
try {
|
|
// Use AI to parse the message
|
|
const response = await base44.integrations.Core.InvokeLLM({
|
|
prompt: `You are an order assistant. Analyze this message and extract order details:
|
|
|
|
Message: "${msg}"
|
|
Current user: ${user?.full_name}
|
|
User's locations: ${businesses.map(b => b.business_name).join(', ')}
|
|
|
|
Extract:
|
|
1. Urgency keywords (ASAP, today, emergency, call out, urgent, rapid, now)
|
|
2. Role/position needed (cook, bartender, server, dishwasher, etc.)
|
|
3. Number of staff (if mentioned)
|
|
4. Time frame (if mentioned)
|
|
5. Location (if mentioned, otherwise use first available location)
|
|
|
|
Return a concise summary.`,
|
|
response_json_schema: {
|
|
type: "object",
|
|
properties: {
|
|
is_urgent: { type: "boolean" },
|
|
role: { type: "string" },
|
|
count: { type: "number" },
|
|
location: { type: "string" },
|
|
time_mentioned: { type: "boolean" },
|
|
start_time: { type: "string" },
|
|
end_time: { type: "string" }
|
|
}
|
|
}
|
|
});
|
|
|
|
const parsed = response;
|
|
const primaryLocation = businesses[0]?.business_name || "Primary Location";
|
|
|
|
const order = {
|
|
is_rapid: parsed.is_urgent || true,
|
|
role: parsed.role || "Staff Member",
|
|
count: parsed.count || 1,
|
|
location: parsed.location || primaryLocation,
|
|
start_time: parsed.start_time || "ASAP",
|
|
end_time: parsed.end_time || "End of shift",
|
|
business_name: primaryLocation,
|
|
hub: businesses[0]?.hub_building || "Main Hub"
|
|
};
|
|
|
|
setDetectedOrder(order);
|
|
|
|
// AI response
|
|
const aiMessage = `Is this a RAPID ORDER for **${order.count} ${order.role}${order.count > 1 ? 's' : ''}** at **${order.location}**?\n\nTime: ${order.start_time} → ${order.end_time}`;
|
|
|
|
setConversation(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: aiMessage,
|
|
showConfirm: true
|
|
}]);
|
|
|
|
} catch (error) {
|
|
setConversation(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: "I couldn't process that. Please provide more details like: role needed, how many, and when."
|
|
}]);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const handleSendMessage = () => {
|
|
if (!message.trim()) return;
|
|
analyzeMessage(message);
|
|
setMessage("");
|
|
};
|
|
|
|
const handleConfirmOrder = () => {
|
|
if (!detectedOrder) return;
|
|
|
|
const now = new Date();
|
|
const orderData = {
|
|
event_name: `RAPID: ${detectedOrder.count} ${detectedOrder.role}${detectedOrder.count > 1 ? 's' : ''}`,
|
|
is_rapid: true,
|
|
status: "Pending",
|
|
business_name: detectedOrder.business_name,
|
|
hub: detectedOrder.hub,
|
|
event_location: detectedOrder.location,
|
|
date: now.toISOString().split('T')[0],
|
|
requested: detectedOrder.count,
|
|
client_name: user?.full_name,
|
|
client_email: user?.email,
|
|
notes: `RAPID ORDER - ${detectedOrder.start_time} to ${detectedOrder.end_time}`,
|
|
shifts: [{
|
|
shift_name: "Emergency Shift",
|
|
roles: [{
|
|
role: detectedOrder.role,
|
|
count: detectedOrder.count,
|
|
start_time: "ASAP",
|
|
end_time: "End of shift"
|
|
}]
|
|
}]
|
|
};
|
|
|
|
createRapidOrderMutation.mutate(orderData);
|
|
};
|
|
|
|
const handleEditOrder = () => {
|
|
setConversation(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: "Please describe what you'd like to change."
|
|
}]);
|
|
setDetectedOrder(null);
|
|
};
|
|
|
|
return (
|
|
<Card className="bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 border-2 border-red-300 shadow-xl">
|
|
<CardHeader className="border-b border-red-200 bg-white/50 backdrop-blur-sm">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-500 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
|
|
<Zap className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<CardTitle className="text-xl font-bold text-red-700 flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5" />
|
|
RAPID Order Assistant
|
|
</CardTitle>
|
|
<p className="text-xs text-red-600 mt-1">Emergency staffing in minutes</p>
|
|
</div>
|
|
<Badge className="bg-red-600 text-white font-bold text-sm px-4 py-2 shadow-md animate-pulse">
|
|
URGENT
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="p-6">
|
|
{/* Chat Messages */}
|
|
<div className="space-y-4 mb-6 max-h-[400px] overflow-y-auto">
|
|
{conversation.length === 0 && (
|
|
<div className="text-center py-8">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-red-500 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<Zap className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-lg text-slate-900 mb-2">Need staff urgently?</h3>
|
|
<p className="text-sm text-slate-600 mb-4">Just describe what you need, I'll handle the rest</p>
|
|
<div className="text-left max-w-md mx-auto space-y-2">
|
|
<div className="bg-white p-3 rounded-lg border border-slate-200 text-xs text-slate-600">
|
|
<strong>Example:</strong> "We had a call out. Need 2 cooks ASAP"
|
|
</div>
|
|
<div className="bg-white p-3 rounded-lg border border-slate-200 text-xs text-slate-600">
|
|
<strong>Example:</strong> "Emergency! Need bartender for tonight"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<AnimatePresence>
|
|
{conversation.map((msg, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
|
>
|
|
<div className={`max-w-[80%] ${
|
|
msg.role === 'user'
|
|
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white'
|
|
: 'bg-white border-2 border-red-200'
|
|
} rounded-2xl p-4 shadow-md`}>
|
|
{msg.role === 'assistant' && (
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center">
|
|
<Sparkles className="w-3 h-3 text-white" />
|
|
</div>
|
|
<span className="text-xs font-bold text-red-600">AI Assistant</span>
|
|
</div>
|
|
)}
|
|
<p className={`text-sm whitespace-pre-line ${msg.role === 'user' ? 'text-white' : 'text-slate-900'}`}>
|
|
{msg.content}
|
|
</p>
|
|
|
|
{msg.showConfirm && detectedOrder && (
|
|
<div className="mt-4 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3 p-3 bg-gradient-to-br from-slate-50 to-blue-50 rounded-lg border border-blue-200">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<Users className="w-4 h-4 text-blue-600" />
|
|
<div>
|
|
<p className="text-slate-500">Staff Needed</p>
|
|
<p className="font-bold text-slate-900">{detectedOrder.count} {detectedOrder.role}{detectedOrder.count > 1 ? 's' : ''}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<MapPin className="w-4 h-4 text-blue-600" />
|
|
<div>
|
|
<p className="text-slate-500">Location</p>
|
|
<p className="font-bold text-slate-900">{detectedOrder.location}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs col-span-2">
|
|
<Clock className="w-4 h-4 text-blue-600" />
|
|
<div>
|
|
<p className="text-slate-500">Time</p>
|
|
<p className="font-bold text-slate-900">{detectedOrder.start_time} → {detectedOrder.end_time}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleConfirmOrder}
|
|
disabled={createRapidOrderMutation.isPending}
|
|
className="flex-1 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-lg"
|
|
>
|
|
<Check className="w-4 h-4 mr-2" />
|
|
{createRapidOrderMutation.isPending ? "Creating..." : "CONFIRM & SEND"}
|
|
</Button>
|
|
<Button
|
|
onClick={handleEditOrder}
|
|
variant="outline"
|
|
className="border-2 border-red-300 hover:bg-red-50"
|
|
>
|
|
<Edit3 className="w-4 h-4 mr-2" />
|
|
EDIT
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
|
|
{isProcessing && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex justify-start"
|
|
>
|
|
<div className="bg-white border-2 border-red-200 rounded-2xl p-4 shadow-md">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center animate-pulse">
|
|
<Sparkles className="w-3 h-3 text-white" />
|
|
</div>
|
|
<span className="text-sm text-slate-600">Processing your request...</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
|
placeholder="Describe what you need... (e.g., 'Need 2 cooks ASAP')"
|
|
className="flex-1 border-2 border-red-300 focus:border-red-500 text-base"
|
|
disabled={isProcessing}
|
|
/>
|
|
<Button
|
|
onClick={handleSendMessage}
|
|
disabled={!message.trim() || isProcessing}
|
|
className="bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-lg"
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Helper Text */}
|
|
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div className="text-xs text-blue-800">
|
|
<strong>Tip:</strong> Include role, quantity, and urgency for fastest processing.
|
|
AI will auto-detect your location and send to your preferred vendor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |