function MainComponent() { const [text, setText] = React.useState(""); const [aiSuggestion, setAiSuggestion] = React.useState(""); const handleChange = async (e)=>{ setText(e.target.value); const response = await fetch("/integrations/anthropic-claude-haiku/", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: e.target.value } ] }) }); const data = await response.json(); const suggestion = data.choices[0].message.content; setAiSuggestion(suggestion); }; const charCount = text.length; const nonWhitespaceCharCount = text.replace(/\s+/g, "").length; const lineCount = text.split("\n").length; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full h-[150px] p-2 border border-gray-300 rounded", placeholder: "ここにテキストを入力してください...", value: text, onChange: handleChange, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "文字数: ", charCount), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "空白を除いた文字数: ", nonWhitespaceCharCount), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "行数: ", lineCount), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 border-t border-gray-300", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "AIの提案:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, text, aiSuggestion))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); }