function ChatInputField({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, className: "flex-grow p-2 border border-gray-300 rounded", placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ChatInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInputField, { name: "message", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function ChatInputField2({ placeholder, name, className }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, className: `flex-grow p-2 border border-gray-300 rounded ${className}`, placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ChatInputField2Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInputField2, { placeholder: "Type your message...", name: "message", className: "", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center p-6 bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs bg-white p-4 rounded shadow-md flex flex-col", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Chat Bot")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 rounded text-sm", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Hi! How can I help you today?"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInputField, { name: "message", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(ChatInputField2, { name: "message2", placeholder: "Anything else?", className: "flex-grow", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }))))); }