function MainComponent({ loading, messages }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Chat with Assistant"), loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-gray-900", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 w-full p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-2 rounded-lg ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-green-500 text-white'}`, __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", className: "w-full p-2 border-2 border-gray-300 mt-2", placeholder: "Type your message...", disabled: loading, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function StoryComponent() { const sampleMessages = [ { role: 'user', content: 'How does WHOIS work?' }, { role: 'assistant', content: 'WHOIS is a query and response protocol that is widely used for querying databases that store the registered users or assignees of an Internet resource, such as a domain name or an IP address block.' } ]; return /*#__PURE__*/ React.createElement("div", { className: "m-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Example: Chat Integration"), /*#__PURE__*/ React.createElement(MainComponent, { loading: false, messages: sampleMessages, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { loading: true, messages: [], __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); }