function AddButton({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "ml-2 p-2 bg-blue-500 text-white rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function AddButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddButton, { label: "Add", onClick: ()=>alert('Button clicked'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent({ commands, onAddCommand, onRequestSave, isLoading }) { const themes = [ 'Default', 'Dark', 'Solarized' ]; const [selectedTheme, setSelectedTheme] = React.useState(themes[0]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-5", "data-platform": "Linux", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-5", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "SSH Commands Organizer"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e1)=>{ e1.preventDefault(); const command = e1.target.elements.command.value; onAddCommand(command); e1.target.reset(); }, className: "flex items-center mb-5", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "command", placeholder: "Enter SSH command", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(AddButton, { label: "Add", onClick: ()=>e.target.submit(), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "theme", className: "font-roboto mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Theme:"), /*#__PURE__*/ React.createElement("select", { name: "theme", value: selectedTheme, onChange: (e1)=>setSelectedTheme(e1.target.value), className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, themes.map((theme)=>/*#__PURE__*/ React.createElement("option", { key: theme, value: theme, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, theme)))), /*#__PURE__*/ React.createElement("ul", { className: "w-full", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, commands.map((cmd, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center justify-between p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, cmd)))), /*#__PURE__*/ React.createElement("button", { onClick: onRequestSave, className: "w-full mt-5 p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, isLoading ? "Saving..." : "Save Commands to ChatGPT"))); } function StoryComponent() { const [commands, setCommands] = React.useState([ 'ssh user@host', 'ssh user@host -i keyfile' ]); const [isLoading, setIsLoading] = React.useState(false); const handleAddCommand = (cmd)=>{ setCommands([ ...commands, cmd ]); }; const handleRequestSave = ()=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: commands.map((cmd)=>({ role: 'user', content: cmd })) }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()).then((data)=>{ setIsLoading(false); }).catch(()=>{ setIsLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { commands: commands, onAddCommand: handleAddCommand, onRequestSave: handleRequestSave, isLoading: isLoading, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); }