[
{
"path": ".eslintignore",
"content": "dist/\nnode_modules/\n*.min.js\nicons/\npackage-lock.json\n*.log\n.env*\n"
},
{
"path": ".eslintrc.json",
"content": "{\n \"root\": true,\n \"env\": {\n \"browser\": true,\n \"es2022\": true,\n \"webextensions\": true\n },\n \"extends\": [\n \"eslint:recommended\",\n \"prettier\"\n ],\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaVersion\": \"latest\",\n \"sourceType\": \"module\"\n },\n \"plugins\": [\"@typescript-eslint\", \"prettier\", \"import\"],\n \"rules\": {\n \"prettier/prettier\": \"error\",\n \"@typescript-eslint/no-unused-vars\": [\"error\", { \"argsIgnorePattern\": \"^_\" }],\n \"@typescript-eslint/no-explicit-any\": \"error\",\n \"@typescript-eslint/no-non-null-assertion\": \"warn\",\n \"@typescript-eslint/explicit-function-return-type\": \"off\",\n \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n \"@typescript-eslint/no-empty-function\": \"warn\",\n \"@typescript-eslint/no-inferrable-types\": \"off\",\n \"no-var\": \"error\",\n \"no-console\": \"off\",\n \"no-debugger\": \"error\",\n \"no-duplicate-imports\": \"error\",\n \"no-unused-expressions\": \"error\",\n \"eqeqeq\": [\"error\", \"always\"],\n \"curly\": [\"error\", \"all\"],\n \"import/order\": [\n \"error\",\n {\n \"groups\": [\n \"builtin\",\n \"external\",\n \"internal\",\n \"parent\",\n \"sibling\",\n \"index\"\n ],\n \"newlines-between\": \"always\",\n \"alphabetize\": {\n \"order\": \"asc\",\n \"caseInsensitive\": true\n }\n }\n ]\n },\n \"ignorePatterns\": [\n \"dist/\",\n \"node_modules/\",\n \"*.min.js\",\n \"icons/\"\n ]\n}\n"
},
{
"path": ".gitignore",
"content": "# Node modules\nnode_modules/\n\n# Build output\ndist/\nbuild/\n\n# Logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# OS generated files\n.DS_Store\nThumbs.db\n\n# Environment files\n.env\n.env.local\n.env.*.local\n\n# Chrome extension specific\n*.crx\n*.pem\n\n# IDE files\n.vscode/\n.idea/\n*.sublime-workspace\n*.sublime-project\n"
},
{
"path": ".prettierignore",
"content": "dist/\nnode_modules/\n*.min.js\nicons/\npackage-lock.json\n*.log\n.env*\n"
},
{
"path": ".prettierrc",
"content": "{\n \"semi\": true,\n \"trailingComma\": \"es5\",\n \"singleQuote\": true,\n \"printWidth\": 100,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"bracketSpacing\": true,\n \"arrowParens\": \"avoid\",\n \"endOfLine\": \"lf\",\n \"quoteProps\": \"as-needed\",\n \"bracketSameLine\": false,\n \"proseWrap\": \"preserve\",\n \"overrides\": [\n {\n \"files\": \"*.html\",\n \"options\": {\n \"parser\": \"html\"\n }\n }\n ]\n}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2024 Deshraj Yadav\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "> [!CAUTION]\n> ## This project has been archived\n>\n> **mem0-chrome-extension** is no longer actively maintained and this repository is now a public archive.\n>\n> Thank you to the 600+ stargazers, 97 forkers, and every contributor who helped shape this project. Your support and feedback meant the world to us.\n>\n> **Looking for memory across your AI assistants?** Check out [Mem0](https://www.mem0.ai) for the latest.\n>\n> You're welcome to fork this repo and build on it — the MIT license still applies.\n\n# Mem0 Chrome Extension — Cross-LLM Memory\n\nMem0 brings ChatGPT-style memory to all your favorite AI assistants. Share context seamlessly across ChatGPT, Claude, Perplexity, and more, making your AI interactions more personalized and efficient.\n\n\n \n Add to Chrome, It's Free\n\n \n \n\nBuilt using [Mem0](https://www.mem0.ai) ❤️\n\n\n## Demo\n\nWatch the Mem0 Chrome Extension in action (full-resolution video available [here](https://www.youtube.com/watch?v=cByzXztn-YY)):\n\nhttps://github.com/user-attachments/assets/a069a178-631e-4b35-a182-9f4fef7735c4\n\n\n## Features\n\n- **Universal Memory Layer:** Share context across ChatGPT, Claude, Perplexity, and more\n- **Smart Context Detection:** Automatically captures relevant information from your conversations\n- **Intelligent Memory Retrieval:** Surfaces relevant memories at the right time\n- **One-click sync** with existing ChatGPT memories\n- **Memory dashboard** to manage all memories\n\n## Installation\n\n> **Note:** Make sure you have [Node.js](https://nodejs.org/) installed before proceeding.\n\n1. Clone this repository.\n2. Navigate to the directory where you cloned the repository.\n3. Run `npm install` to install dependencies.\n4. Run `npm run build` to build the extension.\n5. The built files will be in the `dist` directory.\n6. Open Google Chrome and navigate to `chrome://extensions`.\n7. Enable \"Developer mode\" in the top right corner.\n8. Click \"Load unpacked\" and select the `dist` directory containing the extension files.\n9. The Mem0 Chrome Extension should now appear in your Chrome toolbar.\n\n\n## Usage\n\n1. After installation, look for the Mem0 icon in your Chrome toolbar\n2. Sign in with Google\n3. Start chatting with any supported AI assistant\n4. For ChatGPT and Perplexity, just press enter while chatting as you would normally\n5. On Claude, click the Mem0 button or use shortcut ^ + M\n\n## ❤️ Free to Use\n\nMem0 is completely free with:\n\n- No usage limits\n- No ads\n- All features included\n\n## Configuration\n\n- API Key: Required for connecting to the Mem0 API. Obtain this from your Mem0 Dashboard.\n- User ID: Your unique identifier in the Mem0 system. If not provided, it defaults to 'chrome-extension-user'.\n\n## Troubleshooting\n\nIf you encounter any issues:\n\n- Check your internet connection\n- Verify you're signed in correctly\n- Clear your browser cache if needed\n- Contact support if issues persist\n\n## Privacy and Data Security\n\nYour messages are sent to the Mem0 API for extracting and retrieving memories.\n\n## Contributing\n\nContributions to improve Mem0 Chrome Extension are welcome. Please feel free to submit pull requests or open issues for bugs and feature requests.\n\n## License\nMIT License\n"
},
{
"path": "docs/types.md",
"content": "# Types Documentation\n\nThis section contains TypeScript type definitions for the Mem0 Chrome Extension. The types are organized into several files based on their functionality.\n\n## Overview\n\n### `types/api.ts`\nDefines types for API interactions:\n- `MessageRole` - Enum for message roles (User, Assistant)\n- `ApiMessage` - Message structure with role and content\n- `ApiMemoryRequest` - Request payload for memory API calls\n- `MemorySearchResponse` - Array of memory search results\n- `LoginData` - User authentication data structure\n- `DEFAULT_USER_ID` - Default user ID constant\n- `SOURCE` - Extension source identifier\n\n### `types/browser.ts`\nBrowser-specific type definitions:\n- `OnCommittedDetails` - Web navigation event details\n- `JsonPrimitive` - JSON primitive value types\n- `JsonValue` - Recursive JSON value type\n- `JsonObject` - JSON object structure\n- `HistoryStateData` - Browser history state data\n- `HistoryUrl` - Browser history URL type\n\n### `types/dom.ts`\nDOM-related type extensions and global declarations:\n- `ExtendedHTMLElement` - Extended HTML element with cleanup methods\n- `ExtendedDocument` - Extended document with mem0-specific properties\n- `ExtendedElement` - Extended element with additional properties\n- `ModalDimensions` - Modal size and pagination settings\n- `ModalPosition` - Modal positioning coordinates\n- `MutableMutationObserver` - Extended mutation observer with timers\n- Global interface extensions for `Element`, `CSSStyleDeclaration`, and `Window`\n\n### `types/memory.ts`\nCore memory-related types:\n- `MemoryItem` - Individual memory structure with id, text, and categories\n- `Memory` - Simplified memory structure\n- `MemorySearchItem` - Search result item from API\n- `MemoriesResponse` - API response wrapper for memories\n- `OpenMemoryPrompts` - Prompt templates and regex patterns\n- `OptionalApiParams` - Optional parameters for API calls (org_id, project_id)\n\n### `types/messages.ts`\nMessage passing between extension components:\n- `ToastVariant` - Enum for toast notification types (SUCCESS, ERROR)\n- `MessageType` - Enum for different message types\n- `SidebarAction` - Enum for sidebar actions (TOGGLE_SIDEBAR, OPEN_POPUP, etc.)\n- `SelectionContextPayload` - Payload for selection context messages\n- `SelectionContextResponse` - Response structure for selection context\n- `GetSelectionContextMessage` - Message type for getting selection context\n- `ToastMessage` - Toast notification message structure\n- `SelectionContextMessage` - Union type for selection context messages\n- `SendResponse` - Response callback type\n- Various sidebar action message types\n\n### `types/organizations.ts`\nOrganization and project management:\n- `Organization` - Organization structure with org_id and name\n- `Project` - Project structure with project_id and name\n\n### `types/providers.ts`\nAI provider definitions:\n- `Provider` - Enum for supported AI providers\n- `Category` - Enum for memory categories (BOOKMARK, NAVIGATION, SEARCH)\n\n### `types/settings.ts`\nUser settings and preferences:\n- `UserSettings` - User preference structure with API keys, memory settings, and thresholds\n- `SidebarSettings` - Sidebar-specific settings with organization and project info\n- `Settings` - Legacy settings structure for compatibility\n\n### `types/storage.ts`\nChrome storage key definitions:\n- `StorageKey` - Enum for all storage keys used in the extension\n- `StorageItems` - Type mapping for storage values (required fields)\n- `StorageData` - Type mapping for storage values (optional fields)\n"
},
{
"path": "manifest.json",
"content": "{\n \"manifest_version\": 3,\n \"name\": \"OpenMemory\",\n \"version\": \"1.3.17\",\n \"description\": \"🧠 OpenMemory keeps your conversations in sync. 🔄 No more repeating yourself—just seamless AI collaboration! ✨\",\n \"icons\": {\n \"16\": \"icons/icon16.png\",\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n },\n \"permissions\": [\"storage\", \"activeTab\", \"contextMenus\", \"scripting\", \"webNavigation\"],\n \"host_permissions\": [\n \"https://api.mem0.ai/*\",\n \"https://app.mem0.ai/*\",\n \"https://claude.ai/*\"\n ],\n \"action\": {\n \"default_popup\": \"src/popup.html\",\n \"default_icon\": {\n \"16\": \"icons/icon16.png\",\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n }\n },\n \"background\": {\n \"service_worker\": \"src/background.ts\",\n \"type\": \"module\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"https://claude.ai/*\"],\n \"js\": [\"src/claude/content.ts\"]\n },\n {\n \"matches\": [\"https://chat.openai.com/*\", \"https://chatgpt.com/*\"],\n \"js\": [\"src/chatgpt/content.ts\"]\n },\n {\n \"matches\": [\"https://www.perplexity.ai/*\"],\n \"js\": [\"src/perplexity/content.ts\"]\n },\n {\n \"matches\": [\"https://app.mem0.ai/*\"],\n \"js\": [\"src/mem0/content.ts\"]\n },\n {\n \"matches\": [\"https://grok.com/*\", \"https://x.com/i/grok*\"],\n \"js\": [\"src/grok/content.ts\"]\n },\n {\n \"matches\": [\"https://chat.deepseek.com/*\"],\n \"js\": [\"src/deepseek/content.ts\"]\n },\n {\n \"matches\": [\"https://gemini.google.com/*\"],\n \"js\": [\"src/gemini/content.ts\"]\n },\n {\n \"matches\": [\"https://replit.com/*\"],\n \"js\": [\"src/replit/content.ts\"]\n },\n {\n \"matches\": [\"\"],\n \"js\": [\"src/sidebar.ts\"],\n \"run_at\": \"document_end\"\n }, \n {\n \"matches\": [\"\"], \n \"js\": [\"src/selection_context.ts\"], \n \"run_at\": \"document_idle\",\n \"all_frames\": true\n }\n ,\n {\n \"matches\": [\"\"],\n \"js\": [\"src/search_tracker.ts\"],\n \"run_at\": \"document_idle\"\n }\n ],\n \"web_accessible_resources\": [\n {\n \"resources\": [\"icons/*\"],\n \"matches\": [\"\"]\n }\n ]\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"mem0-extension\",\n \"description\": \"🧠 OpenMemory keeps your conversations in sync. 🔄 No more repeating yourself—just seamless AI collaboration! ✨\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vite build\",\n \"lint\": \"eslint src --ext .ts,.tsx --fix\",\n \"lint:check\": \"eslint src --ext .ts,.tsx\",\n \"format\": \"prettier --write src/**/*.{ts,html}\",\n \"format:check\": \"prettier --check src/**/*.{ts,html}\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"devDependencies\": {\n \"@crxjs/vite-plugin\": \"^2.2.0\",\n \"@typescript-eslint/eslint-plugin\": \"^7.18.0\",\n \"@typescript-eslint/parser\": \"^7.18.0\",\n \"chrome-types\": \"^0.1.375\",\n \"eslint\": \"^8.57.0\",\n \"eslint-config-prettier\": \"^9.1.0\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-prettier\": \"^5.1.3\",\n \"prettier\": \"^3.3.3\",\n \"typescript\": \"^5.9.2\",\n \"vite\": \"^7.1.4\"\n }\n}\n"
},
{
"path": "privacy-policy.md",
"content": "# Privacy Policy for Claude Memory\n\nLast updated: 09-06-2024\n\n## Introduction\n\nWelcome to Claude Memory (\"we\", \"our\", or \"us\"). We are committed to protecting your personal information and your right to privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our Chrome extension.\n\n## Information We Collect\n\nWe may collect the following types of information:\n\nPersonal Information: Full name and email address through which you sign up on the Mem0 platform.\nUsage Data: Every time you use the extension, we collect the message that you are sending to Claude.\n\n## How We Use Your Information\n\nWe use the collected information for various purposes, including:\n\n- To provide and maintain our extension\n- To notify you about changes to our extension\n- To provide customer support\n- To gather analysis or valuable information so that we can improve our extension\n- To monitor the usage of our extension\n- To detect, prevent and address technical issues\n\n## Data Retention\n\nWe will retain your information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law.\n\n## Data Security\n\nWe use commercially acceptable means to protect your personal information. However, no method of transmission over the Internet or method of electronic storage is 100% secure.\n\n## Your Data Protection Rights\n\nDepending on your location, you may have certain rights regarding your personal information, such as the right to access, correct, or delete your data. Please contact us to exercise these rights.\n\n## Changes to This Privacy Policy\n\nWe may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the \"Last updated\" date.\n\n## Contact Us\n\nIf you have any questions about this Privacy Policy, please contact us at: deshraj@mem0.ai\n"
},
{
"path": "src/background.ts",
"content": "import { initContextMenuMemory } from './context-menu-memory';\nimport { initDirectUrlTracking } from './direct-url-tracker';\nimport { type OpenDashboardMessage, SidebarAction } from './types/messages';\n\nchrome.runtime.onInstalled.addListener(() => {\n chrome.storage.sync.set({ memory_enabled: true }, () => {\n console.log('Memory enabled set to true on install/update');\n });\n});\n\nchrome.runtime.onMessage.addListener((request: OpenDashboardMessage) => {\n if (request.action === SidebarAction.OPEN_DASHBOARD && request.url) {\n chrome.tabs.create({ url: request.url });\n }\n return undefined;\n});\n\nchrome.runtime.onMessage.addListener(\n (request: { action?: string }, sender: chrome.runtime.MessageSender) => {\n if (request.action === SidebarAction.SIDEBAR_SETTINGS) {\n const tabId = sender.tab?.id;\n if (tabId !== null && tabId !== undefined) {\n chrome.tabs.sendMessage(tabId, { action: SidebarAction.SIDEBAR_SETTINGS });\n }\n }\n return undefined;\n }\n);\n\ninitContextMenuMemory();\ninitDirectUrlTracking();\n"
},
{
"path": "src/chatgpt/content.ts",
"content": "/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { DEFAULT_USER_ID, type LoginData, MessageRole } from '../types/api';\nimport type { HistoryStateData } from '../types/browser';\nimport type { MemoryItem, MemorySearchItem, OptionalApiParams } from '../types/memory';\nimport { SidebarAction } from '../types/messages';\nimport { type StorageData, StorageKey } from '../types/storage';\nimport { createOrchestrator, type SearchStorage } from '../utils/background_search';\nimport { OPENMEMORY_PROMPTS } from '../utils/llm_prompts';\nimport { SITE_CONFIG } from '../utils/site_config';\nimport { getBrowser, sendExtensionEvent } from '../utils/util_functions';\nimport { OPENMEMORY_UI } from '../utils/util_positioning';\n\nexport {};\n\nlet isProcessingMem0: boolean = false;\n\n// Initialize the MutationObserver variable\nlet observer: MutationObserver;\nlet memoryModalShown: boolean = false;\n\n// Global variable to store all memories\nlet allMemories: string[] = [];\n\n// Track added memories by ID\nconst allMemoriesById: Set = new Set();\n\n// Reference to the modal overlay for updates\nlet currentModalOverlay: HTMLDivElement | null = null;\n\n// Store dragged position\nlet draggedPosition: { top: number; left: number } | null = null;\n\nlet inputValueCopy: string = '';\n\nlet currentModalSourceButtonId: string | null = null;\n\nconst chatgptSearch = createOrchestrator({\n fetch: async function (query: string, opts: { signal?: AbortSignal }) {\n const data = await new Promise(resolve => {\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n StorageKey.SIMILARITY_THRESHOLD,\n StorageKey.TOP_K,\n ],\n function (items) {\n resolve(items as SearchStorage);\n }\n );\n });\n\n const apiKey = data[StorageKey.API_KEY];\n const accessToken = data[StorageKey.ACCESS_TOKEN];\n if (!apiKey && !accessToken) {\n return [];\n }\n\n const authHeader = accessToken ? `Bearer ${accessToken}` : `Token ${apiKey}`;\n const userId =\n data[StorageKey.USER_ID_CAMEL] || data[StorageKey.USER_ID] || 'chrome-extension-user';\n const threshold =\n data[StorageKey.SIMILARITY_THRESHOLD] !== undefined\n ? data[StorageKey.SIMILARITY_THRESHOLD]\n : 0.1;\n const topK = data[StorageKey.TOP_K] !== undefined ? data[StorageKey.TOP_K] : 10;\n\n const optionalParams: OptionalApiParams = {};\n if (data[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = data[StorageKey.SELECTED_ORG];\n }\n if (data[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = data[StorageKey.SELECTED_PROJECT];\n }\n\n const payload = {\n query,\n filters: { user_id: userId },\n rerank: true,\n threshold: threshold,\n top_k: topK,\n filter_memories: false,\n source: 'OPENMEMORY_CHROME_EXTENSION',\n ...optionalParams,\n };\n\n const res = await fetch('https://api.mem0.ai/v2/memories/search/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: authHeader,\n },\n body: JSON.stringify(payload),\n signal: opts && opts.signal,\n });\n\n if (!res.ok) {\n throw new Error(`API request failed with status ${res.status}`);\n }\n return await res.json();\n },\n\n // Don't render on prefetch. When modal is open, update it.\n onSuccess: function (normQuery: string, responseData: MemorySearchItem[]) {\n if (!memoryModalShown) {\n return;\n }\n const memoryItems = ((responseData as MemorySearchItem[]) || []).map(\n (item: MemorySearchItem) => ({\n id: String(item.id),\n text: item.memory,\n categories: item.categories || [],\n })\n );\n createMemoryModal(memoryItems, false, currentModalSourceButtonId);\n },\n\n onError: function () {\n if (memoryModalShown) {\n createMemoryModal([], false, currentModalSourceButtonId);\n }\n },\n\n minLength: 3,\n debounceMs: 75,\n cacheTTL: 60000,\n});\n\nfunction createMemoryModal(\n memoryItems: MemoryItem[],\n isLoading: boolean = false,\n sourceButtonId: string | null = null\n): void {\n // Close existing modal if it exists\n if (memoryModalShown && currentModalOverlay) {\n document.body.removeChild(currentModalOverlay);\n }\n\n memoryModalShown = true;\n let currentMemoryIndex = 0;\n\n // Calculate modal dimensions (estimated)\n const modalWidth = 447;\n let modalHeight = 400; // Default height\n let memoriesPerPage = 3; // Default number of memories per page\n\n let topPosition: number = 0;\n let leftPosition: number = 0;\n\n // Use dragged position if available, otherwise calculate based on button\n if (draggedPosition) {\n topPosition = draggedPosition.top;\n leftPosition = draggedPosition.left;\n } else if (sourceButtonId === 'mem0-icon-button') {\n // Position relative to the mem0-icon-button (in the input area)\n const iconButton = document.querySelector('#mem0-icon-button');\n if (iconButton) {\n const buttonRect = iconButton.getBoundingClientRect();\n\n // Determine if there's enough space above the button\n const spaceAbove = buttonRect.top;\n const viewportHeight = window.innerHeight;\n\n // Calculate position - for icon button, prefer to show ABOVE\n leftPosition = buttonRect.left - modalWidth + buttonRect.width;\n\n // Make sure modal doesn't go off-screen to the left\n leftPosition = Math.max(leftPosition, 10);\n\n // For icon button, show above if enough space, otherwise below\n if (spaceAbove >= modalHeight + 10) {\n // Place above\n topPosition = buttonRect.top - modalHeight - 10;\n } else {\n // Not enough space above, place below\n topPosition = buttonRect.bottom + 10;\n\n // Check if it's in the lower half of the screen\n if (buttonRect.bottom > viewportHeight / 2) {\n modalHeight = 300; // Reduced height\n memoriesPerPage = 2; // Show only 2 memories\n }\n }\n } else {\n // Fallback to input-based positioning\n positionRelativeToInput();\n }\n } else if (sourceButtonId === 'sync-button') {\n // Position relative to the sync button\n const syncButton = document.querySelector('#sync-button');\n if (syncButton) {\n const buttonRect = syncButton.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n\n // Position below the sync button by default\n leftPosition = buttonRect.left;\n topPosition = buttonRect.bottom + 10;\n\n // Check if it's in the lower half of the screen\n if (buttonRect.bottom > viewportHeight / 2) {\n modalHeight = 300; // Reduced height\n memoriesPerPage = 2; // Show only 2 memories\n }\n\n // Make sure modal doesn't go off-screen to the right\n leftPosition = Math.min(leftPosition, window.innerWidth - modalWidth - 10);\n } else {\n // Fallback to input-based positioning\n positionRelativeToInput();\n }\n } else {\n // Default positioning relative to the input field\n positionRelativeToInput();\n }\n\n // Helper function to position modal relative to input field\n function positionRelativeToInput() {\n const inputElement =\n document.querySelector('#prompt-textarea') ||\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea');\n\n if (!inputElement) {\n console.error('Input element not found');\n return;\n }\n\n // Get the position and dimensions of the input field\n const inputRect = inputElement.getBoundingClientRect();\n\n // Determine if there's enough space below the input field\n const viewportHeight = window.innerHeight;\n const spaceBelow = viewportHeight - inputRect.bottom;\n\n // Position the modal aligned to the right of the input\n leftPosition = Math.max(inputRect.right - 20 - modalWidth, 10); // 20px offset from right edge\n\n // Decide whether to place modal above or below based on available space\n if (spaceBelow >= modalHeight) {\n // Place below the input\n topPosition = inputRect.bottom + 10;\n\n // Check if it's in the lower half of the screen\n if (inputRect.bottom > viewportHeight / 2) {\n modalHeight = 300; // Reduced height\n memoriesPerPage = 2; // Show only 2 memories\n }\n } else {\n // Place above the input if not enough space below\n topPosition = inputRect.top - modalHeight - 10;\n }\n }\n\n // Create modal overlay\n const modalOverlay = document.createElement('div');\n modalOverlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: transparent;\n display: flex;\n z-index: 10000;\n pointer-events: auto;\n `;\n\n // Save reference to current modal overlay\n currentModalOverlay = modalOverlay;\n\n // Add event listener to close modal when clicking outside\n modalOverlay.addEventListener('click', event => {\n // Only close if clicking directly on the overlay, not its children\n if (event.target === modalOverlay) {\n closeModal();\n }\n });\n\n // Create modal container with positioning\n const modalContainer = document.createElement('div');\n modalContainer.style.cssText = `\n background-color: #1C1C1E;\n border-radius: 12px;\n width: ${modalWidth}px;\n height: ${modalHeight}px;\n display: flex;\n flex-direction: column;\n color: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n position: absolute;\n top: ${topPosition}px;\n left: ${leftPosition}px;\n pointer-events: auto;\n border: 1px solid #27272A;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow: hidden;\n `;\n\n // Create modal header\n const modalHeader = document.createElement('div');\n modalHeader.style.cssText = `\n display: flex;\n align-items: center;\n padding: 10px 16px;\n justify-content: space-between;\n background-color: #232325;\n flex-shrink: 0;\n cursor: move;\n user-select: none;\n `;\n\n // Create header left section with just the logo\n const headerLeft = document.createElement('div');\n headerLeft.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n `;\n\n // Add Mem0 logo (updated to SVG)\n const logoImg = document.createElement('img');\n logoImg.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n logoImg.style.cssText = `\n width: 26px;\n height: 26px;\n border-radius: 50%;\n margin-right: 8px;\n `;\n\n // Add \"OpenMemory\" title\n const title = document.createElement('div');\n title.textContent = 'OpenMemory';\n title.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: white;\n `;\n\n // Create header right section\n const headerRight = document.createElement('div');\n headerRight.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n `;\n\n // Create Add to Prompt button with arrow\n const addToPromptBtn = document.createElement('button');\n addToPromptBtn.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 16px;\n gap: 8px;\n background-color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: black;\n `;\n addToPromptBtn.textContent = 'Add to Prompt';\n\n // Add arrow icon to button\n const arrowIcon = document.createElement('span');\n arrowIcon.innerHTML = `\n`;\n addToPromptBtn.appendChild(arrowIcon);\n\n // (Removed) LLM button – auto-rerank is now handled on modal open\n // Create settings button\n const settingsBtn = document.createElement('button');\n settingsBtn.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n opacity: 0.6;\n transition: opacity 0.2s;\n `;\n settingsBtn.innerHTML = ``;\n\n // Add click event to open app.mem0.ai in a new tab\n settingsBtn.addEventListener('click', () => {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n memoryModalShown = false;\n currentModalOverlay = null;\n }\n\n chrome.runtime.sendMessage({ action: SidebarAction.SIDEBAR_SETTINGS });\n });\n\n // Add hover effect for the settings button\n settingsBtn.addEventListener('mouseenter', () => {\n settingsBtn.style.opacity = '1';\n });\n settingsBtn.addEventListener('mouseleave', () => {\n settingsBtn.style.opacity = '0.6';\n });\n\n // Add drag functionality to modal header\n let isDragging = false;\n const dragOffset = { x: 0, y: 0 };\n\n modalHeader.addEventListener('mousedown', (e: MouseEvent) => {\n // Don't start dragging if clicking on buttons\n const target = e.target as HTMLElement;\n if (target?.closest('button')) {\n return;\n }\n\n isDragging = true;\n modalHeader.style.cursor = 'grabbing';\n\n const modalRect = modalContainer.getBoundingClientRect();\n dragOffset.x = e.clientX - modalRect.left;\n dragOffset.y = e.clientY - modalRect.top;\n\n e.preventDefault();\n });\n\n document.addEventListener('mousemove', e => {\n if (!isDragging) {\n return;\n }\n\n const newLeft = e.clientX - dragOffset.x;\n const newTop = e.clientY - dragOffset.y;\n\n // Constrain to viewport\n const maxLeft = window.innerWidth - modalWidth;\n const maxTop = window.innerHeight - modalHeight;\n\n const constrainedLeft = Math.max(0, Math.min(newLeft, maxLeft));\n const constrainedTop = Math.max(0, Math.min(newTop, maxTop));\n\n modalContainer.style.left = `${constrainedLeft}px`;\n modalContainer.style.top = `${constrainedTop}px`;\n\n // Store the dragged position\n draggedPosition = {\n left: constrainedLeft,\n top: constrainedTop,\n };\n\n e.preventDefault();\n });\n\n document.addEventListener('mouseup', () => {\n if (isDragging) {\n isDragging = false;\n modalHeader.style.cursor = 'move';\n }\n });\n\n // Content section\n const contentSection = document.createElement('div');\n const contentSectionHeight = modalHeight - 130; // Account for header and navigation\n contentSection.style.cssText = `\n display: flex;\n flex-direction: column;\n padding: 0 16px;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n height: ${contentSectionHeight}px;\n `;\n\n // Create memories counter\n const memoriesCounter = document.createElement('div');\n memoriesCounter.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: #FFFFFF;\n margin-top: 16px;\n flex-shrink: 0;\n `;\n\n // Update counter text based on loading state and number of memories\n if (isLoading) {\n memoriesCounter.textContent = `Loading Relevant Memories...`;\n } else {\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n }\n\n // Calculate max height for memories content based on modal height\n const memoriesContentMaxHeight = contentSectionHeight - 40; // Account for memories counter\n\n // Create memories content container with adjusted height\n const memoriesContent = document.createElement('div');\n memoriesContent.style.cssText = `\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n flex: 1;\n max-height: ${memoriesContentMaxHeight}px;\n padding-right: 8px;\n margin-right: -8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n `;\n memoriesContent.style.cssText += '::-webkit-scrollbar { display: none; }';\n\n // Track currently expanded memory\n let currentlyExpandedMemory: HTMLElement | null = null;\n\n // Function to create skeleton loading items (adjusted for different heights)\n function createSkeletonItems() {\n memoriesContent.innerHTML = '';\n\n for (let i = 0; i < memoriesPerPage; i++) {\n const skeletonItem = document.createElement('div');\n skeletonItem.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px;\n background-color: #27272A;\n border-radius: 8px;\n height: 72px;\n flex-shrink: 0;\n animation: pulse 1.5s infinite ease-in-out;\n `;\n\n const skeletonText = document.createElement('div');\n skeletonText.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 85%;\n margin-bottom: 8px;\n `;\n\n const skeletonText2 = document.createElement('div');\n skeletonText2.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 65%;\n `;\n\n const skeletonActions = document.createElement('div');\n skeletonActions.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n `;\n\n const skeletonButton1 = document.createElement('div');\n skeletonButton1.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n const skeletonButton2 = document.createElement('div');\n skeletonButton2.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n skeletonActions.appendChild(skeletonButton1);\n skeletonActions.appendChild(skeletonButton2);\n\n const textContainer = document.createElement('div');\n textContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n textContainer.appendChild(skeletonText);\n textContainer.appendChild(skeletonText2);\n\n skeletonItem.appendChild(textContainer);\n skeletonItem.appendChild(skeletonActions);\n memoriesContent.appendChild(skeletonItem);\n }\n\n // Add keyframe animation to document if not exists\n if (!document.getElementById('skeleton-animation')) {\n const style = document.createElement('style');\n style.id = 'skeleton-animation';\n style.innerHTML = `\n @keyframes pulse {\n 0% { opacity: 0.6; }\n 50% { opacity: 0.8; }\n 100% { opacity: 0.6; }\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n // Function to expand memory\n function expandMemory(\n memoryContainer: HTMLDivElement,\n memoryText: HTMLDivElement,\n contentWrapper: HTMLDivElement,\n removeButton: HTMLButtonElement,\n isExpanded: { value: boolean }\n ) {\n if (currentlyExpandedMemory && currentlyExpandedMemory !== memoryContainer) {\n currentlyExpandedMemory.dispatchEvent(new Event('collapse'));\n }\n\n isExpanded.value = true;\n memoryText.style.webkitLineClamp = 'unset';\n memoryText.style.height = 'auto';\n contentWrapper.style.overflowY = 'auto';\n contentWrapper.style.maxHeight = '240px'; // Limit height to prevent overflow\n contentWrapper.style.scrollbarWidth = 'none';\n // contentWrapper.style.msOverflowStyle is non-standard; omit to satisfy TS\n contentWrapper.style.cssText += '::-webkit-scrollbar { display: none; }';\n memoryContainer.style.backgroundColor = '#1C1C1E';\n memoryContainer.style.maxHeight = '300px'; // Allow expansion but within container\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'flex';\n currentlyExpandedMemory = memoryContainer;\n\n // Scroll to make expanded memory visible if needed\n memoriesContent.scrollTop = memoryContainer.offsetTop - memoriesContent.offsetTop;\n }\n\n // Function to collapse memory\n function collapseMemory(\n memoryContainer: HTMLDivElement,\n memoryText: HTMLDivElement,\n contentWrapper: HTMLDivElement,\n removeButton: HTMLButtonElement,\n isExpanded: { value: boolean }\n ) {\n isExpanded.value = false;\n memoryText.style.webkitLineClamp = '2';\n memoryText.style.height = '42px';\n contentWrapper.style.overflowY = 'visible';\n memoryContainer.style.backgroundColor = '#27272A';\n memoryContainer.style.maxHeight = '72px';\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'none';\n currentlyExpandedMemory = null;\n }\n\n // Function to show memories with adjusted count based on modal position\n function showMemories() {\n memoriesContent.innerHTML = '';\n\n if (isLoading) {\n createSkeletonItems();\n return;\n }\n\n if (memoryItems.length === 0) {\n showEmptyState();\n // Disable navigation buttons when there are no memories\n updateNavigationState(0, 0);\n return;\n }\n\n // Use the dynamically set memoriesPerPage value\n const memoriesToShow = Math.min(memoriesPerPage, memoryItems.length);\n\n // Calculate total pages and current page\n const totalPages = Math.ceil(memoryItems.length / memoriesToShow);\n const currentPage = Math.floor(currentMemoryIndex / memoriesToShow) + 1;\n\n // Update navigation buttons state\n updateNavigationState(currentPage, totalPages);\n\n for (let i = 0; i < memoriesToShow; i++) {\n const memoryIndex = currentMemoryIndex + i;\n if (memoryIndex >= memoryItems.length) {\n break;\n } // Stop if we've reached the end\n\n const memory = memoryItems[memoryIndex]!;\n\n // Skip memories that have been added already\n if (allMemoriesById.has(String(memory.id))) {\n continue;\n }\n\n // Ensure memory has an ID\n if (!memory.id) {\n memory.id = `memory-${Date.now()}-${memoryIndex}`;\n }\n\n const memoryContainer = document.createElement('div');\n memoryContainer.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px; \n background-color: #27272A;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n min-height: 72px; \n max-height: 72px; \n overflow: hidden;\n flex-shrink: 0;\n `;\n\n const memoryText = document.createElement('div');\n memoryText.style.cssText = `\n font-size: 14px;\n line-height: 1.5;\n color: #D4D4D8;\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: all 0.2s ease;\n height: 42px; /* Height for 2 lines of text */\n `;\n memoryText.textContent = memory.text || '';\n\n const actionsContainer = document.createElement('div');\n actionsContainer.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n flex-shrink: 0;\n `;\n\n // Add button\n const addButton = document.createElement('button');\n addButton.style.cssText = `\n border: none;\n cursor: pointer;\n padding: 4px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 100%;\n transition: all 0.2s ease;\n `;\n\n addButton.innerHTML = ``;\n\n // Add click handler for add button\n addButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n sendExtensionEvent('memory_injection', {\n provider: 'chatgpt',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: false,\n memory_id: memory.id,\n });\n\n // Add this memory\n allMemoriesById.add(String(memory.id));\n allMemories.push(String(memory.text || ''));\n updateInputWithMemories();\n\n // Remove this memory from the list\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n // If we're on a page that's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n // Menu button\n const menuButton = document.createElement('button');\n menuButton.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n color: #A1A1AA;\n `;\n menuButton.innerHTML = ``;\n\n // Track expanded state using object to maintain reference\n const isExpanded = { value: false };\n\n // Create remove button (hidden by default)\n const removeButton = document.createElement('button');\n removeButton.style.cssText = `\n display: none;\n align-items: center;\n gap: 6px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 8px;\n padding: 2px 4px;\n border: none;\n cursor: pointer;\n font-size: 13px;\n margin-top: 12px;\n width: fit-content;\n `;\n removeButton.innerHTML = `\n \n Remove\n `;\n\n // Create content wrapper for text and remove button\n const contentWrapper = document.createElement('div');\n contentWrapper.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n contentWrapper.appendChild(memoryText);\n contentWrapper.appendChild(removeButton);\n\n memoryContainer.addEventListener('collapse', () => {\n collapseMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n });\n\n menuButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n if (isExpanded.value) {\n collapseMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n } else {\n expandMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n }\n });\n\n // Add click handler for remove button\n removeButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n // Remove from memoryItems\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n\n // If we're on the last page and it's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n actionsContainer.appendChild(addButton);\n actionsContainer.appendChild(menuButton);\n\n memoryContainer.appendChild(contentWrapper);\n memoryContainer.appendChild(actionsContainer);\n memoriesContent.appendChild(memoryContainer);\n\n // Add hover effect\n memoryContainer.addEventListener('mouseenter', () => {\n memoryContainer.style.backgroundColor = isExpanded.value ? '#18181B' : '#323232';\n });\n memoryContainer.addEventListener('mouseleave', () => {\n memoryContainer.style.backgroundColor = isExpanded.value ? '#1C1C1E' : '#27272A';\n });\n }\n\n // If after filtering for already added memories, there are no items to show,\n // check if we need to go to previous page\n if (memoriesContent.children.length === 0 && memoryItems.length > 0) {\n if (currentMemoryIndex > 0) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n } else {\n showEmptyState();\n }\n }\n }\n\n // Function to show empty state\n function showEmptyState(): void {\n memoriesContent.innerHTML = '';\n\n const emptyContainer = document.createElement('div');\n emptyContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n text-align: center;\n flex: 1;\n min-height: 200px;\n `;\n\n const emptyIcon = document.createElement('div');\n emptyIcon.innerHTML = ``;\n emptyIcon.style.marginBottom = '16px';\n\n const emptyText = document.createElement('div');\n emptyText.textContent = 'No relevant memories found';\n emptyText.style.cssText = `\n color: #71717A;\n font-size: 14px;\n font-weight: 500;\n `;\n\n emptyContainer.appendChild(emptyIcon);\n emptyContainer.appendChild(emptyText);\n memoriesContent.appendChild(emptyContainer);\n }\n\n // Update navigation button states\n function updateNavigationState(currentPage: number, totalPages: number): void {\n // If there are no memories or total pages is 0, disable both buttons\n if (memoryItems.length === 0 || totalPages === 0) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n return;\n }\n\n if (currentPage <= 1) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n } else {\n prevButton.disabled = false;\n prevButton.style.opacity = '1';\n prevButton.style.cursor = 'pointer';\n }\n\n if (currentPage >= totalPages) {\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n } else {\n nextButton.disabled = false;\n nextButton.style.opacity = '1';\n nextButton.style.cursor = 'pointer';\n }\n }\n\n // Navigation section at bottom\n const navigationSection = document.createElement('div');\n navigationSection.style.cssText = `\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n border-top: none;\n flex-shrink: 0;\n `;\n\n // Navigation buttons\n const prevButton = document.createElement('button');\n prevButton.innerHTML = ``;\n prevButton.style.cssText = `\n background: #27272A;\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n `;\n\n const nextButton = document.createElement('button');\n nextButton.innerHTML = ``;\n nextButton.style.cssText = prevButton.style.cssText;\n\n // Add navigation button handlers\n prevButton.addEventListener('click', () => {\n if (currentMemoryIndex >= memoriesPerPage) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n }\n });\n\n nextButton.addEventListener('click', () => {\n if (currentMemoryIndex + memoriesPerPage < memoryItems.length) {\n currentMemoryIndex = currentMemoryIndex + memoriesPerPage;\n showMemories();\n }\n });\n\n // Add hover effects\n [prevButton, nextButton].forEach(button => {\n button.addEventListener('mouseenter', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#323232';\n }\n });\n button.addEventListener('mouseleave', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#27272A';\n }\n });\n });\n\n // Assemble modal\n headerLeft.appendChild(logoImg);\n headerLeft.appendChild(title);\n headerRight.appendChild(addToPromptBtn);\n headerRight.appendChild(settingsBtn);\n // No LLM button; auto-rerank happens below if enabled\n\n modalHeader.appendChild(headerLeft);\n modalHeader.appendChild(headerRight);\n\n contentSection.appendChild(memoriesCounter);\n contentSection.appendChild(memoriesContent);\n\n navigationSection.appendChild(prevButton);\n navigationSection.appendChild(nextButton);\n\n modalContainer.appendChild(modalHeader);\n modalContainer.appendChild(contentSection);\n modalContainer.appendChild(navigationSection);\n\n modalOverlay.appendChild(modalContainer);\n\n // Append to body\n document.body.appendChild(modalOverlay);\n\n // Show initial memories\n showMemories();\n\n // Function to close the modal\n function closeModal() {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n }\n currentModalOverlay = null;\n memoryModalShown = false;\n // Reset dragged position when modal is explicitly closed\n draggedPosition = null;\n }\n\n // Update Add to Prompt button click handler\n addToPromptBtn.addEventListener('click', () => {\n // Only add memories that are not already added\n const newMemories = memoryItems\n .filter(memory => !allMemoriesById.has(String(memory.id)) && !memory.removed)\n .map(memory => {\n allMemoriesById.add(String(memory.id));\n return String(memory.text || '');\n });\n\n sendExtensionEvent('memory_injection', {\n provider: 'chatgpt',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: true,\n memory_count: newMemories.length,\n });\n\n // Add all new memories to allMemories\n allMemories.push(...newMemories);\n\n // Update the input with all memories\n if (allMemories.length > 0) {\n updateInputWithMemories();\n closeModal();\n } else {\n // If no new memories were added but we have existing ones, just close\n if (allMemoriesById.size > 0) {\n closeModal();\n }\n }\n\n // Remove all added memories from the memoryItems list\n for (let i = memoryItems.length - 1; i >= 0; i--) {\n if (allMemoriesById.has(String(memoryItems[i]?.id))) {\n memoryItems.splice(i, 1);\n }\n }\n });\n}\n\n// Shared function to update the input field with all collected memories\nfunction updateInputWithMemories(): void {\n const inputElement =\n document.querySelector('#prompt-textarea') ||\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea');\n\n if (inputElement && allMemories.length > 0) {\n // Get the content without any existing memory wrappers\n const baseContent = getContentWithoutMemories();\n\n // Create the memory wrapper with all collected memories\n let memoriesContent =\n '
';\n memoriesContent += OPENMEMORY_PROMPTS.memory_header_html_strong;\n\n // Add all memories to the content\n allMemories.forEach((mem, idx) => {\n const safe = (mem || '').toString();\n memoriesContent += `
- ${safe}
`;\n });\n memoriesContent += '
';\n\n // Add the final content to the input\n if (inputElement.tagName.toLowerCase() === 'div') {\n inputElement.innerHTML = `${baseContent}
${memoriesContent}`;\n } else {\n (inputElement as HTMLTextAreaElement).value = `${baseContent}\\n${memoriesContent}`;\n }\n\n // Make only the wrapper non-editable; allow user to select/copy text inside\n try {\n const wrapper = document.getElementById('mem0-wrapper');\n if (wrapper) {\n wrapper.setAttribute('contenteditable', 'false');\n wrapper.style.userSelect = 'text';\n }\n } catch {\n // Ignore errors when setting contenteditable\n }\n\n inputElement.dispatchEvent(new Event('input', { bubbles: true }));\n }\n}\n\n// Function to get the content without any memory wrappers\nfunction getContentWithoutMemories(message?: string): string {\n if (typeof message === 'string') {\n return message;\n }\n\n const inputElement =\n (document.querySelector('#prompt-textarea') as HTMLTextAreaElement | HTMLDivElement) ||\n (document.querySelector('div[contenteditable=\"true\"]') as HTMLDivElement) ||\n (document.querySelector('textarea') as HTMLTextAreaElement);\n\n if (!inputElement) {\n return '';\n }\n\n let content =\n (inputElement as HTMLTextAreaElement)?.value ||\n inputElement.textContent ||\n (inputElement as HTMLDivElement).innerHTML;\n\n if (\n message &&\n (!content ||\n content.trim() ===\n '
/g, '');\n\n // Remove any memory headers using shared prompts (HTML and plain variants)\n try {\n const MEM0_PLAIN = OPENMEMORY_PROMPTS.memory_header_plain_regex;\n const MEM0_HTML = OPENMEMORY_PROMPTS.memory_header_html_regex;\n content = content.replace(MEM0_HTML, '');\n content = content.replace(MEM0_PLAIN, '');\n } catch {\n // Ignore errors during re-initialization\n }\n\n // Clean up any leftover paragraph markers\n content = content.replace(/
<\\/p>
$/g, '');\n\n // Replace
with nothing\n content = content.replace(/
[\\s\\S]*?<\\/p>/g, '');\n\n return content.trim();\n}\n\n// Add an event listener for the send button to clear memories after sending\nfunction addSendButtonListener(): void {\n const sendButton = document.querySelector('#composer-submit-button') as HTMLButtonElement;\n\n if (sendButton && !sendButton.dataset.mem0Listener) {\n sendButton.dataset.mem0Listener = 'true';\n sendButton.addEventListener('click', function () {\n // Capture and save memory asynchronously\n captureAndStoreMemory();\n\n // Clear all memories after sending\n setTimeout(() => {\n allMemories = [];\n allMemoriesById.clear();\n }, 100);\n });\n\n // Also handle Enter key press\n const inputElement =\n (document.querySelector('#prompt-textarea') as HTMLTextAreaElement | HTMLDivElement) ||\n (document.querySelector('div[contenteditable=\"true\"]') as HTMLDivElement) ||\n (document.querySelector('textarea') as HTMLTextAreaElement);\n\n if (inputElement && !inputElement.dataset.mem0KeyListener) {\n inputElement.dataset.mem0KeyListener = 'true';\n (inputElement as HTMLElement).addEventListener('keydown', function (event: KeyboardEvent) {\n // Check if Enter was pressed without Shift (standard send behavior)\n\n inputValueCopy =\n (inputElement as HTMLTextAreaElement)?.value ||\n inputElement.textContent ||\n inputValueCopy;\n\n if (event.key === 'Enter' && !event.shiftKey) {\n // Capture and save memory asynchronously\n captureAndStoreMemory();\n\n // Clear all memories after sending\n setTimeout(() => {\n allMemories = [];\n allMemoriesById.clear();\n }, 100);\n }\n });\n }\n }\n}\n\n// Function to capture and store memory asynchronously\nfunction captureAndStoreMemory(): void {\n // Get the message content\n // id is prompt-textarea\n const inputElement =\n (document.querySelector('#prompt-textarea') as HTMLTextAreaElement | HTMLDivElement) ||\n (document.querySelector('div[contenteditable=\"true\"]') as HTMLDivElement) ||\n (document.querySelector('textarea') as HTMLTextAreaElement) ||\n (document.querySelector('textarea[data-virtualkeyboard=\"true\"]') as HTMLTextAreaElement);\n\n if (!inputElement) {\n return;\n }\n\n // Get raw content from the input element\n let message = inputElement.textContent || (inputElement as HTMLTextAreaElement)?.value;\n\n if (!message || message.trim() === '') {\n message = inputValueCopy;\n }\n\n if (!message || message.trim() === '') {\n return;\n }\n\n // Clean the message of any memory wrapper content\n message = getContentWithoutMemories(message);\n\n // Skip if message is empty after cleaning\n if (!message || message.trim() === '') {\n return;\n }\n\n // Asynchronously store the memory\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.MEMORY_ENABLED,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n ],\n function (items) {\n // Skip if memory is disabled or no credentials\n if (\n items[StorageKey.MEMORY_ENABLED] === false ||\n (!items[StorageKey.API_KEY] && !items[StorageKey.ACCESS_TOKEN])\n ) {\n return;\n }\n\n const authHeader = items[StorageKey.ACCESS_TOKEN]\n ? `Bearer ${items[StorageKey.ACCESS_TOKEN]}`\n : `Token ${items[StorageKey.API_KEY]}`;\n\n const userId =\n items[StorageKey.USER_ID_CAMEL] || items[StorageKey.USER_ID] || DEFAULT_USER_ID;\n\n // Get recent messages for context (if available)\n const messages = getLastMessages(2);\n messages.push({ role: MessageRole.User, content: message });\n\n const optionalParams: OptionalApiParams = {};\n if (items[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = items[StorageKey.SELECTED_ORG];\n }\n if (items[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = items[StorageKey.SELECTED_PROJECT];\n }\n\n // Send memory to mem0 API asynchronously without waiting for response\n const storagePayload = {\n messages: messages,\n user_id: userId,\n infer: true,\n metadata: {\n provider: 'ChatGPT',\n },\n source: 'OPENMEMORY_CHROME_EXTENSION',\n ...optionalParams,\n };\n\n fetch('https://api.mem0.ai/v1/memories/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: authHeader,\n },\n body: JSON.stringify(storagePayload),\n }).catch(error => {\n console.error('Error saving memory:', error);\n });\n }\n );\n}\n\nasync function updateNotificationDot(): Promise {\n const memoryEnabled = await getMemoryEnabledState();\n if (!memoryEnabled) {\n return;\n }\n\n const input =\n document.querySelector('#prompt-textarea') ||\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea');\n const host = document.getElementById('mem0-icon-button'); // shadow host\n if (!input || !host) {\n setTimeout(updateNotificationDot, 1000);\n return;\n }\n\n const set = () => {\n const txt = input.textContent || input.value || '';\n host.setAttribute('data-has-text', txt.trim() ? '1' : '0');\n };\n\n const mo = new MutationObserver(set);\n mo.observe(input, { childList: true, characterData: true, subtree: true });\n input.addEventListener('input', set);\n input.addEventListener('keyup', set);\n input.addEventListener('focus', set);\n set();\n}\n\n// Modified function to handle Mem0 modal instead of direct injection\nasync function handleMem0Modal(sourceButtonId: string | null = null): Promise {\n const memoryEnabled = await getMemoryEnabledState();\n if (!memoryEnabled) {\n return;\n }\n\n // Check if user is logged in\n const loginData = await new Promise(resolve => {\n chrome.storage.sync.get(\n [StorageKey.API_KEY, StorageKey.USER_ID_CAMEL, StorageKey.ACCESS_TOKEN],\n function (items) {\n resolve(items);\n }\n );\n });\n\n // If no API key and no access token, show login popup\n if (!loginData[StorageKey.API_KEY] && !loginData[StorageKey.ACCESS_TOKEN]) {\n showLoginPopup();\n return;\n }\n\n const mem0Button = document.querySelector('#mem0-icon-button') as HTMLElement;\n\n let message = getInputValue();\n // If no message, show a popup and return\n if (!message || message.trim() === '') {\n if (mem0Button) {\n showButtonPopup(mem0Button as HTMLElement, 'Please enter some text first');\n }\n return;\n }\n\n try {\n const MEM0_PLAIN = OPENMEMORY_PROMPTS.memory_header_plain_regex;\n message = message.replace(MEM0_PLAIN, '').trim();\n } catch {\n // Ignore errors during re-initialization\n }\n const endIndex = message.indexOf('
');\n if (endIndex !== -1) {\n message = message.slice(0, endIndex + 4);\n }\n\n if (isProcessingMem0) {\n return;\n }\n\n isProcessingMem0 = true;\n\n // Show the loading modal immediately with the source button ID\n createMemoryModal([], true, sourceButtonId);\n\n try {\n const data = await new Promise(resolve => {\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n StorageKey.SIMILARITY_THRESHOLD,\n StorageKey.TOP_K,\n ],\n function (items) {\n resolve(items);\n }\n );\n });\n\n const apiKey = data[StorageKey.API_KEY];\n const accessToken = data[StorageKey.ACCESS_TOKEN];\n\n if (!apiKey && !accessToken) {\n isProcessingMem0 = false;\n return;\n }\n\n sendExtensionEvent('modal_clicked', {\n provider: 'chatgpt',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n });\n\n const messages = getLastMessages(2);\n messages.push({ role: MessageRole.User, content: message });\n\n const optionalParams: OptionalApiParams = {};\n if (data[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = data[StorageKey.SELECTED_ORG];\n }\n if (data[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = data[StorageKey.SELECTED_PROJECT];\n }\n\n currentModalSourceButtonId = sourceButtonId;\n chatgptSearch.runImmediate(message);\n } catch (error) {\n console.error('Error:', error);\n // Still show the modal but with empty state if there was an error\n createMemoryModal([], false, sourceButtonId);\n throw error;\n } finally {\n isProcessingMem0 = false;\n }\n}\n\n// Function to show a small popup message near the button\nfunction showButtonPopup(button: HTMLElement, message: string): void {\n let host = button || document.getElementById('mem0-icon-button');\n if (!host) {\n return;\n }\n let root = host.shadowRoot || host;\n // Remove any existing popups\n const existingPopup = root.querySelector('.mem0-button-popup');\n if (existingPopup) {\n existingPopup.remove();\n }\n\n // Also hide any hover popover that might be showing\n const hoverPopover = document.querySelector('.mem0-button-popover') as HTMLElement;\n if (hoverPopover) {\n hoverPopover.style.opacity = '0';\n hoverPopover.style.display = 'none';\n }\n\n const popup = document.createElement('div');\n popup.className = 'mem0-button-popup';\n\n popup.style.cssText = `\n position: absolute;\n top: -40px;\n left: 50%;\n transform: translateX(-50%);\n background-color: #1C1C1E;\n border: 1px solid #27272A;\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 10001;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n `;\n\n popup.textContent = message;\n\n // Create arrow\n const arrow = document.createElement('div');\n arrow.style.cssText = `\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #1C1C1E;\n border-right: 1px solid #27272A;\n border-bottom: 1px solid #27272A;\n `;\n\n popup.appendChild(arrow);\n root.appendChild(popup);\n\n setTimeout(function () {\n if (popup.isConnected) {\n popup.remove();\n }\n }, 3000);\n\n // Position relative to button\n // button.style.position = 'relative';\n // button.appendChild(popup);\n\n // // Auto-remove after 3 seconds\n // setTimeout(() => {\n // if (document.body.contains(popup)) {\n // popup.remove();\n // }\n // }, 3000);\n}\n\n// Safe no-op to prevent ReferenceError if auto-inject prefetch isn't defined elsewhere\nfunction setupAutoInjectPrefetch() {\n try {\n // Intentionally left blank; legacy callers expect this to exist.\n // Inline hint handles lightweight suggestion awareness.\n } catch {\n // Ignore errors during re-initialization\n }\n}\n\n(function () {\n if (!OPENMEMORY_UI || !OPENMEMORY_UI.mountOnEditorFocus) {\n return;\n }\n\n // 1) Try to mount immediately from cached anchor on page load (before focus)\n try {\n // Skip if already mounted (e.g., hot reload / rapid SPA replace)\n if (!document.getElementById('mem0-icon-button')) {\n OPENMEMORY_UI.resolveCachedAnchor(\n { learnKey: location.host + ':' + location.pathname },\n null,\n 24 * 60 * 60 * 1000\n )\n .then(function (hit) {\n if (!hit || !hit.el) {\n return;\n }\n // Reuse the same render and placement as the focus-driven path\n let hs = OPENMEMORY_UI.createShadowRootHost('mem0-root');\n let host = hs.host,\n shadow = hs.shadow;\n host.id = 'mem0-icon-button';\n let unplace = OPENMEMORY_UI.applyPlacement({\n container: host,\n anchor: hit.el,\n placement: hit.placement || {\n strategy: 'inline',\n where: 'beforeend',\n inlineAlign: 'end',\n },\n });\n\n let style = document.createElement('style');\n style.textContent = `\n :host { position: relative; }\n .mem0-btn { all: initial; cursor: pointer; display:inline-flex; align-items:center;\n justify-content:center; width:32px; height:32px; border-radius:50%; }\n .mem0-btn img { width:18px; height:18px; border-radius:50%; }\n .dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px;\n background:#80DDA2; border-radius:50%; border:2px solid #1C1C1E; display:none; }\n :host([data-has-text=\"1\"]) .dot { display:block; }\n `;\n let btn = document.createElement('button');\n btn.className = 'mem0-btn';\n let img = document.createElement('img');\n img.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n let dot = document.createElement('div');\n dot.className = 'dot';\n btn.appendChild(img);\n shadow.append(style, btn, dot);\n\n // Nudge to the left of mic if present in same anchor\n try {\n let mic =\n hit.el &&\n (hit.el.querySelector('button[aria-label=\"Dictate button\"]') ||\n hit.el.querySelector('button[aria-label*=\"mic\" i]') ||\n hit.el.querySelector('button[aria-label*=\"voice\" i]'));\n if (mic && hit.el) {\n let child: Element | null = mic;\n while (child && child.parentElement !== hit.el) {\n child = child.parentElement;\n }\n if (child && child.parentElement === hit.el) {\n hit.el.insertBefore(host, child);\n }\n }\n } catch {\n // Ignore errors during re-initialization\n }\n\n btn.addEventListener('click', function () {\n handleMem0Modal('mem0-icon-button');\n });\n if (typeof updateNotificationDot === 'function') {\n setTimeout(updateNotificationDot, 0);\n }\n\n // If the anchor disappears, allow normal focus flow to re-mount\n const removal = new MutationObserver(function () {\n if (!document.contains(hit.el) || !document.contains(host)) {\n try {\n unplace();\n } catch {\n // Ignore errors during re-initialization\n }\n try {\n removal.disconnect();\n } catch {\n // Ignore errors during re-initialization\n }\n }\n });\n removal.observe(document.documentElement, { childList: true, subtree: true });\n })\n .catch(function () {\n // Ignore errors during re-initialization\n });\n }\n } catch {\n // Ignore errors during re-initialization\n }\n\n // 2) Standard focus-driven mount\n OPENMEMORY_UI.mountOnEditorFocus({\n existingHostSelector: '#mem0-icon-button',\n editorSelector:\n typeof SITE_CONFIG !== 'undefined' &&\n SITE_CONFIG.chatgpt &&\n SITE_CONFIG.chatgpt.editorSelector\n ? SITE_CONFIG.chatgpt.editorSelector\n : 'textarea, [contenteditable=\"true\"], input[type=\"text\"]',\n deriveAnchor:\n typeof SITE_CONFIG !== 'undefined' &&\n SITE_CONFIG.chatgpt &&\n typeof SITE_CONFIG.chatgpt.deriveAnchor === 'function'\n ? SITE_CONFIG.chatgpt.deriveAnchor\n : function (editor) {\n return editor.closest('form') || editor.parentElement;\n },\n placement:\n typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.chatgpt && SITE_CONFIG.chatgpt.placement\n ? SITE_CONFIG.chatgpt.placement\n : { strategy: 'inline', where: 'beforeend', inlineAlign: 'end' },\n render: function (shadow: ShadowRoot, host: HTMLElement, anchor: Element | null) {\n host.id = 'mem0-icon-button'; // existing code relies on this\n let style = document.createElement('style');\n style.textContent = `\n :host { position: relative; }\n .mem0-btn { all: initial; cursor: pointer; display:inline-flex; align-items:center;\n justify-content:center; width:32px; height:32px; border-radius:50%; }\n .mem0-btn img { width:18px; height:18px; border-radius:50%; }\n .dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px;\n background:#80DDA2; border-radius:50%; border:2px solid #1C1C1E; display:none; }\n :host([data-has-text=\"1\"]) .dot { display:block; }\n `;\n let btn = document.createElement('button');\n btn.className = 'mem0-btn';\n let img = document.createElement('img');\n img.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n let dot = document.createElement('div');\n dot.className = 'dot';\n btn.appendChild(img);\n shadow.append(style, btn, dot);\n\n try {\n let cfg =\n typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.chatgpt ? SITE_CONFIG.chatgpt : null;\n let mic = null;\n if (cfg && Array.isArray(cfg.adjacentTargets)) {\n for (let i = 0; i < cfg.adjacentTargets.length; i++) {\n let sel = cfg.adjacentTargets[i];\n if (sel) {\n mic = anchor && anchor.querySelector(sel);\n if (mic) {\n break;\n }\n }\n }\n }\n if (mic && anchor) {\n let child: Element | null = mic;\n while (child && child.parentElement !== anchor) {\n child = child.parentElement;\n }\n if (child && child.parentElement === anchor) {\n anchor.insertBefore(host, child);\n }\n host.style.marginRight = ''; // rely on container gap\n host.style.marginLeft = '';\n } else {\n host.style.marginLeft = '4px'; // mild fallback spacing\n }\n } catch (_e) {\n // Ignore errors during re-initialization\n }\n\n btn.addEventListener('click', function () {\n handleMem0Modal('mem0-icon-button');\n });\n\n if (typeof updateNotificationDot === 'function') {\n setTimeout(updateNotificationDot, 0);\n }\n },\n // Optional safety net if deriveAnchor fails\n fallback: function () {\n let cfg =\n typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.chatgpt ? SITE_CONFIG.chatgpt : null;\n OPENMEMORY_UI.mountResilient({\n anchors: [\n {\n find: function () {\n let sel =\n (cfg && cfg.editorSelector) ||\n 'textarea, [contenteditable=\"true\"], input[type=\"text\"]';\n let ed = document.querySelector(sel);\n if (!ed) {\n return null;\n }\n try {\n return cfg && typeof cfg.deriveAnchor === 'function'\n ? cfg.deriveAnchor(ed)\n : ed.closest('form') || ed.parentElement;\n } catch (_) {\n return ed.closest('form') || ed.parentElement;\n }\n },\n },\n ],\n placement: (cfg && cfg.placement) || {\n strategy: 'inline',\n where: 'beforeend',\n inlineAlign: 'end',\n },\n enableFloatingFallback: true,\n render: function (shadow: ShadowRoot, host: HTMLElement, anchor: Element | null) {\n host.id = 'mem0-icon-button'; // host is the shadow root container\n let style = document.createElement('style');\n style.textContent = `\n :host { position: relative; }\n .mem0-btn { all: initial; cursor: pointer; display:inline-flex; align-items:center;\n justify-content:center; width:32px; height:32px; border-radius:50%; }\n .mem0-btn img { width:18px; height:18px; border-radius:50%; }\n .dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px;\n background:#80DDA2; border-radius:50%; border:2px solid #1C1C1E; display:none; }\n :host([data-has-text=\"1\"]) .dot { display:block; }\n `;\n let btn = document.createElement('button');\n btn.className = 'mem0-btn';\n let img = document.createElement('img');\n img.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n let dot = document.createElement('div');\n dot.className = 'dot';\n btn.appendChild(img);\n shadow.append(style, btn, dot);\n btn.addEventListener('click', function () {\n handleMem0Modal('mem0-icon-button');\n });\n\n // Move host to the left of the mic inside the same toolbar container\n try {\n let cfg =\n typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.chatgpt\n ? SITE_CONFIG.chatgpt\n : null;\n let mic = null;\n if (cfg && Array.isArray(cfg.adjacentTargets)) {\n for (let i = 0; i < cfg.adjacentTargets.length; i++) {\n let sel = cfg.adjacentTargets[i];\n if (sel) {\n mic = anchor && anchor.querySelector(sel);\n if (mic) {\n break;\n }\n }\n }\n } else {\n mic =\n anchor &&\n (anchor.querySelector('button[aria-label=\"Dictate button\"]') ||\n anchor.querySelector('button[aria-label*=\"mic\" i]') ||\n anchor.querySelector('button[aria-label*=\"voice\" i]'));\n }\n if (mic && anchor) {\n let child: Element | null = mic;\n while (child && child.parentElement !== anchor) {\n child = child.parentElement;\n }\n if (child && child.parentElement === anchor) {\n anchor.insertBefore(host, child);\n }\n host.style.marginRight = ''; // rely on container gap\n host.style.marginLeft = '';\n } else {\n host.style.marginLeft = '4px'; // mild fallback spacing\n }\n } catch (_e) {\n // Ignore errors during re-initialization\n }\n\n if (typeof updateNotificationDot === 'function') {\n setTimeout(updateNotificationDot, 0);\n }\n },\n });\n },\n persistCache: true,\n cacheTtlMs: 24 * 60 * 60 * 1000,\n });\n})();\n\nfunction getLastMessages(count: number): Array<{ role: MessageRole; content: string }> {\n const messageContainer = document.querySelector('.flex.flex-col.text-sm.md\\\\:pb-9');\n if (!messageContainer) {\n return [];\n }\n\n const messageElements = Array.from(messageContainer.children).reverse();\n const messages: Array<{ role: MessageRole; content: string }> = [];\n\n for (const element of messageElements) {\n if (messages.length >= count) {\n break;\n }\n\n const userElement = element.querySelector('[data-message-author-role=\"user\"]');\n const assistantElement = element.querySelector('[data-message-author-role=\"assistant\"]');\n\n if (userElement) {\n const content = userElement.querySelector('.whitespace-pre-wrap')?.textContent?.trim() || '';\n messages.unshift({ role: MessageRole.User, content });\n } else if (assistantElement) {\n const content = assistantElement.querySelector('.markdown')?.textContent?.trim() || '';\n messages.unshift({ role: MessageRole.Assistant, content });\n }\n }\n\n return messages;\n}\n\nfunction getInputValue(): string {\n const inputElement =\n (document.querySelector('#prompt-textarea') as HTMLTextAreaElement | HTMLDivElement) ||\n (document.querySelector('div[contenteditable=\"true\"]') as HTMLDivElement) ||\n (document.querySelector('textarea') as HTMLTextAreaElement);\n\n return inputElement\n ? inputElement.textContent || (inputElement as HTMLTextAreaElement)?.value || ''\n : '';\n}\n\nlet chatgptBackgroundSearchHandler: ((this: Element, ev: Event) => void) | null = null;\n\nfunction hookBackgroundSearchTyping() {\n const inputElement =\n document.querySelector('#prompt-textarea') ||\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea');\n if (!inputElement) {\n return;\n }\n\n if (inputElement.dataset.mem0BackgroundHooked) {\n return; \n }\n\n inputElement.dataset.mem0BackgroundHooked = 'true'; \n\n if (!chatgptBackgroundSearchHandler) {\n chatgptBackgroundSearchHandler = function () {\n const text = getInputValue() || '';\n console.log(\"Background search for:\", text); \n chatgptSearch.setText(text);\n };\n }\n inputElement.addEventListener(\n 'input',\n chatgptBackgroundSearchHandler as (this: Element, ev: Event) => void\n );\n inputElement.addEventListener(\n 'keyup',\n chatgptBackgroundSearchHandler as (this: Element, ev: Event) => void\n );\n}\n\nfunction addSyncButton(): void {\n const buttonContainer = document.querySelector('div.mt-5.flex.justify-end');\n if (buttonContainer) {\n let syncButton = document.querySelector('#sync-button') as HTMLButtonElement;\n\n // If the syncButton does not exist, create it\n if (!syncButton) {\n syncButton = document.createElement('button');\n syncButton.id = 'sync-button';\n syncButton.className = 'btn relative btn-neutral mr-2';\n syncButton.style.color = 'rgb(213, 213, 213)';\n syncButton.style.backgroundColor = 'transparent';\n syncButton.innerHTML =\n '
Sync Memory
';\n syncButton.style.border = '1px solid rgb(213, 213, 213)';\n syncButton.style.fontSize = '12px';\n syncButton.style.fontWeight = '500';\n // add margin right to syncButton\n syncButton.style.marginRight = '8px';\n\n const syncIcon = document.createElement('img');\n syncIcon.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n syncIcon.style.width = '16px';\n syncIcon.style.height = '16px';\n syncIcon.style.marginRight = '8px';\n\n syncButton.prepend(syncIcon);\n\n syncButton.addEventListener('click', handleSyncClick);\n\n syncButton.addEventListener('mouseenter', () => {\n if (!syncButton!.disabled) {\n syncButton!.style.filter = 'opacity(0.7)';\n }\n });\n syncButton.addEventListener('mouseleave', () => {\n if (!syncButton!.disabled) {\n syncButton!.style.filter = 'opacity(1)';\n }\n });\n }\n\n if (!buttonContainer.contains(syncButton)) {\n buttonContainer.insertBefore(syncButton, buttonContainer.firstChild);\n }\n\n // Update sync button state\n const updateSyncButtonState = (): void => {\n // Define when the sync button should be enabled or disabled\n (syncButton as HTMLButtonElement).disabled = false; // For example, always enabled\n // Update opacity or pointer events if needed\n if ((syncButton as HTMLButtonElement).disabled) {\n (syncButton as HTMLButtonElement).style.opacity = '0.5';\n (syncButton as HTMLButtonElement).style.pointerEvents = 'none';\n } else {\n (syncButton as HTMLButtonElement).style.opacity = '1';\n (syncButton as HTMLButtonElement).style.pointerEvents = 'auto';\n }\n };\n\n updateSyncButtonState();\n } else {\n // If resetMemoriesButton or specificTable is not found, remove syncButton from DOM\n const existingSyncButton = document.querySelector('#sync-button');\n if (existingSyncButton && existingSyncButton.parentNode) {\n existingSyncButton.parentNode.removeChild(existingSyncButton);\n }\n }\n}\n\nfunction handleSyncClick(): void {\n getMemoryEnabledState().then(memoryEnabled => {\n if (!memoryEnabled) {\n const btn = document.querySelector('#sync-button') as HTMLElement;\n if (btn) {\n showSyncPopup(btn, 'Memory is disabled');\n }\n return;\n }\n\n const table = document.querySelector('table.w-full.border-separate.border-spacing-0');\n const syncButton = document.querySelector('#sync-button') as HTMLButtonElement;\n\n if (table && syncButton) {\n const rows = table.querySelectorAll('tbody tr');\n const memories: Array<{ role: string; content: string }> = [];\n\n // Change sync button state to loading\n setSyncButtonLoadingState(true);\n\n let syncedCount = 0;\n const totalCount = rows.length;\n\n rows.forEach(row => {\n const cells = row.querySelectorAll('td');\n if (cells.length >= 1 && cells[0]) {\n const content =\n cells[0].querySelector('div.whitespace-pre-wrap')?.textContent?.trim() || '';\n\n const memory = {\n role: MessageRole.User,\n content: `Remember this about me: ${content}`,\n };\n\n memories.push(memory);\n\n sendMemoryToMem0(memory, false)\n .then(() => {\n syncedCount++;\n if (syncedCount === totalCount) {\n showSyncPopup(syncButton, `${syncedCount} memories synced`);\n setSyncButtonLoadingState(false);\n // Open the modal with memories after syncing\n // handleMem0Modal('sync-button');\n }\n })\n .catch(() => {\n if (syncedCount === totalCount) {\n showSyncPopup(syncButton, `${syncedCount}/${totalCount} memories synced`);\n setSyncButtonLoadingState(false);\n // Open the modal with memories after syncing\n // handleMem0Modal('sync-button');\n }\n });\n }\n });\n\n sendMemoriesToMem0(memories)\n .then(() => {\n if (syncButton) {\n showSyncPopup(syncButton, `${memories.length} memories synced`);\n }\n setSyncButtonLoadingState(false);\n // Open the modal with memories after syncing\n handleMem0Modal('sync-button');\n })\n .catch(error => {\n console.error('Error syncing memories:', error);\n if (syncButton) {\n showSyncPopup(syncButton, 'Error syncing memories');\n }\n setSyncButtonLoadingState(false);\n // Open the modal even if there was an error\n handleMem0Modal('sync-button');\n });\n } else {\n console.error('Table or Sync button not found');\n }\n });\n}\n\n// New function to send memories in batch\nfunction sendMemoriesToMem0(memories: Array<{ role: string; content: string }>): Promise {\n return new Promise((resolve, reject) => {\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n ],\n function (items) {\n if (items[StorageKey.API_KEY] || items[StorageKey.ACCESS_TOKEN]) {\n const authHeader = items[StorageKey.ACCESS_TOKEN]\n ? `Bearer ${items[StorageKey.ACCESS_TOKEN]}`\n : `Token ${items[StorageKey.API_KEY]}`;\n const userId =\n items[StorageKey.USER_ID_CAMEL] || items[StorageKey.USER_ID] || DEFAULT_USER_ID;\n\n const optionalParams: OptionalApiParams = {};\n if (items[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = items[StorageKey.SELECTED_ORG];\n }\n if (items[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = items[StorageKey.SELECTED_PROJECT];\n }\n\n fetch('https://api.mem0.ai/v1/memories/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: authHeader,\n },\n body: JSON.stringify({\n messages: memories,\n user_id: userId,\n infer: true,\n metadata: {\n provider: 'ChatGPT',\n },\n source: 'OPENMEMORY_CHROME_EXTENSION',\n ...optionalParams,\n }),\n })\n .then(response => {\n if (!response.ok) {\n reject(`Failed to add memories: ${response.status}`);\n } else {\n resolve();\n }\n })\n .catch(error => reject(`Error sending memories to Mem0: ${error}`));\n } else {\n reject('API Key/Access Token not set');\n }\n }\n );\n });\n}\n\nfunction setSyncButtonLoadingState(isLoading: boolean): void {\n const syncButton = document.querySelector('#sync-button') as HTMLButtonElement;\n const syncButtonContent = document.querySelector('#sync-button-content') as HTMLElement;\n if (syncButton) {\n if (isLoading) {\n syncButton.disabled = true;\n syncButton.style.cursor = 'wait';\n document.body.style.cursor = 'wait';\n syncButton.style.opacity = '0.7';\n if (syncButtonContent) {\n syncButtonContent.textContent = 'Syncing...';\n }\n } else {\n syncButton.disabled = false;\n syncButton.style.cursor = 'pointer';\n syncButton.style.opacity = '1';\n document.body.style.cursor = 'default';\n if (syncButtonContent) {\n syncButtonContent.textContent = 'Sync Memory';\n }\n }\n }\n}\n\nfunction showSyncPopup(button: HTMLElement, message: string): void {\n const popup = document.createElement('div');\n\n // Create and add the (i) icon\n const infoIcon = document.createElement('span');\n infoIcon.textContent = 'ⓘ ';\n infoIcon.style.marginRight = '3px';\n\n popup.appendChild(infoIcon);\n popup.appendChild(document.createTextNode(message));\n\n popup.style.cssText = `\n position: absolute;\n top: 50%;\n left: -160px;\n transform: translateY(-50%);\n background-color: #171717;\n color: white;\n padding: 6px 8px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 1000;\n `;\n\n button.style.position = 'relative';\n button.appendChild(popup);\n\n setTimeout(() => {\n popup.remove();\n }, 3000);\n}\n\nfunction sendMemoryToMem0(\n memory: { role: string; content: string },\n infer: boolean = true\n): Promise {\n return new Promise((resolve, reject) => {\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n ],\n function (items) {\n if (items[StorageKey.API_KEY] || items[StorageKey.ACCESS_TOKEN]) {\n const authHeader = items[StorageKey.ACCESS_TOKEN]\n ? `Bearer ${items[StorageKey.ACCESS_TOKEN]}`\n : `Token ${items[StorageKey.API_KEY]}`;\n const userId =\n items[StorageKey.USER_ID_CAMEL] || items[StorageKey.USER_ID] || DEFAULT_USER_ID;\n\n const optionalParams: OptionalApiParams = {};\n if (items[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = items[StorageKey.SELECTED_ORG];\n }\n if (items[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = items[StorageKey.SELECTED_PROJECT];\n }\n\n fetch('https://api.mem0.ai/v1/memories/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: authHeader,\n },\n body: JSON.stringify({\n messages: [{ content: memory.content, role: MessageRole.User }],\n user_id: userId,\n infer: infer,\n metadata: {\n provider: 'ChatGPT',\n },\n source: 'OPENMEMORY_CHROME_EXTENSION',\n ...optionalParams,\n }),\n })\n .then(response => {\n if (!response.ok) {\n reject(`Failed to add memory: ${response.status}`);\n } else {\n resolve();\n }\n })\n .catch(error => reject(`Error sending memory to Mem0: ${error}`));\n } else {\n reject('API Key/Access Token not set');\n }\n }\n );\n });\n}\n\n// Add this new function to get the memory_enabled state\nfunction getMemoryEnabledState(): Promise {\n return new Promise(resolve => {\n chrome.storage.sync.get([StorageKey.MEMORY_ENABLED], function (result) {\n resolve(result.memory_enabled !== false); // Default to true if not set\n });\n });\n}\n\n// Returns whether auto-inject is enabled (default: false if not present)\n// (auto-inject helpers removed)\n\n// Update the initialization function to add the Mem0 icon button but not intercept Enter key\nfunction initializeMem0Integration(): void {\n document.addEventListener('DOMContentLoaded', () => {\n addSyncButton();\n // (async () => await addMem0IconButton())();\n addSendButtonListener();\n // (async () => await updateNotificationDot())();\n hookBackgroundSearchTyping();\n setupAutoInjectPrefetch();\n });\n\n document.addEventListener('keydown', function (event) {\n if (event.ctrlKey && event.key === 'm') {\n event.preventDefault();\n (async () => {\n await handleMem0Modal('mem0-icon-button');\n })();\n }\n });\n\n // Remove global Enter interception previously added for auto-inject\n\n observer = new MutationObserver(() => {\n addSyncButton();\n // (async () => await addMem0IconButton())();\n addSendButtonListener();\n // (async () => await updateNotificationDot())();\n hookBackgroundSearchTyping();\n setupAutoInjectPrefetch();\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n\n // Add a MutationObserver to watch for changes in the DOM but don't intercept Enter key\n const observerForUI = new MutationObserver(() => {\n // (async () => await addMem0IconButton())();\n addSendButtonListener();\n // (async () => await updateNotificationDot())();\n hookBackgroundSearchTyping();\n setupAutoInjectPrefetch();\n });\n\n observerForUI.observe(document.body, {\n childList: true,\n subtree: true,\n });\n}\n\n// (global auto-inject interceptors removed)\n\n// Function to show login popup\nfunction showLoginPopup() {\n // First remove any existing popups\n const existingPopup = document.querySelector('#mem0-login-popup');\n if (existingPopup) {\n existingPopup.remove();\n }\n\n // Create popup container\n const popupOverlay = document.createElement('div');\n popupOverlay.id = 'mem0-login-popup';\n popupOverlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10001;\n `;\n\n const popupContainer = document.createElement('div');\n popupContainer.style.cssText = `\n background-color: #1C1C1E;\n border-radius: 12px;\n width: 320px;\n padding: 24px;\n color: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n `;\n\n // Close button\n const closeButton = document.createElement('button');\n closeButton.style.cssText = `\n position: absolute;\n top: 16px;\n right: 16px;\n background: none;\n border: none;\n color: #A1A1AA;\n font-size: 16px;\n cursor: pointer;\n `;\n closeButton.innerHTML = '×';\n closeButton.addEventListener('click', () => {\n document.body.removeChild(popupOverlay);\n });\n\n // Logo and heading\n const logoContainer = document.createElement('div');\n logoContainer.style.cssText = `\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n `;\n\n const logo = document.createElement('img');\n logo.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n logo.style.cssText = `\n width: 24px;\n height: 24px;\n border-radius: 50%;\n margin-right: 12px;\n `;\n\n const logoDark = document.createElement('img');\n logoDark.src = chrome.runtime.getURL('icons/mem0-icon-black.png');\n logoDark.style.cssText = `\n width: 24px;\n height: 24px;\n border-radius: 50%;\n margin-right: 12px;\n `;\n\n const heading = document.createElement('h2');\n heading.textContent = 'Sign in to OpenMemory';\n heading.style.cssText = `\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n `;\n\n logoContainer.appendChild(heading);\n\n // Message\n const message = document.createElement('p');\n message.textContent =\n 'Please sign in to access your memories and personalize your conversations!';\n message.style.cssText = `\n margin-bottom: 24px;\n color: #D4D4D8;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n `;\n\n // Sign in button\n const signInButton = document.createElement('button');\n signInButton.style.cssText = `\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 10px;\n background-color: white;\n color: black;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s;\n `;\n\n // Add text in span for better centering\n const signInText = document.createElement('span');\n signInText.textContent = 'Sign in with Mem0';\n\n signInButton.appendChild(logoDark);\n signInButton.appendChild(signInText);\n\n signInButton.addEventListener('mouseenter', () => {\n signInButton.style.backgroundColor = '#f5f5f5';\n });\n\n signInButton.addEventListener('mouseleave', () => {\n signInButton.style.backgroundColor = 'white';\n });\n\n // Open sign-in page when clicked\n signInButton.addEventListener('click', () => {\n window.open('https://app.mem0.ai/login', '_blank');\n document.body.removeChild(popupOverlay);\n });\n\n // Assemble popup\n popupContainer.appendChild(logoContainer);\n popupContainer.appendChild(message);\n popupContainer.appendChild(signInButton);\n\n popupOverlay.appendChild(popupContainer);\n popupOverlay.appendChild(closeButton);\n\n // Add click event to close when clicking outside\n popupOverlay.addEventListener('click', e => {\n if (e.target === popupOverlay) {\n document.body.removeChild(popupOverlay);\n }\n });\n\n // Add to body\n document.body.appendChild(popupOverlay);\n}\n\ninitializeMem0Integration();\n// --- SPA navigation handling and extension context guard (mirrors Claude) ---\nlet chatgptExtensionContextValid = true;\nlet chatgptCurrentUrl = window.location.href;\n\nfunction chatgptCheckExtensionContext() {\n try {\n // chrome.runtime may throw if context invalidated\n // Using optional chaining to avoid ReferenceError\n // lastError exists only after an API call; treat presence of runtime as validity\n const isValid = !!(chrome && chrome.runtime);\n if (chatgptExtensionContextValid && !isValid) {\n chatgptExtensionContextValid = false;\n }\n return isValid;\n } catch {\n chatgptExtensionContextValid = false;\n return false;\n }\n}\n\nfunction chatgptDetectNavigation() {\n const newUrl = window.location.href;\n if (newUrl !== chatgptCurrentUrl) {\n chatgptCurrentUrl = newUrl;\n\n // Re-initialize UI after small delay for DOM to settle\n setTimeout(() => {\n try {\n addSyncButton();\n // (async () => await addMem0IconButton())();\n addSendButtonListener();\n // (async () => await updateNotificationDot())();\n } catch {\n // Ignore errors when setting contenteditable\n }\n }, 300);\n }\n}\n\n// Poll for SPA navigations and context validity\nsetInterval(() => {\n chatgptCheckExtensionContext();\n chatgptDetectNavigation();\n}, 1000);\n\n// Hook browser history navigation\nwindow.addEventListener('popstate', () => setTimeout(chatgptDetectNavigation, 100));\nconst chatgptOriginalPushState = history.pushState;\nhistory.pushState = function (data: HistoryStateData, unused: string, url?: string | URL | null) {\n chatgptOriginalPushState.call(history, data, unused, url);\n setTimeout(chatgptDetectNavigation, 100);\n};\nconst chatgptOriginalReplaceState = history.replaceState;\nhistory.replaceState = function (\n data: HistoryStateData,\n unused: string,\n url?: string | URL | null\n) {\n chatgptOriginalReplaceState.call(history, data, unused, url);\n setTimeout(chatgptDetectNavigation, 100);\n};\n"
},
{
"path": "src/claude/content.ts",
"content": "import { MessageRole } from '../types/api';\nimport type { HistoryStateData } from '../types/browser';\nimport type { ExtendedDocument, ExtendedElement } from '../types/dom';\nimport type { MemoryItem, MemorySearchItem, OptionalApiParams } from '../types/memory';\nimport { SidebarAction } from '../types/messages';\nimport { type StorageData, StorageKey } from '../types/storage';\nimport { createOrchestrator, type SearchStorage } from '../utils/background_search';\nimport { OPENMEMORY_PROMPTS } from '../utils/llm_prompts';\nimport { SITE_CONFIG } from '../utils/site_config';\nimport { getBrowser, sendExtensionEvent } from '../utils/util_functions';\nimport { OPENMEMORY_UI, type Placement } from '../utils/util_positioning';\n\n// Chrome runtime types\ninterface ChromeRuntimeLastError {\n message?: string;\n}\n\ninterface ChromeRuntimeWithLastError {\n lastError?: ChromeRuntimeLastError;\n}\n\ninterface ChromeRuntime extends ChromeRuntimeWithLastError {\n // Add other chrome.runtime properties as needed\n}\n\nexport {};\n\n// Global variables to store all memories\nlet allMemories: string[] = [];\nlet memoryModalShown: boolean = false;\nlet isProcessingMem0: boolean = false;\nlet memoryEnabled: boolean = true;\n\n// Cache of the latest typed text to avoid race when the editor is cleared\nlet lastTyped = '';\n// Timestamp of when a send was initiated (to prevent duplicate fallback posts)\nlet lastSendInitiatedAt = 0;\n\nlet currentModalSourceButtonId: string | null = null;\n\nconst claudeSearch = createOrchestrator({\n fetch: async function (query: string, opts: { signal?: AbortSignal }) {\n const data = await new Promise(resolve => {\n chrome.storage.sync.get(\n [\n StorageKey.API_KEY,\n StorageKey.USER_ID_CAMEL,\n StorageKey.ACCESS_TOKEN,\n StorageKey.SELECTED_ORG,\n StorageKey.SELECTED_PROJECT,\n StorageKey.USER_ID,\n StorageKey.SIMILARITY_THRESHOLD,\n StorageKey.TOP_K,\n ],\n function (items) {\n resolve(items as SearchStorage);\n }\n );\n });\n\n const apiKey = data[StorageKey.API_KEY];\n const accessToken = data[StorageKey.ACCESS_TOKEN];\n if (!apiKey && !accessToken) {\n return [];\n }\n\n const authHeader = accessToken ? `Bearer ${accessToken}` : `Token ${apiKey}`;\n const userId =\n data[StorageKey.USER_ID_CAMEL] || data[StorageKey.USER_ID] || 'chrome-extension-user';\n const threshold =\n data[StorageKey.SIMILARITY_THRESHOLD] !== undefined\n ? data[StorageKey.SIMILARITY_THRESHOLD]\n : 0.1;\n const topK = data[StorageKey.TOP_K] !== undefined ? data[StorageKey.TOP_K] : 10;\n\n const optionalParams: OptionalApiParams = {};\n if (data[StorageKey.SELECTED_ORG]) {\n optionalParams.org_id = data[StorageKey.SELECTED_ORG];\n }\n if (data[StorageKey.SELECTED_PROJECT]) {\n optionalParams.project_id = data[StorageKey.SELECTED_PROJECT];\n }\n\n // Clean query by stripping any appended memory header/content (debounced path)\n const cleanQuery = (function () {\n try {\n const MEM0_PLAIN = OPENMEMORY_PROMPTS.memory_header_plain_regex;\n return String(query).replace(MEM0_PLAIN, '').trim();\n } catch (_e) {\n return query;\n }\n })();\n\n const payload = {\n query: cleanQuery,\n filters: { user_id: userId },\n rerank: true,\n threshold,\n top_k: topK,\n filter_memories: false,\n source: 'OPENMEMORY_CHROME_EXTENSION',\n ...optionalParams,\n };\n\n const res = await fetch('https://api.mem0.ai/v2/memories/search/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: authHeader,\n },\n body: JSON.stringify(payload),\n signal: opts && opts.signal,\n });\n\n if (!res.ok) {\n throw new Error(`API request failed with status ${res.status}`);\n }\n return await res.json();\n },\n\n onSuccess: function (normQuery: string, responseData: MemorySearchItem[]) {\n if (!memoryModalShown) {\n return;\n }\n const memoryItems = (responseData || []).map((item: MemorySearchItem, index: number) => ({\n id: String(item.id || `memory-${Date.now()}-${index}`),\n text: item.memory,\n categories: item.categories || [],\n }));\n createMemoryModal(memoryItems, false, currentModalSourceButtonId);\n },\n\n onError: function () {\n if (memoryModalShown) {\n createMemoryModal([], false, currentModalSourceButtonId);\n }\n },\n\n minLength: 3,\n debounceMs: 75,\n cacheTTL: 60000,\n});\n\n// Sliding window for conversation context\nlet conversationHistory: Array<{ role: MessageRole; content: string; timestamp: number }> = [];\nconst MAX_CONVERSATION_HISTORY = 12; // Keep last 12 messages (6 pairs of user/assistant)\n\n// Function to add message to conversation history with sliding window\nfunction addToConversationHistory(role: MessageRole, content: string) {\n if (!content || !content.trim()) {\n return;\n }\n\n const trimmedContent = content.trim();\n\n // Check for duplicate - don't add if the last message is identical\n if (conversationHistory.length > 0) {\n const lastMessage = conversationHistory[conversationHistory.length - 1];\n if (lastMessage && lastMessage.role === role && lastMessage.content === trimmedContent) {\n return;\n }\n }\n\n const message = {\n role: role,\n content: trimmedContent,\n timestamp: Date.now(),\n };\n\n // Add to history\n conversationHistory.push(message);\n\n // Maintain sliding window - remove oldest messages if we exceed limit\n if (conversationHistory.length > MAX_CONVERSATION_HISTORY) {\n conversationHistory.splice(0, conversationHistory.length - MAX_CONVERSATION_HISTORY);\n }\n}\n\n// Function to get conversation context for memory creation\nfunction getConversationContext(includeCurrent: boolean = true) {\n if (conversationHistory.length === 0) {\n return [];\n }\n\n // Get the last 6 messages for context (excluding current if requested)\n const contextSize = 6;\n let contextMessages = [...conversationHistory];\n\n if (!includeCurrent && contextMessages.length > 0) {\n // Remove the last message if it's the current user message\n contextMessages = contextMessages.slice(0, -1);\n }\n\n // Get last N messages\n const context = contextMessages.slice(-contextSize).map(msg => ({\n role: msg.role,\n content: msg.content,\n }));\n\n return context;\n}\n\n// Function to initialize conversation history from existing messages on page\nfunction initializeConversationHistoryFromDOM() {\n const messageContainer = document.querySelector(\n '.flex-1.flex.flex-col.gap-3.px-4.max-w-3xl.mx-auto.w-full'\n );\n\n if (!messageContainer) {\n return;\n }\n\n const messageElements = Array.from(messageContainer.children);\n\n // Process existing messages in chronological order\n messageElements.forEach(element => {\n const userElement = element.querySelector('.font-user-message');\n const assistantElement = element.querySelector('.font-claude-message');\n\n if (userElement) {\n const content = (userElement.textContent || '').trim();\n if (content) {\n addToConversationHistory(MessageRole.User, content);\n }\n } else if (assistantElement) {\n const content = (assistantElement.textContent || '').trim();\n if (content) {\n addToConversationHistory(MessageRole.Assistant, content);\n }\n }\n });\n}\n\n// Initialize the MutationObserver variable\n// let observer: MutationObserver;\n// let inputObserver: MutationObserver;\n// let debounceTimer: number | undefined;\n\n// Track added memories by ID\nconst allMemoriesById: Set = new Set();\n\n// Reference to the modal overlay for updates\nlet currentModalOverlay:\n | HTMLDivElement\n | (HTMLDivElement & { _cleanupDragEvents?: () => void })\n | null = null;\n\n// Track the current modal container and placement cleanup\nlet currentModalContainer: HTMLDivElement | null = null;\nlet currentModalUnplace: (() => void) | null = null;\n\n// Function to get memory enabled state from storage\nasync function getMemoryEnabledState() {\n return new Promise(resolve => {\n // Check if extension context is valid\n if (!chrome || !chrome.storage || !chrome.storage.sync) {\n console.log('⚠️ Chrome extension context invalid, defaulting to enabled');\n resolve(true); // Default to enabled if we can't check\n return;\n }\n\n try {\n chrome.storage.sync.get(StorageKey.MEMORY_ENABLED, function (data) {\n try {\n // @ts-ignore\n if (chrome.runtime && chrome.runtime.lastError) {\n console.log(\n '⚠️ Chrome storage error, defaulting to enabled:',\n (chrome.runtime as ChromeRuntime).lastError\n );\n resolve(true); // Default to enabled if error\n return;\n }\n console.log('🧠 Memory enabled from storage:', data.memory_enabled);\n resolve(data.memory_enabled);\n } catch {\n // Ignore errors when checking chrome.runtime.lastError\n }\n });\n } catch (error) {\n console.log('⚠️ Exception getting memory state, defaulting to enabled:', error);\n resolve(true); // Default to enabled if exception\n }\n });\n}\n\n// Function to remove mem0 button if it exists\nfunction removeMemButton(): void {\n const mem0Button = document.querySelector('#mem0-button');\n if (mem0Button) {\n const buttonContainer = mem0Button.closest('div');\n if (buttonContainer) {\n buttonContainer.remove();\n } else {\n mem0Button.remove();\n }\n }\n\n // Also remove tooltip if it exists\n const tooltip = document.querySelector('#mem0-tooltip');\n if (tooltip) {\n tooltip.remove();\n }\n}\n\n// function addMem0Button(): void {\n// // Legacy addMem0Button removed; OPENMEMORY_UI handles icon mounting\n// }\n\nfunction createPopup(container: HTMLElement, position: string = 'top'): HTMLElement {\n const popup = document.createElement('div');\n popup.className = 'mem0-popup';\n let positionStyles = '';\n\n if (position === 'top') {\n positionStyles = `\n bottom: 100%;\n left: 50%;\n transform: translateX(-40%);\n margin-bottom: 11px;\n `;\n } else if (position === 'right') {\n positionStyles = `\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n margin-left: 11px;\n `;\n }\n\n popup.style.cssText = `\n display: none;\n position: absolute;\n background-color: #21201C;\n color: white;\n padding: 6px 8px;\n border-radius: 6px;\n font-size: 12px;\n z-index: 10000;\n white-space: nowrap;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n ${positionStyles}\n `;\n container.appendChild(popup);\n return popup;\n}\n\nconst sendButton = document.querySelector('button[aria-label=\"Send Message\"]');\nconst sendUpButton = document.querySelector('button[aria-label=\"Send message\"]');\nconst screenshotButton = document.querySelector('button[aria-label=\"Capture screenshot\"]');\nconst inputToolsMenuButton = document.querySelector('#input-tools-menu-trigger');\n\n// Check for any existing mem0 buttons before creating legacy button\nconst hasAnyMem0Button =\n document.querySelector('#mem0-button') ||\n document.getElementById('mem0-icon-button') ||\n document.querySelector('[id*=\"mem0\"], .mem0-btn');\n\nif (inputToolsMenuButton && !hasAnyMem0Button) {\n const buttonContainer = document.createElement('div');\n buttonContainer.style.position = 'relative';\n buttonContainer.style.display = 'inline-block';\n\n const mem0Button = document.createElement('button');\n mem0Button.id = 'mem0-button';\n mem0Button.className = inputToolsMenuButton.className;\n mem0Button.style.marginLeft = '0px';\n mem0Button.setAttribute('aria-label', 'Add memories to your prompt');\n\n const mem0Icon = document.createElement('img');\n mem0Icon.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n mem0Icon.style.width = '16px';\n mem0Icon.style.height = '16px';\n mem0Icon.style.borderRadius = '50%';\n\n const popup = createPopup(buttonContainer, 'top');\n mem0Button.appendChild(mem0Icon);\n mem0Button.addEventListener('click', () => {\n if (memoryEnabled) {\n // Hide the tooltip if it's showing\n const tooltip = document.querySelector('#mem0-tooltip');\n if (tooltip) {\n tooltip.style.display = 'none';\n }\n handleMem0Modal(popup);\n }\n });\n\n // Create notification dot\n const notificationDot = document.createElement('div');\n notificationDot.id = 'mem0-notification-dot';\n notificationDot.style.cssText = `\n position: absolute;\n top: -3px;\n right: -3px;\n width: 10px;\n height: 10px;\n background-color: rgb(128, 221, 162);\n border-radius: 50%;\n border: 2px solid #1C1C1E;\n display: none;\n z-index: 1001;\n pointer-events: none;\n `;\n mem0Button.appendChild(notificationDot);\n\n // Add keyframe animation for the dot\n if (!document.getElementById('notification-dot-animation')) {\n const style = document.createElement('style');\n style.id = 'notification-dot-animation';\n style.innerHTML = `\n @keyframes popIn {\n 0% { transform: scale(0); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n \n #mem0-notification-dot.active {\n display: block !important;\n animation: popIn 0.3s ease-out forwards;\n }\n `;\n document.head.appendChild(style);\n }\n\n buttonContainer.appendChild(mem0Button);\n\n const tooltip = document.createElement('div');\n tooltip.id = 'mem0-tooltip';\n tooltip.textContent = 'Add memories to your prompt';\n tooltip.style.cssText = `\n display: none;\n position: fixed;\n background-color: black;\n color: white;\n padding: 3px 7px;\n border-radius: 6px;\n font-size: 12px;\n z-index: 10000;\n pointer-events: none;\n white-space: nowrap;\n transform: translateX(-50%);\n `;\n document.body.appendChild(tooltip);\n\n mem0Button.addEventListener('mouseenter', () => {\n // Hide any existing popup first\n const existingMem0Popup = document.querySelector('.mem0-popup[style*=\"display: block\"]');\n if (existingMem0Popup && existingMem0Popup !== popup) {\n existingMem0Popup.style.display = 'none';\n }\n\n const rect = mem0Button.getBoundingClientRect();\n const buttonCenterX = rect.left + rect.width / 2;\n\n // Set initial tooltip properties\n tooltip.style.display = 'block';\n\n // Once displayed, we can get its height and set proper positioning\n const tooltipHeight = (tooltip as HTMLElement).offsetHeight || 24; // Default height if not yet rendered\n\n tooltip.style.left = `${buttonCenterX}px`;\n tooltip.style.top = `${rect.top - tooltipHeight - 10}px`; // Position 10px above button\n });\n\n mem0Button.addEventListener('mouseleave', () => {\n tooltip.style.display = 'none';\n });\n\n // Find the parent container to place the button at the same level as input-tools-menu\n const parentContainer =\n inputToolsMenuButton.closest('.relative.flex-1.flex.items-center.gap-2') ||\n inputToolsMenuButton.closest('.relative.flex-1') ||\n ((inputToolsMenuButton.parentNode as HTMLElement)?.parentNode?.parentNode?.parentNode\n ?.parentNode as HTMLElement);\n\n if (parentContainer) {\n // Find the third position in the container - after the first two divs\n // Looking for the flex-row div to insert before it\n const flexRowDiv = parentContainer.querySelector('.flex.flex-row.items-center.gap-2.min-w-0');\n\n // Find the tools div that we want to position after\n const toolsDiv = inputToolsMenuButton.closest('div > div > div > div')?.parentNode?.parentNode;\n\n // Make sure our button is the third div in the container\n if (flexRowDiv && toolsDiv) {\n // Insert right after the tools div and before the flex-row div\n parentContainer.insertBefore(buttonContainer, flexRowDiv);\n } else {\n // Fallback to just append to the parent\n parentContainer.appendChild(buttonContainer);\n }\n } else {\n // Fallback to original behavior if parent not found\n inputToolsMenuButton.parentNode?.insertBefore(\n buttonContainer,\n inputToolsMenuButton.nextSibling\n );\n }\n\n // Update notification dot\n updateNotificationDot();\n} else if (\n window.location.href.includes('claude.ai/new') &&\n screenshotButton &&\n !hasAnyMem0Button\n) {\n const buttonContainer = document.createElement('div');\n buttonContainer.style.position = 'relative';\n buttonContainer.style.display = 'inline-block';\n\n const mem0Button = document.createElement('button');\n mem0Button.id = 'mem0-button';\n mem0Button.className = screenshotButton.className;\n mem0Button.style.marginLeft = '0px';\n mem0Button.setAttribute('aria-label', 'Add memories to your prompt');\n\n const mem0Icon = document.createElement('img');\n mem0Icon.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n mem0Icon.style.width = '16px';\n mem0Icon.style.height = '16px';\n mem0Icon.style.borderRadius = '50%';\n\n const popup = createPopup(buttonContainer, 'right');\n mem0Button.appendChild(mem0Icon);\n mem0Button.addEventListener('click', () => {\n if (memoryEnabled) {\n // Hide the tooltip if it's showing\n const tooltip = document.querySelector('#mem0-tooltip');\n if (tooltip) {\n tooltip.style.display = 'none';\n }\n\n handleMem0Modal(popup);\n }\n });\n\n // Create notification dot\n const notificationDot = document.createElement('div');\n notificationDot.id = 'mem0-notification-dot';\n notificationDot.style.cssText = `\n position: absolute;\n top: -3px;\n right: -3px;\n width: 10px;\n height: 10px;\n background-color: rgb(128, 221, 162);\n border-radius: 50%;\n border: 2px solid #1C1C1E;\n display: none;\n z-index: 1001;\n pointer-events: none;\n `;\n mem0Button.appendChild(notificationDot);\n\n buttonContainer.appendChild(mem0Button);\n\n const tooltip = document.createElement('div');\n tooltip.id = 'mem0-tooltip';\n tooltip.textContent = 'Add memories to your prompt';\n tooltip.style.cssText = `\n display: none;\n position: fixed;\n background-color: black;\n color: white;\n padding: 3px 7px;\n border-radius: 6px;\n font-size: 12px;\n z-index: 10000;\n pointer-events: none;\n white-space: nowrap;\n transform: translateX(-50%);\n `;\n document.body.appendChild(tooltip);\n\n mem0Button.addEventListener('mouseenter', () => {\n // Hide any existing popup first\n const existingMem0Popup = document.querySelector('.mem0-popup[style*=\"display: block\"]');\n if (existingMem0Popup && existingMem0Popup !== popup) {\n existingMem0Popup.style.display = 'none';\n }\n\n const rect = mem0Button.getBoundingClientRect();\n const buttonCenterX = rect.left + rect.width / 2;\n\n // Set initial tooltip properties\n tooltip.style.display = 'block';\n\n // Once displayed, we can get its height and set proper positioning\n const tooltipHeight = tooltip.offsetHeight || 24; // Default height if not yet rendered\n\n tooltip.style.left = `${buttonCenterX}px`;\n tooltip.style.top = `${rect.top - tooltipHeight - 10}px`; // Position 10px above button\n });\n\n mem0Button.addEventListener('mouseleave', () => {\n tooltip.style.display = 'none';\n });\n\n screenshotButton.parentNode?.insertBefore(buttonContainer, screenshotButton.nextSibling);\n\n // Update notification dot\n updateNotificationDot();\n} else if ((sendButton || sendUpButton) && !hasAnyMem0Button) {\n const targetButton = sendButton || sendUpButton;\n if (targetButton) {\n // Find the parent container of the send button\n const buttonParent = targetButton.parentNode;\n if (buttonParent) {\n const buttonContainer = document.createElement('div');\n buttonContainer.style.position = 'relative';\n buttonContainer.style.display = 'inline-block';\n buttonContainer.style.marginRight = '12px';\n\n const mem0Button = document.createElement('button');\n mem0Button.id = 'mem0-button';\n mem0Button.style.cssText = `\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: none;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n transition: background-color 0.3s ease;\n `;\n mem0Button.setAttribute('aria-label', 'Add memories to your prompt');\n\n const mem0Icon = document.createElement('img');\n mem0Icon.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n mem0Icon.style.width = '20px';\n mem0Icon.style.height = '20px';\n mem0Icon.style.borderRadius = '50%';\n\n // Create notification dot\n const notificationDot = document.createElement('div');\n notificationDot.id = 'mem0-notification-dot';\n notificationDot.style.cssText = `\n position: absolute;\n top: 0px;\n right: 0px;\n width: 10px;\n height: 10px;\n background-color: rgb(128, 221, 162);\n border-radius: 50%;\n border: 2px solid #1C1C1E;\n display: none;\n z-index: 1001;\n pointer-events: none;\n `;\n const popup = createPopup(buttonContainer, 'top');\n mem0Button.appendChild(mem0Icon);\n mem0Button.appendChild(notificationDot);\n mem0Button.addEventListener('click', () => {\n if (memoryEnabled) {\n // Hide the tooltip if it's showing\n const tooltip = document.querySelector('#mem0-tooltip');\n if (tooltip) {\n tooltip.style.display = 'none';\n }\n\n handleMem0Modal(popup);\n }\n });\n\n const tooltip = document.createElement('div');\n tooltip.id = 'mem0-tooltip';\n tooltip.textContent = 'Add memories to your prompt';\n tooltip.style.cssText = `\n display: none;\n position: fixed;\n background-color: black;\n color: white;\n padding: 3px 7px;\n border-radius: 6px;\n font-size: 12px;\n z-index: 10000;\n pointer-events: none;\n white-space: nowrap;\n transform: translateX(-50%);\n `;\n document.body.appendChild(tooltip);\n\n mem0Button.addEventListener('mouseenter', () => {\n // Hide any existing popup first\n const existingMem0Popup = document.querySelector('.mem0-popup[style*=\"display: block\"]');\n if (existingMem0Popup && existingMem0Popup !== popup) {\n existingMem0Popup.style.display = 'none';\n }\n\n const rect = mem0Button.getBoundingClientRect();\n const buttonCenterX = rect.left + rect.width / 2;\n\n // Set initial tooltip properties\n tooltip.style.display = 'block';\n\n // Once displayed, we can get its height and set proper positioning\n const tooltipHeight = tooltip.offsetHeight || 24; // Default height if not yet rendered\n\n tooltip.style.left = `${buttonCenterX}px`;\n tooltip.style.top = `${rect.top - tooltipHeight - 10}px`; // Position 10px above button\n });\n\n mem0Button.addEventListener('mouseleave', () => {\n mem0Button.style.backgroundColor = 'transparent';\n popup.style.display = 'none';\n });\n\n // Set popover text\n popup.textContent = 'Add memories to your prompt';\n\n buttonContainer.appendChild(mem0Button);\n\n // Insert the button before the send button\n if (buttonParent.querySelector('button[aria-label=\"Send message\"]')) {\n buttonParent.insertBefore(\n buttonContainer,\n buttonParent.querySelector('button[aria-label=\"Send message\"]')\n );\n } else {\n buttonParent.insertBefore(buttonContainer, targetButton);\n }\n\n // Update notification dot\n updateNotificationDot();\n }\n }\n}\n\n// Send button listeners are now handled in initializeMem0Integration for better reliability\n\n// Also handle Enter key press for sending messages\nconst inputElement =\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea') ||\n document.querySelector('p[data-placeholder=\"How can I help you today?\"]') ||\n document.querySelector('p[data-placeholder=\"Reply to Claude...\"]');\n\nif (inputElement && !inputElement.dataset.mem0KeyListener) {\n inputElement.dataset.mem0KeyListener = 'true';\n inputElement.addEventListener('keydown', function (event: Event) {\n const keyboardEvent = event as KeyboardEvent;\n // Check if Enter was pressed without Shift (standard send behavior)\n if (\n keyboardEvent.key === 'Enter' &&\n !keyboardEvent.shiftKey &&\n !keyboardEvent.ctrlKey &&\n !keyboardEvent.metaKey\n ) {\n // Don't process for textarea which may want newlines\n if (inputElement.tagName.toLowerCase() !== 'textarea') {\n // Snapshot before send\n const current = getInputValue();\n if (current && current.trim() !== '') {\n lastTyped = current;\n }\n lastSendInitiatedAt = Date.now();\n // Capture and save memory asynchronously\n captureAndStoreMemory(lastTyped);\n\n // Clear all memories after sending\n setTimeout(() => {\n allMemories = [];\n allMemoriesById.clear();\n }, 100);\n }\n }\n });\n // Keep a live cache during typing to improve reliability\n if (!inputElement.dataset.mem0CacheListener) {\n inputElement.dataset.mem0CacheListener = 'true';\n const updateCache = () => {\n const val = getInputValue();\n if (val && val.trim() !== '') {\n lastTyped = val;\n }\n };\n inputElement.addEventListener('input', updateCache, true);\n inputElement.addEventListener('compositionend', updateCache, true);\n }\n}\n\n// Update notification dot state\nupdateNotificationDot();\n\n// Using MemoryItem from src/types/content-scripts.ts\n\nfunction createMemoryModal(\n memoryItems: MemoryItem[],\n isLoading: boolean = false,\n sourceButtonId: string | null = null\n): void {\n console.log('🎯 createMemoryModal called', {\n memoryItems,\n isLoading,\n sourceButtonId,\n memoryModalShown,\n });\n // Close existing modal if it exists\n if (memoryModalShown) {\n console.log('🗂️ Closing existing modal');\n try {\n if (typeof currentModalUnplace === 'function') {\n currentModalUnplace();\n }\n } catch {\n // Ignore error\n }\n if (currentModalContainer && currentModalContainer.isConnected) {\n try {\n currentModalContainer.remove();\n } catch {\n // Ignore error\n }\n }\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n }\n }\n\n memoryModalShown = true;\n console.log('✅ Modal state set to shown');\n let currentMemoryIndex = 0;\n\n // Calculate modal dimensions (estimated)\n const modalWidth = 447;\n let modalHeight = 400; // Default height\n let memoriesPerPage = 3; // Default number of memories per page\n\n // Resolve anchor element\n function resolveAnchor() {\n if (sourceButtonId) {\n const byId = document.getElementById(sourceButtonId);\n if (byId) {\n return byId;\n }\n }\n\n const iconBtn = document.querySelector('#mem0-icon-button');\n if (iconBtn) {\n return iconBtn;\n }\n return (\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea') ||\n document.querySelector('p[data-placeholder=\"How can I help you today?\"]') ||\n document.querySelector('p[data-placeholder=\"Reply to Claude...\"]')\n );\n }\n\n const anchorEl = resolveAnchor();\n\n // Choose placement side and adjust height/page density\n let placementSide = 'bottom';\n // let placementAlign = 'end';\n if (anchorEl) {\n const r = anchorEl.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n if (r.top >= modalHeight + 10) {\n placementSide = 'top';\n memoriesPerPage = 3;\n } else {\n placementSide = 'bottom';\n if (r.bottom > viewportHeight / 2) {\n modalHeight = 300;\n memoriesPerPage = 2;\n }\n }\n }\n\n // Create modal overlay\n const modalOverlay = document.createElement('div');\n modalOverlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: transparent;\n display: flex;\n z-index: 10000;\n pointer-events: auto;\n `;\n\n // Save reference to current modal overlay\n currentModalOverlay = modalOverlay;\n\n // Add event listener to close modal when clicking outside\n modalOverlay.addEventListener('click', event => {\n // Only close if clicking directly on the overlay, not its children\n if (event.target === modalOverlay) {\n closeModal();\n }\n });\n\n // Create modal container (placement handled by OPENMEMORY_UI)\n const modalContainer = document.createElement('div');\n modalContainer.style.cssText = `\n background-color: #1C1C1E;\n border-radius: 12px;\n width: ${modalWidth}px;\n height: ${modalHeight}px;\n display: flex;\n flex-direction: column;\n color: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n pointer-events: auto;\n border: 1px solid #27272A;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow: hidden;\n `;\n\n // Place near the anchor using the new positioning util\n let unplace = () => {\n // Ignore error\n };\n if (OPENMEMORY_UI && anchorEl) {\n // Prefer SITE_CONFIG for Claude to dock within the composer box\n let cfg = typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.claude ? SITE_CONFIG.claude : null;\n let placementCfg = (cfg && cfg.placement) || {\n strategy: 'dock' as const,\n container: 'form',\n side: (placementSide === 'top' ? 'top' : 'bottom') as 'top' | 'bottom',\n align: 'start' as const,\n gap: 8,\n };\n unplace = OPENMEMORY_UI.applyPlacement({\n container: modalContainer,\n anchor: anchorEl,\n placement: placementCfg,\n });\n } else {\n // Fallback placement\n document.body.appendChild(modalContainer);\n Object.assign(modalContainer.style, {\n position: 'fixed',\n left: '50%',\n top: '20%',\n transform: 'translateX(-50%)',\n zIndex: '2147483647',\n });\n }\n\n // Track current container/unplace for cleanup on next open\n currentModalContainer = modalContainer;\n currentModalUnplace = unplace;\n\n // Create modal header\n const modalHeader = document.createElement('div');\n modalHeader.style.cssText = `\n display: flex;\n align-items: center;\n padding: 10px 16px;\n justify-content: space-between;\n background-color: #232325;\n flex-shrink: 0;\n cursor: move;\n user-select: none;\n `;\n\n // Add drag functionality\n let isDragging = false;\n let dragOffset = { x: 0, y: 0 };\n\n modalHeader.addEventListener('mousedown', e => {\n // Only start drag if clicking on the header itself, not buttons\n if (\n e.target === modalHeader ||\n e.target === title ||\n e.target === logoImg ||\n e.target === headerLeft\n ) {\n isDragging = true;\n const rect = modalContainer.getBoundingClientRect();\n dragOffset.x = e.clientX - rect.left;\n dragOffset.y = e.clientY - rect.top;\n\n // Switch to fixed positioning for dragging\n modalContainer.style.position = 'fixed';\n modalContainer.style.left = rect.left + 'px';\n modalContainer.style.top = rect.top + 'px';\n modalContainer.style.transform = 'none';\n modalContainer.style.zIndex = '2147483647';\n\n e.preventDefault();\n }\n });\n\n document.addEventListener('mousemove', e => {\n if (isDragging && modalContainer) {\n const newX = e.clientX - dragOffset.x;\n const newY = e.clientY - dragOffset.y;\n\n // Keep modal within viewport bounds\n const maxX = window.innerWidth - modalContainer.offsetWidth;\n const maxY = window.innerHeight - modalContainer.offsetHeight;\n\n modalContainer.style.left = Math.max(0, Math.min(newX, maxX)) + 'px';\n modalContainer.style.top = Math.max(0, Math.min(newY, maxY)) + 'px';\n }\n });\n\n document.addEventListener('mouseup', () => {\n isDragging = false;\n });\n\n // Create header left section with just the logo\n const headerLeft = document.createElement('div');\n headerLeft.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n `;\n\n // Add Mem0 logo\n const logoImg = document.createElement('img');\n logoImg.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n logoImg.style.cssText = `\n width: 26px;\n height: 26px;\n border-radius: 50%;\n margin-right: 10px;\n `;\n\n // Add \"OpenMemory\" title\n const title = document.createElement('div');\n title.textContent = 'OpenMemory';\n title.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: white;\n `;\n\n // Create header right section\n const headerRight = document.createElement('div');\n headerRight.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n `;\n\n // Create Add to Prompt button with arrow\n const addToPromptBtn = document.createElement('button');\n addToPromptBtn.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 16px;\n gap: 8px;\n background-color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: black;\n `;\n addToPromptBtn.textContent = 'Add to Prompt';\n\n // Add arrow icon to button\n const arrowIcon = document.createElement('span');\n arrowIcon.innerHTML = ``;\n addToPromptBtn.appendChild(arrowIcon);\n\n // Create settings button\n const settingsBtn = document.createElement('button');\n settingsBtn.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n opacity: 0.6;\n transition: opacity 0.2s;\n `;\n settingsBtn.innerHTML = ``;\n\n // Add click event to open app.mem0.ai in a new tab\n settingsBtn.addEventListener('click', () => {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n memoryModalShown = false;\n currentModalOverlay = null;\n }\n\n chrome.runtime.sendMessage({ action: SidebarAction.SIDEBAR_SETTINGS });\n });\n\n // Add hover effect for the settings button\n settingsBtn.addEventListener('mouseenter', () => {\n settingsBtn.style.opacity = '1';\n });\n settingsBtn.addEventListener('mouseleave', () => {\n settingsBtn.style.opacity = '0.6';\n });\n\n // Content section\n const contentSection = document.createElement('div');\n const contentSectionHeight = modalHeight - 130; // Account for header and navigation\n contentSection.style.cssText = `\n display: flex;\n flex-direction: column;\n padding: 0 16px;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n height: ${contentSectionHeight}px;\n `;\n\n // Create memories counter\n const memoriesCounter = document.createElement('div');\n memoriesCounter.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: #FFFFFF;\n margin-top: 16px;\n flex-shrink: 0;\n `;\n\n // Update counter text based on loading state and number of memories\n if (isLoading) {\n memoriesCounter.textContent = `Loading Relevant Memories...`;\n } else if (memoryItems.length === 0) {\n memoriesCounter.textContent = `No Relevant Memories`;\n } else {\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n }\n\n // Calculate max height for memories content based on modal height\n const memoriesContentMaxHeight = contentSectionHeight - 40; // Account for memories counter\n\n // Create memories content container with adjusted height\n const memoriesContent = document.createElement('div');\n memoriesContent.style.cssText = `\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n flex: 1;\n max-height: ${memoriesContentMaxHeight}px;\n padding-right: 8px;\n margin-right: -8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n `;\n memoriesContent.style.cssText += '::-webkit-scrollbar { display: none; }';\n\n // Track currently expanded memory\n let currentlyExpandedMemory: HTMLElement | null = null;\n\n // Function to create skeleton loading items\n function createSkeletonItems() {\n memoriesContent.innerHTML = '';\n\n for (let i = 0; i < memoriesPerPage; i++) {\n const skeletonItem = document.createElement('div');\n skeletonItem.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px;\n background-color: #27272A;\n border-radius: 8px;\n height: 72px;\n flex-shrink: 0;\n animation: pulse 1.5s infinite ease-in-out;\n `;\n\n const skeletonText = document.createElement('div');\n skeletonText.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 85%;\n margin-bottom: 8px;\n `;\n\n const skeletonText2 = document.createElement('div');\n skeletonText2.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 65%;\n `;\n\n const skeletonActions = document.createElement('div');\n skeletonActions.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n `;\n\n const skeletonButton1 = document.createElement('div');\n skeletonButton1.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n const skeletonButton2 = document.createElement('div');\n skeletonButton2.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n skeletonActions.appendChild(skeletonButton1);\n skeletonActions.appendChild(skeletonButton2);\n\n const textContainer = document.createElement('div');\n textContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n textContainer.appendChild(skeletonText);\n textContainer.appendChild(skeletonText2);\n\n skeletonItem.appendChild(textContainer);\n skeletonItem.appendChild(skeletonActions);\n memoriesContent.appendChild(skeletonItem);\n }\n\n // Add keyframe animation to document if not exists\n if (!document.getElementById('skeleton-animation')) {\n const style = document.createElement('style');\n style.id = 'skeleton-animation';\n style.innerHTML = `\n @keyframes pulse {\n 0% { opacity: 0.6; }\n 50% { opacity: 0.8; }\n 100% { opacity: 0.6; }\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n // Function to expand memory\n function expandMemory(\n memoryContainer: HTMLDivElement,\n memoryText: HTMLDivElement,\n contentWrapper: HTMLDivElement,\n removeButton: HTMLButtonElement,\n isExpanded: { value: boolean }\n ) {\n if (currentlyExpandedMemory && currentlyExpandedMemory !== memoryContainer) {\n currentlyExpandedMemory.dispatchEvent(new Event('collapse'));\n }\n\n isExpanded.value = true;\n memoryText.style.webkitLineClamp = 'unset';\n memoryText.style.height = 'auto';\n contentWrapper.style.overflowY = 'auto';\n contentWrapper.style.maxHeight = '240px'; // Limit height to prevent overflow\n contentWrapper.style.scrollbarWidth = 'none';\n contentWrapper.style.msOverflowStyle = 'none';\n contentWrapper.style.cssText += '::-webkit-scrollbar { display: none; }';\n memoryContainer.style.backgroundColor = '#1C1C1E';\n memoryContainer.style.maxHeight = '300px'; // Allow expansion but within container\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'flex';\n currentlyExpandedMemory = memoryContainer;\n\n // Scroll to make expanded memory visible if needed\n memoriesContent.scrollTop = memoryContainer.offsetTop - memoriesContent.offsetTop;\n }\n\n // Function to collapse memory\n function collapseMemory(\n memoryContainer: HTMLDivElement,\n memoryText: HTMLDivElement,\n contentWrapper: HTMLDivElement,\n removeButton: HTMLButtonElement,\n isExpanded: { value: boolean }\n ) {\n isExpanded.value = false;\n memoryText.style.webkitLineClamp = '2';\n memoryText.style.height = '42px';\n contentWrapper.style.overflowY = 'visible';\n memoryContainer.style.backgroundColor = '#27272A';\n memoryContainer.style.maxHeight = '72px';\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'none';\n currentlyExpandedMemory = null;\n }\n\n // Function to show memories with adjusted count based on modal position\n function showMemories() {\n memoriesContent.innerHTML = '';\n\n if (isLoading) {\n createSkeletonItems();\n return;\n }\n\n if (memoryItems.length === 0) {\n showEmptyState();\n updateNavigationState(0, 0);\n return;\n }\n\n // Reset Add to Prompt button state\n if (addToPromptBtn) {\n addToPromptBtn.disabled = false;\n addToPromptBtn.style.opacity = '1';\n addToPromptBtn.style.cursor = 'pointer';\n }\n\n // Use the dynamically set memoriesPerPage value\n const memoriesToShow = Math.min(memoriesPerPage, memoryItems.length);\n\n // Calculate total pages and current page\n const totalPages = Math.ceil(memoryItems.length / memoriesToShow);\n const currentPage = Math.floor(currentMemoryIndex / memoriesToShow) + 1;\n\n // Update navigation buttons state\n updateNavigationState(currentPage, totalPages);\n\n for (let i = 0; i < memoriesToShow; i++) {\n const memoryIndex = currentMemoryIndex + i;\n if (memoryIndex >= memoryItems.length) {\n break;\n } // Stop if we've reached the end\n\n const memory = memoryItems[memoryIndex];\n if (!memory) {\n continue;\n }\n\n // Skip memories that have been added already\n if (allMemoriesById.has(String(memory.id))) {\n continue;\n }\n\n // Ensure memory has an ID\n if (!memory.id) {\n memory.id = `memory-${Date.now()}-${memoryIndex}`;\n }\n\n const memoryContainer = document.createElement('div');\n memoryContainer.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px; \n background-color: #27272A;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n min-height: 72px; \n max-height: 72px; \n overflow: hidden;\n flex-shrink: 0;\n `;\n\n const memoryText = document.createElement('div');\n memoryText.style.cssText = `\n font-size: 14px;\n line-height: 1.5;\n color: #D4D4D8;\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: all 0.2s ease;\n height: 42px; /* Height for 2 lines of text */\n `;\n memoryText.textContent = memory.text || '';\n\n const actionsContainer = document.createElement('div');\n actionsContainer.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n flex-shrink: 0;\n `;\n\n // Add button\n const addButton = document.createElement('button');\n addButton.style.cssText = `\n border: none;\n cursor: pointer;\n padding: 4px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 100%;\n transition: all 0.2s ease;\n `;\n\n addButton.innerHTML = ``;\n\n // Add click handler for add button\n addButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n sendExtensionEvent('memory_injection', {\n provider: 'claude',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: false,\n memory_id: memory.id,\n });\n\n // Mark this memory as added\n allMemoriesById.add(String(memory.id));\n\n // Add this memory to existing ones instead of replacing\n allMemories.push(String(memory.text || ''));\n\n // Update the input with all memories\n updateInputWithMemories();\n\n // Remove this memory from the list\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n // If we're on a page that's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n\n // Don't close the modal, allow adding more memories\n });\n\n // Menu button\n const menuButton = document.createElement('button');\n menuButton.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n color: #A1A1AA;\n `;\n menuButton.innerHTML = ``;\n\n // Track expanded state using object to maintain reference\n const isExpanded = { value: false };\n\n // Create remove button (hidden by default)\n const removeButton = document.createElement('button');\n removeButton.style.cssText = `\n display: none;\n align-items: center;\n gap: 6px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 8px;\n padding: 2px 4px;\n border: none;\n cursor: pointer;\n font-size: 13px;\n margin-top: 12px;\n width: fit-content;\n `;\n removeButton.innerHTML = `\n \n Remove\n `;\n\n // Create content wrapper for text and remove button\n const contentWrapper = document.createElement('div');\n contentWrapper.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n contentWrapper.appendChild(memoryText);\n contentWrapper.appendChild(removeButton);\n\n memoryContainer.addEventListener('collapse', () => {\n collapseMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n });\n\n menuButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n if (isExpanded.value) {\n collapseMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n } else {\n expandMemory(memoryContainer, memoryText, contentWrapper, removeButton, isExpanded);\n }\n });\n\n // Add click handler for remove button\n removeButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n // Remove from memoryItems\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n\n // If we're on the last page and it's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n actionsContainer.appendChild(addButton);\n actionsContainer.appendChild(menuButton);\n\n memoryContainer.appendChild(contentWrapper);\n memoryContainer.appendChild(actionsContainer);\n memoriesContent.appendChild(memoryContainer);\n\n // Add hover effect\n memoryContainer.addEventListener('mouseenter', () => {\n memoryContainer.style.backgroundColor = isExpanded.value ? '#18181B' : '#323232';\n });\n memoryContainer.addEventListener('mouseleave', () => {\n memoryContainer.style.backgroundColor = isExpanded.value ? '#1C1C1E' : '#27272A';\n });\n }\n\n // If after filtering for already added memories, there are no items to show,\n // check if we need to go to previous page\n if (memoriesContent.children.length === 0 && memoryItems.length > 0) {\n if (currentMemoryIndex > 0) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n } else {\n updateNavigationState(0, 0);\n showEmptyState();\n }\n }\n }\n\n // Function to show empty state\n function showEmptyState() {\n memoriesContent.innerHTML = '';\n memoriesCounter.textContent = 'No Relevant Memories';\n\n const emptyContainer = document.createElement('div');\n emptyContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n text-align: center;\n flex: 1;\n min-height: 200px;\n `;\n\n const emptyIcon = document.createElement('div');\n emptyIcon.innerHTML = ``;\n emptyIcon.style.marginBottom = '16px';\n\n const emptyText = document.createElement('div');\n emptyText.textContent = 'No relevant memories found';\n emptyText.style.cssText = `\n color: #71717A;\n font-size: 14px;\n font-weight: 500;\n `;\n\n emptyContainer.appendChild(emptyIcon);\n emptyContainer.appendChild(emptyText);\n memoriesContent.appendChild(emptyContainer);\n\n // Disable the Add to Prompt button when there are no memories\n if (addToPromptBtn) {\n addToPromptBtn.disabled = true;\n addToPromptBtn.style.opacity = '0.5';\n addToPromptBtn.style.cursor = 'not-allowed';\n }\n }\n\n // Update navigation button states\n function updateNavigationState(currentPage: number, totalPages: number): void {\n if (memoryItems.length === 0 || totalPages === 0) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n return;\n }\n\n if (currentPage <= 1) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n } else {\n prevButton.disabled = false;\n prevButton.style.opacity = '1';\n prevButton.style.cursor = 'pointer';\n }\n\n if (currentPage >= totalPages) {\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n } else {\n nextButton.disabled = false;\n nextButton.style.opacity = '1';\n nextButton.style.cursor = 'pointer';\n }\n }\n\n // Navigation section at bottom\n const navigationSection = document.createElement('div');\n navigationSection.style.cssText = `\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n border-top: none;\n flex-shrink: 0;\n `;\n\n // Navigation buttons\n const prevButton = document.createElement('button');\n prevButton.innerHTML = ``;\n prevButton.style.cssText = `\n background: #27272A;\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n `;\n\n const nextButton = document.createElement('button');\n nextButton.innerHTML = ``;\n nextButton.style.cssText = prevButton.style.cssText;\n\n // Add navigation button handlers\n prevButton.addEventListener('click', () => {\n if (currentMemoryIndex >= memoriesPerPage) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n }\n });\n\n nextButton.addEventListener('click', () => {\n if (currentMemoryIndex + memoriesPerPage < memoryItems.length) {\n currentMemoryIndex = currentMemoryIndex + memoriesPerPage;\n showMemories();\n }\n });\n\n // Add hover effects\n [prevButton, nextButton].forEach(button => {\n button.addEventListener('mouseenter', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#323232';\n }\n });\n button.addEventListener('mouseleave', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#27272A';\n }\n });\n });\n\n // Assemble modal\n headerLeft.appendChild(logoImg);\n headerLeft.appendChild(title);\n headerRight.appendChild(addToPromptBtn);\n headerRight.appendChild(settingsBtn);\n\n modalHeader.appendChild(headerLeft);\n modalHeader.appendChild(headerRight);\n\n // Drag behavior removed in favor of utility-based placement\n\n contentSection.appendChild(memoriesCounter);\n contentSection.appendChild(memoriesContent);\n\n navigationSection.appendChild(prevButton);\n navigationSection.appendChild(nextButton);\n\n modalContainer.appendChild(modalHeader);\n modalContainer.appendChild(contentSection);\n modalContainer.appendChild(navigationSection);\n\n // When using floating placement, modalContainer is already in the DOM.\n // Always append overlay last so outside-click works and layering is correct.\n document.body.appendChild(modalOverlay);\n\n // Show initial memories or loading state\n if (isLoading) {\n createSkeletonItems();\n } else if (memoryItems.length === 0) {\n showEmptyState();\n } else {\n showMemories();\n }\n\n // Function to close the modal\n function closeModal(): void {\n console.log('🚪 Closing modal');\n try {\n if (typeof unplace === 'function') {\n unplace();\n }\n } catch {\n // Ignore error\n }\n try {\n if (typeof currentModalUnplace === 'function') {\n currentModalUnplace();\n }\n } catch {\n // Ignore error\n }\n\n if (currentModalContainer && currentModalContainer.isConnected) {\n try {\n currentModalContainer.remove();\n } catch {\n // Ignore error\n }\n }\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n // Clean up drag event listeners\n\n document.body.removeChild(currentModalOverlay);\n }\n if (modalOverlay && document.body.contains(modalOverlay)) {\n document.body.removeChild(modalOverlay);\n }\n currentModalOverlay = null;\n currentModalContainer = null;\n currentModalUnplace = null;\n memoryModalShown = false;\n isProcessingMem0 = false;\n }\n\n // Update Add to Prompt button click handler\n addToPromptBtn.addEventListener('click', () => {\n // Only add memories that are not already added\n const newMemories = memoryItems\n .filter(memory => !allMemoriesById.has(String(memory.id)) && !memory.removed)\n .map(memory => {\n allMemoriesById.add(String(memory.id));\n return String(memory.text || '');\n });\n\n sendExtensionEvent('memory_injection', {\n provider: 'claude',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: true,\n memory_count: newMemories.length,\n });\n\n // Add new memories to allMemories (don't replace existing ones)\n if (newMemories.length > 0) {\n // Add new memories to the existing array\n allMemories = [...allMemories, ...newMemories];\n\n // Update the input with all memories\n updateInputWithMemories();\n }\n\n // Close the modal\n closeModal();\n\n // Remove all added memories from the memoryItems list\n for (let i = memoryItems.length - 1; i >= 0; i--) {\n if (allMemoriesById.has(String(memoryItems[i]?.id))) {\n memoryItems.splice(i, 1);\n }\n }\n });\n}\n\n// Shared function to update the input field with all collected memories\nfunction updateInputWithMemories() {\n // Find the input element (prioritizing the ProseMirror div with contenteditable=\"true\")\n let inputElement = document.querySelector('div[contenteditable=\"true\"].ProseMirror');\n\n // If ProseMirror not found, try other input elements\n if (!inputElement) {\n inputElement =\n document.querySelector('div[contenteditable=\"true\"]') ||\n document.querySelector('textarea') ||\n document.querySelector('p[data-placeholder=\"How can I help you today?\"]') ||\n document.querySelector('p[data-placeholder=\"Reply to Claude...\"]');\n }\n\n if (inputElement && allMemories.length > 0) {\n // Define the header text\n const headerText = OPENMEMORY_PROMPTS.memory_header_text;\n\n // Check if ProseMirror editor\n if (inputElement.classList.contains('ProseMirror')) {\n // First check if the header already exists\n const headerExists = Array.from(inputElement.querySelectorAll('p strong')).some(el =>\n (el.textContent || '').includes('Here is some of my memories')\n );\n\n if (headerExists) {\n // Get all existing memory paragraphs\n const paragraphs = Array.from(inputElement.querySelectorAll('p')) as HTMLElement[];\n let headerIndex = -1;\n const existingMemories = [];\n\n // Find the index of the header paragraph\n for (let i = 0; i < paragraphs.length; i++) {\n const strongEl = paragraphs[i]?.querySelector('strong');\n if (strongEl && (strongEl.textContent || '').includes('Here is some of my memories')) {\n headerIndex = i;\n break;\n }\n }\n\n // Collect all existing memories after the header\n if (headerIndex >= 0) {\n for (let i = headerIndex + 1; i < paragraphs.length; i++) {\n const para = paragraphs[i];\n if (!para) {\n continue;\n }\n const text = (para.textContent || '').trim();\n if (text.startsWith('-')) {\n existingMemories.push(text.substring(1).trim());\n }\n }\n\n // Keep everything up to and including the header paragraph\n const newHTML = Array.from(paragraphs)\n .slice(0, headerIndex + 1)\n .map(p => p.outerHTML)\n .join('');\n\n // Combine existing and new memories, avoiding duplicates\n const combinedMemories = [...existingMemories];\n\n // Add new memories if they don't already exist\n allMemories.forEach(mem => {\n if (!combinedMemories.includes(mem)) {\n combinedMemories.push(mem);\n }\n });\n\n // Add the memories after the header\n const memoriesHTML = combinedMemories.map(mem => `
- ${mem}
`).join('');\n\n // Set the new HTML content\n inputElement.innerHTML = newHTML + memoriesHTML;\n }\n } else {\n // Header doesn't exist, get the content without any existing memory wrappers\n const baseContent = getContentWithoutMemories(undefined);\n\n // Create the memory section\n let memoriesContent = `
${headerText}
`;\n\n // Add all memories to the content with proper paragraph tags\n memoriesContent += allMemories.map(mem => `
- ${mem}
`).join('');\n\n // If empty, replace the entire content\n if (\n !baseContent ||\n baseContent.trim() === '' ||\n (inputElement.querySelectorAll('p').length === 1 &&\n inputElement.querySelector('p.is-empty') !== null)\n ) {\n inputElement.innerHTML = memoriesContent;\n } else {\n // Otherwise append after a line break\n inputElement.innerHTML = `${baseContent}
${memoriesContent}`;\n }\n }\n\n // Dispatch proper events for ProseMirror\n const inputEvent = new InputEvent('input', {\n bubbles: true,\n cancelable: true,\n inputType: 'insertText',\n });\n inputElement.dispatchEvent(inputEvent);\n\n // Also dispatch a change event\n const changeEvent = new Event('change', { bubbles: true });\n inputElement.dispatchEvent(changeEvent);\n } else if (inputElement.tagName.toLowerCase() === 'div') {\n // For normal contenteditable divs\n // Check if the header already exists\n if (inputElement.innerHTML.includes(headerText)) {\n // Find the header position and extract existing memories\n const htmlParts = inputElement.innerHTML.split(headerText);\n if (htmlParts.length > 1) {\n const beforeHeader = htmlParts[0];\n const afterHeader = htmlParts[1];\n\n // Extract existing memories from the content after the header\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = afterHeader || '';\n const existingMemories: string[] = [];\n\n // Find all paragraphs that start with a dash\n Array.from(tempDiv.querySelectorAll('p')).forEach(p => {\n const text = (p.textContent || '').trim();\n if (text.startsWith('-')) {\n existingMemories.push(text.substring(1).trim());\n }\n });\n\n // Combine existing and new memories, avoiding duplicates\n const combinedMemories = [...existingMemories];\n\n // Add new memories if they don't already exist\n allMemories.forEach(mem => {\n if (!combinedMemories.includes(mem)) {\n combinedMemories.push(mem);\n }\n });\n\n // Create HTML with header and all memories\n let newHTML = beforeHeader + `
![\"Chrome](\"https://www.google.com/chrome/static/images/chrome-logo.svg\"){kind=logo}
\n Add to Chrome, It's Free\n![](\"${chrome.runtime.getURL('icons/mem0-claude-icon-p.png')}\"\n//){kind=icon}
\n// `;\n\n// // Create popover element (hidden by default)\n// const popover = document.createElement('div');\n// popover.className = 'mem0-button-popover';\n// popover.style.cssText = `\n// position: absolute;\n// bottom: 48px;\n// left: 50%;\n// transform: translateX(-50%);\n// background-color: #1C1C1E;\n// border: 1px solid #27272A;\n// color: white;\n// padding: 8px 12px;\n// border-radius: 6px;\n// font-size: 12px;\n// white-space: nowrap;\n// z-index: 10001;\n// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n// display: none;\n// transition: opacity 0.2s;\n// `;\n// popover.textContent = 'Add memories to your prompt';\n\n// // Add arrow\n// const arrow = document.createElement('div');\n// arrow.style.cssText = `\n// position: absolute;\n// top: 100%;\n// left: 50%;\n// transform: translateX(-50%) rotate(45deg);\n// width: 10px;\n// height: 10px;\n// background-color: #1C1C1E;\n// border-right: 1px solid #27272A;\n// border-bottom: 1px solid #27272A;\n// `;\n// popover.appendChild(arrow);\n\n// // Add hover event for popover\n// mem0ButtonContainer.addEventListener('mouseenter', () => {\n// popover.style.display = 'block';\n// setTimeout(() => (popover.style.opacity = '1'), 10);\n// });\n\n// mem0ButtonContainer.addEventListener('mouseleave', () => {\n// popover.style.opacity = '0';\n// setTimeout(() => (popover.style.display = 'none'), 200);\n// });\n\n// // Add click event to the mem0 button to show memory modal\n// mem0Button.addEventListener('click', function () {\n// // Check if the memories are enabled\n// getMemoryEnabledState().then(memoryEnabled => {\n// if (memoryEnabled) {\n// handleMem0Modal();\n// } else {\n// // If memories are disabled, open options\n// chrome.runtime.sendMessage({ action: SidebarAction.OPEN_OPTIONS });\n// }\n// });\n// });\n\n// // Assemble button components\n// mem0ButtonContainer.appendChild(mem0Button);\n// mem0ButtonContainer.appendChild(notificationDot);\n// mem0ButtonContainer.appendChild(popover);\n\n// // Insert after the Auto button (or reference button if Auto not found)\n// parentDiv.insertBefore(mem0ButtonContainer, referenceButton.nextSibling);\n\n// // Update notification dot based on input content\n// updateNotificationDot();\n\n// // Ensure notification dot is updated after DOM is fully loaded\n// setTimeout(updateNotificationDot, 500);\n// }\n\n// // Start trying to add the button\n// tryAddButton();\n\n// // Also observe DOM changes to add button when needed\n// const observer = new MutationObserver(() => {\n// if (!document.querySelector('#mem0-button-container')) {\n// tryAddButton();\n// }\n\n// // Also update notification dot when DOM changes\n// updateNotificationDot();\n// hookGrokBackgroundSearchTyping();\n// });\n\n// observer.observe(document.body, {\n// childList: true,\n// subtree: true,\n// });\n// }\n\n// Function to update notification dot visibility based on text in the input\nfunction updateNotificationDot(): void {\n const textarea = getTextarea();\n const host = document.getElementById('mem0-icon-button');\n\n if (textarea && host) {\n // Function to check if input has text\n const checkForText = () => {\n const inputText = textarea.value || '';\n host.setAttribute('data-has-text', inputText.trim() ? '1' : '0');\n };\n\n // Observe and listen for changes\n const mo = new MutationObserver(checkForText);\n mo.observe(textarea, { characterData: true, subtree: true });\n\n if (!textarea.dataset.grokCheckTextHooked) {\n textarea.dataset.grokCheckTextHooked = 'true'; \n textarea.addEventListener('input', checkForText);\n textarea.addEventListener('keyup', checkForText);\n textarea.addEventListener('focus', checkForText);\n }\n \n checkForText();\n setTimeout(checkForText, 500);\n } else {\n setTimeout(updateNotificationDot, 1000);\n }\n}\n\nfunction createMemoryModal(memoryItems: MemoryItem[], isLoading: boolean = false) {\n // Close existing modal if it exists\n if (memoryModalShown && currentModalOverlay) {\n document.body.removeChild(currentModalOverlay);\n }\n\n memoryModalShown = true;\n let currentMemoryIndex = 0;\n\n // Calculate modal dimensions (estimated)\n const modalWidth = 447;\n let modalHeight = 400; // Default height\n let memoriesPerPage = 3; // Default number of memories per page\n\n let topPosition;\n let leftPosition;\n\n // Use stored position if available, otherwise calculate based on button position\n if (modalPosition.x !== null && modalPosition.y !== null) {\n leftPosition = modalPosition.x;\n topPosition = modalPosition.y;\n } else {\n // Position relative to the OpenMemory button\n const mem0Button =\n document.getElementById('mem0-icon-button') ||\n document.querySelector('button[aria-label=\"OpenMemory\"]');\n\n if (mem0Button) {\n const buttonRect = mem0Button.getBoundingClientRect();\n\n // Determine if there's enough space below the button\n const viewportHeight = window.innerHeight;\n const spaceBelow = viewportHeight - buttonRect.bottom;\n\n // Position the modal centered under the button\n leftPosition = Math.max(buttonRect.left + buttonRect.width / 2 - modalWidth / 2, 10);\n // Ensure the modal doesn't go off the right edge of the screen\n const rightEdgePosition = leftPosition + modalWidth;\n if (rightEdgePosition > window.innerWidth - 10) {\n leftPosition = window.innerWidth - modalWidth - 10;\n }\n\n if (spaceBelow >= modalHeight) {\n // Place below the button\n topPosition = buttonRect.bottom + 10;\n } else {\n // Place above the button if not enough space below\n topPosition = buttonRect.top - modalHeight - 10;\n // Check if it's in the upper half of the screen\n if (buttonRect.top < viewportHeight / 2) {\n modalHeight = 300; // Reduced height\n memoriesPerPage = 2; // Show only 2 memories\n }\n }\n } else {\n // Fallback positioning\n topPosition = 100;\n leftPosition = window.innerWidth / 2 - modalWidth / 2;\n }\n\n // Store the initial position\n modalPosition.x = leftPosition;\n modalPosition.y = topPosition;\n }\n\n // Create modal overlay\n const modalOverlay = document.createElement('div');\n modalOverlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: transparent;\n display: flex;\n z-index: 10000;\n pointer-events: auto;\n `;\n\n // Save reference to current modal overlay\n currentModalOverlay = modalOverlay;\n\n // Add event listener to close modal when clicking outside\n modalOverlay.addEventListener('click', event => {\n // Only close if clicking directly on the overlay, not its children\n if (event.target === modalOverlay) {\n closeModal();\n }\n });\n\n // Cache-first mount for Grok (aim to sit left of the send/auto area)\n try {\n if (!document.getElementById('mem0-icon-button') && OPENMEMORY_UI) {\n OPENMEMORY_UI.resolveCachedAnchor(\n { learnKey: location.host + ':' + location.pathname },\n null,\n 24 * 60 * 60 * 1000\n ).then(function (hit: { el: Element; placement: Placement | null } | null) {\n if (!hit || !hit.el) {\n return;\n }\n let hs = OPENMEMORY_UI.createShadowRootHost('mem0-root');\n let host = hs.host,\n shadow = hs.shadow;\n host.id = 'mem0-icon-button';\n let placement = hit.placement || {\n strategy: 'inline',\n where: 'beforeend',\n inlineAlign: 'end',\n };\n OPENMEMORY_UI.applyPlacement({ container: host, anchor: hit.el, placement: placement });\n\n let style = document.createElement('style');\n style.textContent = `\n :host { position: relative; }\n .mem0-btn { all: initial; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; }\n .mem0-btn img { width:18px; height:18px; border-radius:50%; }\n .dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px; background:#80DDA2; border-radius:50%; border:2px solid #1C1C1E; display:none; }\n :host([data-has-text=\"1\"]) .dot { display:block; }\n `;\n let btn = document.createElement('button');\n btn.className = 'mem0-btn';\n let img = document.createElement('img');\n img.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n let dot = document.createElement('div');\n dot.className = 'dot';\n btn.appendChild(img);\n shadow.append(style, btn, dot);\n btn.addEventListener('click', function () {\n handleMem0Modal();\n });\n if (typeof updateNotificationDot === 'function') {\n setTimeout(updateNotificationDot, 0);\n }\n });\n }\n } catch (_) {\n // Ignore errors during re-initialization\n }\n\n // Focus-driven mount for Grok\n if (OPENMEMORY_UI && OPENMEMORY_UI.mountOnEditorFocus) {\n OPENMEMORY_UI.mountOnEditorFocus({\n existingHostSelector: '#mem0-icon-button',\n editorSelector: 'textarea, [contenteditable=\"true\"], input[type=\"text\"]',\n deriveAnchor: function (editor: Element) {\n return editor.closest('form') || editor.parentElement;\n },\n placement: { strategy: 'inline', where: 'beforeend', inlineAlign: 'end' },\n render: function (shadow: ShadowRoot, host: HTMLElement) {\n host.id = 'mem0-icon-button';\n let style = document.createElement('style');\n style.textContent = `\n :host { position: relative; }\n .mem0-btn { all: initial; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; }\n .mem0-btn img { width:18px; height:18px; border-radius:50%; }\n .dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px; background:#80DDA2; border-radius:50%; border:2px solid #1C1C1E; display:none; }\n :host([data-has-text=\"1\"]) .dot { display:block; }\n `;\n let btn = document.createElement('button');\n btn.className = 'mem0-btn';\n let img = document.createElement('img');\n img.src = chrome.runtime.getURL('icons/mem0-claude-icon-p.png');\n let dot = document.createElement('div');\n dot.className = 'dot';\n btn.appendChild(img);\n shadow.append(style, btn, dot);\n btn.addEventListener('click', function () {\n handleMem0Modal();\n });\n if (typeof updateNotificationDot === 'function') {\n setTimeout(updateNotificationDot, 0);\n }\n },\n });\n }\n\n // Create modal container with positioning\n const modalContainer = document.createElement('div');\n modalContainer.style.cssText = `\n background-color: #1C1C1E;\n border-radius: 12px;\n width: ${modalWidth}px;\n height: ${modalHeight}px;\n display: flex;\n flex-direction: column;\n color: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n position: absolute;\n top: ${topPosition}px;\n left: ${leftPosition}px;\n pointer-events: auto;\n border: 1px solid #27272A;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow: hidden;\n `;\n\n // Add drag functionality\n let isDraggingModal: boolean = false;\n const modalDragOffset: { x: number; y: number } = { x: 0, y: 0 };\n\n function handleDragStart(e: MouseEvent) {\n // Don't start dragging if clicking on buttons or interactive elements\n const target = e.target as HTMLElement | null;\n if (target && (target.tagName === 'BUTTON' || target.closest('button'))) {\n return;\n }\n\n isDraggingModal = true;\n const rect = modalContainer.getBoundingClientRect();\n modalDragOffset.x = e.clientX - rect.left;\n modalDragOffset.y = e.clientY - rect.top;\n document.addEventListener('mousemove', handleDragMove);\n document.addEventListener('mouseup', handleDragEnd);\n modalContainer.style.transition = 'none';\n }\n\n function handleDragMove(e: MouseEvent) {\n if (!isDraggingModal) {\n return;\n }\n\n e.preventDefault();\n const newX = e.clientX - modalDragOffset.x;\n const newY = e.clientY - modalDragOffset.y;\n\n // Constrain to viewport\n const maxX = window.innerWidth - modalWidth;\n const maxY = window.innerHeight - modalHeight;\n\n const constrainedX = Math.max(0, Math.min(newX, maxX));\n const constrainedY = Math.max(0, Math.min(newY, maxY));\n\n modalContainer.style.left = constrainedX + 'px';\n modalContainer.style.top = constrainedY + 'px';\n\n // Update stored position\n modalPosition.x = constrainedX;\n modalPosition.y = constrainedY;\n }\n\n function handleDragEnd() {\n isDraggingModal = false;\n document.removeEventListener('mousemove', handleDragMove);\n document.removeEventListener('mouseup', handleDragEnd);\n modalContainer.style.transition = '';\n }\n\n // Create modal header\n const modalHeader = document.createElement('div');\n modalHeader.style.cssText = `\n display: flex;\n align-items: center;\n padding: 10px 16px;\n justify-content: space-between;\n background-color: #232325;\n flex-shrink: 0;\n cursor: move;\n user-select: none;\n `;\n\n // Create header left section with just the logo\n const headerLeft = document.createElement('div');\n headerLeft.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n `;\n\n // Add Mem0 logo (updated to SVG)\n const logoImg = document.createElement('img');\n logoImg.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n logoImg.style.cssText = `\n width: 26px;\n height: 26px;\n border-radius: 50%;\n `;\n\n // Add \"OpenMemory\" title\n const title = document.createElement('div');\n title.textContent = 'OpenMemory';\n title.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: white;\n margin-left: 8px;\n `;\n\n // Create header right section\n const headerRight = document.createElement('div');\n headerRight.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n `;\n\n // Create Add to Prompt button with arrow\n const addToPromptBtn = document.createElement('button');\n addToPromptBtn.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 16px;\n gap: 8px;\n background-color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: black;\n `;\n addToPromptBtn.textContent = 'Add to Prompt';\n\n // Add arrow icon to button\n const arrowIcon = document.createElement('span');\n arrowIcon.innerHTML = `\n`;\n addToPromptBtn.appendChild(arrowIcon);\n\n // Create settings button\n const settingsBtn = document.createElement('button');\n settingsBtn.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n opacity: 0.6;\n transition: opacity 0.2s;\n `;\n settingsBtn.innerHTML = ``;\n\n // Add click event to open app.mem0.ai in a new tab\n settingsBtn.addEventListener('click', () => {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n memoryModalShown = false;\n currentModalOverlay = null;\n }\n\n chrome.runtime.sendMessage({ action: SidebarAction.SIDEBAR_SETTINGS });\n });\n\n // Add hover effect for the settings button\n settingsBtn.addEventListener('mouseenter', () => {\n settingsBtn.style.opacity = '1';\n });\n settingsBtn.addEventListener('mouseleave', () => {\n settingsBtn.style.opacity = '0.6';\n });\n\n // Add drag event listener to header\n modalHeader.addEventListener('mousedown', handleDragStart);\n\n // Content section\n const contentSection = document.createElement('div');\n const contentSectionHeight = modalHeight - 130; // Account for header and navigation\n contentSection.style.cssText = `\n display: flex;\n flex-direction: column;\n padding: 0 16px;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n height: ${contentSectionHeight}px;\n `;\n\n // Create memories counter\n const memoriesCounter = document.createElement('div');\n memoriesCounter.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: #FFFFFF;\n margin-top: 16px;\n flex-shrink: 0;\n `;\n\n // Update counter text based on loading state and number of memories\n if (isLoading) {\n memoriesCounter.textContent = `Loading Relevant Memories...`;\n } else {\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n }\n\n // Calculate max height for memories content based on modal height\n const memoriesContentMaxHeight = contentSectionHeight - 40; // Account for memories counter\n\n // Create memories content container with adjusted height\n const memoriesContent = document.createElement('div');\n memoriesContent.style.cssText = `\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n flex: 1;\n max-height: ${memoriesContentMaxHeight}px;\n padding-right: 8px;\n margin-right: -8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n `;\n memoriesContent.style.cssText += '::-webkit-scrollbar { display: none; }';\n\n // Track currently expanded memory\n let currentlyExpandedMemory: HTMLElement | null = null;\n\n // Function to create skeleton loading items (adjusted for different heights)\n function createSkeletonItems() {\n memoriesContent.innerHTML = '';\n\n for (let i = 0; i < memoriesPerPage; i++) {\n const skeletonItem = document.createElement('div');\n skeletonItem.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px;\n background-color: #27272A;\n border-radius: 8px;\n height: 72px;\n flex-shrink: 0;\n animation: pulse 1.5s infinite ease-in-out;\n `;\n\n const skeletonText = document.createElement('div');\n skeletonText.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 85%;\n margin-bottom: 8px;\n `;\n\n const skeletonText2 = document.createElement('div');\n skeletonText2.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 65%;\n `;\n\n const skeletonActions = document.createElement('div');\n skeletonActions.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n `;\n\n const skeletonButton1 = document.createElement('div');\n skeletonButton1.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n const skeletonButton2 = document.createElement('div');\n skeletonButton2.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n skeletonActions.appendChild(skeletonButton1);\n skeletonActions.appendChild(skeletonButton2);\n\n const textContainer = document.createElement('div');\n textContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n textContainer.appendChild(skeletonText);\n textContainer.appendChild(skeletonText2);\n\n skeletonItem.appendChild(textContainer);\n skeletonItem.appendChild(skeletonActions);\n memoriesContent.appendChild(skeletonItem);\n }\n\n // Add keyframe animation to document if not exists\n if (!document.getElementById('skeleton-animation')) {\n const style = document.createElement('style');\n style.id = 'skeleton-animation';\n style.innerHTML = `\n @keyframes pulse {\n 0% { opacity: 0.6; }\n 50% { opacity: 0.8; }\n 100% { opacity: 0.6; }\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n // Function to show memories with adjusted count based on modal position\n function showMemories() {\n memoriesContent.innerHTML = '';\n\n if (isLoading) {\n createSkeletonItems();\n return;\n }\n\n if (memoryItems.length === 0) {\n showEmptyState();\n updateNavigationState(0, 0);\n return;\n }\n\n // Use the dynamically set memoriesPerPage value\n const memoriesToShow = Math.min(memoriesPerPage, memoryItems.length);\n\n // Calculate total pages and current page\n const totalPages = Math.ceil(memoryItems.length / memoriesToShow);\n const currentPage = Math.floor(currentMemoryIndex / memoriesToShow) + 1;\n\n // Update navigation buttons state\n updateNavigationState(currentPage, totalPages);\n\n for (let i = 0; i < memoriesToShow; i++) {\n const memoryIndex = currentMemoryIndex + i;\n if (memoryIndex >= memoryItems.length) {\n break;\n } // Stop if we've reached the end\n\n const memory = memoryItems[memoryIndex]!;\n\n // Skip memories that have been added already\n if (allMemoriesById.has(String(memory.id))) {\n continue;\n }\n\n // Ensure memory has an ID\n if (!memory.id) {\n memory.id = `memory-${Date.now()}-${memoryIndex}`;\n }\n\n const memoryContainer = document.createElement('div');\n memoryContainer.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px; \n background-color: #27272A;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n min-height: 72px; \n max-height: 72px; \n overflow: hidden;\n flex-shrink: 0;\n `;\n\n const memoryText = document.createElement('div');\n memoryText.style.cssText = `\n font-size: 14px;\n line-height: 1.5;\n color: #D4D4D8;\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: all 0.2s ease;\n height: 42px; /* Height for 2 lines of text */\n `;\n memoryText.textContent = memory.text || '';\n\n const actionsContainer = document.createElement('div');\n actionsContainer.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n flex-shrink: 0;\n `;\n\n // Add button\n const addButton = document.createElement('button');\n addButton.style.cssText = `\n border: none;\n cursor: pointer;\n padding: 4px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 100%;\n transition: all 0.2s ease;\n `;\n\n addButton.innerHTML = ``;\n\n // Add click handler for add button\n addButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n\n sendExtensionEvent('memory_injection', {\n provider: 'grok',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: false,\n memory_id: memory.id,\n });\n\n // Add this memory\n allMemoriesById.add(String(memory.id));\n allMemories.push(String(memory.text || ''));\n updateInputWithMemories();\n\n // Remove this memory from the list\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n // If we're on a page that's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n // Menu button\n const menuButton = document.createElement('button');\n menuButton.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n color: #A1A1AA;\n `;\n menuButton.innerHTML = ``;\n\n // Track expanded state\n let isExpanded = false;\n\n // Create remove button (hidden by default)\n const removeButton = document.createElement('button');\n removeButton.style.cssText = `\n display: none;\n align-items: center;\n gap: 6px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 8px;\n padding: 2px 4px;\n border: none;\n cursor: pointer;\n font-size: 13px;\n margin-top: 12px;\n width: fit-content;\n `;\n removeButton.innerHTML = `\n \n Remove\n `;\n\n // Create content wrapper for text and remove button\n const contentWrapper = document.createElement('div');\n contentWrapper.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n contentWrapper.appendChild(memoryText);\n contentWrapper.appendChild(removeButton);\n\n // Function to expand memory\n const expandMemory = () => {\n if (currentlyExpandedMemory && currentlyExpandedMemory !== memoryContainer) {\n currentlyExpandedMemory.dispatchEvent(new Event('collapse'));\n }\n\n isExpanded = true;\n memoryText.style.webkitLineClamp = 'unset';\n memoryText.style.height = 'auto';\n contentWrapper.style.overflowY = 'auto';\n contentWrapper.style.maxHeight = '240px'; // Limit height to prevent overflow\n contentWrapper.style.scrollbarWidth = 'none';\n contentWrapper.style.msOverflowStyle = 'none';\n contentWrapper.style.cssText += '::-webkit-scrollbar { display: none; }';\n memoryContainer.style.backgroundColor = '#1C1C1E';\n memoryContainer.style.maxHeight = '300px'; // Allow expansion but within container\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'flex';\n currentlyExpandedMemory = memoryContainer;\n\n // Scroll to make expanded memory visible if needed\n memoriesContent.scrollTop = memoryContainer.offsetTop - memoriesContent.offsetTop;\n };\n\n // Function to collapse memory\n const collapseMemory = () => {\n isExpanded = false;\n memoryText.style.webkitLineClamp = '2';\n memoryText.style.height = '42px';\n contentWrapper.style.overflowY = 'visible';\n memoryContainer.style.backgroundColor = '#27272A';\n memoryContainer.style.maxHeight = '72px';\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'none';\n currentlyExpandedMemory = null;\n };\n\n memoryContainer.addEventListener('collapse', collapseMemory);\n\n menuButton.addEventListener('click', e => {\n e.stopPropagation();\n if (isExpanded) {\n collapseMemory();\n } else {\n expandMemory();\n }\n });\n\n // Add click handler for remove button\n removeButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n // Remove from memoryItems\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n\n // If we're on the last page and it's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n actionsContainer.appendChild(addButton);\n actionsContainer.appendChild(menuButton);\n\n memoryContainer.appendChild(contentWrapper);\n memoryContainer.appendChild(actionsContainer);\n memoriesContent.appendChild(memoryContainer);\n\n // Add hover effect\n memoryContainer.addEventListener('mouseenter', () => {\n memoryContainer.style.backgroundColor = isExpanded ? '#18181B' : '#323232';\n });\n memoryContainer.addEventListener('mouseleave', () => {\n memoryContainer.style.backgroundColor = isExpanded ? '#1C1C1E' : '#27272A';\n });\n }\n\n // If after filtering for already added memories, there are no items to show,\n // check if we need to go to previous page\n if (memoriesContent.children.length === 0 && memoryItems.length > 0) {\n if (currentMemoryIndex > 0) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n } else {\n showEmptyState();\n }\n }\n }\n\n // Function to show empty state\n function showEmptyState() {\n memoriesContent.innerHTML = '';\n\n const emptyContainer = document.createElement('div');\n emptyContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n text-align: center;\n flex: 1;\n min-height: 200px;\n `;\n\n const emptyIcon = document.createElement('div');\n emptyIcon.innerHTML = ``;\n emptyIcon.style.marginBottom = '16px';\n\n const emptyText = document.createElement('div');\n emptyText.textContent = 'No relevant memories found';\n emptyText.style.cssText = `\n color: #71717A;\n font-size: 14px;\n font-weight: 500;\n `;\n\n emptyContainer.appendChild(emptyIcon);\n emptyContainer.appendChild(emptyText);\n memoriesContent.appendChild(emptyContainer);\n }\n\n // Add content to modal\n contentSection.appendChild(memoriesCounter);\n contentSection.appendChild(memoriesContent);\n\n // Navigation section at bottom\n const navigationSection = document.createElement('div');\n navigationSection.style.cssText = `\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n border-top: none;\n flex-shrink: 0;\n `;\n\n // Navigation buttons\n const prevButton = document.createElement('button');\n prevButton.innerHTML = ``;\n prevButton.style.cssText = `\n background: #27272A;\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n `;\n\n const nextButton = document.createElement('button');\n nextButton.innerHTML = ``;\n nextButton.style.cssText = prevButton.style.cssText;\n\n // Add navigation button handlers\n prevButton.addEventListener('click', () => {\n if (currentMemoryIndex >= memoriesPerPage) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n showMemories();\n }\n });\n\n nextButton.addEventListener('click', () => {\n if (currentMemoryIndex + memoriesPerPage < memoryItems.length) {\n currentMemoryIndex = currentMemoryIndex + memoriesPerPage;\n showMemories();\n }\n });\n\n // Add hover effects\n [prevButton, nextButton].forEach(button => {\n button.addEventListener('mouseenter', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#323232';\n }\n });\n button.addEventListener('mouseleave', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#27272A';\n }\n });\n });\n\n navigationSection.appendChild(prevButton);\n navigationSection.appendChild(nextButton);\n\n // Assemble modal\n headerLeft.appendChild(logoImg);\n headerLeft.appendChild(title);\n headerRight.appendChild(addToPromptBtn);\n headerRight.appendChild(settingsBtn);\n\n modalHeader.appendChild(headerLeft);\n modalHeader.appendChild(headerRight);\n\n modalContainer.appendChild(modalHeader);\n modalContainer.appendChild(contentSection);\n modalContainer.appendChild(navigationSection);\n\n modalOverlay.appendChild(modalContainer);\n\n // Append to body\n document.body.appendChild(modalOverlay);\n\n // Show initial memories\n showMemories();\n\n // Update navigation button states\n function updateNavigationState(currentPage: number, totalPages: number) {\n if (memoryItems.length === 0 || totalPages === 0) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n return;\n }\n\n if (currentPage <= 1) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n } else {\n prevButton.disabled = false;\n prevButton.style.opacity = '1';\n prevButton.style.cursor = 'pointer';\n }\n\n if (currentPage >= totalPages) {\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n } else {\n nextButton.disabled = false;\n nextButton.style.opacity = '1';\n nextButton.style.cursor = 'pointer';\n }\n }\n\n // Update Add to Prompt button click handler\n addToPromptBtn.addEventListener('click', () => {\n // Only add memories that are not already added\n const newMemories = memoryItems\n .filter(memory => !allMemoriesById.has(String(memory.id)) && !memory.removed)\n .map(memory => {\n allMemoriesById.add(String(memory.id));\n return String(memory.text || '');\n });\n\n sendExtensionEvent('memory_injection', {\n provider: 'grok',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: true,\n memory_count: newMemories.length,\n });\n\n // Add all new memories to allMemories\n allMemories.push(...newMemories);\n\n // Update the input with all memories\n if (allMemories.length > 0) {\n updateInputWithMemories();\n closeModal();\n } else {\n // If no new memories were added but we have existing ones, just close\n if (allMemoriesById.size > 0) {\n closeModal();\n }\n }\n\n // Remove all added memories from the memoryItems list\n for (let i = memoryItems.length - 1; i >= 0; i--) {\n if (allMemoriesById.has(String(memoryItems[i]?.id))) {\n memoryItems.splice(i, 1);\n }\n }\n });\n\n // Function to close the modal\n function closeModal() {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n }\n currentModalOverlay = null;\n memoryModalShown = false;\n // Reset modal position when closing completely\n modalPosition.x = null;\n modalPosition.y = null;\n }\n}\n\n// Shared function to update the input field with all collected memories\nfunction updateInputWithMemories() {\n const inputElement = getTextarea();\n\n if (inputElement && allMemories.length > 0) {\n // Get the content without any existing memory wrappers\n const baseContent = getContentWithoutMemories();\n\n // Create the memory string with all collected memories\n let memoriesContent = '\\n\\n' + OPENMEMORY_PROMPTS.memory_header_text + '\\n';\n // Add all memories to the content\n allMemories.forEach((mem, index) => {\n memoriesContent += `- ${mem}`;\n if (index < allMemories.length - 1) {\n memoriesContent += '\\n';\n }\n });\n\n // Add the final content to the input\n setInputValue(inputElement, baseContent + memoriesContent);\n }\n}\n\n// Function to get the content without any memory wrappers\nfunction getContentWithoutMemories(): string {\n const inputElement = getTextarea();\n\n if (!inputElement) {\n return '';\n }\n\n let content: string = inputElement.value || '';\n\n // Remove any memory headers and content\n const memoryPrefix = OPENMEMORY_PROMPTS.memory_header_text;\n const prefixIndex = content.indexOf(memoryPrefix);\n if (prefixIndex !== -1) {\n content = content.substring(0, prefixIndex).trim();\n }\n\n // Also try with regex pattern\n try {\n const MEM0_PLAIN = OPENMEMORY_PROMPTS.memory_header_plain_regex;\n content = content.replace(MEM0_PLAIN, '').trim();\n } catch {\n // Ignore regex errors\n }\n\n return content;\n}\n\n// Function to check if memory is enabled\nfunction getMemoryEnabledState(): Promise\n \n `;\n\n // Add the notification dot to the button\n mem0Button.appendChild(notificationDot);\n // Try to find the right-side icons container near the submit button and prepend there\n let iconsContainer = null;\n let modelBtn = null;\n try {\n // Prefer explicit model button from site config\n try {\n let cfg =\n typeof SITE_CONFIG !== 'undefined' && SITE_CONFIG.perplexity\n ? SITE_CONFIG.perplexity\n : null;\n let modelSel = cfg && cfg.modelButtonSelector;\n if (modelSel) {\n modelBtn = document.querySelector(modelSel);\n }\n } catch (_) {\n // Ignore errors during re-initialization\n }\n\n // 1) Exact class combo (from screenshot) – Tailwind classes require escaping ':'\n iconsContainer = document.querySelector(\n 'div.bg-raised.dark\\\\:bg-offset.flex.items-center.justify-self-end.rounded-full'\n );\n // 2) Slightly relaxed class combo\n if (!iconsContainer) {\n iconsContainer = document.querySelector('div.bg-raised.flex.items-center.rounded-full');\n }\n // 3) Attribute-contains selector as a robust fallback\n if (!iconsContainer) {\n iconsContainer = document.querySelector(\n 'div[class*=\"bg-raised\"][class*=\"items-center\"][class*=\"rounded-full\"]'\n );\n }\n // 4) Fallback based on Submit button proximity\n if (!iconsContainer) {\n const submitBtn = document.querySelector('button[aria-label=\"Submit\"]');\n if (submitBtn && submitBtn.parentElement) {\n const sibling = submitBtn.parentElement.previousElementSibling;\n if (sibling && sibling.querySelectorAll('button').length > 0) {\n iconsContainer = sibling;\n }\n if (!iconsContainer) {\n const candidates = submitBtn.parentElement.querySelectorAll('div');\n for (const c of Array.from(candidates)) {\n if (c.querySelectorAll('button').length >= 2) {\n iconsContainer = c;\n break;\n }\n }\n }\n }\n }\n } catch (_) {\n // Ignore errors during re-initialization\n }\n\n // If model button found, insert right after it; else, insert at start of icon group\n if (modelBtn && modelBtn.parentElement) {\n let container = modelBtn.parentElement;\n // If the immediate parent is not a horizontal flex, walk up a few levels to find one\n try {\n let probe: Element | null = container;\n let hops = 0;\n while (probe && hops < 5) {\n let cs = getComputedStyle(probe);\n if (cs.display === 'flex' && cs.flexDirection !== 'column') {\n container = probe as HTMLElement;\n break;\n }\n probe = probe.parentElement;\n hops++;\n }\n } catch (_) {\n // Ignore errors during re-initialization\n }\n // Place as the first icon in the group\n container.insertBefore(mem0ButtonWrapper, container.firstElementChild);\n } else if (iconsContainer) {\n iconsContainer.insertBefore(mem0ButtonWrapper, iconsContainer.firstChild);\n }\n\n // Add the button to the wrapper first\n mem0ButtonWrapper.appendChild(mem0Button);\n\n // Find the input container and insert the button to the LEFT of the input\n let inputContainer: HTMLElement | null = null;\n const inputEl = getTextarea();\n\n if (inputEl) {\n // Try to find the input container by looking for the parent that contains the input\n let currentElement: HTMLElement | null = inputEl as HTMLElement;\n while (currentElement && currentElement !== document.body) {\n // Look for a container that has flex layout and contains the input\n const computedStyle = window.getComputedStyle(currentElement);\n if (computedStyle.display === 'flex' && currentElement.contains(inputEl)) {\n inputContainer = currentElement;\n break;\n }\n currentElement = currentElement.parentElement;\n }\n\n // Fallback: use the direct parent of the input\n if (!inputContainer) {\n inputContainer = inputEl.parentElement;\n }\n }\n\n if (!inputContainer) {\n setTimeout(addMem0Button, 500);\n return;\n }\n\n // Insert the button as the FIRST child of the input container (leftmost position)\n inputContainer.insertBefore(mem0ButtonWrapper, inputContainer.firstChild);\n\n // Style the button to match the input area\n mem0Button.style.width = '32px';\n mem0Button.style.height = '32px';\n mem0Button.style.borderRadius = '8px';\n mem0Button.style.background = 'transparent';\n mem0Button.style.display = 'inline-flex';\n mem0Button.style.alignItems = 'center';\n mem0Button.style.justifyContent = 'center';\n mem0Button.style.marginRight = '8px';\n mem0ButtonWrapper.style.display = 'inline-flex';\n mem0ButtonWrapper.style.alignItems = 'center';\n mem0ButtonWrapper.style.justifyContent = 'center';\n\n // Add hover effect for tooltip\n mem0ButtonWrapper.addEventListener('mouseenter', () => {\n tooltip.style.visibility = 'visible';\n tooltip.style.opacity = '1';\n });\n\n mem0ButtonWrapper.addEventListener('mouseleave', () => {\n tooltip.style.visibility = 'hidden';\n tooltip.style.opacity = '0';\n });\n\n // Add click event listener - modified to check login first and fix empty text case\n mem0Button.addEventListener('click', () => {\n // Get the current input text\n const textarea = getTextarea();\n\n if (textarea && getInputText(textarea).trim()) {\n // If there's text in the input, process memories\n handleMem0Modal('mem0-icon-button');\n } else {\n // If no text, check login status first\n chrome.storage.sync.get(\n [StorageKey.API_KEY, StorageKey.USER_ID_CAMEL, StorageKey.ACCESS_TOKEN],\n function (items) {\n if (!items.apiKey && !items.access_token) {\n // Not logged in, show login popup\n showLoginPopup();\n } else {\n // Logged in but no text, show tooltip message\n const originalText = tooltip.textContent;\n tooltip.textContent = 'Add some text to find memories';\n tooltip.style.visibility = 'visible';\n tooltip.style.opacity = '1';\n\n // Reset the tooltip after a delay\n setTimeout(() => {\n tooltip.textContent = originalText;\n if (!mem0ButtonWrapper.matches(':hover')) {\n tooltip.style.visibility = 'hidden';\n tooltip.style.opacity = '0';\n }\n }, 1500);\n }\n }\n );\n }\n });\n\n // Setup the notification dot based on input content\n updateNotificationDot();\n}\n\n// Function to update the notification dot based on input content\nfunction updateNotificationDot() {\n const textarea = getTextarea();\n const host = document.getElementById('mem0-icon-button');\n if (!textarea || !host) {\n setTimeout(updateNotificationDot, 500);\n return;\n }\n\n const applyState = () => {\n const inputText = getInputText(textarea) || '';\n const hasText = inputText.trim() !== '';\n try {\n host.setAttribute('data-has-text', hasText ? '1' : '0');\n } catch (_) {\n // Ignore errors during re-initialization\n }\n };\n\n // Observe and listen for changes\n try {\n const mo = new MutationObserver(applyState);\n mo.observe(textarea, { attributes: true, childList: true, characterData: true, subtree: true });\n } catch (_) {\n // Ignore errors during re-initialization\n }\n\n if (!textarea.dataset.perplexityApplyStateHooked) {\n textarea.dataset.perplexityApplyStateHooked = 'true';\n textarea.addEventListener('input', applyState);\n textarea.addEventListener('keyup', applyState);\n textarea.addEventListener('focus', applyState);\n }\n applyState();\n setTimeout(applyState, 300);\n}\n\n// Function to create memory modal\nfunction createMemoryModal(\n memoryItems: MemoryItem[],\n isLoading: boolean = false,\n sourceButtonId: string | null = null\n) {\n // Close existing modal if it exists\n if (memoryModalShown && currentModalOverlay) {\n document.body.removeChild(currentModalOverlay);\n }\n\n memoryModalShown = true;\n let currentMemoryIndex = 0;\n\n // Calculate modal dimensions (estimated)\n const modalWidth = 447;\n let modalHeight = 400; // Default height\n let memoriesPerPage = 3; // Default number of memories per page\n\n let topPosition;\n let leftPosition;\n\n // Use saved position if available (for dragged modals)\n if (modalPosition.top !== null && modalPosition.left !== null) {\n topPosition = modalPosition.top;\n leftPosition = modalPosition.left;\n } else {\n // Different positioning based on which button triggered the modal\n if (sourceButtonId === 'mem0-icon-button') {\n // Anchor to the Mem0 host/button in the right icon group when present\n const iconButton =\n document.querySelector('#mem0-icon-button') || document.querySelector('.mem0-claude-btn');\n if (iconButton) {\n const buttonRect = iconButton.getBoundingClientRect();\n\n const viewportHeight = window.innerHeight;\n\n // Place the modal immediately to the left of the icon group\n leftPosition = Math.max(10, buttonRect.left - modalWidth - 10);\n // Vertically center relative to the icon height, but keep on-screen\n topPosition = buttonRect.top + buttonRect.height / 2 - modalHeight / 2;\n topPosition = Math.max(10, Math.min(topPosition, viewportHeight - modalHeight - 10));\n } else {\n // Fallback to default positioning\n positionDefault();\n }\n } else {\n // Default positioning\n positionDefault();\n }\n }\n\n // Helper function for default positioning\n function positionDefault() {\n // Prefer the actual Mem0 host if present; otherwise, try to use the right icon group container\n let anchor =\n document.querySelector('#mem0-icon-button') || document.querySelector('.mem0-claude-btn');\n if (!anchor) {\n // Heuristics to find the right-side icon group near the submit button\n try {\n anchor =\n document.querySelector(\n 'div.bg-raised.dark\\\\:bg-offset.flex.items-center.justify-self-end.rounded-full'\n ) ||\n document.querySelector('div.bg-raised.flex.items-center.rounded-full') ||\n document.querySelector(\n 'div[class*=\"bg-raised\"][class*=\"items-center\"][class*=\"rounded-full\"]'\n );\n if (!anchor) {\n const submitBtn = document.querySelector('button[aria-label=\"Submit\"]');\n if (submitBtn && submitBtn.parentElement) {\n const sibling = submitBtn.parentElement.previousElementSibling;\n if (sibling && sibling.querySelectorAll('button').length > 0) {\n anchor = sibling;\n }\n }\n }\n } catch (_) {\n // Ignore errors during re-initialization\n }\n }\n\n if (!anchor) {\n console.error('Mem0 anchor not found for positioning');\n // As a last resort, place near center\n leftPosition = Math.max(10, (window.innerWidth - modalWidth) / 2);\n topPosition = Math.max(10, (window.innerHeight - modalHeight) / 2);\n return;\n }\n\n const rect = anchor.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n // Place the modal immediately to the left of the anchor/group\n leftPosition = Math.max(10, rect.left - modalWidth - 10);\n // Vertically center relative to the group, clamped to viewport\n topPosition = rect.top + rect.height / 2 - modalHeight / 2;\n topPosition = Math.max(10, Math.min(topPosition, viewportHeight - modalHeight - 10));\n }\n\n // Create modal overlay\n const modalOverlay = document.createElement('div');\n modalOverlay.id = 'mem0-modal-overlay';\n modalOverlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: transparent;\n display: flex;\n z-index: 10000;\n pointer-events: auto;\n `;\n\n // Save reference to current modal overlay\n currentModalOverlay = modalOverlay;\n\n // Add event listener to close modal when clicking outside\n modalOverlay.addEventListener('click', event => {\n // Only close if clicking directly on the overlay, not its children\n if (event.target === modalOverlay) {\n closeModal();\n }\n });\n\n // Create modal container with positioning\n const modalContainer = document.createElement('div');\n\n // Position the modal below or above the button\n modalContainer.style.cssText = `\n background-color: #1C1C1E;\n border-radius: 12px;\n width: ${modalWidth}px;\n height: ${modalHeight}px;\n display: flex;\n flex-direction: column;\n color: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n position: absolute;\n top: ${topPosition}px;\n left: ${leftPosition}px;\n pointer-events: auto;\n border: 1px solid #27272A;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow: hidden;\n `;\n\n // Create modal header\n const modalHeader = document.createElement('div');\n modalHeader.style.cssText = `\n display: flex;\n align-items: center;\n padding: 10px 16px;\n justify-content: space-between;\n background-color: #232325;\n flex-shrink: 0;\n cursor: move;\n user-select: none;\n `;\n\n // Create header left section with logo and title\n const headerLeft = document.createElement('div');\n headerLeft.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n `;\n\n // Add Mem0 logo and title to header\n const logoImg = document.createElement('img');\n logoImg.src = chrome.runtime.getURL('icons/mem0-claude-icon.png');\n logoImg.style.cssText = `\n width: 26px;\n height: 26px;\n border-radius: 50%;\n `;\n\n // Create title element\n const title = document.createElement('div');\n title.textContent = 'OpenMemory';\n title.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: #FFFFFF;\n margin-left: 8px;\n `;\n\n // Create header right section with Add to Prompt button\n const headerRight = document.createElement('div');\n headerRight.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n `;\n\n // Create Add to Prompt button with arrow\n const addToPromptBtn = document.createElement('button');\n addToPromptBtn.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 16px;\n gap: 8px;\n background-color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: black;\n `;\n addToPromptBtn.textContent = 'Add to Prompt';\n\n // Add arrow icon to button\n const arrowIcon = document.createElement('span');\n arrowIcon.innerHTML = `\n`;\n addToPromptBtn.appendChild(arrowIcon);\n\n // Add click handler for the Add to Prompt button\n addToPromptBtn.addEventListener('click', () => {\n // Only add memories that are not already added\n const newMemories = memoryItems\n .filter(memory => !allMemoriesById.has(String(memory.id)))\n .map(memory => {\n allMemoriesById.add(String(memory.id));\n return String(memory.text || '');\n });\n\n sendExtensionEvent('memory_injection', {\n provider: 'perplexity',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: true,\n memory_count: newMemories.length,\n });\n\n // Add all new memories to allMemories\n allMemories.push(...newMemories);\n\n // Update the input with all memories\n if (allMemories.length > 0) {\n updateInputWithMemories();\n closeModal();\n } else {\n // If no new memories were added but we have existing ones, just close\n if (allMemoriesById.size > 0) {\n closeModal();\n }\n }\n\n // Remove all added memories from the memoryItems list\n for (let i = memoryItems.length - 1; i >= 0; i--) {\n if (allMemoriesById.has(String(memoryItems[i]?.id))) {\n memoryItems.splice(i, 1);\n }\n }\n });\n\n // Create settings button\n const settingsBtn = document.createElement('button');\n settingsBtn.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n opacity: 0.6;\n transition: opacity 0.2s;\n `;\n settingsBtn.innerHTML = ``;\n\n // Add click event to open app.mem0.ai in a new tab\n settingsBtn.addEventListener('click', () => {\n if (currentModalOverlay && document.body.contains(currentModalOverlay)) {\n document.body.removeChild(currentModalOverlay);\n memoryModalShown = false;\n currentModalOverlay = null;\n }\n\n chrome.runtime.sendMessage({ action: SidebarAction.SIDEBAR_SETTINGS });\n });\n\n // Add hover effect for the settings button\n settingsBtn.addEventListener('mouseenter', () => {\n settingsBtn.style.opacity = '1';\n });\n settingsBtn.addEventListener('mouseleave', () => {\n settingsBtn.style.opacity = '0.6';\n });\n\n // Assemble header\n headerLeft.appendChild(logoImg);\n headerLeft.appendChild(title);\n\n headerRight.appendChild(addToPromptBtn);\n headerRight.appendChild(settingsBtn);\n\n modalHeader.appendChild(headerLeft);\n modalHeader.appendChild(headerRight);\n\n // Add drag functionality\n let startX = 0;\n let startY = 0;\n let initialX = 0;\n let initialY = 0;\n\n modalHeader.addEventListener('mousedown', (e: MouseEvent) => {\n const target = e.target as HTMLElement | null;\n if (target && (target === modalHeader || modalHeader.contains(target))) {\n // Don't start drag if clicking on buttons\n if (target.tagName === 'BUTTON' || target.closest('button')) {\n return;\n }\n\n isDragging = true;\n startX = e.clientX;\n startY = e.clientY;\n\n // Get current position\n const rect = modalContainer.getBoundingClientRect();\n initialX = rect.left;\n initialY = rect.top;\n\n modalContainer.style.transition = 'none';\n modalContainer.style.opacity = '1';\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n\n e.preventDefault();\n }\n });\n\n function handleMouseMove(e: MouseEvent) {\n if (!isDragging) {\n return;\n }\n\n const deltaX = e.clientX - startX;\n const deltaY = e.clientY - startY;\n\n let newX = initialX + deltaX;\n let newY = initialY + deltaY;\n\n // Keep modal within viewport bounds\n const maxX = window.innerWidth - modalWidth;\n const maxY = window.innerHeight - modalHeight;\n\n newX = Math.max(0, Math.min(newX, maxX));\n newY = Math.max(0, Math.min(newY, maxY));\n\n modalContainer.style.left = newX + 'px';\n modalContainer.style.top = newY + 'px';\n\n // Update stored position\n modalPosition.left = newX;\n modalPosition.top = newY;\n }\n\n function handleMouseUp() {\n if (isDragging) {\n isDragging = false;\n modalContainer.style.transition = '';\n modalContainer.style.opacity = '1';\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n }\n }\n\n // Content section\n const contentSection = document.createElement('div');\n const contentSectionHeight = modalHeight - 130; // Account for header and navigation\n contentSection.style.cssText = `\n display: flex;\n flex-direction: column;\n padding: 0 16px;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n height: ${contentSectionHeight}px;\n `;\n\n // Create memories counter\n const memoriesCounter = document.createElement('div');\n memoriesCounter.style.cssText = `\n font-size: 16px;\n font-weight: 600;\n color: #FFFFFF;\n margin-top: 16px;\n flex-shrink: 0;\n `;\n\n // Update counter text based on loading state and number of memories\n if (isLoading) {\n memoriesCounter.textContent = `Loading Relevant Memories...`;\n } else {\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n }\n\n // Calculate max height for memories content based on modal height\n const memoriesContentMaxHeight = contentSectionHeight - 40; // Account for memories counter\n\n // Create memories content container with adjusted height\n const memoriesContent = document.createElement('div');\n memoriesContent.style.cssText = `\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n flex: 1;\n max-height: ${memoriesContentMaxHeight}px;\n padding-right: 8px;\n margin-right: -8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n `;\n memoriesContent.style.cssText += '::-webkit-scrollbar { display: none; }';\n\n // Track currently expanded memory\n let currentlyExpandedMemory: HTMLElement | null = null;\n\n // Create category section\n const categorySection = document.createElement('div');\n categorySection.style.cssText = `\n display: flex;\n gap: 8px;\n padding: 0 8px;\n `;\n\n // Function to create skeleton loading items (adjusted for different heights)\n function createSkeletonItems() {\n memoriesContent.innerHTML = '';\n\n for (let i = 0; i < memoriesPerPage; i++) {\n const skeletonItem = document.createElement('div');\n skeletonItem.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px;\n background-color: #27272A;\n border-radius: 8px;\n height: 72px;\n flex-shrink: 0;\n animation: pulse 1.5s infinite ease-in-out;\n `;\n\n const skeletonText = document.createElement('div');\n skeletonText.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 85%;\n margin-bottom: 8px;\n `;\n\n const skeletonText2 = document.createElement('div');\n skeletonText2.style.cssText = `\n background-color: #383838;\n border-radius: 4px;\n height: 14px;\n width: 65%;\n `;\n\n const skeletonActions = document.createElement('div');\n skeletonActions.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n `;\n\n const skeletonButton1 = document.createElement('div');\n skeletonButton1.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n const skeletonButton2 = document.createElement('div');\n skeletonButton2.style.cssText = `\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #383838;\n `;\n\n skeletonActions.appendChild(skeletonButton1);\n skeletonActions.appendChild(skeletonButton2);\n\n const textContainer = document.createElement('div');\n textContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n textContainer.appendChild(skeletonText);\n textContainer.appendChild(skeletonText2);\n\n skeletonItem.appendChild(textContainer);\n skeletonItem.appendChild(skeletonActions);\n memoriesContent.appendChild(skeletonItem);\n }\n\n // Add keyframe animation to document if not exists\n if (!document.getElementById('skeleton-animation')) {\n const style = document.createElement('style');\n style.id = 'skeleton-animation';\n style.innerHTML = `\n @keyframes pulse {\n 0% { opacity: 0.6; }\n 50% { opacity: 0.8; }\n 100% { opacity: 0.6; }\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n // Function to show memories with adjusted count based on modal position\n function showMemories() {\n memoriesContent.innerHTML = '';\n\n if (isLoading) {\n createSkeletonItems();\n return;\n }\n\n if (memoryItems.length === 0) {\n showEmptyState();\n updateNavigationState(0, 0);\n return;\n }\n\n // Use the dynamically set memoriesPerPage value\n const memoriesToShow = Math.min(memoriesPerPage, memoryItems.length);\n\n // Calculate total pages and current page\n const totalPages = Math.ceil(memoryItems.length / memoriesToShow);\n const currentPage = Math.floor(currentMemoryIndex / memoriesToShow) + 1;\n\n // Reset currentMemoryIndex if it's beyond the available memories\n if (currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = 0;\n }\n\n // Update navigation buttons state\n updateNavigationState(currentPage, totalPages);\n\n // Count how many memories we've displayed\n let displayedCount = 0;\n\n // Start from the current index\n let index = currentMemoryIndex;\n\n while (displayedCount < memoriesToShow && index < memoryItems.length) {\n const memory = memoryItems[index]!;\n\n // Only display memories that haven't been added yet\n if (!allMemoriesById.has(String(memory.id))) {\n // Ensure memory has an ID\n if (!memory.id) {\n memory.id = `memory-${Date.now()}-${index}`;\n }\n\n const memoryContainer = document.createElement('div');\n memoryContainer.style.cssText = `\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px; \n background-color: #27272A;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n min-height: 72px; \n max-height: 72px; \n overflow: hidden;\n flex-shrink: 0;\n `;\n\n const memoryText = document.createElement('div');\n memoryText.style.cssText = `\n font-size: 14px;\n line-height: 1.5;\n color: #D4D4D8;\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: all 0.2s ease;\n height: 42px; /* Height for 2 lines of text */\n `;\n memoryText.textContent = String(memory.text || '');\n\n const actionsContainer = document.createElement('div');\n actionsContainer.style.cssText = `\n display: flex;\n gap: 4px;\n margin-left: 10px;\n flex-shrink: 0;\n `;\n\n // Add button\n const addButton = document.createElement('button');\n addButton.style.cssText = `\n border: none;\n cursor: pointer;\n padding: 4px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 100%;\n transition: all 0.2s ease;\n `;\n\n addButton.innerHTML = ``;\n\n // Add click handler for add button\n addButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n\n sendExtensionEvent('memory_injection', {\n provider: 'perplexity',\n source: 'OPENMEMORY_CHROME_EXTENSION',\n browser: getBrowser(),\n injected_all: false,\n memory_id: memory.id,\n });\n\n // Add this memory\n allMemoriesById.add(String(memory.id));\n allMemories.push(String(memory.text || ''));\n updateInputWithMemories();\n\n // Remove this memory from the list\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // Recalculate pagination after removing an item\n // If we're on a page that's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n // Menu button\n const menuButton = document.createElement('button');\n menuButton.style.cssText = `\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n color: #A1A1AA;\n `;\n menuButton.innerHTML = ``;\n\n // Track expanded state\n let isExpanded = false;\n\n // Create remove button (hidden by default)\n const removeButton = document.createElement('button');\n removeButton.style.cssText = `\n display: none;\n align-items: center;\n gap: 6px;\n background:rgb(66, 66, 69);\n color:rgb(199, 199, 201);\n border-radius: 8px;\n padding: 2px 4px;\n border: none;\n cursor: pointer;\n font-size: 13px;\n margin-top: 12px;\n width: fit-content;\n `;\n removeButton.innerHTML = `\n \n Remove\n `;\n\n // Create content wrapper for text and remove button\n const contentWrapper = document.createElement('div');\n contentWrapper.style.cssText = `\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n contentWrapper.appendChild(memoryText);\n contentWrapper.appendChild(removeButton);\n\n // Function to expand memory\n const expandMemory = () => {\n if (currentlyExpandedMemory && currentlyExpandedMemory !== memoryContainer) {\n currentlyExpandedMemory.dispatchEvent(new Event('collapse'));\n }\n\n isExpanded = true;\n memoryText.style.webkitLineClamp = 'unset';\n memoryText.style.height = 'auto';\n contentWrapper.style.overflowY = 'auto';\n contentWrapper.style.maxHeight = '240px'; // Limit height to prevent overflow\n contentWrapper.style.scrollbarWidth = 'none';\n contentWrapper.style.msOverflowStyle = 'none';\n contentWrapper.style.cssText += '::-webkit-scrollbar { display: none; }';\n memoryContainer.style.backgroundColor = '#1C1C1E';\n memoryContainer.style.maxHeight = '300px'; // Allow expansion but within container\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'flex';\n currentlyExpandedMemory = memoryContainer;\n\n // Scroll to make expanded memory visible if needed\n memoriesContent.scrollTop = memoryContainer.offsetTop - memoriesContent.offsetTop;\n };\n\n // Function to collapse memory\n const collapseMemory = () => {\n isExpanded = false;\n memoryText.style.webkitLineClamp = '2';\n memoryText.style.height = '42px';\n contentWrapper.style.overflowY = 'visible';\n memoryContainer.style.backgroundColor = '#27272A';\n memoryContainer.style.maxHeight = '72px';\n memoryContainer.style.overflow = 'hidden';\n removeButton.style.display = 'none';\n currentlyExpandedMemory = null;\n };\n\n memoryContainer.addEventListener('collapse', collapseMemory);\n\n menuButton.addEventListener('click', e => {\n e.stopPropagation();\n if (isExpanded) {\n collapseMemory();\n } else {\n expandMemory();\n }\n });\n\n // Add click handler for remove button\n removeButton.addEventListener('click', (e: MouseEvent) => {\n e.stopPropagation();\n // Remove from memoryItems\n const index = memoryItems.findIndex((m: MemoryItem) => m.id === memory.id);\n if (index !== -1) {\n memoryItems.splice(index, 1);\n\n // If we're on the last page and it's now empty, go to previous page\n if (currentMemoryIndex > 0 && currentMemoryIndex >= memoryItems.length) {\n currentMemoryIndex = Math.max(0, currentMemoryIndex - memoriesPerPage);\n }\n\n memoriesCounter.textContent = `${memoryItems.length} Relevant Memories`;\n showMemories();\n }\n });\n\n actionsContainer.appendChild(addButton);\n actionsContainer.appendChild(menuButton);\n\n memoryContainer.appendChild(contentWrapper);\n memoryContainer.appendChild(actionsContainer);\n memoriesContent.appendChild(memoryContainer);\n\n // Add hover effect\n memoryContainer.addEventListener('mouseenter', () => {\n memoryContainer.style.backgroundColor = isExpanded ? '#18181B' : '#323232';\n });\n memoryContainer.addEventListener('mouseleave', () => {\n memoryContainer.style.backgroundColor = isExpanded ? '#1C1C1E' : '#27272A';\n });\n\n // Increment displayed count\n displayedCount++;\n }\n\n // Move to next memory\n index++;\n }\n\n // If we didn't display any memories but there are available ones,\n // reset the index and try again (this handles the case where all visible memories\n // have been filtered out)\n if (displayedCount === 0 && memoryItems.length > 0) {\n currentMemoryIndex = 0;\n showMemories();\n } else if (displayedCount === 0) {\n // If truly no memories available, show empty state\n showEmptyState();\n }\n }\n\n // Function to show empty state\n function showEmptyState() {\n memoriesContent.innerHTML = '';\n\n const emptyContainer = document.createElement('div');\n emptyContainer.style.cssText = `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n text-align: center;\n flex: 1;\n min-height: 200px;\n `;\n\n const emptyIcon = document.createElement('div');\n emptyIcon.innerHTML = ``;\n emptyIcon.style.marginBottom = '16px';\n\n const emptyText = document.createElement('div');\n emptyText.textContent = 'No relevant memories found';\n emptyText.style.cssText = `\n color: #71717A;\n font-size: 14px;\n font-weight: 500;\n `;\n\n emptyContainer.appendChild(emptyIcon);\n emptyContainer.appendChild(emptyText);\n memoriesContent.appendChild(emptyContainer);\n }\n\n // Navigation section at bottom\n const navigationSection = document.createElement('div');\n navigationSection.style.cssText = `\n display: flex;\n justify-content: center;\n gap: 12px;\n padding: 10px;\n border-top: none;\n flex-shrink: 0;\n `;\n\n // Navigation buttons\n const prevButton = document.createElement('button');\n prevButton.innerHTML = ``;\n prevButton.style.cssText = `\n background: #27272A;\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n `;\n\n const nextButton = document.createElement('button');\n nextButton.innerHTML = ``;\n nextButton.style.cssText = prevButton.style.cssText;\n\n // Update navigation button states\n function updateNavigationState(currentPage: number, totalPages: number) {\n if (memoryItems.length === 0 || totalPages === 0) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n return;\n }\n\n if (isLoading || currentPage <= 1) {\n prevButton.disabled = true;\n prevButton.style.opacity = '0.5';\n prevButton.style.cursor = 'not-allowed';\n } else {\n prevButton.disabled = false;\n prevButton.style.opacity = '1';\n prevButton.style.cursor = 'pointer';\n }\n\n if (isLoading || currentPage >= totalPages) {\n nextButton.disabled = true;\n nextButton.style.opacity = '0.5';\n nextButton.style.cursor = 'not-allowed';\n } else {\n nextButton.disabled = false;\n nextButton.style.opacity = '1';\n nextButton.style.cursor = 'pointer';\n }\n }\n\n // Add navigation button handlers\n prevButton.addEventListener('click', () => {\n if (!isLoading && currentMemoryIndex > 0) {\n currentMemoryIndex -= memoriesPerPage;\n showMemories();\n }\n });\n\n nextButton.addEventListener('click', () => {\n if (!isLoading && currentMemoryIndex < memoryItems.length - memoriesPerPage) {\n currentMemoryIndex += memoriesPerPage;\n showMemories();\n }\n });\n\n // Add hover effects\n [prevButton, nextButton].forEach(button => {\n button.addEventListener('mouseenter', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#323232';\n }\n });\n button.addEventListener('mouseleave', () => {\n if (!button.disabled) {\n button.style.backgroundColor = '#27272A';\n }\n });\n });\n\n // Assemble modal\n contentSection.appendChild(memoriesCounter);\n contentSection.appendChild(memoriesContent);\n\n modalContainer.appendChild(modalHeader);\n modalContainer.appendChild(contentSection);\n\n // Only add navigation when not in loading state\n if (!isLoading) {\n modalContainer.appendChild(navigationSection);\n navigationSection.appendChild(prevButton);\n navigationSection.appendChild(nextButton);\n }\n\n modalOverlay.appendChild(modalContainer);\n\n // Append to body\n document.body.appendChild(modalOverlay);\n\n // Show the first memory and update navigation\n showMemories();\n updateNavigationState(1, Math.ceil(memoryItems.length / memoriesPerPage));\n}\n\n// Shared function to update the input field with all collected memories\nfunction updateInputWithMemories() {\n const inputElement = getTextarea();\n\n if (!inputElement || allMemories.length === 0) {\n return;\n }\n\n // First, remove any existing memory content from the input\n let currentContent = getInputText(inputElement);\n const memoryMarker = '\\n\\n' + OPENMEMORY_PROMPTS.memory_marker_prefix;\n\n if (currentContent.includes(memoryMarker)) {\n currentContent = currentContent.substring(0, currentContent.indexOf(memoryMarker)).trim();\n }\n\n // Create the memory content string\n let memoriesContent = '\\n\\n' + OPENMEMORY_PROMPTS.memory_header_text + '\\n';\n\n // Add all memories to the content\n allMemories.forEach((mem, index) => {\n memoriesContent += `- ${mem}`;\n if (index < allMemories.length - 1) {\n memoriesContent += '\\n';\n }\n });\n\n // Set the input value with the cleaned content + memories\n setInputValue(inputElement, currentContent + memoriesContent);\n}\n\n// Add a function to get the memory_enabled state\nfunction getMemoryEnabledState(): Promise\n \n ![\"Mem0](\"${chrome.runtime.getURL('icons/mem0-claude-icon-p.png')}\"){kind=icon}
\n \n \n }){kind=icon}
\n OpenMemory\n \n \n \n \n `;\n fixedHeader.appendChild(tabsContainer);\n\n sidebarContainer.appendChild(fixedHeader);\n\n // Create content container\n const contentContainer = document.createElement('div');\n contentContainer.className = 'content';\n\n // Create memory count display\n const memoryCountContainer = document.createElement('div');\n memoryCountContainer.className = 'total-memories';\n memoryCountContainer.innerHTML = `\n \n \n `;\n\n // Create memories tab content\n const memoriesTabContent = document.createElement('div');\n memoriesTabContent.className = 'tab-content active';\n memoriesTabContent.id = 'memories-tab';\n memoriesTabContent.appendChild(memoryCountContainer);\n\n // Add memories section\n const memoriesSection = document.createElement('div');\n memoriesSection.className = 'section';\n memoriesSection.innerHTML = `\n \n \n \n