function MovableTerminal({ terminalPosition, startDrag, handleDrag, stopDrag, inputValue, handleInputChange, handleKeyDown, selectedEnvironment, handleEnvironmentChange, outputComponents }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", style: { position: 'absolute', top: terminalPosition.top, left: terminalPosition.left, transform: terminalPosition.transform, paddingBottom: '20px', paddingRight: '20px' }, onMouseMove: handleDrag, onMouseUp: stopDrag, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[500px] max-w-full rounded-lg border border-gray-800 shadow-2xl bg-[#000000]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-3 rounded-t-lg bg-[#000000]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mx-1 fa fa-crosshairs text-white cursor-pointer", onMouseDown: startDrag, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { id: "dot1", className: "text-sm mx-1", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "●"), /*#__PURE__*/ React.createElement("span", { id: "dot2", className: "text-sm mx-1", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "●"), /*#__PURE__*/ React.createElement("span", { id: "dot3", className: "text-sm mx-1", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "●"), /*#__PURE__*/ React.createElement("div", { className: "ml-3 font-roboto text-sm text-[#919191]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Convert English into ", selectedEnvironment, " commands")), /*#__PURE__*/ React.createElement("div", { className: "text-white font-mono", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "repl", className: "bg-transparent border-none w-full py-2 px-2 leading-none focus:outline-none text-white", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, autoFocus: true, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-3", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "bg-[#333333] border-none cursor-pointer text-white", value: selectedEnvironment, onChange: handleEnvironmentChange, name: "environment", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "bash", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Bash"), /*#__PURE__*/ React.createElement("option", { value: "python", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Python"), /*#__PURE__*/ React.createElement("option", { value: "nodejs", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Node.js"), /*#__PURE__*/ React.createElement("option", { value: "cpp", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "C++"), /*#__PURE__*/ React.createElement("option", { value: "nextjs", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Next.js"))), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-line p-3 overflow-auto text-sm max-h-72 text-white scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, outputComponents))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` #dot1, #dot2, #dot3 { animation: dot-color-change 1.5s infinite; } #dot1 { animation-delay: 0s; } #dot2 { animation-delay: 0.5s; } #dot3 { animation-delay: 1s; } @keyframes dot-color-change { 0%, 100% { color: red; } 33% { color: blue; } 66% { color: green; } } `)); } function MovableTerminalStory() { const terminalPosition = { top: '80%', left: '80%', transform: 'translate(-80%, -80%)' }; const startDrag = ()=>{}; // placeholder const handleDrag = ()=>{}; // placeholder const stopDrag = ()=>{}; // placeholder const handleInputChange = ()=>{}; // placeholder const handleKeyDown = ()=>{}; // placeholder const handleEnvironmentChange = ()=>{}; // placeholder const selectedEnvironment = "bash"; // state placeholder const inputValue = ""; // state placeholder const outputComponents = "Output will be here"; // placeholder return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MovableTerminal, { terminalPosition: terminalPosition, startDrag: startDrag, handleDrag: handleDrag, stopDrag: stopDrag, inputValue: inputValue, handleInputChange: handleInputChange, handleKeyDown: handleKeyDown, selectedEnvironment: selectedEnvironment, handleEnvironmentChange: handleEnvironmentChange, outputComponents: outputComponents, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this })); } const MainComponent = ()=>{ const [inputValue, setInputValue] = useState(""); const [output, setOutput] = useState([]); const [isLoading, setIsLoading] = useState(false); const [selectedEnvironment, setSelectedEnvironment] = useState("bash"); const [isDraggable, setIsDraggable] = useState(false); const [terminalPosition, setTerminalPosition] = useState({ top: '75%', left: '50%', transform: 'translate(-50%, -75%)' }); const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleKeyDown = (event)=>{ if (event.key === "Enter") { event.preventDefault(); setIsLoading(true); setOutput((prevOutput)=>[ ...prevOutput, { content: inputValue, isUser: true } ]); setInputValue(""); fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: inputValue } ], system_prompt: `You are an expert in terminal and ${selectedEnvironment} commands. Convert this user request into a ${selectedEnvironment} terminal command. Do not explain or provide any additional information. Just provide the ${selectedEnvironment} command for example:\n\nInput: Sample input\nOutput: Sample output` }) }).then((response)=>response.json()).then((data)=>{ const cleanedOutput = data.result.replace(/\`\`\`${selectedEnvironment}|\`\`\`/g, "").trim(); setOutput((prevOutput)=>[ ...prevOutput.slice(0, -1), { content: cleanedOutput, isUser: false } ]); setIsLoading(false); }).catch((error)=>{ setOutput((prevOutput)=>[ ...prevOutput, { content: error.message, isUser: false } ]); setIsLoading(false); }); } }; const handleEnvironmentChange = (event)=>{ setSelectedEnvironment(event.target.value); }; const startDrag = ()=>{ setIsDraggable(true); }; const stopDrag = ()=>{ setIsDraggable(false); }; const handleDrag = (event)=>{ if (isDraggable) { setTerminalPosition({ top: `${event.clientY}px`, left: `${event.clientX}px` }); } }; const outputComponents = output.map((line, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: line.isUser ? "text-blue-400" : "text-green-400", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, line.isUser ? `$ ` : "", line.content))); if (isLoading) { outputComponents.push(/*#__PURE__*/ React.createElement("div", { key: "loading", className: "text-yellow-400", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "Loading..."))); } return /*#__PURE__*/ React.createElement(MovableTerminal, { terminalPosition: terminalPosition, startDrag: startDrag, handleDrag: handleDrag, stopDrag: stopDrag, inputValue: inputValue, handleInputChange: handleInputChange, handleKeyDown: handleKeyDown, selectedEnvironment: selectedEnvironment, handleEnvironmentChange: handleEnvironmentChange, outputComponents: outputComponents, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }); };