function MainComponent() { const [message, setMessage] = React.useState(""); const [responses, setResponses] = React.useState({ chatGPT: "ChatGPT", anthropicClaude: "Claude Opus", googleGemini15: "Google Gemini 1.5", groq: "Groq", anthropicClaudeHaiku: "Claude Haiku", anthropicClaudeSonnet: "Claude Sonnet" }); const [isLoading, setIsLoading] = React.useState(false); const [responseTime, setResponseTime] = React.useState(0); const [asciiArt, setAsciiArt] = React.useState(" (^_^)/"); const asciiArts = [ " (^_^)/", "(>'-')> <('-'<) ^('-')^ v('-')v(>'-')> ^( '-' )^", "ヽ(´▽`)/", "ლ(ಠ益ಠლ)", "༼ つ ◕_◕ ༽つ", "(ง'̀-'́)ง", "( ͡° ͜ʖ ͡°)" ]; const handleInputChange = (event)=>{ setMessage(event.target.value); setResponses({ chatGPT: "ChatGPT", anthropicClaude: "Claude Opus", googleGemini15: "Google Gemini 1.5", groq: "Groq", anthropicClaudeHaiku: "Claude Haiku", anthropicClaudeSonnet: "Claude Sonnet" }); }; const fetchResponses = async ()=>{ const requestBody = JSON.stringify({ messages: [ { role: "user", content: message } ] }); setIsLoading(true); try { const fetchPromises = [ fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: requestBody }).then((res)=>res.json()), fetch('/integrations/anthropic-claude/', { method: 'POST', body: requestBody }).then((res)=>res.json()), fetch('/integrations/google-gemini-1-5/', { method: 'POST', body: requestBody }).then((res)=>res.json()), fetch('/integrations/groq/', { method: 'POST', body: requestBody }).then((res)=>res.json()), fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', body: requestBody }).then((res)=>res.json()), fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', body: requestBody }).then((res)=>res.json()) ]; const allResponses = await Promise.all(fetchPromises); const newResponses = { chatGPT: `ChatGPT: ${allResponses[0].choices[0].message.content}`, anthropicClaude: `Claude Opus: ${allResponses[1].choices[0].message.content}`, googleGemini15: `Google Gemini 1.5: ${allResponses[2].choices[0].message.content}`, groq: `Groq: ${allResponses[3].choices[0].message.content}`, anthropicClaudeHaiku: `Claude Haiku: ${allResponses[4].choices[0].message.content}`, anthropicClaudeSonnet: `Claude Sonnet: ${allResponses[5].choices[0].message.content}` }; setResponses(newResponses); } catch (error) { console.error('Error fetching data: ', error); } setIsLoading(false); }; const handleSubmit = (event)=>{ event.preventDefault(); fetchResponses(); }; React.useEffect(()=>{ let interval = setInterval(()=>{ setAsciiArt((prevArt)=>asciiArts[(asciiArts.indexOf(prevArt) + 1) % asciiArts.length]); }, 5000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ setResponseTime(0); let interval; if (isLoading) { interval = setInterval(()=>{ setResponseTime((prevTime)=>(prevTime + 1) % "Responding...".length); }, 1000); } return ()=>clearInterval(interval); }, [ isLoading ]); const respondingAnimation = React.useMemo(()=>{ const text = "Responding..."; const displayedText = isLoading ? text.slice(0, responseTime + 1) : ''; return displayedText; }, [ responseTime, isLoading ]); return /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col justify-between", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2 text-center text-blue-600 font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, respondingAnimation), Object.entries(responses).map(([key, response])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "font-roboto p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, response))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-2 space-x-2 justify-end", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type your message here...", className: "flex-grow p-2 border rounded", name: "userMessage", value: message, onChange: handleInputChange, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", onClick: handleSubmit, className: "bg-blue-600 hover:bg-blue-700 p-3 rounded-full text-white", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, asciiArt)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this })); }