// @val config // { // "name": "AI Chat Assistant", // "description": "A chat assistant using OpenAI's API", // "permissions": ["env"] // } /** @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"; // Robust type definitions interface Message { id: number; type: 'user' | 'bot'; content: string; timestamp: string; } // Fallback AI response generator function generateFallbackResponse(userMessage: string): string { const lowerMessage = userMessage.toLowerCase(); const responses = [ { keywords: ['hi', 'hello', 'hey'], response: "Hello! How are you today?" }, { keywords: ['how are you', 'how are things'], response: "I'm doing well, thanks for asking!" }, { keywords: ['help', 'assist'], response: "I'm here to help. What do you need?" }, { keywords: ['joke', 'humor'], response: "Why did the AI cross the road? To optimize the shortest path!" }, { keywords: ['weather'], response: "I can't check the weather, but I hope it's nice where you are!" } ]; const matchedResponse = responses.find(r => r.keywords.some(keyword => lowerMessage.includes(keyword)) ); return matchedResponse ? matchedResponse.response : "I heard you, but I'm not sure how to respond. Could you rephrase that?"; } // Error Boundary Component with improved error handling class ErrorBoundary extends React.Component< { children: React.ReactNode }, { hasError: boolean; error?: Error } > { constructor(props: { children: React.ReactNode }) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error: Error) { return { hasError: true, error }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error("Uncaught error:", error, errorInfo); } render() { if (this.state.hasError) { return (

🚨 Something Went Wrong

{this.state.error?.message}

); } return this.props.children; } } async function callOpenAI(userMessage: string): Promise { const apiKey = Deno.env.get("OPENAI_API_KEY"); if (!apiKey) { throw new Error("OpenAI API key is not configured. Please set the OPENAI_API_KEY environment variable."); } try { const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ model: "gpt-4o-mini", messages: [ { role: "system", content: "You are a helpful, friendly AI assistant. Respond concisely and helpfully." }, { role: "user", content: userMessage } ], max_tokens: 150 }) }); if (!response.ok) { const errorBody = await response.text(); throw new Error(`OpenAI API error: ${response.status} - ${errorBody}`); } const data = await response.json(); return data.choices[0]?.message?.content || "I'm not sure how to respond to that."; } catch (error) { console.error("OpenAI API Call Error:", error); throw error; } } function App() { const [messages, setMessages] = useState([ { id: 0, type: 'bot', content: "Hi! I'm your AI assistant. How can I help you today?", timestamp: new Date().toLocaleTimeString() } ]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); const [openAIError, setOpenAIError] = useState(null); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(scrollToBottom, [messages]); const addMessage = (content: string, type: 'user' | 'bot') => { const newMessage: Message = { id: Date.now(), type, content, timestamp: new Date().toLocaleTimeString() }; setMessages(prev => [...prev, newMessage]); }; const handleSendMessage = async () => { const userMessage = input.trim(); if (!userMessage) return; // Add user message addMessage(userMessage, 'user'); setInput(''); setIsLoading(true); setOpenAIError(null); try { const botReply = await callOpenAI(userMessage); addMessage(botReply, 'bot'); } catch (error) { console.error("Complete AI Response Error:", error); const errorMessage = error instanceof Error ? error.message : String(error); setOpenAIError(errorMessage); const fallbackResponse = generateFallbackResponse(userMessage); addMessage(`Sorry, AI service error: ${errorMessage}. Fallback response: ${fallbackResponse}`, 'bot'); } finally { setIsLoading(false); } }; return (

{openAIError && (

OpenAI Error: {openAIError}

)}

{messages.map(msg => (

{msg.content}

{msg.timestamp}

))}

setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()} placeholder="Type a message..." style={{ flex: 1, padding: '10px', borderRadius: '5px', border: '1px solid #ddd' }} />

); } export default async function server(request: Request): Promise { // Check if OpenAI API key is configured const apiKey = Deno.env.get("OPENAI_API_KEY"); if (!apiKey) { return new Response(` Configuration Error

🚨 Configuration Error

OpenAI API key is not configured. Please set the OPENAI_API_KEY environment variable.

Contact the val owner to resolve this issue.

`, { headers: { 'Content-Type': 'text/html', 'status': '500' } }); } return new Response(` AI Chat Assistant

`, { headers: { 'Content-Type': 'text/html' } }); } export { App, ErrorBoundary };

MILLENCHAT

Versions

v0