function MainComponent() { const [activeTab, setActiveTab] = useState("meals"); const [isRecording, setIsRecording] = useState(false); const [voiceNotes, setVoiceNotes] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [mediaRecorder, setMediaRecorder] = useState(null); const [upload, { loading: uploadLoading }] = useUpload(); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setVoiceNotes((prev)=>[ ...prev, message ]); setStreamingMessage(""); } }); const [error, setError] = useState(null); const startRecording = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); const chunks = []; recorder.ondataavailable = (e)=>chunks.push(e.data); recorder.onstop = async ()=>{ try { const blob = new Blob(chunks, { type: "audio/webm" }); const { url, error: uploadError } = await upload({ file: blob }); if (uploadError) { setError("Failed to upload audio: " + uploadError); return; } const response = await fetch("/api/process-note", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ audioUrl: url }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); const claudeResponse = await fetch("/integrations/anthropic-claude/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: result.text } ], stream: true }) }); if (!claudeResponse.ok) { throw new Error(`Claude API error! status: ${claudeResponse.status}`); } setError(null); handleStreamResponse(claudeResponse); } catch (err) { setError("Error processing voice note: " + err.message); } }; recorder.start(); setMediaRecorder(recorder); setIsRecording(true); } catch (err) { setError("Error accessing microphone: " + err.message); } }; const stopRecording = ()=>{ mediaRecorder.stop(); mediaRecorder.stream.getTracks().forEach((track)=>track.stop()); setIsRecording(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-red-100 text-red-700 rounded-lg", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex space-x-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("meals"), className: `px-4 py-2 rounded-lg ${activeTab === "meals" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "Meals"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("symptoms"), className: `px-4 py-2 rounded-lg ${activeTab === "symptoms" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Symptoms"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("supplements"), className: `px-4 py-2 rounded-lg ${activeTab === "supplements" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Supplements")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isRecording ? stopRecording : startRecording, className: `p-4 rounded-full ${isRecording ? "bg-red-500" : "bg-blue-500"} text-white`, disabled: uploadLoading, __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isRecording ? "fa-stop" : "fa-microphone"}`, __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg min-h-[200px]", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, activeTab === "meals" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 35 }, __self: this }, "Meals Content"), activeTab === "symptoms" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 132, columnNumber: 38 }, __self: this }, "Symptoms Content"), activeTab === "supplements" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 133, columnNumber: 41 }, __self: this }, "Supplements Content")), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-blue-100 rounded-lg", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, streamingMessage), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, voiceNotes.map((note, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, note)))); }