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

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;

package/dist/src/debug/reportIssue.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReportSessionRequestReportPriorityEnum, ReportSessionRequestReportTypeEnum, } from '@spiffy-ai/commerce-api-client';
+import { useCallback, useEffect, useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { MessageType } from '@envive-ai/react-hooks/application/models';
+import classNames from 'classnames';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
+import CommerceApiClient from '@envive-ai/react-hooks/application/commerce-api';
+import { userIdAtom } from '@envive-ai/react-hooks/atoms/app';
+import { orgShortNameAtom } from '@envive-ai/react-hooks/atoms/envive/enviveConfig';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { StringUtils, validateEmail } from '@envive-ai/react-hooks/application/utils';
+import { GenericSelect } from './GenericSelect';
+import ChatEmbed from './chatEmbed';
+const messageContent = (m) => {
+    if (m.type === MessageType.Text) {
+        return m.metadata.content;
+    }
+    if (m.type === MessageType.Product) {
+        return `PRODUCT ID: ${m.metadata?.id}`;
+    }
+    if (m.type === MessageType.Review) {
+        return `REVIEW: by ${m.metadata?.reviewer}`;
+    }
+    if (m.type === MessageType.Page) {
+        return `PAGE: ${m.metadata?.url}`;
+    }
+    if (m.type === MessageType.Separator) {
+        return `SEPARATOR`;
+    }
+    if (m.type === MessageType.QueryTyped) {
+        return `QUERY TYPED: ${m.metadata?.content}`;
+    }
+    if (m.type === MessageType.SuggestionClicked) {
+        return `SUGGESTION CLICKED`;
+    }
+    if (m.type === MessageType.Search) {
+        return `SEARCH: ${m.metadata?.searchTerm}`;
+    }
+    if (m.type === MessageType.ProductSearch) {
+        return `PRODUCT SEARCH: ${m.metadata?.generatedQuery} (${m.metadata?.productCount} products)`;
+    }
+    if (m.type === MessageType.ProductSearchFilter) {
+        return `PRODUCT SEARCH FILTER: ${m.metadata?.filterName}`;
+    }
+    if (m.type === MessageType.Form) {
+        return `FORM: ${m.metadata?.formType}`;
+    }
+    if (m.type === MessageType.Order) {
+        return `ORDER: ${m.metadata?.orderId}`;
+    }
+    throw new Error(`Unsupported message type: ${m.type}`);
+};
+const ReportHeader = ({ onClose }) => {
+    const userId = useAtomValue(userIdAtom);
+    const handleCopyClick = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(userId);
+        }
+        catch (err) {
+            console.error('Failed to copy to clipboard:', err);
+        }
+    }, [userId]);
+    const headerTitleClassnames = classNames({
+        'envive-tw-text-[24px]': true,
+        'md:envive-tw-text-[30px]': true,
+        'envive-tw-mb-[12px]': true,
+        'envive-tw-color-[#161844]': true,
+        'envive-tw-leading-[1.33]': true,
+        'md:envive-tw-leading-[1.2]': true,
+        'envive-tw-font-bold': true,
+    });
+    const headerLinkClassnames = classNames({
+        'envive-tw-underline': true,
+        'envive-tw-text-[#3C57AA]': true,
+        'hover:envive-tw-text-[#3C57AA]': true,
+    });
+    const headerDescriptionClassnames = classNames({
+        'envive-tw-text-[16px]': true,
+        'envive-tw-text-normal': true,
+        'envive-tw-font-medium': true,
+        'envive-tw-max-w-[70ch]': true,
+        'envive-tw-text-[#161844]': true,
+    });
+    const userIdClassnames = classNames({
+        'envive-tw-text-xs': true,
+        'envive-tw-text-gray-500': true,
+        'envive-tw-font-semibold': true,
+    });
+    return (_jsxs("div", { className: "envive-tw-pb-0 envive-tw-mb-[24px] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-items-start envive-tw-justify-between envive-tw-gap-3 envive-tw-px-[24px] envive-tw-pt-[24px]", children: [_jsx("div", { className: "envive-tw-flex envive-tw-w-full envive-tw-flex-col envive-tw-items-stretch envive-tw-gap-3", children: _jsxs("div", { className: "envive-tw-flex envive-tw-flex-row envive-tw-items-start envive-tw-justify-between envive-tw-gap-3", children: [_jsxs("div", { className: "envive-tw-max-w-[100%]", children: [_jsx("h2", { className: headerTitleClassnames, children: "Give us feedback on this message" }), _jsxs("p", { className: headerDescriptionClassnames, children: ["For UI bugs and Feature Ideas, please use", ' ', _jsx("a", { href: "https://spiffy-ai.notion.site/19fe47c0828780b1a6cfd0ac4373cebe", target: "_blank", rel: "noopener noreferrer", className: headerLinkClassnames, children: "this form" }), "."] })] }), _jsx("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-items-end envive-tw-gap-3", children: _jsxs("div", { className: "envive-tw-flex envive-tw-flex-row envive-tw-items-center envive-tw-gap-2", children: [_jsxs("p", { className: userIdClassnames, children: ["User Id: ", userId.slice(0, 4), "..."] }), _jsx("button", { type: "button", onClick: handleCopyClick, "aria-label": "Copy chat ID", className: "envive-tw-rounded-base envive-tw-border envive-tw-border-gray-300 envive-tw-px-2 envive-tw-py-0.5 envive-tw-text-xs envive-tw-font-bold hover:envive-tw-bg-gray-50", children: "Copy" })] }) })] }) }), _jsx("button", { type: "button", className: "envive-tw-p-0 envive-tw-h-[16px] envive-tw-w-[16px]", onClick: onClose, children: _jsx(IconCloseVariant, {}) })] }));
+};
+const ReportFormFields = ({ priority, setPriority, reportedBy, onReportedByChanging, reason, onDescriptionChanging, turnInfo, setTurnInfo, lastMessagesText, lastSuggestionsText, }) => {
+    const requiredFieldClassnames = classNames({
+        'envive-tw-text-[#008000]': true,
+        'envive-tw-text-xs': true,
+        'envive-tw-font-normal': true,
+        'envive-tw-italic': true,
+    });
+    return (_jsxs("form", { onSubmit: e => {
+            e.preventDefault();
+        }, className: "envive-tw-pt-0 envive-tw-flex envive-tw-flex-col envive-tw-gap-[24px] envive-tw-px-[24px] envive-tw-pb-[8px]", children: [_jsx("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-2", children: _jsxs("div", { className: "envive-tw-flex envive-tw-flex-row envive-tw-items-center envive-tw-gap-3", children: [_jsx("span", { id: "priority-label", className: "envive-tw-mb-0 envive-tw-flex envive-tw-shrink-0 envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: "Priority" }), _jsx(GenericSelect, { type: "priority", selectedKey: priority, onSelect: key => {
+                                setPriority(key);
+                            }, "aria-labelledby": "priority-label" })] }) }), _jsxs("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-2", children: [_jsxs("span", { id: "email-label", className: "envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: ["Your Email", _jsx("p", { className: requiredFieldClassnames, children: "* Required so we can follow up with you" })] }), _jsx("input", { className: "envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm", placeholder: "Email address", value: reportedBy, type: "email", onChange: onReportedByChanging, "aria-labelledby": "email-label" })] }), _jsxs("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-[0]", children: [_jsx("span", { id: "chat-history-label", className: "envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: "Chat History" }), _jsx("div", { className: "envive-tw-rounded-md envive-tw-h-[250px] envive-tw-w-full envive-tw-overflow-auto envive-tw-border envive-tw-border-[#D9D9D9] envive-tw-p-2", "aria-labelledby": "chat-history-label", children: _jsx(ChatEmbed, {}) })] }), _jsxs("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-2", children: [_jsxs("span", { id: "description-label", className: "envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: ["What is the problem with this message?", _jsx("p", { className: requiredFieldClassnames, children: "* Required to train the model and generate the correct message" })] }), _jsx("textarea", { className: "envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm", placeholder: "Please describe the issue", value: reason, onChange: onDescriptionChanging, "aria-labelledby": "description-label" })] }), _jsxs("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-2", children: [_jsxs("span", { id: "message-correction-label", className: "envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: ["What should the message have said?", _jsx("p", { className: "envive-tw-text-xs envive-tw-font-normal envive-tw-italic envive-tw-text-gray-500", children: "Creating an alternative message will ensure the AI sounds the way you want." })] }), _jsx("textarea", { className: "envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm", placeholder: "Alternative phrasing of the message", value: turnInfo.message_correction ?? lastMessagesText, onChange: e => setTurnInfo(e, 'message_correction'), rows: 10, "aria-labelledby": "message-correction-label" })] }), _jsxs("div", { className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-2", children: [_jsx("span", { id: "suggested-responses-label", className: "envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]", children: "What should the suggested responses for the user be?" }), _jsx("textarea", { className: "envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm", placeholder: "Alternative suggested responses", value: turnInfo.suggestions_correction ?? lastSuggestionsText, onChange: e => setTurnInfo(e, 'suggestions_correction'), rows: 6, "aria-labelledby": "suggested-responses-label" })] })] }));
+};
+const ReportFooter = ({ isReporting, errorMessage, reportedByIsInvalid, isReasonInvalid, onReportSession, onClose, }) => {
+    const sendFeedbackButtonClassnames = classNames({
+        'envive-tw-flex': true,
+        'envive-tw-w-full': true,
+        'sm:envive-tw-w-[180px]': true,
+        'envive-tw-h-10': true,
+        'envive-tw-py-2.5': true,
+        'envive-tw-px-6': true,
+        'envive-tw-justify-center': true,
+        'envive-tw-items-center': true,
+        'envive-tw-gap-2': true,
+        'envive-tw-rounded-full': true,
+        'envive-tw-border': true,
+        'envive-tw-border-[#3C57AA]': true,
+        'envive-tw-bg-[#3C57AA]': true,
+        'envive-tw-text-white': true,
+        'hover:envive-tw-bg-[#2B4A8A]': true,
+        'disabled:envive-tw-opacity-50': true,
+        'disabled:envive-tw-cursor-not-allowed': true,
+    });
+    const cancelButtonClassnames = classNames({
+        'envive-tw-flex': true,
+        'envive-tw-w-full': true,
+        'sm:envive-tw-w-[171px]': true,
+        'envive-tw-h-10': true,
+        'envive-tw-py-2.5': true,
+        'envive-tw-px-6': true,
+        'envive-tw-justify-center': true,
+        'envive-tw-items-center': true,
+        'envive-tw-gap-2': true,
+        'envive-tw-rounded-full': true,
+        'envive-tw-border': true,
+        'envive-tw-border-[#3C57AA]': true,
+        'envive-tw-text-[#3C57AA]': true,
+        'envive-tw-text-center': true,
+        'envive-tw-text-base': true,
+        'envive-tw-font-medium': true,
+        'envive-tw-bg-[#EDF2F7]': true,
+        'hover:envive-tw-bg-[#F5F5F5]': true,
+        'disabled:envive-tw-opacity-50': true,
+        'disabled:envive-tw-cursor-not-allowed': true,
+    });
+    const buttonFooterClassnames = classNames({
+        'envive-tw-flex': true,
+        'envive-tw-items-start': true,
+        'envive-tw-gap-6': true,
+        'envive-tw-justify-start': true,
+        'envive-tw-p-0': true,
+        'envive-tw-shadow-none': true,
+        'envive-tw-flex-0': true,
+        'envive-tw-flex-auto': true,
+        'envive-tw-flex-col': true,
+        'sm:envive-tw-flex-row': true,
+        'envive-tw-w-full': true,
+        'envive-tw-bottom-0': true,
+        'envive-tw-z-[1]': true,
+    });
+    const footerClassnames = classNames({
+        'envive-tw-bg-[#FFFFFF70]': true,
+        'envive-tw-py-[24px]': true,
+        'envive-tw-sticky': true,
+        'envive-tw-bottom-0': true,
+        'envive-tw-w-full': true,
+        'envive-tw-px-[24px]': true,
+        'envive-tw-border-t': true,
+        'envive-tw-border-[#EBEBEB]': true,
+    });
+    return (_jsx("div", { className: footerClassnames, children: _jsxs("div", { className: buttonFooterClassnames, children: [_jsx("button", { type: "button", disabled: isReporting || reportedByIsInvalid || isReasonInvalid, onClick: onReportSession, className: sendFeedbackButtonClassnames, children: isReporting ? 'Sending...' : 'Send Feedback' }), _jsx("button", { type: "button", disabled: isReporting, onClick: onClose, className: cancelButtonClassnames, children: "Cancel" }), errorMessage && (_jsx("div", { className: "envive-tw-text-xs envive-tw-font-normal envive-tw-italic envive-tw-text-red-500", children: errorMessage }))] }) }));
+};
+const Drawer = ({ isOpen, onClose, children, width = 'md:envive-tw-w-[80%] lg:envive-tw-w-[67%]', }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end", children: [_jsx("div", { className: "envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40", onClick: onClose }), _jsx("div", { className: `envive-tw-w-full ${width} envive-tw-h-screen`, children: _jsx("div", { className: "envive-tw-min-h-0 envive-tw-px-0 envive-tw-relative envive-tw-flex envive-tw-h-screen envive-tw-w-full envive-tw-flex-col envive-tw-border envive-tw-border-solid envive-tw-border-[#0000ff] envive-tw-bg-white", children: children }) })] }));
+};
+export const ReportIssue = () => {
+    const { messages, suggestions, userEvents } = useAtomValue(chatAtom);
+    const lastMessages = useAtomValue(lastAssistantMessageAtom);
+    const [lastMessagesText, setLastMessagesText] = useState('');
+    const [lastSuggestionsText, setLastSuggestionsText] = useState('');
+    const [lastSuggestions, setLastSuggestions] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [turnInfo, setTurnInfo] = useState({});
+    const reportType = ReportSessionRequestReportTypeEnum.Turn;
+    const [isReasonInvalid, setIsReasonInvalid] = useState(true);
+    const [reason, setReason] = useState('');
+    const [reportedBy, setReportedBy] = useState('');
+    const [reportedByIsInvalid, setReportedByIsInvalid] = useState(true);
+    const [isReporting, setIsReporting] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [priority, setPriority] = useState(ReportSessionRequestReportPriorityEnum.NoPriority);
+    const userId = useAtomValue(userIdAtom);
+    const orgShortName = useAtomValue(orgShortNameAtom);
+    const lastUserEvent = userEvents && userEvents.length > 0 ? userEvents[userEvents.length - 1] : undefined;
+    const onOpen = useCallback(() => setIsOpen(true), []);
+    const onClose = useCallback(() => setIsOpen(false), []);
+    useEffect(() => {
+        if (messages) {
+            const currentMessages = messages.length > 0 ? messages[messages.length - 1] : [];
+            if (currentMessages.length > 0 && lastUserEvent) {
+                setTurnInfo(prev => ({
+                    ...prev,
+                    turn_idx: currentMessages.length - 1,
+                }));
+            }
+        }
+    }, [messages]);
+    useEffect(() => {
+        if (suggestions) {
+            setLastSuggestions(suggestions);
+        }
+        else {
+            setLastSuggestions([]);
+        }
+    }, [suggestions]);
+    useEffect(() => {
+        if (lastUserEvent) {
+            setTurnInfo(prev => ({
+                ...prev,
+                prev_user_event: {
+                    id: lastUserEvent.eventId,
+                    category: lastUserEvent.category,
+                },
+            }));
+        }
+        else {
+            setTurnInfo(prev => ({ ...prev, prev_user_event: undefined }));
+        }
+    }, [lastUserEvent]);
+    useEffect(() => {
+        if (lastMessages) {
+            setLastMessagesText(lastMessages
+                .filter(m => m.type !== MessageType.Separator)
+                .map(m => messageContent(m))
+                .join('\n\n'));
+            setTurnInfo(prev => ({
+                ...prev,
+                messages: lastMessages.map(m => ({
+                    id: m.id,
+                    content: messageContent(m),
+                })),
+            }));
+        }
+    }, [lastMessages]);
+    useEffect(() => {
+        if (lastSuggestions) {
+            const sortedSuggestions = [
+                ...lastSuggestions.filter(s => s.is_answer),
+                ...lastSuggestions.filter(s => !s.is_answer),
+            ];
+            setLastSuggestionsText(`- ${sortedSuggestions.map(s => s.content).join('\n- ')}`);
+            setTurnInfo(prev => ({
+                ...prev,
+                suggestions: sortedSuggestions.map(s => ({
+                    id: s.id,
+                    content: s.content,
+                })),
+            }));
+        }
+    }, [lastSuggestions]);
+    const reportSession = useCallback(async () => {
+        try {
+            setIsReporting(true);
+            setErrorMessage('');
+            const request = {
+                user_id: userId,
+                reported_by: reportedBy,
+                org_short_name: orgShortName,
+                report_priority: priority,
+                reason,
+                turn_info: turnInfo,
+                report_type: reportType,
+            };
+            console.info('Submitting report', request);
+            await CommerceApiClient.reportSession(request);
+            onClose();
+        }
+        catch (error) {
+            console.error('Error sending report', error);
+            setErrorMessage('There was an error sending the report. Please try again or contact Envive Support.');
+        }
+        finally {
+            setIsReporting(false);
+        }
+    }, [userId, reportedBy, orgShortName, priority, reason, turnInfo, reportType, onClose]);
+    const onReportedByChanging = useCallback((e) => {
+        const reportedByValue = e.target.value;
+        const isEmail = validateEmail(reportedByValue);
+        setReportedByIsInvalid(!reportedByValue || !isEmail);
+        setReportedBy(reportedByValue);
+    }, []);
+    const onDescriptionChanging = useCallback((e) => {
+        const descriptionValue = e.target.value;
+        setIsReasonInvalid(StringUtils.isNullOrEmpty(descriptionValue));
+        setReason(descriptionValue);
+    }, []);
+    const handlePriorityChange = useCallback((key) => {
+        setPriority(key);
+    }, []);
+    const handleTurnInfoChange = useCallback((e, field) => {
+        setTurnInfo(prev => ({ ...prev, [field]: e.target.value }));
+    }, []);
+    const buttonClassnames = classNames({
+        'envive-tw-underline': true,
+        'envive-tw-text-inherit': true,
+        'envive-tw-text-[12px]': true,
+        'envive-tw-cursor-pointer': true,
+        'envive-tw-bg-transparent': true,
+        'envive-tw-border-none': true,
+        'envive-tw-p-0': true,
+        'envive-tw-m-0': true,
+        'envive-tw-inline': true,
+        'envive-tw-z-[9999]': true,
+    });
+    return (_jsxs("div", { className: "envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full", children: [_jsx("button", { type: "button", onClick: e => {
+                    e.preventDefault();
+                    onOpen();
+                }, className: buttonClassnames, children: "Give us feedback" }), _jsxs(Drawer, { isOpen: isOpen, onClose: onClose, children: [_jsx(ReportHeader, { onClose: onClose }), _jsx("div", { className: "envive-tw-min-h-0 envive-tw-p-0 envive-tw-flex envive-tw-flex-[1_1_auto] envive-tw-flex-col envive-tw-overflow-y-auto", children: lastMessages && lastSuggestions && lastMessages.length > 0 && (_jsx(ReportFormFields, { priority: priority, setPriority: handlePriorityChange, reportedBy: reportedBy, onReportedByChanging: onReportedByChanging, reason: reason, onDescriptionChanging: onDescriptionChanging, turnInfo: turnInfo, setTurnInfo: handleTurnInfoChange, lastMessagesText: lastMessagesText, lastSuggestionsText: lastSuggestionsText })) }), _jsx(ReportFooter, { isReporting: isReporting, errorMessage: errorMessage, reportedByIsInvalid: reportedByIsInvalid, isReasonInvalid: isReasonInvalid, onReportSession: reportSession, onClose: onClose })] })] }));
+};

package/dist/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.d.ts

@@ -0,0 +1 @@
+export {};