Thank You

Dear {recipientName},

{firstHalf}

{secondHalf}

\n Sincerely,
\n {senderName}\n

\n );\n}\n\nfunction splitNote(note) {\n const words = note.split(\" \");\n const midpoint = Math.ceil(words.length / 2);\n return [\n words.slice(0, midpoint).join(\" \"),\n words.slice(midpoint).join(\" \"),\n ];\n}\n\nfunction capitalizeName(name) {\n if (!name) return \"\";\n return name\n .split(\" \")\n .map(part => {\n if (part.length === 0) return \"\";\n return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();\n })\n .join(\" \");\n}\n\nfunction App() {\n const [recipientName, setRecipientName] = useState(\"\");\n const [senderName, setSenderName] = useState(\"\");\n const [gift, setGift] = useState(\"\");\n const [additionalDetails, setAdditionalDetails] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [noteId, setNoteId] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [theme, setTheme] = useState(\"default\");\n const [font, setFont] = useState(\"'Indie Flower', cursive\");\n const [copySuccess, setCopySuccess] = useState(\"\");\n const [generatedNote, setGeneratedNote] = useState(\"\");\n const [isEditing, setIsEditing] = useState(false);\n const [editedNote, setEditedNote] = useState(\"\");\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n setError(\"\");\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ recipientName, senderName, gift, additionalDetails, theme, font }),\n });\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n console.log(\"Received data:\", data);\n setNoteId(data.id);\n setGeneratedNote(data.note);\n } catch (err) {\n console.error(\"Error generating note:\", err);\n setError(\"Failed to generate note. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const copyToClipboard = async () => {\n try {\n await navigator.clipboard.writeText(`${window.location.origin}/view/${noteId}`);\n setCopySuccess(\"Copied!\");\n setTimeout(() => setCopySuccess(\"\"), 2000);\n } catch (err) {\n console.error(\"Failed to copy text: \", err);\n setCopySuccess(\"Failed to copy\");\n }\n };\n\n return (\n

\n CREATE A\n THANK YOU\n NOTE!\n

\n 🎈\n 🎁\n

\n 👤\n setRecipientName(capitalizeName(e.target.value))}\n required\n />\n

\n 👤\n setSenderName(capitalizeName(e.target.value))}\n required\n />\n

\n 🎁\n setGift(e.target.value)}\n required\n />\n

\n 📝\n setAdditionalDetails(e.target.value)}\n >\n \n

\n 🎨\n \n

\n 🔤\n \n

\n \n

\n {error &&

{error}

}\n {generatedNote && (\n

Preview Your Thank You Note

\n {!isEditing\n ? (\n {\n setIsEditing(true);\n setEditedNote(generatedNote);\n }}\n className=\"edit-button\"\n >\n Edit Note\n \n )\n : (\n

\n {\n try {\n const response = await fetch(`/update/${noteId}`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ note: editedNote }),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n setGeneratedNote(editedNote);\n setIsEditing(false);\n } catch (err) {\n console.error(\"Error updating note:\", err);\n setError(\"Failed to save note. Please try again.\");\n }\n }}\n className=\"save-button\"\n >\n Save Changes\n \n {\n setIsEditing(false);\n setEditedNote(generatedNote);\n }}\n className=\"cancel-button\"\n >\n Cancel\n \n

\n )}\n

\n {!isEditing\n ? (\n \n )\n : (\n setEditedNote(e.target.value)}\n className=\"edit-textarea\"\n />\n )}\n

\n )}\n {noteId && (\n

Your Thank You Note has been generated!

You can view and share your note using this link:

\n \n \n

Share this note:

\n \n window.open(\n `https://twitter.com/intent/tweet?text=${\n encodeURIComponent(`Check out my thank you note: ${window.location.origin}/view/${noteId}`)\n }`,\n )}\n >\n 🐦 Twitter\n \n \n window.open(\n `https://www.facebook.com/sharer/sharer.php?u=${\n encodeURIComponent(`${window.location.origin}/view/${noteId}`)\n }`,\n )}\n >\n 📘 Facebook\n \n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n console.log(`Received ${request.method} request to ${request.url}`);\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const openai = new OpenAI();\n const url = new URL(request.url);\n\n const KEY = \"ThankYouNoteGenerator\";\n const TABLE_VERSION = 2; // Increment this when you change the table schema\n const TABLE_NAME = `${KEY}_thank_you_notes_v${TABLE_VERSION}`;\n\n try {\n // Create table if it doesn't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id TEXT PRIMARY KEY,\n recipient_name TEXT,\n sender_name TEXT,\n gift TEXT,\n note TEXT,\n theme TEXT,\n font TEXT\n )\n `);\n\n if (request.method === \"POST\" && url.pathname === \"/generate\") {\n const { recipientName, senderName, gift, additionalDetails, theme, font } = await request.json();\n console.log(\"Received form data:\", { recipientName, senderName, gift, additionalDetails, theme, font });\n\n const prompt =\n `Write a warm, personal thank you note body expressing gratitude for the ${gift}. Additional context to incorporate: ${additionalDetails}. IMPORTANT: Start directly with the message - do NOT include any greeting (no 'Dear' or name), subject line, or date. The template already handles the greeting. Begin with expressing your gratitude directly. Keep the tone warm and conversational, not formal.`;\n console.log(\"Generated prompt:\", prompt);\n\n const completion = await openai.chat.completions.create({\n messages: [{ role: \"user\", content: prompt }],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n const note = completion.choices[0].message.content;\n const id = Math.random().toString(36).substr(2, 9);\n\n // Store the note in SQLite\n await sqlite.execute(\n `\n INSERT INTO ${TABLE_NAME} (id, recipient_name, sender_name, gift, note, theme, font)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `,\n [id, recipientName, senderName, gift, note, theme, font],\n );\n\n console.log(\"Generated note with ID:\", id);\n\n return new Response(JSON.stringify({ id, note }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"GET\" && url.pathname.startsWith(\"/view/\")) {\n const id = url.pathname.split(\"/\")[2];\n console.log(\"Attempting to view note with ID:\", id);\n\n // Retrieve the note from SQLite\n const result = await sqlite.execute(\n `\n SELECT * FROM ${TABLE_NAME} WHERE id = ?\n `,\n [id],\n );\n\n if (result.rows.length > 0) {\n const note = result.rows[0];\n console.log(\"Note found:\", note);\n const [firstHalf, secondHalf] = splitNote(note.note);\n return new Response(\n `\n \n \n Thank You Note for ${note.recipient_name}\n \n \n \n \n

Thank You

Dear ${note.recipient_name},

${firstHalf}

${secondHalf}

\n Sincerely,
\n ${note.sender_name}\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n } else {\n console.log(\"Note not found for ID:\", id);\n return new Response(\"Note not found\", { status: 404 });\n }\n }\n\n if (request.method === \"POST\" && url.pathname.startsWith(\"/update/\")) {\n const id = url.pathname.split(\"/\")[2];\n const { note } = await request.json();\n\n await sqlite.execute(\n `\n UPDATE ${TABLE_NAME} \n SET note = ?\n WHERE id = ?\n `,\n [note, id],\n );\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n console.log(\"Serving main page\");\n return new Response(\n `\n \n \n Thank You Note Generator\n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(\"Internal Server Error\", { status: 500 });\n }\n}\n\nconst css = `\nbody {\n font-family: 'Indie Flower', cursive;\n background-color: #f8f7f2;\n margin: 0;\n padding: 0;\n color: #333;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n max-width: 1200px;\n margin: 0 auto;\n padding: 40px 20px;\n}\n\n.title-section {\n text-align: center;\n margin-bottom: 40px;\n}\n\n.form-section {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n padding: 20px;\n}\n\n.title {\n font-size: 4em;\n font-weight: bold;\n line-height: 1.2;\n}\n\n.title span {\n display: block;\n}\n\n.title .line1 { color: #000; transform: rotate(-5deg); }\n.title .line2 { color: #ff6b6b; transform: rotate(2deg); }\n.title .line3 { color: #4ecdc4; transform: rotate(-2deg); }\n\n.decorative-elements {\n font-size: 3em;\n margin-top: 20px;\n}\n\n.input-group {\n display: flex;\n align-items: center;\n margin-bottom: 15px;\n}\n\n.input-group span {\n font-size: 1.5em;\n margin-right: 10px;\n}\n\n.input-group input,\n.input-group select,\n.input-group textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 16px;\n}\n\n.submit-button {\n background-color: #9b59b6;\n color: white;\n width: 100%;\n padding: 15px;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-button:hover {\n background-color: #8e44ad;\n}\n\n.submit-button:disabled {\n background-color: #bdc3c7;\n cursor: not-allowed;\n}\n\n.generated-note {\n margin-top: 30px;\n padding: 20px;\n background-color: #ecf0f1;\n border-radius: 8px;\n}\n\n.thank-you-card {\n background-color: rgb((198, 174, 168));\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: flex;\n max-width: 800px;\n margin: 30px auto;\n overflow: hidden;\n position: relative;\n}\n\n.thank-you-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url(\"data:image/png;base64,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\");\n opacity: 0.1;\n z-index: 0;\n}\n\n.card-page {\n flex: 1;\n padding: 40px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n position: relative;\n z-index: 1;\n}\n\n.left-page, .right-page {\n background-color: rgba(198, 174, 168, 0.8); \n}\n\n.card-content {\n margin-bottom: 20px;\n}\n\n.thank-you-card h2 {\n font-size: 2.5em;\n margin-bottom: 20px;\n color: #2a2420;\n}\n\n.thank-you-card p {\n font-size: 1.2em;\n line-height: 1.6;\n color: #2a2420;\n}\n\n.signature {\n margin-top: auto;\n align-self: flex-end;\n}\n\n.footer {\n position: fixed;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n}\n\n.footer a {\n color: #3498db;\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n.share-options {\n margin-top: 20px;\n}\n\n.share-options input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n background-color: #f5f5f5;\n}\n\n.social-share {\n display: flex;\n justify-content: center;\n gap: 10px;\n}\n\n.social-share button {\n padding: 10px 15px;\n font-size: 16px;\n}\n\n.error {\n color: #e74c3c;\n margin-top: 10px;\n font-weight: bold;\n}\n\n.preview-section {\n margin-top: 30px;\n}\n\n.preview-section h2 {\n text-align: center;\n margin-bottom: 20px;\n}\n\n@media (max-width: 600px) {\n .container {\n padding: 10px;\n }\n \n .title {\n font-size: 2em;\n }\n \n .submit-button {\n font-size: 16px;\n }\n\n .thank-you-card {\n flex-direction: column;\n }\n\n .left-page {\n border-bottom: 2px solid #c4b6ad;\n }\n}\n\n.fade-in {\n animation: fadeIn 1s ease-in;\n}\n\n.link-copy-container {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.link-copy-container input {\n flex-grow: 1;\n margin-right: 10px;\n}\n\n.copy-button {\n padding: 10px 15px;\n font-size: 14px;\n white-space: nowrap;\n}\n\n.copy-button:active {\n transform: translateY(1px);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.edit-button, .save-button, .cancel-button {\n padding: 8px 16px;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.edit-button {\n background-color: #4CAF50;\n color: white;\n border: none;\n}\n\n.save-button {\n background-color: #2196F3;\n color: white;\n border: none;\n margin-right: 10px;\n}\n\n.cancel-button {\n background-color: #f44336;\n color: white;\n border: none;\n}\n\n.edit-textarea {\n width: 100%;\n min-height: 200px;\n padding: 16px;\n font-size: 16px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-family: inherit;\n margin-bottom: 20px;\n}\n\n.edit-actions {\n display: flex;\n gap: 10px;\n}\n`;","deleted","label","children",[],[99],"files",[154],"counts",{"_176":32,"_177":178,"_179":32,"_180":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_103":155,"_95":99,"_156":116,"_157":-5,"_158":139,"_159":138,"_160":109,"_105":185,"_100":162,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":186},["D",1733462229669],[99],"upstreamProject",{"_103":146,"_95":96,"_112":-5,"_113":-5,"_110":111,"_23":189},{"_93":190,"_131":191},"willthereader","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXZ0bE1rbVBEMkhHNzR3SmVmMHc3eldBQiJ9","upstreamBranch",{"_103":142,"_105":194,"_195":196,"_95":43,"_140":146,"_100":197,"_141":-5,"_143":-5,"_198":199,"_107":-5,"_151":22,"_110":111,"_150":190,"_16":148,"_149":96},["D",1746229925335],"updatedAt",["D",1732487471159],126,"lockfileKey","1755602784962-esm.town_v_willthereader_ThankYouNoteGenerator@126-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":206,"_152":211,"_172":215,"_183":216,"_181":218,"_219":220,"_223":22,"_224":-5,"_225":138,"_226":197,"_227":228},{"_103":104,"_95":96,"_105":207,"_107":-5,"_108":109,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":109,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":208,"_133":209,"_136":210,"_151":22},["D",1746135690788],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":142,"_143":32,"_144":111,"_145":146,"_147":148,"_149":96,"_150":94},[212],{"_103":155,"_95":99,"_156":116,"_157":-5,"_158":139,"_159":138,"_160":109,"_105":161,"_100":162,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":213,"_98":214},[],[99],[212],{"_103":155,"_95":99,"_156":116,"_157":-5,"_158":139,"_159":138,"_160":109,"_105":185,"_100":162,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":217},[99],[],"upstream",{"_103":142,"_105":221,"_195":222,"_95":43,"_140":146,"_100":197,"_141":-5,"_143":-5,"_198":199,"_107":-5,"_151":22,"_110":111,"_150":190,"_16":148,"_149":96},["D",1746229925335],["D",1732487471159],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]