function UrlInput({ placeholder, value, onChange, isValid }) { const borderColor = isValid ? "border-[#E7E7E7]" : "border-[#FF5A5F]"; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-0", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: `w-full border ${borderColor} py-2 px-4 rounded text-lg font-roboto focus:outline-none focus:ring-0`, name: "domainSearch", placeholder: placeholder, value: value, onChange: onChange, style: { boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)" }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), !isValid && /*#__PURE__*/ React.createElement("p", { className: "text-[#FF5A5F] text-center mt-2 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 20 }, __self: this }, "Please enter a valid URL.")); } function UrlInputStory() { const [inputValue, setInputValue] = React.useState(''); const [isValid, setIsValid] = React.useState(true); const validateURL = (text)=>{ if (text.length < 10) return true; // Only validate if there are more than 10 characters const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator return !!pattern.test(text); }; const handleInputChange = (event)=>{ const { value } = event.target; setInputValue(value); setIsValid(validateURL(value)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UrlInput, { placeholder: "What site do you want to parse?", value: inputValue, onChange: handleInputChange, isValid: isValid, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput, { placeholder: "What site do you want to parse?", value: "", onChange: handleInputChange, isValid: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput, { placeholder: "What site do you want to parse?", value: "http://example.com", onChange: handleInputChange, isValid: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput, { placeholder: "What site do you want to parse?", value: "example", onChange: handleInputChange, isValid: false, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function QuestionTextArea({ value, onChange }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full border-[#E7E7E7] py-2 px-4 rounded text-lg font-roboto resize-none overflow-hidden focus:outline-none focus:ring-0", name: "queryInput", placeholder: "What do you want to know?", value: value, onChange: onChange, style: { boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)" }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function QuestionTextAreaStory() { const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (event)=>{ const { value } = event.target; setInputValue(value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-0", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuestionTextArea, { value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function UrlInput2({ placeholder, value, onChange, isValid }) { const borderColor = isValid ? "border-[#E7E7E7]" : "border-[#FF5A5F]"; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-0", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: `w-full border ${borderColor} py-2 px-4 rounded text-lg font-roboto focus:outline-none focus:ring-0`, name: "domainSearch", placeholder: placeholder, value: value, onChange: onChange, style: { boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)" }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), !isValid && /*#__PURE__*/ React.createElement("p", { className: "text-[#FF5A5F] text-center mt-2 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 20 }, __self: this }, "Please enter a valid URL.")); } function UrlInput2Story() { const [inputValue, setInputValue] = React.useState(''); const [isValid, setIsValid] = React.useState(true); const validateURL = (text)=>{ if (text.length < 10) return true; // Only validate if there are more than 10 characters const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator return !!pattern.test(text); }; const handleInputChange = (event)=>{ const { value } = event.target; setInputValue(value); setIsValid(validateURL(value)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UrlInput2, { placeholder: "What site do you want to parse?", value: inputValue, onChange: handleInputChange, isValid: isValid, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput2, { placeholder: "What site do you want to parse?", value: "", onChange: handleInputChange, isValid: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput2, { placeholder: "What site do you want to parse?", value: "http://example.com", onChange: handleInputChange, isValid: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UrlInput2, { placeholder: "What site do you want to parse?", value: "example", onChange: handleInputChange, isValid: false, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function UrlQuestionForm({ onSubmit }) { const [urlValue, setUrlValue] = React.useState(''); const [questionValue, setQuestionValue] = React.useState(''); const [isUrlValid, setIsUrlValid] = React.useState(true); const validateURL = (text)=>{ const pattern = new RegExp('^(https?:\\/\\/)?' + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + '((\\d{1,3}\\.){3}\\d{1,3}))' + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + '(\\?[;&a-z\\d%_.~+=-]*)?' + '(\\#[-a-z\\d_]*)?$', 'i'); return pattern.test(text); }; const handleUrlChange = (event)=>{ setUrlValue(event.target.value); }; const handleQuestionChange = (event)=>{ setQuestionValue(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const isValid = validateURL(urlValue); setIsUrlValid(isValid); if (isValid && questionValue) { onSubmit({ url: urlValue, question: questionValue }); } }; return /*#__PURE__*/ React.createElement("form", { className: "w-full space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UrlInput, { placeholder: "What site do you want to parse?", value: urlValue, onChange: handleUrlChange, isValid: isUrlValid, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(QuestionTextArea, { value: questionValue, onChange: handleQuestionChange, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#333333] text-white rounded text-lg font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Find out ✨")); } function UrlQuestionFormStory() { const handleSubmit = (data)=>{ alert(JSON.stringify(data)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(UrlQuestionForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [loadingStep, setLoadingStep] = React.useState(''); const [siteContent, setSiteContent] = React.useState(''); const [gptResponse, setGptResponse] = React.useState(''); const [formData, setFormData] = React.useState({}); const handleSubmit = ({ url, question })=>{ setLoading(true); setLoadingStep("Scraping your site..."); setFormData({ url, question }); fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url }) }).then((res)=>res.text()).then((text)=>{ setSiteContent(text); fetchGptResponse(url, question, text); }); }; const fetchGptResponse = (url, question, text)=>{ setLoadingStep("Asking AI your question..."); fetch('/integrations/groq/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `User wants to know the answer to this question about ${url}: ${question} \n\n${text}` } ] }) }).then((res)=>res.json()).then((data)=>{ const content = data.choices[0].message.content; setGptResponse(content); setLoading(false); }); }; const resetForm = ()=>{ setLoading(false); setSiteContent(''); setGptResponse(''); setFormData({}); }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-xl font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, loadingStep), /*#__PURE__*/ React.createElement("div", { className: "spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full", role: "status", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen space-y-6", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-[#f9f9f9] p-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, !gptResponse && /*#__PURE__*/ React.createElement(UrlQuestionForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 64, columnNumber: 26 }, __self: this }), gptResponse && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap font-roboto text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, gptResponse), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "bg-[#333333] text-white rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-redo", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigator.clipboard.writeText(gptResponse), className: "bg-[#333333] text-white rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-copy", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: formData.url, target: "_blank", rel: "noopener noreferrer", className: "bg-[#333333] text-white rounded p-2 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-external-link-alt", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this })))))); }