Page context follow ups (#1936)

* Only run in the sidebar

* Add to the windows bundle

* Add duck-ai-listener to windows

* Add replaceState listener

* Move to non-isolated so we can listen to URL changes

* Detect duck.ai better

* Ignore URL listeners for frames and duckai

* Ignore duck:// urls for collection

* Remove error

* Move logging

* lint fix

* Add visibilitychange listener

* Remove collect subscription

* Clean up mutation listener to stop after cache is gone, simplify cache logic

* Convert text content to simple markdown representation

* Add remote config wrappers

* Truncate page context at the node collection and add flag
Add truncation in page warning.

* Add prompt explict markers

* Clean up

* Ensure mutation observer is initialized correctly

* Rename message bridge logger

* Remove arg

* Change prompt a little

* Lint fixes

* Fix unit test not to be hardcoded

Author: jonathanKingston

injected/src/content-feature.js

@@ -62,6 +62,40 @@ export default class ContentFeature extends ConfigFeature {
         return this.args?.debug || false;
     }
 
+    get shouldLog() {
+        return this.isDebug;
+    }
+
+    /**
+     * Logging utility for this feature (Stolen some inspo from DuckPlayer logger, will unify in the future)
+     */
+    get log() {
+        const shouldLog = this.shouldLog;
+        const prefix = `${this.name.padEnd(20, ' ')} |`;
+
+        return {
+            // These are getters to have the call site be the reported line number.
+            get info() {
+                if (!shouldLog) {
+                    return () => {};
+                }
+                return console.log.bind(console, prefix);
+            },
+            get warn() {
+                if (!shouldLog) {
+                    return () => {};
+                }
+                return console.warn.bind(console, prefix);
+            },
+            get error() {
+                if (!shouldLog) {
+                    return () => {};
+                }
+                return console.error.bind(console, prefix);
+            },
+        };
+    }
+
     get desktopModeEnabled() {
         return this.args?.desktopModeEnabled || false;
     }

injected/src/features.js

@@ -37,7 +37,7 @@ const otherFeatures = /** @type {const} */ ([
 /** @typedef {baseFeatures[number]|otherFeatures[number]} FeatureName */
 /** @type {Record<string, FeatureName[]>} */
 export const platformSupport = {
-    apple: ['webCompat', 'duckPlayerNative', ...baseFeatures, 'duckAiListener'],
+    apple: ['webCompat', 'duckPlayerNative', ...baseFeatures, 'duckAiListener', 'pageContext'],
     'apple-isolated': [
         'duckPlayer',
         'duckPlayerNative',
@@ -46,7 +46,6 @@ export const platformSupport = {
         'clickToLoad',
         'messageBridge',
         'favicon',
-        'pageContext',
     ],
     android: [...baseFeatures, 'webCompat', 'breakageReporting', 'duckPlayer', 'messageBridge'],
     'android-broker-protection': ['brokerProtection'],
@@ -72,6 +71,8 @@ export const platformSupport = {
         'breakageReporting',
         'messageBridge',
         'webCompat',
+        'pageContext',
+        'duckAiListener',
     ],
     firefox: ['cookie', ...baseFeatures, 'clickToLoad'],
     chrome: ['cookie', ...baseFeatures, 'clickToLoad'],

injected/src/features/duck-ai-listener.js

@@ -1,5 +1,5 @@
 import ContentFeature from '../content-feature.js';
-import { isBeingFramed, isDuckAi } from '../utils.js';
+import { isBeingFramed, isDuckAiSidebar } from '../utils.js';
 
 /**
  * Duck AI Listener Feature
@@ -39,37 +39,6 @@ export default class DuckAiListener extends ContentFeature {
     /** @type {HTMLButtonElement | null} */
     sendButton = null;
 
-    get shouldLog() {
-        return this.isDebug;
-    }
-
-    /**
-     * Logging utility for this feature
-     */
-    get log() {
-        const shouldLog = this.shouldLog;
-        return {
-            get info() {
-                if (!shouldLog) {
-                    return () => {};
-                }
-                return console.log;
-            },
-            get warn() {
-                if (!shouldLog) {
-                    return () => {};
-                }
-                return console.warn;
-            },
-            get error() {
-                if (!shouldLog) {
-                    return () => {};
-                }
-                return console.error;
-            },
-        };
-    }
-
     init() {
         // Only activate on duckduckgo.com
         if (!this.shouldActivate()) {
@@ -97,7 +66,7 @@ export default class DuckAiListener extends ContentFeature {
         if (isBeingFramed()) {
             return false;
         }
-        return isDuckAi();
+        return isDuckAiSidebar();
     }
 
     /**
@@ -410,7 +379,7 @@ export default class DuckAiListener extends ContentFeature {
             font-size: 12px;
             color: rgb(102, 102, 102);
         `;
-        subtitle.textContent = 'Page Content';
+        subtitle.textContent = this.pageData.truncated ? 'Page Content (Truncated)' : 'Page Content';
 
         contentInfo.appendChild(title);
         contentInfo.appendChild(subtitle);
@@ -429,6 +398,24 @@ export default class DuckAiListener extends ContentFeature {
             cursor: pointer;
         `;
 
+        // Add warning icon if content is truncated
+        const warningIcon = document.createElement('div');
+        if (this.pageData.truncated) {
+            warningIcon.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8 1.5L15 14H1L8 1.5Z" stroke="#ff6b35" stroke-width="1.5" fill="none"/>
+                    <path d="M8 6V9M8 11H8.01" stroke="#ff6b35" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+            `;
+            warningIcon.style.cssText = `
+                flex-shrink: 0;
+                color: #ff6b35;
+                cursor: pointer;
+                margin-left: 4px;
+            `;
+            warningIcon.title = 'Content has been truncated due to size limits';
+        }
+
         // Add dark mode support
         if (this.isDarkMode()) {
             this.contextChip.style.background = 'rgba(255, 255, 255, 0.1)';
@@ -443,6 +430,9 @@ export default class DuckAiListener extends ContentFeature {
         this.contextChip.appendChild(icon);
         this.contextChip.appendChild(contentInfo);
         this.contextChip.appendChild(infoIcon);
+        if (this.pageData.truncated) {
+            this.contextChip.appendChild(warningIcon);
+        }
 
         this.log.info('Context chip assembled, about to insert into DOM');
 
@@ -594,6 +584,11 @@ export default class DuckAiListener extends ContentFeature {
                     this.pageData = pageDataParsed;
                     this.globalPageContext = pageDataParsed.content;
 
+                    // Check for truncated content and warn user
+                    if (pageDataParsed.truncated) {
+                        this.log.warn('Page content has been truncated due to size limits');
+                    }
+
                     this.createContextChip();
                     this.setupMessageInterception();
                 }
@@ -741,6 +736,7 @@ export default class DuckAiListener extends ContentFeature {
     setupValuePropertyDescriptor(textarea) {
         // Store the original value property descriptor
         const originalDescriptor = Object.getOwnPropertyDescriptor(textarea, 'value');
+        this.randomNumber = window.crypto?.randomUUID?.() || Math.floor(Math.random() * 1000);
 
         // Override the value property using arrow functions to capture this context
         Object.defineProperty(textarea, 'value', {
@@ -749,9 +745,36 @@ export default class DuckAiListener extends ContentFeature {
                 if (originalDescriptor && originalDescriptor.get) {
                     const currentValue = originalDescriptor.get.call(textarea) || '';
                     const pageContext = this.globalPageContext || '';
+                    const randomNumber = this.randomNumber;
+                    const instructions =
+                        this.getFeatureSetting('instructions') ||
+                        `
+You are a helpful assistant that can answer questions and help with tasks.
+Do not include prompt, page-title, page-context, or instructions tags in your response.
+Answer the prompt using the page-title, and page-context ONLY if it's relevant to answering the prompt.`;
 
                     if (pageContext && currentValue) {
-                        return `${currentValue}\n\n---\n\nPage Context:\n${pageContext}`;
+                        const truncatedWarning = this.pageData?.truncated ? ' (Content was truncated due to size limits)\n' : '\n';
+                        return `Prompt:
+<prompt-${randomNumber}>
+${currentValue}
+</prompt-${randomNumber}>
+
+Instructions:
+<instructions-${randomNumber}>
+${instructions}
+</instructions-${randomNumber}>
+
+Page Title:
+<page-title-${randomNumber}>
+${this.pageData.title}
+</page-title-${randomNumber}>
+
+Page Context:
+<page-context-${randomNumber}>
+${pageContext}
+${truncatedWarning}
+</page-context-${randomNumber}>`;
                     }
 
                     return currentValue;
@@ -766,42 +789,4 @@ export default class DuckAiListener extends ContentFeature {
             configurable: true,
         });
     }
-
-    /**
-     * Set textarea value in a React-compatible way
-     * Based on the approach from broker-protection/actions/fill-form.js
-     * @param {HTMLTextAreaElement} textarea - The textarea element
-     * @param {string} value - The value to set
-     */
-    setReactTextAreaValue(textarea, value) {
-        try {
-            // Access the original setter to bypass React's controlled component behavior
-            const originalSet = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
-
-            if (!originalSet || typeof originalSet.call !== 'function') {
-                this.log.warn('Cannot access original value setter, falling back to direct assignment');
-                textarea.value = value;
-                return;
-            }
-
-            // Set the textarea value using the original setter and trigger React events
-            textarea.dispatchEvent(new Event('keydown', { bubbles: true }));
-            originalSet.call(textarea, value);
-
-            const events = [
-                new Event('input', { bubbles: true }),
-                new Event('keyup', { bubbles: true }),
-                new Event('change', { bubbles: true }),
-            ];
-
-            // Dispatch events twice to ensure React picks up the change
-            events.forEach((ev) => textarea.dispatchEvent(ev));
-            originalSet.call(textarea, value);
-            events.forEach((ev) => textarea.dispatchEvent(ev));
-        } catch (error) {
-            this.log.error('Error setting React textarea value:', error);
-            // Fallback to direct assignment
-            textarea.value = value;
-        }
-    }
 }

injected/src/features/message-bridge.js

@@ -69,7 +69,7 @@ export class MessageBridge extends ContentFeature {
          * @param {{name: string; id: string} & Record<string, any>} incoming
          */
         const reply = (incoming) => {
-            if (!args.messageSecret) return this.log('ignoring because args.messageSecret was absent');
+            if (!args.messageSecret) return this.log.info('ignoring because args.messageSecret was absent');
             const eventName = appendToken(incoming.name + '-' + incoming.id);
             const event = new captured.CustomEvent(eventName, { detail: incoming });
             captured.dispatchEvent(event);
@@ -82,20 +82,20 @@ export class MessageBridge extends ContentFeature {
          */
         const accept = (ClassType, callback) => {
             captured.addEventListener(appendToken(ClassType.NAME), (/** @type {CustomEvent<unknown>} */ e) => {
-                this.log(`${ClassType.NAME}`, JSON.stringify(e.detail));
+                this.log.info(`${ClassType.NAME}`, JSON.stringify(e.detail));
                 const instance = ClassType.create(e.detail);
                 if (instance) {
                     callback(instance);
                 } else {
-                    this.log('Failed to create an instance');
+                    this.log.info('Failed to create an instance');
                 }
             });
         };
 
         /**
          * These are all the messages we accept from the page-world.
          */
-        this.log(`bridge is installing...`);
+        this.log.info(`bridge is installing...`);
         accept(InstallProxy, (install) => {
             this.installProxyFor(install, args.messagingConfig, reply);
         });
@@ -115,17 +115,17 @@ export class MessageBridge extends ContentFeature {
      */
     installProxyFor(install, config, reply) {
         const { id, featureName } = install;
-        if (this.proxies.has(featureName)) return this.log('ignoring `installProxyFor` because it exists', featureName);
+        if (this.proxies.has(featureName)) return this.log.info('ignoring `installProxyFor` because it exists', featureName);
         const allowed = this.getFeatureSettingEnabled(featureName);
         if (!allowed) {
-            return this.log('not installing proxy, because', featureName, 'was not enabled');
+            return this.log.info('not installing proxy, because', featureName, 'was not enabled');
         }
 
         const ctx = { ...this.messaging.messagingContext, featureName };
         const messaging = new Messaging(ctx, config);
         this.proxies.set(featureName, messaging);
 
-        this.log('did install proxy for ', featureName);
+        this.log.info('did install proxy for ', featureName);
         reply(new DidInstall({ id }));
     }
 
@@ -137,9 +137,9 @@ export class MessageBridge extends ContentFeature {
         const { id, featureName, method, params } = request;
 
         const proxy = this.proxies.get(featureName);
-        if (!proxy) return this.log('proxy was not installed for ', featureName);
+        if (!proxy) return this.log.info('proxy was not installed for ', featureName);
 
-        this.log('will proxy', request);
+        this.log.info('will proxy', request);
 
         try {
             const result = await proxy.request(method, params);
@@ -168,9 +168,9 @@ export class MessageBridge extends ContentFeature {
     proxySubscription(subscription, reply) {
         const { id, featureName, subscriptionName } = subscription;
         const proxy = this.proxies.get(subscription.featureName);
-        if (!proxy) return this.log('proxy was not installed for', featureName);
+        if (!proxy) return this.log.info('proxy was not installed for', featureName);
 
-        this.log('will setup subscription', subscription);
+        this.log.info('will setup subscription', subscription);
 
         // cleanup existing subscriptions first
         const prev = this.subscriptions.get(id);
@@ -196,7 +196,7 @@ export class MessageBridge extends ContentFeature {
      */
     removeSubscription(id) {
         const unsubscribe = this.subscriptions.get(id);
-        this.log(`will remove subscription`, id);
+        this.log.info(`will remove subscription`, id);
         unsubscribe?.();
         this.subscriptions.delete(id);
     }
@@ -206,21 +206,12 @@ export class MessageBridge extends ContentFeature {
      */
     proxyNotification(notification) {
         const proxy = this.proxies.get(notification.featureName);
-        if (!proxy) return this.log('proxy was not installed for', notification.featureName);
+        if (!proxy) return this.log.info('proxy was not installed for', notification.featureName);
 
-        this.log('will proxy notification', notification);
+        this.log.info('will proxy notification', notification);
         proxy.notify(notification.method, notification.params);
     }
 
-    /**
-     * @param {Parameters<console['log']>} args
-     */
-    log(...args) {
-        if (this.isDebug) {
-            console.log('[isolated]', ...args);
-        }
-    }
-
     load(_args) {}
 }