andy-widget-react 2.0.6 → 2.1.0

package/README.md

@@ -46,6 +46,8 @@ Widget as a short, language-aware retry message.
 | `description` | `string` | Override the configured description |
 | `welcomeMessage` | `string` | Override the configured first message |
 | `bubbleLabel` | `string` | Override the configured pill label |
+| `lang` | `'en' \| 'es'` | Language for the Widget's own chrome (placeholder, starter-question title, error and handoff text). Overrides the Agent's `defaultLang`, so a Spanish Agent on an English page still renders English chrome |
+| `predefinedQuestions` | `{ order: number, question: string }[]` | Override the configured starter questions |
 | `theme` | `'light' \| 'dark' \| 'auto'` | Override the configured theme |
 | `orientation` | `'left' \| 'right'` | Override the configured position |
 | `brandColor` | `string` | Override the configured six-digit hex color |

package/dist/index.cjs

@@ -3437,6 +3437,34 @@ const SVG_ICONS = {
     <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
   </svg>`};
 
+// Localized UI Strings
+// Chrome the widget renders itself, as opposed to copy the Agent supplies.
+// Keyed by language so React and Vanilla render identical text for a visitor.
+const UI_STRINGS = {
+	en: {
+		inputPlaceholder: 'Type your message...',
+		predefinedQuestionsTitle: 'What would you like to know?',
+		sendFailure: 'Sorry, I could not answer. Please try again.',
+		handoffWaiting: 'A team member will reply soon.',
+		teamName: 'Team'
+	},
+	es: {
+		inputPlaceholder: 'Escribe tu mensaje...',
+		predefinedQuestionsTitle: '¿Qué te gustaría saber?',
+		sendFailure: 'Lo siento, no pude responder. Inténtalo de nuevo.',
+		handoffWaiting: 'Un miembro del equipo te responderá pronto.',
+		teamName: 'Equipo'
+	}
+};
+
+/**
+ * Get the widget's own UI strings for a language.
+ * Unknown languages fall back to English rather than rendering blanks.
+ * @param {string} [lang] - Language code ('en' or 'es')
+ * @returns {typeof UI_STRINGS.en} The localized string set
+ */
+const getUiStrings = lang => UI_STRINGS[lang] || UI_STRINGS.en;
+
 /**
  * Keyboard detection utility for handling mobile virtual keyboards
  * Provides cross-browser support for detecting keyboard open/close events
@@ -3855,8 +3883,13 @@ const createBrowserHandoff = (chatbotId, bootstrap, onProjection) => {
 	}
 };
 
-const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
+const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, lang, predefinedQuestions, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
     const [config, setConfig] = react.useState(null);
+    // The visitor's language wins over the Agent's own default: a Spanish Agent
+    // embedded on an English page must still render English chrome.
+    const uiLang = lang || config?.defaultLang || 'en';
+    const strings = getUiStrings(uiLang);
+    const activeQuestions = predefinedQuestions?.length ? predefinedQuestions : config?.predefinedQuestions;
     const [isOpen, setIsOpen] = react.useState(initialOpen);
     const [messages, setMessages] = react.useState([]);
     const [isLoading, setIsLoading] = react.useState(false);
@@ -3887,7 +3920,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             pendingHandoffIdsRef.current = projection.pendingProjectionIds || [];
             const projectedMessages = projection.messages.map(message => ({ id: message.id, content: message.content, sender: message.role === 'user' ? 'user' : 'bot', timestamp: new Date(message.createdAt).toISOString(), isHuman: message.sentByHuman }));
             setMessages(projection.control === 'requested' || projection.control === 'human'
-                ? [...projectedMessages, { id: 'handoff-waiting', content: config.defaultLang === 'es' ? 'Un miembro del equipo te responderá pronto.' : 'A team member will reply soon.', sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
+                ? [...projectedMessages, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
                 : projectedMessages);
         });
         handoffRef.current = handoff;
@@ -4076,12 +4109,12 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                 bubbleStyle: bubbleStyle || 'icon',
                 bubbleLabel: bubbleLabel || null,
                 useBrandColor: useBrandColor !== undefined ? useBrandColor : true,
-                defaultLang: 'en',
+                defaultLang: uiLang,
                 showBranding: true,
                 showWelcomePopup: { enabled: false, seconds: 3, message: '' },
                 collectUserInfo: { enabled: false, message: '' },
                 welcomeMessage: welcomeMessage || 'Hi there! How can I help you today?',
-                predefinedQuestions: [],
+                predefinedQuestions: predefinedQuestions || [],
                 faqs: []
             };
             setConfig(previewConfig);
@@ -4234,7 +4267,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             setIsLoading(true);
             const response = await sendMessageForWidget(embedId, sessionId, messageText);
             if (response.status === 'waiting') {
-                setMessages(prev => prev.some(message => message.isWaiting) ? prev : [...prev, { id: 'handoff-waiting', content: config?.defaultLang === 'es' ? 'Un miembro del equipo te responderá pronto.' : 'A team member will reply soon.', sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]);
+                setMessages(prev => prev.some(message => message.isWaiting) ? prev : [...prev, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]);
                 return;
             }
             const botMessage = {
@@ -4261,9 +4294,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             console.error('AndyChat: Message request failed.');
             const errorMessage = {
                 id: timestamp + 3,
-                content: config?.defaultLang === 'es'
-                    ? 'Lo siento, no pude responder. Inténtalo de nuevo.'
-                    : 'Sorry, I could not answer. Please try again.',
+                content: strings.sendFailure,
                 sender: 'bot',
                 timestamp: new Date().toISOString(),
                 isError: true
@@ -4379,7 +4410,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             bubble.addEventListener('click', () => setIsOpen(prev => !prev));
         }
         const isPillStyle = config?.bubbleStyle === 'pill';
-        const displayLabel = bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(config?.defaultLang || 'en') : null);
+        const displayLabel = bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(uiLang) : null);
         const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL;
         if (bubble) {
             bubble.className = 'andy-chat-bubble';
@@ -4432,10 +4463,10 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                                     if (message.isLoading) {
                                         return (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--loading', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }, message.id));
                                     }
-                                    return (jsxRuntime.jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? (config?.defaultLang === 'es' ? 'Equipo' : 'Team') : config?.name || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsxRuntime.jsx("div", { className: 'andy-message andy-message--user', children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: message.content }) }) }))] }, message.id));
-                                }), isLoading && (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__bottom', children: [config?.predefinedQuestions &&
-                                    config.predefinedQuestions.length > 0 &&
-                                    showPredefinedQuestions && (jsxRuntime.jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsxRuntime.jsx("div", { className: 'andy-predefined-questions__header', children: jsxRuntime.jsx("p", { className: 'andy-predefined-questions__title', children: "What would you like to know?" }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: config.predefinedQuestions.map((q, index) => (jsxRuntime.jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsxRuntime.jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsxRuntime.jsx("div", { className: 'andy-chat-window__input', children: jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { type: 'text', className: 'andy-input__field', id: 'andy-message-input', placeholder: config ? 'Type your message...' : '...', "aria-label": 'Message input', onKeyDown: e => {
+                                    return (jsxRuntime.jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? strings.teamName : config?.name || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsxRuntime.jsx("div", { className: 'andy-message andy-message--user', children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: message.content }) }) }))] }, message.id));
+                                }), isLoading && (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__bottom', children: [activeQuestions &&
+                                    activeQuestions.length > 0 &&
+                                    showPredefinedQuestions && (jsxRuntime.jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsxRuntime.jsx("div", { className: 'andy-predefined-questions__header', children: jsxRuntime.jsx("p", { className: 'andy-predefined-questions__title', children: strings.predefinedQuestionsTitle }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: activeQuestions.map((q, index) => (jsxRuntime.jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsxRuntime.jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsxRuntime.jsx("div", { className: 'andy-chat-window__input', children: jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { type: 'text', className: 'andy-input__field', id: 'andy-message-input', placeholder: config ? strings.inputPlaceholder : '...', "aria-label": 'Message input', onKeyDown: e => {
                                                         if (e.key === 'Enter' && e.target.value.trim()) {
                                                             handleSendMessage(e.target.value);
                                                             e.target.value = '';