function MainComponent({ isLoading, messages, systemPrompt, onSubmit, videoUrl }) { const handleSubmit = async (event)=>{ event.preventDefault(); const messageInput = event.target.elements.message; const messageContent = messageInput.value; onLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, { role: 'user', content: messageContent } ], system_prompt: systemPrompt }) }); const data = await response.json(); onLoading(false); onSubmit([ ...messages, { role: 'user', content: messageContent }, { role: 'assistant', content: data.choices[0].message.content } ], systemPrompt, '/path/to/video.mp4'); // Replace with actual video URL }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Music Video Maker Tool"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "w-full h-[100px] p-2 border rounded mb-2", placeholder: "Enter your song lyrics or ideas here...", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded", disabled: isLoading, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Generate Video")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-2xl text-center block my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 23 }, __self: this }), !isLoading && messages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Responses"), messages.map((msg, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `p-2 rounded mb-2 ${msg.role === 'user' ? 'bg-gray-200' : 'bg-green-200'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, msg.content)), videoUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full h-[300px] border rounded", controls: true, __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), "Your browser does not support the video tag."))))); } function StoryComponent() { const sampleMessages = [ { role: 'user', content: 'Sample message content' } ]; const systemPrompt = 'Create a music video based on the following lyrics'; const isLoading = false; const videoUrl = '/path/to/sample-video.mp4'; const handleDummySubmit = (messages, systemPrompt, videoUrl)=>{ // Dummy function to simulate message submission }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { isLoading: isLoading, messages: sampleMessages, systemPrompt: systemPrompt, onSubmit: handleDummySubmit, videoUrl: videoUrl, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); }