function DigitalCompositionBook({ conversation, isLoading }) { const renderMessages = conversation.map((msg, index)=>{ const messagePrefix = msg.role === 'user' ? '👤 You: ' : '🤖 AI: '; const messageColor = msg.role === 'user' ? 'text-blue-600' : 'text-green-600'; return /*#__PURE__*/ React.createElement("p", { key: index, className: `mb-2 ${messageColor} animated-text`, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, messagePrefix, msg.content); }); return /*#__PURE__*/ React.createElement("div", { className: "book-pages absolute inset-0 bg-white", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "paper-lines p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, renderMessages, isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 animated-text", __source: { fileName: "", lineNumber: 16, columnNumber: 23 }, __self: this }, "Thinking...")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, ` .animated-text { animation: fadeIn 1s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); } function DigitalCompositionBookStory() { const exampleConversation = [ { role: 'user', content: 'What is the weather like today?' }, { role: 'ai', content: 'The weather is sunny with a chance of rain.' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DigitalCompositionBook, { conversation: exampleConversation, isLoading: false, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DigitalCompositionBook, { conversation: exampleConversation, isLoading: true, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [knowledgeBase, setKnowledgeBase] = React.useState([]); const [isBookOpen, setIsBookOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [conversation, setConversation] = React.useState([]); const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (userInput.trim()) { setIsLoading(true); setIsBookOpen(true); const newMessage = { role: "user", content: userInput }; setConversation([ ...conversation, newMessage ]); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...conversation, newMessage ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { const aiResponse = data.choices[0].message.content; setConversation((prev)=>[ ...prev, { role: "assistant", content: aiResponse } ]); setKnowledgeBase((prev)=>[ ...prev, { type: 'input', content: userInput }, { type: 'output', content: aiResponse } ]); } } catch (error) { console.error('Error:', error); } setIsLoading(false); setUserInput(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "ADHD Task Management Companion"), /*#__PURE__*/ React.createElement("div", { className: `book ${isBookOpen ? 'open' : ''} mb-8 w-full h-96 bg-black relative overflow-hidden rounded-lg`, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "book-cover absolute inset-0 bg-black", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "marble-spots absolute inset-0 opacity-20", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "white-arc absolute top-4 left-1/2 transform -translate-x-1/2 w-48 h-24 bg-white rounded-t-full", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), isBookOpen && /*#__PURE__*/ React.createElement(DigitalCompositionBook, { conversation: conversation, isLoading: isLoading, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-6", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, onChange: handleInputChange, placeholder: "What do you need help with today?", className: "w-full p-3 border border-gray-300 rounded-lg text-lg", name: "userInput", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-3 bg-blue-500 text-white px-6 py-3 rounded-lg text-lg font-semibold hover:bg-blue-600 transition duration-300", disabled: isLoading, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, isLoading ? 'Processing...' : "Let's Get Started!")), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "ADHD Task Management Companion - Helping you break down tasks and achieve your goals."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "© 2024 All rights reserved"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, ` @keyframes typewriter { from { width: 0; } to { width: 100%; } } .animated-text { overflow: hidden; border-right: 0.15em solid orange; white-space: nowrap; margin: 0 auto; letter-spacing: 0.15em; animation: typewriter 3.5s steps(40, end), blink-caret 0.75s step-end infinite; } .book { transition: transform 0.5s ease-in-out; } .book.open { transform: rotateY(-180deg); } .marble-spots { background-image: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, transparent 10%); background-size: 50px 50px; background-position: 0 0, 25px 25px; } .paper-lines { background-image: linear-gradient(#eee 0.1em, transparent 0.1em); background-size: 100% 1.2em; } `)); }