andy-widget-react 2.0.6 → 2.1.0

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.0",
 	"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.0"
 	}
 }

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)
@@ -114,7 +122,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			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 }))
 			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 +334,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 +503,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			setMessages([])
 		}
 
-		if (config?.predefinedQuestions && config.predefinedQuestions.length > 0) {
+		if (activeQuestions && activeQuestions.length > 0) {
 			setShowPredefinedQuestions(true)
 		}
 	}
@@ -527,7 +535,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 +564,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
@@ -704,7 +709,7 @@ 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) {
@@ -951,7 +956,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 +989,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,7 +1020,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 												type='text'
 												className='andy-input__field'
 												id='andy-message-input'
-												placeholder={config ? 'Type your message...' : '...'}
+												placeholder={config ? strings.inputPlaceholder : '...'}
 												aria-label='Message input'
 												onKeyDown={e => {
 													if (e.key === 'Enter' && (e.target as HTMLInputElement).value.trim()) {

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') */