/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1"; import React, { ErrorInfo, StrictMode, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; import remarkGfm from "https://esm.sh/remark-gfm@4.0.0"; type SermonDocument = Document & { getElementById(id: "root"): HTMLDivElement | null; }; declare var document: SermonDocument; interface Sermon { id: string; theme: string; content: string; createdAt: string; } // New ErrorBoundary component 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: ErrorInfo) { console.error("Uncaught error:", error, errorInfo); } render() { if (this.state.hasError) { return (

🚨 Something went wrong

We apologize, but an unexpected error occurred.

{this.state.error?.toString()}

); } return this.props.children; } } const endpointURL = "https://mjweaver01-sermongptapi.web.val.run"; function App() { const [question, setQuestion] = useState(""); const [response, setResponse] = useState(""); const [isLoading, setIsLoading] = useState(false); const [savedFileUrl, setSavedFileUrl] = useState(null); const [sermons, setSermons] = useState([]); const [currentView, setCurrentView] = useState<"generate" | "list" | "view">( "generate", ); const [selectedSermon, setSelectedSermon] = useState(null); const responseRef = useRef(null); const [autoScroll, setAutoScroll] = useState(true); // Fetch saved sermons on component mount useEffect(() => { const fetchSermons = async () => { try { const response = await fetch(`${endpointURL}/sermons`); const data = await response.json(); console.log("Fetched sermons:", data); // Debugging log // Ensure data is an array, even if it's empty setSermons(Array.isArray(data) ? data : []); } catch (error) { console.error("Failed to fetch sermons:", error); // Set to empty array in case of error setSermons([]); } }; fetchSermons(); }, []); // Add this useEffect to handle scrolling behavior useEffect(() => { const handleScroll = () => { const element = responseRef.current; if (!element) return; // Check if user has scrolled up const isAtBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100; setAutoScroll(isAtBottom); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); // Add this useEffect to handle auto-scrolling when response updates useEffect(() => { if (response && autoScroll) { window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth", }); } }, [response, autoScroll]); const handleDownload = (content?: string, theme?: string) => { // If content is passed directly, use it; otherwise use response state const textToDownload = content || response; if (textToDownload) { // Ensure we're working with a string const finalContent = typeof textToDownload === "object" ? JSON.stringify(textToDownload, null, 2) : textToDownload; const blob = new Blob([finalContent], { type: "text/markdown" }); const filename = `sermon_${(theme || question).replace(/\s+/g, "_")}_${ new Date().toISOString().replace(/:/g, "-") }.md`; const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } }; const handleDeleteSermon = async (sermonId: string) => { const confirmDelete = window.confirm( "Are you sure you want to delete this sermon?", ); if (!confirmDelete) return; try { const response = await fetch(`${endpointURL}/delete-sermon/${sermonId}`, { method: "DELETE", }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } // Remove the deleted sermon from the list setSermons((prev) => prev.filter((sermon) => sermon.id !== sermonId)); // If the currently viewed sermon is deleted, return to list view if (selectedSermon?.id === sermonId) { setCurrentView("list"); setSelectedSermon(null); } alert("Sermon deleted successfully!"); } catch (error) { console.error("Failed to delete sermon:", error); alert("Failed to delete sermon. Please try again."); } }; const handleSaveSermon = async () => { if (!response || !question) { alert("Please generate a sermon before saving."); return; } try { const res = await fetch(`${endpointURL}/save-sermon`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ theme: question, content: response, }), }); if (!res.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const savedSermon = await res.json(); console.log("Saved sermon:", savedSermon); // Debugging log setSermons((prev) => [savedSermon, ...prev]); alert("Sermon saved successfully!"); } catch (error) { console.error("Failed to save sermon:", error); alert("Failed to save sermon. Please try again."); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setResponse(""); setSavedFileUrl(null); setIsLoading(true); try { const res = await fetch(`${endpointURL}/stream`, { method: "POST", body: JSON.stringify({ question }), }); if (!res.body) return; const reader = res.body.getReader(); const decoder = new TextDecoder(); let fullResponse = ""; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); fullResponse += chunk; setResponse((prev) => prev + chunk); } const blob = new Blob([fullResponse], { type: "text/markdown" }); const url = URL.createObjectURL(blob); setSavedFileUrl(url); } catch (error) { console.error("Streaming error:", error); } finally { setIsLoading(false); } }; // Render method for Generate View const renderGenerateView = () => ( <>

🙏 Sermon Generator

{response && (

, h2: ({ node, ...props }) =>

, a: ({ node, ...props }) => ( ), code: ({ node, ...props }) => ( `), blockquote: ({ node, ...props }) => , }} > {response}`


      )}
      {savedFileUrl && (
        
          
          
        
      )}
    
  );

  // Render method for Sermon List View
  const renderSermonList = () => (
    
      
      Saved Sermons
      {sermons.length === 0 ? No sermons saved yet. : (
        
          {sermons.map((sermon) => (
            
              
                {sermon.theme}
                

                {new Date(sermon.createdAt).toLocaleString()}
              
              
                
                
              
            
          ))}
        
      )}
    
  );

  // Render method for Individual Sermon View
  const renderSermonView = () => {
    if (!selectedSermon) return null;

    return (


        
          
          
            
            
          
        
        {selectedSermon.theme}
        {new Date(selectedSermon.createdAt).toLocaleString()}
         ,
            h2: ({ node, ...props }) => ,
            a: ({ node, ...props }) => (
              
            ),
            code: ({ node, ...props }) => (
              
            ),
            blockquote: ({ node, ...props }) => ,
          }}
        >
          {selectedSermon.content}
        
      

    );
  };

  return (
    
      {currentView === "generate" && renderGenerateView()}
      {currentView === "list" && renderSermonList()}
      {currentView === "view" && renderSermonView()}

      
        
          View Source
        
        
          Created by{" "}
          
            Mike Weaver
          
        
      
    
  );
}

function client() {
  const root = document.getElementById("root");
  if (!root) throw new Error("Root element not found");
  createRoot(root).render(
    
      
        
      
    ,
  );
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise {
  const { blob } = await import("https://esm.town/v/std/blob");

  return new Response(
    `
    
      
        Sermon Generator
        
        
      
      
        
        
      
    
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

// Helper function to determine season based on current date
function getSeason(date: Date): string {
  const month = date.getMonth();
  switch (true) {
    case month >= 2 && month <= 4:
      return "Spring";
    case month >= 5 && month <= 7:
      return "Summer";
    case month >= 8 && month <= 10:
      return "Autumn";
    default:
      return "Winter";
  }
}

🚨 Something went wrong

🙏 Sermon Generator

, h2: ({ node, ...props }) =>

, a: ({ node, ...props }) => ( ), code: ({ node, ...props }) => ( ), blockquote: ({ node, ...props }) => , }} > {response}

Saved Sermons

{selectedSermon.theme}

, h2: ({ node, ...props }) =>

, a: ({ node, ...props }) => ( ), code: ({ node, ...props }) => ( ), blockquote: ({ node, ...props }) => , }} > {selectedSermon.content}

, a: ({ node, ...props }) => ( ), code: ({ node, ...props }) => ( `), blockquote: ({ node, ...props }) => , }} > {response}`

, a: ({ node, ...props }) => ( ), code: ({ node, ...props }) => ( `), blockquote: ({ node, ...props }) => , }} > {selectedSermon.content}`

SermonGPTUI