function MainComponent() { const [chatInput, setChatInput] = React.useState(""); const [chatMessages, setChatMessages] = React.useState([ { role: 'user', content: 'Démarrer le suivi de mon activité vélo', timestamp: new Date().toLocaleTimeString() } ]); const [isLoading, setIsLoading] = React.useState(false); const handleMessageChange = (event)=>{ setChatInput(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!chatInput.trim()) return; const currentUserMessage = { role: 'user', content: chatInput, timestamp: new Date().toLocaleTimeString() }; setChatMessages([ ...chatMessages, currentUserMessage ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatMessages, currentUserMessage ], system_prompt: '', max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { const newSystemMessage = { role: 'system', content: data.result, timestamp: new Date().toLocaleTimeString() }; setChatMessages([ ...chatMessages, currentUserMessage, newSystemMessage ]); setChatInput(""); } } catch (error) {} setIsLoading(false); }; const messageElements = chatMessages.map((message, index)=>{ const messageClasses = message.role === 'user' ? "text-[#111827] bg-[#e5e7eb] rounded-full px-4 py-2" : "text-[#111827] bg-[#d1fae5] rounded-full px-4 py-2"; const alignmentClasses = message.role === 'user' ? "flex items-center space-x-3" : "flex items-center space-x-3 justify-end"; return /*#__PURE__*/ React.createElement("div", { key: index, className: alignmentClasses, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, message.role === 'user' && /*#__PURE__*/ React.createElement("div", { className: "text-[#6b7280] font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 37 }, __self: this }, "Vous:"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: messageClasses, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#6b7280] font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, message.timestamp)), message.role === 'system' && /*#__PURE__*/ React.createElement("div", { className: "text-[#6b7280] font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 39 }, __self: this }, "Système:")); }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-screen bg-[#f7f7f7] p-4 md:p-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-white rounded-lg shadow p-4 md:p-6 space-y-4 overflow-y-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, messageElements), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Tapez votre message ici...", className: "flex-grow px-4 py-2 bg-white border border-[#d1d5db] rounded-full text-[#111827] font-roboto placeholder-[#6b7280]", value: chatInput, onChange: handleMessageChange, disabled: isLoading, __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-[48px] h-[48px] bg-[#4f46e5] rounded-full flex items-center justify-center text-white disabled:bg-[#a5a6f6]", disabled: isLoading, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isLoading ? 'fa-spinner fa-spin' : 'fa-paper-plane'}`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }))))); }