diff --git a/apps/extension/content/ContentApp.tsx b/apps/extension/content/ContentApp.tsx index 8882e346..89a3a635 100644 --- a/apps/extension/content/ContentApp.tsx +++ b/apps/extension/content/ContentApp.tsx @@ -31,399 +31,400 @@ export default function ContentApp({ token: string | undefined; shadowRoot: ShadowRoot; }) { - const [hover, setHover] = useState(false); + const [hover, setHover] = useState(false); - const { toast } = useToast(); + const { toast } = useToast(); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(false); - const [webNote, setWebNote] = useState(""); + const [webNote, setWebNote] = useState(""); - const [importedCount, setImportedCount] = useState(0); - const [isImporting, setIsImporting] = useState(false); - const [importDone, setImportDone] = useState(false); + const [importedCount, setImportedCount] = useState(0); + const [isImporting, setIsImporting] = useState(false); + const [importDone, setImportDone] = useState(false); - const [portalContainer, setPortalContainer] = useState( - null, - ); - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [isPopover2Open, setIsPopover2Open] = useState(false); + const [portalContainer, setPortalContainer] = useState( + null, + ); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [isPopover2Open, setIsPopover2Open] = useState(false); - const [spacesOptions, setSpacesOptions] = useState< - { id: number; name: string }[] - >([]); - const [selectedSpace, setSelectedSpace] = useState(); + const [spacesOptions, setSpacesOptions] = useState< + { id: number; name: string }[] + >([]); + const [selectedSpace, setSelectedSpace] = useState(); - const [userNotLoggedIn, setUserNotLoggedIn] = useState(false); + const [userNotLoggedIn, setUserNotLoggedIn] = useState(false); - const showLoginToast = async () => { - setUserNotLoggedIn(true); + const showLoginToast = async () => { + setUserNotLoggedIn(true); - const NOSHOW_TOAST = ["accounts.google.com", "supermemory.ai"]; + const NOSHOW_TOAST = ["accounts.google.com", "supermemory.ai"]; - const noLoginWarning = await chrome.storage.local.get("noLoginWarning"); - if (Object.keys(noLoginWarning).length > 0) { - return; - } + const noLoginWarning = await chrome.storage.local.get("noLoginWarning"); + if (Object.keys(noLoginWarning).length > 0) { + return; + } - if (!NOSHOW_TOAST.includes(window.location.host)) { - const t = toast({ - title: "Please login to supermemory.ai to use this extension.", - action: ( -
- + if (!NOSHOW_TOAST.includes(window.location.host)) { + const t = toast({ + title: "Please login to supermemory.ai to use this extension.", + action: ( +
+ - -
- ), - }); - } - }; + +
+ ), + }); + } + }; - useEffect(() => { - document.addEventListener("mousemove", (e) => { - const percentageX = (e.clientX / window.innerWidth) * 100; - const percentageY = (e.clientY / window.innerHeight) * 100; + useEffect(() => { + document.addEventListener("mousemove", (e) => { + const percentageX = (e.clientX / window.innerWidth) * 100; + const percentageY = (e.clientY / window.innerHeight) * 100; - if (percentageX > 75 && percentageY > 75) { - setHover(true); - } else { - setHover(false); - } - }); + if (percentageX > 75 && percentageY > 75) { + setHover(true); + } else { + setHover(false); + } + }); - const getUserData = () => { - chrome.runtime.sendMessage({ type: "getJwt" }); - }; + const getUserData = () => { + chrome.runtime.sendMessage({ type: "getJwt" }); + }; - getUserData(); + getUserData(); - chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { - if (request.type === "import-update") { - setIsImporting(true); - setImportedCount(request.importedCount); - } + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.type === "import-update") { + setIsImporting(true); + setImportedCount(request.importedCount); + } - if (request.type === "import-done") { - setIsImporting(false); - setImportDone(true); - } + if (request.type === "import-done") { + setIsImporting(false); + setImportDone(true); + } - if (request.type === "supermemory-message") { - toast({ - title: request.message, - }); - } - }); + if (request.type === "supermemory-message") { + toast({ + title: request.message, + }); + } + }); - const portalDiv = document.createElement("div"); - portalDiv.id = "popover-portal"; - shadowRoot.appendChild(portalDiv); - setPortalContainer(portalDiv); + const portalDiv = document.createElement("div"); + portalDiv.id = "popover-portal"; + shadowRoot.appendChild(portalDiv); + setPortalContainer(portalDiv); - const getSpaces = async () => { - const response = await fetch(`${BACKEND_URL}/api/spaces`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); + return () => { + document.removeEventListener("mousemove", () => {}); + }; + }, []); - if (response.status === 401) { - showLoginToast(); - return; - } + const getSpaces = async () => { + const response = await fetch(`${BACKEND_URL}/api/spaces`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); - try { - const data = await response.json(); - setSpacesOptions(data.data); - } catch (e) { - console.error( - `Error in supermemory.ai extension: ${e}. Please contact the developer https://x.com/dhravyashah`, - ); - } - }; + if (response.status === 401) { + showLoginToast(); + return; + } - getSpaces(); + try { + const data = await response.json(); + setSpacesOptions(data.data); + } catch (e) { + console.error( + `Error in supermemory.ai extension: ${e}. Please contact the developer https://x.com/dhravyashah`, + ); + } + }; - return () => { - document.removeEventListener("mousemove", () => {}); - }; - }, []); + async function sendUrlToAPI(spaces: string[]) { + setLoading(true); - async function sendUrlToAPI(spaces: string[]) { - setLoading(true); + setTimeout(() => { + setLoading(false); + }, 1500); - setTimeout(() => { - setLoading(false); - }, 1500); + // get the current URL + const url = window.location.href; - // get the current URL - const url = window.location.href; + const blacklist: string[] = []; + // check if the URL is blacklisted + if (blacklist.some((blacklisted) => url.includes(blacklisted))) { + return; + } else { + const clone = document.cloneNode(true) as Document; + const article = new Readability(clone).parse(); - const blacklist: string[] = []; - // check if the URL is blacklisted - if (blacklist.some((blacklisted) => url.includes(blacklisted))) { - return; - } else { - const clone = document.cloneNode(true) as Document; - const article = new Readability(clone).parse(); + const ogImage = document + .querySelector('meta[property="og:image"]') + ?.getAttribute("content"); - const ogImage = document - .querySelector('meta[property="og:image"]') - ?.getAttribute("content"); + const favicon = ( + document.querySelector('link[rel="icon"]') as HTMLLinkElement + )?.href; - const favicon = ( - document.querySelector('link[rel="icon"]') as HTMLLinkElement - )?.href; + setLoading(true); - setLoading(true); + setIsPopoverOpen(false); - setIsPopoverOpen(false); + await fetch(`${BACKEND_URL}/api/store`, { + method: "POST", + headers: { + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ + pageContent: + (webNote ? `Note about this website: ${webNote}\n\n` : "") + + article?.textContent, + url: url + "#supermemory-user-" + Math.random(), + title: article?.title.slice(0, 500), + spaces: spaces, + description: article?.excerpt.slice(0, 250), + ogImage: ogImage?.slice(0, 1000), + image: favicon, + }), + }).then(async (rep) => { + if (rep.status === 401) { + showLoginToast(); + return; + } - await fetch(`${BACKEND_URL}/api/store`, { - method: "POST", - headers: { - Authorization: `Bearer ${token}`, - }, - body: JSON.stringify({ - pageContent: - (webNote ? `Note about this website: ${webNote}\n\n` : "") + - article?.textContent, - url: url + "#supermemory-user-" + Math.random(), - title: article?.title.slice(0, 500), - spaces: spaces, - description: article?.excerpt.slice(0, 250), - ogImage: ogImage?.slice(0, 1000), - image: favicon, - }), - }).then(async (rep) => { - if (rep.status === 401) { - showLoginToast(); - return; - } + const d = await rep.json(); - const d = await rep.json(); + if (rep.status === 200) { + toast({ + title: "Saved to supermemory.ai", + }); + } else { + toast({ + title: `Failed to save to supermemory.ai: ${d.error ?? "Unknown error"}`, + }); + } + setLoading(false); + return rep; + }); + } + } - if (rep.status === 200) { - toast({ - title: "Saved to supermemory.ai", - }); - } else { - toast({ - title: `Failed to save to supermemory.ai: ${d.error ?? "Unknown error"}`, - }); - } - setLoading(false); - return rep; - }); - } - } + if (!shadowRoot || !portalContainer) { + return null; + } - if (!shadowRoot || !portalContainer) { - return null; - } + return ( +
+ - return ( -
- + setIsPopoverOpen(!isPopoverOpen)} + > + + + await getSpaces()} asChild> + + + + + + + + {userNotLoggedIn ? ( + <>You need to login to use this extension. + ) : ( +

Add to supermemory.ai

+ )} + + + + + {userNotLoggedIn ? ( +
+ +
+ ) : ( +
+ - - - - - - - - - - - - {userNotLoggedIn ? ( - <>You need to login to use this extension. - ) : ( -

Add to supermemory.ai

- )} - - - - - {userNotLoggedIn ? ( -
- -
- ) : ( -
- + +