@constructor-io/constructorio-ui-pia 2.10.1 → 2.10.2

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

@@ -92,7 +92,7 @@ function CioPia(props) {
     return (react_1.default.createElement("div", { ref: containerRef, 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, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }),
             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,

package/lib/cjs/components/Input/Input.js

@@ -2,41 +2,49 @@
 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 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, onFocus, translations, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, }) {
     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());
-            if (value.trim() !== providedValue) {
+    const handleSubmit = (0, react_1.useCallback)((submittedValue) => {
+        if (submittedValue.trim()) {
+            onSubmit(submittedValue.trim());
+            if (submittedValue.trim() !== providedValue) {
                 setValue('');
             }
         }
-    };
+    }, [onSubmit, providedValue]);
     const handleSubmitOnEnter = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
-            handleSubmit();
+            handleSubmit(value);
         }
     };
     // 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, onFocus: onFocus, 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))));
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: {
+            disabled,
+            placeholder: resolvedPlaceholder,
+            onSubmit: handleSubmit,
+            onFocus,
+            translations,
+        }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
+        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, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+            react_1.default.createElement("button", { type: 'button', onClick: () => handleSubmit(value), 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/PiaConversation/PiaConversation.js

@@ -15,6 +15,6 @@ function PiaConversation({ conversationHistory, isLoading, error, currentItems,
         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: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations }))));
+            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))));
 }
 exports.default = PiaConversation;

package/lib/cjs/components/PiaConversation/PiaModal.js

@@ -67,7 +67,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
         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("div", { className: 'cio-pia-conversation-footer' },
             initialQuestions.length > 0 && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input })),
         react_1.default.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             react_1.default.createElement("div", { className: 'cio-pia-modal-content' },
                 react_1.default.createElement("div", { className: 'cio-pia-modal-header' },

package/lib/cjs/version.js

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

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

@@ -88,7 +88,7 @@ export default function CioPia(props) {
     return (React.createElement("div", { ref: containerRef, 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, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
             isLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
             !isLoading && !error && (React.createElement(React.Fragment, null,

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

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

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

@@ -12,5 +12,5 @@ export default function PiaConversation({ conversationHistory, isLoading, error,
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
             !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations }))));
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
 }

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

@@ -64,7 +64,7 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
         React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
+            React.createElement(Input, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations, componentOverride: componentOverrides?.input })),
         React.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             React.createElement("div", { className: 'cio-pia-modal-content' },
                 React.createElement("div", { className: 'cio-pia-modal-header' },

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.10.1';
+export default '2.10.2';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Translations } from '../../types';
+import { ComponentOverrideProps } from '@constructor-io/constructorio-ui-components';
+import { InputRenderProps, Translations } from '../../types';
 interface InputProps {
     value?: string;
     disabled?: boolean;
@@ -8,6 +9,7 @@ interface InputProps {
     onSubmit: (value: string) => void;
     onFocus?: () => void;
     translations?: Translations;
+    componentOverride?: ComponentOverrideProps<InputRenderProps>;
 }
-declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, }: InputProps): React.JSX.Element;
+declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, }: InputProps): React.JSX.Element;
 export default Input;

package/lib/types/types.d.ts

@@ -146,6 +146,16 @@ export interface FeedbackRenderProps {
 export interface LoadingRenderProps {
     skeleton: ReactNode;
 }
+/**
+ * Render props passed to a custom Input override.
+ */
+export interface InputRenderProps {
+    disabled: boolean;
+    placeholder: string;
+    onSubmit: (value: string) => void;
+    onFocus?: () => void;
+    translations?: Translations;
+}
 /**
  * Component overrides for CioPia.
  * Allows customization of sub-components via reactNode or render props functions.
@@ -153,6 +163,7 @@ export interface LoadingRenderProps {
 export interface CioPiaComponentOverrides extends ComponentOverrideProps<CioPiaRenderProps> {
     carousel?: CarouselOverrides<Item>;
     answer?: ComponentOverrideProps<AnswerRenderProps>;
+    input?: ComponentOverrideProps<InputRenderProps>;
     suggestedQuestions?: ComponentOverrideProps<SuggestedQuestionsRenderProps>;
     disclaimer?: ComponentOverrideProps<DisclaimerRenderProps>;
     feedback?: ComponentOverrideProps<FeedbackRenderProps>;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.10.1";
+declare const _default: "2.10.2";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",