function MainComponent({ messages, setMessages }) { const [inputValue, setInputValue] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [selectedIntegration, setSelectedIntegration] = React.useState("CHAT_GPT"); const handleChange = (event)=>{ setInputValue(event.target.value); }; const handleSend = async ()=>{ setIsLoading(true); let newMessage = inputValue; let responseData = ""; try { if (selectedIntegration === "CHAT_GPT") { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: newMessage } ], system_prompt: 'Explain this content' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); responseData = data.choices[0].message.content; } else if (selectedIntegration === "DALL_E_3" || selectedIntegration === "STABLE_DIFFUSION") { const response = await fetch(`/integrations/${selectedIntegration.toLowerCase()}/?prompt=${encodeURIComponent(newMessage)}`, { method: 'GET' }); const data = await response.json(); responseData = data.data[0]; } else if (selectedIntegration === "GOOGLE_TRANSLATE") { const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: newMessage, target: 'en' }) }); const data = await response.json(); responseData = data.data.translations[0].translatedText; } else if (selectedIntegration === "GPT_VISION") { const response = await fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: newMessage } ] } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); responseData = data.choices[0].message.content; } } catch (error) { responseData = "Error retrieving the response."; } setMessages((prevMessages)=>[ ...prevMessages, { text: newMessage, isAI: false }, { text: responseData, isAI: true } ]); setIsLoading(false); setInputValue(""); }; const integrations = [ "CHAT_GPT", "DALL_E_3", "STABLE_DIFFUSION", "GOOGLE_TRANSLATE", "GPT_VISION" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-[600px] p-4 bg-[#181818] text-white", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-[#333] text-white font-bold text-lg font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Cool Us - Smart Chat App", /*#__PURE__*/ React.createElement("select", { className: "p-2 bg-[#555] text-white rounded-lg", value: selectedIntegration, onChange: (e)=>setSelectedIntegration(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, integrations.map((integration, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: integration, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, integration)))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4 bg-[#222]", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ const isAI = msg.isAI; const messageStyle = isAI ? 'bg-blue-700 text-white' : 'bg-gray-800 text-white'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `my-2 p-2 ${messageStyle} rounded-lg`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, msg.text); }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "my-2 p-2 bg-yellow-700 text-white rounded-lg", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-2 bg-[#333]", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 rounded-lg border border-gray-600 bg-[#444] text-white", placeholder: "Type your message here...", value: inputValue, onChange: handleChange, __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 p-2 bg-[#4A90E2] text-white rounded-lg", onClick: handleSend, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "Send"))); } function StoryComponent() { const [messages, setMessages] = React.useState([ { text: 'Hello! How can I assist you today?', isAI: true }, { text: 'Can you tell me a joke?', isAI: false }, { text: 'Why don’t scientists trust atoms? Because they make up everything!', isAI: true } ]); return /*#__PURE__*/ React.createElement(MainComponent, { messages: messages, setMessages: setMessages, __source: { fileName: "", lineNumber: 127, columnNumber: 10 }, __self: this }); }