@constructor-io/constructorio-ui-pia 2.10.4 → 2.11.0

package/lib/cjs/components/Input/InputStyles.css

@@ -21,11 +21,38 @@
     1px 1px 1px 0px rgba(18, 18, 105, 0.05) inset;
 }
 
+/*
+ * Input Without A Send Button
+ *
+ * The right padding above is room for the Send button. With no button there is nothing to keep
+ * clear of, and leaving it would truncate what the shopper typed well short of the border.
+ */
+.cio-pia-input--no-send {
+  padding-right: 12px;
+}
+
 /* Input Hover */
 .cio-pia-input:hover {
   border: 1px solid #c8cad0;
 }
 
+/* Input Rejected Value */
+.cio-pia-input--error,
+.cio-pia-input--error:hover,
+.cio-pia-input--error:focus {
+  border: 1px solid #d93025;
+  box-shadow: none;
+}
+
+/* Input Rejected Value Message */
+.cio-pia-input-error {
+  display: block;
+  margin-top: 4px;
+  color: #d93025;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 /* Input Focus */
 .cio-pia-input:focus {
   outline: none;

package/lib/cjs/components/SuggestedQuestion/SuggestedQuestion.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("../icons");
-function SuggestedQuestion({ question, onClick }) {
+function SuggestedQuestion({ question, onClick, icon }) {
     return (react_1.default.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
-        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' },
-            react_1.default.createElement(icons_1.QuestionIcon, null)),
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' }, icon !== null && icon !== void 0 ? icon : react_1.default.createElement(icons_1.QuestionIcon, null)),
         question));
 }
 exports.default = SuggestedQuestion;

package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainerStyles.css

@@ -21,7 +21,7 @@
 }
 
 .cio-pia-suggested-question-skeleton {
-  height: 28px;
+  height: 34px;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.05);
   animation: loading-animation 2s infinite ease-in-out;

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_NAME = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
+exports.RECS_INPUT_PLACEHOLDER = exports.RECS_REFINEMENT_LABEL = exports.RECS_UNSUPPORTED_REQUEST = exports.RECS_FALLBACK_TITLE = exports.RECS_LOADING_TITLE = exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_NAME = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
 exports.DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 exports.DEMO_ITEM_ID = '149100215';
 exports.DEMO_ITEM_NAME = 'Ensure Original Nutrition Shake';
@@ -15,3 +15,14 @@ exports.MOCK_QUESTIONS = [
     { value: 'What is the serving size and calorie count?' },
 ];
 exports.DISCLAIMER_TEXT = 'AI-generated answers aim to help, but they may occasionally miss details or be inaccurate. Double-check important information before purchasing.';
+/**
+ * Recommendations pod strings the API cannot supply, because in these states there is either
+ * no response yet or no usable response at all. Everything else the pod shows comes from the
+ * API. All five are `Translations` keys, so reference the constants instead of retyping the
+ * literals - a mistyped key falls back to itself with no warning.
+ */
+exports.RECS_LOADING_TITLE = 'Adapting recommendations to your preference';
+exports.RECS_FALLBACK_TITLE = 'Best selling products';
+exports.RECS_UNSUPPORTED_REQUEST = 'Unsupported request, try a different feature.';
+exports.RECS_REFINEMENT_LABEL = "Not what you're looking for? Try:";
+exports.RECS_INPUT_PLACEHOLDER = 'Describe something else...';

package/lib/cjs/hooks/mocks/agent.js

@@ -116,6 +116,23 @@ class MockAgent {
             }
         });
     }
+    /**
+     * Fetches one set of recommendations, in the shape the pod renders.
+     *
+     * Recommendations are not available yet: there is no endpoint to ask, so nothing is requested and
+     * an empty result is returned. The pod renders nothing in that state, which leaves whatever the
+     * retailer already had in that slot showing through. Supply a `cioClient` with your own
+     * `agent.getRecs` to drive the pod from your own data in the meantime.
+     *
+     * `props` is still declared, because it is the contract a caller's own `getRecs` implements and
+     * `useRecsPod` passes it - there is simply nothing here to send it to yet.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getRecs(props) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            return { title: '', items: null, refinement: null, status: 'complete' };
+        });
+    }
     getAnswerResultsStream({ itemId, threadId, variationId, question, parameters, onStart, onMessage, onEnd, }) {
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
             if (!itemId)

package/lib/cjs/hooks/useCioPia.js

@@ -1,24 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = require("react");
-const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
 const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
+const usePiaClient_1 = tslib_1.__importDefault(require("./usePiaClient"));
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
-const version_1 = tslib_1.__importDefault(require("../version"));
 function useCioPia(props) {
     const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, parameters, formatImageUrl, } = props;
-    const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
-    const threadId = providedThreadId || generatedThreadId;
-    const client = (0, react_1.useMemo)(() => {
-        if (providedClient)
-            return providedClient;
-        return new MockConstructorIOClient_1.default({
-            apiKey,
-            sendTrackingEvents: true,
-            version: `cio-ui-pia-${version_1.default}`,
-        });
-    }, [apiKey, providedClient]);
+    const { cioClient: client, threadId } = (0, usePiaClient_1.default)({
+        apiKey,
+        threadId: providedThreadId,
+        cioClient: providedClient,
+    });
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
         itemId,
         variationId,

package/lib/cjs/hooks/usePiaClient.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
+const version_1 = tslib_1.__importDefault(require("../version"));
+/**
+ * Resolves the client and thread ID every mode needs: the caller's client when they supplied
+ * one, otherwise a client built from the API key, plus a generated thread ID that stays stable
+ * for the life of the component.
+ */
+function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, }) {
+    const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
+    const threadId = providedThreadId || generatedThreadId;
+    const client = (0, react_1.useMemo)(() => {
+        if (providedClient)
+            return providedClient;
+        return new MockConstructorIOClient_1.default({
+            apiKey,
+            sendTrackingEvents: true,
+            version: `cio-ui-pia-${version_1.default}`,
+        });
+    }, [apiKey, providedClient]);
+    return { cioClient: client, threadId };
+}
+exports.default = usePiaClient;

package/lib/cjs/hooks/useRecsPod.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const errors_1 = require("../errors");
+const translate_1 = require("../utils/translate");
+const constants_1 = require("../constants");
+const DEFAULT_STRATEGY = 'complementary_items';
+/**
+ * Owns everything a recommendations pod shows: one request on mount, one on every refinement,
+ * and the title that belongs to whichever of those is happening right now.
+ *
+ * The previous items are deliberately kept while a new request is in flight, so a refinement
+ * swaps the products without collapsing the row they sit in. The title is the one thing that does
+ * change, so the shopper can see the pod reacting to what they asked for.
+ */
+function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, translations, }) {
+    var _a;
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [hasUnsupportedInput, setHasUnsupportedInput] = (0, react_1.useState)(false);
+    const [lastShopperInput, setLastShopperInput] = (0, react_1.useState)('');
+    // Counts requests so a slow response cannot overwrite a newer one. There is no
+    // AbortController in this library, so the older request still completes; its result is
+    // simply dropped.
+    const requestIdRef = (0, react_1.useRef)(0);
+    // Mirrored into a ref so it never becomes a fetch dependency. It is commonly written inline by
+    // the caller, which would give it a new identity on every render and refetch forever.
+    const formatImageUrlRef = (0, react_1.useRef)(formatImageUrl);
+    (0, react_1.useEffect)(() => {
+        formatImageUrlRef.current = formatImageUrl;
+    }, [formatImageUrl]);
+    const strategy = (parameters === null || parameters === void 0 ? void 0 : parameters.strategy) || DEFAULT_STRATEGY;
+    const { numResults, defaultTitle } = parameters || {};
+    const fetchResult = (0, react_1.useCallback)((shopperInput, source) => {
+        // Nothing to ask, so settle the loading state rather than leaving the caller in a skeleton
+        // that never resolves.
+        if (!cioClient) {
+            setIsLoading(false);
+            return;
+        }
+        requestIdRef.current += 1;
+        const requestId = requestIdRef.current;
+        const isCurrent = () => requestId === requestIdRef.current;
+        setIsLoading(true);
+        setError(null);
+        setHasUnsupportedInput(false);
+        cioClient.agent
+            .getRecs({
+            itemId,
+            variationId,
+            threadId,
+            strategy,
+            shopperInput,
+            numResults,
+            formatImageUrl: formatImageUrlRef.current,
+        })
+            .then((fetchedResult) => {
+            if (!isCurrent())
+                return;
+            setResult(fetchedResult);
+            setLastShopperInput(shopperInput || '');
+        })
+            .catch((err) => {
+            if (!isCurrent())
+                return;
+            const failure = err instanceof Error ? err : new Error('Error fetching recommendations');
+            const status = failure instanceof errors_1.AgentRequestError ? failure.status : undefined;
+            if (status === 400) {
+                // A 400 means the request we built was malformed, which is our bug, not the
+                // shopper's. Make it loud so it is caught in development.
+                console.error('Constructor PIA: the recommendations request was rejected.', failure);
+            }
+            // A rejected input changes nothing but the input, so the response on screen stays.
+            // Only text the shopper wrote can be rejected this way: an option is a label the API
+            // suggested, so blaming their input for it would point at the wrong thing entirely.
+            if (status === 422 && source === 'input') {
+                setHasUnsupportedInput(true);
+                return;
+            }
+            setError(failure);
+        })
+            .finally(() => {
+            if (!isCurrent())
+                return;
+            setIsLoading(false);
+        });
+    }, 
+    // Every dependency is a primitive. `formatImageUrl` is read through a ref instead, so a
+    // caller writing it inline cannot restart the request on every render.
+    [cioClient, itemId, variationId, threadId, strategy, numResults]);
+    (0, react_1.useEffect)(() => {
+        fetchResult();
+    }, [fetchResult]);
+    const refine = (0, react_1.useCallback)((text, source) => {
+        const refinementText = text.trim();
+        if (!refinementText)
+            return;
+        fetchResult(refinementText, source);
+    }, [fetchResult]);
+    // The title belonging to the last response we kept. `defaultTitle` is the caller's last resort
+    // for a response that carried items but no title of its own.
+    const settledTitle = (result === null || result === void 0 ? void 0 : result.title) || defaultTitle || '';
+    let title = settledTitle;
+    if (isLoading) {
+        // The loading copy wins whether or not a title is held, so a refinement announces itself
+        // rather than leaving the previous personalization above products that no longer match it.
+        title = (0, translate_1.translate)(constants_1.RECS_LOADING_TITLE, translations);
+    }
+    else if (!hasUnsupportedInput && (error || (result === null || result === void 0 ? void 0 : result.status) === 'partial')) {
+        // Either the request failed or it came back degraded, so the personalized title cannot be
+        // trusted. Any products it did carry are still worth showing under a generic title.
+        title = (0, translate_1.translate)(constants_1.RECS_FALLBACK_TITLE, translations);
+    }
+    return {
+        title,
+        // Normalized so every caller can treat "nothing to render" as a single case. Our own adapter
+        // never returns an empty array, but `cioClient` is a public prop and a consumer-supplied client
+        // can. Note `[]` is truthy, so `|| null` would not catch it.
+        items: ((_a = result === null || result === void 0 ? void 0 : result.items) === null || _a === void 0 ? void 0 : _a.length) ? result.items : null,
+        refinement: (result === null || result === void 0 ? void 0 : result.refinement) || null,
+        isLoading,
+        error,
+        inputError: hasUnsupportedInput ? (0, translate_1.translate)(constants_1.RECS_UNSUPPORTED_REQUEST, translations) : null,
+        lastShopperInput,
+        refine,
+    };
+}
+exports.default = useRecsPod;

package/lib/cjs/hooks/useViewportTracking.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const FLUSH_INTERVAL_MS = 5 * 60 * 1000;
-function useViewportTracking({ tracking, questions, }) {
+const DEFAULT_VIEW_THRESHOLD = 0.5;
+function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW_THRESHOLD, }) {
     const nodeRef = (0, react_1.useRef)(null);
     const observerRef = (0, react_1.useRef)(null);
     const intervalRef = (0, react_1.useRef)(null);
@@ -50,7 +51,7 @@ function useViewportTracking({ tracking, questions, }) {
                 entryTimeRef.current = null;
                 trackingRef.current.trackOutOfView();
             }
-        }, { threshold: 0.5 });
+        }, { threshold: viewThreshold });
         observer.observe(element);
         observerRef.current = observer;
         intervalRef.current = setInterval(flush, FLUSH_INTERVAL_MS);

package/lib/cjs/styles.css

@@ -9,6 +9,7 @@
 @import './components/CioPia/CioPiaStyles.css';
 @import './components/ConversationHistory/ConversationHistoryStyles.css';
 @import './components/PiaConversation/PiaConversationStyles.css';
+@import './components/CioPiaRecs/CioPiaRecsStyles.css';
 
 .cio-pia-container {
   font-family: 'Inter', sans-serif;

package/lib/cjs/utils/classNames.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+/**
+ * Joins class names, dropping the falsy ones, so a conditional class can be written inline.
+ *
+ * Deliberately not `clsx` or `classnames`: neither is a dependency of this package, and the copy of
+ * `clsx` in the tree belongs to `@constructor-io/constructorio-ui-components`, which is a peer
+ * dependency - importing it here would work locally and break in a consumer that hoists
+ * differently. Worth revisiting if this ever needs to accept objects or nested arrays.
+ */
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+exports.cx = cx;

package/lib/cjs/utils/recs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRefinementQuestion = void 0;
+const translate_1 = require("./translate");
+const constants_1 = require("../constants");
+/**
+ * The line that introduces the refinement options. Prefers the prompt the API sent, so our
+ * copy and theirs cannot drift.
+ */
+function resolveRefinementQuestion(refinement, translations) {
+    return (refinement === null || refinement === void 0 ? void 0 : refinement.question) || (0, translate_1.translate)(constants_1.RECS_REFINEMENT_LABEL, translations);
+}
+exports.resolveRefinementQuestion = resolveRefinementQuestion;

package/lib/cjs/utils/translate.js

@@ -11,6 +11,11 @@ const defaultTranslations = {
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
     'Add to Cart': 'Add to Cart',
+    [constants_1.RECS_LOADING_TITLE]: constants_1.RECS_LOADING_TITLE,
+    [constants_1.RECS_FALLBACK_TITLE]: constants_1.RECS_FALLBACK_TITLE,
+    [constants_1.RECS_UNSUPPORTED_REQUEST]: constants_1.RECS_UNSUPPORTED_REQUEST,
+    [constants_1.RECS_REFINEMENT_LABEL]: constants_1.RECS_REFINEMENT_LABEL,
+    [constants_1.RECS_INPUT_PLACEHOLDER]: constants_1.RECS_INPUT_PLACEHOLDER,
 };
 /**
  * Translates a word using the provided translations object.

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.10.4';
+exports.default = '2.11.0';

package/lib/mjs/components/CioPia/CioPia.js

@@ -1,98 +1,10 @@
-import React, { useCallback } from 'react';
-import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
-import Input from '../Input/Input';
-import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
-import useCioPia from '../../hooks/useCioPia';
-import useConversation from '../../hooks/useConversation';
-import useTracking from '../../hooks/useTracking';
-import useViewportTracking from '../../hooks/useViewportTracking';
-import useViewportCallbacks from '../../hooks/useViewportCallbacks';
-import ErrorBlock from '../Error/ErrorBlock';
-import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
-import { translate } from '../../utils/translate';
-import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
-import PiaModal from '../PiaConversation/PiaModal';
-import PiaConversation from '../PiaConversation/PiaConversation';
-// eslint-disable-next-line complexity
+import React from 'react';
+import CioPiaQna from './CioPiaQna';
+import CioPiaRecs from '../CioPiaRecs/CioPiaRecs';
 export default function CioPia(props) {
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, } = props;
-    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
-    const isConversation = mode === 'conversation' || type === 'modal';
-    const { priceCurrency } = productCardProps || {};
-    const pia = useCioPia({
-        apiKey,
-        itemId,
-        threadId,
-        variationId,
-        cioClient,
-        suggestedQuestionsParameters,
-        parameters,
-        formatImageUrl: formatters?.formatImageUrl,
-    });
-    const tracking = useTracking({
-        cioClient: pia.cioClient,
-        itemId,
-        itemName,
-        variationId,
-        threadId: pia.threadId,
-    });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = useConversation({ pia, itemId, isConversation, callbacks, tracking });
-    const { containerRef: viewportContainerRef } = useViewportTracking({
-        tracking,
-        questions: displayedQuestions,
-    });
-    const { containerRef: callbackContainerRef } = useViewportCallbacks({ callbacks, context });
-    const containerRef = useCallback((node) => {
-        viewportContainerRef(node);
-        callbackContainerRef(node);
-    }, [viewportContainerRef, callbackContainerRef]);
-    const qnaResultId = pia.answers.data?.qna_result_id;
-    const renderProps = {
-        items: currentItems,
-        isLoading,
-        error,
-        currentAnswer,
-        currentQuestion,
-        displayedQuestions,
-        handleSubmitQuestion,
-        conversationHistory,
-    };
-    const conversationHistoryProps = {
-        conversationHistory,
-        isLoading,
-        error,
-        currentItems,
-        showFeedback,
-        showPreviousItems,
-        learnMoreUrl,
-        disclaimerPosition,
-        translations,
-        callbacks,
-        componentOverrides,
-        displayedQuestions,
-        handleSubmitQuestion,
-        handleQuestionClick,
-        handleFeedback,
-        onResultClick: tracking.trackResultClick,
-        qnaResultId,
-        containerRef,
-        onInputFocus: handleInputFocus,
-        priceCurrency,
-    };
-    if (type === 'modal') {
-        return (React.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
-            React.createElement(PiaConversation, { ...conversationHistoryProps })));
+    const mode = props.displayConfigs?.mode ?? 'default';
+    if (mode === 'recommendations') {
+        return React.createElement(CioPiaRecs, { ...props });
     }
-    if (isConversation)
-        return React.createElement(PiaConversation, { ...conversationHistoryProps });
-    // Default inline mode
-    return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
-        React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
-            React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
-            isLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
-            !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
-            !isLoading && !error && (React.createElement(React.Fragment, null,
-                currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
-                React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions }))))));
+    return React.createElement(CioPiaQna, { ...props });
 }

package/lib/mjs/components/CioPia/CioPiaQna.js

@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
+import Input from '../Input/Input';
+import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
+import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
+import useCioPia from '../../hooks/useCioPia';
+import useConversation from '../../hooks/useConversation';
+import useTracking from '../../hooks/useTracking';
+import useViewportTracking from '../../hooks/useViewportTracking';
+import useViewportCallbacks from '../../hooks/useViewportCallbacks';
+import ErrorBlock from '../Error/ErrorBlock';
+import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
+import { translate } from '../../utils/translate';
+import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
+import PiaModal from '../PiaConversation/PiaModal';
+import PiaConversation from '../PiaConversation/PiaConversation';
+/** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
+// eslint-disable-next-line complexity
+export default function CioPiaQna(props) {
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, trackingConfigs, } = props;
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
+    const isConversation = mode === 'conversation' || type === 'modal';
+    const { priceCurrency } = productCardProps || {};
+    const pia = useCioPia({
+        apiKey,
+        itemId,
+        threadId,
+        variationId,
+        cioClient,
+        suggestedQuestionsParameters,
+        parameters,
+        formatImageUrl: formatters?.formatImageUrl,
+    });
+    const tracking = useTracking({
+        cioClient: pia.cioClient,
+        itemId,
+        itemName,
+        variationId,
+        threadId: pia.threadId,
+    });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = useConversation({ pia, itemId, isConversation, callbacks, tracking });
+    const { containerRef: viewportContainerRef } = useViewportTracking({
+        tracking,
+        questions: displayedQuestions,
+        viewThreshold: trackingConfigs?.viewThreshold,
+    });
+    const { containerRef: callbackContainerRef } = useViewportCallbacks({ callbacks, context });
+    const containerRef = useCallback((node) => {
+        viewportContainerRef(node);
+        callbackContainerRef(node);
+    }, [viewportContainerRef, callbackContainerRef]);
+    const qnaResultId = pia.answers.data?.qna_result_id;
+    // The text bars stand in for the answer alone, so they track the answer request only. The question
+    // row keeps the combined `isLoading`: the follow-up questions that refill it arrive with the
+    // answer, so the row is waiting on either request.
+    const isAnswerLoading = pia.answers.isLoading;
+    const renderProps = {
+        items: currentItems,
+        isLoading,
+        error,
+        currentAnswer,
+        currentQuestion,
+        displayedQuestions,
+        handleSubmitQuestion,
+        conversationHistory,
+    };
+    const conversationHistoryProps = {
+        conversationHistory,
+        isLoading,
+        error,
+        currentItems,
+        showFeedback,
+        showPreviousItems,
+        learnMoreUrl,
+        disclaimerPosition,
+        translations,
+        callbacks,
+        componentOverrides,
+        displayedQuestions,
+        handleSubmitQuestion,
+        handleQuestionClick,
+        handleFeedback,
+        onResultClick: tracking.trackResultClick,
+        qnaResultId,
+        containerRef,
+        onInputFocus: handleInputFocus,
+        priceCurrency,
+    };
+    if (type === 'modal') {
+        return (React.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
+            React.createElement(PiaConversation, { ...conversationHistoryProps })));
+    }
+    if (isConversation)
+        return React.createElement(PiaConversation, { ...conversationHistoryProps });
+    // Default inline mode
+    return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+        React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
+            React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
+            isAnswerLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
+            !isAnswerLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
+            !isAnswerLoading && !error && currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+            isLoading && React.createElement(SuggestedQuestionsSkeleton, null),
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })))));
+}

package/lib/mjs/components/CioPia/CioPiaStyles.css

@@ -30,3 +30,22 @@
 .cio-pia-learn-more {
   color: inherit;
 }
+
+/* Neutral placeholder shown until the product image itself paints over it.
+   Set on the image element so it inherits the card's own size and corner radius. */
+.cio-pia-answer-container .cio-product-card-image {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Restores the clamped, muted look of the stock ProductCard description, which the
+   custom HTML description rendering does not inherit. */
+.cio-pia-answer-container .cio-product-card-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  color: #6b7280;
+}

package/lib/mjs/components/CioPia/types.js

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