[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_125":-5,"_20":126,"_22":127,"_128":129,"_130":131,"_25":132,"_24":-5,"_133":134,"_135":136,"_137":49,"_138":139,"_140":67,"_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":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","manyone","name","SermonGPTUI","branchName","main","version","path","","project",{"_35":82,"_13":14,"_37":83,"_47":-5,"_84":67,"_50":51,"_85":51,"_86":-5,"_87":-5,"_88":89,"_90":61,"_91":67,"_92":-5,"_93":-5,"_94":69,"_54":95,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":101,"_102":101,"_103":104,"_105":104,"_106":104,"_107":101,"_108":101,"_109":110,"_111":112,"_113":114,"_48":49},"tree",[77],"file","contents",[57],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":14},"pull","ahead",1,"behind",26,"envVars","id","cdd5ea0a-26db-11f0-a5b3-569c3dd06744","createdAt",["D",1746138594146],"updatedAt",["D",1733966400032],"projectId","cdd59154-26db-11f0-a5b3-569c3dd06744","forkedBranchId","forkedBranchVersion","lockfileKey","1767250690147-esm.town_v_mjweaver01_SermonGPTUI@26-main","deletedAt","isOwned",false,"privacy","public","userHandle","mjweaver01","orgId","400879bc-25cf-4eb0-8108-929ba6a0aa52","projectName",{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":68,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":76},"2932a6fe-26cd-11f0-9439-569c3dd06744","main.tsx","fileId","2932a7da-26cd-11f0-9439-569c3dd06744","parentId","branchId","292e11e8-26cd-11f0-9439-569c3dd06744","branchVersion","latest",true,["D",1733715868028],0,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?dev\";\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?dev\";\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","label",[59],{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":78,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_79":80,"_18":81},["D",1733715868028],"children",[],[59],"292db8e2-26cd-11f0-9439-569c3dd06744",["D",1746132304947],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","11a006cf-aeab-4156-a932-83df54e7ef3d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","11b582b8-f839-42d5-ba29-49c4922cc77a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_124":120},"org",{"_11":12,"_118":-5,"_119":120,"_88":89,"_121":122,"_123":49},"branch",{"_17":31,"_13":16,"_35":64,"_41":82,"_43":36,"_44":69,"_115":51,"_116":42,"_117":55,"_56":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":82,"_13":14,"_37":163,"_47":-5,"_84":67,"_50":51,"_85":51,"_86":-5,"_87":-5,"_88":89,"_90":61,"_91":67,"_92":-5,"_93":-5,"_94":69,"_54":95,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":101,"_102":101,"_103":104,"_105":104,"_106":104,"_107":101,"_108":101,"_109":164,"_111":165,"_113":166,"_48":49},[160],"files",[160],"counts",{"_151":69,"_152":31,"_153":69,"_34":154,"_155":156},[149],"upstreamProject",{"_35":42,"_13":14,"_86":-5,"_87":-5,"_50":51,"_109":147},"upstreamBranch",{"_35":36,"_37":145,"_39":146,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746138594146],["D",1733966400032],{"_11":53,"_124":148},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZjEwSlk3TnRVYmV2VE5taXhheU90aUJHcmoifQ",{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":68,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":150},[59],"pulls","branches","forks",{"_157":69,"_159":69},"connections",{"_157":69,"_158":69},"count","unfilledCount","emptyCount",{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":78,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_79":161,"_18":162},[],[59],["D",1746132304947],{"_11":12,"_124":120},{"_11":12,"_118":-5,"_119":120,"_88":89,"_121":122,"_123":49},{"_17":31,"_13":16,"_35":64,"_41":82,"_43":36,"_44":69,"_115":51,"_116":42,"_117":55,"_56":14,"_52":12},"ctx",{"_109":-5,"_142":200,"_201":202,"_203":204,"_205":49,"_206":49,"_207":49,"_208":67,"_209":-5,"_210":-7,"_211":-7,"_212":69,"_213":49,"_214":49,"_215":-5,"_216":49,"_217":49,"_218":49,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":16,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"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