@constructor-io/constructorio-ui-pia 2.0.0 → 2.1.1

package/lib/cjs/components/PiaConversation/PiaConversationStyles.css

@@ -0,0 +1,91 @@
+.cio-pia-conversation {
+  max-height: var(--cio-pia-conversation-max-height);
+}
+
+.cio-pia-conversation-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+body.cio-pia-modal-open {
+  overflow: hidden;
+}
+
+.cio-pia-modal {
+  border: none;
+  border-radius: 12px;
+  padding: 0;
+  width: 90%;
+  max-width: var(--cio-pia-modal-max-width);
+  min-width: var(--cio-pia-modal-min-width);
+  max-height: var(--cio-pia-modal-height);
+  overflow: hidden;
+  box-shadow:
+    0px 8px 32px rgba(0, 0, 0, 0.12),
+    0px 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.cio-pia-modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.cio-pia-modal-content {
+  display: flex;
+  flex-direction: column;
+  height: var(--cio-pia-modal-height);
+  max-height: var(--cio-pia-modal-height);
+}
+
+.cio-pia-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  box-shadow: 0px 1px 4px 0px rgba(18, 18, 105, 0.1);
+  flex-shrink: 0;
+}
+
+.cio-pia-modal-close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  color: rgba(15, 19, 36, 0.6);
+  border-radius: 4px;
+}
+
+.cio-pia-modal-close-button:hover {
+  color: #14151a;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.cio-pia-modal-body {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cio-pia-modal-body .cio-pia-conversation {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+
+.cio-pia-modal-body .cio-pia-conversation-history {
+  max-height: none;
+  flex: 1;
+  padding: 16px 20px 0;
+}
+
+.cio-pia-modal-body .cio-pia-conversation-footer {
+  padding: 0 20px 20px;
+}
+
+.cio-pia-modal-body .cio-pia-title {
+  padding: 0 20px;
+}

package/lib/cjs/components/PiaConversation/PiaModal.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
+const translate_1 = require("../../utils/translate");
+const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
+const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+function CloseIcon() {
+    return (react_1.default.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
+}
+function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, componentOverrides, translations, onClose, children, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const dialogRef = (0, react_1.useRef)(null);
+    const openModal = (0, react_1.useCallback)(() => {
+        setIsOpen(true);
+    }, []);
+    const closeModal = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return undefined;
+        if (isOpen) {
+            dialog.showModal();
+            document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
+        }
+        else if (dialog.open) {
+            dialog.close();
+            document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
+        }
+        return () => {
+            document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
+        };
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return undefined;
+        const handleCancel = (e) => {
+            e.preventDefault();
+            closeModal();
+        };
+        const handleClick = (e) => {
+            if (e.target === dialog)
+                closeModal();
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        dialog.addEventListener('click', handleClick);
+        return () => {
+            dialog.removeEventListener('cancel', handleCancel);
+            dialog.removeEventListener('click', handleClick);
+        };
+    }, [closeModal]);
+    const handleQuestion = (0, react_1.useCallback)((question) => {
+        handleSubmitQuestion(question);
+        openModal();
+    }, [handleSubmitQuestion, openModal]);
+    return (react_1.default.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+        react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations)),
+        react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations }),
+        initialQuestions.length > 0 && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: initialQuestions, onQuestionClick: handleQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+        react_1.default.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
+            react_1.default.createElement("div", { className: 'cio-pia-modal-content' },
+                react_1.default.createElement("div", { className: 'cio-pia-modal-header' },
+                    react_1.default.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, (0, translate_1.translate)('Ask about this product', translations)),
+                    react_1.default.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": 'Close', onClick: closeModal },
+                        react_1.default.createElement(CloseIcon, null))),
+                react_1.default.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
+}
+exports.default = PiaModal;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function QuestionSvg() {
+    return (react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' },
+        react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            react_1.default.createElement("g", { id: 'help' },
+                react_1.default.createElement("path", { id: 'Vector', d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })))));
+}
+function SuggestedQuestion({ question, onClick }) {
+    return (react_1.default.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
+        react_1.default.createElement(QuestionSvg, null),
+        question));
+}
+exports.default = SuggestedQuestion;

package/lib/cjs/components/SuggestedQuestion/SuggestedQuestionStyles.css

@@ -0,0 +1,33 @@
+.cio-pia-suggested-question {
+  background: #ffffff;
+  border: 1px solid #dee0e3;
+  border-radius: 4px;
+  padding: 4px 12px 4px 4px;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+  min-width: fit-content;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  color: #14151a;
+  cursor: pointer;
+  box-shadow:
+    0px 0.4px 1px 0px rgba(18, 18, 105, 0.13),
+    0px 0.9px 6px 0px rgba(18, 18, 105, 0.05),
+    0px 1px 3px 0px rgba(18, 18, 105, 0.05);
+  gap: 2px;
+  transition: all 0.2s ease;
+}
+
+.cio-pia-suggested-question:hover {
+  background-color: #f8f9fa;
+  border-color: #c4c7cc;
+  transform: translateY(-1px);
+}
+
+.cio-pia-suggested-question-icon {
+  display: flex;
+  padding: 4px;
+}

package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const SuggestedQuestion_1 = tslib_1.__importDefault(require("../SuggestedQuestion/SuggestedQuestion"));
+function SuggestedQuestionsContainer({ questions, onQuestionClick, componentOverride, }) {
+    if (!questions || questions.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { questions, onQuestionClick }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-list' }, questions.map((question) => (react_1.default.createElement(SuggestedQuestion_1.default, { key: question.value, question: question.value, onClick: () => onQuestionClick(question.value) }))))));
+}
+exports.default = SuggestedQuestionsContainer;

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

@@ -0,0 +1,37 @@
+.cio-pia-suggested-questions-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .cio-pia-suggested-questions-container {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 8px;
+    padding: 4px 0px;
+    width: 100%;
+    max-width: 85vw;
+
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+  }
+}
+
+.cio-pia-suggested-question-skeleton {
+  height: 28px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.05);
+  animation: loading-animation 2s infinite ease-in-out;
+  &:nth-child(1) {
+    animation-delay: 0.3s;
+  }
+  &:nth-child(2) {
+    animation-delay: 0.6s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.9s;
+  }
+}

package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsSkeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SuggestedQuestionsSkeleton() {
+    return (react_1.default.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-busy": 'true', "aria-label": 'Loading suggestions' },
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' })));
+}
+exports.default = SuggestedQuestionsSkeleton;

package/lib/cjs/constants.js

@@ -0,0 +1,17 @@
+"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_ID = exports.DEMO_API_KEY = void 0;
+// eslint-disable-next-line import/prefer-default-export
+exports.DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
+exports.DEMO_ITEM_ID = '149100215';
+exports.DEMO_QUESTION = 'What is the nutritional content of this shake?';
+exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = 'What alternative products are available for this item?';
+exports.MOCK_QUESTIONS = [
+    { value: 'What is the nutritional content per serving?' },
+    { value: 'How many calories does each bottle contain?' },
+    { value: 'What is the shelf life of this product?' },
+    { value: 'Is this shake suitable for specific dietary needs?' },
+    { value: 'What flavor options are available for Ensure shakes?' },
+    { 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.';

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const agent_1 = tslib_1.__importDefault(require("./agent"));
+const version_1 = tslib_1.__importDefault(require("../../version"));
+class MockConstructorIOClient {
+    constructor(options) {
+        this.options = Object.assign({ version: options.version || `cio-ui-pia-${version_1.default}`, serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com', quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com', agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com', sessionId: options.sessionId || 0, clientId: options.clientId || 'this-is-a-random-client-id', sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true, beaconMode: options.beaconMode !== undefined ? options.beaconMode : true, networkParameters: options.networkParameters || {} }, options);
+        const cioClient = new constructorio_client_javascript_1.default(this.options);
+        this.search = cioClient.search;
+        this.browse = cioClient.browse;
+        this.recommendations = cioClient.recommendations;
+        this.tracker = cioClient.tracker;
+        this.quizzes = cioClient.quizzes;
+        // Use the mock agent instead of the one from the client
+        this.agent = new agent_1.default(this.options);
+    }
+}
+exports.default = MockConstructorIOClient;

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

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// Create URL for PIA API
+function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
+    const { apiKey, agentServiceUrl } = options;
+    if (!agentServiceUrl)
+        throw new Error('Agent service URL is required');
+    let baseUrl = `${agentServiceUrl}/v1/item_questions`;
+    if (question) {
+        baseUrl += `/${encodeURIComponent(question)}/answer`;
+    }
+    if (isStreaming) {
+        baseUrl += '/streaming';
+    }
+    const url = new URL(baseUrl);
+    url.searchParams.append('item_id', itemId);
+    url.searchParams.append('key', apiKey);
+    if (threadId) {
+        url.searchParams.append('thread_id', threadId);
+    }
+    if (variationId) {
+        url.searchParams.append('variation_id', variationId);
+    }
+    // Any additional parameters
+    Object.entries(parameters).forEach(([key, value]) => {
+        if (value !== undefined) {
+            url.searchParams.append(key, String(value));
+        }
+    });
+    return url.toString();
+}
+// Map camelCase SuggestedQuestionsParameters to snake_case query params expected by the API
+function mapSuggestedQuestionsParams(params) {
+    const result = {};
+    if (params.numResults !== undefined)
+        result.num_results = params.numResults;
+    return result;
+}
+class MockAgent {
+    constructor(options) {
+        this.options = options;
+    }
+    getSuggestedQuestions({ itemId, variationId, threadId, parameters = {}, }) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (!itemId)
+                throw new Error('Item ID is required');
+            if (!this.options.apiKey)
+                throw new Error('API key is required');
+            const url = createAgentUrl({
+                itemId,
+                variationId,
+                threadId,
+                options: this.options,
+                parameters: mapSuggestedQuestionsParams(parameters),
+            });
+            try {
+                const response = yield fetch(url);
+                if (!response.ok)
+                    throw new Error(`Request failed with status ${response.status}`);
+                const data = yield response.json();
+                return data;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                throw new Error(errorMessage);
+            }
+        });
+    }
+    getAnswerResults({ itemId, variationId, threadId, question, parameters = {}, }) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (!itemId)
+                throw new Error('Item ID is required');
+            if (!question)
+                throw new Error('Question is required');
+            if (!this.options.apiKey)
+                throw new Error('API key is required');
+            const url = createAgentUrl({
+                itemId,
+                threadId,
+                variationId,
+                question,
+                options: this.options,
+                parameters,
+            });
+            try {
+                const response = yield fetch(url);
+                if (!response.ok)
+                    throw new Error(`Request failed with status ${response.status}`);
+                const data = yield response.json();
+                return data;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                throw new Error(errorMessage);
+            }
+        });
+    }
+    getAnswerResultsStream({ itemId, threadId, variationId, question, parameters, onStart, onMessage, onEnd, }) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (!itemId)
+                throw new Error('Item ID is required');
+            if (!question)
+                throw new Error('Question is required');
+            if (!this.options.apiKey)
+                throw new Error('API key is required');
+            const url = createAgentUrl({
+                itemId,
+                threadId,
+                variationId,
+                question,
+                isStreaming: true,
+                options: this.options,
+                parameters,
+            });
+            try {
+                const eventSource = new EventSource(url);
+                eventSource.addEventListener('open', (event) => {
+                    const data = JSON.parse(event.data);
+                    if (onStart)
+                        onStart(data);
+                });
+                eventSource.addEventListener('message', (event) => {
+                    const data = JSON.parse(event.data);
+                    if (onMessage)
+                        onMessage(data);
+                });
+                eventSource.addEventListener('end', (event) => {
+                    const data = JSON.parse(event.data);
+                    if (onEnd)
+                        onEnd(data);
+                    eventSource.close();
+                });
+                eventSource.onerror = () => {
+                    eventSource.close();
+                    throw new Error('Unexpected error occurred. Please try again.');
+                };
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                throw new Error(errorMessage);
+            }
+        });
+    }
+}
+exports.default = MockAgent;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/hooks/useAnswerResults.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const transformers_1 = require("../utils/transformers");
+const extractAndTransformItems = (data) => {
+    var _a, _b;
+    if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.item_results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {
+        return null;
+    }
+    const { results } = data.item_results.response;
+    if (!Array.isArray(results) || results.length === 0) {
+        return null;
+    }
+    const transformedItems = results
+        .map(transformers_1.transformResultItem)
+        .filter((item) => item !== null);
+    return transformedItems.length > 0 ? transformedItems : null;
+};
+const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const response = yield client.agent.getAnswerResults({
+        itemId,
+        variationId,
+        threadId,
+        question,
+    });
+    return response;
+});
+function useAnswerResults({ itemId, variationId, threadId, cioClient, }) {
+    const [answerResults, setAnswerResults] = (0, react_1.useState)(null);
+    const [items, setItems] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const fetchResult = (0, react_1.useCallback)((question) => {
+        if (!cioClient)
+            return;
+        setIsLoading(true);
+        setError(null);
+        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
+            .then((fetchedAnswerResults) => {
+            setAnswerResults(fetchedAnswerResults);
+            setItems(extractAndTransformItems(fetchedAnswerResults));
+            setError(null);
+        })
+            .catch((err) => {
+            setError(err instanceof Error ? err : new Error('Error fetching answer'));
+            setAnswerResults(null);
+            setItems(null);
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    }, [cioClient, itemId, variationId, threadId]);
+    return {
+        data: answerResults,
+        items,
+        isLoading,
+        error,
+        getAnswer: fetchResult,
+    };
+}
+exports.default = useAnswerResults;

package/lib/cjs/hooks/useCioClient.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const version_1 = tslib_1.__importDefault(require("../version"));
+const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
+const useCioClient = ({ apiKey, cioClient, options } = {}) => {
+    if (!apiKey && !cioClient) {
+        throw new Error('Api Key or Constructor Client required');
+    }
+    const memoizedCioClient = (0, react_1.useMemo)(() => {
+        if (cioClient)
+            return cioClient;
+        if (apiKey) {
+            return new MockConstructorIOClient_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-pia-${version_1.default}` }, options));
+        }
+        return null;
+    }, [apiKey, cioClient, options]);
+    return memoizedCioClient;
+};
+exports.default = useCioClient;

package/lib/cjs/hooks/useCioPia.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
+const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
+const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
+function useCioPia(props) {
+    const { apiKey, itemId, variationId, threadId, cioClient: providedClient, suggestedQuestionsParameters, } = props;
+    const defaultClient = (0, useCioClient_1.default)({ apiKey });
+    const client = providedClient || defaultClient;
+    const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
+        itemId,
+        variationId,
+        threadId,
+        cioClient: client,
+        parameters: suggestedQuestionsParameters,
+    });
+    const answers = (0, useAnswerResults_1.default)({
+        itemId,
+        variationId,
+        threadId,
+        cioClient: client,
+    });
+    return {
+        suggestedQuestions,
+        answers,
+    };
+}
+exports.default = useCioPia;

package/lib/cjs/hooks/useConversation.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useConversation({ pia, itemId, isConversation, }) {
+    var _a, _b, _c, _d;
+    const { suggestedQuestions, answers } = pia;
+    const { getAnswer } = answers;
+    const [currentQuestion, setCurrentQuestion] = (0, react_1.useState)('');
+    const [displayedQuestions, setDisplayedQuestions] = (0, react_1.useState)([]);
+    const [conversationHistory, setConversationHistory] = (0, react_1.useState)([]);
+    const entryIdRef = (0, react_1.useRef)(0);
+    const prevAnswerValueRef = (0, react_1.useRef)((_a = answers.data) === null || _a === void 0 ? void 0 : _a.value);
+    const handleSubmitQuestion = (0, react_1.useCallback)((question) => {
+        setCurrentQuestion(question);
+        getAnswer(question);
+        if (isConversation) {
+            entryIdRef.current += 1;
+            const id = entryIdRef.current;
+            setConversationHistory((prev) => [...prev, { id, question, answer: '' }]);
+        }
+    }, [getAnswer, isConversation]);
+    const resetState = (0, react_1.useCallback)(() => {
+        setCurrentQuestion('');
+        setDisplayedQuestions(suggestedQuestions.data);
+        setConversationHistory([]);
+        prevAnswerValueRef.current = undefined;
+    }, [suggestedQuestions.data]);
+    (0, react_1.useEffect)(() => {
+        setCurrentQuestion('');
+        setDisplayedQuestions([]);
+        setConversationHistory([]);
+        prevAnswerValueRef.current = undefined;
+    }, [itemId]);
+    (0, react_1.useEffect)(() => {
+        setDisplayedQuestions(suggestedQuestions.data);
+    }, [suggestedQuestions.data]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = answers.data) === null || _a === void 0 ? void 0 : _a.follow_up_questions)
+            setDisplayedQuestions(answers.data.follow_up_questions);
+    }, [answers.data]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const answerValue = (_b = (_a = answers.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        if (!isConversation || !answerValue)
+            return;
+        if (answerValue === prevAnswerValueRef.current)
+            return;
+        prevAnswerValueRef.current = answerValue;
+        setConversationHistory((prev) => {
+            if (prev.length === 0)
+                return prev;
+            const updated = [...prev];
+            updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue });
+            return updated;
+        });
+    }, [isConversation, answers.data]);
+    const currentAnswer = (_c = (_b = answers.data) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '';
+    const currentItems = (_d = answers.items) !== null && _d !== void 0 ? _d : null;
+    const error = answers.error || suggestedQuestions.error;
+    const isLoading = answers.isLoading || suggestedQuestions.isLoading;
+    return {
+        currentQuestion,
+        displayedQuestions,
+        conversationHistory,
+        currentAnswer,
+        currentItems,
+        isLoading,
+        error,
+        handleSubmitQuestion,
+        resetState,
+    };
+}
+exports.default = useConversation;