function MainComponent() { const [model, setModel] = React.useState("gpt-4o"); const [systemPrompt, setSystemPrompt] = React.useState(""); const handleModelChange = (e)=>{ setModel(e.target.value); }; const handleSystemPromptChange = (e)=>{ setSystemPrompt(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gray-100 flex flex-col items-center font-sans", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white rounded-lg shadow-md p-6 mt-10", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "AI Chat App"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "model", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Select Model"), /*#__PURE__*/ React.createElement("select", { id: "model", name: "model", className: "w-full p-2 border rounded border-gray-300", value: model, onChange: handleModelChange, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "gpt-4o", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "GPT-4o"), /*#__PURE__*/ React.createElement("option", { value: "claude-3-opus", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Claude-3-Opus"), /*#__PURE__*/ React.createElement("option", { value: "llama-3-70b", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Llama-3-70b"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "system-prompt", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Custom System Prompt"), /*#__PURE__*/ React.createElement("textarea", { id: "system-prompt", name: "system-prompt", className: "w-full p-2 border rounded border-gray-300", rows: "4", value: systemPrompt, onChange: handleSystemPromptChange, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Start Chat")), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-4 rounded-lg h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-blue-500", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "AI:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Hello! How can I assist you today?")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-green-500", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "User:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Can you tell me a joke?")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-blue-500", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "AI:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Why don't scientists trust atoms? Because they make up everything!")))))); }