auto-claude: subtask-5-2 - Create main Chatbot component with floating UI and message handling
- Created Chatbot.tsx with floating chat bubble UI - Implemented streaming SSE message handling - Added visitor ID persistence via localStorage for session continuity - Integrated with /api/chat endpoint for AI responses - Added suggested prompts for empty chat state - Implemented error handling with retry functionality - Added clear chat functionality - Created responsive design with mobile support - Created index.ts barrel export for chat components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.5
@@ -0,0 +1,441 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { MessageCircle, X, Send, Loader2, AlertCircle, RotateCcw } from 'lucide-react';
|
||||||
|
import { ChatMessage, ChatMessageData, TypingIndicator, WelcomeMessage } from './ChatMessage';
|
||||||
|
|
||||||
|
// Generate a unique visitor ID for session persistence
|
||||||
|
function generateVisitorId(): string {
|
||||||
|
// Check if we already have an ID in localStorage
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const existingId = localStorage.getItem('chatbot_visitor_id');
|
||||||
|
if (existingId) {
|
||||||
|
return existingId;
|
||||||
|
}
|
||||||
|
// Generate a new UUID-like ID
|
||||||
|
const newId = `visitor_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
|
||||||
|
localStorage.setItem('chatbot_visitor_id', newId);
|
||||||
|
return newId;
|
||||||
|
}
|
||||||
|
return `visitor_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Suggested prompts for empty chat state
|
||||||
|
const SUGGESTED_PROMPTS = [
|
||||||
|
'What services do you offer?',
|
||||||
|
'Tell me about your experience',
|
||||||
|
'What technologies do you work with?',
|
||||||
|
];
|
||||||
|
|
||||||
|
interface StreamChunk {
|
||||||
|
content?: string;
|
||||||
|
done?: boolean;
|
||||||
|
error?: string;
|
||||||
|
sessionId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Chatbot() {
|
||||||
|
// UI state
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isMinimized, setIsMinimized] = useState(false);
|
||||||
|
|
||||||
|
// Chat state
|
||||||
|
const [messages, setMessages] = useState<ChatMessageData[]>([]);
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [sessionId, setSessionId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Refs
|
||||||
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const visitorIdRef = useRef<string>('');
|
||||||
|
|
||||||
|
// Initialize visitor ID on mount
|
||||||
|
useEffect(() => {
|
||||||
|
visitorIdRef.current = generateVisitorId();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Auto-scroll to bottom when messages change
|
||||||
|
useEffect(() => {
|
||||||
|
if (messagesEndRef.current) {
|
||||||
|
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
|
// Focus input when chat opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && !isMinimized && inputRef.current) {
|
||||||
|
setTimeout(() => inputRef.current?.focus(), 100);
|
||||||
|
}
|
||||||
|
}, [isOpen, isMinimized]);
|
||||||
|
|
||||||
|
// Load chat history when opening
|
||||||
|
const loadChatHistory = useCallback(async () => {
|
||||||
|
if (!visitorIdRef.current) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/chat?visitorId=${encodeURIComponent(visitorIdRef.current)}`);
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.messages && data.messages.length > 0) {
|
||||||
|
setMessages(data.messages);
|
||||||
|
}
|
||||||
|
if (data.sessionId) {
|
||||||
|
setSessionId(data.sessionId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Silently fail - user can still start a new conversation
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Load history when chat opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
loadChatHistory();
|
||||||
|
}
|
||||||
|
}, [isOpen, loadChatHistory]);
|
||||||
|
|
||||||
|
// Send a message to the API
|
||||||
|
const sendMessage = useCallback(async (messageText: string) => {
|
||||||
|
if (!messageText.trim() || isLoading) return;
|
||||||
|
|
||||||
|
const userMessage: ChatMessageData = {
|
||||||
|
id: `user_${Date.now()}`,
|
||||||
|
role: 'user',
|
||||||
|
content: messageText.trim(),
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add user message immediately
|
||||||
|
setMessages((prev) => [...prev, userMessage]);
|
||||||
|
setInputValue('');
|
||||||
|
setError(null);
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
// Create placeholder for streaming response
|
||||||
|
const assistantMessageId = `assistant_${Date.now()}`;
|
||||||
|
const assistantMessage: ChatMessageData = {
|
||||||
|
id: assistantMessageId,
|
||||||
|
role: 'assistant',
|
||||||
|
content: '',
|
||||||
|
isStreaming: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/chat', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
message: messageText.trim(),
|
||||||
|
visitorId: visitorIdRef.current,
|
||||||
|
sessionId: sessionId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(errorData.error || 'Failed to send message');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add assistant message placeholder for streaming
|
||||||
|
setMessages((prev) => [...prev, assistantMessage]);
|
||||||
|
|
||||||
|
// Handle streaming response
|
||||||
|
const reader = response.body?.getReader();
|
||||||
|
if (!reader) {
|
||||||
|
throw new Error('No response stream available');
|
||||||
|
}
|
||||||
|
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
let buffer = '';
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
|
||||||
|
if (done) break;
|
||||||
|
|
||||||
|
buffer += decoder.decode(value, { stream: true });
|
||||||
|
|
||||||
|
// Process complete SSE events
|
||||||
|
const lines = buffer.split('\n\n');
|
||||||
|
buffer = lines.pop() || '';
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
if (line.startsWith('data: ')) {
|
||||||
|
try {
|
||||||
|
const data: StreamChunk = JSON.parse(line.slice(6));
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
throw new Error(data.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.sessionId && !sessionId) {
|
||||||
|
setSessionId(data.sessionId);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.content) {
|
||||||
|
// Update the streaming message content
|
||||||
|
setMessages((prev) =>
|
||||||
|
prev.map((msg) =>
|
||||||
|
msg.id === assistantMessageId
|
||||||
|
? { ...msg, content: msg.content + data.content }
|
||||||
|
: msg
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.done) {
|
||||||
|
// Mark message as no longer streaming
|
||||||
|
setMessages((prev) =>
|
||||||
|
prev.map((msg) =>
|
||||||
|
msg.id === assistantMessageId
|
||||||
|
? { ...msg, isStreaming: false, created_at: new Date().toISOString() }
|
||||||
|
: msg
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
// Ignore parse errors for incomplete chunks
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// Remove the placeholder message on error
|
||||||
|
setMessages((prev) => prev.filter((msg) => msg.id !== assistantMessageId));
|
||||||
|
setError(err instanceof Error ? err.message : 'Failed to send message');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, [isLoading, sessionId]);
|
||||||
|
|
||||||
|
// Handle form submission
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
sendMessage(inputValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle suggested prompt click
|
||||||
|
const handleSuggestedPrompt = (prompt: string) => {
|
||||||
|
sendMessage(prompt);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Clear chat history
|
||||||
|
const clearChat = () => {
|
||||||
|
setMessages([]);
|
||||||
|
setError(null);
|
||||||
|
setSessionId(null);
|
||||||
|
// Generate new visitor ID for fresh session
|
||||||
|
const newId = `visitor_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
|
||||||
|
localStorage.setItem('chatbot_visitor_id', newId);
|
||||||
|
visitorIdRef.current = newId;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toggle chat open/close
|
||||||
|
const toggleChat = () => {
|
||||||
|
if (isOpen) {
|
||||||
|
setIsOpen(false);
|
||||||
|
setIsMinimized(false);
|
||||||
|
} else {
|
||||||
|
setIsOpen(true);
|
||||||
|
setIsMinimized(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Floating Action Button */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{!isOpen && (
|
||||||
|
<motion.button
|
||||||
|
initial={{ scale: 0, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0, opacity: 0 }}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
onClick={toggleChat}
|
||||||
|
className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-zinc-100 hover:bg-white text-zinc-900 shadow-lg shadow-black/20 flex items-center justify-center transition-colors"
|
||||||
|
aria-label="Open chat"
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-6 h-6" />
|
||||||
|
</motion.button>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Chat Window */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className={`fixed z-50 bg-zinc-900 border border-zinc-800 shadow-2xl shadow-black/40 flex flex-col overflow-hidden ${
|
||||||
|
isMinimized
|
||||||
|
? 'bottom-6 right-6 w-80 h-14 rounded-full'
|
||||||
|
: 'bottom-6 right-6 w-[380px] h-[600px] max-h-[calc(100vh-3rem)] rounded-2xl sm:max-w-[calc(100vw-3rem)]'
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// Responsive: full width on very small screens
|
||||||
|
...(typeof window !== 'undefined' && window.innerWidth < 400
|
||||||
|
? { left: '0.75rem', right: '0.75rem', width: 'auto' }
|
||||||
|
: {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-between px-4 bg-zinc-800/50 border-b border-zinc-800 ${
|
||||||
|
isMinimized ? 'h-full rounded-full' : 'h-14'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-zinc-700/50 flex items-center justify-center">
|
||||||
|
<MessageCircle className="w-4 h-4 text-zinc-300" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium text-white">AI Assistant</span>
|
||||||
|
{!isMinimized && (
|
||||||
|
<span className="text-xs text-zinc-400">Ask me anything</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{/* Clear Chat Button */}
|
||||||
|
{!isMinimized && messages.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={clearChat}
|
||||||
|
className="p-2 rounded-lg hover:bg-zinc-700/50 text-zinc-400 hover:text-zinc-200 transition-colors"
|
||||||
|
aria-label="Clear chat"
|
||||||
|
title="Clear chat"
|
||||||
|
>
|
||||||
|
<RotateCcw className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Close Button */}
|
||||||
|
<button
|
||||||
|
onClick={toggleChat}
|
||||||
|
className="p-2 rounded-lg hover:bg-zinc-700/50 text-zinc-400 hover:text-zinc-200 transition-colors"
|
||||||
|
aria-label="Close chat"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages Container */}
|
||||||
|
{!isMinimized && (
|
||||||
|
<>
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||||
|
{/* Welcome Message for Empty State */}
|
||||||
|
{messages.length === 0 && !isLoading && (
|
||||||
|
<>
|
||||||
|
<WelcomeMessage />
|
||||||
|
|
||||||
|
{/* Suggested Prompts */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<p className="text-xs text-zinc-500 text-center mb-2">
|
||||||
|
Try asking:
|
||||||
|
</p>
|
||||||
|
{SUGGESTED_PROMPTS.map((prompt, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => handleSuggestedPrompt(prompt)}
|
||||||
|
className="w-full px-4 py-2.5 text-sm text-left bg-zinc-800/50 border border-zinc-800 rounded-xl text-zinc-300 hover:bg-zinc-700/50 hover:border-zinc-700 transition-colors"
|
||||||
|
>
|
||||||
|
{prompt}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Chat Messages */}
|
||||||
|
{messages.map((message, index) => (
|
||||||
|
<ChatMessage
|
||||||
|
key={message.id || index}
|
||||||
|
message={message}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Typing Indicator */}
|
||||||
|
{isLoading && !messages.some((m) => m.isStreaming) && (
|
||||||
|
<TypingIndicator />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{error && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex items-start gap-2 p-3 bg-red-900/20 border border-red-900/50 rounded-xl"
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-sm text-red-400">{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setError(null)}
|
||||||
|
className="text-xs text-red-500 hover:text-red-400 mt-1"
|
||||||
|
>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Scroll anchor */}
|
||||||
|
<div ref={messagesEndRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Form */}
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="p-4 border-t border-zinc-800 bg-zinc-900"
|
||||||
|
>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="text"
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
|
placeholder="Type a message..."
|
||||||
|
disabled={isLoading}
|
||||||
|
className="flex-1 h-11 px-4 bg-zinc-800/50 border border-zinc-800 rounded-xl text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-600 disabled:opacity-50"
|
||||||
|
aria-label="Chat message input"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading || !inputValue.trim()}
|
||||||
|
className="h-11 w-11 bg-zinc-100 hover:bg-white text-zinc-900 rounded-xl flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
aria-label="Send message"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<Loader2 className="w-5 h-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Privacy note */}
|
||||||
|
<p className="text-xs text-zinc-500 text-center mt-2">
|
||||||
|
Messages may be stored to improve service
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Chatbot;
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* Chat components barrel export
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { Chatbot } from './Chatbot';
|
||||||
|
export { ChatMessage, TypingIndicator, WelcomeMessage } from './ChatMessage';
|
||||||
|
export type { ChatMessageData, ChatRole } from './ChatMessage';
|
||||||
Reference in New Issue
Block a user