@constructor-io/constructorio-ui-pia 2.10.4 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/README.md +7 -0
  2. package/dist/constructorio-ui-pia-bundled.js +55 -55
  3. package/lib/cjs/components/CioPia/CioPia.js +8 -96
  4. package/lib/cjs/components/CioPia/CioPiaQna.js +111 -0
  5. package/lib/cjs/components/CioPia/CioPiaStyles.css +19 -0
  6. package/lib/cjs/components/CioPia/PiaCustomCarousel.js +24 -29
  7. package/lib/cjs/components/CioPiaRecs/CioPiaRecs.js +73 -0
  8. package/lib/cjs/components/CioPiaRecs/CioPiaRecsStyles.css +138 -0
  9. package/lib/cjs/components/CioPiaRecs/RecsCarouselSkeleton.js +58 -0
  10. package/lib/cjs/components/CioPiaRecs/RecsOptionsSkeleton.js +18 -0
  11. package/lib/cjs/components/CioPiaRecs/RecsPodRefinement.js +27 -0
  12. package/lib/cjs/components/Input/Input.js +27 -9
  13. package/lib/cjs/components/Input/InputStyles.css +27 -0
  14. package/lib/cjs/components/SuggestedQuestion/SuggestedQuestion.js +2 -3
  15. package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainerStyles.css +1 -1
  16. package/lib/cjs/constants.js +12 -1
  17. package/lib/cjs/hooks/useAnswerResults.js +4 -14
  18. package/lib/cjs/hooks/useCioPia.js +48 -18
  19. package/lib/cjs/hooks/usePiaClient.js +21 -0
  20. package/lib/cjs/hooks/useRecsPod.js +134 -0
  21. package/lib/cjs/hooks/useSuggestedQuestions.js +10 -26
  22. package/lib/cjs/hooks/useViewportTracking.js +3 -2
  23. package/lib/cjs/styles.css +1 -0
  24. package/lib/cjs/types.js +0 -2
  25. package/lib/cjs/utils/classNames.js +13 -0
  26. package/lib/cjs/utils/recs.js +13 -0
  27. package/lib/cjs/utils/translate.js +5 -0
  28. package/lib/cjs/version.js +1 -1
  29. package/lib/mjs/components/CioPia/CioPia.js +7 -95
  30. package/lib/mjs/components/CioPia/CioPiaQna.js +106 -0
  31. package/lib/mjs/components/CioPia/CioPiaStyles.css +19 -0
  32. package/lib/mjs/components/CioPia/PiaCustomCarousel.js +43 -30
  33. package/lib/mjs/components/CioPiaRecs/CioPiaRecs.js +69 -0
  34. package/lib/mjs/components/CioPiaRecs/CioPiaRecsStyles.css +138 -0
  35. package/lib/mjs/components/CioPiaRecs/RecsCarouselSkeleton.js +54 -0
  36. package/lib/mjs/components/CioPiaRecs/RecsOptionsSkeleton.js +14 -0
  37. package/lib/mjs/components/CioPiaRecs/RecsPodRefinement.js +23 -0
  38. package/lib/mjs/components/Input/Input.js +27 -9
  39. package/lib/mjs/components/Input/InputStyles.css +27 -0
  40. package/lib/mjs/components/SuggestedQuestion/SuggestedQuestion.js +2 -3
  41. package/lib/mjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainerStyles.css +1 -1
  42. package/lib/mjs/constants.js +11 -0
  43. package/lib/mjs/hooks/useAnswerResults.js +4 -13
  44. package/lib/mjs/hooks/useCioPia.js +49 -18
  45. package/lib/mjs/hooks/usePiaClient.js +17 -0
  46. package/lib/mjs/hooks/useRecsPod.js +129 -0
  47. package/lib/mjs/hooks/useSuggestedQuestions.js +12 -24
  48. package/lib/mjs/hooks/useViewportTracking.js +3 -2
  49. package/lib/mjs/styles.css +1 -0
  50. package/lib/mjs/types.js +0 -1
  51. package/lib/mjs/utils/classNames.js +9 -0
  52. package/lib/mjs/utils/recs.js +9 -0
  53. package/lib/mjs/utils/translate.js +6 -1
  54. package/lib/mjs/version.js +1 -1
  55. package/lib/types/components/CioPia/CioPia.d.ts +1 -36
  56. package/lib/types/components/CioPia/CioPiaQna.d.ts +4 -0
  57. package/lib/types/components/CioPia/index.d.ts +1 -0
  58. package/lib/types/components/CioPia/types.d.ts +55 -0
  59. package/lib/types/components/CioPiaRecs/CioPiaRecs.d.ts +13 -0
  60. package/lib/types/components/CioPiaRecs/RecsCarouselSkeleton.d.ts +16 -0
  61. package/lib/types/components/CioPiaRecs/RecsOptionsSkeleton.d.ts +16 -0
  62. package/lib/types/components/CioPiaRecs/RecsPodRefinement.d.ts +21 -0
  63. package/lib/types/components/Input/Input.d.ts +9 -1
  64. package/lib/types/components/SuggestedQuestion/SuggestedQuestion.d.ts +4 -2
  65. package/lib/types/constants.d.ts +11 -0
  66. package/lib/types/hooks/useAnswerResults.d.ts +4 -4
  67. package/lib/types/hooks/useCioPia.d.ts +20 -5
  68. package/lib/types/hooks/usePiaClient.d.ts +12 -0
  69. package/lib/types/hooks/useRecsPod.d.ts +52 -0
  70. package/lib/types/hooks/useSuggestedQuestions.d.ts +3 -4
  71. package/lib/types/hooks/useViewportTracking.d.ts +2 -1
  72. package/lib/types/types.d.ts +119 -7
  73. package/lib/types/utils/classNames.d.ts +9 -0
  74. package/lib/types/utils/recs.d.ts +6 -0
  75. package/lib/types/version.d.ts +1 -1
  76. package/package.json +2 -2
  77. package/lib/cjs/hooks/mocks/MockConstructorIOClient.js +0 -24
  78. package/lib/cjs/hooks/mocks/agent.js +0 -166
  79. package/lib/mjs/hooks/mocks/MockConstructorIOClient.js +0 -38
  80. package/lib/mjs/hooks/mocks/agent.js +0 -158
  81. package/lib/types/hooks/mocks/MockConstructorIOClient.d.ts +0 -14
  82. package/lib/types/hooks/mocks/agent.d.ts +0 -10
  83. package/lib/types/hooks/mocks/types.d.ts +0 -77
  84. /package/lib/cjs/{hooks/mocks → components/CioPia}/types.js +0 -0
  85. /package/lib/mjs/{hooks/mocks → components/CioPia}/types.js +0 -0
@@ -1,166 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const errors_1 = require("../../errors");
5
- // Create URL for PIA API
6
- function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
7
- const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
8
- if (!agentServiceUrl)
9
- throw new Error('Agent service URL is required');
10
- let baseUrl = `${agentServiceUrl}/v1/item_questions`;
11
- if (question) {
12
- baseUrl += `/${encodeURIComponent(question)}/answer`;
13
- }
14
- if (isStreaming) {
15
- baseUrl += '/streaming';
16
- }
17
- const url = new URL(baseUrl);
18
- url.searchParams.append('item_id', itemId);
19
- url.searchParams.append('key', apiKey);
20
- if (threadId) {
21
- url.searchParams.append('thread_id', threadId);
22
- }
23
- if (variationId) {
24
- url.searchParams.append('variation_id', variationId);
25
- }
26
- if (clientId) {
27
- url.searchParams.append('i', clientId);
28
- }
29
- if (sessionId != null) {
30
- url.searchParams.append('s', String(sessionId));
31
- }
32
- if (userId) {
33
- url.searchParams.append('ui', userId);
34
- }
35
- if (version) {
36
- url.searchParams.append('c', version);
37
- }
38
- if (segments === null || segments === void 0 ? void 0 : segments.length) {
39
- segments.forEach((segment) => url.searchParams.append('us', segment));
40
- }
41
- // Any additional parameters
42
- Object.entries(parameters).forEach(([key, value]) => {
43
- if (value !== undefined) {
44
- url.searchParams.append(key, String(value));
45
- }
46
- });
47
- return url.toString();
48
- }
49
- // Map camelCase SuggestedQuestionsParameters to snake_case query params expected by the API
50
- function mapSuggestedQuestionsParams(params) {
51
- const result = {};
52
- if (params.numResults !== undefined)
53
- result.num_results = params.numResults;
54
- return result;
55
- }
56
- class MockAgent {
57
- constructor(options) {
58
- this.options = options;
59
- }
60
- getSuggestedQuestions({ itemId, variationId, threadId, parameters = {}, requestParameters = {}, }) {
61
- return tslib_1.__awaiter(this, void 0, void 0, function* () {
62
- if (!itemId)
63
- throw new Error('Item ID is required');
64
- if (!this.options.apiKey)
65
- throw new Error('API key is required');
66
- const url = createAgentUrl({
67
- itemId,
68
- variationId,
69
- threadId,
70
- options: this.options,
71
- parameters: Object.assign(Object.assign({}, requestParameters), mapSuggestedQuestionsParams(parameters)),
72
- });
73
- try {
74
- const response = yield fetch(url);
75
- if (!response.ok)
76
- throw new errors_1.AgentRequestError(response.status);
77
- const data = yield response.json();
78
- return data;
79
- }
80
- catch (error) {
81
- // Rethrow untouched so the status code and the original stack survive.
82
- if (error instanceof Error)
83
- throw error;
84
- throw new Error(String(error));
85
- }
86
- });
87
- }
88
- getAnswerResults({ itemId, variationId, threadId, question, parameters = {}, }) {
89
- return tslib_1.__awaiter(this, void 0, void 0, function* () {
90
- if (!itemId)
91
- throw new Error('Item ID is required');
92
- if (!question)
93
- throw new Error('Question is required');
94
- if (!this.options.apiKey)
95
- throw new Error('API key is required');
96
- const url = createAgentUrl({
97
- itemId,
98
- threadId,
99
- variationId,
100
- question,
101
- options: this.options,
102
- parameters,
103
- });
104
- try {
105
- const response = yield fetch(url);
106
- if (!response.ok)
107
- throw new errors_1.AgentRequestError(response.status);
108
- const data = yield response.json();
109
- return data;
110
- }
111
- catch (error) {
112
- // Rethrow untouched so the status code and the original stack survive.
113
- if (error instanceof Error)
114
- throw error;
115
- throw new Error(String(error));
116
- }
117
- });
118
- }
119
- getAnswerResultsStream({ itemId, threadId, variationId, question, parameters, onStart, onMessage, onEnd, }) {
120
- return tslib_1.__awaiter(this, void 0, void 0, function* () {
121
- if (!itemId)
122
- throw new Error('Item ID is required');
123
- if (!question)
124
- throw new Error('Question is required');
125
- if (!this.options.apiKey)
126
- throw new Error('API key is required');
127
- const url = createAgentUrl({
128
- itemId,
129
- threadId,
130
- variationId,
131
- question,
132
- isStreaming: true,
133
- options: this.options,
134
- parameters,
135
- });
136
- try {
137
- const eventSource = new EventSource(url);
138
- eventSource.addEventListener('open', (event) => {
139
- const data = JSON.parse(event.data);
140
- if (onStart)
141
- onStart(data);
142
- });
143
- eventSource.addEventListener('message', (event) => {
144
- const data = JSON.parse(event.data);
145
- if (onMessage)
146
- onMessage(data);
147
- });
148
- eventSource.addEventListener('end', (event) => {
149
- const data = JSON.parse(event.data);
150
- if (onEnd)
151
- onEnd(data);
152
- eventSource.close();
153
- });
154
- eventSource.onerror = () => {
155
- eventSource.close();
156
- throw new Error('Unexpected error occurred. Please try again.');
157
- };
158
- }
159
- catch (error) {
160
- const errorMessage = error instanceof Error ? error.message : String(error);
161
- throw new Error(errorMessage);
162
- }
163
- });
164
- }
165
- }
166
- exports.default = MockAgent;
@@ -1,38 +0,0 @@
1
- import ConstructorioClient from '@constructor-io/constructorio-client-javascript';
2
- import MockAgent from './agent';
3
- import version from '../../version';
4
- class MockConstructorIOClient {
5
- options;
6
- search;
7
- browse;
8
- recommendations;
9
- tracker;
10
- quizzes;
11
- agent;
12
- constructor(options) {
13
- const isServer = typeof window === 'undefined' || typeof document === 'undefined';
14
- const clientOptions = {
15
- version: options.version || `cio-ui-pia-${version}`,
16
- serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com',
17
- quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com',
18
- agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com',
19
- ...(isServer && {
20
- clientId: options.clientId || 'this-is-a-random-client-id',
21
- }),
22
- sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true,
23
- beaconMode: options.beaconMode !== undefined ? options.beaconMode : true,
24
- networkParameters: options.networkParameters || {},
25
- ...options,
26
- };
27
- const cioClient = new ConstructorioClient(clientOptions);
28
- const { clientId, sessionId } = cioClient.agent.options;
29
- this.options = { ...clientOptions, clientId, sessionId };
30
- this.search = cioClient.search;
31
- this.browse = cioClient.browse;
32
- this.recommendations = cioClient.recommendations;
33
- this.tracker = cioClient.tracker;
34
- this.quizzes = cioClient.quizzes;
35
- this.agent = new MockAgent(this.options);
36
- }
37
- }
38
- export default MockConstructorIOClient;
@@ -1,158 +0,0 @@
1
- import { AgentRequestError } from '../../errors';
2
- // Create URL for PIA API
3
- function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
4
- const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
5
- if (!agentServiceUrl)
6
- throw new Error('Agent service URL is required');
7
- let baseUrl = `${agentServiceUrl}/v1/item_questions`;
8
- if (question) {
9
- baseUrl += `/${encodeURIComponent(question)}/answer`;
10
- }
11
- if (isStreaming) {
12
- baseUrl += '/streaming';
13
- }
14
- const url = new URL(baseUrl);
15
- url.searchParams.append('item_id', itemId);
16
- url.searchParams.append('key', apiKey);
17
- if (threadId) {
18
- url.searchParams.append('thread_id', threadId);
19
- }
20
- if (variationId) {
21
- url.searchParams.append('variation_id', variationId);
22
- }
23
- if (clientId) {
24
- url.searchParams.append('i', clientId);
25
- }
26
- if (sessionId != null) {
27
- url.searchParams.append('s', String(sessionId));
28
- }
29
- if (userId) {
30
- url.searchParams.append('ui', userId);
31
- }
32
- if (version) {
33
- url.searchParams.append('c', version);
34
- }
35
- if (segments?.length) {
36
- segments.forEach((segment) => url.searchParams.append('us', segment));
37
- }
38
- // Any additional parameters
39
- Object.entries(parameters).forEach(([key, value]) => {
40
- if (value !== undefined) {
41
- url.searchParams.append(key, String(value));
42
- }
43
- });
44
- return url.toString();
45
- }
46
- // Map camelCase SuggestedQuestionsParameters to snake_case query params expected by the API
47
- function mapSuggestedQuestionsParams(params) {
48
- const result = {};
49
- if (params.numResults !== undefined)
50
- result.num_results = params.numResults;
51
- return result;
52
- }
53
- class MockAgent {
54
- options;
55
- constructor(options) {
56
- this.options = options;
57
- }
58
- async getSuggestedQuestions({ itemId, variationId, threadId, parameters = {}, requestParameters = {}, }) {
59
- if (!itemId)
60
- throw new Error('Item ID is required');
61
- if (!this.options.apiKey)
62
- throw new Error('API key is required');
63
- const url = createAgentUrl({
64
- itemId,
65
- variationId,
66
- threadId,
67
- options: this.options,
68
- parameters: { ...requestParameters, ...mapSuggestedQuestionsParams(parameters) },
69
- });
70
- try {
71
- const response = await fetch(url);
72
- if (!response.ok)
73
- throw new AgentRequestError(response.status);
74
- const data = await response.json();
75
- return data;
76
- }
77
- catch (error) {
78
- // Rethrow untouched so the status code and the original stack survive.
79
- if (error instanceof Error)
80
- throw error;
81
- throw new Error(String(error));
82
- }
83
- }
84
- async getAnswerResults({ itemId, variationId, threadId, question, parameters = {}, }) {
85
- if (!itemId)
86
- throw new Error('Item ID is required');
87
- if (!question)
88
- throw new Error('Question is required');
89
- if (!this.options.apiKey)
90
- throw new Error('API key is required');
91
- const url = createAgentUrl({
92
- itemId,
93
- threadId,
94
- variationId,
95
- question,
96
- options: this.options,
97
- parameters,
98
- });
99
- try {
100
- const response = await fetch(url);
101
- if (!response.ok)
102
- throw new AgentRequestError(response.status);
103
- const data = await response.json();
104
- return data;
105
- }
106
- catch (error) {
107
- // Rethrow untouched so the status code and the original stack survive.
108
- if (error instanceof Error)
109
- throw error;
110
- throw new Error(String(error));
111
- }
112
- }
113
- async getAnswerResultsStream({ itemId, threadId, variationId, question, parameters, onStart, onMessage, onEnd, }) {
114
- if (!itemId)
115
- throw new Error('Item ID is required');
116
- if (!question)
117
- throw new Error('Question is required');
118
- if (!this.options.apiKey)
119
- throw new Error('API key is required');
120
- const url = createAgentUrl({
121
- itemId,
122
- threadId,
123
- variationId,
124
- question,
125
- isStreaming: true,
126
- options: this.options,
127
- parameters,
128
- });
129
- try {
130
- const eventSource = new EventSource(url);
131
- eventSource.addEventListener('open', (event) => {
132
- const data = JSON.parse(event.data);
133
- if (onStart)
134
- onStart(data);
135
- });
136
- eventSource.addEventListener('message', (event) => {
137
- const data = JSON.parse(event.data);
138
- if (onMessage)
139
- onMessage(data);
140
- });
141
- eventSource.addEventListener('end', (event) => {
142
- const data = JSON.parse(event.data);
143
- if (onEnd)
144
- onEnd(data);
145
- eventSource.close();
146
- });
147
- eventSource.onerror = () => {
148
- eventSource.close();
149
- throw new Error('Unexpected error occurred. Please try again.');
150
- };
151
- }
152
- catch (error) {
153
- const errorMessage = error instanceof Error ? error.message : String(error);
154
- throw new Error(errorMessage);
155
- }
156
- }
157
- }
158
- export default MockAgent;
@@ -1,14 +0,0 @@
1
- import { ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript';
2
- import { Recommendations, Browse, Search, Tracker, Quizzes } from '@constructor-io/constructorio-client-javascript/lib/types/constructorio';
3
- import MockAgent from './agent';
4
- declare class MockConstructorIOClient {
5
- options: ConstructorClientOptions;
6
- search: Search;
7
- browse: Browse;
8
- recommendations: Recommendations;
9
- tracker: Tracker;
10
- quizzes: Quizzes;
11
- agent: MockAgent;
12
- constructor(options: ConstructorClientOptions);
13
- }
14
- export default MockConstructorIOClient;
@@ -1,10 +0,0 @@
1
- import { ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript';
2
- import { QuestionResponse, GetSuggestedQuestionsProps, GetAnswerResultsStreamProps, GetAnswerResultsProps, GetAnswerResultsResponse } from './types';
3
- declare class MockAgent {
4
- options: ConstructorClientOptions;
5
- constructor(options: ConstructorClientOptions);
6
- getSuggestedQuestions({ itemId, variationId, threadId, parameters, requestParameters, }: GetSuggestedQuestionsProps): Promise<QuestionResponse>;
7
- getAnswerResults({ itemId, variationId, threadId, question, parameters, }: GetAnswerResultsProps): Promise<GetAnswerResultsResponse>;
8
- getAnswerResultsStream({ itemId, threadId, variationId, question, parameters, onStart, onMessage, onEnd, }: GetAnswerResultsStreamProps): Promise<void>;
9
- }
10
- export default MockAgent;
@@ -1,77 +0,0 @@
1
- import { ConstructorClientOptions, ItemData } from '@constructor-io/constructorio-client-javascript';
2
- export type SuggestedQuestionsParameters = {
3
- numResults?: number;
4
- };
5
- export type AgentUrlProps = {
6
- itemId: string;
7
- variationId?: string;
8
- /** Thread ID for conversation context. Must be a valid UUID (e.g., "550e8400-e29b-41d4-a716-446655440000") */
9
- threadId?: string;
10
- question?: string;
11
- isStreaming?: boolean;
12
- options: ConstructorClientOptions;
13
- parameters?: Record<string, string | number | boolean>;
14
- };
15
- export type GetSuggestedQuestionsProps = {
16
- itemId: string;
17
- variationId?: string;
18
- /** Thread ID for conversation context. Must be a valid UUID (e.g., "550e8400-e29b-41d4-a716-446655440000") */
19
- threadId?: string;
20
- parameters?: SuggestedQuestionsParameters;
21
- /** Extra query parameters appended verbatim to the request (e.g. `ef-*` test cell params). */
22
- requestParameters?: Record<string, string | number | boolean>;
23
- };
24
- export interface Question {
25
- value: string;
26
- }
27
- export interface QuestionResponse {
28
- questions: Array<Question>;
29
- }
30
- export type GetAnswerResultsProps = {
31
- itemId: string;
32
- variationId?: string;
33
- /** Thread ID for conversation context. Must be a valid UUID (e.g., "550e8400-e29b-41d4-a716-446655440000") */
34
- threadId?: string;
35
- question: string;
36
- parameters?: Record<string, any>;
37
- };
38
- export type GetAnswerResultsStreamProps = GetAnswerResultsProps & {
39
- onStart?: (event: StreamStartEvent) => void;
40
- onMessage?: (event: StreamMessageEvent) => void;
41
- onEnd?: (event: StreamEndEvent) => void;
42
- };
43
- /** Defines loose types for response-related types to account for future changes to API schema */
44
- export interface ApiItemVariation extends Record<string, any> {
45
- value: string;
46
- data?: ItemData;
47
- }
48
- export interface ApiItem extends Record<string, any> {
49
- value: string;
50
- matched_terms: Array<string>;
51
- data: ItemData;
52
- variations?: Array<ApiItemVariation> | null;
53
- variations_map?: Record<string, any> | Array<Record<string, any>> | null;
54
- }
55
- export interface AnswerItemResults {
56
- request?: Record<string, any>;
57
- response: {
58
- results: Array<ApiItem>;
59
- };
60
- }
61
- export interface GetAnswerResultsResponse {
62
- qna_result_id: string;
63
- value: string;
64
- item_results?: AnswerItemResults;
65
- follow_up_questions?: Array<Question>;
66
- thread_id?: string;
67
- }
68
- export interface StreamStartEvent {
69
- qna_result_id: string;
70
- }
71
- export interface StreamMessageEvent {
72
- qna_result_id: string;
73
- text: string;
74
- }
75
- export interface StreamEndEvent {
76
- qna_result_id: string;
77
- }