function MainComponent() { const [response, setResponse] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "Create an adjustable SVG diagram." } ] }) }).then((response)=>response.json()).then((data)=>{ setResponse(data.choices[0].message.content); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { id: "diagram", className: "w-[800px] h-[600px] bg-[#f0f0f0]", viewBox: "0 0 800 600", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { width: "800", height: "600", fill: "#f0f0f0", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("rect", { x: "300", y: "50", width: "200", height: "80", rx: "15", ry: "15", fill: "#4CAF50", stroke: "#333", strokeWidth: "2", onMouseDown: (evt)=>startDrag(evt), onMouseMove: (evt)=>drag(evt), onMouseUp: ()=>endDrag(), onMouseLeave: ()=>endDrag(), __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "400", y: "95", fontFamily: "Arial, sans-serif", fontSize: "16", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Webサーバー"), /*#__PURE__*/ React.createElement("text", { x: "400", y: "115", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "(Node.js + Express + TypeScript)"), /*#__PURE__*/ React.createElement("rect", { x: "550", y: "250", width: "150", height: "60", fill: "#FFC107", stroke: "#333", strokeWidth: "2", onMouseDown: (evt)=>startDrag(evt), onMouseMove: (evt)=>drag(evt), onMouseUp: ()=>endDrag(), onMouseLeave: ()=>endDrag(), __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "625", y: "285", fontFamily: "Arial, sans-serif", fontSize: "14", fill: "#333", textAnchor: "middle", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "gift_codes.csv"), /*#__PURE__*/ React.createElement("rect", { x: "100", y: "250", width: "150", height: "60", fill: "#2196F3", stroke: "#333", strokeWidth: "2", onMouseDown: (evt)=>startDrag(evt), onMouseMove: (evt)=>drag(evt), onMouseUp: ()=>endDrag(), onMouseLeave: ()=>endDrag(), __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "175", y: "285", fontFamily: "Arial, sans-serif", fontSize: "14", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "ユーザーUI"), /*#__PURE__*/ React.createElement("rect", { x: "50", y: "400", width: "100", height: "50", fill: "#9C27B0", stroke: "#333", strokeWidth: "2", onMouseDown: (evt)=>startDrag(evt), onMouseMove: (evt)=>drag(evt), onMouseUp: ()=>endDrag(), onMouseLeave: ()=>endDrag(), __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "100", y: "430", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "同意ページ"), /*#__PURE__*/ React.createElement("rect", { x: "200", y: "400", width: "100", height: "50", fill: "#9C27B0", stroke: "#333", strokeWidth: "2", onMouseDown: (evt)=>startDrag(evt), onMouseMove: (evt)=>drag(evt), onMouseUp: ()=>endDrag(), onMouseLeave: ()=>endDrag(), __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "250", y: "420", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "コード"), /*#__PURE__*/ React.createElement("text", { x: "250", y: "440", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "white", textAnchor: "middle", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "表示ページ"), /*#__PURE__*/ React.createElement("line", { x1: "250", y1: "250", x2: "300", y2: "130", stroke: "#333", strokeWidth: "2", markerEnd: "url(#arrowhead)", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "310", y: "200", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "#333", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "リクエスト"), /*#__PURE__*/ React.createElement("line", { x1: "300", y1: "130", x2: "250", y2: "250", stroke: "#333", strokeWidth: "2", markerEnd: "url(#arrowhead)", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "220", y: "200", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "#333", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "レスポンス"), /*#__PURE__*/ React.createElement("line", { x1: "500", y1: "90", x2: "550", y2: "250", stroke: "#333", strokeWidth: "2", markerEnd: "url(#arrowhead)", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "570", y: "180", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "#333", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "読み書き"), /*#__PURE__*/ React.createElement("line", { x1: "175", y1: "310", x2: "100", y2: "400", stroke: "#333", strokeWidth: "2", markerEnd: "url(#arrowhead)", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "150", y1: "425", x2: "200", y2: "425", stroke: "#333", strokeWidth: "2", markerEnd: "url(#arrowhead)", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "175", y: "410", fontFamily: "Arial, sans-serif", fontSize: "12", fill: "#333", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "同意後"), /*#__PURE__*/ React.createElement("defs", { __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "0", refY: "3.5", orient: "auto", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: "#333", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-white border border-gray-300 rounded font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, response), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, ` body { margin: 0; font-family: Arial, sans-serif; } `)); } let selectedElement = null; let offset = { x: 0, y: 0 }; function startDrag(evt) { selectedElement = evt.target; offset.x = evt.clientX - parseFloat(selectedElement.getAttribute("x")); offset.y = evt.clientY - parseFloat(selectedElement.getAttribute("y")); } function drag(evt) { if (selectedElement) { evt.preventDefault(); const x = evt.clientX - offset.x; const y = evt.clientY - offset.y; selectedElement.setAttribute("x", x); selectedElement.setAttribute("y", y); } } function endDrag() { selectedElement = null; }