function MainComponent({ onSubmit, suggestions, isLoading }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto mt-10", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-5 font-sans", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "F1レーサーに相応しい名前を提案"), /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", className: "w-full p-3 border border-gray-300 rounded mb-4", placeholder: "子供に込めたい想いや特性を入力してください", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-blue-500 text-white font-bold rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "送信")), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center text-xl font-sans", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, suggestions.length > 0 && /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-3 p-3 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-sans", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, suggestion.name), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this }, suggestion.description)))))); } function StoryComponent() { const [suggestions, setSuggestions] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const userInput = formData.get('userInput'); setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userInput } ], system_prompt: '子供に込めたい想いや特性に基づいて歴代F1ドライバーの名前を提案してください。' }) }).then((response)=>response.json()).then((data)=>{ const content = data.choices[0].message.content; const suggestions = content.split('\n').map((item)=>{ const [name, description] = item.split(':'); return { name: name.trim(), description: description.trim() }; }); setSuggestions(suggestions); setIsLoading(false); }).catch(()=>{ setIsLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, suggestions: suggestions, isLoading: isLoading, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); }