/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Interfaces for robust type checking interface Appointment { id?: string; name: string; email: string; phone: string; date: string; time: string; legalIssue: string; status: 'pending' | 'confirmed' | 'cancelled'; } // New interface for chat messages interface ChatMessage { id: string; content: string; sender: 'user' | 'ai' | 'system'; timestamp: number; } function AppointmentScheduler() { const [appointment, setAppointment] = useState({ name: '', email: '', phone: '', date: '', time: '', legalIssue: '', status: 'pending' }); const [submitStatus, setSubmitStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle'); const legalCategories = [ 'Family Law', 'Criminal Defense', 'Personal Injury', 'Business Law', 'Estate Planning', 'Real Estate' ]; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setSubmitStatus('submitting'); try { const response = await fetch('/api/schedule-appointment', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(appointment) }); if (response.ok) { setSubmitStatus('success'); // Reset form after successful submission setAppointment({ name: '', email: '', phone: '', date: '', time: '', legalIssue: '', status: 'pending' }); } else { setSubmitStatus('error'); } } catch (error) { console.error('Appointment submission error', error); setSubmitStatus('error'); } }; return (

📅 Schedule Your Legal Consultation

setAppointment({...appointment, name: e.target.value})} required /> setAppointment({...appointment, email: e.target.value})} required /> setAppointment({...appointment, phone: e.target.value})} required /> setAppointment({...appointment, date: e.target.value})} required /> setAppointment({...appointment, time: e.target.value})} required />

{submitStatus === 'success' && (

🎉 Appointment scheduled successfully! Our team will contact you soon.

)} {submitStatus === 'error' && (

⚠️ Something went wrong. Please try again later.

)}

); } function LegalResourceCenter() { const resources = [ { title: "Understanding Legal Consultations", content: "A comprehensive guide to what to expect in your first legal consultation." }, { title: "Know Your Rights", content: "Essential information about your legal rights in various situations." }, { title: "Legal Process Explained", content: "A step-by-step breakdown of typical legal proceedings." } ]; return (

📚 Legal Resource Center

{resources.map((resource, index) => (

{resource.title}

{resource.content}

))}

); } function App() { const [view, setView] = useState<'schedule' | 'chat' | 'resources'>('schedule'); return (

🏛️ Legal Consultation Services

{view === 'schedule' && } {view === 'resources' && } {view === 'chat' && } View Source

); } function LegalChatbot() { const [messages, setMessages] = useState([ { id: 'welcome', content: "Welcome to our AI Legal Assistant! I'm here to provide general legal guidance. Please remember that this is not a substitute for professional legal advice. How can I help you today?", sender: 'ai', timestamp: Date.now() } ]); const [inputMessage, setInputMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const chatEndRef = useRef(null); const legalCategories = [ 'Family Law', 'Criminal Defense', 'Personal Injury', 'Business Law', 'Estate Planning', 'Real Estate', 'Immigration', 'Employment Law' ]; // Scroll to bottom of chat when messages update useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); const sendMessage = async () => { if (!inputMessage.trim()) return; const userMessage: ChatMessage = { id: `user-${Date.now()}`, content: inputMessage, sender: 'user', timestamp: Date.now() }; // Add user message to chat setMessages(prevMessages => [...prevMessages, userMessage]); setInputMessage(''); setIsLoading(true); try { const response = await fetch('/api/legal-chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [...messages, userMessage], categories: legalCategories }) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); const aiMessage: ChatMessage = { id: `ai-${Date.now()}`, content: data.response, sender: 'ai', timestamp: Date.now() }; setMessages(prevMessages => [...prevMessages, aiMessage]); } catch (error) { console.error('Chat error', error); const errorMessage: ChatMessage = { id: `error-${Date.now()}`, content: "I apologize, but I'm experiencing technical difficulties. Please try again later.", sender: 'system', timestamp: Date.now() }; setMessages(prevMessages => [...prevMessages, errorMessage]); } finally { setIsLoading(false); } }; return (

🏛️ AI Legal Assistant

Providing general legal guidance and information

{messages.map((message) => (

{message.content}

))} {isLoading && (

Analyzing your query... 💭

)}

setInputMessage(e.target.value)} placeholder="Ask a legal question..." onKeyPress={(e) => e.key === 'Enter' && sendMessage()} disabled={isLoading} />

⚠️ Disclaimer: This AI provides general information only. It does not constitute professional legal advice.

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { OpenAI } = await import("https://esm.town/v/std/openai"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const openai = new OpenAI(); // Create tables for appointments and inquiries await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_appointments ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL, phone TEXT NOT NULL, date TEXT NOT NULL, time TEXT NOT NULL, legal_issue TEXT NOT NULL, status TEXT DEFAULT 'pending' ) `); // Appointment Scheduling Endpoint if (url.pathname === '/api/schedule-appointment') { try { const appointmentData = await request.json(); await sqlite.execute( `INSERT INTO ${KEY}_appointments (name, email, phone, date, time, legal_issue, status) VALUES (?, ?, ?, ?, ?, ?, ?)`, [ appointmentData.name, appointmentData.email, appointmentData.phone, appointmentData.date, appointmentData.time, appointmentData.legalIssue, appointmentData.status ] ); return Response.json({ message: "Appointment scheduled successfully", status: "success" }); } catch (error) { console.error('Appointment scheduling error', error); return Response.json({ message: "Error scheduling appointment", status: "error" }, { status: 500 }); } } // New Legal Chat Endpoint if (url.pathname === '/api/legal-chat') { try { const body = await request.json(); // Prepare system prompt with legal context const systemPrompt = ` You are an AI Legal Assistant providing general legal information. Key guidelines: 1. Always clarify that this is NOT professional legal advice 2. Provide clear, concise, and helpful information 3. Recommend consulting a licensed attorney for specific cases 4. Be professional, empathetic, and avoid giving direct legal recommendations 5. If the query is outside your knowledge, guide the user appropriately Legal Categories Available: ${body.categories.join(', ')} `; // Prepare messages for OpenAI, including system context const chatMessages = [ { role: 'system', content: systemPrompt }, ...body.messages.map(msg => ({ role: msg.sender === 'user' ? 'user' : 'assistant', content: msg.content })) ]; // Generate AI response const completion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: chatMessages, max_tokens: 300, temperature: 0.7 }); const response = completion.choices[0].message.content || "I apologize, but I couldn't generate a response at this time."; return Response.json({ response: response + "\n\n(Remember: This is general information, not legal advice.)" }); } catch (error) { console.error('Legal chat error', error); return Response.json({ response: "I'm experiencing technical difficulties. Please try again later." }, { status: 500 }); } } return new Response(` Legal Consultation Services

`, { headers: { "content-type": "text/html" } }); } // Updated CSS to include chatbot styles const css = ` body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } .legal-consultation-app { max-width: 800px; margin: 0 auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } header { text-align: center; margin-bottom: 30px; } nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } nav button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s; } nav button:hover { background-color: #0056b3; } .appointment-scheduler, .legal-resources { background-color: #f9f9f9; padding: 20px; border-radius: 8px; } form { display: flex; flex-direction: column; gap: 15px; } input, select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .success-message { color: green; margin-top: 15px; text-align: center; } .error-message { color: red; margin-top: 15px; text-align: center; } .resource-card { background-color: white; border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 15px; border-radius: 5px; } /* Chatbot Specific Styles */ .legal-chatbot { background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 600px; max-height: 600px; } .chat-header { background-color: #007bff; color: white; padding: 15px; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } .chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; } .message { max-width: 80%; margin-bottom: 15px; padding: 10px 15px; border-radius: 15px; line-height: 1.4; clear: both; } .message.user { background-color: #007bff; color: white; align-self: flex-end; margin-left: auto; } .message.ai { background-color: #e9ecef; color: #333; align-self: flex-start; } .message.system { background-color: #f8d7da; color: #721c24; text-align: center; } .typing-indicator { font-style: italic; color: #6c757d; } .chat-input-container { display: flex; padding: 15px; background-color: white; border-top: 1px solid #e0e0e0; } .chat-input-container input { flex-grow: 1; padding: 10px; margin-right: 10px; border: 1px solid #ddd; border-radius: 5px; } .chat-input-container button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .chat-input-container button:disabled { background-color: #6c757d; cursor: not-allowed; } .chat-disclaimer { text-align: center; font-size: 0.8em; color: #6c757d; padding: 10px; background-color: #f1f3f5; } `;

sereneBeigeSheep

Version 1