Feedback Widget Demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_201":202,"_203":204},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":86,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":58,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","new-file-6114.tsx","latestPath","fileId","85a9cee4-abc7-4680-bfc7-cc14bf894bed","name","fileType","script","content","// 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\");\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(\n `📖 Reading '${feedbackFilePath}' using vt.projects.files.getContent...`,\n );\n const response = await vt.projects.files.getContent(valId, {\n path: feedbackFilePath,\n });\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 ${\n new Date().toISOString()\n }.\\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(\n \"🔄 File exists. Attempting to UPDATE using vt.vals.files.update...\",\n );\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(\n \"📝 File does not exist. Attempting to CREATE using vt.vals.files.create...\",\n );\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 } catch (error) {\n console.error(\"❌ An error occurred:\", error.message);\n console.error(error.stack);\n }\n};\n\n// Run the main function\nmain();","// 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\");\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 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(\n `📖 Reading '${feedbackFilePath}' using vt.projects.files.getContent...`,\n );\n const response = await vt.projects.files.getContent(valId, {\n path: feedbackFilePath,\n });\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 ${\n new Date().toISOString()\n }.\\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(\n \"🔄 File exists. Attempting to UPDATE using vt.vals.files.update...\",\n );\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(\n \"📝 File does not exist. Attempting to CREATE using vt.vals.files.create...\",\n );\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 } catch (error) {\n console.error(\"❌ An error occurred:\", error.message);\n console.error(error.stack);\n }\n};\n\n// Run the main function\nmain();","createdAt",["D",1752088400522],"branchVersion","branchId","3d338932-5cf8-11f0-82ea-0224a6c84d84","id","3d301720-5cf8-11f0-82ea-0224a6c84d84","feedback_widget_demo",["D",1752088169643],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c156eb0e-8b9d-4104-a055-502e9a0eb441","pinnedFileId","f7f7278e-9150-4cef-b9ce-8d20c6a012ee","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",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":91,"_92":93,"_94":95,"_96":45,"_97":98},"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",{"_43":44,"_32":45,"_38":197,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":198,"_80":199,"_82":200,"_84":25},"tree",[176,177,178,179,180],"files",[176,177,178,179,180],"counts",{"_166":62,"_167":143,"_168":62,"_169":170,"_171":172},"contents",[129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":160,"_32":161,"_30":162,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":163,"_13":62,"_33":20,"_35":164,"_24":25,"_139":-5,"_27":165},{"_43":154,"_32":155,"_30":156,"_135":-5,"_41":42,"_40":143,"_136":25,"_38":157,"_13":62,"_33":20,"_35":158,"_24":25,"_139":-5,"_27":159},{"_43":148,"_32":149,"_30":150,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":151,"_13":62,"_33":34,"_35":152,"_24":25,"_139":-5,"_27":153},{"_43":141,"_32":142,"_30":56,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":144,"_13":62,"_33":145,"_35":146,"_24":25,"_139":-5,"_27":147},{"_43":134,"_32":28,"_30":31,"_135":-5,"_41":42,"_40":14,"_136":25,"_38":137,"_13":138,"_33":34,"_35":37,"_24":25,"_139":-5,"_27":140},"c6cab882-5cf8-11f0-b028-0224a6c84d84","parentId","latest",["D",1752088400522],5,"label",[28],"3d387622-5cf8-11f0-82ea-0224a6c84d84","index.ts",1,["D",1752088169643],"http","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;",[142],"3d386768-5cf8-11f0-82ea-0224a6c84d84","feedbackWidget.ts","e8c5ba83-c188-41f9-b453-d7cda8c86e9d",["D",1752088169643],"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}",[149],"3d386524-5cf8-11f0-82ea-0224a6c84d84","feedback.md","2ca2a34f-91ca-47ce-bf98-f9178e97da9b",["D",1752088169643],"# Feedback\n\nThis file will collect user feedback submitted through the feedback widget.\n\n---\n\n",[155],"3d385d2c-5cf8-11f0-82ea-0224a6c84d84","README.md","cf6c4f82-9dcf-4076-b915-05e627fb3752",["D",1752088169643],"# 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.",[161],"pulls","branches","forks","envVars",{"_173":143,"_175":62},"connections",{"_173":62,"_174":62},"count","unfilledCount","emptyCount",{"_43":160,"_32":161,"_30":162,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":194,"_13":62,"_33":20,"_35":164,"_24":25,"_139":-5,"_182":195,"_27":196},{"_43":154,"_32":155,"_30":156,"_135":-5,"_41":42,"_40":143,"_136":25,"_38":191,"_13":62,"_33":20,"_35":158,"_24":25,"_139":-5,"_182":192,"_27":193},{"_43":148,"_32":149,"_30":150,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":188,"_13":62,"_33":34,"_35":152,"_24":25,"_139":-5,"_182":189,"_27":190},{"_43":141,"_32":142,"_30":56,"_135":-5,"_41":42,"_40":143,"_136":58,"_38":185,"_13":62,"_33":145,"_35":146,"_24":25,"_139":-5,"_182":186,"_27":187},{"_43":134,"_32":28,"_30":31,"_135":-5,"_41":42,"_40":14,"_136":25,"_38":181,"_13":138,"_33":34,"_35":37,"_24":25,"_139":-5,"_182":183,"_27":184},["D",1752088400522],"children",[],[28],["D",1752088169643],[],[142],["D",1752088169643],[],[149],["D",1752088169643],[],[155],["D",1752088169643],[],[161],["D",1752088169643],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":91,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_78":-5,"_126":234,"_235":236,"_237":238,"_239":25,"_240":25,"_241":25,"_242":58,"_243":-5,"_244":-7,"_245":-7,"_246":62,"_247":25,"_248":25,"_249":-5,"_250":25,"_251":25,"_252":25,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":86,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"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 · v6