@envive-ai/react-widgets-v3 0.3.13 → 0.3.15-alpha.1

package/dist/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseTalkdeskUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useTalkdeskUnifiedCXButton: ({ onSwitchToAgent, suppressMerchantButton, }: UseTalkdeskUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.js

@@ -0,0 +1,77 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+export const useTalkdeskUnifiedCXButton = ({ onSwitchToAgent, suppressMerchantButton, }) => {
+    const talkdeskButton = useElementObserver(SelectorFactory.id('talkdesk-chat-widget-trigger'));
+    const talkdeskWidget = useElementObserver(SelectorFactory.id('talkdesk-chat-widget'));
+    const talkdeskContainer = useElementObserver(SelectorFactory.id('tdWebchat'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        if (suppressMerchantButton) {
+            enviveFloatingButton.hide();
+        }
+        talkdeskButton.show();
+        talkdeskButton.fire('click');
+    };
+    const isTalkdeskButtonEnabled = () => {
+        // Check for the main Talkdesk container
+        const talkdeskMainContainer = document.getElementById('tdWebchat');
+        if (!talkdeskMainContainer)
+            return false;
+        // Check for the trigger button (it's directly in the DOM, not inside an iframe)
+        const talkdeskTriggerButton = document.getElementById('talkdesk-chat-widget-trigger');
+        return !!talkdeskTriggerButton;
+    };
+    const isSwitchEnabled = () => isTalkdeskButtonEnabled();
+    // Hide Talkdesk button when it's added to DOM (if suppressMerchantButton is enabled)
+    talkdeskButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            talkdeskButton.hide();
+            enviveFloatingButton.show();
+        }
+    });
+    // Observe the widget container (NOT the button) to avoid infinite loops
+    talkdeskWidget.onAdd(el => {
+        if (el && suppressMerchantButton) {
+            const ariaHidden = el.getAttribute('aria-hidden');
+            // Widget is open initially (aria-hidden="false")
+            if (ariaHidden === 'false') {
+                talkdeskButton.show();
+                enviveFloatingButton.hide();
+            }
+            else {
+                // Widget is closed initially
+                talkdeskButton.hide();
+                enviveFloatingButton.show();
+            }
+        }
+    });
+    // Track widget visibility changes
+    talkdeskWidget.onChange(el => {
+        if (el && suppressMerchantButton) {
+            const ariaHidden = el.getAttribute('aria-hidden');
+            // Widget is open (aria-hidden="false")
+            if (ariaHidden === 'false') {
+                talkdeskButton.show();
+                enviveFloatingButton.hide();
+            }
+            // Widget is closed (aria-hidden="true")
+            if (ariaHidden === 'true') {
+                talkdeskButton.hide();
+                enviveFloatingButton.show();
+            }
+        }
+    });
+    // Cleanup when container is removed
+    talkdeskContainer.onRemove(() => {
+        if (suppressMerchantButton) {
+            talkdeskButton.hide();
+            enviveFloatingButton.show();
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useTidioUnifiedCXButton.d.ts

@@ -0,0 +1,13 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+declare global {
+    interface Window {
+        tidioChatApi?: {
+            open: () => void;
+            close: () => void;
+        };
+    }
+}
+interface UseTidioUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useTidioUnifiedCXButton: ({ onSwitchToAgent, }: UseTidioUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useTidioUnifiedCXButton.js

@@ -0,0 +1,20 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+export const useTidioUnifiedCXButton = ({ onSwitchToAgent, }) => {
+    const tidioButton = window.tidioChatApi;
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        if (tidioButton) {
+            tidioButton.open();
+        }
+    };
+    const isTidioButtonEnabled = () => !!document.getElementById('tidio-chat-iframe');
+    const isSwitchEnabled = () => isTidioButtonEnabled();
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useZendeskUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseZendeskUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useZendeskUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseZendeskUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useZendeskUnifiedCXButton.js

@@ -0,0 +1,55 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+export const useZendeskUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const zendeskButton = useElementObserver(SelectorFactory.chain('query|iframe#launcher @ query|button'));
+    const zendeskAlternativeIframe = useElementObserver(SelectorFactory.chain('id|webWidget'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const zendeskIframe = useElementObserver(SelectorFactory.query('iframe#launcher'));
+    const toggle = () => {
+        zendeskIframe.hide();
+        onSwitchToAgent();
+        zendeskButton.fire('click');
+        enviveFloatingButton.hide();
+    };
+    const isZendeskButtonEnabled = () => {
+        const zendeskMainButton = document?.getElementById('launcher')?.contentWindow?.document?.querySelector('button');
+        return !!zendeskMainButton;
+    };
+    const isSwitchEnabled = () => isZendeskButtonEnabled();
+    zendeskIframe.onAdd(() => {
+        if (suppressMerchantButton) {
+            enviveFloatingButton.show();
+            zendeskIframe.hide();
+        }
+    });
+    zendeskButton.onChange(el => {
+        if (el) {
+            const ariaLabel = el.getAttribute('aria-label');
+            if (ariaLabel === 'Open messaging window') {
+                onCXClose?.();
+                enviveFloatingButton.show();
+                if (suppressMerchantButton) {
+                    zendeskIframe.hide();
+                }
+            }
+            if (ariaLabel === 'Close messaging window') {
+                enviveFloatingButton.hide();
+                if (suppressMerchantButton) {
+                    zendeskIframe.show();
+                }
+            }
+        }
+    });
+    zendeskAlternativeIframe.onRemove(() => {
+        onCXClose?.();
+        if (suppressMerchantButton) {
+            enviveFloatingButton.show();
+            zendeskIframe.hide();
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useZowieUnifiedCXButton.d.ts

@@ -0,0 +1,13 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+declare global {
+    interface Window {
+        Zowie?: {
+            open: () => void;
+            close: () => void;
+        };
+    }
+}
+interface UseZowieUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useZowieUnifiedCXButton: ({ onSwitchToAgent, }: UseZowieUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useZowieUnifiedCXButton.js

@@ -0,0 +1,20 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+export const useZowieUnifiedCXButton = ({ onSwitchToAgent, }) => {
+    const zowieButton = window?.Zowie;
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        if (zowieButton) {
+            zowieButton?.open();
+        }
+    };
+    const isZowieButtonEnabled = () => !!zowieButton;
+    const isSwitchEnabled = () => isZowieButtonEnabled();
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/types.d.ts

@@ -0,0 +1,26 @@
+export declare enum CustomerServiceType {
+    shopify = "shopify",
+    gorgias = "gorgias",
+    kustomer = "kustomer",
+    groove = "groove",
+    tidio = "tidio",
+    zowie = "zowie",
+    redo = "redo",
+    gladly = "gladly",
+    richpanel = "richpanel",
+    zendesk = "zendesk",
+    helpscout = "helpscout",
+    talkdesk = "talkdesk",
+    eightByEight = "8x8",
+    unsupported = "unsupported"
+}
+export interface UnifiedCXButton {
+    isSwitchEnabled: () => boolean;
+    toggle: () => void;
+    removeUnifiedCXButton?: () => void;
+}
+export interface CustomerServiceImplProps {
+    onSwitchToAgent: () => void;
+    onCXClose?: () => void;
+    suppressMerchantButton?: boolean;
+}

package/dist/src/CXIntegration/types.js

@@ -0,0 +1,17 @@
+export var CustomerServiceType;
+(function (CustomerServiceType) {
+    CustomerServiceType["shopify"] = "shopify";
+    CustomerServiceType["gorgias"] = "gorgias";
+    CustomerServiceType["kustomer"] = "kustomer";
+    CustomerServiceType["groove"] = "groove";
+    CustomerServiceType["tidio"] = "tidio";
+    CustomerServiceType["zowie"] = "zowie";
+    CustomerServiceType["redo"] = "redo";
+    CustomerServiceType["gladly"] = "gladly";
+    CustomerServiceType["richpanel"] = "richpanel";
+    CustomerServiceType["zendesk"] = "zendesk";
+    CustomerServiceType["helpscout"] = "helpscout";
+    CustomerServiceType["talkdesk"] = "talkdesk";
+    CustomerServiceType["eightByEight"] = "8x8";
+    CustomerServiceType["unsupported"] = "unsupported";
+})(CustomerServiceType || (CustomerServiceType = {}));

package/dist/src/CXIntegration/utils/functions.d.ts

@@ -0,0 +1,2 @@
+import { CustomerServiceImplProps, CustomerServiceType, UnifiedCXButton } from '../types';
+export declare const findCustomerServiceImpl: (provider: CustomerServiceType) => ((props: CustomerServiceImplProps) => UnifiedCXButton);

package/dist/src/CXIntegration/utils/functions.js

@@ -0,0 +1,57 @@
+import { CustomerServiceType } from '../types';
+import { useGrooveUnifiedCXButton } from '../implementations/useGrooveUnifiedCXButton';
+import { useShopifyChatUnifiedCXButton } from '../implementations/useShopifyChatUnifiedCXButton';
+import { useGladlyUnifiedCXButton } from '../implementations/useGladlyUnifiedCXButton';
+import { useGorgiasUnifiedCXButton } from '../implementations/useGorgiasUnifiedCXButton';
+import { useTidioUnifiedCXButton } from '../implementations/useTidioUnifiedCXButton';
+import { useZowieUnifiedCXButton } from '../implementations/useZowieUnifiedCXButton';
+import { useReDoUnifiedCXButton } from '../implementations/useReDoUnifiedCXButton';
+import { useRichpanelUnifiedCXButton } from '../implementations/useRichpanelUnifiedCXButton';
+import { useZendeskUnifiedCXButton } from '../implementations/useZendeskUnifiedCXButton';
+import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifiedCXButton';
+import { useHelpScoutUnifiedCXButton } from '../implementations/useHelpScoutUnifiedCXButton';
+import { useTalkdeskUnifiedCXButton } from '../implementations/useTalkdeskUnifiedCXButton';
+import { useEightByEightUnifiedCXButton } from '../implementations/useEightByEightUnifiedCXButton';
+import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
+export const findCustomerServiceImpl = (provider) => {
+    if (provider === CustomerServiceType.kustomer) {
+        return useKustomerUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.groove) {
+        return useGrooveUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.gladly) {
+        return useGladlyUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.shopify) {
+        return useShopifyChatUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.gorgias) {
+        return useGorgiasUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.tidio) {
+        return useTidioUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.zowie) {
+        return useZowieUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.redo) {
+        return useReDoUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.richpanel) {
+        return useRichpanelUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.zendesk) {
+        return useZendeskUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.helpscout) {
+        return useHelpScoutUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.talkdesk) {
+        return useTalkdeskUnifiedCXButton;
+    }
+    if (provider === CustomerServiceType.eightByEight) {
+        return useEightByEightUnifiedCXButton;
+    }
+    return useDefaultUnifiedCXButton;
+};

package/dist/src/debug/GenericSelect.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+type SelectType = 'priority';
+interface SelectProps {
+    type: SelectType;
+    selectedKey: string;
+    onSelect?: (key: string) => void;
+    buttonStyle?: CSSProperties;
+    menuStyle?: CSSProperties;
+}
+export declare function GenericSelect({ type, selectedKey, onSelect, buttonStyle, menuStyle, }: Readonly<SelectProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/debug/GenericSelect.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from 'react';
+const dictionaries = {
+    priority: {
+        p0: { label: 'Urgent' },
+        p1: { label: 'High' },
+        p2: { label: 'Medium' },
+        p3: { label: 'Low' },
+        'no priority': { label: 'No Priority' },
+    },
+};
+// Inline styles for Shadow DOM compatibility
+const styles = {
+    button: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        fontSize: '0.75rem',
+        backgroundColor: 'transparent',
+        padding: '0.375rem 0.75rem',
+        borderRadius: '0.375rem',
+        cursor: 'pointer',
+        outline: 'none',
+        border: 'none',
+    },
+    buttonHover: {
+        backgroundColor: '#f9fafb',
+    },
+    dropdown: {
+        position: 'absolute',
+        left: '0',
+        zIndex: 10,
+        marginTop: '4px',
+        borderRadius: '8px',
+        width: '125px',
+        backgroundColor: 'white',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        border: '1px solid rgba(0, 0, 0, 0.05)',
+    },
+    dropdownItem: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        padding: '4px 8px',
+        fontSize: '12px',
+        cursor: 'pointer',
+        border: 'none',
+        backgroundColor: 'transparent',
+        textAlign: 'left',
+    },
+    dropdownItemHover: {
+        backgroundColor: '#EBEEF6',
+    },
+    container: {
+        marginLeft: '-1rem',
+        position: 'relative',
+    },
+};
+// Badge style generator function
+const getBadgeStyles = (variant) => {
+    let backgroundColor;
+    let textColor;
+    switch (variant) {
+        case 'p0':
+            backgroundColor = '#940F24';
+            textColor = '#F9E8EA';
+            break;
+        case 'p1':
+            backgroundColor = '#F9E8EA';
+            textColor = '#940F24';
+            break;
+        case 'p2':
+            backgroundColor = '#FEEBCB';
+            textColor = '#C05621';
+            break;
+        case 'p3':
+            backgroundColor = '#E6F6F4';
+            textColor = '#007F6D';
+            break;
+        default:
+            backgroundColor = '#EBEEF6';
+            textColor = '#3C57AA';
+    }
+    // Using fixed medium size values
+    return {
+        display: 'inline-flex',
+        borderRadius: '4px',
+        backgroundColor,
+        color: textColor,
+        fontSize: '0.875rem',
+        paddingLeft: '0.625rem',
+        paddingRight: '0.625rem',
+        paddingTop: '0.25rem',
+        paddingBottom: '0.25rem',
+    };
+};
+export function GenericSelect({ type, selectedKey, onSelect, buttonStyle = {}, menuStyle = {}, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isHovering, setIsHovering] = useState(null);
+    const menuRef = useRef(null);
+    const dictionary = dictionaries[type];
+    const renderItem = (key, item) => {
+        const chipItem = item;
+        const badgeStyles = getBadgeStyles(key);
+        return _jsx("span", { style: badgeStyles, children: chipItem.label });
+    };
+    // Close menu when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            // Check if the click target is within our menu ref
+            const isOutside = menuRef.current && !menuRef.current.contains(event.target);
+            // Also check the event path (for Shadow DOM compatibility)
+            const path = event.composedPath ? event.composedPath() : [];
+            const isInPath = menuRef.current && path.includes(menuRef.current);
+            // Only close if truly outside (not in the path)
+            if (isOutside && !isInPath) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mouseup', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('mouseup', handleClickOutside, true);
+        };
+    }, [isOpen]);
+    if (!dictionary) {
+        console.error(`Invalid type "${type}".`);
+        return null;
+    }
+    return (_jsxs("div", { style: styles.container, ref: menuRef, children: [_jsx("button", { type: "button", style: {
+                    ...styles.button,
+                    ...(isHovering === 'button' ? styles.buttonHover : {}),
+                    ...buttonStyle,
+                }, onClick: () => {
+                    setIsOpen(!isOpen);
+                }, onMouseEnter: () => setIsHovering('button'), onMouseLeave: () => setIsHovering(null), children: dictionary[selectedKey] ? (renderItem(selectedKey, dictionary[selectedKey])) : (_jsx("span", { style: { color: '#6b7280' }, children: `Select ${type.charAt(0).toUpperCase() + type.slice(1)}` })) }), isOpen && (_jsx("div", { style: {
+                    ...styles.dropdown,
+                    ...menuStyle,
+                }, children: _jsx("div", { style: { padding: '0.25rem 0' }, children: Object.entries(dictionary)
+                        .filter(([key]) => key !== selectedKey)
+                        .map(([key, item]) => (_jsx("button", { type: "button", style: {
+                            ...styles.dropdownItem,
+                            ...(isHovering === key ? styles.dropdownItemHover : {}),
+                        }, onMouseEnter: () => setIsHovering(key), onMouseLeave: () => setIsHovering(null), onClick: e => {
+                            // Stop event propagation to prevent handleClickOutside from firing
+                            e.stopPropagation();
+                            if (onSelect) {
+                                onSelect(key);
+                            }
+                            setIsOpen(false);
+                        }, children: renderItem(key, item) }, key))) }) }))] }));
+}

package/dist/src/debug/MessageContent.d.ts

@@ -0,0 +1,4 @@
+import { Message } from '@envive-ai/react-hooks/application/models';
+export declare const MessageContent: ({ message: m }: {
+    message: Message;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/debug/MessageContent.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaFile, FaLink, FaPaperclip, FaSearch, FaTag } from 'react-icons/fa';
+import { ReviewCard } from '@envive-ai/react-toolkit-v3/ReviewCard';
+import { Message as MessageComponent } from '@envive-ai/react-toolkit-v3/Message';
+import classNames from 'classnames';
+import { MessageType } from '@envive-ai/react-hooks/application/models';
+const textContentMessageTypes = new Set([
+    MessageType.Text,
+    MessageType.QueryTyped,
+    MessageType.SuggestionClicked,
+    MessageType.CXAgentResponse,
+]);
+const containerClassNames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-flex-col': true,
+    'envive-tw-gap-1': true,
+});
+const fontSemiboldClassNames = classNames({
+    'envive-tw-font-semibold': true,
+});
+const flexItemsClassNames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-items-center': true,
+});
+const gap1ClassNames = classNames({
+    'envive-tw-gap-1': true,
+});
+const textLinkClassNames = classNames({
+    'envive-tw-text-[--spiffy-colors-text-link]': true,
+    'envive-tw-underline': true,
+});
+const textLgClassNames = classNames({
+    'envive-tw-text-lg': true,
+});
+const iconClassNames = classNames({
+    'envive-tw-w-3': true,
+    'envive-tw-h-3': true,
+});
+export const MessageContent = ({ message: m }) => {
+    // text messages
+    if (textContentMessageTypes.has(m.type)) {
+        if (m.type === MessageType.Text) {
+            return (_jsx(MessageComponent, { content: m.metadata.content }, m.id));
+        }
+        if (m.type === MessageType.QueryTyped) {
+            return (_jsx(MessageComponent, { content: m.metadata.content }, m.id));
+        }
+        if (m.type === MessageType.SuggestionClicked) {
+            return (_jsx(MessageComponent, { content: m.metadata.suggestionContent }, m.id));
+        }
+        if (m.type === MessageType.CXAgentResponse) {
+            return (_jsx(MessageComponent, { content: m.metadata.message }, m.id));
+        }
+        return (_jsx(MessageComponent, { content: "unknown" }, m.id));
+    }
+    if (m.type === MessageType.Product) {
+        return (_jsxs("div", { className: classNames(flexItemsClassNames, gap1ClassNames, 'envive-tw-text-sm'), children: [_jsx(FaTag, { className: iconClassNames }), _jsx("a", { href: m.metadata.url, target: "_blank", rel: "noopener noreferrer", className: textLinkClassNames, children: m.metadata.title })] }));
+    }
+    if (m.type === MessageType.Review) {
+        return (_jsx(ReviewCard, { name: m.metadata?.reviewer ?? '', rating: m.metadata?.stars ?? 0, reviewText: m.metadata?.review ?? '' }));
+    }
+    if (m.type === MessageType.Separator) {
+        return (_jsxs("div", { className: "envive-tw-relative envive-tw-flex envive-tw-w-full envive-tw-items-center envive-tw-p-2", children: [_jsx("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" }), _jsx("span", { className: "envive-tw-flex-shrink envive-tw-px-4 envive-tw-text-sm envive-tw-text-gray-500", children: "New Discussion" }), _jsx("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" })] }));
+    }
+    if (m.type === MessageType.Page) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaFile, { className: iconClassNames }), _jsx("span", { className: classNames(textLgClassNames, fontSemiboldClassNames), children: m.metadata?.title })] }), m.metadata?.url && (_jsxs("div", { className: classNames(flexItemsClassNames, gap1ClassNames), children: [_jsx(FaLink, { className: iconClassNames }), _jsx("a", { href: m.metadata.url, target: "_blank", rel: "noopener noreferrer", className: textLinkClassNames, children: m.metadata.url })] }))] }));
+    }
+    if (m.type === MessageType.Search) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaSearch, { className: iconClassNames }), " Search"] }), _jsx("div", { children: m.metadata?.searchTerm })] }));
+    }
+    if (m.type === MessageType.Attachment) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaPaperclip, { className: iconClassNames }), " Attachment"] }), _jsx("div", { children: m.metadata?.message }), m.metadata?.attachment.map(attachment => (_jsx("div", { children: _jsx("a", { href: attachment.url ?? '', target: "_blank", rel: "noopener noreferrer", className: textLinkClassNames, children: attachment.name }) }, attachment.id)))] }));
+    }
+    if (m.type === MessageType.Form) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaPaperclip, { className: iconClassNames }), " Form Request"] }), _jsx("div", { children: m.metadata?.formType })] }));
+    }
+    if (m.type === MessageType.ProductSearch) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaPaperclip, { className: iconClassNames }), " Product Search Results"] }), _jsxs("div", { children: [m.metadata?.generatedQuery, " - ", m.metadata?.productCount, " results"] })] }));
+    }
+    if (m.type === MessageType.ProductSearchFilter) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaPaperclip, { className: iconClassNames }), " Product Search Filter"] }), _jsxs("div", { children: ["Filter: ", m.metadata?.filterName] })] }));
+    }
+    if (m.type === MessageType.Order) {
+        return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames), children: [_jsx(FaPaperclip, { className: iconClassNames }), " Order Information"] }), _jsxs("div", { children: ["OrderNumber: ", m.metadata?.orderNumber] })] }));
+    }
+    throw new Error(`Unsupported message type: ${JSON.stringify(m)}`);
+};

package/dist/src/debug/chatEmbed.d.ts

@@ -0,0 +1,2 @@
+declare const ChatEmbed: () => import("react/jsx-runtime").JSX.Element;
+export default ChatEmbed;

package/dist/src/debug/chatEmbed.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
+import { chatAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { MessageType } from '@envive-ai/react-hooks/application/models';
+import { PromptCarousel, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { MessageContent } from './MessageContent';
+const containerClassNames = classNames({
+    'envive-tw-font-sans': true,
+    'envive-tw-text-base': true,
+    'envive-tw-leading-6': true,
+    'envive-tw-font-normal': true,
+});
+const messagesContainerClassNames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-flex-col': true,
+    'envive-tw-gap-4': true,
+});
+const turnContainerClassNames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-flex-col': true,
+    'envive-tw-gap-2': true,
+});
+const messageBodyClassNames = classNames({
+    'envive-tw-whitespace-pre-wrap': true,
+});
+const lastTurnClassNames = classNames({
+    'envive-tw-bg-[#FFFFF0]': true,
+    'envive-tw-p-2': true,
+    'envive-tw-rounded-lg': true,
+});
+const lastTurnContentClassNames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-flex-col': true,
+    'envive-tw-gap-2': true,
+});
+const ChatEmbed = () => {
+    const { messages, suggestions } = useAtomValue(chatAtom);
+    const lastTurnRef = React.useRef(null);
+    // Scroll the last turn into view when messages change
+    React.useEffect(() => {
+        if (lastTurnRef.current && messages.length > 0) {
+            lastTurnRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }, [messages]);
+    const answerSuggestions = suggestions.filter(s => s.isAnswer);
+    const generalSuggestions = suggestions.filter(s => !s.isAnswer);
+    return (_jsxs("div", { className: containerClassNames, children: [_jsx("div", { className: messagesContainerClassNames, children: messages.map((turn, turnIdx) => {
+                    const isLastTurn = turnIdx === messages.length - 1;
+                    return (_jsxs("div", { children: [_jsx("div", { className: turnContainerClassNames, children: turn
+                                    .filter(m => m.type === MessageType.Separator)
+                                    .map(message => (_jsx("div", { children: _jsx("div", { className: messageBodyClassNames, children: _jsx(MessageContent, { message: message }) }) }, message.id))) }), _jsx("div", { ref: isLastTurn ? lastTurnRef : null, className: `${turnContainerClassNames} ${isLastTurn ? lastTurnClassNames : ''}`, children: turn
+                                    .filter(m => m.type !== MessageType.Separator)
+                                    .map(message => (_jsx("div", { children: _jsx("div", { className: messageBodyClassNames, children: _jsx(MessageContent, { message: message }) }) }, message.id))) })] }, turnIdx));
+                }) }), suggestions.length > 0 && (_jsx("div", { className: lastTurnClassNames, children: _jsxs("div", { className: lastTurnContentClassNames, children: [_jsx(PromptCarousel, { promptButtonTexts: answerSuggestions.map(s => s.content), handleButtonClick: () => { }, promptCarouselRows: PromptCarouselRows.ALWAYS_ONE, isLoading: false }), _jsx(PromptCarousel, { promptButtonTexts: generalSuggestions.map(s => s.content), handleButtonClick: () => { }, promptCarouselRows: PromptCarouselRows.ALWAYS_ONE, isLoading: false })] }) }))] }));
+};
+export default ChatEmbed;

package/dist/src/debug/debugBar.d.ts

@@ -0,0 +1 @@
+export declare const DebugBar: () => import("react/jsx-runtime").JSX.Element;