function LangchainDropdownComponent({ options, selectedValue, onChange }) { return /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 mb-4 border border-white bg-[#f3f4f6] rounded", name: "component-selector", value: selectedValue, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Select a component"), options.map((item)=>/*#__PURE__*/ React.createElement("option", { key: item, value: item, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, item))); } function LangchainDropdownComponentStory() { const [selectedComponent, setSelectedComponent] = React.useState(''); const handleSelectChange = (e)=>{ setSelectedComponent(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LangchainDropdownComponent, { options: [ 'Text', 'Image', 'Button', 'Langchain Thing 1', 'Langchain Thing 2', 'Langchain Thing 3' ], selectedValue: selectedComponent, onChange: handleSelectChange, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function MainComponent() { const [components, setComponents] = React.useState([]); const [draggingComponent, setDraggingComponent] = React.useState(null); const [selectedComponent, setSelectedComponent] = React.useState(''); const handleDragStart = (component)=>{ setDraggingComponent(component); }; const handleDrop = ()=>{ if (draggingComponent) { setComponents([ ...components, draggingComponent ]); setDraggingComponent(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Drag and Drop AI Builder"), /*#__PURE__*/ React.createElement("div", { className: "w-[80%] bg-white shadow-lg rounded-lg p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[45%] bg-[#e0f7fa] p-2 border-2 border-[#b2ebf2] rounded-lg h-[600px]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Components"), /*#__PURE__*/ React.createElement(LangchainDropdownComponent, { options: [ 'Text', 'Image', 'Button', 'Langchain Thing 1', 'Langchain Thing 2', 'Langchain Thing 3' ], selectedValue: selectedComponent, onChange: (e)=>setSelectedComponent(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, [ 'Text', 'Image', 'Button', 'Langchain Thing 1', 'Langchain Thing 2', 'Langchain Thing 3' ].map((item)=>/*#__PURE__*/ React.createElement("li", { key: item, className: "cursor-pointer p-2 border-b", draggable: true, onDragStart: ()=>handleDragStart(item), __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("div", { className: "w-[45%] bg-[#e1bee7] p-2 border-2 border-[#ce93d8] rounded-lg h-[600px]", onDragOver: (e)=>e.preventDefault(), onDrop: handleDrop, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Drop Area"), /*#__PURE__*/ React.createElement("div", { className: "h-full flex items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, components.length === 0 ? "Drop components here" : components.map((component, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 border-b", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, component))))))); }