function MainComponent({ onTranscribe, onGenerateMinutes }) { const [selectedFile, setSelectedFile] = React.useState(null); const [transcription, setTranscription] = React.useState(''); const [progress, setProgress] = React.useState(0); const [downloading, setDownloading] = React.useState(false); const [minutesProgress, setMinutesProgress] = React.useState(0); const [downloadingMinutes, setDownloadingMinutes] = React.useState(false); const handleFileChange = (e)=>{ setSelectedFile(e.target.files[0]); setProgress(0); setTranscription(''); setDownloading(false); setMinutesProgress(0); setDownloadingMinutes(false); }; const handleUpload = async ()=>{ if (!selectedFile) return; setProgress(30); const audioData = new Blob([ selectedFile ], { type: selectedFile.type }); try { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioData, headers: { 'Content-Type': selectedFile.type } }); const data = await response.json(); setTranscription(data.results.channels[0].alternatives[0].transcript); onTranscribe(data.results.channels[0].alternatives[0].transcript); } catch (error) { console.error(error); } setProgress(100); setTimeout(()=>setDownloading(true), 500); }; const handleDownloadTranscription = ()=>{ const element = document.createElement("a"); const file = new Blob([ transcription ], { type: 'text/plain' }); element.href = URL.createObjectURL(file); element.download = "transcription.txt"; document.body.appendChild(element); element.click(); }; const handleGenerateMinutes = async ()=>{ if (!transcription) return; setMinutesProgress(30); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: transcription } ], system_prompt: 'Generate minutes in markdown format' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); onGenerateMinutes(data.choices[0].message.content); } catch (error) { console.error(error); } setMinutesProgress(100); setTimeout(()=>setDownloadingMinutes(true), 500); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleFileChange, className: "mb-2", name: "audioUpload", accept: ".mp3,.wav,.m4a", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Accepted formats: .mp3, .wav, .m4a")), progress > 0 && progress < 100 && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 h-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-4", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleUpload, className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "Transcribe"), downloading && /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadTranscription, className: "px-4 py-2 text-white bg-green-500 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 89, columnNumber: 23 }, __self: this }, "Download Transcription"), downloadingMinutes && /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateMinutes, className: "px-4 py-2 text-white bg-purple-500 rounded hover:bg-purple-700 disabled:opacity-50", disabled: !downloading, __source: { fileName: "", lineNumber: 90, columnNumber: 30 }, __self: this }, "Generate Minutes"), minutesProgress > 0 && minutesProgress < 100 && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 h-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-purple-600 h-4", style: { width: `${minutesProgress}%` }, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }))); } function StoryComponent() { const [transcription, setTranscription] = React.useState(''); const [minutes, setMinutes] = React.useState(''); const handleTranscribe = (transcript)=>{ setTranscription(transcript); console.log('Transcription:', transcript); }; const handleGenerateMinutes = (minutesText)=>{ setMinutes(minutesText); console.log('Minutes:', minutesText); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onTranscribe: handleTranscribe, onGenerateMinutes: handleGenerateMinutes, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }), transcription && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 117, columnNumber: 25 }, __self: this }, "Transcription: ", transcription), minutes && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, "Minutes: ", minutes)); }