function MainComponent() { const [query, setQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const [results, setResults] = React.useState([]); const [explanation, setExplanation] = React.useState(''); const handleQueryChange = (event)=>{ setQuery(event.target.value); }; const searchAndExplainKeywords = async ()=>{ setLoading(true); try { const searchResponse = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }); const searchData = await searchResponse.json(); if (searchData.status !== 'success') { throw new Error('Failed to fetch search data'); } const keywords = searchData.items.map((item)=>item.title); const elaborateResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `What does each of these keywords mean: ${keywords.join(', ')}` } ], system_prompt: 'Explain these keywords', max_tokens: 2000 }) }); const { result } = await elaborateResponse.json(); setExplanation(result); setResults(searchData.items); } catch (error) { setExplanation('Error elaborating on the keywords'); } finally{ setLoading(false); } }; const handleSubmit = (event)=>{ event.preventDefault(); searchAndExplainKeywords(); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", value: query, onChange: handleQueryChange, placeholder: "Enter search query", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-semibold p-2 rounded hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, loading ? 'Analyzing...' : 'Extract Keywords')), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Results:"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full table-fixed border-collapse border border-gray-300", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Keyword"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Link"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, results.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "odd:bg-white even:bg-gray-100", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 79, columnNumber: 62 }, __self: this }, item.displayLink))))))), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold my-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Explanation:"), /*#__PURE__*/ React.createElement("p", { className: "border p-2 rounded bg-gray-100", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, explanation))); }