@alreadyso/annotate 0.1.0 → 0.1.2

package/README.md

@@ -13,9 +13,7 @@ export function App() {
       <YourApp />
       <AlreadyAnnotate
         teamId="YOUR_TEAM_ID"
-        teamSlug="your-team-slug"
-        webAppUrl="http://localhost:3000"
-        authToken="SUPABASE_ACCESS_TOKEN"
+        useCookies
         openOnSave
       />
     </>
@@ -25,7 +23,7 @@ export function App() {
 
 ## Overlay Helper
 
-If you want the component to fetch an auth token on mount, use `AlreadyAnnotateOverlay`:
+If you want the component to fetch an auth token on mount, use `AlreadyAnnotateOverlay`. For same-origin apps you can also rely on cookies by passing `useCookies`.
 
 ```tsx
 import { AlreadyAnnotateOverlay } from "@alreadyso/annotate";
@@ -41,7 +39,6 @@ export function App() {
       <YourApp />
       <AlreadyAnnotateOverlay
         teamId="YOUR_TEAM_ID"
-        teamSlug="your-team-slug"
         getAuthToken={getAuthToken}
       />
     </>
@@ -52,13 +49,12 @@ export function App() {
 ## Props
 
 - `teamId` (required): Team UUID for the session.
-- `teamSlug` (optional): Used to open the session in the web app after save.
-- `webAppUrl` (optional): Defaults to `http://localhost:3000`.
-- `authToken` (optional): Supabase access token for user auth.
+- `webAppUrl` (optional): Base URL for the Already web app. Defaults to the current origin in the browser. Use this when embedding the annotator on a different domain.
+- `authToken` (optional): Bearer token for user auth.
 - `apiKey` (optional): Agent API key (alternative to `authToken`).
 - `useCookies` (optional): Send cookies with requests (for same-origin use).
 - `defaultStatus` (optional): Session status to set after saving. Defaults to `todo`.
-- `openOnSave` (optional): Open the session after save if `teamSlug` is set. Defaults to `true`.
+- `openOnSave` (optional): Open the session after save (redirects via `/t/by-id`). Defaults to `true`.
 - `blockInteractions` (optional): Prevent underlying clicks while annotating. Defaults to `true`.
 - `accentColor` (optional): Accent color for the overlay UI.
 - `sessionTitle` (optional): Override the session title.

package/dist/AlreadyAnnotate.d.ts

@@ -18,7 +18,6 @@ export type Annotation = {
 };
 export type AlreadyAnnotateProps = {
     teamId: string;
-    teamSlug?: string;
     webAppUrl?: string;
     authToken?: string;
     apiKey?: string;
@@ -30,4 +29,4 @@ export type AlreadyAnnotateProps = {
     sessionTitle?: string;
     onSaveComplete?: (sessionId: string) => void;
 };
-export declare function AlreadyAnnotate({ teamId, teamSlug, webAppUrl, authToken, apiKey, useCookies, defaultStatus, openOnSave, blockInteractions, accentColor, sessionTitle, onSaveComplete, }: AlreadyAnnotateProps): React.ReactPortal | null;
+export declare function AlreadyAnnotate({ teamId, webAppUrl, authToken, apiKey, useCookies, defaultStatus, openOnSave, blockInteractions, accentColor, sessionTitle, onSaveComplete, }: AlreadyAnnotateProps): React.ReactPortal | null;

package/dist/AlreadyAnnotate.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-const DEFAULT_WEB_URL = "http://localhost:3000";
 const DEFAULT_ACCENT = "#2563eb";
 function nowIso() {
     return new Date().toISOString();
@@ -136,7 +135,7 @@ function isIgnoredTarget(target) {
         return true;
     return false;
 }
-export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL, authToken, apiKey, useCookies = false, defaultStatus = "todo", openOnSave = true, blockInteractions = true, accentColor = DEFAULT_ACCENT, sessionTitle, onSaveComplete, }) {
+export function AlreadyAnnotate({ teamId, webAppUrl, authToken, apiKey, useCookies = false, defaultStatus = "todo", openOnSave = true, blockInteractions = true, accentColor = DEFAULT_ACCENT, sessionTitle, onSaveComplete, }) {
     const [portalRoot, setPortalRoot] = useState(null);
     const [isActive, setIsActive] = useState(false);
     const [hoverRect, setHoverRect] = useState(null);
@@ -284,6 +283,18 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
     const handleDeleteAnnotation = useCallback((id) => {
         setAnnotations((prev) => prev.filter((item) => item.id !== id));
     }, []);
+    const resolvedWebAppUrl = useMemo(() => {
+        if (webAppUrl)
+            return webAppUrl.replace(/\/$/, "");
+        if (typeof window !== "undefined")
+            return window.location.origin;
+        return "";
+    }, [webAppUrl]);
+    const buildUrl = useCallback((path) => {
+        if (!resolvedWebAppUrl)
+            return path;
+        return `${resolvedWebAppUrl}${path.startsWith("/") ? "" : "/"}${path}`;
+    }, [resolvedWebAppUrl]);
     const buildHeaders = useCallback(() => {
         const headers = {
             "Content-Type": "application/json",
@@ -298,7 +309,7 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
         return headers;
     }, [apiKey, authToken, teamId]);
     const createSession = useCallback(async () => {
-        const response = await fetch(`${webAppUrl}/api/sessions/start`, {
+        const response = await fetch(buildUrl("/api/sessions/start"), {
             method: "POST",
             headers: buildHeaders(),
             body: JSON.stringify({ title: pageTitle, source: "web" }),
@@ -312,11 +323,11 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
             throw new Error("Session creation succeeded but no session_id returned");
         }
         return payload.session_id;
-    }, [buildHeaders, pageTitle, useCookies, webAppUrl]);
+    }, [buildHeaders, buildUrl, pageTitle, useCookies]);
     const updateSessionData = useCallback(async (sessionId) => {
         const notes = buildNotesDocument(annotations, pageTitle, pageUrl);
         const timeline = buildTimeline(annotations);
-        const response = await fetch(`${webAppUrl}/api/sessions/${sessionId}/data`, {
+        const response = await fetch(buildUrl(`/api/sessions/${sessionId}/data`), {
             method: "PATCH",
             headers: buildHeaders(),
             body: JSON.stringify({
@@ -331,12 +342,12 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
         if (!response.ok) {
             throw new Error(payload.error || payload.message || `Failed to save session data (${response.status})`);
         }
-    }, [annotations, buildHeaders, pageTitle, pageUrl, useCookies, webAppUrl]);
+    }, [annotations, buildHeaders, buildUrl, pageTitle, pageUrl, useCookies]);
     const updateSessionStatus = useCallback(async (sessionId) => {
         if (!defaultStatus || defaultStatus === "in_session" || defaultStatus === "uploading") {
             return;
         }
-        const response = await fetch(`${webAppUrl}/api/sessions/${sessionId}`, {
+        const response = await fetch(buildUrl(`/api/sessions/${sessionId}`), {
             method: "PATCH",
             headers: buildHeaders(),
             body: JSON.stringify({ status: defaultStatus }),
@@ -346,7 +357,7 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
         if (!response.ok) {
             throw new Error(payload.error || payload.message || `Failed to update session status (${response.status})`);
         }
-    }, [buildHeaders, defaultStatus, useCookies, webAppUrl]);
+    }, [buildHeaders, buildUrl, defaultStatus, useCookies]);
     const handleSaveToAlready = useCallback(async () => {
         if (annotations.length === 0) {
             setError("Add at least one annotation before saving.");
@@ -360,8 +371,9 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
             await updateSessionStatus(sessionId);
             setLastSessionId(sessionId);
             onSaveComplete?.(sessionId);
-            if (openOnSave && teamSlug) {
-                const url = `${webAppUrl}/t/${teamSlug}/sessions/${sessionId}`;
+            if (openOnSave) {
+                const target = `/t/by-id?teamId=${encodeURIComponent(teamId)}&sessionId=${encodeURIComponent(sessionId)}`;
+                const url = buildUrl(target);
                 window.open(url, "_blank", "noopener,noreferrer");
             }
         }
@@ -372,7 +384,7 @@ export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL,
         finally {
             setSaving(false);
         }
-    }, [annotations.length, createSession, onSaveComplete, openOnSave, teamSlug, updateSessionData, updateSessionStatus, webAppUrl]);
+    }, [annotations.length, buildUrl, createSession, onSaveComplete, openOnSave, updateSessionData, updateSessionStatus]);
     const panel = (_jsxs("div", { "data-already-annotate-ui": true, style: {
             position: "fixed",
             right: 16,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alreadyso/annotate",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Annotation overlay for creating Already sessions from React apps.",
   "license": "UNLICENSED",
   "publishConfig": {