function NewComponent({ onSubmit, isLoading, isAskingAI, scrapedText, result, handleStartOver, handleCopyResults }) { 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: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-[#1A202C]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Read long website"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-roboto text-[#64748B]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Quickly summarize any web content."), !isLoading && !isAskingAI && !result && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#1A202C] mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Scraping your site..."), /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-10 w-10 text-[#3B82F6]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }))), scrapedText && isAskingAI && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white p-4 rounded-lg shadow-lg my-4 text-lg text-[#64748B] divide-y divide-[#E7E7E7]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pb-4", style: { maxHeight: '300px', overflowY: 'auto' }, __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, scrapedText)), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#1A202C] mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Asking AI..."), /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-10 w-10 text-[#3B82F6]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }))), result && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap text-lg font-roboto text-[#1A202C]", dangerouslySetInnerHTML: { __html: result }, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-end gap-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStartOver, className: "p-2 bg-[#E2E8F0] text-[#1A202C] rounded-full", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo-alt", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleCopyResults, className: "p-2 bg-[#34D399] text-white rounded-full", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }))))); } function NewComponentStory() { const [isLoading, setIsLoading] = React.useState(false); const [isAskingAI, setIsAskingAI] = React.useState(false); const [result, setResult] = React.useState(''); const [scrapedText, setScrapedText] = React.useState(''); const [question, setQuestion] = React.useState(''); const handleSubmit = async ({ url, question })=>{ setIsLoading(true); setIsAskingAI(false); setResult(''); setScrapedText(''); setQuestion(question); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url, getText: true }), headers: { 'Content-Type': 'application/json' } }); const textResult = await response.text(); setScrapedText(textResult); setIsAskingAI(true); const aiResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `The user wants to know: ${question}.` }, { "role": "system", "content": textResult } ], system_prompt: `The user wants to know: ${question}. Please provide the answer succinctly in markdown format.` }), headers: { 'Content-Type': 'application/json' } }); const jsonResponse = await aiResponse.json(); setIsLoading(false); setIsAskingAI(false); setResult(jsonResponse?.choices[0]?.message?.content || ''); }; const handleStartOver = ()=>{ setIsLoading(false); setIsAskingAI(false); setResult(''); setScrapedText(''); setQuestion(''); }; const handleCopyResults = ()=>{ navigator.clipboard.writeText(result); }; return /*#__PURE__*/ React.createElement(NewComponent, { onSubmit: handleSubmit, isLoading: isLoading, isAskingAI: isAskingAI, scrapedText: scrapedText, result: result, handleStartOver: handleStartOver, handleCopyResults: handleCopyResults, __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __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 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 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 [isLoading, setIsLoading] = React.useState(false); const [isAskingAI, setIsAskingAI] = React.useState(false); const [result, setResult] = React.useState(''); const [scrapedText, setScrapedText] = React.useState(''); const [question, setQuestion] = React.useState(''); const handleSubmit = async ({ url, question })=>{ setIsLoading(true); setIsAskingAI(false); setResult(''); setScrapedText(''); setQuestion(question); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url, getText: true }), headers: { 'Content-Type': 'application/json' } }); const textResult = await response.text(); setScrapedText(textResult); setIsAskingAI(true); const aiResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `The user wants to know: ${question}.` }, { "role": "system", "content": textResult } ], system_prompt: `The user wants to know: ${question}. Please provide the answer succinctly in markdown format.` }), headers: { 'Content-Type': 'application/json' } }); const jsonResponse = await aiResponse.json(); setIsLoading(false); setIsAskingAI(false); setResult(jsonResponse?.choices[0]?.message?.content || ''); }; const handleStartOver = ()=>{ setIsLoading(false); setIsAskingAI(false); setResult(''); setScrapedText(''); setQuestion(''); }; const handleCopyResults = ()=>{ navigator.clipboard.writeText(result); }; return /*#__PURE__*/ React.createElement(NewComponent, { onSubmit: handleSubmit, isLoading: isLoading, isAskingAI: isAskingAI, scrapedText: scrapedText, result: result, handleStartOver: handleStartOver, handleCopyResults: handleCopyResults, __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }); }