Back
Version 3
2/28/2025
/** @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";
import { marked } from "https://esm.sh/marked@9.0.0";
import hljs from "https://esm.sh/highlight.js@11.8.0";
function App() {
const [messages, setMessages] = useState([
{ role: 'assistant', content: 'Hello! I\'m an AI assistant. How can I help you today?\n\nI can help you with code snippets in multiple languages. Try me!' }
]);
const [input, setInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [theme, setTheme] = useState('light');
const [model, setModel] = useState('gpt-4o-mini');
const messagesEndRef = useRef(null);
useEffect(() => {
// Highlight code blocks after rendering
const timer = setTimeout(() => {
document.querySelectorAll('pre code').forEach((block) => {
try {
hljs.highlightElement(block as HTMLElement);
} catch (error) {
console.warn('Highlighting error:', error);
}
});
}, 100);
return () => clearTimeout(timer);
}, [messages]);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(scrollToBottom, [messages]);
keval-ecstaticsalmonorangutan.web.val.run
Updated: March 1, 2025