@constructor-io/constructorio-ui-asa 1.0.0

package/lib/cjs/components/Chat/AiMessage.css

@@ -0,0 +1,35 @@
+.cio-asa-ai-message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding-right: 12px;
+}
+
+.cio-asa-ai-message__bubble {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 8px;
+  background: #ECEEF3;
+  border-radius: 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cio-asa-ai-message__bubble--error {
+  background: #FDECEC;
+}
+
+.cio-asa-ai-message__text {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.005em;
+  color: #0F1324;
+}
+
+.cio-asa-ai-message__bubble--error .cio-asa-ai-message__text {
+  color: #B42318;
+}

package/lib/cjs/components/Chat/AiMessage.js

@@ -0,0 +1,34 @@
+"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 = tslib_1.__importDefault(require("../../utils/translate"));
+const TypingIndicator_1 = tslib_1.__importDefault(require("./TypingIndicator"));
+function AiMessage({ message, componentOverrides, translations }) {
+    var _a, _b, _c;
+    const isLoading = message.status === 'loading';
+    const isError = message.status === 'error';
+    const hasGroups = !!((_a = message.groups) === null || _a === void 0 ? void 0 : _a.length);
+    // On error, fall back to the (translatable) error message when the agent
+    // returned no partial text of its own.
+    const text = isError
+        ? message.text || (0, translate_1.default)('CioAsa.error.message', translations)
+        : message.text || '';
+    const hasText = text.length > 0;
+    const loaderRenderProps = { translations };
+    const textRenderProps = { text };
+    return (react_1.default.createElement("div", { className: 'cio-asa-ai-message' },
+        isLoading && !hasText && !hasGroups && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_b = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loader) === null || _b === void 0 ? void 0 : _b.reactNode, props: loaderRenderProps },
+            react_1.default.createElement(TypingIndicator_1.default, { translations: translations }))),
+        hasText && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.text) === null || _c === void 0 ? void 0 : _c.reactNode, props: textRenderProps },
+            react_1.default.createElement("div", { className: [
+                    'cio-asa-ai-message__bubble',
+                    isError && 'cio-asa-ai-message__bubble--error',
+                ]
+                    .filter(Boolean)
+                    .join(' ') },
+                react_1.default.createElement("div", { className: 'cio-asa-ai-message__text' }, text))))));
+}
+exports.default = AiMessage;
+AiMessage.displayName = 'AiMessage';

package/lib/cjs/components/Chat/Chat.css

@@ -0,0 +1,103 @@
+.cio-asa-chat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(248, 249, 252, 1);
+  overflow: hidden;
+  position: relative;
+  animation: cio-asa-fade-in 0.4s ease;
+}
+
+.cio-asa-chat-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.cio-asa-chat-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.cio-asa-chat-view--welcome {
+  animation: cio-asa-fade-in 0.3s ease;
+}
+
+.cio-asa-chat-view--chat {
+  animation: cio-asa-fade-in 0.3s ease;
+  position: relative;
+}
+
+/* Overlay backdrop */
+.cio-asa-chat-overlay {
+  position: fixed;
+  inset: 0;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 999;
+  animation: cio-asa-fade-in 0.2s ease;
+}
+
+/* Slide-in panel from right */
+.cio-asa-chat-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 420px;
+  z-index: 1000;
+  animation: cio-asa-slide-in-right 0.3s ease;
+}
+
+.cio-asa-chat-panel .cio-asa-chat {
+  height: 100%;
+}
+
+@keyframes cio-asa-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cio-asa-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes cio-asa-slide-in-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.cio-asa-chat-fullscreen {
+  position: absolute;
+  inset: 0;
+  z-index: 1000;
+  overflow: hidden;
+  animation: cio-asa-fade-in 0.4s ease;
+}
+
+.cio-asa-chat-fullscreen--right {
+  inset: 0 0 0 auto;
+  width: 504px;
+  animation: cio-asa-slide-in-right 0.4s ease 0.2s both;
+}

package/lib/cjs/components/Chat/Chat.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useAsaResults_1 = tslib_1.__importDefault(require("../../hooks/useAsaResults"));
+const useFocusTrap_1 = tslib_1.__importDefault(require("../../hooks/useFocusTrap"));
+const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const ChatHeader_1 = tslib_1.__importDefault(require("./ChatHeader"));
+const WelcomeScreen_1 = tslib_1.__importDefault(require("./WelcomeScreen"));
+const ChatMessageList_1 = tslib_1.__importDefault(require("./ChatMessageList"));
+const ChatInput_1 = tslib_1.__importDefault(require("./ChatInput"));
+const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, }, ref) => {
+    const { messages, sendMessage, isStreaming, clearHistory } = (0, useAsaResults_1.default)();
+    const chatViewRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const isWelcome = messages.length === 0;
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        clearHistory,
+    }));
+    (0, react_1.useEffect)(() => {
+        const root = isWelcome ? containerRef.current : chatViewRef.current;
+        const input = root === null || root === void 0 ? void 0 : root.querySelector('input');
+        input === null || input === void 0 ? void 0 : input.focus();
+    }, [isWelcome]);
+    (0, useFocusTrap_1.default)(containerRef, { onEscape: onClose });
+    return (react_1.default.createElement("div", { className: ['cio-asa', 'cio-asa-chat', className].filter(Boolean).join(' '), ref: containerRef, role: 'dialog', "aria-labelledby": 'cio-asa-chat-title' },
+        react_1.default.createElement("div", { className: 'cio-asa-chat-body' }, isWelcome ? (react_1.default.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--welcome' },
+            react_1.default.createElement(WelcomeScreen_1.default, { suggestions: initialSuggestions, onSend: sendMessage, onClose: onClose, termsText: termsText, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.welcomeScreen }))) : (react_1.default.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--chat', ref: chatViewRef },
+            react_1.default.createElement(ChatHeader_1.default, { onClose: onClose, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.header }),
+            react_1.default.createElement(ChatMessageList_1.default, { messages: messages, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: (0, translate_1.default)('CioAsa.results.addToCart', translations), viewMoreText: (0, translate_1.default)('CioAsa.results.viewMore', translations), aiMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.aiMessage, userMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.userMessage, resultsBlockOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.resultsBlock, translations: translations }),
+            react_1.default.createElement(ChatInput_1.default, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))))));
+});
+Chat.displayName = 'Chat';
+exports.default = Chat;

package/lib/cjs/components/Chat/ChatHeader.css

@@ -0,0 +1,41 @@
+.cio-asa-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  position: relative;
+  flex-shrink: 0;
+  border-bottom: 1px solid rgba(222, 224, 227, 1);
+  background: #FFFFFF;
+}
+
+.cio-asa-chat-header__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1;
+  color: #0F1324;
+}
+
+.cio-asa-chat-header__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1a1a1a;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.cio-asa-chat-header__close::before {
+  content: '\2715';
+}
+
+.cio-asa-chat-header__close:hover {
+  opacity: 0.7;
+}

package/lib/cjs/components/Chat/ChatHeader.js

@@ -0,0 +1,18 @@
+"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 = tslib_1.__importDefault(require("../../utils/translate"));
+function ChatHeader({ onClose, translations, componentOverrides }) {
+    const renderProps = {
+        title: (0, translate_1.default)('CioAsa.header.title', translations),
+        onClose,
+    };
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
+        react_1.default.createElement("div", { className: 'cio-asa-chat-header' },
+            react_1.default.createElement("span", { id: 'cio-asa-chat-title', className: 'cio-asa-chat-header__title' }, renderProps.title),
+            onClose && (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-header__close', onClick: onClose, "aria-label": (0, translate_1.default)('CioAsa.header.close', translations) })))));
+}
+exports.default = ChatHeader;
+ChatHeader.displayName = 'ChatHeader';

package/lib/cjs/components/Chat/ChatInput.css

@@ -0,0 +1,83 @@
+.cio-asa-chat-input-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  padding: 24px 12px 16px;
+  background: linear-gradient(to bottom, rgba(248, 249, 252, 0) 0%, rgba(248, 249, 252, 1) 40%);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.cio-asa-chat-input {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 12px;
+  height: 40px;
+  max-width: 508px;
+  width: 100%;
+  background: #FFFFFF;
+  border: 1px solid #DEE0E3;
+  box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
+  border-radius: 4px;
+  box-sizing: border-box;
+  pointer-events: all;
+}
+
+.cio-asa-chat-input:hover {
+  border-color: #C8CAD0;
+}
+
+.cio-asa-chat-input:focus-within {
+  border-color: #000000;
+}
+
+.cio-asa-chat-input__field {
+  flex: 1;
+  padding: 0;
+  border: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #0F1324;
+  outline: none;
+  background: transparent;
+}
+
+.cio-asa-chat-input__field::placeholder {
+  color: rgba(15, 19, 36, 0.7);
+}
+
+.cio-asa-chat-input__field:disabled {
+  cursor: not-allowed;
+}
+
+.cio-asa-chat-input__send {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.cio-asa-chat-input__send:hover:not(:disabled) svg path {
+  stroke: #0F1324;
+  stroke-opacity: 1;
+}
+
+.cio-asa-chat-input__send:disabled {
+  cursor: default;
+  opacity: 0.3;
+}

package/lib/cjs/components/Chat/ChatInput.js

@@ -0,0 +1,30 @@
+"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 icons_1 = require("../icons");
+const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const useMessageInput_1 = tslib_1.__importDefault(require("../../hooks/useMessageInput"));
+function ChatInput({ onSubmit, isDisabled = false, translations, componentOverrides, }) {
+    const { value, setValue, handleSubmit, handleKeyDown } = (0, useMessageInput_1.default)({
+        onSend: onSubmit,
+        isDisabled,
+        submitOnEnterOnly: true,
+    });
+    const renderProps = {
+        value,
+        onChange: setValue,
+        onSubmit: handleSubmit,
+        placeholder: (0, translate_1.default)('CioAsa.input.placeholder', translations),
+        isDisabled,
+    };
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
+        react_1.default.createElement("div", { className: 'cio-asa-chat-input-wrapper' },
+            react_1.default.createElement("div", { className: 'cio-asa-chat-input' },
+                react_1.default.createElement("input", { type: 'text', className: 'cio-asa-chat-input__field', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: renderProps.placeholder, disabled: isDisabled, "aria-label": (0, translate_1.default)('CioAsa.input.ariaLabel', translations) }),
+                react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": (0, translate_1.default)('CioAsa.input.sendAriaLabel', translations) },
+                    react_1.default.createElement(icons_1.SendArrowIcon, null))))));
+}
+exports.default = ChatInput;
+ChatInput.displayName = 'ChatInput';

package/lib/cjs/components/Chat/ChatMessageList.css

@@ -0,0 +1,23 @@
+.cio-asa-chat-message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 12px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 508px;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  scrollbar-width: none;
+}
+
+.cio-asa-chat-message-list::-webkit-scrollbar {
+  display: none;
+}
+
+.cio-asa-ai-message-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

package/lib/cjs/components/Chat/ChatMessageList.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const ResultsBlock_1 = tslib_1.__importDefault(require("../ResultsBlock/ResultsBlock"));
+const UserMessage_1 = tslib_1.__importDefault(require("./UserMessage"));
+const AiMessage_1 = tslib_1.__importDefault(require("./AiMessage"));
+function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, }) {
+    const listRef = (0, react_1.useRef)(null);
+    const isNearBottomRef = (0, react_1.useRef)(true);
+    const prevMessageCountRef = (0, react_1.useRef)(messages.length);
+    const handleScroll = (0, react_1.useCallback)(() => {
+        const el = listRef.current;
+        if (!el)
+            return;
+        const threshold = 100;
+        isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const isNewMessage = messages.length > prevMessageCountRef.current;
+        prevMessageCountRef.current = messages.length;
+        if (!isNearBottomRef.current)
+            return;
+        const el = listRef.current;
+        if (!el)
+            return;
+        // Smooth-scroll only when a new message is added; use 'auto' for the frequent
+        // updates during SSE streaming to avoid restarting the animation on every chunk.
+        requestAnimationFrame(() => {
+            el.scrollTo({ top: el.scrollHeight, behavior: isNewMessage ? 'smooth' : 'auto' });
+        });
+    }, [messages]);
+    return (react_1.default.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'polite', "aria-label": (0, translate_1.default)('CioAsa.messageList.ariaLabel', translations) }, messages.map((message) => {
+        var _a;
+        if (message.role === 'user') {
+            return (react_1.default.createElement(UserMessage_1.default, { key: message.id, text: message.text, translations: translations, componentOverrides: userMessageOverrides }));
+        }
+        const hasGroups = !!((_a = message.groups) === null || _a === void 0 ? void 0 : _a.length);
+        return (react_1.default.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
+            react_1.default.createElement(AiMessage_1.default, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
+            hasGroups && (react_1.default.createElement(ResultsBlock_1.default, { groups: message.groups, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: (0, translate_1.default)('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
+    })));
+}
+exports.default = ChatMessageList;
+ChatMessageList.displayName = 'ChatMessageList';

package/lib/cjs/components/Chat/TypingIndicator.css

@@ -0,0 +1,51 @@
+.cio-asa-typing-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 8px;
+  background: #ECEEF3;
+  border-radius: 6px;
+}
+
+.cio-asa-typing-indicator__dots {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+}
+
+.cio-asa-typing-indicator__dot {
+  width: 8px;
+  height: 8px;
+  background: #C8CAD0;
+  border-radius: 50%;
+  animation: cio-asa-typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.cio-asa-typing-indicator__dot:nth-child(1) {
+  background: rgba(15, 19, 36, 0.6);
+  animation-delay: -0.32s;
+}
+
+.cio-asa-typing-indicator__dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.cio-asa-typing-indicator__dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+@keyframes cio-asa-typing-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/lib/cjs/components/Chat/TypingIndicator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+function TypingIndicator({ translations }) {
+    return (react_1.default.createElement("div", { className: 'cio-asa-typing-indicator', role: 'status', "aria-label": (0, translate_1.default)('CioAsa.typingIndicator.ariaLabel', translations) },
+        react_1.default.createElement("div", { className: 'cio-asa-typing-indicator__dots' },
+            react_1.default.createElement("span", { className: 'cio-asa-typing-indicator__dot' }),
+            react_1.default.createElement("span", { className: 'cio-asa-typing-indicator__dot' }),
+            react_1.default.createElement("span", { className: 'cio-asa-typing-indicator__dot' }))));
+}
+exports.default = TypingIndicator;
+TypingIndicator.displayName = 'TypingIndicator';

package/lib/cjs/components/Chat/UserMessage.css

@@ -0,0 +1,25 @@
+.cio-asa-user-message {
+  display: flex;
+  justify-content: flex-end;
+  padding-left: 12px;
+}
+
+.cio-asa-user-message__bubble {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 13px 12px;
+  gap: 8px;
+  background: rgba(9, 9, 12, 0.9);
+  border-radius: 8px 0px 8px 8px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #ffffff;
+  max-width: 100%;
+  word-wrap: break-word;
+  text-align: left;
+}

package/lib/cjs/components/Chat/UserMessage.js

@@ -0,0 +1,14 @@
+"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 = tslib_1.__importDefault(require("../../utils/translate"));
+function UserMessage({ text, translations, componentOverrides }) {
+    const renderProps = { text };
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
+        react_1.default.createElement("div", { className: 'cio-asa-user-message', role: 'group', "aria-label": (0, translate_1.default)('CioAsa.userMessage.ariaLabel', translations) },
+            react_1.default.createElement("div", { className: 'cio-asa-user-message__bubble' }, text))));
+}
+exports.default = UserMessage;
+UserMessage.displayName = 'UserMessage';