import React, { useState, useEffect, useRef } from 'react'; /** * Chat Widget - A simple chat interface for the Chat_Message API * * This widget demonstrates: * - Sending messages to the Chat_Message endpoint * - Maintaining conversation context with conversationId * - Auto-detecting logged-in users via Firebase * - Message history display with user/assistant styling */ export default function ChatWidget() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [conversationId, setConversationId] = useState(null); const [userEmail, setUserEmail] = useState(null); const messagesContainerRef = useRef(null); // Auto-scroll to bottom when new messages arrive const scrollToBottom = () => { if (messagesContainerRef.current) { messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight; } }; useEffect(() => { if(messages.length > 2) { scrollToBottom(); } }, [messages]); // Check for logged-in user on mount useEffect(() => { const initFirebase = async () => { try { const fb = await API.getFB(); if (fb) { fb.onUserChanged((user) => { if (user) { setUserEmail(user.email); } else { setUserEmail(null); } }); } } catch (err) { console.log('Firebase not available, continuing without auth'); } }; initFirebase(); }, []); const sendMessage = async () => { if (!input.trim() || loading) return; const userMessage = input.trim(); setInput(''); setError(null); setLoading(true); // Add user message to the list immediately setMessages(prev => [...prev, { role: 'user', content: userMessage }]); try { const result = await API.Chat_Message(userMessage, conversationId, userEmail); // Update conversation ID for future messages if (result.conversationId) { setConversationId(result.conversationId); } // Add assistant response setMessages(prev => [...prev, { role: 'assistant', content: result.response }]); } catch (err) { console.error('Chat error:', err); setError(err.message || 'Failed to send message'); // Remove the user message on error setMessages(prev => prev.slice(0, -1)); } finally { setLoading(false); } }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; const startNewConversation = () => { setMessages([]); setConversationId(null); setError(null); }; return (

{/* Header */}

AI Assistant

{/* Messages Area */}

{messages.length === 0 && (

Start a conversation!

Type a message below to begin.

)} {messages.map((msg, index) => (

{msg.content}

))} {loading && (

)}

{/* Error Display */} {error && (

{error}

)} {/* Input Area */}

setInput(e.target.value)} onKeyPress={handleKeyPress} placeholder="Type your message..." readOnly={loading} className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 text-black" />

{userEmail && (

Logged in as {userEmail}

)}

); }