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 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 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 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 MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [result, setResult] = React.useState(''); const [url, setUrl] = React.useState(''); const handleSubmit = async ({ url, question })=>{ setIsLoading('scraping'); setResult(''); setUrl(url); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: url, return_text: true }), headers: { 'Content-Type': 'application/json' } }); const textResult = await response.text(); setIsLoading('askingAI'); const aiResponse = await fetch('/integrations/groq/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": "What is the answer to: " + question + "? Please respond in markdown format." }, { "role": "system", "content": textResult } ] }), headers: { 'Content-Type': 'application/json' } }); const jsonResponse = await aiResponse.json(); setIsLoading(false); setResult(jsonResponse.choices[0].message.content); }; const handleStartOver = ()=>{ setIsLoading(false); setResult(''); setUrl(''); }; const handleCopyResults = ()=>{ navigator.clipboard.writeText(result); }; const handleVisitSite = ()=>{ window.open(url, '_blank'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen p-6 bg-white space-y-8", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-[#1A202C]", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Read long website"), !isLoading && !result && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[50%] bg-white p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(UrlQuestionForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), isLoading === 'scraping' && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#1A202C] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Scraping your site..."), /*#__PURE__*/ React.createElement("div", { className: "animate-spin h-10 w-10 rounded-full border-t-4 border-[#3B82F6]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), isLoading === 'askingAI' && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#1A202C] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Asking AI your question..."), /*#__PURE__*/ React.createElement("div", { className: "animate-spin h-10 w-10 rounded-full border-t-4 border-[#3B82F6]", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), result && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap text-lg font-roboto text-[#1A202C]", dangerouslySetInnerHTML: { __html: result }, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-end gap-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStartOver, className: "p-2 bg-[#E2E8F0] text-[#1A202C] rounded-full", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-redo", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleCopyResults, className: "p-2 bg-[#34D399] text-white rounded-full", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-copy", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleVisitSite, className: "p-2 bg-[#60A5FA] text-white rounded-full", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-external-link-alt", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }))))); }