function MainComponent() { const [response, setResponse] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const input = e.target.elements.query.value; const response = await fetch('/integrations/google-gemini/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept-Language': 'ja-JP' }, body: JSON.stringify({ messages: [ { role: "user", content: input } ] }) }).then((res)=>res.json()); setResponse(response.choices[0].message.content); setIsLoading(false); }; const handleVoiceInput = ()=>{ const recognition = new window.webkitSpeechRecognition(); recognition.lang = 'ja-JP'; recognition.onresult = (event)=>{ const voiceText = event.results[0][0].transcript; document.querySelector('input[name="query"]').value = voiceText; }; recognition.start(); }; const formattedResponse = response.split('\n').map((line, index)=>{ if (line.startsWith('#')) { return /*#__PURE__*/ React.createElement("h1", { key: `line-${index}`, className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 35, columnNumber: 14 }, __self: this }, line.substring(1)); } else if (line.startsWith('##')) { return /*#__PURE__*/ React.createElement("h2", { key: `line-${index}`, className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 37, columnNumber: 14 }, __self: this }, line.substring(2)); } else if (line.startsWith('- ')) { return /*#__PURE__*/ React.createElement("li", { key: `line-${index}`, className: "list-disc ml-4", __source: { fileName: "", lineNumber: 39, columnNumber: 14 }, __self: this }, line.substring(2)); } else { return /*#__PURE__*/ React.createElement("p", { key: `line-${index}`, className: "mt-1", __source: { fileName: "", lineNumber: 41, columnNumber: 14 }, __self: this }, line); } }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "AI Search"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-2 border-gray-300 rounded-md bg-white", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "query", type: "text", placeholder: "検索...", className: "px-4 py-2 w-[300px] focus:outline-none", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-lg text-gray-500 px-4 py-2 hover:text-gray-700 focus:outline-none", onClick: handleVoiceInput, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-microphone", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, isLoading ? '調査中...' : '検索'), isLoading && /*#__PURE__*/ React.createElement("div", { className: "loader mt-2", __source: { fileName: "", lineNumber: 70, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full pt-5 text-left font-roboto bg-[#f9f9f9] border border-gray-200 p-4 mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, formattedResponse), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 2s linear infinite; } `)); }