andy-widget-react 2.0.6 → 2.1.1

package/dist/types/types/index.d.ts

@@ -74,6 +74,10 @@ export interface AndyChatProps {
     welcomeMessage?: string;
     /** Optional custom label for pill-style bubble (overrides default) */
     bubbleLabel?: string;
+    /** Optional UI language for the widget's own chrome, overrides the Agent's defaultLang */
+    lang?: 'en' | 'es';
+    /** Optional starter questions (overrides API value) */
+    predefinedQuestions?: PredefinedQuestion[];
     /** Optional theme ('light' | 'dark' | 'auto') */
     theme?: 'light' | 'dark' | 'auto';
     /** Optional position ('left' | 'right') */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "andy-widget-react",
-	"version": "2.0.6",
+	"version": "2.1.1",
 	"description": "Official React Widget for embeddable Andy agents",
 	"type": "module",
 	"main": "dist/index.cjs",
@@ -67,6 +67,6 @@
 		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"dependencies": {
-		"andy-widget-core": "2.0.6"
+		"andy-widget-core": "2.1.1"
 	}
 }

package/src/AndyChat.tsx

@@ -18,6 +18,7 @@ import {
 	FOOTER_TEXT,
 	getFooterUrl,
 	getDefaultBubbleLabel,
+	getUiStrings,
 	getKeyboardDetector,
 	updateKeyboardHeight,
 	isMobileDevice
@@ -74,6 +75,8 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	description,
 	welcomeMessage,
 	bubbleLabel,
+	lang,
+	predefinedQuestions,
 	theme,
 	orientation,
 	brandColor,
@@ -84,6 +87,11 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	initialOpen = false
 }) => {
 	const [config, setConfig] = useState<ChatbotConfig | null>(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] = useState(initialOpen)
 	const [messages, setMessages] = useState<Message[]>([])
 	const [isLoading, setIsLoading] = useState(false)
@@ -113,8 +121,10 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			setSessionId(projection.identity.sessionId)
 			pendingHandoffIdsRef.current = projection.pendingProjectionIds || []
 			const projectedMessages = projection.messages.map(message => ({ id: message.id, content: message.content, sender: message.role === 'user' ? 'user' as const : 'bot' as const, timestamp: new Date(message.createdAt).toISOString(), isHuman: message.sentByHuman }))
+			// An empty agent projection does not mean the client-only greeting is gone.
+			if (projection.control === 'agent' && projectedMessages.length === 0) return
 			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
@@ -326,12 +336,12 @@ const AndyChat: React.FC<AndyChatProps> = ({
 				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)
@@ -495,7 +505,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			setMessages([])
 		}
 
-		if (config?.predefinedQuestions && config.predefinedQuestions.length > 0) {
+		if (activeQuestions && activeQuestions.length > 0) {
 			setShowPredefinedQuestions(true)
 		}
 	}
@@ -527,7 +537,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 				setIsLoading(true)
 				const response = await sendMessageToAPI(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
 				}
 
@@ -556,10 +566,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 				console.error('AndyChat: Message request failed.')
 				const errorMessage: Message = {
 					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
@@ -691,7 +698,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			bubble = document.createElement('button')
 			bubble.type = 'button'
 			bubble.className = 'andy-chat-bubble'
-			bubble.setAttribute('aria-label', 'Open chat')
+			bubble.setAttribute('aria-label', strings.openChat)
 
 			const tooltipHTML = tooltip
 				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
@@ -704,10 +711,11 @@ const AndyChat: React.FC<AndyChatProps> = ({
 
 		const isPillStyle = config?.bubbleStyle === 'pill'
 		const displayLabel =
-			bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(config?.defaultLang || 'en') : null)
+			bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(uiLang) : null)
 		const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL
 
 		if (bubble) {
+			bubble.setAttribute('aria-label', isOpen ? strings.closeChat : strings.openChat)
 			bubble.className = 'andy-chat-bubble'
 			if (isPillStyle) {
 				bubble.classList.add('andy-chat-bubble--pill')
@@ -770,7 +778,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									type='button'
 									className='andy-header__back'
 									id='andy-back-button'
-									aria-label='Go back'
+									aria-label={strings.goBack}
 									onClick={() => setIsOpen(false)}
 								>
 									<svg
@@ -816,7 +824,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									type='button'
 									className='andy-header__close'
 									id='andy-close-button'
-									aria-label='Close chat'
+									aria-label={strings.closeChat}
 									onClick={() => setIsOpen(false)}
 								>
 									<svg
@@ -951,7 +959,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 															)}
 														</div>
 									<span className='andy-bot-header__name'>
-										{message.isHuman ? (config?.defaultLang === 'es' ? 'Equipo' : 'Team') : config?.name || 'Andy bot'}
+										{message.isHuman ? strings.teamName : config?.name || 'Andy bot'}
 									</span>
 													</div>
 													<div className='andy-message__content'>
@@ -984,15 +992,15 @@ const AndyChat: React.FC<AndyChatProps> = ({
 							</div>
 
 							<div className='andy-chat-window__bottom'>
-								{config?.predefinedQuestions &&
-									config.predefinedQuestions.length > 0 &&
+								{activeQuestions &&
+									activeQuestions.length > 0 &&
 									showPredefinedQuestions && (
 										<div className='andy-predefined-questions' id='andy-predefined-questions'>
 											<div className='andy-predefined-questions__header'>
-												<p className='andy-predefined-questions__title'>What would you like to know?</p>
+												<p className='andy-predefined-questions__title'>{strings.predefinedQuestionsTitle}</p>
 											</div>
 											<div className='andy-predefined-questions__list'>
-												{config.predefinedQuestions.map((q, index) => (
+												{activeQuestions.map((q, index) => (
 													<button
 														key={index}
 														type='button'
@@ -1015,8 +1023,8 @@ const AndyChat: React.FC<AndyChatProps> = ({
 												type='text'
 												className='andy-input__field'
 												id='andy-message-input'
-												placeholder={config ? 'Type your message...' : '...'}
-												aria-label='Message input'
+												placeholder={config ? strings.inputPlaceholder : '...'}
+												aria-label={strings.messageInput}
 												onKeyDown={e => {
 													if (e.key === 'Enter' && (e.target as HTMLInputElement).value.trim()) {
 														handleSendMessage((e.target as HTMLInputElement).value)
@@ -1029,7 +1037,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 												type='button'
 												className='andy-input__button'
 												id='andy-send-button'
-												aria-label='Send message'
+												aria-label={strings.sendMessage}
 												onClick={() => {
 													const input = shadowRef.current?.getElementById(
 														'andy-message-input'
@@ -1079,7 +1087,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 								className={`andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`}
 								style={{ display: 'block' }}
 								role='dialog'
-								aria-label='Welcome message'
+								aria-label={strings.welcomeMessage}
 							>
 								<div className='andy-welcome-popup__content'>
 									<div className='andy-welcome-popup__message'>
@@ -1090,7 +1098,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									<button
 										type='button'
 										className='andy-welcome-popup__close'
-										aria-label='Close welcome message'
+										aria-label={strings.closeWelcomeMessage}
 										onClick={() => setShowWelcomePopup(false)}
 									>
 										<svg

package/src/types/index.ts

@@ -90,6 +90,10 @@ export interface AndyChatProps {
 	welcomeMessage?: string
 	/** Optional custom label for pill-style bubble (overrides default) */
 	bubbleLabel?: string
+	/** Optional UI language for the widget's own chrome, overrides the Agent's defaultLang */
+	lang?: 'en' | 'es'
+	/** Optional starter questions (overrides API value) */
+	predefinedQuestions?: PredefinedQuestion[]
 	/** Optional theme ('light' | 'dark' | 'auto') */
 	theme?: 'light' | 'dark' | 'auto'
 	/** Optional position ('left' | 'right') */