function CyberSecurityAssistant({ sections }) { return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-100 p-6 min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Cyber Security Assistant"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-[#f8f9fa] p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, section.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, section.description), /*#__PURE__*/ React.createElement("img", { src: section.image.src, alt: section.image.alt, className: section.image.className, __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }), section.subsections && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-4", __source: { fileName: "", lineNumber: 13, columnNumber: 17 }, __self: this }, section.subsections.map((subsection, subIdx)=>/*#__PURE__*/ React.createElement("div", { key: subIdx, className: "p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-base mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 23 }, __self: this }, subsection.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 23 }, __self: this }, subsection.description), /*#__PURE__*/ React.createElement("img", { src: subsection.image.src, alt: subsection.image.alt, className: subsection.image.className, __source: { fileName: "", lineNumber: 18, columnNumber: 23 }, __self: this }))))))))); } function CyberSecurityAssistantStory() { const sections = [ { title: 'Host-based Network', description: 'Monitors and sends logs to WAZUH.', image: { src: '/path/to/network-diagram.png', alt: 'Diagram of the host-based network', className: 'w-[200px] h-[150px]' } }, { title: 'WAZUH', description: 'Processes logs and responds to API requests.', image: { src: '/path/to/wazuh-logo.png', alt: 'Wazuh logo', className: 'w-[100px] h-[100px]' } }, { title: 'Chatbot System', description: '', image: {}, subsections: [ { title: 'Chatbot Frontend', description: 'User interacts and receives responses.', image: { src: '/path/to/chatbot-frontend.png', alt: 'Chatbot frontend interface', className: 'w-[150px] h-[150px]' } }, { title: 'Chatbot Backend', description: 'Processes user inputs, checks keywords, and interfaces with WAZUH and OpenAI.', image: { src: '/path/to/chatbot-backend.png', alt: 'Chatbot backend interface', className: 'w-[150px] h-[150px]' } } ] }, { title: 'Integration with OpenAI', description: 'Chatbot backend sends prompts to OpenAI and receives completions.', image: { src: '/path/to/openai-logo.png', alt: 'OpenAI logo', className: 'w-[100px] h-[100px]' } } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CyberSecurityAssistant, { sections: sections, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } function MainComponent() { const sections = [ { title: 'Host-based Network', description: 'Monitors and sends logs to WAZUH.', image: { src: '/path/to/network-diagram.png', alt: 'Diagram of the host-based network', className: 'w-[200px] h-[150px]' } }, { title: 'WAZUH', description: 'Processes logs and responds to API requests.', image: { src: '/path/to/wazuh-logo.png', alt: 'Wazuh logo', className: 'w-[100px] h-[100px]' } }, { title: 'Chatbot System', description: '', image: {}, subsections: [ { title: 'Chatbot Frontend', description: 'User interacts and receives responses.', image: { src: '/path/to/chatbot-frontend.png', alt: 'Chatbot frontend interface', className: 'w-[150px] h-[150px]' } }, { title: 'Chatbot Backend', description: 'Processes user inputs, checks keywords, and interfaces with WAZUH and OpenAI.', image: { src: '/path/to/chatbot-backend.png', alt: 'Chatbot backend interface', className: 'w-[150px] h-[150px]' } } ] }, { title: 'Integration with OpenAI', description: 'Chatbot backend sends prompts to OpenAI and receives completions.', image: { src: '/path/to/openai-logo.png', alt: 'OpenAI logo', className: 'w-[100px] h-[100px]' } } ]; return /*#__PURE__*/ React.createElement(CyberSecurityAssistant, { sections: sections, __source: { fileName: "", lineNumber: 57, columnNumber: 10 }, __self: this }); }