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

package/lib/cjs/hooks/useSuggestedQuestions.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const fetchSuggestedQuestions = ({ client, itemId, variationId, threadId, parameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const response = yield client.agent.getSuggestedQuestions({
+        itemId,
+        variationId,
+        threadId,
+        parameters,
+    });
+    return response.questions;
+});
+function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, }) {
+    const [questions, setQuestions] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const fetchResult = (0, react_1.useCallback)(() => {
+        if (!cioClient)
+            return;
+        setIsLoading(true);
+        setError(null);
+        fetchSuggestedQuestions({
+            client: cioClient,
+            itemId,
+            variationId,
+            threadId,
+            parameters,
+        })
+            .then((fetchedQuestions) => {
+            setQuestions(fetchedQuestions);
+            setError(null);
+        })
+            .catch((err) => {
+            setError(err instanceof Error ? err : new Error('Error fetching questions'));
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- primitive dep prevents refetch on object reference change
+    }, [cioClient, itemId, variationId, threadId, parameters === null || parameters === void 0 ? void 0 : parameters.numResults]);
+    (0, react_1.useEffect)(() => {
+        fetchResult();
+    }, [fetchResult]);
+    return {
+        data: questions,
+        isLoading,
+        error,
+        getSuggestedQuestions: fetchResult,
+    };
+}
+exports.default = useSuggestedQuestions;

package/lib/cjs/stories/assets/storybook-styles.css

@@ -0,0 +1,112 @@
+div.subheading {
+  --mediumdark: '#999999';
+  font-weight: 700;
+  font-size: 13px;
+  color: #999;
+  letter-spacing: 6px;
+  line-height: 24px;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+  margin-top: 40px;
+}
+
+div.link-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  row-gap: 10px;
+}
+
+@media (min-width: 620px) {
+  div.link-list {
+    row-gap: 20px;
+    column-gap: 20px;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media all and (-ms-high-contrast:none) {
+div.link-list {
+    display: -ms-grid;
+    -ms-grid-columns: 1fr 1fr;
+    -ms-grid-rows: 1fr 1fr;
+  }
+}
+
+a.link-item {
+  display: block;
+  padding: 20px;
+  border: 1px solid #00000010;
+  border-radius: 5px;
+  transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+  color: #333333;
+  display: flex;
+  align-items: flex-start;
+}
+
+a.link-item:hover {
+  border-color: #1EA7FD50;
+  transform: translate3d(0, -3px, 0);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+}
+
+a.link-item:active {
+  border-color: #1EA7FD;
+  transform: translate3d(0, 0, 0);
+}
+
+a.link-item strong {
+  font-weight: 700;
+  display: block;
+  margin-bottom: 2px;
+}
+
+a.link-item img {
+  height: 40px;
+  width: 40px;
+  margin-right: 15px;
+  flex: none;
+}
+
+a.link-item span,
+a.link-item p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+span.badge {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #E7FDD8;
+  color: #66BF3C;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+div.badge-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+div.badge-wrapper code {
+  font-size: 12px;
+  display: inline-block;
+}
+
+
+.badge.tip {
+  background: #E7FDD8;
+  color: #66BF3C;
+}
+
+.badge.note {
+  background: #d8e8fd;
+  color: #3c70bf;
+}

package/lib/cjs/styles.css

@@ -0,0 +1,26 @@
+@import '@constructor-io/constructorio-ui-components/styles.css';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
+@import './components/SuggestedQuestion/SuggestedQuestionStyles.css';
+@import './components/SuggestedQuestionsContainer/SuggestedQuestionsContainerStyles.css';
+@import './components/Input/InputStyles.css';
+@import './components/Feedback/FeedbackStyles.css';
+@import './components/Answer/AnswerStyles.css';
+@import './components/Error/ErrorStyles.css';
+@import './components/LoadingSkeleton/LoadingSkeletonStyles.css';
+@import './components/CioPia/CioPiaStyles.css';
+@import './components/ConversationHistory/ConversationHistoryStyles.css';
+@import './components/PiaConversation/PiaConversationStyles.css';
+
+.cio-pia-container {
+  font-family: 'Inter', sans-serif;
+  --cio-pia-chat-question-bg: #f0f0f5;
+  --cio-pia-chat-answer-bg: #f8f8fa;
+  --cio-pia-conversation-max-height: 600px;
+  --cio-pia-modal-height: 80vh;
+  --cio-pia-modal-max-width: 640px;
+  --cio-pia-modal-min-width: 320px;
+}
+
+.cio-pia-container * {
+  font-family: inherit;
+}

package/lib/cjs/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackType = void 0;
+const tslib_1 = require("tslib");
+var FeedbackType;
+(function (FeedbackType) {
+    FeedbackType["UP"] = "up";
+    FeedbackType["DOWN"] = "down";
+})(FeedbackType = exports.FeedbackType || (exports.FeedbackType = {}));
+tslib_1.__exportStar(require("./hooks/mocks/types"), exports);

package/lib/cjs/utils/index.js

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

package/lib/cjs/utils/styleHelpers.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreferredColorScheme = void 0;
+// eslint-disable-next-line import/prefer-default-export
+function getPreferredColorScheme() {
+    var _a;
+    let colorScheme = 'light';
+    // Check if the dark-mode Media-Query matches
+    if ((_a = window.matchMedia('(prefers-color-scheme: dark)')) === null || _a === void 0 ? void 0 : _a.matches) {
+        colorScheme = 'dark';
+    }
+    return colorScheme;
+}
+exports.getPreferredColorScheme = getPreferredColorScheme;

package/lib/cjs/utils/transformers.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformResultItem = void 0;
+const tslib_1 = require("tslib");
+/**
+ * Converts a raw ApiItem from the Get Answers API response into an Item object
+ * that can be used in the Carousel component.
+ */
+function transformResultItem(resultItem) {
+    const { value, matched_terms: matchedTerms, data } = resultItem, otherFields = tslib_1.__rest(resultItem, ["value", "matched_terms", "data"]);
+    if (!data || typeof data !== 'object' || !data.id || !value) {
+        return null;
+    }
+    const { id, variation_id: variationId, description, url, image_url: imageUrl, price, sale_price: salePrice, rating, reviews_count: reviewsCount, tags, sl_campaign_id: slCampaignId, sl_campaign_owner: slCampaignOwner, badge } = data, otherMetadataFields = tslib_1.__rest(data, ["id", "variation_id", "description", "url", "image_url", "price", "sale_price", "rating", "reviews_count", "tags", "sl_campaign_id", "sl_campaign_owner", "badge"]);
+    return Object.assign({ id, name: value, matchedTerms,
+        variationId,
+        description,
+        url,
+        imageUrl,
+        price,
+        salePrice,
+        rating,
+        reviewsCount,
+        tags,
+        slCampaignId,
+        slCampaignOwner,
+        badge, data: Object.assign({}, otherMetadataFields) }, otherFields);
+}
+exports.transformResultItem = transformResultItem;

package/lib/cjs/utils/translate.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translate = void 0;
+const constants_1 = require("../constants");
+const defaultTranslations = {
+    'Any questions about this product?': 'Any questions about this product?',
+    'Ask anything': 'Ask anything',
+    Send: 'Send',
+    [constants_1.DISCLAIMER_TEXT]: constants_1.DISCLAIMER_TEXT,
+    'Is this answer useful?': 'Is this answer useful?',
+    'Learn More.': 'Learn More.',
+    'Ask about this product': 'Ask about this product',
+};
+/**
+ * Translates a word using the provided translations object.
+ * Falls back to English defaults if translation is not provided.
+ *
+ * @param word - The key to translate
+ * @param translations - Optional user-provided translations object
+ * @returns The translated string or the original word if no translation exists
+ */
+// eslint-disable-next-line import/prefer-default-export
+const translate = (word, translations) => {
+    if (translations && translations[word] !== undefined) {
+        return translations[word];
+    }
+    return defaultTranslations[word] || word;
+};
+exports.translate = translate;

package/lib/cjs/version.js

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

package/lib/mjs/components/Answer/Answer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+function Answer({ text, componentOverride }) {
+    if (!text) {
+        return null;
+    }
+    return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode },
+        React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text)));
+}
+export default Answer;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+import Disclaimer from './Disclaimer';
+import Input from '../Input/Input';
+import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
+import Answer from '../Answer/Answer';
+import Feedback from '../Feedback/Feedback';
+import useCioPia from '../../hooks/useCioPia';
+import useConversation from '../../hooks/useConversation';
+import ErrorBlock from '../Error/ErrorBlock';
+import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
+import { translate } from '../../utils/translate';
+import PiaCustomCarousel from './PiaCustomCarousel';
+import PiaModal from '../PiaConversation/PiaModal';
+import PiaConversation from '../PiaConversation/PiaConversation';
+export default 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 = useCioPia({
+        apiKey,
+        itemId,
+        threadId,
+        variationId,
+        cioClient,
+        suggestedQuestionsParameters,
+    });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = useConversation({ 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.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onClose: resetState },
+            React.createElement(PiaConversation, { ...conversationHistoryProps })));
+    }
+    if (isConversation)
+        return React.createElement(PiaConversation, { ...conversationHistoryProps });
+    // Default inline mode
+    return (React.createElement("div", { 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, value: currentQuestion, translations: translations }),
+            isLoading && React.createElement(LoadingSkeleton, null),
+            !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
+            !isLoading && !error && (React.createElement(React.Fragment, null,
+                currentAnswer && (React.createElement("div", { className: 'cio-pia-answer-container' },
+                    React.createElement(Answer, { text: currentAnswer, componentOverride: componentOverrides?.answer }),
+                    currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
+                    showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })),
+                    React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }))),
+                React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides?.suggestedQuestions }))))));
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+import { translate } from '../../utils/translate';
+import { DISCLAIMER_TEXT } from '../../constants';
+export default function Disclaimer({ learnMoreUrl, translations, componentOverride, }) {
+    return (React.createElement(RenderPropsWrapper, { props: { learnMoreUrl, translations }, override: componentOverride?.reactNode },
+        React.createElement("span", { className: 'cio-pia-disclaimer' },
+            translate(DISCLAIMER_TEXT, translations),
+            ' ',
+            learnMoreUrl && (React.createElement("a", { href: learnMoreUrl, target: '_blank', rel: 'noopener noreferrer', className: 'cio-pia-learn-more' },
+                React.createElement("u", null, translate('Learn More.', translations)))))));
+}

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

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

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

@@ -0,0 +1,3 @@
+import CioPia from './CioPia';
+export * from './CioPia';
+export default CioPia;

package/lib/mjs/components/ConversationHistory/ConversationHistory.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import Answer from '../Answer/Answer';
+import Feedback from '../Feedback/Feedback';
+import Disclaimer from '../CioPia/Disclaimer';
+import ErrorBlock from '../Error/ErrorBlock';
+import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
+import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, learnMoreUrl, translations, callbacks, componentOverrides, }) {
+    const scrollContainerRef = useRef(null);
+    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.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.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
+            React.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
+            isLast && isLoading && (React.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
+                React.createElement(LoadingSkeleton, null))),
+            isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
+            entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
+                React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
+                isLast && currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
+                isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })))),
+            isLast && entry.answer && (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }))));
+    })));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+function WarningIcon() {
+    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.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.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.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.createElement("div", { className: 'cio-pia-error-block-container', "data-testid": 'error-block' },
+        React.createElement("div", { className: 'cio-pia-error-block-warning-icon-container', "data-testid": 'error-block-warning-icon' },
+            React.createElement(WarningIcon, null)),
+        React.createElement("div", { className: 'cio-pia-error-block-text-container' },
+            React.createElement("p", { className: 'cio-pia-error-block-text' }, message),
+            onRetry && (React.createElement("button", { type: 'button', onClick: onRetry, className: 'cio-pia-error-block-retry-button' },
+                React.createElement(RetryIcon, null),
+                "Retry")))));
+}
+export default ErrorBlock;

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+import { FeedbackType } from '../../types';
+import { translate } from '../../utils/translate';
+function ThumbsUpIcon({ isSelected }) {
+    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (React.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.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.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (React.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.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' }))));
+}
+export default function Feedback({ translations, onFeedback, componentOverride }) {
+    const [feedback, setFeedback] = useState(null);
+    const handleFeedback = (type) => {
+        setFeedback(type);
+        onFeedback?.(type);
+    };
+    return (React.createElement(RenderPropsWrapper, { props: { translations, onFeedback }, override: componentOverride?.reactNode },
+        React.createElement("div", { className: 'cio-pia-feedback-container' },
+            React.createElement("p", { className: 'cio-pia-feedback-text' }, translate('Is this answer useful?', translations)),
+            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs up', onClick: () => handleFeedback(FeedbackType.UP) },
+                React.createElement(ThumbsUpIcon, { isSelected: feedback === FeedbackType.UP })),
+            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs down', onClick: () => handleFeedback(FeedbackType.DOWN) },
+                React.createElement(ThumbsDownIcon, { isSelected: feedback === FeedbackType.DOWN })))));
+}