✅

\n Voice Message Created!\n

\n Your voice message has been saved and is being transcribed.\n

\n\n

Share this link:

\n \n copyToClipboard(shareUrl)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm\"\n >\n Copy\n \n

\n\n {\n setCreatedVoiceNote(null);\n setShareUrl(\"\");\n onVoiceNoteCreated?.();\n }}\n className=\"px-6 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700\"\n >\n View All Messages\n \n

\n );\n }\n\n return (\n

\n {!recordingState.isRecording && !recordingState.audioBlob && (\n <>\n

🎙️

\n Ready to Record\n

\n Click the button below to start recording your voice message\n

\n \n Start Recording\n \n \n )}\n\n {recordingState.isRecording && (\n <>\n

🔴

\n Recording...\n

\n {formatDuration(recordingState.duration)}\n

\n \n Stop Recording\n \n \n )}\n\n {recordingState.audioBlob && (\n <>\n

🎵

\n Recording Complete\n

\n Duration: {formatDuration(recordingState.duration)}\n

\n\n \n\n

\n \n Title (optional)\n \n setTitle(e.target.value)}\n placeholder=\"Enter a title for your voice message\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n \n Re-record\n \n setShowShareModal(true)}\n disabled={isUploading}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50\"\n >\n {isUploading ? \"Saving...\" : \"Save & Share\"}\n \n

\n \n )}\n

\n\n {showShareModal && (\n setShowShareModal(false)}\n isUploading={isUploading}\n />\n )}\n

\n );\n}",[229,142,100],"4e812558-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { VoiceNote } from \"../../shared/types.ts\";\n\ninterface VoicePlayerProps {\n voiceNoteId: string;\n}\n\nexport default function VoicePlayer({ voiceNoteId }: VoicePlayerProps) {\n const [voiceNote, setVoiceNote] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [audioUrl, setAudioUrl] = useState(null);\n\n useEffect(() => {\n fetchVoiceNote();\n }, [voiceNoteId]);\n\n const fetchVoiceNote = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/voicenotes/${voiceNoteId}`);\n const data = await response.json();\n\n if (data.success) {\n setVoiceNote(data.voiceNote);\n // Get audio URL\n setAudioUrl(`/api/voicenotes/${voiceNoteId}/audio`);\n } else {\n setError(data.error || \"Voice message not found\");\n }\n } catch (err) {\n setError(\"Failed to load voice message\");\n console.error(\"Error fetching voice message:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDuration = (seconds: number) => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n const getExpirationInfo = () => {\n if (!voiceNote) return null;\n\n if (voiceNote.isExpired) {\n return {\n text: \"This voice message has expired\",\n color: \"text-red-600\",\n icon: \"⚠️\",\n };\n }\n\n if (voiceNote.expiresAt) {\n const expiresDate = new Date(voiceNote.expiresAt);\n const now = new Date();\n const timeLeft = expiresDate.getTime() - now.getTime();\n const daysLeft = Math.ceil(timeLeft / (1000 * 60 * 60 * 24));\n\n return {\n text: `Expires on ${formatDate(voiceNote.expiresAt)} (${daysLeft} day${daysLeft !== 1 ? \"s\" : \"\"} left)`,\n color: daysLeft <= 1 ? \"text-orange-600\" : \"text-gray-600\",\n icon: \"⏰\",\n };\n }\n\n if (voiceNote.maxListens) {\n const listensLeft = voiceNote.maxListens - voiceNote.currentListens;\n return {\n text: `${listensLeft} listen${\n listensLeft !== 1 ? \"s\" : \"\"\n } remaining (${voiceNote.currentListens}/${voiceNote.maxListens} used)`,\n color: listensLeft <= 1 ? \"text-orange-600\" : \"text-gray-600\",\n icon: \"👂\",\n };\n }\n\n return null;\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n alert(\"Transcription copied to clipboard!\");\n } catch (error) {\n console.error(\"Failed to copy:\", error);\n }\n };\n\n if (loading) {\n return (\n

⏳

\n Loading Voice Note...\n

\n );\n }\n\n if (error) {\n return (\n

❌

\n Error\n

{error}

\n window.location.href = \"/\"}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700\"\n >\n Go Home\n \n

\n );\n }\n\n if (!voiceNote) {\n return null;\n }\n\n const expirationInfo = getExpirationInfo();\n\n return (\n

🎵

\n {voiceNote.title || \"Voice Message\"}\n

\n Created {formatDate(voiceNote.createdAt)}\n

\n Duration: {formatDuration(voiceNote.duration)}\n

\n\n {expirationInfo && (\n

\n {expirationInfo.icon} {expirationInfo.text}\n

\n )}\n\n {!voiceNote.isExpired && audioUrl && (\n

\n \n

\n )}\n\n {voiceNote.isExpired && (\n

\n This voice message has expired and can no longer be played.\n

\n )}\n\n {voiceNote.transcription && (\n

Transcription

\n copyToClipboard(voiceNote.transcription!)}\n className=\"text-sm text-blue-600 hover:text-blue-800 underline\"\n >\n Copy\n \n

\n {voiceNote.transcription}\n

\n )}\n\n {!voiceNote.transcription && !voiceNote.isExpired && (\n

\n 🤖 Transcription in progress... Refresh the page in a moment to see the text.\n

\n )}\n\n

\n window.location.href = \"/\"}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700\"\n >\n Create Your Own Voice Message\n \n

\n );\n}",[229,142,111],"4e811cde-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ShareSettings } from \"../../shared/types.ts\";\n\ninterface ShareModalProps {\n onSave: (settings: ShareSettings) => void;\n onCancel: () => void;\n isUploading: boolean;\n}\n\nexport default function ShareModal({ onSave, onCancel, isUploading }: ShareModalProps) {\n const [expirationType, setExpirationType] = useState<'none' | 'date' | 'listens'>('none');\n const [expirationDate, setExpirationDate] = useState('');\n const [maxListens, setMaxListens] = useState(1);\n\n const handleSave = () => {\n const settings: ShareSettings = {};\n \n if (expirationType === 'date' && expirationDate) {\n settings.expiresAt = new Date(expirationDate).toISOString();\n } else if (expirationType === 'listens') {\n settings.maxListens = maxListens;\n }\n \n onSave(settings);\n };\n\n const getTomorrowDate = () => {\n const tomorrow = new Date();\n tomorrow.setDate(tomorrow.getDate() + 1);\n return tomorrow.toISOString().split('T')[0];\n };\n\n return (\n

\n Share Settings\n

\n \n

\n \n Expiration Settings\n \n \n

\n \n setExpirationType(e.target.value as 'none')}\n className=\"mr-2\"\n />\n No expiration\n \n \n \n setExpirationType(e.target.value as 'date')}\n className=\"mr-2\"\n />\n Expire on date\n \n \n {expirationType === 'date' && (\n

\n setExpirationDate(e.target.value)}\n min={getTomorrowDate()}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n \n \n setExpirationType(e.target.value as 'listens')}\n className=\"mr-2\"\n />\n Expire after listens\n \n \n {expirationType === 'listens' && (\n

\n setMaxListens(parseInt(e.target.value) || 1)}\n min=\"1\"\n max=\"100\"\n className=\"w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n listen{maxListens !== 1 ? 's' : ''}\n \n

\n )}\n

\n \n

\n \n Cancel\n \n \n {isUploading ? 'Saving...' : 'Save & Share'}\n \n

\n );\n}",[229,142,106],"4e8113c4-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { VoiceNote } from \"../../shared/types.ts\";\n\nexport default function Dashboard() {\n const [voiceNotes, setVoiceNotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n fetchVoiceNotes();\n }, []);\n\n const fetchVoiceNotes = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/voicenotes\");\n const data = await response.json();\n\n if (data.success) {\n setVoiceNotes(data.voiceNotes || []);\n } else {\n setError(data.error || \"Failed to fetch voice messages\");\n }\n } catch (err) {\n setError(\"Failed to load voice messages\");\n console.error(\"Error fetching voice messages:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDuration = (seconds: number) => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n const getStatusInfo = (voiceNote: VoiceNote) => {\n if (voiceNote.isExpired) {\n return {\n text: \"Expired\",\n color: \"text-red-600 bg-red-50\",\n icon: \"⚠️\",\n };\n }\n\n if (voiceNote.expiresAt) {\n const expiresDate = new Date(voiceNote.expiresAt);\n const now = new Date();\n const timeLeft = expiresDate.getTime() - now.getTime();\n const daysLeft = Math.ceil(timeLeft / (1000 * 60 * 60 * 24));\n\n if (daysLeft <= 1) {\n return {\n text: `Expires soon (${daysLeft} day${daysLeft !== 1 ? \"s\" : \"\"})`,\n color: \"text-orange-600 bg-orange-50\",\n icon: \"⏰\",\n };\n }\n\n return {\n text: `Expires in ${daysLeft} days`,\n color: \"text-blue-600 bg-blue-50\",\n icon: \"⏰\",\n };\n }\n\n if (voiceNote.maxListens) {\n const listensLeft = voiceNote.maxListens - voiceNote.currentListens;\n\n if (listensLeft <= 1) {\n return {\n text: `${listensLeft} listen${listensLeft !== 1 ? \"s\" : \"\"} left`,\n color: \"text-orange-600 bg-orange-50\",\n icon: \"👂\",\n };\n }\n\n return {\n text: `${listensLeft}/${voiceNote.maxListens} listens left`,\n color: \"text-blue-600 bg-blue-50\",\n icon: \"👂\",\n };\n }\n\n return {\n text: \"Active\",\n color: \"text-green-600 bg-green-50\",\n icon: \"✅\",\n };\n };\n\n const copyShareUrl = async (voiceNoteId: string) => {\n const shareUrl = `${window.location.origin}/note/${voiceNoteId}`;\n try {\n await navigator.clipboard.writeText(shareUrl);\n alert(\"Share link copied to clipboard!\");\n } catch (error) {\n console.error(\"Failed to copy:\", error);\n // Fallback: show the URL in a prompt\n prompt(\"Copy this link:\", shareUrl);\n }\n };\n\n const deleteVoiceNote = async (voiceNoteId: string) => {\n if (!confirm(\"Are you sure you want to delete this voice messages? This action cannot be undone.\")) {\n return;\n }\n\n try {\n const response = await fetch(`/api/voicenotes/${voiceNoteId}`, {\n method: \"DELETE\",\n });\n\n const data = await response.json();\n\n if (data.success) {\n setVoiceNotes(prev => prev.filter(note => note.id !== voiceNoteId));\n } else {\n alert(\"Failed to delete voice message: \" + data.error);\n }\n } catch (error) {\n console.error(\"Error deleting voice message:\", error);\n alert(\"Failed to delete voice message\");\n }\n };\n\n if (loading) {\n return (\n

⏳

\n Loading Your Voice Messages...\n

\n );\n }\n\n if (error) {\n return (\n

❌

\n Error\n

{error}

\n \n Try Again\n \n

\n );\n }\n\n return (\n

\n 📋 Your Voice Messages\n

\n \n Refresh\n \n

\n\n {voiceNotes.length === 0\n ? (\n

🎙️

\n No Voice Messages Yet\n

\n Create your first voice message to see it here!\n

\n )\n : (\n

\n {voiceNotes.map((voiceNote) => {\n const statusInfo = getStatusInfo(voiceNote);\n\n return (\n \n

\n {voiceNote.title || \"Untitled Voice Message\"}\n

\n Created {formatDate(voiceNote.createdAt)} • {formatDuration(voiceNote.duration)}\n

\n\n \n {statusInfo.icon} {statusInfo.text}\n \n

\n\n {voiceNote.transcription && (\n

\n {voiceNote.transcription}\n

\n )}\n\n

\n 👂 {voiceNote.currentListens} listen{voiceNote.currentListens !== 1 ? \"s\" : \"\"}\n {voiceNote.maxListens && 📊 {voiceNote.maxListens} max}\n {voiceNote.expiresAt && ⏰ Expires {formatDate(voiceNote.expiresAt)}}\n

\n\n

\n window.open(`/note/${voiceNote.id}`, \"_blank\")}\n className=\"px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200\"\n >\n View\n \n copyShareUrl(voiceNote.id)}\n className=\"px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200\"\n >\n Share\n \n deleteVoiceNote(voiceNote.id)}\n className=\"px-3 py-1 bg-red-100 text-red-700 rounded hover:bg-red-200\"\n >\n Delete\n \n

\n );\n })}\n

\n )}\n \n );\n}",[229,142,82],"27fa8040-40ea-11f0-8209-76b3cceeab13",["D",1749003488564],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport VoicePlayer from \"./VoicePlayer.tsx\";\nimport VoiceRecorder from \"./VoiceRecorder.tsx\";\n\ndeclare global {\n interface Window {\n __VOICE_NOTE_ID__?: string;\n }\n}\n\nexport default function App() {\n const [currentView, setCurrentView] = useState<\"recorder\" | \"player\" | \"dashboard\">(\"recorder\");\n const voiceNoteId = window.__VOICE_NOTE_ID__;\n\n useEffect(() => {\n if (voiceNoteId) {\n setCurrentView(\"player\");\n }\n }, [voiceNoteId]);\n\n return (\n

\n 🎙️ Voice Messages\n

\n Record, transcribe, and share voice notes with expiration controls\n

\n\n {/* Navigation */}\n {!voiceNoteId && (\n

\n setCurrentView(\"recorder\")}\n className={`${\n currentView === \"recorder\"\n ? \"btn\"\n : \"btn-secondary\"\n }`}\n >\n 🎙️ Record\n \n setCurrentView(\"dashboard\")}\n className={`${\n currentView === \"dashboard\"\n ? \"btn\"\n : \"btn-secondary\"\n }`}\n >\n 📋 My Messages\n \n

\n )}\n\n

\n {currentView === \"recorder\" && !voiceNoteId && (\n setCurrentView(\"dashboard\")} />\n )}\n\n {currentView === \"dashboard\" && !voiceNoteId && }\n\n {currentView === \"player\" && voiceNoteId && }\n

\n );\n}",[229,142,94],"pulls","branches",2,"forks",6,"envVars",{"_107":44,"_265":26},"connections",{"_107":26,"_264":26},"unfilledCount","emptyCount",{"_37":393,"_13":352,"_80":346,"_47":-5,"_39":40,"_223":44,"_224":24,"_41":394,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":395,"_17":396},{"_37":389,"_13":381,"_80":376,"_47":346,"_39":40,"_223":44,"_224":24,"_41":390,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":391,"_17":392},{"_37":382,"_13":383,"_80":384,"_47":376,"_39":40,"_223":44,"_224":24,"_41":385,"_43":26,"_83":84,"_226":386,"_85":30,"_227":-5,"_291":387,"_17":388},{"_37":373,"_13":374,"_80":375,"_47":376,"_39":40,"_223":44,"_224":24,"_41":377,"_43":26,"_83":84,"_226":378,"_85":30,"_227":-5,"_291":379,"_17":380},{"_37":369,"_13":361,"_80":356,"_47":346,"_39":40,"_223":44,"_224":24,"_41":370,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":371,"_17":372},{"_37":362,"_13":363,"_80":364,"_47":356,"_39":40,"_223":44,"_224":24,"_41":365,"_43":26,"_83":84,"_226":366,"_85":30,"_227":-5,"_291":367,"_17":368},{"_37":353,"_13":354,"_80":355,"_47":356,"_39":40,"_223":44,"_224":24,"_41":357,"_43":26,"_83":84,"_226":358,"_85":30,"_227":-5,"_291":359,"_17":360},{"_37":343,"_13":344,"_80":345,"_47":346,"_39":40,"_223":44,"_224":24,"_41":347,"_43":26,"_83":348,"_226":349,"_85":30,"_227":-5,"_291":350,"_17":351},{"_37":339,"_13":229,"_80":222,"_47":-5,"_39":40,"_223":44,"_224":24,"_41":340,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":341,"_17":342},{"_37":221,"_13":142,"_80":141,"_47":222,"_39":40,"_223":44,"_224":24,"_41":336,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":337,"_17":338},{"_37":251,"_13":94,"_80":93,"_47":141,"_39":40,"_223":135,"_224":24,"_41":333,"_43":122,"_83":84,"_226":253,"_85":30,"_227":-5,"_291":334,"_17":335},{"_37":247,"_13":82,"_80":81,"_47":141,"_39":40,"_223":44,"_224":24,"_41":330,"_43":26,"_83":84,"_226":249,"_85":30,"_227":-5,"_291":331,"_17":332},{"_37":243,"_13":106,"_80":105,"_47":141,"_39":40,"_223":44,"_224":24,"_41":327,"_43":26,"_83":84,"_226":245,"_85":30,"_227":-5,"_291":328,"_17":329},{"_37":239,"_13":111,"_80":110,"_47":141,"_39":40,"_223":44,"_224":24,"_41":324,"_43":26,"_83":84,"_226":241,"_85":30,"_227":-5,"_291":325,"_17":326},{"_37":235,"_13":100,"_80":99,"_47":141,"_39":40,"_223":44,"_224":24,"_41":321,"_43":26,"_83":84,"_226":237,"_85":30,"_227":-5,"_291":322,"_17":323},{"_37":314,"_13":315,"_80":316,"_47":222,"_39":40,"_223":259,"_224":24,"_41":317,"_43":257,"_83":21,"_226":318,"_85":30,"_227":-5,"_291":319,"_17":320},{"_37":307,"_13":308,"_80":309,"_47":222,"_39":40,"_223":44,"_224":24,"_41":310,"_43":26,"_83":84,"_226":311,"_85":30,"_227":-5,"_291":312,"_17":313},{"_37":303,"_13":302,"_80":297,"_47":-5,"_39":40,"_223":44,"_224":24,"_41":304,"_43":26,"_83":143,"_226":-5,"_85":30,"_227":-5,"_291":305,"_17":306},{"_37":294,"_13":295,"_80":296,"_47":297,"_39":40,"_223":44,"_224":24,"_41":298,"_43":26,"_83":84,"_226":299,"_85":30,"_227":-5,"_291":300,"_17":301},{"_37":286,"_13":287,"_80":288,"_47":-5,"_39":40,"_223":44,"_224":24,"_41":289,"_43":26,"_83":21,"_226":290,"_85":30,"_227":-5,"_291":292,"_17":293},"4e814f1a-40e9-11f0-8d0a-76b3cceeab13","README.md","ada9f206-d325-4c7b-a2e9-22fe8127baa5",["D",1749003123700],"# Voice Notes App\n\nA web application for recording, transcribing, and sharing voice notes with expiration controls.\n\n## Features\n\n- 🎙️ Record voice notes directly in the browser\n- 🤖 AI-powered transcription using OpenAI Whisper\n- 🔗 Share voice notes via unique URLs\n- ⏰ Set expiration by max listens or date\n- 📋 Dashboard to view and manage all your voice notes\n- 🗑️ Delete voice notes you no longer need\n- 📱 Responsive design with modern UI\n\n## User Stories\n\n- I can record a voice note\n- Given I record a voice note, it is transcribed by AI\n- Given I have recorded a voice note, I can share that voice note with someone via URL\n- I can set an expiration for the voice note by number of max listens (i.e. 1 listen)\n- Or, I can set an expiration for the voice note by choosing an expiration date\n- I can see which voice notes I have sent\n- I can delete voice notes I no longer need\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ ├── routes/\n│ │ ├── voicenotes.ts # Voice note CRUD operations\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── VoiceRecorder.tsx # Recording interface\n│ │ ├── VoicePlayer.tsx # Playback interface\n│ │ ├── ShareModal.tsx # Sharing configuration\n│ │ └── Dashboard.tsx # Voice notes management\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Database**: SQLite for voice note metadata\n- **Storage**: Val Town Blob storage for audio files\n- **AI**: OpenAI Whisper for transcription\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS","children",[],[287],"4e814858-40e9-11f0-8d0a-76b3cceeab13","types.ts","62f7a7c1-519b-411a-a912-d17b9b82517d","2a1f683d-48f5-453f-9ed6-a4c7321db69b",["D",1749003123700],"// Shared types for voice notes app\n\nexport interface VoiceNote {\n id: string;\n title?: string;\n audioUrl: string;\n transcription?: string;\n duration: number; // in seconds\n createdAt: string;\n expiresAt?: string; // ISO date string\n maxListens?: number;\n currentListens: number;\n isExpired: boolean;\n}\n\nexport interface CreateVoiceNoteRequest {\n audioBlob: Blob;\n title?: string;\n expiresAt?: string;\n maxListens?: number;\n}\n\nexport interface ShareSettings {\n expiresAt?: string;\n maxListens?: number;\n}\n\nexport interface VoiceNoteResponse {\n success: boolean;\n voiceNote?: VoiceNote;\n shareUrl?: string;\n error?: string;\n}\n\nexport interface TranscriptionResponse {\n success: boolean;\n transcription?: string;\n error?: string;\n}",[],[302,295],"shared","4e814cd6-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],[284],[302],"4e814420-40e9-11f0-8d0a-76b3cceeab13","index.tsx","8b783aba-446c-4db7-82b3-4d1acd80558d",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[229,308],"cda09fbc-40e9-11f0-84ac-76b3cceeab13","index.html","35d75a57-e057-4372-8ca5-16bb90ed146a",["D",1749003336981],"\n\n \n \n \n Voice Messages\n \n \n \n \n \n \n

\n \n \n",[],[229,315],["D",1749003123700],[],[229,142,100],["D",1749003123700],[],[229,142,111],["D",1749003123700],[],[229,142,106],["D",1749003123700],[],[229,142,82],["D",1749003488564],[],[229,142,94],["D",1749003123700],[276,277,278,279,280],[229,142],"4e81465a-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],[275,281,282],[229],"4e810e6a-40e9-11f0-8d0a-76b3cceeab13","index.ts","258ce14e-2ddd-4760-aca1-2e0d5237ee49","1a4da476-77b2-45f8-afd5-acd38e8c5b92",["D",1749003123700],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport voiceNotesRoutes from \"./routes/voicenotes.ts\";\nimport staticRoutes from \"./routes/static.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Run database migrations on startup\ntry {\n await runMigrations();\n console.log(\"Migrations completed successfully\");\n} catch (error) {\n console.error(\"Migration failed:\", error);\n}\n\n// Mount routes\napp.route(\"/api/voicenotes\", voiceNotesRoutes);\napp.route(\"/\", staticRoutes);\n\nexport default app.fetch;",[],[352,344],"backend","4e810320-40e9-11f0-8d0a-76b3cceeab13","voicenotes.ts","b4fe8b36-2167-4f2b-b58f-1c5ce5864ac2","d6500995-92ee-449f-8e09-154ed7f1aa86",["D",1749003123700],"import { type Context, Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport Groq from \"npm:groq-sdk\";\nimport type { TranscriptionResponse, VoiceNote, VoiceNoteResponse } from \"../../shared/types.ts\";\nimport { TABLE_NAME } from \"../database/migrations.ts\";\nimport {\n createVoiceNote,\n deleteVoiceNote,\n getAllVoiceNotes,\n getVoiceNote,\n incrementListenCount,\n updateTranscription,\n} from \"../database/queries.ts\";\n\nconst app = new Hono();\nconst openai = new OpenAI();\n\n// Get all voice notes (for admin/dashboard)\napp.get(\"/\", async (c) => {\n try {\n const voiceNotes = await getAllVoiceNotes();\n return c.json({ success: true, voiceNotes });\n } catch (error) {\n console.error(\"Error fetching voice notes:\", error);\n return c.json({ success: true, voiceNotes: [] });\n }\n});\n\n// Create a new voice note\napp.post(\"/\", async (c) => {\n try {\n const formData = await c.req.formData();\n const audioFile = formData.get(\"audio\") as File;\n const title = formData.get(\"title\") as string;\n const duration = formData.get(\"duration\") as string;\n const expiresAt = formData.get(\"expiresAt\") as string;\n const maxListens = formData.get(\"maxListens\") as string;\n\n if (!audioFile) {\n return c.json({ success: false, error: \"No audio file provided\" }, 400);\n }\n\n // Generate unique ID\n const id = crypto.randomUUID();\n const blobKey = `voice_note_${id}`;\n\n // Store audio file in blob storage\n const audioBuffer = await audioFile.arrayBuffer();\n await blob.set(blobKey, new Uint8Array(audioBuffer));\n\n // Create voice note record\n const voiceNote: Omit = {\n id,\n title: title || undefined,\n audioUrl: blobKey,\n duration: duration ? parseInt(duration) : 0,\n createdAt: new Date().toISOString(),\n expiresAt: expiresAt || undefined,\n maxListens: maxListens ? parseInt(maxListens) : undefined,\n currentListens: 0,\n };\n\n await createVoiceNote(voiceNote);\n\n // Start transcription in background\n transcribeAudio(id, audioBuffer).catch(console.error);\n\n const shareUrl = `${new URL(c.req.url).origin}/note/${id}`;\n\n return c.json({\n success: true,\n voiceNote: { ...voiceNote, isExpired: false },\n shareUrl,\n });\n } catch (error) {\n console.error(\"Error creating voice note:\", error);\n return c.json({ success: false, error: \"Failed to create voice note\" }, 500);\n }\n});\n\n// Get a voice note by ID\napp.get(\"/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n const voiceNote = await getVoiceNote(id);\n\n if (!voiceNote) {\n return c.json({ success: false, error: \"Voice note not found\" }, 404);\n }\n\n if (voiceNote.isExpired) {\n return c.json({ success: false, error: \"Voice note has expired\" }, 410);\n }\n\n return c.json({ success: true, voiceNote });\n } catch (error) {\n console.error(\"Error fetching voice note:\", error);\n return c.json({ success: false, error: \"Failed to fetch voice note\" }, 500);\n }\n});\n\n// Get audio file for a voice note\napp.get(\"/:id/audio\", async (c: Context) => {\n try {\n const id = c.req.param(\"id\");\n const voiceNote = await getVoiceNote(id);\n\n if (!voiceNote) {\n return c.json({ success: false, error: \"Voice note not found\" }, 404);\n }\n\n if (voiceNote.isExpired) {\n return c.json({ success: false, error: \"Voice note has expired\" }, 410);\n }\n\n // Increment listen count\n await incrementListenCount(id);\n\n // Check if audio file exists in blob storage\n if (!voiceNote.audioUrl) {\n return c.json({ success: false, error: \"Audio file not found\" }, 404);\n }\n\n // Get audio from blob storage\n const audioStream = await blob.get(voiceNote.audioUrl);\n\n if (!audioStream) {\n return c.json({ success: false, error: \"Audio file not found\" }, 404);\n }\n\n const audioArrayBuffer = await audioStream.arrayBuffer();\n\n // Set headers\n c.header(\"Content-Type\", \"audio/webm\");\n c.header(\"Content-Length\", audioArrayBuffer.byteLength.toString());\n\n // Send the buffer as the response\n return new Response(audioArrayBuffer, {\n headers: c.headers,\n });\n } catch (error) {\n console.error(\"Error serving audio:\", error);\n return c.json({ success: false, error: \"Failed to serve audio\" }, 500);\n }\n});\n\nconst groq = new Groq({\n apiKey: Deno.env.get(\"GROQ_API_KEY\") || \"\",\n});\n// Background transcription function\nasync function transcribeAudio(voiceNoteId: string, audioBuffer: ArrayBuffer) {\n try {\n // Convert ArrayBuffer to File for OpenAI\n const audioFile = new File([audioBuffer], \"audio.webm\", { type: \"audio/webm\" });\n\n const transcription = await groq.audio.transcriptions.create({\n file: audioFile,\n model: \"whisper-large-v3-turbo\",\n response_format: \"verbose_json\",\n });\n\n await updateTranscription(voiceNoteId, transcription.text);\n console.log(`Transcription completed for voice note ${voiceNoteId}`);\n } catch (error) {\n console.error(`Transcription failed for voice note ${voiceNoteId}:`, error);\n }\n}\n\n// Delete a voice note\napp.delete(\"/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n const voiceNote = await getVoiceNote(id);\n\n if (!voiceNote) {\n return c.json({ success: false, error: \"Voice note not found\" }, 404);\n }\n\n // Delete audio from blob storage\n try {\n await blob.delete(voiceNote.audioUrl);\n } catch (error) {\n console.warn(\"Failed to delete audio blob:\", error);\n }\n\n // Delete from database\n await deleteVoiceNote(id);\n\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error deleting voice note:\", error);\n return c.json({ success: false, error: \"Failed to delete voice note\" }, 500);\n }\n});\n\nexport default app;",[],[352,361,354],"routes","4e80fede-40e9-11f0-8d0a-76b3cceeab13","static.ts","c8a56c99-844b-49f1-91bc-1360130fe796",["D",1749003123700],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main app\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve voice note player page\napp.get(\"/note/:id\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject the voice note ID for the player\n const voiceNoteId = c.req.param(\"id\");\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\nexport default app;",[],[352,361,363],"4e810ce4-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],[271,272],[352,361],"4e80f754-40e9-11f0-8d0a-76b3cceeab13","queries.ts","efbcb531-8e2d-4886-97cb-c964e9614ee5","9c22f435-ebe1-4a93-bf31-234f761ba593",["D",1749003123700],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { VoiceNote } from \"../../shared/types.ts\";\n\nexport async function createVoiceNote(voiceNote: Omit): Promise {\n try {\n await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (\n id, title, audio_blob_key, transcription, duration, \n created_at, expires_at, max_listens, current_listens\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n voiceNote.id,\n voiceNote.title || null,\n voiceNote.audioUrl, // This will be the blob key\n voiceNote.transcription || null,\n voiceNote.duration,\n voiceNote.createdAt,\n voiceNote.expiresAt || null,\n voiceNote.maxListens || null,\n voiceNote.currentListens\n ]\n );\n console.log(\"Voice note successfully inserted into database\");\n } catch (error) {\n console.error(\"Error inserting voice note into database:\", error);\n throw error;\n }\n}\n\nexport async function getVoiceNote(id: string): Promise {\n try {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [id]\n );\n \n // Handle the case where result.rows exists (new format) or result is an array (old format)\n const rows = result.rows || result;\n \n if (!Array.isArray(rows) || rows.length === 0) {\n return null;\n }\n \n const row = rows[0];\n const now = new Date();\n const expiresAt = row.expires_at ? new Date(row.expires_at) : null;\n const isExpiredByDate = expiresAt && now > expiresAt;\n const isExpiredByListens = row.max_listens && row.current_listens >= row.max_listens;\n const isExpired = isExpiredByDate || isExpiredByListens || false;\n \n return {\n id: row.id,\n title: row.title,\n audioUrl: row.audio_blob_key,\n transcription: row.transcription,\n duration: row.duration,\n createdAt: row.created_at,\n expiresAt: row.expires_at,\n maxListens: row.max_listens,\n currentListens: row.current_listens,\n isExpired\n };\n } catch (error) {\n console.error(\"Error getting voice note from database:\", error);\n throw error;\n }\n}\n\nexport async function incrementListenCount(id: string): Promise {\n await sqlite.execute(\n `UPDATE ${TABLE_NAME} SET current_listens = current_listens + 1 WHERE id = ?`,\n [id]\n );\n}\n\nexport async function updateTranscription(id: string, transcription: string): Promise {\n await sqlite.execute(\n `UPDATE ${TABLE_NAME} SET transcription = ? WHERE id = ?`,\n [transcription, id]\n );\n}\n\nexport async function deleteVoiceNote(id: string): Promise {\n await sqlite.execute(\n `DELETE FROM ${TABLE_NAME} WHERE id = ?`,\n [id]\n );\n}\n\nexport async function getAllVoiceNotes(): Promise {\n try {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC`);\n \n // Handle the case where result.rows exists (new format) or result is an array (old format)\n const rows = result.rows || result;\n \n if (!Array.isArray(rows)) {\n return [];\n }\n \n return rows.map(row => {\n const now = new Date();\n const expiresAt = row.expires_at ? new Date(row.expires_at) : null;\n const isExpiredByDate = expiresAt && now > expiresAt;\n const isExpiredByListens = row.max_listens && row.current_listens >= row.max_listens;\n const isExpired = isExpiredByDate || isExpiredByListens || false;\n \n return {\n id: row.id,\n title: row.title,\n audioUrl: row.audio_blob_key,\n transcription: row.transcription,\n duration: row.duration,\n createdAt: row.created_at,\n expiresAt: row.expires_at,\n maxListens: row.max_listens,\n currentListens: row.current_listens,\n isExpired\n };\n });\n } catch (error) {\n console.error('Error in getAllVoiceNotes:', error);\n throw error;\n }\n}",[],[352,381,374],"database","4e80edd6-40e9-11f0-8d0a-76b3cceeab13","migrations.ts","e4e8b6d1-50a3-4e59-8b4b-170d0fa3f4d9",["D",1749003123700],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst TABLE_NAME = 'voice_notes_v1';\n\nexport async function runMigrations() {\n try {\n // Create voice notes table\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id TEXT PRIMARY KEY,\n title TEXT,\n audio_blob_key TEXT NOT NULL,\n transcription TEXT,\n duration INTEGER NOT NULL,\n created_at TEXT NOT NULL,\n expires_at TEXT,\n max_listens INTEGER,\n current_listens INTEGER DEFAULT 0,\n is_expired BOOLEAN DEFAULT FALSE\n )`);\n \n console.log('Database migrations completed successfully');\n } catch (error) {\n console.error('Database migration failed:', error);\n throw error;\n }\n}\n\nexport { TABLE_NAME };",[],[352,381,383],"4e80fd62-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],[268,269],[352,381],"4e810fc8-40e9-11f0-8d0a-76b3cceeab13",["D",1749003123700],[267,270,273],[352],["D",1748056195569],{"_11":12,"_193":88},{"_11":12,"_188":189,"_87":88,"_31":86,"_190":191,"_192":30},{"_43":135,"_13":16,"_37":40,"_180":145,"_181":76,"_182":78,"_183":149,"_184":145,"_185":46,"_186":14,"_187":12},"ctx",{"_56":-5,"_213":434,"_435":436,"_437":438,"_439":30,"_440":30,"_441":30,"_442":24,"_443":-5,"_444":-7,"_445":-7,"_446":26,"_447":30,"_448":30,"_449":-5,"_450":30,"_451":30,"_452":30,"_453":-5},"ENV",{"_405":406,"_407":408,"_409":77,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429,"_430":431,"_432":433},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

History · components