@constructor-io/constructorio-ui-pia 2.6.4 → 2.8.0

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

@@ -14,6 +14,7 @@ const translate_1 = require("../../utils/translate");
 const PiaInlineAnswer_1 = tslib_1.__importDefault(require("../PiaInlineAnswer/PiaInlineAnswer"));
 const PiaModal_1 = tslib_1.__importDefault(require("../PiaConversation/PiaModal"));
 const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/PiaConversation"));
+// eslint-disable-next-line complexity
 function CioPia(props) {
     const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
@@ -68,7 +69,7 @@ function CioPia(props) {
         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, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
-            isLoading && react_1.default.createElement(LoadingSkeleton_1.default, null),
+            isLoading && react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }),
             !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(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),

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

@@ -30,7 +30,7 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
             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))),
+                    react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }))),
                 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 }),

package/lib/cjs/components/LoadingSkeleton/LoadingSkeleton.js

@@ -2,10 +2,12 @@
 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' })));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const skeleton = (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' })));
+function LoadingSkeleton({ componentOverride } = {}) {
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { skeleton }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode }, skeleton));
 }
 exports.default = LoadingSkeleton;

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

@@ -1,6 +1,5 @@
 .cio-pia-loading-skeleton {
-  min-width: 430px;
-  max-width: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;

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

@@ -13,8 +13,7 @@ class MockConstructorIOClient {
         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);
+        this.agent = new agent_1.default(Object.assign(Object.assign({}, this.options), { clientId: options.clientId, sessionId: options.sessionId }));
     }
 }
 exports.default = MockConstructorIOClient;

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

@@ -3,7 +3,7 @@ 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;
+    const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
     if (!agentServiceUrl)
         throw new Error('Agent service URL is required');
     let baseUrl = `${agentServiceUrl}/v1/item_questions`;
@@ -22,6 +22,21 @@ function createAgentUrl({ itemId, threadId, variationId, question, isStreaming =
     if (variationId) {
         url.searchParams.append('variation_id', variationId);
     }
+    if (clientId) {
+        url.searchParams.append('i', clientId);
+    }
+    if (sessionId != null) {
+        url.searchParams.append('s', String(sessionId));
+    }
+    if (userId) {
+        url.searchParams.append('ui', userId);
+    }
+    if (version) {
+        url.searchParams.append('c', version);
+    }
+    if (segments === null || segments === void 0 ? void 0 : segments.length) {
+        segments.forEach((segment) => url.searchParams.append('us', segment));
+    }
     // Any additional parameters
     Object.entries(parameters).forEach(([key, value]) => {
         if (value !== undefined) {

package/lib/cjs/hooks/useAnswerResults.js

@@ -36,6 +36,7 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImag
             return;
         setIsLoading(true);
         setError(null);
+        setAnswerResults(null);
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);

package/lib/cjs/version.js

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

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

@@ -11,6 +11,7 @@ import { translate } from '../../utils/translate';
 import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
 import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
+// eslint-disable-next-line complexity
 export default function CioPia(props) {
     const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
@@ -65,7 +66,7 @@ export default function CioPia(props) {
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
             React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
             React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
-            isLoading && React.createElement(LoadingSkeleton, null),
+            isLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
             !isLoading && !error && (React.createElement(React.Fragment, null,
                 currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),

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

@@ -27,7 +27,7 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
             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))),
+                    React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }))),
                 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 }),

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

@@ -1,7 +1,9 @@
 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' })));
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+const skeleton = (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' })));
+export default function LoadingSkeleton({ componentOverride } = {}) {
+    return (React.createElement(RenderPropsWrapper, { props: { skeleton }, override: componentOverride?.reactNode }, skeleton));
 }

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

@@ -1,6 +1,5 @@
 .cio-pia-loading-skeleton {
-  min-width: 430px;
-  max-width: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;

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

@@ -28,8 +28,11 @@ class MockConstructorIOClient {
         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);
+        this.agent = new MockAgent({
+            ...this.options,
+            clientId: options.clientId,
+            sessionId: options.sessionId,
+        });
     }
 }
 export default MockConstructorIOClient;

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

@@ -1,6 +1,6 @@
 // Create URL for PIA API
 function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
-    const { apiKey, agentServiceUrl } = options;
+    const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
     if (!agentServiceUrl)
         throw new Error('Agent service URL is required');
     let baseUrl = `${agentServiceUrl}/v1/item_questions`;
@@ -19,6 +19,21 @@ function createAgentUrl({ itemId, threadId, variationId, question, isStreaming =
     if (variationId) {
         url.searchParams.append('variation_id', variationId);
     }
+    if (clientId) {
+        url.searchParams.append('i', clientId);
+    }
+    if (sessionId != null) {
+        url.searchParams.append('s', String(sessionId));
+    }
+    if (userId) {
+        url.searchParams.append('ui', userId);
+    }
+    if (version) {
+        url.searchParams.append('c', version);
+    }
+    if (segments?.length) {
+        segments.forEach((segment) => url.searchParams.append('us', segment));
+    }
     // Any additional parameters
     Object.entries(parameters).forEach(([key, value]) => {
         if (value !== undefined) {

package/lib/mjs/hooks/useAnswerResults.js

@@ -32,6 +32,7 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
             return;
         setIsLoading(true);
         setError(null);
+        setAnswerResults(null);
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.6.4';
+export default '2.8.0';

package/lib/types/components/LoadingSkeleton/LoadingSkeleton.d.ts

@@ -1,2 +1,8 @@
 import React from 'react';
-export default function LoadingSkeleton(): React.JSX.Element;
+import { ComponentOverrideProps } from '@constructor-io/constructorio-ui-components';
+import { LoadingRenderProps } from '../../types';
+interface LoadingSkeletonProps {
+    componentOverride?: ComponentOverrideProps<LoadingRenderProps>;
+}
+export default function LoadingSkeleton({ componentOverride }?: LoadingSkeletonProps): React.JSX.Element;
+export {};

package/lib/types/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { Product, CarouselOverrides, ComponentOverrideProps } from '@constructor-io/constructorio-ui-components';
 import { ConstructorClientOptions, Nullable } from '@constructor-io/constructorio-client-javascript';
 import { Question } from './hooks/mocks/types';
@@ -128,6 +128,9 @@ export interface FeedbackRenderProps {
     translations?: Translations;
     onFeedback?: (type: FeedbackType) => void;
 }
+export interface LoadingRenderProps {
+    skeleton: ReactNode;
+}
 /**
  * Component overrides for CioPia.
  * Allows customization of sub-components via reactNode or render props functions.
@@ -138,5 +141,6 @@ export interface CioPiaComponentOverrides extends ComponentOverrideProps<CioPiaR
     suggestedQuestions?: ComponentOverrideProps<SuggestedQuestionsRenderProps>;
     disclaimer?: ComponentOverrideProps<DisclaimerRenderProps>;
     feedback?: ComponentOverrideProps<FeedbackRenderProps>;
+    loading?: ComponentOverrideProps<LoadingRenderProps>;
 }
 export * from './hooks/mocks/types';

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.6.4";
+declare const _default: "2.8.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.6.4",
+  "version": "2.8.0",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -69,7 +69,7 @@
   },
   "peerDependencies": {
     "@constructor-io/constructorio-client-javascript": "^2.71.1",
-    "@constructor-io/constructorio-ui-components": "^1.4.0",
+    "@constructor-io/constructorio-ui-components": "^1.5.0",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"