function AiDiscussionInput({ placeholder = "Commencez la discussion...", name = "discussionInput", value, onChange }) { return /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-4 bg-transparent outline-none", placeholder: placeholder, name: name, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function AiDiscussionInputStory() { const [discussionInput, setDiscussionInput] = React.useState(""); const handleInputChange = (event)=>{ setDiscussionInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiDiscussionInput, { value: discussionInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [category, setCategory] = React.useState(''); const [discussionInput, setDiscussionInput] = React.useState(''); const [responses, setResponses] = React.useState([]); const [isSending, setIsSending] = React.useState(false); const [isListening, setIsListening] = React.useState(false); const handleCategoryChange = (event)=>{ setCategory(event.target.value); setResponses([]); }; const handleInputChange = (event)=>{ setDiscussionInput(event.target.value); }; const handleSend = async ()=>{ setIsSending(true); const messages = [ { role: "user", content: discussionInput } ]; const system_prompt = `Corrigez la prononciation et les erreurs grammaticales pour "${discussionInput}" dans la catégorie "${category}".`; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt }) }); const data = await response.json(); if (data.status) { setResponses([ ...responses, data.result ]); speak(data.result); } } catch (error) { console.error('Failed to send message', error); } finally{ setIsSending(false); } setDiscussionInput(''); }; const speak = (text)=>{ const speechUrl = `/integrations/text-to-speech/speech?text=${encodeURIComponent(text)}&language=fr-FR`; const audio = new Audio(speechUrl); audio.play(); }; const handleStartListening = ()=>{ setIsListening(true); navigator.mediaDevices.getUserMedia({ audio: true }).then((stream)=>{ const mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); const audioChunks = []; mediaRecorder.addEventListener("dataavailable", (event)=>{ audioChunks.push(event.data); }); mediaRecorder.addEventListener("stop", ()=>{ const audioBlob = new Blob(audioChunks); transcribeAudio(audioBlob); setIsListening(false); }); setTimeout(()=>{ mediaRecorder.stop(); }, 5000); }).catch((error)=>{ console.error('Failed to start audio recording', error); setIsListening(false); }); }; const transcribeAudio = async (audioBlob)=>{ try { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': 'audio/webm' }, body: audioBlob }); const data = await response.json(); const transcript = data.results.channels.reduce((acc, channel)=>`${acc} ${channel.alternatives[0].transcript}`, "").trim(); setDiscussionInput(transcript); handleSend(); } catch (error) { console.error('Failed to transcribe audio', error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-2 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Application éducative avec discussion IA"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-center font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Dialoguez oralement avec l'IA sur des situations quotidiennes en France. L'IA peut corriger la prononciation et les erreurs grammaticales.")), /*#__PURE__*/ React.createElement("div", { className: "px-6 pt-4 pb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-[#fff] border border-[#ddd] rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", name: "category", value: category, onChange: handleCategoryChange, __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Sélectionnez une catégorie"), /*#__PURE__*/ React.createElement("option", { value: "shopping", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Faire des achats"), /*#__PURE__*/ React.createElement("option", { value: "restaurant", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Aller au restaurant"), /*#__PURE__*/ React.createElement("option", { value: "travel", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Voyager"), /*#__PURE__*/ React.createElement("option", { value: "emergency", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Situations d'urgence"))), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(AiDiscussionInput, { placeholder: "Commencez la discussion...", name: "discussionInput", value: discussionInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full bg-[#007bff] text-white rounded-lg py-2 font-bold font-roboto ${isSending ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: isSending, onClick: handleSend, __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Envoyer"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 bg-[#10b981] text-white rounded-lg font-bold font-roboto ${isListening ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: isListening, onClick: handleStartListening, __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "🎙 Écouter")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, responses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-[#333] p-2", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, response)))))); }