[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_68":128,"_40":-7,"_129":-5,"_17":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":-5,"_140":141,"_142":143,"_144":47,"_145":146,"_147":26,"_148":-5,"_149":-5,"_150":151},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","manyone","name","SermonGPTUI","branchName","main","project",{"_32":56,"_13":14,"_34":90,"_45":-5,"_91":26,"_48":49,"_92":49,"_93":-5,"_94":-5,"_95":96,"_97":75,"_98":26,"_99":-5,"_100":-5,"_101":57,"_52":102,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":108,"_109":108,"_110":111,"_112":111,"_113":111,"_114":108,"_115":108,"_116":117,"_118":119,"_120":28,"_46":47},"ahead",1,"behind",26,"diff",{"_61":62,"_63":64,"_65":66},"hasChanges",true,"sourceBranch",{"_40":20,"_13":16,"_32":55,"_38":56,"_41":33,"_42":57,"_58":49,"_59":39,"_60":53,"_54":14,"_50":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":51,"_52":53,"_54":14},"pull","id","cdd5ea0a-26db-11f0-a5b3-569c3dd06744","createdAt",["D",1746138594146],"updatedAt",["D",1733966400032],"projectId","cdd59154-26db-11f0-a5b3-569c3dd06744","version","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","292e11e8-26cd-11f0-9439-569c3dd06744","292db8e2-26cd-11f0-9439-569c3dd06744",0,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[67],"deleted",[],"modified",[],{"_68":69,"_70":-7,"_71":72},"path","main.tsx","targetFile","sourceFile",{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":55,"_78":20,"_79":26,"_34":80,"_40":57,"_81":82,"_83":84,"_63":47,"_85":-5,"_86":-7,"_68":87,"_88":89},"2932a6fe-26cd-11f0-9439-569c3dd06744","fileId","2932a7da-26cd-11f0-9439-569c3dd06744","parentId","branchId","branchVersion","latest",["D",1733715868028],"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}","label","children",[69],"contentHash","9c220cb5b4068feff2058a798b91328407cffe4c8b4e094c221060d83be95f40",["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,"_127":123},"org",{"_11":12,"_121":-5,"_122":123,"_95":96,"_124":125,"_126":47},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":56,"_13":14,"_34":172,"_45":-5,"_91":26,"_48":49,"_92":49,"_93":-5,"_94":-5,"_95":96,"_97":75,"_98":26,"_99":-5,"_100":-5,"_101":57,"_52":102,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":108,"_109":108,"_110":111,"_112":111,"_113":111,"_114":108,"_115":108,"_116":173,"_118":174,"_120":175,"_46":47},"tree",[169],"files",[169],"counts",{"_159":57,"_160":20,"_161":57,"_162":163,"_164":165},"contents",[156],"file","upstreamProject",{"_32":39,"_13":14,"_93":-5,"_94":-5,"_48":49,"_116":154},"upstreamBranch",{"_32":33,"_34":152,"_36":153,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":51,"_52":53,"_54":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746138594146],["D",1733966400032],{"_11":51,"_127":155},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZjEwSlk3TnRVYmV2VE5taXhheU90aUJHcmoifQ",{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":55,"_78":20,"_79":26,"_34":157,"_40":57,"_81":82,"_83":84,"_63":47,"_85":-5,"_68":158},["D",1733715868028],[69],"pulls","branches","forks","envVars",{"_166":57,"_168":57},"connections",{"_166":57,"_167":57},"count","unfilledCount","emptyCount",{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":55,"_78":20,"_79":26,"_34":80,"_40":57,"_81":82,"_83":84,"_63":47,"_85":-5,"_86":170,"_68":171},[],[69],["D",1746132304947],{"_11":12,"_127":123},{"_11":12,"_121":-5,"_122":123,"_95":96,"_124":125,"_126":47},{"_40":20,"_13":16,"_32":55,"_38":56,"_41":33,"_42":57,"_58":49,"_59":39,"_60":53,"_54":14,"_50":12},"ctx",{"_116":-5,"_149":209,"_210":211,"_212":213,"_214":47,"_215":47,"_216":47,"_217":26,"_218":-5,"_219":-7,"_220":-7,"_221":57,"_222":47,"_223":47,"_224":-5,"_225":47,"_226":47,"_227":47,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":16,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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"]

Compare

Mergemanyone/mainintomjweaver01/main

Hmain.tsx+679-0