function TextInputComponent({ placeholder, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 border-2 border-[#d1d5db] rounded p-2 font-roboto text-[#121212]", placeholder: placeholder, onChange: onChange, value: value, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TextInputComponentStory() { const [userInput, setUserInput] = React.useState(""); const handleMessageChange = (event)=>{ setUserInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextInputComponent, { placeholder: "Type your message here...", value: userInput, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([ { role: 'system', content: "Hello! How can I help you today?" } ]); const [images, setImages] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const handleMessageChange = (e)=>{ setUserInput(e.target.value); }; const handleImageSearch = async (query)=>{ try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(query)}`, { method: 'GET' }); const data = await response.json(); if (data.status === "success") { setImages(data.items.slice(0, 3)); } } catch (error) { setMessages((prev)=>[ ...prev, { role: 'system', content: "Failed to fetch images, please try again." } ]); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (userInput.trim() === '') return; setLoading(true); setMessages((prev)=>[ ...prev, { role: 'user', content: userInput } ]); await handleImageSearch(userInput); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: userInput } ], system_prompt: 'Please respond to the user query', max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setMessages((prev)=>[ ...prev, { role: 'assistant', content: data.result } ]); } else { setMessages((prev)=>[ ...prev, { role: 'system', content: "Sorry, there was an error processing your request." } ]); } } catch (error) { setMessages((prev)=>[ ...prev, { role: 'system', content: "Network error, please try again later." } ]); } setLoading(false); setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-4xl mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Chat with GPT & Discover Images"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow-lg rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Loading...")), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: message.role === 'user' ? "text-right" : "", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, message.content)))), images.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: image.contextLink, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `Thumbnail of ${image.title}`, className: "rounded-lg", style: { height: "100px", width: "auto" }, __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(TextInputComponent, { placeholder: "Type your message here...", value: userInput, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 bg-[#4f46e5] hover:bg-[#4338ca] text-white font-roboto rounded p-2", disabled: loading, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("img", { src: "images/bitcoin-person.jpg", alt: "Person holding a Bitcoin coin", className: "rounded-lg shadow-lg", style: { width: '768px', maxWidth: '100%', height: 'auto' }, __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this })); }