diff options
Diffstat (limited to 'apps/browser-extension/utils')
| -rw-r--r-- | apps/browser-extension/utils/api.ts | 156 | ||||
| -rw-r--r-- | apps/browser-extension/utils/constants.ts | 81 | ||||
| -rw-r--r-- | apps/browser-extension/utils/query-client.ts | 24 | ||||
| -rw-r--r-- | apps/browser-extension/utils/query-hooks.ts | 64 | ||||
| -rw-r--r-- | apps/browser-extension/utils/twitter-auth.ts | 101 | ||||
| -rw-r--r-- | apps/browser-extension/utils/twitter-import.ts | 192 | ||||
| -rw-r--r-- | apps/browser-extension/utils/twitter-utils.ts | 377 | ||||
| -rw-r--r-- | apps/browser-extension/utils/types.ts | 149 | ||||
| -rw-r--r-- | apps/browser-extension/utils/ui-components.ts | 450 |
9 files changed, 1594 insertions, 0 deletions
diff --git a/apps/browser-extension/utils/api.ts b/apps/browser-extension/utils/api.ts new file mode 100644 index 00000000..163577b5 --- /dev/null +++ b/apps/browser-extension/utils/api.ts @@ -0,0 +1,156 @@ +/** + * API service for supermemory browser extension + */ +import { API_ENDPOINTS, STORAGE_KEYS } from "./constants" +import { + AuthenticationError, + type MemoryPayload, + type Project, + type ProjectsResponse, + SupermemoryAPIError, +} from "./types" + +/** + * Get bearer token from storage + */ +async function getBearerToken(): Promise<string> { + const result = await chrome.storage.local.get([STORAGE_KEYS.BEARER_TOKEN]) + const token = result[STORAGE_KEYS.BEARER_TOKEN] + + if (!token) { + throw new AuthenticationError("Bearer token not found") + } + + return token +} + +/** + * Make authenticated API request + */ +async function makeAuthenticatedRequest<T>( + endpoint: string, + options: RequestInit = {}, +): Promise<T> { + const token = await getBearerToken() + + const response = await fetch(`${API_ENDPOINTS.SUPERMEMORY_API}${endpoint}`, { + ...options, + credentials: "omit", + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + ...options.headers, + }, + }) + + if (!response.ok) { + if (response.status === 401) { + throw new AuthenticationError("Invalid or expired token") + } + throw new SupermemoryAPIError( + `API request failed: ${response.statusText}`, + response.status, + ) + } + + return response.json() +} + +/** + * Fetch all projects from API + */ +export async function fetchProjects(): Promise<Project[]> { + try { + const response = + await makeAuthenticatedRequest<ProjectsResponse>("/v3/projects") + return response.projects + } catch (error) { + console.error("Failed to fetch projects:", error) + throw error + } +} + +/** + * Get default project from storage + */ +export async function getDefaultProject(): Promise<Project | null> { + try { + const result = await chrome.storage.local.get([ + STORAGE_KEYS.DEFAULT_PROJECT, + ]) + return result[STORAGE_KEYS.DEFAULT_PROJECT] || null + } catch (error) { + console.error("Failed to get default project:", error) + return null + } +} + +/** + * Set default project in storage + */ +export async function setDefaultProject(project: Project): Promise<void> { + try { + await chrome.storage.local.set({ + [STORAGE_KEYS.DEFAULT_PROJECT]: project, + }) + } catch (error) { + console.error("Failed to set default project:", error) + throw error + } +} + +/** + * Save memory to Supermemory API + */ +export async function saveMemory(payload: MemoryPayload): Promise<unknown> { + try { + const response = await makeAuthenticatedRequest<unknown>("/v3/memories", { + method: "POST", + body: JSON.stringify(payload), + }) + return response + } catch (error) { + console.error("Failed to save memory:", error) + throw error + } +} + +/** + * Search memories using Supermemory API + */ +export async function searchMemories(query: string): Promise<unknown> { + try { + const response = await makeAuthenticatedRequest<unknown>("/v4/search", { + method: "POST", + body: JSON.stringify({ q: query }), + }) + return response + } catch (error) { + console.error("Failed to search memories:", error) + throw error + } +} + +/** + * Save tweet to Supermemory API (specific for Twitter imports) + */ +export async function saveTweet( + content: string, + metadata: { sm_source: string; [key: string]: unknown }, + containerTag = "sm_project_twitter_bookmarks", +): Promise<void> { + try { + const payload: MemoryPayload = { + containerTags: [containerTag], + content, + metadata, + } + await saveMemory(payload) + } catch (error) { + if (error instanceof SupermemoryAPIError && error.statusCode === 409) { + // Skip if already exists (409 Conflict) + return + } + throw error + } +} diff --git a/apps/browser-extension/utils/constants.ts b/apps/browser-extension/utils/constants.ts new file mode 100644 index 00000000..b499a359 --- /dev/null +++ b/apps/browser-extension/utils/constants.ts @@ -0,0 +1,81 @@ +/** + * API Endpoints + */ +export const API_ENDPOINTS = { + SUPERMEMORY_API: import.meta.env.PROD + ? "https://api.supermemory.ai" + : "http://localhost:8787", + SUPERMEMORY_WEB: import.meta.env.PROD + ? "https://app.supermemory.ai" + : "http://localhost:3000", +} as const + +/** + * Storage Keys + */ +export const STORAGE_KEYS = { + BEARER_TOKEN: "bearer-token", + TOKENS_LOGGED: "tokens-logged", + TWITTER_COOKIE: "twitter-cookie", + TWITTER_CSRF: "twitter-csrf", + TWITTER_AUTH_TOKEN: "twitter-auth-token", + DEFAULT_PROJECT: "sm-default-project", +} as const + +/** + * DOM Element IDs + */ +export const ELEMENT_IDS = { + TWITTER_IMPORT_BUTTON: "sm-twitter-import-button", + TWITTER_IMPORT_STATUS: "sm-twitter-import-status", + TWITTER_CLOSE_BTN: "sm-twitter-close-btn", + TWITTER_IMPORT_BTN: "sm-twitter-import-btn", + TWITTER_SIGNIN_BTN: "sm-twitter-signin-btn", + SUPERMEMORY_TOAST: "sm-toast", + SUPERMEMORY_SAVE_BUTTON: "sm-save-button", + SAVE_TWEET_ELEMENT: "sm-save-tweet-element", + CHATGPT_INPUT_BAR_ELEMENT: "sm-chatgpt-input-bar-element", +} as const + +/** + * UI Configuration + */ +export const UI_CONFIG = { + BUTTON_SHOW_DELAY: 2000, // milliseconds + TOAST_DURATION: 3000, // milliseconds + RATE_LIMIT_BASE_WAIT: 60000, // 1 minute + PAGINATION_DELAY: 1000, // 1 second between requests +} as const + +/** + * Supported Domains + */ +export const DOMAINS = { + TWITTER: ["x.com", "twitter.com"], + CHATGPT: ["chatgpt.com", "chat.openai.com"], + SUPERMEMORY: ["localhost", "supermemory.ai", "app.supermemory.ai"], +} as const + +/** + * Container Tags + */ +export const CONTAINER_TAGS = { + TWITTER_BOOKMARKS: "sm_project_twitter_bookmarks", + DEFAULT_PROJECT: "sm_project_default", +} as const + +/** + * Message Types for extension communication + */ +export const MESSAGE_TYPES = { + SAVE_MEMORY: "sm-save-memory", + SHOW_TOAST: "sm-show-toast", + BATCH_IMPORT_ALL: "sm-batch-import-all", + IMPORT_UPDATE: "sm-import-update", + IMPORT_DONE: "sm-import-done", + GET_RELATED_MEMORIES: "sm-get-related-memories", +} as const + +export const CONTEXT_MENU_IDS = { + SAVE_TO_SUPERMEMORY: "sm-save-to-supermemory", +} as const diff --git a/apps/browser-extension/utils/query-client.ts b/apps/browser-extension/utils/query-client.ts new file mode 100644 index 00000000..c1839691 --- /dev/null +++ b/apps/browser-extension/utils/query-client.ts @@ -0,0 +1,24 @@ +/** + * React Query configuration for supermemory browser extension + */ +import { QueryClient } from "@tanstack/react-query" + +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 5 * 60 * 1000, // 5 minutes + gcTime: 10 * 60 * 1000, // 10 minutes (previously cacheTime) + retry: (failureCount, error) => { + // Don't retry on authentication errors + if (error?.constructor?.name === "AuthenticationError") { + return false + } + return failureCount < 3 + }, + refetchOnWindowFocus: false, + }, + mutations: { + retry: 1, + }, + }, +}) diff --git a/apps/browser-extension/utils/query-hooks.ts b/apps/browser-extension/utils/query-hooks.ts new file mode 100644 index 00000000..721a68ad --- /dev/null +++ b/apps/browser-extension/utils/query-hooks.ts @@ -0,0 +1,64 @@ +/** + * React Query hooks for supermemory API + */ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" +import { + fetchProjects, + getDefaultProject, + saveMemory, + searchMemories, + setDefaultProject, +} from "./api" +import type { MemoryPayload } from "./types" + +// Query Keys +export const queryKeys = { + projects: ["projects"] as const, + defaultProject: ["defaultProject"] as const, +} + +// Projects Query +export function useProjects(options?: { enabled?: boolean }) { + return useQuery({ + queryKey: queryKeys.projects, + queryFn: fetchProjects, + staleTime: 5 * 60 * 1000, // 5 minutes + enabled: options?.enabled ?? true, + }) +} + +// Default Project Query +export function useDefaultProject(options?: { enabled?: boolean }) { + return useQuery({ + queryKey: queryKeys.defaultProject, + queryFn: getDefaultProject, + staleTime: 2 * 60 * 1000, // 2 minutes + enabled: options?.enabled ?? true, + }) +} + +// Set Default Project Mutation +export function useSetDefaultProject() { + const queryClient = useQueryClient() + + return useMutation({ + mutationFn: setDefaultProject, + onSuccess: (_, project) => { + queryClient.setQueryData(queryKeys.defaultProject, project) + }, + }) +} + +// Save Memory Mutation +export function useSaveMemory() { + return useMutation({ + mutationFn: (payload: MemoryPayload) => saveMemory(payload), + }) +} + +// Search Memories Mutation +export function useSearchMemories() { + return useMutation({ + mutationFn: (query: string) => searchMemories(query), + }) +} diff --git a/apps/browser-extension/utils/twitter-auth.ts b/apps/browser-extension/utils/twitter-auth.ts new file mode 100644 index 00000000..3dfc50f6 --- /dev/null +++ b/apps/browser-extension/utils/twitter-auth.ts @@ -0,0 +1,101 @@ +/** + * Twitter Authentication Module + * Handles token capture and storage for Twitter API access + */ +import { STORAGE_KEYS } from "./constants" + +export interface TwitterAuthTokens { + cookie: string + csrf: string + auth: string +} + +/** + * Captures Twitter authentication tokens from web request headers + * @param details - Web request details containing headers + * @returns True if tokens were captured, false otherwise + */ +export function captureTwitterTokens( + details: chrome.webRequest.WebRequestDetails & { + requestHeaders?: chrome.webRequest.HttpHeader[] + }, +): boolean { + if (!(details.url.includes("x.com") || details.url.includes("twitter.com"))) { + return false + } + + const authHeader = details.requestHeaders?.find( + (header) => header.name.toLowerCase() === "authorization", + ) + const cookieHeader = details.requestHeaders?.find( + (header) => header.name.toLowerCase() === "cookie", + ) + const csrfHeader = details.requestHeaders?.find( + (header) => header.name.toLowerCase() === "x-csrf-token", + ) + + if (authHeader?.value && cookieHeader?.value && csrfHeader?.value) { + chrome.storage.session.get([STORAGE_KEYS.TOKENS_LOGGED], (result) => { + if (!result[STORAGE_KEYS.TOKENS_LOGGED]) { + console.log("Twitter auth tokens captured successfully") + chrome.storage.session.set({ [STORAGE_KEYS.TOKENS_LOGGED]: true }) + } + }) + + chrome.storage.session.set({ + [STORAGE_KEYS.TWITTER_COOKIE]: cookieHeader.value, + [STORAGE_KEYS.TWITTER_CSRF]: csrfHeader.value, + [STORAGE_KEYS.TWITTER_AUTH_TOKEN]: authHeader.value, + }) + + return true + } + + return false +} + +/** + * Retrieves stored Twitter authentication tokens + * @returns Promise resolving to tokens or null if not available + */ +export async function getTwitterTokens(): Promise<TwitterAuthTokens | null> { + const result = await chrome.storage.session.get([ + STORAGE_KEYS.TWITTER_COOKIE, + STORAGE_KEYS.TWITTER_CSRF, + STORAGE_KEYS.TWITTER_AUTH_TOKEN, + ]) + + if ( + !result[STORAGE_KEYS.TWITTER_COOKIE] || + !result[STORAGE_KEYS.TWITTER_CSRF] || + !result[STORAGE_KEYS.TWITTER_AUTH_TOKEN] + ) { + return null + } + + return { + cookie: result[STORAGE_KEYS.TWITTER_COOKIE], + csrf: result[STORAGE_KEYS.TWITTER_CSRF], + auth: result[STORAGE_KEYS.TWITTER_AUTH_TOKEN], + } +} + +/** + * Creates HTTP headers for Twitter API requests using stored tokens + * @param tokens - Twitter authentication tokens + * @returns Headers object ready for fetch requests + */ +export function createTwitterAPIHeaders(tokens: TwitterAuthTokens): Headers { + const headers = new Headers() + headers.append("Cookie", tokens.cookie) + headers.append("X-Csrf-Token", tokens.csrf) + headers.append("Authorization", tokens.auth) + headers.append("Content-Type", "application/json") + headers.append( + "User-Agent", + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36", + ) + headers.append("Accept", "*/*") + headers.append("Accept-Language", "en-US,en;q=0.9") + return headers +} diff --git a/apps/browser-extension/utils/twitter-import.ts b/apps/browser-extension/utils/twitter-import.ts new file mode 100644 index 00000000..c516e094 --- /dev/null +++ b/apps/browser-extension/utils/twitter-import.ts @@ -0,0 +1,192 @@ +/** + * Twitter Bookmarks Import Module + * Handles the import process for Twitter bookmarks + */ + +import { saveTweet } from "./api" +import { createTwitterAPIHeaders, getTwitterTokens } from "./twitter-auth" +import { + BOOKMARKS_URL, + buildRequestVariables, + extractNextCursor, + getAllTweets, + type Tweet, + type TwitterAPIResponse, + tweetToMarkdown, +} from "./twitter-utils" + +export type ImportProgressCallback = (message: string) => Promise<void> + +export type ImportCompleteCallback = (totalImported: number) => Promise<void> + +export interface TwitterImportConfig { + onProgress: ImportProgressCallback + onComplete: ImportCompleteCallback + onError: (error: Error) => Promise<void> +} + +/** + * Rate limiting configuration + */ +class RateLimiter { + private waitTime = 60000 // Start with 1 minute + + async handleRateLimit(onProgress: ImportProgressCallback): Promise<void> { + const waitTimeInSeconds = this.waitTime / 1000 + + await onProgress( + `Rate limit reached. Waiting for ${waitTimeInSeconds} seconds before retrying...`, + ) + + await new Promise((resolve) => setTimeout(resolve, this.waitTime)) + this.waitTime *= 2 // Exponential backoff + } + + reset(): void { + this.waitTime = 60000 + } +} + +/** + * Imports a single tweet to Supermemory + * @param tweetMd - Tweet content in markdown format + * @param tweet - Original tweet object with metadata + * @returns Promise that resolves when tweet is imported + */ +async function importTweet(tweetMd: string, tweet: Tweet): Promise<void> { + const metadata = { + sm_source: "consumer", + tweet_id: tweet.id_str, + author: tweet.user.screen_name, + created_at: tweet.created_at, + likes: tweet.favorite_count, + retweets: tweet.retweet_count || 0, + } + + try { + await saveTweet(tweetMd, metadata) + } catch (error) { + throw new Error( + `Failed to save tweet: ${error instanceof Error ? error.message : "Unknown error"}`, + ) + } +} + +/** + * Main class for handling Twitter bookmarks import + */ +export class TwitterImporter { + private importInProgress = false + private rateLimiter = new RateLimiter() + + constructor(private config: TwitterImportConfig) {} + + /** + * Starts the import process for all Twitter bookmarks + * @returns Promise that resolves when import is complete + */ + async startImport(): Promise<void> { + if (this.importInProgress) { + throw new Error("Import already in progress") + } + + this.importInProgress = true + + try { + await this.batchImportAll("", 0) + this.rateLimiter.reset() + } catch (error) { + await this.config.onError(error as Error) + } finally { + this.importInProgress = false + } + } + + /** + * Recursive function to import all bookmarks with pagination + * @param cursor - Pagination cursor for Twitter API + * @param totalImported - Number of tweets imported so far + */ + private async batchImportAll(cursor = "", totalImported = 0): Promise<void> { + try { + // Use a local variable to track imported count + let importedCount = totalImported + + // Get authentication tokens + const tokens = await getTwitterTokens() + if (!tokens) { + await this.config.onProgress( + "Please visit Twitter/X first to capture authentication tokens", + ) + return + } + + // Create headers for API request + const headers = createTwitterAPIHeaders(tokens) + + // Build API request with pagination + const variables = buildRequestVariables(cursor) + const urlWithCursor = cursor + ? `${BOOKMARKS_URL}&variables=${encodeURIComponent(JSON.stringify(variables))}` + : BOOKMARKS_URL + + console.log("Making Twitter API request to:", urlWithCursor) + console.log("Request headers:", Object.fromEntries(headers.entries())) + + const response = await fetch(urlWithCursor, { + method: "GET", + headers, + redirect: "follow", + }) + + if (!response.ok) { + const errorText = await response.text() + console.error(`Twitter API Error ${response.status}:`, errorText) + + if (response.status === 429) { + await this.rateLimiter.handleRateLimit(this.config.onProgress) + return this.batchImportAll(cursor, totalImported) + } + throw new Error( + `Failed to fetch data: ${response.status} - ${errorText}`, + ) + } + + const data: TwitterAPIResponse = await response.json() + const tweets = getAllTweets(data) + + console.log("Tweets:", tweets) + + // Process each tweet + for (const tweet of tweets) { + try { + const tweetMd = tweetToMarkdown(tweet) + await importTweet(tweetMd, tweet) + importedCount++ + await this.config.onProgress(`Imported ${importedCount} tweets`) + } catch (error) { + console.error("Error importing tweet:", error) + // Continue with next tweet + } + } + + // Handle pagination + const instructions = + data.data?.bookmark_timeline_v2?.timeline?.instructions + const nextCursor = extractNextCursor(instructions || []) + + console.log("Next cursor:", nextCursor) + console.log("Tweets length:", tweets.length) + + if (nextCursor && tweets.length > 0) { + await new Promise((resolve) => setTimeout(resolve, 1000)) // Rate limiting + await this.batchImportAll(nextCursor, importedCount) + } else { + await this.config.onComplete(importedCount) + } + } catch (error) { + console.error("Batch import error:", error) + await this.config.onError(error as Error) + } + } +} diff --git a/apps/browser-extension/utils/twitter-utils.ts b/apps/browser-extension/utils/twitter-utils.ts new file mode 100644 index 00000000..7a7b86db --- /dev/null +++ b/apps/browser-extension/utils/twitter-utils.ts @@ -0,0 +1,377 @@ +// Twitter API data structures and transformation utilities + +interface TwitterAPITweet { + __typename?: string + legacy: { + lang?: string + favorite_count: number + created_at: string + display_text_range?: [number, number] + entities?: { + hashtags?: Array<{ indices: [number, number]; text: string }> + urls?: Array<{ + display_url: string + expanded_url: string + indices: [number, number] + url: string + }> + user_mentions?: Array<{ + id_str: string + indices: [number, number] + name: string + screen_name: string + }> + symbols?: Array<{ indices: [number, number]; text: string }> + media?: MediaEntity[] + } + id_str: string + full_text: string + reply_count?: number + retweet_count?: number + quote_count?: number + } + core?: { + user_results?: { + result?: { + legacy?: { + id_str: string + name: string + profile_image_url_https: string + screen_name: string + verified: boolean + } + is_blue_verified?: boolean + } + } + } +} + +interface MediaEntity { + type: string + media_url_https: string + sizes?: { + large?: { + w: number + h: number + } + } + video_info?: { + variants?: Array<{ + url: string + }> + duration_millis?: number + } +} + +export interface Tweet { + __typename?: string + lang?: string + favorite_count: number + created_at: string + display_text_range?: [number, number] + entities: { + hashtags: Array<{ + indices: [number, number] + text: string + }> + urls?: Array<{ + display_url: string + expanded_url: string + indices: [number, number] + url: string + }> + user_mentions: Array<{ + id_str: string + indices: [number, number] + name: string + screen_name: string + }> + symbols: Array<{ + indices: [number, number] + text: string + }> + } + id_str: string + text: string + user: { + id_str: string + name: string + profile_image_url_https: string + screen_name: string + verified: boolean + is_blue_verified?: boolean + } + conversation_count: number + photos?: Array<{ + url: string + width: number + height: number + }> + videos?: Array<{ + url: string + thumbnail_url: string + duration: number + }> + retweet_count?: number + quote_count?: number + reply_count?: number +} + +export interface TwitterAPIResponse { + data: { + bookmark_timeline_v2: { + timeline: { + instructions: Array<{ + type: string + entries?: Array<{ + entryId: string + sortIndex: string + content: Record<string, unknown> + }> + }> + } + } + } +} + +// Twitter API features configuration +export const TWITTER_API_FEATURES = { + graphql_timeline_v2_bookmark_timeline: true, + responsive_web_graphql_exclude_directive_enabled: true, + responsive_web_graphql_skip_user_profile_image_extensions_enabled: false, + responsive_web_graphql_timeline_navigation_enabled: true, + responsive_web_enhance_cards_enabled: false, + rweb_tipjar_consumption_enabled: true, + responsive_web_twitter_article_notes_tab_enabled: true, + creator_subscriptions_tweet_preview_api_enabled: true, + freedom_of_speech_not_reach_fetch_enabled: true, + standardized_nudges_misinfo: true, + tweet_with_visibility_results_prefer_gql_limited_actions_policy_enabled: true, + longform_notetweets_rich_text_read_enabled: true, + longform_notetweets_inline_media_enabled: true, + responsive_web_media_download_video_enabled: false, + responsive_web_text_conversations_enabled: false, + // Missing features that the API is complaining about + creator_subscriptions_quote_tweet_preview_enabled: true, + view_counts_everywhere_api_enabled: true, + c9s_tweet_anatomy_moderator_badge_enabled: true, + graphql_is_translatable_rweb_tweet_is_translatable_enabled: true, + tweetypie_unmention_optimization_enabled: true, + responsive_web_twitter_article_tweet_consumption_enabled: true, + tweet_awards_web_tipping_enabled: true, + communities_web_enable_tweet_community_results_fetch: true, + responsive_web_edit_tweet_api_enabled: true, + longform_notetweets_consumption_enabled: true, + articles_preview_enabled: true, + rweb_video_timestamps_enabled: true, + verified_phone_label_enabled: true, +} + +export const BOOKMARKS_URL = `https://x.com/i/api/graphql/xLjCVTqYWz8CGSprLU349w/Bookmarks?features=${encodeURIComponent(JSON.stringify(TWITTER_API_FEATURES))}` + +/** + * Transform raw Twitter API response data into standardized Tweet format + */ +export function transformTweetData( + input: Record<string, unknown>, +): Tweet | null { + try { + const content = input.content as { + itemContent?: { tweet_results?: { result?: unknown } } + } + const tweetData = content?.itemContent?.tweet_results?.result + + if (!tweetData) { + return null + } + + const tweet = tweetData as TwitterAPITweet + + if (!tweet.legacy) { + return null + } + + // Handle media entities + const media = (tweet.legacy.entities?.media as MediaEntity[]) || [] + const photos = media + .filter((m) => m.type === "photo") + .map((m) => ({ + url: m.media_url_https, + width: m.sizes?.large?.w || 0, + height: m.sizes?.large?.h || 0, + })) + + const videos = media + .filter((m) => m.type === "video") + .map((m) => ({ + url: m.video_info?.variants?.[0]?.url || "", + thumbnail_url: m.media_url_https, + duration: m.video_info?.duration_millis || 0, + })) + + const transformed: Tweet = { + __typename: tweet.__typename, + lang: tweet.legacy?.lang, + favorite_count: tweet.legacy.favorite_count || 0, + created_at: new Date(tweet.legacy.created_at).toISOString(), + display_text_range: tweet.legacy.display_text_range, + entities: { + hashtags: tweet.legacy.entities?.hashtags || [], + urls: tweet.legacy.entities?.urls || [], + user_mentions: tweet.legacy.entities?.user_mentions || [], + symbols: tweet.legacy.entities?.symbols || [], + }, + id_str: tweet.legacy.id_str, + text: tweet.legacy.full_text, + user: { + id_str: tweet.core?.user_results?.result?.legacy?.id_str || "", + name: tweet.core?.user_results?.result?.legacy?.name || "Unknown", + profile_image_url_https: + tweet.core?.user_results?.result?.legacy?.profile_image_url_https || + "", + screen_name: + tweet.core?.user_results?.result?.legacy?.screen_name || "unknown", + verified: tweet.core?.user_results?.result?.legacy?.verified || false, + is_blue_verified: + tweet.core?.user_results?.result?.is_blue_verified || false, + }, + conversation_count: tweet.legacy.reply_count || 0, + retweet_count: tweet.legacy.retweet_count || 0, + quote_count: tweet.legacy.quote_count || 0, + reply_count: tweet.legacy.reply_count || 0, + } + + if (photos.length > 0) { + transformed.photos = photos + } + + if (videos.length > 0) { + transformed.videos = videos + } + + return transformed + } catch (error) { + console.error("Error transforming tweet data:", error) + return null + } +} + +/** + * Extract all tweets from Twitter API response + */ +export function getAllTweets(data: TwitterAPIResponse): Tweet[] { + const tweets: Tweet[] = [] + + try { + const instructions = + data.data?.bookmark_timeline_v2?.timeline?.instructions || [] + + for (const instruction of instructions) { + if (instruction.type === "TimelineAddEntries" && instruction.entries) { + for (const entry of instruction.entries) { + if (entry.entryId.startsWith("tweet-")) { + const tweet = transformTweetData(entry) + if (tweet) { + tweets.push(tweet) + } + } + } + } + } + } catch (error) { + console.error("Error extracting tweets:", error) + } + + return tweets +} + +/** + * Extract pagination cursor from Twitter API response + */ +export function extractNextCursor( + instructions: Array<Record<string, unknown>>, +): string | null { + try { + for (const instruction of instructions) { + if (instruction.type === "TimelineAddEntries" && instruction.entries) { + const entries = instruction.entries as Array<{ + entryId: string + content?: { value?: string } + }> + for (const entry of entries) { + if (entry.entryId.startsWith("cursor-bottom-")) { + return entry.content?.value || null + } + } + } + } + } catch (error) { + console.error("Error extracting cursor:", error) + } + + return null +} + +/** + * Convert Tweet object to markdown format for storage + */ +export function tweetToMarkdown(tweet: Tweet): string { + const username = tweet.user?.screen_name || "unknown" + const displayName = tweet.user?.name || "Unknown User" + const date = new Date(tweet.created_at).toLocaleDateString() + const time = new Date(tweet.created_at).toLocaleTimeString() + + let markdown = `# Tweet by @${username} (${displayName})\n\n` + markdown += `**Date:** ${date} ${time}\n` + markdown += `**Likes:** ${tweet.favorite_count} | **Retweets:** ${tweet.retweet_count || 0} | **Replies:** ${tweet.reply_count || 0}\n\n` + + // Add tweet text + markdown += `${tweet.text}\n\n` + + // Add media if present + if (tweet.photos && tweet.photos.length > 0) { + markdown += "**Images:**\n" + tweet.photos.forEach((photo, index) => { + markdown += `\n` + }) + markdown += "\n" + } + + if (tweet.videos && tweet.videos.length > 0) { + markdown += "**Videos:**\n" + tweet.videos.forEach((video, index) => { + markdown += `[Video ${index + 1}](${video.url})\n` + }) + markdown += "\n" + } + + // Add hashtags and mentions + if (tweet.entities.hashtags.length > 0) { + markdown += `**Hashtags:** ${tweet.entities.hashtags.map((h) => `#${h.text}`).join(", ")}\n` + } + + if (tweet.entities.user_mentions.length > 0) { + markdown += `**Mentions:** ${tweet.entities.user_mentions.map((m) => `@${m.screen_name}`).join(", ")}\n` + } + + // Add raw data for reference + markdown += `\n---\n<details>\n<summary>Raw Tweet Data</summary>\n\n\`\`\`json\n${JSON.stringify(tweet, null, 2)}\n\`\`\`\n</details>` + + return markdown +} + +/** + * Build Twitter API request variables for pagination + */ +export function buildRequestVariables(cursor?: string, count = 100) { + const variables = { + count, + includePromotedContent: false, + } + + if (cursor) { + ;(variables as Record<string, unknown>).cursor = cursor + } + + return variables +} diff --git a/apps/browser-extension/utils/types.ts b/apps/browser-extension/utils/types.ts new file mode 100644 index 00000000..2d0981c8 --- /dev/null +++ b/apps/browser-extension/utils/types.ts @@ -0,0 +1,149 @@ +/** + * Type definitions for the browser extension + */ + +/** + * Toast states for UI feedback + */ +export type ToastState = "loading" | "success" | "error" + +/** + * Message types for extension communication + */ +export interface ExtensionMessage { + action?: string + type?: string + data?: unknown + state?: ToastState + importedMessage?: string + totalImported?: number +} + +/** + * Memory data structure for saving content + */ +export interface MemoryData { + html: string + highlightedText?: string + url?: string +} + +/** + * Supermemory API payload for storing memories + */ +export interface MemoryPayload { + containerTags: string[] + content: string + metadata: { + sm_source: string + [key: string]: unknown + } +} + +/** + * Twitter-specific memory metadata + */ +export interface TwitterMemoryMetadata { + sm_source: "twitter_bookmarks" + tweet_id: string + author: string + created_at: string + likes: number + retweets: number +} + +/** + * Storage data structure for Chrome storage + */ +export interface StorageData { + bearerToken?: string + twitterAuth?: { + cookie: string + csrf: string + auth: string + } + tokens_logged?: boolean + cookie?: string + csrf?: string + auth?: string + defaultProject?: Project + projectsCache?: { + projects: Project[] + timestamp: number + } +} + +/** + * Context menu click info + */ +export interface ContextMenuClickInfo { + menuItemId: string | number + editable?: boolean + frameId?: number + frameUrl?: string + linkUrl?: string + mediaType?: string + pageUrl?: string + parentMenuItemId?: string | number + selectionText?: string + srcUrl?: string + targetElementId?: number + wasChecked?: boolean +} + +/** + * API Response types + */ +export interface APIResponse<T = unknown> { + success: boolean + data?: T + error?: string +} + +/** + * Error types for better error handling + */ +export class ExtensionError extends Error { + constructor( + message: string, + public code?: string, + public statusCode?: number, + ) { + super(message) + this.name = "ExtensionError" + } +} + +export class TwitterAPIError extends ExtensionError { + constructor(message: string, statusCode?: number) { + super(message, "TWITTER_API_ERROR", statusCode) + this.name = "TwitterAPIError" + } +} + +export class SupermemoryAPIError extends ExtensionError { + constructor(message: string, statusCode?: number) { + super(message, "SUPERMEMORY_API_ERROR", statusCode) + this.name = "SupermemoryAPIError" + } +} + +export class AuthenticationError extends ExtensionError { + constructor(message = "Authentication required") { + super(message, "AUTH_ERROR") + this.name = "AuthenticationError" + } +} + +export interface Project { + id: string + name: string + containerTag: string + createdAt: string + updatedAt: string + documentCount: number +} + +export interface ProjectsResponse { + projects: Project[] +} diff --git a/apps/browser-extension/utils/ui-components.ts b/apps/browser-extension/utils/ui-components.ts new file mode 100644 index 00000000..c160d63e --- /dev/null +++ b/apps/browser-extension/utils/ui-components.ts @@ -0,0 +1,450 @@ +/** + * UI Components Module + * Reusable UI components for the browser extension + */ + +import { API_ENDPOINTS, ELEMENT_IDS, UI_CONFIG } from "./constants" +import type { ToastState } from "./types" + +/** + * Creates a toast notification element + * @param state - The state of the toast (loading, success, error) + * @returns HTMLElement - The toast element + */ +export function createToast(state: ToastState): HTMLElement { + const toast = document.createElement("div") + toast.id = ELEMENT_IDS.SUPERMEMORY_TOAST + + toast.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + z-index: 2147483647; + background: #ffffff; + border-radius: 9999px; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 12px; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-size: 14px; + color: #374151; + min-width: 200px; + max-width: 300px; + animation: slideIn 0.3s ease-out; + box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.12); + ` + + // Add keyframe animations and fonts if not already present + if (!document.getElementById("supermemory-toast-styles")) { + const style = document.createElement("style") + style.id = "supermemory-toast-styles" + style.textContent = ` + @font-face { + font-family: 'Space Grotesk'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('${chrome.runtime.getURL("fonts/SpaceGrotesk-Light.ttf")}') format('truetype'); + } + @font-face { + font-family: 'Space Grotesk'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('${chrome.runtime.getURL("fonts/SpaceGrotesk-Regular.ttf")}') format('truetype'); + } + @font-face { + font-family: 'Space Grotesk'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('${chrome.runtime.getURL("fonts/SpaceGrotesk-Medium.ttf")}') format('truetype'); + } + @font-face { + font-family: 'Space Grotesk'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('${chrome.runtime.getURL("fonts/SpaceGrotesk-SemiBold.ttf")}') format('truetype'); + } + @font-face { + font-family: 'Space Grotesk'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('${chrome.runtime.getURL("fonts/SpaceGrotesk-Bold.ttf")}') format('truetype'); + } + @keyframes slideIn { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } + } + @keyframes fadeOut { + from { transform: translateX(0); opacity: 1; } + to { transform: translateX(100%); opacity: 0; } + } + @keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + ` + document.head.appendChild(style) + } + + const icon = document.createElement("div") + icon.style.cssText = "width: 20px; height: 20px; flex-shrink: 0;" + + const text = document.createElement("span") + text.style.fontWeight = "500" + + // Configure toast based on state + switch (state) { + case "loading": + icon.innerHTML = ` + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M12 6V2" stroke="#6366f1" stroke-width="2" stroke-linecap="round"/> + <path d="M12 22V18" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.3"/> + <path d="M20.49 8.51L18.36 6.38" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.7"/> + <path d="M5.64 17.64L3.51 15.51" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.5"/> + <path d="M22 12H18" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.8"/> + <path d="M6 12H2" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.4"/> + <path d="M20.49 15.49L18.36 17.62" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.9"/> + <path d="M5.64 6.36L3.51 8.49" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.6"/> + </svg> + ` + icon.style.animation = "spin 1s linear infinite" + text.textContent = "Adding to Memory..." + break + + case "success": { + const iconUrl = browser.runtime.getURL("/icon-16.png") + icon.innerHTML = `<img src="${iconUrl}" width="20" height="20" alt="Success" style="border-radius: 2px;" />` + text.textContent = "Added to Memory" + break + } + + case "error": + icon.innerHTML = ` + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <circle cx="12" cy="12" r="10" fill="#ef4444"/> + <path d="M15 9L9 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> + <path d="M9 9L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> + </svg> + ` + text.textContent = "Failed to save memory / Make sure you are logged in" + break + } + + toast.appendChild(icon) + toast.appendChild(text) + + return toast +} + +/** + * Creates the Twitter import button + * @param onClick - Click handler for the button + * @returns HTMLElement - The button element + */ +export function createTwitterImportButton(onClick: () => void): HTMLElement { + const button = document.createElement("div") + button.id = ELEMENT_IDS.TWITTER_IMPORT_BUTTON + button.style.cssText = ` + position: fixed; + top: 10px; + right: 10px; + z-index: 2147483646; + background: #ffffff; + color: black; + border: none; + border-radius: 50px; + padding: 12px 16px; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + transition: all 0.2s ease; + ` + + const iconUrl = browser.runtime.getURL("/icon-16.png") + button.innerHTML = ` + <img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" /> + ` + + button.addEventListener("mouseenter", () => { + button.style.transform = "scale(1.05)" + button.style.boxShadow = "0 4px 12px rgba(29, 155, 240, 0.4)" + }) + + button.addEventListener("mouseleave", () => { + button.style.transform = "scale(1)" + button.style.boxShadow = "0 2px 8px rgba(29, 155, 240, 0.3)" + }) + + button.addEventListener("click", onClick) + + return button +} + +/** + * Creates the Twitter import UI dialog + * @param onClose - Close handler + * @param onImport - Import handler + * @param isAuthenticated - Whether user is authenticated + * @returns HTMLElement - The dialog element + */ +export function createTwitterImportUI( + onClose: () => void, + onImport: () => void, + isAuthenticated: boolean, +): HTMLElement { + const container = document.createElement("div") + container.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + z-index: 2147483647; + background: #ffffff; + border-radius: 12px; + padding: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + min-width: 280px; + max-width: 400px; + border: 1px solid #e1e5e9; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + ` + + container.innerHTML = ` + <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;"> + <div style="display: flex; align-items: center; gap: 8px;"> + <svg width="20" height="20" viewBox="0 0 24 24" fill="#1d9bf0"> + <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> + </svg> + <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: #0f1419;"> + Import Twitter Bookmarks + </h3> + </div> + <button id="${ELEMENT_IDS.TWITTER_CLOSE_BTN}" style="background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: #536471;"> + ✕ + </button> + </div> + + ${ + isAuthenticated + ? ` + <div> + <p style="color: #536471; font-size: 14px; margin: 0 0 12px 0; line-height: 1.4;"> + This will import all your Twitter bookmarks to Supermemory + </p> + + <button id="${ELEMENT_IDS.TWITTER_IMPORT_BTN}" style="width: 100%; background: #1d9bf0; color: white; border: none; border-radius: 20px; padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 500; margin-bottom: 12px;"> + Import All Bookmarks + </button> + + <div id="${ELEMENT_IDS.TWITTER_IMPORT_STATUS}"></div> + </div> + ` + : ` + <div style="text-align: center;"> + <p style="color: #536471; font-size: 14px; margin: 0 0 12px 0;"> + Please sign in to supermemory first + </p> + <button id="${ELEMENT_IDS.TWITTER_SIGNIN_BTN}" style="background: #1d9bf0; color: white; border: none; border-radius: 20px; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500;"> + Sign In + </button> + </div> + ` + } + + <style> + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + </style> + ` + + // Add event listeners + const closeBtn = container.querySelector(`#${ELEMENT_IDS.TWITTER_CLOSE_BTN}`) + closeBtn?.addEventListener("click", onClose) + + const importBtn = container.querySelector( + `#${ELEMENT_IDS.TWITTER_IMPORT_BTN}`, + ) + importBtn?.addEventListener("click", onImport) + + const signinBtn = container.querySelector( + `#${ELEMENT_IDS.TWITTER_SIGNIN_BTN}`, + ) + signinBtn?.addEventListener("click", () => { + browser.tabs.create({ url: `${API_ENDPOINTS.SUPERMEMORY_WEB}/login` }) + }) + + return container +} + +/** + * Creates a save tweet element button for Twitter/X + * @param onClick - Click handler for the button + * @returns HTMLElement - The save button element + */ +export function createSaveTweetElement(onClick: () => void): HTMLElement { + const iconButton = document.createElement("div") + iconButton.style.cssText = ` + display: inline-flex; + align-items: flex-end; + opacity: 0.7; + justify-content: center; + width: 20px; + height: 20px; + border-radius: 50%; + cursor: pointer; + margin-right: 10px; + margin-bottom: 2px; + z-index: 1000; + ` + + const iconFileName = "/icon-16.png" + const iconUrl = browser.runtime.getURL(iconFileName) + iconButton.innerHTML = ` + <img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" /> + ` + + iconButton.addEventListener("mouseenter", () => { + iconButton.style.opacity = "1" + }) + + iconButton.addEventListener("mouseleave", () => { + iconButton.style.opacity = "0.7" + }) + + iconButton.addEventListener("click", (event) => { + event.stopPropagation() + event.preventDefault() + onClick() + }) + + return iconButton +} + +/** + * Creates a save element button for ChatGPT input bar + * @param onClick - Click handler for the button + * @returns HTMLElement - The save button element + */ +export function createChatGPTInputBarElement(onClick: () => void): HTMLElement { + const iconButton = document.createElement("div") + iconButton.style.cssText = ` + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + cursor: pointer; + transition: opacity 0.2s ease; + border-radius: 50%; + ` + + // Use appropriate icon based on theme + const iconFileName = "/icon-16.png" + const iconUrl = browser.runtime.getURL(iconFileName) + iconButton.innerHTML = ` + <img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 50%;" /> + ` + + iconButton.addEventListener("mouseenter", () => { + iconButton.style.opacity = "0.8" + }) + + iconButton.addEventListener("mouseleave", () => { + iconButton.style.opacity = "1" + }) + + iconButton.addEventListener("click", (event) => { + event.stopPropagation() + event.preventDefault() + onClick() + }) + + return iconButton +} + +/** + * Utility functions for DOM manipulation + */ +export const DOMUtils = { + /** + * Check if current page is on specified domains + * @param domains - Array of domain names to check + * @returns boolean + */ + isOnDomain(domains: readonly string[]): boolean { + return domains.includes(window.location.hostname) + }, + + /** + * Detect if the page is in dark mode based on color-scheme style + * @returns boolean - true if dark mode, false if light mode + */ + isDarkMode(): boolean { + const htmlElement = document.documentElement + const style = htmlElement.getAttribute("style") + return style?.includes("color-scheme: dark") || false + }, + + /** + * Check if element exists in DOM + * @param id - Element ID to check + * @returns boolean + */ + elementExists(id: string): boolean { + return !!document.getElementById(id) + }, + + /** + * Remove element from DOM if it exists + * @param id - Element ID to remove + */ + removeElement(id: string): void { + const element = document.getElementById(id) + element?.remove() + }, + + /** + * Show toast notification with auto-dismiss + * @param state - Toast state + * @param duration - Duration to show toast (default from config) + * @returns The toast element + */ + showToast( + state: ToastState, + duration: number = UI_CONFIG.TOAST_DURATION, + ): HTMLElement { + // Remove all existing toasts more aggressively + const existingToasts = document.querySelectorAll( + `#${ELEMENT_IDS.SUPERMEMORY_TOAST}`, + ) + existingToasts.forEach((toast) => { + toast.remove() + }) + + const toast = createToast(state) + document.body.appendChild(toast) + + // Auto-dismiss for success and error states + if (state === "success" || state === "error") { + setTimeout(() => { + if (document.body.contains(toast)) { + toast.style.animation = "fadeOut 0.3s ease-out" + setTimeout(() => { + if (document.body.contains(toast)) { + toast.remove() + } + }, 300) + } + }, duration) + } + + return toast + }, +} |