function TechCostAnalysis({ onSubmitRequest, costEstimates, isLoading }) { const [inputValue, setInputValue] = React.useState(""); const handleSubmit = async (event)=>{ event.preventDefault(); onSubmitRequest(inputValue); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full px-4 py-2 border rounded-md", placeholder: "Enter digital marketing solution", value: inputValue, onChange: (e)=>setInputValue(e.target.value), name: "digital-marketing-solution", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 mt-2 bg-black text-white rounded-md", disabled: isLoading, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, isLoading ? 'Loading...' : 'Get Cost Estimate')), costEstimates && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full mt-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left table-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, "Solution"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, "Cost"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, costEstimates.map((estimate, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, estimate.name), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, estimate.features.join(", ")), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, estimate.cost)))))))); } function TechCostAnalysisStory({ fetchCostEstimates }) { const [costEstimates, setCostEstimates] = React.useState(null); const [isLoading, setLoading] = React.useState(false); const getCostEstimates = async (solution)=>{ setLoading(true); setCostEstimates(null); const result = await fetchCostEstimates({ messages: [ { role: 'user', content: `I would like an average cost estimate for the digital marketing solution: ${solution}.` }, { role: 'user', content: 'Also, compare the costs of very competitive startups.' } ], system_prompt: 'Provide a cost comparison and feature analysis of popular digital marketing solutions.' }); if (result.status) { const parsedResult = JSON.parse(result.result); setCostEstimates(parsedResult); } else { setCostEstimates([]); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TechCostAnalysis, { onSubmitRequest: getCostEstimates, costEstimates: costEstimates, isLoading: isLoading, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(""); const [loading, setLoading] = React.useState(false); const [costEstimates, setCostEstimates] = React.useState([]); const [streamingMessage, setStreamingMessage] = React.useState(""); const [averageCosts, setAverageCosts] = React.useState({}); const [competitorComparison, setCompetitorComparison] = React.useState([]); const [scrapedContent, setScrapedContent] = React.useState(""); const [extractedUrls, setExtractedUrls] = React.useState([]); const handleUrlChange = (event)=>{ setUrl(event.target.value); }; const handleFinish = React.useCallback((message)=>{ try { const parsed = JSON.parse(message); setCostEstimates((prev)=>[ ...prev, parsed ]); calculateAverages([ ...costEstimates, parsed ]); compareCompetitors([ ...costEstimates, parsed ]); } catch (error) { console.error("Error parsing message:", error); } setStreamingMessage(""); }, [ costEstimates ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const calculateAverages = (estimates)=>{ const costs = {}; estimates.forEach((estimate)=>{ const numericCost = parseFloat(estimate.cost.replace(/[^0-9.-]+/g, "")); if (!isNaN(numericCost)) { if (!costs[estimate.marketSegment]) { costs[estimate.marketSegment] = []; } costs[estimate.marketSegment].push(numericCost); } }); const averages = {}; Object.keys(costs).forEach((segment)=>{ const avg = costs[segment].reduce((a, b)=>a + b, 0) / costs[segment].length; averages[segment] = `$${avg.toFixed(2)}`; }); setAverageCosts(averages); }; const compareCompetitors = (estimates)=>{ const startups = estimates.filter((e)=>e.marketSegment === "Small Business"); startups.sort((a, b)=>{ const costA = parseFloat(a.cost.replace(/[^0-9.-]+/g, "")); const costB = parseFloat(b.cost.replace(/[^0-9.-]+/g, "")); return costA - costB; }); setCompetitorComparison(startups); }; const extractUrls = (content)=>{ const urlRegex = /(https?:\/\/[^\s]+)/g; const matches = content.match(urlRegex) || []; setExtractedUrls(matches); }; const handleScrapeUrl = async (targetUrl = url)=>{ setLoading(true); try { const response = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: targetUrl, getText: true }) }); const content = await response.text(); setScrapedContent(content); extractUrls(content); const chatResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a digital marketing cost analyst. Extract and analyze pricing information from website content. Provide competitive analysis and pricing breakdowns." }, { role: "user", content: `Analyze this content and provide cost estimates with competitive analysis: ${content}` } ], json_schema: { name: "cost_analysis", schema: { type: "object", properties: { name: { type: "string" }, features: { type: "array", items: { type: "string" } }, cost: { type: "string" }, marketSegment: { type: "string" }, competitiveAdvantage: { type: "string" }, pricePerFeature: { type: "number" } }, required: [ "name", "features", "cost", "marketSegment", "competitiveAdvantage", "pricePerFeature" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(chatResponse); } catch (error) { console.error("Error fetching data:", error); } finally{ setLoading(false); } }; const handleGroqAnalysis = async ()=>{ setLoading(true); try { const response = await fetch("/integrations/groq/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a digital marketing cost specialist focused on competitive analysis." }, { role: "user", content: `Analyze the following content for cost insights and competitive positioning: ${scrapedContent}` } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error with Groq analysis:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-50 p-5", __source: { fileName: "", lineNumber: 184, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-6xl", __source: { fileName: "", lineNumber: 185, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, "Digital Marketing Solutions Cost Analysis"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: handleUrlChange, placeholder: "Enter URL or digital marketing solution to analyze", className: "flex-1 px-4 py-2 border rounded-md", name: "url-input", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleScrapeUrl(), disabled: loading || !url, className: "px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, loading ? "Analyzing..." : "Analyze"), /*#__PURE__*/ React.createElement("button", { onClick: handleGroqAnalysis, disabled: loading || !scrapedContent, className: "px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, "Deep Analysis"))), extractedUrls.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, "Related Links"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-2", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, extractedUrls.map((extractedUrl, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto truncate flex-1", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, extractedUrl), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleScrapeUrl(extractedUrl), className: "px-4 py-2 bg-black text-white rounded-md text-sm", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }, "Analyze"))))), /*#__PURE__*/ React.createElement(TechCostAnalysisStory, { fetchCostEstimates: async (inputData)=>{ await handleScrapeUrl(); return { status: true, result: JSON.stringify(costEstimates) }; }, __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, streamingMessage)), Object.keys(averageCosts).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, "Market Segment Cost Analysis"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, Object.entries(averageCosts).map(([segment, avg])=>/*#__PURE__*/ React.createElement("div", { key: segment, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-semibold", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, segment), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, avg, "/month"))))), competitorComparison.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, "Competitive Analysis"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 275, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-black text-white", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }, "Solution"), /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 279, columnNumber: 21 }, __self: this }, "Monthly Cost"), /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 280, columnNumber: 21 }, __self: this }, "Cost per Feature"), /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, "Key Advantage"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, competitorComparison.map((solution, idx)=>/*#__PURE__*/ React.createElement("tr", { key: idx, className: "border-b border-gray-200 hover:bg-gray-50", __source: { fileName: "", lineNumber: 288, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }, solution.name), /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, solution.cost), /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }, "$", solution.pricePerFeature?.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 297, columnNumber: 23 }, __self: this }, solution.competitiveAdvantage))))))))); }