function MainComponent() { const [input, setInput] = React.useState(''); const [history, setHistory] = React.useState([]); const [responses, setResponses] = React.useState({ chatGPT: '', claudeSonnet: '', claudeHaiku: '', groq: '', cohereCommand: '' }); const [loading, setLoading] = React.useState(false); const handleInputChange = (e)=>{ setInput(e.target.value); }; const handleSendMessage = async ()=>{ if (!input.trim()) return; setLoading(true); const newHistory = [ ...history, { input, responses: { ...responses } } ]; setHistory(newHistory); setInput(''); const apiCalls = [ { name: 'chatGPT', endpoint: '/integrations/chat-gpt/conversationgpt4' }, { name: 'claudeSonnet', endpoint: '/integrations/anthropic-claude-sonnet-3-5/' }, { name: 'claudeHaiku', endpoint: '/integrations/anthropic-claude-haiku/' }, { name: 'groq', endpoint: '/integrations/groq/' }, { name: 'cohereCommand', endpoint: '/integrations/cohere-command-r-plus/' } ]; const promises = apiCalls.map(async (api)=>{ const response = await fetch(api.endpoint, { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: input } ] }), headers: { 'Content-Type': 'application/json' } }); const reader = response.body.getReader(); let accumulatedResponse = ''; while(true){ const { done, value } = await reader.read(); if (done) break; const chunk = new TextDecoder().decode(value); try { const jsonResponse = JSON.parse(chunk); accumulatedResponse = jsonResponse.choices[0].message.content; } catch (error) { accumulatedResponse += chunk; } setResponses((prev)=>({ ...prev, [api.name]: accumulatedResponse })); } }); await Promise.all(promises); fetch('/api/db/llm-response', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `chat_history` (input, chat_gpt, claude_sonnet, claude_haiku, groq, cohere_command) VALUES (?, ?, ?, ?, ?, ?)", values: [ input, responses.chatGPT, responses.claudeSonnet, responses.claudeHaiku, responses.groq, responses.cohereCommand ] }) }); setLoading(false); }; const handleHistoryClick = async (item)=>{ setResponses(item.responses); const result = await fetch('/api/db/llm-response', { method: 'POST', body: JSON.stringify({ query: "SELECT chat_gpt, claude_sonnet, claude_haiku, groq, cohere_command FROM `chat_history` WHERE `input` = ?", values: [ item.input ] }) }); const data = await result.json(); if (data.length > 0) { setResponses({ chatGPT: data[0].chat_gpt, claudeSonnet: data[0].claude_sonnet, claudeHaiku: data[0].claude_haiku, groq: data[0].groq, cohereCommand: data[0].cohere_command }); } }; const clearHistory = async ()=>{ setHistory([]); setResponses({ chatGPT: '', claudeSonnet: '', claudeHaiku: '', groq: '', cohereCommand: '' }); await fetch('/api/db/llm-response', { method: 'POST', body: JSON.stringify({ query: "DELETE FROM `chat_history`" }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-orange-50 font-noto-sans", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ff8c00] text-white p-4 text-2xl font-bold", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, "CompareBrain"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/5 p-4 bg-orange-100 overflow-y-auto", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("button", { onClick: clearHistory, className: "bg-[#ff8c00] text-white px-3 py-1 rounded hover:bg-orange-600", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "Clear")), history.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleHistoryClick(item), className: "bg-white p-2 mb-2 rounded shadow cursor-pointer hover:bg-orange-200 relative group", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "line-clamp-2", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, item.input), /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 bg-white p-2 rounded shadow-lg hidden group-hover:block", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, item.input)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex p-4 bg-[#ffdab9]", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: handleInputChange, className: "flex-1 p-2 rounded-l", placeholder: "Type your message...", name: "user-input", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-[#ff8c00] text-white px-4 py-2 rounded-r hover:bg-orange-600", disabled: loading, __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex overflow-hidden", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, [ 'chatGPT', 'claudeSonnet', 'claudeHaiku', 'groq', 'cohereCommand' ].map((api)=>/*#__PURE__*/ React.createElement("div", { key: api, className: "flex-1 p-4 overflow-y-auto border-r last:border-r-0", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, api), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, responses[api]))))))); }