@constructor-io/constructorio-ui-pia 2.1.0 → 2.1.2

package/lib/mjs/components/Feedback/FeedbackStyles.css

@@ -0,0 +1,31 @@
+.cio-pia-feedback-container {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  height: 20px;
+  gap: 8px;
+}
+
+.cio-pia-feedback-text {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: -0.5%;
+  color: rgba(15, 19, 36, 0.7);
+}
+
+.cio-pia-feedback-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  background: none;
+  border: 0px;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.2s ease;
+  position: relative;
+}
+
+.cio-pia-feedback-button:hover {
+  opacity: 0.8;
+}

package/lib/mjs/components/Input/Input.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { translate } from '../../utils/translate';
+function SendIcon() {
+    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("g", { id: '.icon-send' },
+            React.createElement("path", { id: 'Vector', d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' }))));
+}
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, translations, }) {
+    const [value, setValue] = useState(providedValue || '');
+    useEffect(() => {
+        if (providedValue) {
+            setValue(providedValue);
+        }
+    }, [providedValue]);
+    const handleSubmit = () => {
+        if (value.trim()) {
+            onSubmit(value.trim());
+            setValue('');
+        }
+    };
+    const handleSubmitOnEnter = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    // Priority: translations > placeholder prop > default
+    const resolvedPlaceholder = translations?.['Ask anything'] !== undefined
+        ? translate('Ask anything', translations)
+        : (placeholder ?? translate('Ask anything'));
+    return (React.createElement("div", { className: 'cio-pia-input-container' },
+        React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+        React.createElement("button", { type: 'button', onClick: handleSubmit, className: 'cio-pia-send-button', disabled: disabled },
+            translate('Send', translations),
+            React.createElement(SendIcon, null))));
+}
+export default Input;

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

@@ -0,0 +1,102 @@
+/* Input Container */
+.cio-pia-input-container {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  position: relative;
+  gap: 8px;
+}
+
+/* Input */
+.cio-pia-input {
+  width: 100%;
+  padding: 8px 80px 8px 12px;
+  border: 1px solid #dee0e3;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+  box-shadow:
+    1px 1px 2px 0px rgba(18, 18, 105, 0.1) inset,
+    0px 1px 4px 0px rgba(18, 18, 105, 0.05) inset,
+    1px 1px 1px 0px rgba(18, 18, 105, 0.05) inset;
+}
+
+/* Input Hover */
+.cio-pia-input:hover {
+  border: 1px solid #c8cad0;
+}
+
+/* Input Focus */
+.cio-pia-input:focus {
+  outline: none;
+  border: 1px solid #a980ff;
+  box-shadow: 0px 0px 0px 2px rgba(201, 176, 254, 0.7);
+}
+
+/* Input Active */
+.cio-pia-input:focus:active {
+  outline: none;
+  border: 1px solid #000000;
+  box-shadow:
+    0px 1px 4px 0px rgba(18, 18, 105, 0.14) inset,
+    2.1px 2px 2px 0px rgba(18, 18, 105, 0.1) inset,
+    0px 1.5px 3px 0px rgba(18, 18, 105, 0.05) inset;
+}
+
+/* Input Placeholder */
+.cio-pia-input::placeholder {
+  display: none;
+}
+
+/* Input Disabled */
+.cio-pia-input:disabled {
+  border: 1px solid #e9eaec;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Input Disabled Placeholder */
+.cio-pia-input:disabled::placeholder {
+  color: #ffffff;
+}
+
+/* Send Button */
+.cio-pia-send-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #14151a;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  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);
+}
+
+/* Send Button */
+.cio-pia-send-button:hover {
+  background: #2b2d36;
+}
+
+/* Send Button Disabled */
+.cio-pia-send-button:disabled {
+  background: #e9eaec;
+  color: #0a0f2940;
+  border: none;
+  box-shadow: none;
+}
+
+/* Send Button Disabled SVG */
+.cio-pia-send-button:disabled svg path {
+  fill: #0a0f2940;
+}

package/lib/mjs/components/LoadingSkeleton/LoadingSkeleton.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function LoadingSkeleton() {
+    return (React.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton' },
+        React.createElement("div", { className: 'skeleton-bar' }),
+        React.createElement("div", { className: 'skeleton-bar' }),
+        React.createElement("div", { className: 'skeleton-bar skeleton-short' })));
+}

package/lib/mjs/components/LoadingSkeleton/LoadingSkeletonStyles.css

@@ -0,0 +1,32 @@
+.cio-pia-loading-skeleton {
+  min-width: 430px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-bar {
+  background-color: rgba(0, 0, 0, 0.05);
+  height: 16px;
+  border-radius: 4px;
+  width: 100%;
+  animation: loading-animation 2s infinite ease-in-out;
+}
+
+.skeleton-short {
+  width: 80%;
+}
+
+/* Animation for the loader */
+@keyframes loading-animation {
+  0% {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+}

package/lib/mjs/components/PiaConversation/PiaConversation.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Input from '../Input/Input';
+import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
+import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
+import { translate } from '../../utils/translate';
+import ConversationHistory from '../ConversationHistory/ConversationHistory';
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+    const hasHistory = conversationHistory.length > 0;
+    return (React.createElement("div", { className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
+        !hasHistory && (React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations))),
+        React.createElement(ConversationHistory, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
+        React.createElement("div", { className: 'cio-pia-conversation-footer' },
+            isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, disabled: isLoading, translations: translations }))));
+}

package/lib/mjs/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/mjs/components/PiaConversation/PiaModal.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Input from '../Input/Input';
+import { translate } from '../../utils/translate';
+import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
+const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+function CloseIcon() {
+    return (React.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.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' })));
+}
+export default function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, componentOverrides, translations, onClose, children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dialogRef = useRef(null);
+    const openModal = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const closeModal = useCallback(() => {
+        setIsOpen(false);
+        onClose?.();
+    }, [onClose]);
+    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]);
+    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 = useCallback((question) => {
+        handleSubmitQuestion(question);
+        openModal();
+    }, [handleSubmitQuestion, openModal]);
+    return (React.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+        React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
+        React.createElement(Input, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations }),
+        initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
+        React.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
+            React.createElement("div", { className: 'cio-pia-modal-content' },
+                React.createElement("div", { className: 'cio-pia-modal-header' },
+                    React.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, translate('Ask about this product', translations)),
+                    React.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": 'Close', onClick: closeModal },
+                        React.createElement(CloseIcon, null))),
+                React.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
+}

package/lib/mjs/components/SuggestedQuestion/SuggestedQuestion.js

@@ -0,0 +1,13 @@
+import React from 'react';
+function QuestionSvg() {
+    return (React.createElement("div", { className: 'cio-pia-suggested-question-icon' },
+        React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("g", { id: 'help' },
+                React.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.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
+        React.createElement(QuestionSvg, null),
+        question));
+}
+export default SuggestedQuestion;

package/lib/mjs/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/mjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+import SuggestedQuestion from '../SuggestedQuestion/SuggestedQuestion';
+export default function SuggestedQuestionsContainer({ questions, onQuestionClick, componentOverride, }) {
+    if (!questions || questions.length === 0) {
+        return null;
+    }
+    return (React.createElement(RenderPropsWrapper, { props: { questions, onQuestionClick }, override: componentOverride?.reactNode },
+        React.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-list' }, questions.map((question) => (React.createElement(SuggestedQuestion, { key: question.value, question: question.value, onClick: () => onQuestionClick(question.value) }))))));
+}

package/lib/mjs/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/mjs/components/SuggestedQuestionsContainer/SuggestedQuestionsSkeleton.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function SuggestedQuestionsSkeleton() {
+    return (React.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-busy": 'true', "aria-label": 'Loading suggestions' },
+        React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
+        React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
+        React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' })));
+}

package/lib/mjs/constants.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/prefer-default-export
+export const DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
+export const DEMO_ITEM_ID = '149100215';
+export const DEMO_QUESTION = 'What is the nutritional content of this shake?';
+export const DEMO_QUESTION_ALTERNATIVE_PRODUCTS = 'What alternative products are available for this item?';
+export const 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?' },
+];
+export const 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/mjs/hooks/mocks/MockConstructorIOClient.js

@@ -0,0 +1,35 @@
+import ConstructorioClient from '@constructor-io/constructorio-client-javascript';
+import MockAgent from './agent';
+import version from '../../version';
+class MockConstructorIOClient {
+    options;
+    search;
+    browse;
+    recommendations;
+    tracker;
+    quizzes;
+    agent;
+    constructor(options) {
+        this.options = {
+            version: options.version || `cio-ui-pia-${version}`,
+            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 ConstructorioClient(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 MockAgent(this.options);
+    }
+}
+export default MockConstructorIOClient;