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

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;

package/dist/src/debug/debugBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSystemSettingsContext } from '@envive-ai/react-hooks/hooks/SystemSettingsContext';
+import { ReportIssue } from './reportIssue';
+export const DebugBar = () => {
+    const { showDebugBar } = useSystemSettingsContext();
+    if (!showDebugBar)
+        return null;
+    return (_jsx("div", { className: "envive-tw-flex envive-tw-items-center envive-tw-p-[4px]", children: _jsx(ReportIssue, {}) }));
+};

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

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