@nextpa/chat-core 0.1.0

package/dist/services/page-interaction/dom-executor.js

@@ -0,0 +1,172 @@
+import { querySelectorDeep } from './deep-query';
+const HIGHLIGHT_DEFAULT_COLOR = '#3b82f6';
+const HIGHLIGHT_DEFAULT_DURATION_MS = 3000;
+const HIGHLIGHT_FADEOUT_MS = 300;
+const HIGHLIGHT_PADDING_PX = 4;
+const HIGHLIGHT_BORDER_WIDTH = '3px';
+const HIGHLIGHT_BORDER_RADIUS = '4px';
+const HIGHLIGHT_OVERLAY_Z_INDEX = '2147483646';
+const WAIT_FOR_DEFAULT_TIMEOUT_MS = 3000;
+export function fillField(selector, value, doc = document) {
+    const element = findElement(selector, doc);
+    if (!element)
+        return elementNotFound(selector);
+    const tag = element.tagName;
+    if (tag === 'INPUT') {
+        return fillInputElement(element, value);
+    }
+    if (tag === 'SELECT') {
+        return fillSelectElement(element, value);
+    }
+    if (tag === 'TEXTAREA') {
+        setValueWithNativeSetter(element, value);
+        dispatchInputEvents(element);
+        return { success: true };
+    }
+    return { success: false, errorMessage: `Element '${selector}' is not a form input.` };
+}
+export function fillFields(fields, doc = document) {
+    const errors = [];
+    for (const [selector, value] of Object.entries(fields)) {
+        const result = fillField(selector, value, doc);
+        if (!result.success) {
+            errors.push(result.errorMessage || `Failed to fill '${selector}'.`);
+        }
+    }
+    if (errors.length > 0) {
+        return { success: false, errorMessage: errors.join(' ') };
+    }
+    return { success: true };
+}
+export function clickElement(selector, doc = document) {
+    const element = findElement(selector, doc);
+    if (!element)
+        return elementNotFound(selector);
+    if (isElementDisabled(element)) {
+        return { success: false, errorMessage: `Element '${selector}' is disabled and cannot be clicked.` };
+    }
+    if ('click' in element && typeof element.click === 'function') {
+        if (typeof element.scrollIntoView === 'function') {
+            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        element.click();
+        return { success: true };
+    }
+    return { success: false, errorMessage: `Element '${selector}' cannot be clicked.` };
+}
+function isElementDisabled(element) {
+    if (element.disabled)
+        return true;
+    if (element.getAttribute('aria-disabled') === 'true')
+        return true;
+    return element.hasAttribute('disabled');
+}
+export function scrollToElement(selector, doc = document) {
+    const element = findElement(selector, doc);
+    if (!element)
+        return elementNotFound(selector);
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    return { success: true };
+}
+export function highlightElement(selector, color = HIGHLIGHT_DEFAULT_COLOR, durationMs = HIGHLIGHT_DEFAULT_DURATION_MS, doc = document) {
+    const element = findElement(selector, doc);
+    if (!element)
+        return elementNotFound(selector);
+    const rect = element.getBoundingClientRect();
+    const overlay = doc.createElement('div');
+    const pad = HIGHLIGHT_PADDING_PX;
+    overlay.style.cssText = [
+        `position: fixed`,
+        `top: ${rect.top - pad}px`,
+        `left: ${rect.left - pad}px`,
+        `width: ${rect.width + pad * 2}px`,
+        `height: ${rect.height + pad * 2}px`,
+        `border: ${HIGHLIGHT_BORDER_WIDTH} solid ${color}`,
+        `border-radius: ${HIGHLIGHT_BORDER_RADIUS}`,
+        `pointer-events: none`,
+        `z-index: ${HIGHLIGHT_OVERLAY_Z_INDEX}`,
+        `box-shadow: 0 0 12px ${color}40`,
+        `transition: opacity ${HIGHLIGHT_FADEOUT_MS}ms ease-out`,
+    ].join('; ');
+    overlay.dataset.nextpaHighlight = 'true';
+    doc.body.appendChild(overlay);
+    setTimeout(() => {
+        overlay.style.opacity = '0';
+        setTimeout(() => overlay.remove(), HIGHLIGHT_FADEOUT_MS);
+    }, durationMs);
+    return { success: true };
+}
+export function waitForElement(selector, timeoutMs = WAIT_FOR_DEFAULT_TIMEOUT_MS, doc = document) {
+    return new Promise(resolve => {
+        if (findElement(selector, doc)) {
+            resolve({ success: true });
+            return;
+        }
+        let settled = false;
+        const finish = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            observer.disconnect();
+            clearTimeout(timer);
+            resolve(result);
+        };
+        const observer = new MutationObserver(() => {
+            if (findElement(selector, doc)) {
+                finish({ success: true });
+            }
+        });
+        const root = doc.body ?? doc.documentElement;
+        observer.observe(root, { childList: true, subtree: true, attributes: true });
+        const timer = setTimeout(() => finish({ success: false, errorMessage: `Element '${selector}' did not appear within ${timeoutMs}ms.` }), timeoutMs);
+    });
+}
+function findElement(selector, doc) {
+    try {
+        return querySelectorDeep(doc, selector);
+    }
+    catch {
+        return null;
+    }
+}
+function elementNotFound(selector) {
+    return { success: false, errorMessage: `Element '${selector}' not found on the page.` };
+}
+function fillInputElement(input, value) {
+    if (input.type === 'checkbox' || input.type === 'radio') {
+        const shouldCheck = value === 'true' || value === 'checked' || value === '1';
+        if (input.checked !== shouldCheck) {
+            input.checked = shouldCheck;
+            dispatchInputEvents(input);
+        }
+        return { success: true };
+    }
+    setValueWithNativeSetter(input, value);
+    dispatchInputEvents(input);
+    return { success: true };
+}
+function fillSelectElement(select, value) {
+    const option = Array.from(select.options).find(opt => opt.value === value || opt.text.trim().toLowerCase() === value.toLowerCase());
+    if (!option) {
+        return { success: false, errorMessage: `Option '${value}' not found in select element.` };
+    }
+    select.value = option.value;
+    dispatchInputEvents(select);
+    return { success: true };
+}
+function setValueWithNativeSetter(element, value) {
+    const prototype = element.tagName === 'INPUT'
+        ? HTMLInputElement.prototype
+        : HTMLTextAreaElement.prototype;
+    const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;
+    if (nativeSetter) {
+        nativeSetter.call(element, value);
+    }
+    else {
+        element.value = value;
+    }
+}
+function dispatchInputEvents(element) {
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+    element.dispatchEvent(new Event('change', { bubbles: true }));
+}

package/dist/services/page-interaction/dom-extractor.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonElement, FormElement, InteractiveElement, LinkElement, PageSnapshot, ProductCardElement, TableElement } from './types';
+export declare function extractPageSnapshot(doc?: Document, win?: Window): PageSnapshot;
+export declare function extractForms(doc?: Document, win?: Window): FormElement[];
+export declare function extractButtons(doc?: Document, win?: Window): ButtonElement[];
+export declare function extractLinks(doc?: Document, win?: Window): LinkElement[];
+export declare function extractTables(doc?: Document, win?: Window): TableElement[];
+export declare function extractProductCards(doc?: Document, win?: Window): ProductCardElement[];
+export declare function extractInteractiveElements(doc?: Document, win?: Window): InteractiveElement[];

package/dist/services/page-interaction/dom-extractor.js

@@ -0,0 +1,252 @@
+import { queryAllDeep } from './deep-query';
+import { generateSelector } from './selector-generator';
+const MAX_FORMS = 50;
+const MAX_BUTTONS = 100;
+const MAX_LINKS = 100;
+const MAX_TABLES = 20;
+const MAX_PRODUCT_CARDS = 50;
+const MAX_INTERACTIVE_ELEMENTS = 100;
+const MAX_SAMPLE_ROWS = 3;
+const MAX_TEXT_LENGTH = 200;
+const MIN_DESCRIPTION_LENGTH = 10;
+const ROW_CONTEXT_SELECTOR = 'tr, [role="row"], li, fieldset';
+const PRICE_PATTERN = /[$€£¥₹]\s*\d|\d{1,20}[.,]\d{2}\s*(?:€|USD|EUR|GBP)/;
+export function extractPageSnapshot(doc = document, win = globalThis) {
+    return {
+        url: win.location.href,
+        title: doc.title || null,
+        forms: extractForms(doc, win),
+        buttons: extractButtons(doc, win),
+        links: extractLinks(doc, win),
+        tables: extractTables(doc, win),
+        productCards: extractProductCards(doc, win),
+        otherInteractiveElements: extractInteractiveElements(doc, win),
+    };
+}
+function toFormElement(input, doc) {
+    const form = input.closest('form');
+    const formSelector = form ? generateSelector(form, doc) : null;
+    const tag = input.tagName;
+    const label = findLabel(input, doc);
+    return {
+        selector: generateSelector(input, doc),
+        formSelector,
+        label,
+        context: label ? null : findRowContext(input),
+        inputType: getInputType(input),
+        currentValue: getInputValue(input),
+        isRequired: input.required || input.getAttribute('aria-required') === 'true',
+        isDisabled: input.disabled,
+        options: tag === 'SELECT' ? getSelectOptions(input) : null,
+        placeholder: tag === 'INPUT' || tag === 'TEXTAREA'
+            ? input.placeholder || null
+            : null,
+    };
+}
+export function extractForms(doc = document, win = globalThis) {
+    const result = [];
+    const inputs = queryAllDeep(doc, 'input, select, textarea');
+    for (const input of inputs) {
+        if (result.length >= MAX_FORMS)
+            break;
+        if (!isVisible(input, win))
+            continue;
+        if (input.tagName === 'INPUT' && input.type === 'hidden')
+            continue;
+        result.push(toFormElement(input, doc));
+    }
+    return result;
+}
+export function extractButtons(doc = document, win = globalThis) {
+    const result = [];
+    const buttons = queryAllDeep(doc, 'button, [role="button"], input[type="submit"], input[type="button"]');
+    for (const button of buttons) {
+        if (result.length >= MAX_BUTTONS)
+            break;
+        if (!isVisible(button, win))
+            continue;
+        result.push({
+            selector: generateSelector(button, doc),
+            text: getElementText(button),
+            isDisabled: button.disabled ?? false,
+            type: button.getAttribute('type') || null,
+        });
+    }
+    return result;
+}
+export function extractLinks(doc = document, win = globalThis) {
+    const result = [];
+    const links = queryAllDeep(doc, 'a[href]');
+    for (const link of links) {
+        if (result.length >= MAX_LINKS)
+            break;
+        if (!isVisible(link, win))
+            continue;
+        const text = getElementText(link);
+        if (!text)
+            continue;
+        result.push({
+            selector: generateSelector(link, doc),
+            text,
+            href: link.href || null,
+        });
+    }
+    return result;
+}
+export function extractTables(doc = document, win = globalThis) {
+    const result = [];
+    const tables = queryAllDeep(doc, 'table');
+    for (const table of tables) {
+        if (result.length >= MAX_TABLES)
+            break;
+        if (!isVisible(table, win))
+            continue;
+        const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent?.trim() || '');
+        const rows = table.querySelectorAll('tbody tr');
+        const sampleRows = [];
+        for (let i = 0; i < Math.min(rows.length, MAX_SAMPLE_ROWS); i++) {
+            const cells = Array.from(rows[i].querySelectorAll('td')).map(td => td.textContent?.trim() || '');
+            sampleRows.push(cells);
+        }
+        result.push({
+            selector: generateSelector(table, doc),
+            headers,
+            rowCount: rows.length,
+            sampleRows: sampleRows.length > 0 ? sampleRows : null,
+        });
+    }
+    return result;
+}
+export function extractProductCards(doc = document, win = globalThis) {
+    const result = [];
+    const candidates = queryAllDeep(doc, '[class*="product"], [class*="card"], [class*="item"], [data-product], [itemtype*="Product"]');
+    for (const card of candidates) {
+        if (result.length >= MAX_PRODUCT_CARDS)
+            break;
+        if (!isVisible(card, win))
+            continue;
+        const priceEl = findElementWithPrice(card);
+        if (!priceEl)
+            continue;
+        const title = findCardTitle(card);
+        const img = card.querySelector('img');
+        result.push({
+            selector: generateSelector(card, doc),
+            title,
+            price: priceEl.textContent?.trim() || null,
+            imageUrl: img?.src || null,
+            description: findCardDescription(card, title),
+        });
+    }
+    return result;
+}
+export function extractInteractiveElements(doc = document, win = globalThis) {
+    const result = [];
+    const elements = queryAllDeep(doc, '[role="tab"], [role="tabpanel"], [role="menuitem"], [role="option"], [role="switch"], ' +
+        '[role="slider"], [role="spinbutton"], [role="combobox"], [role="listbox"], ' +
+        '[contenteditable="true"], details, summary');
+    for (const el of elements) {
+        if (result.length >= MAX_INTERACTIVE_ELEMENTS)
+            break;
+        if (!isVisible(el, win))
+            continue;
+        result.push({
+            selector: generateSelector(el, doc),
+            tagName: el.tagName.toLowerCase(),
+            text: getElementText(el),
+            role: el.getAttribute('role') || null,
+            ariaLabel: el.getAttribute('aria-label') || null,
+        });
+    }
+    return result;
+}
+function isVisible(element, win = globalThis) {
+    if (element.offsetParent === null && element.tagName !== 'BODY' && element.tagName !== 'HTML') {
+        const style = win.getComputedStyle(element);
+        if (style.position !== 'fixed' && style.position !== 'sticky') {
+            return false;
+        }
+    }
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+function findLabel(input, doc = document) {
+    const id = input.id;
+    if (id) {
+        const label = doc.querySelector(`label[for="${CSS.escape(id)}"]`);
+        if (label)
+            return label.textContent?.trim() || null;
+    }
+    const parentLabel = input.closest('label');
+    if (parentLabel) {
+        const text = parentLabel.textContent?.trim() || '';
+        const inputText = input.value || '';
+        return text.replace(inputText, '').trim() || null;
+    }
+    const ariaLabel = input.getAttribute('aria-label');
+    if (ariaLabel)
+        return ariaLabel;
+    const ariaLabelledBy = input.getAttribute('aria-labelledby');
+    if (ariaLabelledBy) {
+        const labelEl = doc.getElementById(ariaLabelledBy);
+        if (labelEl)
+            return labelEl.textContent?.trim() || null;
+    }
+    return null;
+}
+function findRowContext(input) {
+    const row = input.closest(ROW_CONTEXT_SELECTOR);
+    if (!row)
+        return null;
+    const text = row.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+    if (!text)
+        return null;
+    return text.length > MAX_TEXT_LENGTH ? text.substring(0, MAX_TEXT_LENGTH) + '...' : text;
+}
+function getInputType(input) {
+    if (input.tagName === 'SELECT')
+        return 'select';
+    if (input.tagName === 'TEXTAREA')
+        return 'textarea';
+    return input.type || 'text';
+}
+function getInputValue(input) {
+    if (input.tagName !== 'INPUT') {
+        return input.value || null;
+    }
+    const inputEl = input;
+    if (inputEl.type === 'checkbox' || inputEl.type === 'radio') {
+        return inputEl.checked ? 'checked' : 'unchecked';
+    }
+    return inputEl.value || null;
+}
+function getSelectOptions(select) {
+    return Array.from(select.options).map(opt => opt.text?.trim() || opt.value);
+}
+function getElementText(element) {
+    const text = element.textContent?.trim();
+    if (text && text.length > MAX_TEXT_LENGTH)
+        return text.substring(0, MAX_TEXT_LENGTH) + '...';
+    return text || null;
+}
+function findElementWithPrice(container) {
+    const allElements = container.querySelectorAll('*');
+    for (const el of allElements) {
+        if (el.children.length === 0 && el.textContent && PRICE_PATTERN.test(el.textContent)) {
+            return el;
+        }
+    }
+    return null;
+}
+function findCardTitle(card) {
+    const heading = card.querySelector('h1, h2, h3, h4, h5, h6, [class*="title"], [class*="name"]');
+    return heading?.textContent?.trim() || null;
+}
+function findCardDescription(card, title) {
+    const desc = card.querySelector('p, [class*="desc"], [class*="summary"]');
+    const text = desc?.textContent?.trim() || null;
+    if (text && text !== title && text.length > MIN_DESCRIPTION_LENGTH) {
+        return text.length > MAX_TEXT_LENGTH ? text.substring(0, MAX_TEXT_LENGTH) + '...' : text;
+    }
+    return null;
+}

package/dist/services/page-interaction/extension-bridge.d.ts

@@ -0,0 +1,10 @@
+import type { ExternalExecutor } from './page-interaction-handler';
+export type PageContext = {
+    url: string;
+    title: string;
+};
+type PageContextCallback = (context: PageContext) => void;
+type SetExternalExecutorFn = (executor: ExternalExecutor | null) => void;
+export declare function refreshExtensionContext(): Promise<PageContext | null>;
+export declare function initExtensionBridge(setExternalExecutors: ReadonlyArray<SetExternalExecutorFn>, onPageContext?: PageContextCallback): void;
+export {};

package/dist/services/page-interaction/extension-bridge.js

@@ -0,0 +1,86 @@
+const RESPONSE_TIMEOUT_MS = 15_000;
+const CONTEXT_REFRESH_TIMEOUT_MS = 2000;
+let bridgeParentOrigin = null;
+let contextRefreshResolve = null;
+function getReferrerOrigin() {
+    try {
+        return new URL(document.referrer).origin;
+    }
+    catch {
+        return '*';
+    }
+}
+function isIframe() {
+    return globalThis.parent !== globalThis;
+}
+export function refreshExtensionContext() {
+    const targetOrigin = bridgeParentOrigin;
+    if (!isIframe() || !targetOrigin)
+        return Promise.resolve(null);
+    return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+            contextRefreshResolve = null;
+            resolve(null);
+        }, CONTEXT_REFRESH_TIMEOUT_MS);
+        contextRefreshResolve = (context) => {
+            clearTimeout(timer);
+            contextRefreshResolve = null;
+            resolve(context);
+        };
+        globalThis.parent.postMessage({ type: 'nextpa-context-refresh' }, targetOrigin);
+    });
+}
+export function initExtensionBridge(setExternalExecutors, onPageContext) {
+    if (!isIframe())
+        return;
+    const pendingRequests = new Map();
+    const executor = (request) => {
+        if (!bridgeParentOrigin) {
+            return Promise.resolve({ success: false, errorMessage: 'Extension bridge not initialized.' });
+        }
+        const targetOrigin = bridgeParentOrigin;
+        return new Promise((resolve) => {
+            const timer = setTimeout(() => {
+                pendingRequests.delete(request.requestId);
+                resolve({ success: false, errorMessage: 'Extension bridge timeout.' });
+            }, RESPONSE_TIMEOUT_MS);
+            pendingRequests.set(request.requestId, { resolve, timer });
+            globalThis.parent.postMessage({
+                type: 'nextpa-page-interaction-request',
+                requestId: request.requestId,
+                action: request.action,
+                selector: request.selector,
+                value: request.value,
+                fields: request.fields,
+            }, targetOrigin);
+        });
+    };
+    globalThis.addEventListener('message', (event) => {
+        if (bridgeParentOrigin && event.origin !== bridgeParentOrigin)
+            return;
+        if (event.data?.type === 'nextpa-extension-init') {
+            bridgeParentOrigin = event.origin;
+            for (const setExecutor of setExternalExecutors) {
+                setExecutor(executor);
+            }
+        }
+        if (event.data?.type === 'nextpa-page-context') {
+            const context = { url: event.data.url, title: event.data.title };
+            if (contextRefreshResolve) {
+                contextRefreshResolve(context);
+            }
+            onPageContext?.(context);
+        }
+        if (event.data?.type === 'nextpa-page-interaction-response') {
+            const { requestId, result } = event.data;
+            const pending = pendingRequests.get(requestId);
+            if (pending) {
+                clearTimeout(pending.timer);
+                pendingRequests.delete(requestId);
+                pending.resolve(result);
+            }
+        }
+    });
+    const referrerOrigin = getReferrerOrigin();
+    globalThis.parent.postMessage({ type: 'nextpa-extension-ready' }, referrerOrigin);
+}

package/dist/services/page-interaction/iframe-navigation-manager.d.ts

@@ -0,0 +1,28 @@
+type NavigateResult = {
+    status: 'iframe-loaded';
+} | {
+    status: 'blocked';
+    reason: string;
+};
+type CloseCallback = () => void;
+export declare class IframeNavigationManager {
+    private overlay;
+    private iframe;
+    private readonly closeCallbacks;
+    private widgetElevated;
+    private previousOverflow;
+    navigateTo(url: string): Promise<NavigateResult>;
+    close(): void;
+    isActive(): boolean;
+    getTargetDocument(): Document;
+    getTargetWindow(): Window;
+    onClose(callback: CloseCallback): void;
+    private createIframeOverlay;
+    private navigateExistingIframe;
+    private loadUrlInIframe;
+    private elevateWidget;
+    private hideParentScrollbar;
+    private restoreParentScrollbar;
+    private cleanup;
+}
+export {};