Back

Version 8

12/19/2024
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function App() {
const [messages, setMessages] = useState([
{ type: 'bot', content: 'Welcome! I\'m ready for any conversation.' }
]);
const textInputRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const messagesEndRef = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(false);
const [projectId, setProjectId] = useState<string | null>(null);

useEffect(() => {
// Fetch project ID from server when component mounts
fetch('/project-id')
.then(response => response.text())
.then(id => setProjectId(id));
}, []);

const addMessage = (message: string, type: 'user' | 'bot') => {
setMessages(prev => [...prev, { type, content: message }]);
};

const handleSend = async () => {
if (textInputRef.current && textInputRef.current.value.trim()) {
const message = textInputRef.current.value.trim();
addMessage(message, 'user');
setIsLoading(true);
try {
// Simple response generation
const response = generateResponse(message);
addMessage(response, 'bot');
} catch (error) {
lucasmillen-millenchat.web.val.run
Updated: December 19, 2024