[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_168":169,"_170":171},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_127":-5,"_20":128,"_22":129,"_130":131,"_132":133,"_25":134,"_24":-5,"_135":-5,"_136":-5,"_137":54,"_138":139,"_140":45,"_141":-5,"_142":-5,"_143":144},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","mjweaver01","name","SermonGPTUI","branchName","main","version","path","","project",{"_34":74,"_13":14,"_46":75,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":62,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":97,"_99":100,"_101":100,"_102":100,"_103":97,"_104":97,"_105":106,"_107":108,"_109":110,"_111":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","ceb1d60a-26db-11f0-a5b3-569c3dd06744","main.tsx","fileId","cdd98bc4-26db-11f0-a5b3-569c3dd06744","parentId","branchId","cdd5ea0a-26db-11f0-a5b3-569c3dd06744","branchVersion",26,"latest",true,"createdAt",["D",1733966400032],25,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown@9.0.1\";\nimport React, { ErrorInfo, StrictMode, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport remarkGfm from \"https://esm.sh/remark-gfm@4.0.0\";\n\ntype SermonDocument = Document & {\n getElementById(id: \"root\"): HTMLDivElement | null;\n};\n\ndeclare var document: SermonDocument;\n\ninterface Sermon {\n id: string;\n theme: string;\n content: string;\n createdAt: string;\n}\n\n// New ErrorBoundary component\nclass ErrorBoundary extends React.Component<\n { children: React.ReactNode },\n { hasError: boolean; error?: Error }\n>\n{\n constructor(props: { children: React.ReactNode }) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, error };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error(\"Uncaught error:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n return (\n \n

🚨 Something went wrong

We apologize, but an unexpected error occurred.

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

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

🙏 Sermon Generator

\n setCurrentView(\"list\")}\n style={{\n backgroundColor: \"#007bff\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n 📋 View Saved Sermons\n \n \n

\n setQuestion(e.target.value)}\n placeholder=\"Enter a theme or context for the sermon...\"\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n fontFamily: \"'Roboto', sans-serif\",\n fontWeight: 300,\n }}\n />\n \n {isLoading ? \"Preparing the Word...\" : \"Generate Sermon\"}\n \n \n {response && (\n \n

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

,\n a: ({ node, ...props }) => (\n \n ),\n code: ({ node, ...props }) => (\n \n ),\n blockquote: ({ node, ...props }) =>
,\n }}\n >\n {response}\n \n \n )}\n {savedFileUrl && (\n
\n \n 📄 Download Sermon\n \n \n 💾 Save Sermon\n \n
\n )}\n \n );\n\n // Render method for Sermon List View\n const renderSermonList = () => (\n
\n setCurrentView(\"generate\")}\n style={{\n marginBottom: \"20px\",\n backgroundColor: \"transparent\",\n border: \"1px solid #007bff\",\n color: \"#007bff\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n ← Back to Generator\n \n
Saved Sermons
\n {sermons.length === 0 ?
No sermons saved yet.
: (\n
\n {sermons.map((sermon) => (\n \n
\n {sermon.theme}\n
\n {new Date(sermon.createdAt).toLocaleString()}\n
\n
\n {\n setSelectedSermon(sermon);\n setCurrentView(\"view\");\n }}\n style={{\n backgroundColor: \"#007bff\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n View\n \n handleDeleteSermon(sermon.id)}\n style={{\n backgroundColor: \"#dc3545\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n 🗑️ Delete\n \n
\n \n ))}\n
\n )}\n
\n );\n\n // Render method for Individual Sermon View\n const renderSermonView = () => {\n if (!selectedSermon) return null;\n\n return (\n
\n \n setCurrentView(\"list\")}\n style={{\n backgroundColor: \"transparent\",\n border: \"1px solid #007bff\",\n color: \"#007bff\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n ← Back to Sermon List\n \n
\n handleDownload(selectedSermon.content, selectedSermon.theme)}\n style={{\n backgroundColor: \"#28a745\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n 📄 Download Sermon\n \n handleDeleteSermon(selectedSermon.id)}\n style={{\n backgroundColor: \"#dc3545\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: 500,\n }}\n >\n 🗑️ Delete Sermon\n \n
\n
\n
{selectedSermon.theme}
\n {new Date(selectedSermon.createdAt).toLocaleString()}\n
,\n h2: ({ node, ...props }) =>
,\n a: ({ node, ...props }) => (\n \n ),\n code: ({ node, ...props }) => (\n \n ),\n blockquote: ({ node, ...props }) =>
,\n }}\n >\n {selectedSermon.content}\n \n \n );\n };\n\n return (\n \n {currentView === \"generate\" && renderGenerateView()}\n {currentView === \"list\" && renderSermonList()}\n {currentView === \"view\" && renderSermonView()}\n\n \n \n View Source\n \n
\n Created by{\" \"}\n \n Mike Weaver\n \n
\n \n \n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (!root) throw new Error(\"Root element not found\");\n createRoot(root).render(\n \n \n \n \n ,\n );\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n return new Response(\n `\n \n \n Sermon Generator\n \n \n \n \n
\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// Helper function to determine season based on current date\nfunction getSeason(date: Date): string {\n const month = date.getMonth();\n switch (true) {\n case month >= 2 && month <= 4:\n return \"Spring\";\n case month >= 5 && month <= 7:\n return \"Summer\";\n case month >= 8 && month <= 10:\n return \"Autumn\";\n default:\n return \"Winter\";\n }\n}","deleted",false,"label",[36],"cdd99204-26db-11f0-a5b3-569c3dd06744","README.md","cdd992a4-26db-11f0-a5b3-569c3dd06744",1,["D",1733624834122],0,"Migrated from folder: SermonGPT/SermonGPTUI",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":72,"_18":73},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":69,"_18":70},["D",1733966400032],"children",[],[36],["D",1733624834122],[],[58],"cdd59154-26db-11f0-a5b3-569c3dd06744",["D",1746138594146],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","2894e6ba-22e3-4588-929d-24c031089a34","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","400879bc-25cf-4eb0-8108-929ba6a0aa52","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_126":122},"org",{"_11":12,"_120":-5,"_121":122,"_83":84,"_123":124,"_125":54},"branch",{"_17":43,"_13":16,"_34":41,"_112":74,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZjEwSlk3TnRVYmV2VE5taXhheU90aUJHcmoifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":74,"_13":14,"_46":164,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":62,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":97,"_99":100,"_101":100,"_102":100,"_103":97,"_104":97,"_105":165,"_107":166,"_109":167,"_111":54},[158,159],"files",[158,159],"counts",{"_149":62,"_150":60,"_151":60,"_31":152,"_153":154},[145,146],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":148},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":147},[36],[58],"pulls","branches","forks",{"_155":62,"_157":62},"connections",{"_155":62,"_156":62},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":162,"_18":163},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":160,"_18":161},[],[36],[],[58],["D",1746138594146],{"_11":12,"_126":122},{"_11":12,"_120":-5,"_121":122,"_83":84,"_123":124,"_125":54},{"_17":43,"_13":16,"_34":41,"_112":74,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"ctx",{"_105":-5,"_142":201,"_202":203,"_204":205,"_206":54,"_207":54,"_208":54,"_209":45,"_210":-5,"_211":-7,"_212":-7,"_213":62,"_214":54,"_215":54,"_216":-5,"_217":54,"_218":54,"_219":54,"_220":-5},"ENV",{"_172":173,"_174":175,"_176":16,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code