Feedback Widget Demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_209":210,"_211":212},"routes/_app.x.$handle.$name",{"_121":120,"_35":68,"_129":108,"_30":130,"_13":14,"_131":-5,"_11":132,"_133":134,"_135":136,"_137":138,"_139":140,"_24":-5,"_141":-5,"_142":-5,"_143":28,"_144":145,"_146":80,"_147":-5,"_148":-5,"_149":150},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_66":67,"_35":68,"_40":69,"_70":-5,"_71":28,"_72":73,"_74":73,"_75":-5,"_76":-5,"_18":77,"_78":34,"_79":80,"_81":80,"_82":-5,"_83":84,"_85":86,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_100":101,"_102":103,"_104":105,"_106":28},"version",1,"changes",[19,20,21,22,23],"aiChatInfo","userId",{"_24":61,"_26":-7,"_27":28,"_29":28,"_30":62,"_32":62},{"_24":56,"_26":-7,"_27":28,"_29":28,"_30":57,"_32":57},{"_24":51,"_26":-7,"_27":28,"_29":28,"_30":52,"_32":52},{"_24":45,"_26":-7,"_27":28,"_29":28,"_30":46,"_32":46},{"_24":25,"_26":-7,"_27":28,"_29":28,"_30":31,"_32":31},"file",{"_33":34,"_35":31,"_36":37,"_38":39,"_40":41,"_42":14,"_43":44,"_27":28},"previous","deleted",false,"deletedHere","path","index.ts","latestPath","fileId","f7f7278e-9150-4cef-b9ce-8d20c6a012ee","name","fileType","http","content","import { Hono } from \"npm:hono\";\nimport { renderFeedbackWidget, handleFeedbackSubmission } from \"./feedbackWidget.ts\";\n\nconst app = new Hono();\n\n// Error handling to see full stack traces\napp.onError((err, c) => {\n console.error(\"=== HONO ERROR ===\");\n console.error(\"Error:\", err);\n console.error(\"Stack:\", err.stack);\n \n return c.json({\n error: 'Server Error',\n message: err.message,\n stack: err.stack\n }, 500);\n});\n\n// Main page route that serves the HTML content\napp.get(\"/\", (c) => {\n const html = `\n \n \n \n \n \n Feedback Widget Demo\n \n \n \n \n 📝 View Source\n \n\n \n\n

\n 🎯 Focus: This version ONLY writes to feedback.md using the Val Town SDK. Submit feedback below and check the file!\n

\n\n

🧪 Test the Widget

Click the blue \"💬 Feedback\" button in the bottom-right corner and submit feedback.

\n\n

🔑 Environment Variables

This widget automatically detects and uses your Val Town API token.

valtown (primary, built-in)
VAL_TOWN_API_KEY2 (fallback, if you set it)

\n\n ${renderFeedbackWidget()}\n \n \n `;\n\n return c.html(html);\n});\n\n// Handle feedback submissions by calling the function from the other file\napp.post(\"/feedback\", async (c) => {\n console.log(\"=== FEEDBACK ROUTE HIT ===\");\n try {\n // UPDATED: Pass the import.meta.url to the handler\n const result = await handleFeedbackSubmission(c.req.raw, import.meta.url);\n console.log(\"Handler result status:\", result.status);\n return result;\n } catch (error) {\n console.error(\"Route error:\", error);\n return c.json({\n error: 'Route Error',\n message: error.message\n }, 500);\n }\n});\n\n// Catch-all for any other route\napp.all(\"*\", (c) => {\n return c.text(`Not found: ${c.req.path}`, 404);\n});\n\nexport default app.fetch;","createdAt",["D",1752088169643],"branchVersion","branchId","3d338932-5cf8-11f0-82ea-0224a6c84d84",{"_33":47,"_35":46,"_36":48,"_38":49,"_40":50,"_42":14,"_43":44,"_27":28},"feedbackWidget.ts","e8c5ba83-c188-41f9-b453-d7cda8c86e9d","script","import ValTown from \"npm:@valtown/sdk\";\n\n// renderFeedbackWidget() function is unchanged and remains here...\nexport function renderFeedbackWidget(): string {\n return `\n \n\n \n\n \n `;\n}\n\n/**\n * REWRITTEN to use the explicit vt.vals.files.create method\n */\nexport async function handleFeedbackSubmission(request: Request, valUrl: string): Promise {\n try {\n // Step 1: Initialize the Val Town client\n const token = Deno.env.get(\"VALTOWN_API_KEY2\") || Deno.env.get(\"valtown\");\n if (!token) {\n throw new Error(\"Server configuration error: API token is missing.\");\n }\n const vt = new ValTown({ bearerToken: token });\n\n // Step 2: Find the ID of the current val\n const valName = valUrl.match(/dcm31--([\\w-]+)\\.web\\.val\\.run/)?.[1];\n if (!valName) {\n // Fallback for local dev or different URL structures\n const pathParts = new URL(valUrl).pathname.split(\"/\");\n const valNameFromPath = pathParts[pathParts.length - 1];\n if (!valNameFromPath) throw new Error(\"Could not determine val name from URL.\");\n }\n\n const { data: vals } = await vt.me.vals.list();\n const currentVal = vals.find(v => v.name === valName || v.name === \"feedback_widget_demo\");\n\n if (!currentVal) {\n throw new Error(`Could not find a val named '${valName}' or 'feedback_widget_demo'.`);\n }\n const valId = currentVal.id;\n\n // Step 3: Parse feedback from the request\n const { feedback } = await request.json();\n if (!feedback || typeof feedback !== \"string\") {\n return new Response(JSON.stringify({ error: \"Invalid feedback content\" }), { status: 400 });\n }\n\n // Step 4: Read the existing feedback.md file (using fs.read is fine for this)\n let currentContent = \"\";\n const feedbackFilePath = \"feedback.md\";\n try {\n currentContent = await vt.fs.read(feedbackFilePath);\n } catch (error) {\n if (error.message.includes(\"404\")) {\n console.log(\"feedback.md not found, creating a new one.\");\n currentContent = \"# Feedback\\n\\n---\\n\\n\";\n } else {\n throw error; // Re-throw other errors\n }\n }\n\n // Step 5: Format and append the new entry\n const timestamp = new Date().toISOString();\n const userAgent = request.headers.get(\"user-agent\") || \"Unknown\";\n const newEntry = `**${timestamp}**\\n\\n${feedback.trim()}\\n\\n*User Agent: ${userAgent}*\\n\\n---\\n\\n`;\n const updatedContent = currentContent + newEntry;\n\n // Step 6: Write the file using the explicit `create` method\n await vt.vals.files.create(valId, {\n path: feedbackFilePath,\n type: \"file\",\n content: updatedContent,\n });\n\n // Step 7: Return a success response\n return new Response(\n JSON.stringify({\n success: true,\n message: \"Feedback saved!\",\n }),\n {\n status: 200,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"💥 Feedback submission failed:\", error, error.stack);\n return new Response(\n JSON.stringify({\n error: `Failed to save feedback: ${error.message}`,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n}",["D",1752088169643],{"_33":53,"_35":52,"_36":24,"_38":54,"_40":55,"_42":14,"_43":44,"_27":28},"README.md","cf6c4f82-9dcf-4076-b915-05e627fb3752","# Feedback Widget Demo\n\nThis project demonstrates a reusable feedback widget library for Val Town projects.\n\n## Features\n\n- 🎨 Clean, minimizable UI that floats at the bottom-right\n- 📱 Mobile-responsive design \n- 💾 Automatically saves feedback to feedback.md\n- ⚡ Easy to integrate - just 2 lines of code\n- 🎪 Smooth animations and hover effects\n\n## How to Use in Your Project\n\n1. Copy `feedbackWidget.ts` into your project\n2. Import and use in your main entry point:\n\n```typescript\nimport { renderFeedbackWidget, handleFeedbackSubmission } from \"./feedbackWidget.ts\";\n\n// Add to your HTML template\nconst html = `\n \n \n ${renderFeedbackWidget()}\n \n`;\n\n// Add feedback route\napp.post(\"/feedback\", async (c) => {\n return await handleFeedbackSubmission(c.req.raw, import.meta.url);\n});\n```\n\n3. Create a `feedback.md` file in your project root\n\nThat's it! Users can now submit feedback through the widget.\n\n## Project Structure\n\n- `feedbackWidget.ts` - The reusable widget library\n- `index.ts` - Demo implementation \n- `feedback.md` - Where feedback gets stored\n- `README.md` - This file\n\n## Demo\n\nVisit the live demo to see the widget in action: [Demo Link](https://dcm31--6ed59f4e5b9411f09f2bf69ea79377d9.web.val.run)\n\n## Customization\n\nThe widget can be easily customized by modifying the CSS in `feedbackWidget.ts`. Change colors, positioning, animations, and more to fit your project's design.",["D",1752088169643],{"_33":58,"_35":57,"_36":48,"_38":59,"_40":60,"_42":14,"_43":44,"_27":28},"new-file-6114.tsx","85a9cee4-abc7-4680-bfc7-cc14bf894bed","// Pinning the SDK version to match the working example\nimport ValTown from \"npm:@valtown/sdk@0.37.0\";\n\nconst main = async () => {\n try {\n console.log(\"▶️ Starting combined Read & Write test...\");\n\n // 1. Authenticate\n const token = Deno.env.get(\"VALTOWN_API_KEY2\");\n if (!token) {\n console.error(\"❌ Error: VALTOWN_API_KEY2 is not set.\");\n return;\n }\n const vt = new ValTown({ bearerToken: token });\n console.log(\"✅ SDK Initialized.\");\n\n // 2. Find the project ID using the method we know works\n const { data: vals } = await vt.me.vals.list();\n const projectVal = vals.find(v => v.name === 'feedback_widget_demo');\n if (!projectVal) {\n console.error(\"❌ Error: Could not find val 'feedback_widget_demo'.\");\n return;\n }\n const valId = projectVal.id;\n console.log(`✅ Found project ID: ${valId}`);\n \n // 3. READ the file using the method from Steve's example\n const feedbackFilePath = \"feedback.md\";\n let currentContent = \"\";\n let fileExists = false;\n try {\n console.log(`📖 Reading '${feedbackFilePath}' using vt.projects.files.getContent...`);\n const response = await vt.projects.files.getContent(valId, { path: feedbackFilePath });\n currentContent = await response.text();\n fileExists = true;\n console.log(\"✅ Read successful.\");\n } catch (error) {\n if (error.message.includes(\"404\")) {\n console.log(\"📝 File not found, will create it.\");\n currentContent = \"# Feedback\\n\\n---\\n\\n\";\n fileExists = false;\n } else {\n throw error; // Let the main catch block handle other errors\n }\n }\n\n // 4. APPEND the new content\n const newEntry = `Append successful at ${new Date().toISOString()}.\\n\\n---\\n\\n`;\n const updatedContent = currentContent + newEntry;\n console.log(\"✅ Content prepared for writing.\");\n \n // 5. WRITE the file using the create/update logic from our tests\n if (fileExists) {\n console.log(\"🔄 File exists. Attempting to UPDATE using vt.vals.files.update...\");\n await vt.vals.files.update(valId, {\n path: feedbackFilePath,\n content: updatedContent,\n });\n console.log(\"✅ Success! File updated.\");\n } else {\n console.log(\"📝 File does not exist. Attempting to CREATE using vt.vals.files.create...\");\n await vt.vals.files.create(valId, {\n path: feedbackFilePath,\n type: \"file\",\n content: updatedContent,\n });\n console.log(\"✅ Success! File created.\");\n }\n\n } catch (error) {\n console.error(\"❌ An error occurred:\", error.message);\n console.error(error.stack);\n }\n};\n\n// Run the main function\nmain();",["D",1752088169643],{"_33":63,"_35":62,"_36":24,"_38":64,"_40":65,"_42":14,"_43":44,"_27":28},"feedback.md","2ca2a34f-91ca-47ce-bf98-f9178e97da9b","# Feedback\n\nThis file will collect user feedback submitted through the feedback widget.\n\n---\n\n",["D",1752088169643],"id","3d301720-5cf8-11f0-82ea-0224a6c84d84","feedback_widget_demo",["D",1752088169643],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c156eb0e-8b9d-4104-a055-502e9a0eb441","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","2019e55b-c541-4c51-bef0-008eef10ef88","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_121":120,"_128":124},"org",{"_121":120,"_122":-5,"_123":124,"_18":77,"_125":126,"_127":28},"branch",{"_13":107,"_35":108,"_66":44,"_109":67,"_110":-5,"_111":-5,"_112":113,"_114":115,"_116":117,"_118":68,"_119":120},"isOwned",25,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","private","forkedProjectId","46be4718-5b94-11f0-8cdc-f69ea79377d9","forkedProjectOrgId","d663a026-6449-42f6-9156-1d4a2d64d38c","projectName","userHandle","charmaine","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ4cFpFME5pSXNZamJNd296dlZSYVJ0OVF1RSJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_66":67,"_35":68,"_40":205,"_70":-5,"_71":28,"_72":73,"_74":73,"_75":-5,"_76":-5,"_18":77,"_78":34,"_79":80,"_81":80,"_82":-5,"_83":84,"_85":86,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_100":206,"_102":207,"_104":208,"_106":28},"tree",[184,185,186,187,188],"files",[184,185,186,187,188],"counts",{"_174":84,"_175":14,"_176":84,"_177":178,"_179":180},"contents",[151,152,153,154,155],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_66":171,"_35":52,"_33":53,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":172,"_13":84,"_36":24,"_38":54,"_27":28,"_160":-5,"_30":173},{"_66":168,"_35":62,"_33":63,"_157":-5,"_43":44,"_42":14,"_158":28,"_40":169,"_13":84,"_36":24,"_38":64,"_27":28,"_160":-5,"_30":170},{"_66":165,"_35":46,"_33":47,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":166,"_13":84,"_36":48,"_38":49,"_27":28,"_160":-5,"_30":167},{"_66":162,"_35":31,"_33":34,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":163,"_13":84,"_36":37,"_38":39,"_27":28,"_160":-5,"_30":164},{"_66":156,"_35":57,"_33":58,"_157":-5,"_43":44,"_42":14,"_158":28,"_40":159,"_13":84,"_36":48,"_38":59,"_27":28,"_160":-5,"_30":161},"3d387a3c-5cf8-11f0-82ea-0224a6c84d84","parentId","latest",["D",1752088169643],"label",[57],"3d387622-5cf8-11f0-82ea-0224a6c84d84",["D",1752088169643],[31],"3d386768-5cf8-11f0-82ea-0224a6c84d84",["D",1752088169643],[46],"3d386524-5cf8-11f0-82ea-0224a6c84d84",["D",1752088169643],[62],"3d385d2c-5cf8-11f0-82ea-0224a6c84d84",["D",1752088169643],[52],"pulls","branches","forks","envVars",{"_181":14,"_183":84},"connections",{"_181":84,"_182":84},"count","unfilledCount","emptyCount",{"_66":171,"_35":52,"_33":53,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":202,"_13":84,"_36":24,"_38":54,"_27":28,"_160":-5,"_190":203,"_30":204},{"_66":168,"_35":62,"_33":63,"_157":-5,"_43":44,"_42":14,"_158":28,"_40":199,"_13":84,"_36":24,"_38":64,"_27":28,"_160":-5,"_190":200,"_30":201},{"_66":165,"_35":46,"_33":47,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":196,"_13":84,"_36":48,"_38":49,"_27":28,"_160":-5,"_190":197,"_30":198},{"_66":162,"_35":31,"_33":34,"_157":-5,"_43":44,"_42":14,"_158":80,"_40":193,"_13":84,"_36":37,"_38":39,"_27":28,"_160":-5,"_190":194,"_30":195},{"_66":156,"_35":57,"_33":58,"_157":-5,"_43":44,"_42":14,"_158":28,"_40":189,"_13":84,"_36":48,"_38":59,"_27":28,"_160":-5,"_190":191,"_30":192},["D",1752088169643],"children",[],[57],["D",1752088169643],[],[31],["D",1752088169643],[],[46],["D",1752088169643],[],[62],["D",1752088169643],[],[52],["D",1752088169643],{"_121":120,"_128":124},{"_121":120,"_122":-5,"_123":124,"_18":77,"_125":126,"_127":28},{"_13":107,"_35":108,"_66":44,"_109":67,"_110":-5,"_111":-5,"_112":113,"_114":115,"_116":117,"_118":68,"_119":120},"ctx",{"_100":-5,"_148":242,"_243":244,"_245":246,"_247":28,"_248":28,"_249":28,"_250":80,"_251":-5,"_252":-7,"_253":-7,"_254":84,"_255":28,"_256":28,"_257":-5,"_258":28,"_259":28,"_260":28,"_261":-5},"ENV",{"_213":214,"_215":216,"_217":108,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

📝 Feedback Widget Demo

🧪 Test the Widget

🔑 Environment Variables

Diff · v1