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

package/lib/cjs/components/Answer/Answer.js

@@ -0,0 +1,13 @@
+"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");
+function Answer({ text, componentOverride }) {
+    if (!text) {
+        return null;
+    }
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
+        react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text)));
+}
+exports.default = Answer;

package/lib/cjs/components/Answer/AnswerStyles.css

@@ -0,0 +1,8 @@
+.cio-pia-answer {
+  width: 100%;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  color: #14151a;
+  text-align: start;
+}

package/lib/cjs/components/CioPia/CioPia.js

@@ -0,0 +1,76 @@
+"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 Disclaimer_1 = tslib_1.__importDefault(require("./Disclaimer"));
+const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
+const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
+const Answer_1 = tslib_1.__importDefault(require("../Answer/Answer"));
+const Feedback_1 = tslib_1.__importDefault(require("../Feedback/Feedback"));
+const useCioPia_1 = tslib_1.__importDefault(require("../../hooks/useCioPia"));
+const useConversation_1 = tslib_1.__importDefault(require("../../hooks/useConversation"));
+const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
+const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
+const translate_1 = require("../../utils/translate");
+const PiaCustomCarousel_1 = tslib_1.__importDefault(require("./PiaCustomCarousel"));
+const PiaModal_1 = tslib_1.__importDefault(require("../PiaConversation/PiaModal"));
+const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/PiaConversation"));
+function CioPia(props) {
+    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, children, translations, suggestedQuestionsParameters, } = props;
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline' } = displayConfigs || {};
+    const isConversation = mode === 'conversation' || type === 'modal';
+    const pia = (0, useCioPia_1.default)({
+        apiKey,
+        itemId,
+        threadId,
+        variationId,
+        cioClient,
+        suggestedQuestionsParameters,
+    });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation });
+    const renderProps = {
+        items: currentItems,
+        isLoading,
+        error,
+        currentAnswer,
+        currentQuestion,
+        displayedQuestions,
+        handleSubmitQuestion,
+        conversationHistory,
+    };
+    const conversationHistoryProps = {
+        conversationHistory,
+        isLoading,
+        error,
+        currentItems,
+        showFeedback,
+        learnMoreUrl,
+        translations,
+        callbacks,
+        componentOverrides,
+        displayedQuestions,
+        handleSubmitQuestion,
+    };
+    if (type === 'modal') {
+        return (react_1.default.createElement(PiaModal_1.default, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onClose: resetState },
+            react_1.default.createElement(PiaConversation_1.default, Object.assign({}, conversationHistoryProps))));
+    }
+    if (isConversation)
+        return react_1.default.createElement(PiaConversation_1.default, Object.assign({}, conversationHistoryProps));
+    // Default inline mode
+    return (react_1.default.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+        react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: renderProps, override: children || (componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode) },
+            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: handleSubmitQuestion, value: currentQuestion, translations: translations }),
+            isLoading && react_1.default.createElement(LoadingSkeleton_1.default, null),
+            !isLoading && error && react_1.default.createElement(ErrorBlock_1.default, { message: (error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error' }),
+            !isLoading && !error && (react_1.default.createElement(react_1.default.Fragment, null,
+                currentAnswer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
+                    react_1.default.createElement(Answer_1.default, { text: currentAnswer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
+                    currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
+                    showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
+                    react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }))),
+                react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
+}
+exports.default = CioPia;

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

@@ -0,0 +1,32 @@
+.cio-pia-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.cio-pia-title {
+  color: #14151a;
+  font-size: 18px;
+  font-weight: 400;
+  text-align: start;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.cio-pia-answer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cio-pia-disclaimer {
+  font-size: 12px;
+  font-weight: 400;
+  text-align: start;
+  color: rgba(15, 19, 36, 0.7);
+}
+
+.cio-pia-learn-more {
+  color: inherit;
+}

package/lib/cjs/components/CioPia/Disclaimer.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"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const translate_1 = require("../../utils/translate");
+const constants_1 = require("../../constants");
+function Disclaimer({ learnMoreUrl, translations, componentOverride, }) {
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { learnMoreUrl, translations }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
+        react_1.default.createElement("span", { className: 'cio-pia-disclaimer' },
+            (0, translate_1.translate)(constants_1.DISCLAIMER_TEXT, translations),
+            ' ',
+            learnMoreUrl && (react_1.default.createElement("a", { href: learnMoreUrl, target: '_blank', rel: 'noopener noreferrer', className: 'cio-pia-learn-more' },
+                react_1.default.createElement("u", null, (0, translate_1.translate)('Learn More.', translations)))))));
+}
+exports.default = Disclaimer;

package/lib/cjs/components/CioPia/PiaCustomCarousel.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    // Determine to use user-defined click handler or default behavior
+    const productClickHandler = (0, react_1.useCallback)((item) => {
+        const { onProductCardClick } = callbacks || {};
+        if (onProductCardClick) {
+            onProductCardClick(item);
+        }
+        else if (item === null || item === void 0 ? void 0 : item.url) {
+            window.open(item.url, '_blank', 'noopener,noreferrer');
+        }
+    }, [callbacks]);
+    // Set up event listener for product card clicks
+    (0, react_1.useEffect)(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return undefined;
+        const handleClick = (e) => {
+            const { product } = e.detail;
+            if (product) {
+                productClickHandler(product);
+            }
+        };
+        el.addEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
+        return () => {
+            el.removeEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
+        };
+    }, [productClickHandler]);
+    // If there are no items, do not render the carousel
+    if (items.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { ref: wrapperRef },
+        react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: items, componentOverrides: componentOverrides })));
+}
+exports.default = PiaCustomCarousel;

package/lib/cjs/components/CioPia/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CioPia_1 = tslib_1.__importDefault(require("./CioPia"));
+tslib_1.__exportStar(require("./CioPia"), exports);
+exports.default = CioPia_1.default;

package/lib/cjs/components/ConversationHistory/ConversationHistory.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Answer_1 = tslib_1.__importDefault(require("../Answer/Answer"));
+const Feedback_1 = tslib_1.__importDefault(require("../Feedback/Feedback"));
+const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
+const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
+const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
+const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
+function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, learnMoreUrl, translations, callbacks, componentOverrides, }) {
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return undefined;
+        const frameId = requestAnimationFrame(() => {
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [conversationHistory, isLoading]);
+    return (react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-history', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
+        const isLast = index === conversationHistory.length - 1;
+        return (react_1.default.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
+            react_1.default.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
+            isLast && isLoading && (react_1.default.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
+                react_1.default.createElement(LoadingSkeleton_1.default, null))),
+            isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
+            entry.answer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
+                react_1.default.createElement(Answer_1.default, { text: entry.answer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
+                isLast && currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
+                isLast && showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })))),
+            isLast && entry.answer && (react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }))));
+    })));
+}
+exports.default = ConversationHistory;

package/lib/cjs/components/ConversationHistory/ConversationHistoryStyles.css

@@ -0,0 +1,51 @@
+.cio-pia-conversation-history {
+  --conversation-gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--conversation-gap);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.cio-pia-conversation-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--conversation-gap);
+}
+
+.cio-pia-chat-question {
+  align-self: flex-end;
+  background: var(--cio-pia-chat-question-bg);
+  border-radius: 12px 12px 12px 12px;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #14151a;
+  max-width: 80%;
+  text-align: start;
+  word-break: break-word;
+  transition: border-radius 0.3s ease;
+}
+
+.cio-pia-conversation-entry .cio-pia-answer-container {
+  align-self: flex-start;
+  background: var(--cio-pia-chat-answer-bg);
+  border-radius: 12px 12px 12px 12px;
+  padding: 8px 12px;
+  max-width: 80%;
+  transition: border-radius 0.3s ease;
+}
+
+.cio-pia-conversation-entry:last-child .cio-pia-chat-question {
+  border-bottom-right-radius: 2px;
+}
+
+.cio-pia-conversation-entry:last-child .cio-pia-answer-container {
+  border-bottom-left-radius: 2px;
+}
+
+.cio-pia-conversation-loading {
+  align-self: flex-start;
+  max-width: 80%;
+}

package/lib/cjs/components/Error/ErrorBlock.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function WarningIcon() {
+    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { d: 'M12.0004 2C6.4804 2 2.0004 6.48 2.0004 12C2.0004 17.52 6.4804 22 12.0004 22C17.5204 22 22.0004 17.52 22.0004 12C22.0004 6.48 17.5204 2 12.0004 2ZM13.0004 17H11.0004V15H13.0004V17ZM13.0004 13H11.0004V7H13.0004V13Z', fill: '#F1923A' })));
+}
+function RetryIcon() {
+    return (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("path", { d: 'M11.7633 4.23329C10.7966 3.26663 9.46992 2.66663 7.99659 2.66663C5.04992 2.66663 2.66992 5.05329 2.66992 7.99996C2.66992 10.9466 5.04992 13.3333 7.99659 13.3333C10.4833 13.3333 12.5566 11.6333 13.1499 9.33329H11.7633C11.2166 10.8866 9.73659 12 7.99659 12C5.78992 12 3.99659 10.2066 3.99659 7.99996C3.99659 5.79329 5.78992 3.99996 7.99659 3.99996C9.10326 3.99996 10.0899 4.45996 10.8099 5.18663L8.66326 7.33329H13.3299V2.66663L11.7633 4.23329Z', fill: 'white' })));
+}
+function ErrorBlock({ message, onRetry = undefined }) {
+    return (react_1.default.createElement("div", { className: 'cio-pia-error-block-container', "data-testid": 'error-block' },
+        react_1.default.createElement("div", { className: 'cio-pia-error-block-warning-icon-container', "data-testid": 'error-block-warning-icon' },
+            react_1.default.createElement(WarningIcon, null)),
+        react_1.default.createElement("div", { className: 'cio-pia-error-block-text-container' },
+            react_1.default.createElement("p", { className: 'cio-pia-error-block-text' }, message),
+            onRetry && (react_1.default.createElement("button", { type: 'button', onClick: onRetry, className: 'cio-pia-error-block-retry-button' },
+                react_1.default.createElement(RetryIcon, null),
+                "Retry")))));
+}
+exports.default = ErrorBlock;

package/lib/cjs/components/Error/ErrorStyles.css

@@ -0,0 +1,46 @@
+.cio-pia-error-block-container {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: #fef8f4;
+  border-radius: 6px;
+  padding: 12px;
+  border: 1px solid #f4e3db;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.cio-pia-error-block-warning-icon-container {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.cio-pia-error-block-text-container {
+  display: flex;
+  flex-direction: column;
+  margin: 4px 0px;
+}
+
+.cio-pia-error-block-text {
+  margin: 0.5rem 0rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cio-pia-error-block-retry-button {
+  width: 76px;
+  display: inline-flex;
+  align-items: center;
+  background-color: #121212;
+  color: #fff;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+}

package/lib/cjs/components/Feedback/Feedback.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const types_1 = require("../../types");
+const translate_1 = require("../../utils/translate");
+function ThumbsUpIcon({ isSelected }) {
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (react_1.default.createElement("path", { d: 'M3.33317 6.66667H0.666504V14.6667H3.33317V6.66667ZM5.99984 14.6667C5.2665 14.6667 4.6665 14.0667 4.6665 13.3333V6.66667C4.6665 6.3 4.81317 5.96667 5.05317 5.72667L9.4465 1.33333L10.1532 2.03333C10.3332 2.21333 10.4465 2.46667 10.4465 2.74L10.4265 2.95333L9.79317 6.00001H13.9998C14.7332 6.00001 15.3332 6.60001 15.3332 7.33334V8.66668C15.3332 8.84001 15.2998 9.00001 15.2398 9.15334L13.2265 13.8533C13.0265 14.3333 12.5532 14.6667 11.9998 14.6667H5.99984Z', fill: '#4CAF50', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M5.99984 14.6667H11.9998C12.5532 14.6667 13.0265 14.3333 13.2265 13.8533L15.2398 9.15334C15.2998 9.00001 15.3332 8.84001 15.3332 8.66668V7.33334C15.3332 6.60001 14.7332 6.00001 13.9998 6.00001H9.79317L10.4265 2.95334L10.4465 2.74001C10.4465 2.46668 10.3332 2.21334 10.1532 2.03334L9.4465 1.33334L5.05317 5.72668C4.81317 5.96668 4.6665 6.30001 4.6665 6.66668V13.3333C4.6665 14.0667 5.2665 14.6667 5.99984 14.6667ZM5.99984 6.66668L8.89317 3.77334L7.99984 7.33334H13.9998V8.66668L11.9998 13.3333H5.99984V6.66668ZM0.666504 6.66668H3.33317V14.6667H0.666504V6.66668Z', fill: '#0F1324', fillOpacity: '0.6' }))));
+}
+function ThumbsDownIcon({ isSelected }) {
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (react_1.default.createElement("path", { d: 'M12.6665 9.33334H15.3332V1.33334H12.6665V9.33334ZM9.99984 1.33334C10.7332 1.33334 11.3332 1.93334 11.3332 2.66668V9.33334C11.3332 9.70001 11.1865 10.0333 10.9465 10.2733L6.55317 14.6667L5.8465 13.9667C5.6665 13.7867 5.55317 13.5333 5.55317 13.26L5.57317 13.0467L6.2065 10H1.99984C1.2665 10 0.666504 9.40001 0.666504 8.66668V7.33334C0.666504 7.16001 0.699837 7.00001 0.759837 6.84668L2.77317 2.14668C2.97317 1.66668 3.4465 1.33334 3.99984 1.33334H9.99984Z', fill: '#F44336', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M9.99984 1.33334H3.99984C3.4465 1.33334 2.97317 1.66668 2.77317 2.14668L0.759837 6.84668C0.699837 7.00001 0.666504 7.16001 0.666504 7.33334V8.66668C0.666504 9.40001 1.2665 10 1.99984 10H6.2065L5.57317 13.0467L5.55317 13.26C5.55317 13.5333 5.6665 13.7867 5.8465 13.9667L6.55317 14.6667L10.9465 10.2733C11.1865 10.0333 11.3332 9.70001 11.3332 9.33334V2.66668C11.3332 1.93334 10.7332 1.33334 9.99984 1.33334ZM9.99984 9.33334L7.1065 12.2267L7.99984 8.66668H1.99984V7.33334L3.99984 2.66668H9.99984V9.33334ZM12.6665 1.33334H15.3332V9.33334H12.6665V1.33334Z', fill: '#0F1324', fillOpacity: '0.6' }))));
+}
+function Feedback({ translations, onFeedback, componentOverride }) {
+    const [feedback, setFeedback] = (0, react_1.useState)(null);
+    const handleFeedback = (type) => {
+        setFeedback(type);
+        onFeedback === null || onFeedback === void 0 ? void 0 : onFeedback(type);
+    };
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { translations, onFeedback }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
+        react_1.default.createElement("div", { className: 'cio-pia-feedback-container' },
+            react_1.default.createElement("p", { className: 'cio-pia-feedback-text' }, (0, translate_1.translate)('Is this answer useful?', translations)),
+            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs up', onClick: () => handleFeedback(types_1.FeedbackType.UP) },
+                react_1.default.createElement(ThumbsUpIcon, { isSelected: feedback === types_1.FeedbackType.UP })),
+            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs down', onClick: () => handleFeedback(types_1.FeedbackType.DOWN) },
+                react_1.default.createElement(ThumbsDownIcon, { isSelected: feedback === types_1.FeedbackType.DOWN })))));
+}
+exports.default = Feedback;

package/lib/cjs/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/cjs/components/Input/Input.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const translate_1 = require("../../utils/translate");
+function SendIcon() {
+    return (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: '.icon-send' },
+            react_1.default.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] = (0, react_1.useState)(providedValue || '');
+    (0, react_1.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 === null || translations === void 0 ? void 0 : translations['Ask anything']) !== undefined
+        ? (0, translate_1.translate)('Ask anything', translations)
+        : (placeholder !== null && placeholder !== void 0 ? placeholder : (0, translate_1.translate)('Ask anything'));
+    return (react_1.default.createElement("div", { className: 'cio-pia-input-container' },
+        react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+        react_1.default.createElement("button", { type: 'button', onClick: handleSubmit, className: 'cio-pia-send-button', disabled: disabled },
+            (0, translate_1.translate)('Send', translations),
+            react_1.default.createElement(SendIcon, null))));
+}
+exports.default = Input;

package/lib/cjs/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/cjs/components/LoadingSkeleton/LoadingSkeleton.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 LoadingSkeleton() {
+    return (react_1.default.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton' },
+        react_1.default.createElement("div", { className: 'skeleton-bar' }),
+        react_1.default.createElement("div", { className: 'skeleton-bar' }),
+        react_1.default.createElement("div", { className: 'skeleton-bar skeleton-short' })));
+}
+exports.default = LoadingSkeleton;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
+const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
+const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
+const translate_1 = require("../../utils/translate");
+const ConversationHistory_1 = tslib_1.__importDefault(require("../ConversationHistory/ConversationHistory"));
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+    const hasHistory = conversationHistory.length > 0;
+    return (react_1.default.createElement("div", { className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
+        !hasHistory && (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(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
+        react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
+            isLoading && !error && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, disabled: isLoading, translations: translations }))));
+}
+exports.default = PiaConversation;