[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_162":163,"_164":165},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":82,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":116,"_117":118,"_119":24,"_120":121,"_122":47,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":30,"_55":47,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",1,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","2932a7da-26cd-11f0-9439-569c3dd06744","name","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}","createdAt",["D",1733715868028],"branchVersion","branchId","292e11e8-26cd-11f0-9439-569c3dd06744","id","292db8e2-26cd-11f0-9439-569c3dd06744","SermonGPTUI",["D",1746132304947],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","11a006cf-aeab-4156-a932-83df54e7ef3d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","11b582b8-f839-42d5-ba29-49c4922cc77a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":49,"_88":89,"_90":91,"_92":43,"_93":94},"isOwned","main","projectId","forkedBranchId","cdd5ea0a-26db-11f0-a5b3-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","cdd59154-26db-11f0-a5b3-569c3dd06744","forkedProjectOrgId","400879bc-25cf-4eb0-8108-929ba6a0aa52","projectName","userHandle","manyone","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":158,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":30,"_55":47,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":159,"_77":160,"_79":161,"_81":24},"tree",[153],"files",[153],"counts",{"_143":59,"_144":14,"_145":59,"_146":147,"_148":149},"contents",[136],"upstreamProject",{"_41":89,"_31":43,"_51":-5,"_52":-5,"_48":49,"_75":134},"upstreamBranch",{"_41":85,"_36":127,"_128":129,"_31":82,"_83":89,"_13":130,"_84":-5,"_86":-5,"_131":132,"_45":-5,"_81":24,"_48":49,"_93":133,"_60":91,"_92":43},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746138594146],"updatedAt",["D",1733966400032],26,"lockfileKey","1767250690147-esm.town_v_mjweaver01_SermonGPTUI@26-main","mjweaver01",{"_95":133,"_102":135},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZjEwSlk3TnRVYmV2VE5taXhheU90aUJHcmoifQ",{"_41":137,"_31":27,"_29":30,"_138":-5,"_39":40,"_38":14,"_139":47,"_36":140,"_13":59,"_32":33,"_34":35,"_23":24,"_141":-5,"_26":142},"2932a6fe-26cd-11f0-9439-569c3dd06744","parentId","latest",["D",1733715868028],"label",[27],"pulls","branches","forks","envVars",{"_150":59,"_152":59},"connections",{"_150":59,"_151":59},"count","unfilledCount","emptyCount",{"_41":137,"_31":27,"_29":30,"_138":-5,"_39":40,"_38":14,"_139":47,"_36":154,"_13":59,"_32":33,"_34":35,"_23":24,"_141":-5,"_155":156,"_26":157},["D",1733715868028],"children",[],[27],["D",1746132304947],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":49,"_88":89,"_90":91,"_92":43,"_93":94},"ctx",{"_75":-5,"_124":195,"_196":197,"_198":199,"_200":24,"_201":24,"_202":24,"_203":47,"_204":-5,"_205":-7,"_206":-7,"_207":59,"_208":24,"_209":24,"_210":-5,"_211":24,"_212":24,"_213":24,"_214":-5},"ENV",{"_166":167,"_168":169,"_170":82,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"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"]

Diff · v1