@envive-ai/react-hooks 0.2.4 → 0.2.6-alpha

package/dist/src/application/utils/elementObserver.js

@@ -0,0 +1,186 @@
+import { createPortal } from 'react-dom';
+import { MutationHelper } from './mutationHelper';
+/**
+ * The `ElementObserver` class monitors all changes related to the specific element it is responsible for.
+ * It is automatically instantiated by the `useElementObserver` hook, which manages all instances of this class.
+ *
+ * How it works:
+ *
+ * Each instance of `ElementObserver` holds several pieces of information related to the node it is monitoring,
+ * such as the node's selector and its `MutationObserver`. This class is responsible for translating raw node
+ * changes into a more user-friendly format. For example, when the node is added to the DOM, the `ElementObserver`
+ * is notified by the `DOMObserver`, which triggers the `onAdd` callback function on the respective `useElementObserver`
+ * instance.
+ *
+ * Instances of `ElementObserver` are fully managed by the `useElementObserver` hook, requiring no additional configuration.
+ * When the hook is destroyed, its corresponding `ElementObserver` instance is automatically removed.
+ *
+ */
+export class ElementObserver {
+    constructor(selector) {
+        this.selector = selector;
+        this.mutation = null;
+        this.node = null;
+        this.eventListeners = new Map();
+        this.classAdded = new Map();
+        this.classRemoved = new Map();
+        this.nodeDisplay = 'block';
+        this.addFn = () => { };
+        this.removeFn = () => { };
+        this.changeFn = () => { };
+        this.classChangeFn = () => { };
+        this.addChildFn = undefined;
+        this.removeChildFn = undefined;
+        this.resetFn = () => { };
+    }
+    handleAttributes(mutationRecord) {
+        mutationRecord.filter(MutationHelper.isClass).forEach((mutation) => {
+            MutationHelper.fireClassChange(mutation, this.node, this.classChangeFn);
+            MutationHelper.fireClassAdded(mutation, this.node, this.classAdded);
+            MutationHelper.fireClassRemoved(mutation, this.node, this.classRemoved);
+        });
+    }
+    handleChildList(mutationRecord) {
+        if (!this.addChildFn && !this.removeChildFn) {
+            return;
+        }
+        mutationRecord.filter(MutationHelper.isChildList).forEach((mutation) => {
+            MutationHelper.fireSubtreeChange(mutation.addedNodes, this.addChildFn);
+            MutationHelper.fireSubtreeChange(mutation.removedNodes, this.removeChildFn);
+        });
+    }
+    addInitialListeners() {
+        this.eventListeners.forEach((v, k) => { var _a; return (_a = this.node) === null || _a === void 0 ? void 0 : _a.addEventListener(k, v); });
+    }
+    clearEventListeners() {
+        this.eventListeners.forEach((v, k) => { var _a; return (_a = this.node) === null || _a === void 0 ? void 0 : _a.removeEventListener(k, v); });
+        this.eventListeners.clear();
+    }
+    renew(newNode) {
+        if (newNode) {
+            this.destroy();
+            this.watch(newNode);
+        }
+    }
+    getSelector() {
+        return this.selector;
+    }
+    getNode() {
+        return this.node;
+    }
+    synchronize() {
+        const parsedNode = this.getSelector().parse();
+        if (this.getNode() !== parsedNode) {
+            this.renew(parsedNode);
+            return;
+        }
+        if (!this.getNode() && parsedNode) {
+            this.watch(parsedNode);
+            return;
+        }
+        if (this.getNode() && !parsedNode) {
+            this.destroy();
+        }
+    }
+    init() {
+        const node = this.getSelector().parse();
+        if (node) {
+            this.watch(node);
+        }
+    }
+    watch(node) {
+        if (!this.mutation) {
+            this.mutation = new MutationObserver((mutationRecord) => {
+                this.handleAttributes(mutationRecord);
+                this.handleChildList(mutationRecord);
+                this.changeFn(this.node);
+            });
+            this.mutation.observe(node, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeOldValue: true,
+            });
+            this.node = node;
+            this.addFn(this.node);
+            this.addInitialListeners();
+        }
+    }
+    destroy() {
+        var _a;
+        this.resetFn();
+        this.removeFn(this.node);
+        (_a = this.mutation) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearEventListeners();
+        this.classAdded.clear();
+        this.classRemoved.clear();
+        this.mutation = null;
+        this.node = null;
+    }
+    render(fn) {
+        if (this.node) {
+            return createPortal(fn(), this.node);
+        }
+    }
+    fire(event) {
+        if (this.node) {
+            this.node.dispatchEvent(new MouseEvent(event, {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }));
+        }
+    }
+    show() {
+        var _a;
+        const display = (_a = this.node) === null || _a === void 0 ? void 0 : _a.style.display;
+        if (this.node && display === 'none') {
+            this.node.style.display = this.nodeDisplay || 'block';
+        }
+    }
+    hide() {
+        var _a;
+        const display = (_a = this.node) === null || _a === void 0 ? void 0 : _a.style.display;
+        if (this.node && display !== 'none') {
+            this.nodeDisplay = display || 'block';
+            this.node.style.display = 'none';
+        }
+    }
+    registerEvent(event, fn) {
+        if (this.node) {
+            const previousFn = this.eventListeners.get(event);
+            if (previousFn) {
+                this.node.removeEventListener(event, previousFn);
+            }
+            this.node.addEventListener(event, fn);
+        }
+        this.eventListeners.set(event, fn);
+    }
+    registerOnReset(fn) {
+        this.resetFn = fn;
+    }
+    registerOnChange(fn) {
+        this.changeFn = fn;
+    }
+    registerOnAdd(fn) {
+        this.addFn = fn;
+    }
+    registerOnRemove(fn) {
+        this.removeFn = fn;
+    }
+    registerOnclassChange(fn) {
+        this.classChangeFn = fn;
+    }
+    registerOnAddChild(fn) {
+        this.addChildFn = fn;
+    }
+    registerOnRemoveChild(fn) {
+        this.removeChildFn = fn;
+    }
+    registerOnClassAdded(className, fn) {
+        this.classAdded.set(className, fn);
+    }
+    registerOnClassRemoved(className, fn) {
+        this.classRemoved.set(className, fn);
+    }
+}

package/dist/src/application/utils/imageFilter.js

@@ -0,0 +1,11 @@
+import { MessageType } from '@envive-ai/types';
+export const getRecentProductImageUrls = (lastMessages, currentProductId) => {
+    const productMessages = lastMessages
+        .filter((message) => { var _a; return message.type === MessageType.Product && ((_a = message.metadata) === null || _a === void 0 ? void 0 : _a.imageUrl); })
+        .map((m) => m);
+    // put added product image at the top of the list
+    return [
+        ...productMessages.filter((m) => { var _a; return ((_a = m.metadata) === null || _a === void 0 ? void 0 : _a.id) === currentProductId; }),
+        ...productMessages.filter((m) => { var _a; return ((_a = m.metadata) === null || _a === void 0 ? void 0 : _a.id) !== currentProductId; }),
+    ].map((m) => m.metadata.imageUrl);
+};

package/dist/src/application/utils/index.js

@@ -0,0 +1,21 @@
+// utils
+export * from './analyticsUtils';
+export * from './coreContextToApiContext';
+export * from './coreUserEventToApiUserEvent';
+export * from './divideArray';
+export * from './domObserver';
+export * from './elementObserver';
+export * from './imageFilter';
+export * from './merchantUtils';
+export * from './messageFromFormSubmittedEvent';
+export * from './messageFromQueryEvent';
+export * from './messageFromResponse';
+export * from './messageFromSuggestionEvent';
+export * from './mutationHelper';
+export * from './nextMessageRequestToApiRequest';
+export * from './nodeSelector';
+export * from './overrides';
+export * from './stringUtils';
+export * from './supportedEventRequestToApiRequest';
+export * from './urlsParser';
+export * from './validation';

package/dist/src/application/utils/merchantUtils.js

@@ -0,0 +1,15 @@
+export const prepareMerchantPage = () => {
+    let metaViewport = document.querySelector("meta[name='viewport']");
+    if (metaViewport) {
+        const content = metaViewport.getAttribute("content");
+        const hasMaximumScale = content === null || content === void 0 ? void 0 : content.includes("maximum-scale=1");
+        if (!hasMaximumScale) {
+            metaViewport.setAttribute("content", `${content}, maximum-scale=1`);
+        }
+        return;
+    }
+    metaViewport = document.createElement("meta");
+    metaViewport.setAttribute("name", "viewport");
+    metaViewport.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1");
+    document.head.appendChild(metaViewport);
+};

package/dist/src/application/utils/messageFromFormSubmittedEvent.js

@@ -0,0 +1,19 @@
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { MessageRole, MessageType, } from '@envive-ai/types';
+export const messageFromFormSubmittedEvent = (event, formResponseAttributes) => {
+    if (event.category !== UserEventCategory.FormSubmitted) {
+        return undefined;
+    }
+    const formStringContents = Object.entries(formResponseAttributes.schema.properties)
+        .map(([key, value]) => `${value.title}: ${event.attributes.filledSchema[key]}`)
+        .join('\n');
+    return {
+        id: event.eventId,
+        role: MessageRole.User,
+        type: MessageType.QueryTyped,
+        createdAt: event.createdAt,
+        metadata: {
+            content: formStringContents,
+        },
+    };
+};

package/dist/src/application/utils/messageFromQueryEvent.js

@@ -0,0 +1,35 @@
+import { MessageRole, MessageType } from '@envive-ai/types';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+/**
+ * Transforms a query UserEvent object into a Message object for presentation.
+ *
+ * @param event The user event object received from the server
+ *
+ * @returns A Message if the event is a query event, otherwise undefined
+ */
+export const messageFromQueryEvent = (event) => {
+    if (event.category === UserEventCategory.QueryTyped) {
+        return {
+            id: event.eventId,
+            role: MessageRole.User,
+            type: MessageType.QueryTyped,
+            createdAt: event.createdAt,
+            metadata: {
+                content: event.attributes.query,
+            },
+        };
+    }
+    if (event.category === UserEventCategory.Search) {
+        return {
+            id: event.eventId,
+            role: MessageRole.User,
+            type: MessageType.Search,
+            createdAt: event.createdAt,
+            metadata: {
+                searchTerm: event.attributes.searchTerm || '',
+                selectedFilters: event.attributes.selectedFilters || [],
+            },
+        };
+    }
+    return undefined;
+};

package/dist/src/application/utils/messageFromResponse.js

@@ -0,0 +1,123 @@
+import { MessageType, MessageRole } from "src/types";
+import { ResponseCategory } from "@spiffy-ai/commerce-api-client";
+/**
+ * Transforms a server Response object into a Message object for presentation.
+ *
+ * @param response The response object received from the server containing model generated content
+ *
+ * @returns A Message if the response contains known attributes, undefined otherwise
+ */
+export const messageFromResponse = (response) => {
+    var _a;
+    if (response == null) {
+        return undefined;
+    }
+    if (response.category === ResponseCategory.Text) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            type: MessageType.Text,
+            role: MessageRole.Assistant,
+            metadata: {
+                content: response.attributes.content,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.Product) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.Product,
+            metadata: {
+                ...response.attributes,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.Review) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            type: MessageType.Review,
+            role: MessageRole.Assistant,
+            metadata: {
+                review: response.attributes.review,
+                reviewer: response.attributes.reviewer,
+                stars: response.attributes.stars,
+                title: response.attributes.title,
+                richInformation: response.attributes.richInformation,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.Separator) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            type: MessageType.Separator,
+            role: MessageRole.Assistant,
+        };
+    }
+    if (response.category === ResponseCategory.Page) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.Page,
+            metadata: {
+                ...response.attributes,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.ProductSearch) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.ProductSearch,
+            metadata: {
+                ...response.attributes,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.ProductSearchFilter) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.ProductSearchFilter,
+            metadata: {
+                ...response.attributes,
+            },
+        };
+    }
+    if (response.category === ResponseCategory.Form) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.Form,
+            metadata: {
+                formType: (_a = response.attributes.formCategory) === null || _a === void 0 ? void 0 : _a.formType,
+                fields: Object.entries(response.attributes.schema.properties).map(([key, value]) => ({
+                    key,
+                    title: value.title,
+                    type: value.type,
+                    format: value.format,
+                    required: response.attributes.schema.required.includes(key),
+                })),
+            },
+        };
+    }
+    if (response.category === ResponseCategory.Order) {
+        return {
+            id: response.id,
+            createdAt: response.createdAt,
+            role: MessageRole.Assistant,
+            type: MessageType.Order,
+            metadata: {
+                ...response.attributes,
+            },
+        };
+    }
+    return undefined;
+};

package/dist/src/application/utils/messageFromSuggestionEvent.js

@@ -0,0 +1,27 @@
+import { MessageRole, MessageType } from "src/types";
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
+/**
+ * Transforms a UserEvent object into a Message object for presentation.
+ *
+ * @param event The UserEvent object received from the server
+ * @param suggestions A list of generated suggestions to match the event to
+ *
+ * @returns A Message if the event is a suggestion click event, undefined otherwise
+ */
+export const messageFromSuggestionEvent = (event, suggestions) => {
+    var _a, _b;
+    if (event.category === UserEventCategory.SuggestionClicked) {
+        const { suggestionId } = event.attributes;
+        return {
+            id: event.eventId,
+            role: MessageRole.User,
+            type: MessageType.SuggestionClicked,
+            createdAt: event.createdAt,
+            metadata: {
+                suggestionId,
+                suggestionContent: (_b = (_a = suggestions.find((s) => s.id === suggestionId)) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "",
+            },
+        };
+    }
+    return undefined;
+};

package/dist/src/application/utils/mouseEventTypes.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/application/utils/mutationHelper.js

@@ -0,0 +1,33 @@
+const compareTokens = (original, comparison) => {
+    const originalTokens = new Set(original.split(' '));
+    const comparisonTokens = new Set(comparison.split(' '));
+    return [...originalTokens].filter((token) => !comparisonTokens.has(token));
+};
+export class MutationHelper {
+    static fireClassChange(record, node, fn) {
+        if (node && record.oldValue !== (node === null || node === void 0 ? void 0 : node.classList.value)) {
+            fn(node === null || node === void 0 ? void 0 : node.classList);
+        }
+    }
+    static fireClassAdded(record, node, classMap) {
+        if (node && record.oldValue) {
+            const tokens = compareTokens(node === null || node === void 0 ? void 0 : node.classList.value, record.oldValue);
+            tokens.forEach((className) => { var _a; return (_a = classMap.get(className)) === null || _a === void 0 ? void 0 : _a(); });
+        }
+    }
+    static fireClassRemoved(record, node, classMap) {
+        if (node && record.oldValue) {
+            const tokens = compareTokens(record.oldValue, node === null || node === void 0 ? void 0 : node.classList.value);
+            tokens.forEach((className) => { var _a; return (_a = classMap.get(className)) === null || _a === void 0 ? void 0 : _a(); });
+        }
+    }
+    static fireSubtreeChange(nodes, fn) {
+        nodes.length && (fn === null || fn === void 0 ? void 0 : fn(nodes));
+    }
+    static isClass(mutation) {
+        return mutation.type === 'attributes' && mutation.attributeName === 'class';
+    }
+    static isChildList(mutation) {
+        return mutation.type === 'childList';
+    }
+}

package/dist/src/application/utils/nextMessageRequestToApiRequest.js

@@ -0,0 +1,29 @@
+import { coreUserEventToApiUserEvent } from './coreUserEventToApiUserEvent';
+export const messageRequestToCommerceMessageRequest = (data) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return ({
+        context: {
+            chat_id: data.context.chatId,
+            org_id: data.context.orgId,
+            org_short_name: data.context.orgShortName,
+            user_id: data.context.userId,
+            source: data.context.source,
+            env: data.context.env,
+        },
+        id: data.id,
+        feature_flags: data.featureFlags,
+        user_events: (_a = data.userEvents) === null || _a === void 0 ? void 0 : _a.map((userEvent) => coreUserEventToApiUserEvent(userEvent)),
+        generation_params: {
+            model: (_b = data.generationParams) === null || _b === void 0 ? void 0 : _b.model,
+            max_tokens: (_c = data.generationParams) === null || _c === void 0 ? void 0 : _c.maxTokens,
+            stop: (_d = data.generationParams) === null || _d === void 0 ? void 0 : _d.stop,
+            stream: (_e = data.generationParams) === null || _e === void 0 ? void 0 : _e.stream,
+            temperature: (_f = data.generationParams) === null || _f === void 0 ? void 0 : _f.temperature,
+            top_p: (_g = data.generationParams) === null || _g === void 0 ? void 0 : _g.topP,
+            num_suggestions: (_h = data.generationParams) === null || _h === void 0 ? void 0 : _h.numSuggestions,
+            response_system_prompt: (_j = data.generationParams) === null || _j === void 0 ? void 0 : _j.responseSystemPrompt,
+            suggestion_system_prompt: (_k = data.generationParams) === null || _k === void 0 ? void 0 : _k.suggestionSystemPrompt,
+            response_caching: (_l = data.generationParams) === null || _l === void 0 ? void 0 : _l.responseCaching,
+        },
+    });
+};

package/dist/src/application/utils/nodeSelector.js

@@ -0,0 +1,101 @@
+export class NodeSelector {
+    constructor(pattern) {
+        this.pattern = pattern;
+        this.root = document;
+    }
+    getPattern() {
+        return this.pattern;
+    }
+    setRoot(root) {
+        this.root = root;
+    }
+    getRoot() {
+        return this.root;
+    }
+}
+class QuerySelector extends NodeSelector {
+    parse() {
+        return this.getRoot().querySelector(this.getPattern());
+    }
+}
+class IDSelector extends NodeSelector {
+    parse() {
+        return this.getRoot().getElementById(this.getPattern());
+    }
+}
+class XpathSelector extends NodeSelector {
+    parse() {
+        var _a, _b;
+        return (_b = (_a = this.getRoot()) === null || _a === void 0 ? void 0 : _a.evaluate(this.getPattern(), this.getRoot(), null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)) === null || _b === void 0 ? void 0 : _b.singleNodeValue;
+    }
+}
+class ChainSelector extends NodeSelector {
+    parse() {
+        let selectorIndex = 0;
+        const selectors = this.getPattern().split('@');
+        const lastIndex = selectors.length - 1;
+        const parseChain = (pattern, prevNode) => {
+            var _a;
+            const selector = SelectorFactory.parse(pattern);
+            if (prevNode) {
+                selector.setRoot(prevNode);
+            }
+            const currentNode = selector.parse();
+            if (selectorIndex === lastIndex) {
+                return currentNode;
+            }
+            let node = currentNode || document;
+            if (currentNode === null || currentNode === void 0 ? void 0 : currentNode.shadowRoot) {
+                node = currentNode.shadowRoot;
+            }
+            if (currentNode === null || currentNode === void 0 ? void 0 : currentNode.contentWindow) {
+                node = (_a = currentNode.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
+            }
+            return parseChain(selectors[++selectorIndex].trim(), node);
+        };
+        return parseChain(selectors[selectorIndex].trim());
+    }
+}
+class Empty extends NodeSelector {
+    constructor() {
+        super('');
+    }
+    parse() {
+        return null;
+    }
+}
+export class SelectorFactory {
+    static parse(composedSelector) {
+        if (!composedSelector) {
+            return new Empty();
+        }
+        const split = composedSelector.split('|');
+        const type = split[0];
+        const selector = split[1];
+        switch (type) {
+            case 'id':
+                return this.id(selector);
+            case 'query':
+                return this.query(selector);
+            case 'xpath':
+                return this.xpath(selector);
+            default:
+                return new Empty();
+        }
+    }
+    static check(selector) {
+        return selector !== null && selector !== void 0 ? selector : new Empty();
+    }
+    static chain(pattern) {
+        return pattern ? new ChainSelector(pattern) : new Empty();
+    }
+    static id(pattern) {
+        return pattern ? new IDSelector(pattern) : new Empty();
+    }
+    static query(pattern) {
+        return pattern ? new QuerySelector(pattern) : new Empty();
+    }
+    static xpath(pattern) {
+        return pattern ? new XpathSelector(pattern) : new Empty();
+    }
+}