function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const imageIndex = React.useRef(0); const images = [ './images/ornate-horse-helmet-side-view.jpg', './images/detailed-ornate-full-horse-armor-side-view.jpg', './images/ornate-horse-helmet-front-view.jpg', './images/ornate-horse-armor-on-black-background.jpg', './images/ornate-horse-armor-sculpted-design.jpg' ]; const sendMessage = (content)=>{ const newMessage = { role: 'user', content }; setMessages([ ...messages, newMessage ]); setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'Please describe this piece of horse armor.' }) }).then((response)=>response.json()).then((data)=>{ setMessages([ ...messages, newMessage, { role: 'assistant', content: data.result } ]); setIsLoading(false); imageIndex.current = (imageIndex.current + 1) % images.length; }); }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); sendMessage(inputValue); setInputValue(''); }; const chatMessages = messages.map((message, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `font-roboto ${message.role === 'assistant' ? 'text-[#007bff] bg-blue-100' : 'text-black bg-gray-100'} rounded p-2 my-2`, __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, message.content)); const imageAltText = [ "Ornate horse helmet side view", "Detailed ornate horse armor side view", "Ornate horse helmet front view", "Ornate horse armor on a black background", "Ornate horse armor with a sculpted design" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7fafc] p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded shadow", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[imageIndex.current], alt: imageAltText[imageIndex.current], className: "w-full h-auto bg-[#0a0a0a]", style: { filter: 'drop-shadow(2px 4px 6px black)' }, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[300px] bg-[#f0f0f2]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, chatMessages, isLoading && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#6c757d]", __source: { fileName: "", lineNumber: 75, columnNumber: 27 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex space-x-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, name: "messageInput", className: "flex-1 p-2 border border-[#ced4da] rounded focus:outline-none focus:ring-2 focus:ring-[#80bdff]", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 bg-[#0056b3] text-white rounded hover:bg-[#004085] focus:outline-none", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Send"))))); }