andy-widget-react 2.3.0 → 2.3.2

package/dist/types/hooks/useSupportChat.d.ts

@@ -16,6 +16,7 @@ export declare const useSupportChat: (options: SupportOptions | null) => {
         newProblem: () => void;
         refresh: () => Promise<unknown>;
         setVisible: (visible: boolean) => void;
+        setLanguage: (lang?: "es" | "en") => void;
         newConversation: () => void;
         back: () => void;
         dispose: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "andy-widget-react",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"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.3.0"
+		"andy-widget-core": "2.3.2"
 	}
 }

package/src/AndyChat.tsx

@@ -12,6 +12,7 @@ import {
 	getHostClasses,
 	createBrowserHandoff,
 	parseMarkdown,
+	escapeHtml,
 	CHAT_BUBBLE_DEFAULT_ICON,
 	CHAT_BUBBLE_DEFAULT_ICON_URL,
 	SVG_ICONS,
@@ -713,7 +714,7 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 			bubble.setAttribute('aria-label', strings.openChat)
 
 			const tooltipHTML = tooltip
-				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${escapeHtml(tooltip)}</span>`
 				: ''
 			bubble.innerHTML = `${CHAT_BUBBLE_DEFAULT_ICON}${tooltipHTML}`
 			shadowRef.current.appendChild(bubble)
@@ -744,7 +745,7 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 
 			const tooltipHTML =
 				!isOpen && tooltip && !isPillStyle
-					? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+					? `<span class="andy-chat-bubble__tooltip" role="tooltip">${escapeHtml(tooltip)}</span>`
 					: ''
 
 			const configUseBrandColor = config?.useBrandColor ?? true
@@ -762,12 +763,12 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 				bubble.innerHTML = chevronWithStyle
 			} else if (isPillStyle && displayLabel) {
 				bubble.innerHTML = `
-					<span class="andy-chat-bubble__label">${displayLabel}</span>
-					<img src="${bubbleLogoUrl}" alt="Chat" class="andy-chat-bubble__icon--pill" style="${darkModeIconStyle}" />
+					<span class="andy-chat-bubble__label">${escapeHtml(displayLabel)}</span>
+					<img src="${escapeHtml(bubbleLogoUrl)}" alt="Chat" class="andy-chat-bubble__icon--pill" style="${darkModeIconStyle}" />
 				`
 			} else {
 				if (config?.logoUrl) {
-					bubble.innerHTML = `<img src="${config.logoUrl}" alt="Chatbot Logo" class="andy-chat-bubble__logo" style="${darkModeIconStyle}" />${tooltipHTML}`
+					bubble.innerHTML = `<img src="${escapeHtml(config.logoUrl)}" alt="Chatbot Logo" class="andy-chat-bubble__logo" style="${darkModeIconStyle}" />${tooltipHTML}`
 				} else {
 					const defaultIconWithStyle = CHAT_BUBBLE_DEFAULT_ICON.replace(
 						'class="andy-chat-bubble__icon"',

package/src/SupportChat.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { generateDesignTokenVariablesString, getContrastTextColor, getSupportStylesheet, type SupportTicket } from 'andy-widget-core'
+import { generateDesignTokenVariablesString, getContrastTextColor, getSupportStylesheet, sanitizeUrl, type SupportTicket } from 'andy-widget-core'
 import type { SupportAndyChatProps } from './types'
 import { useSupportChat } from './hooks/useSupportChat'
 
 const copy = {
-	es: { support: 'Soporte', close: 'Cerrar', back: 'Volver', menu: 'Menú', new: 'Nueva conversación', team: 'Hablar con el equipo', requests: 'Mis solicitudes', placeholder: '¿En qué te podemos ayudar?', send: 'Enviar', subject: 'Asunto', detail: 'Cuéntanos qué ocurrió', notice: 'Se adjuntará esta conversación', consent: 'Al enviar, aceptas adjuntar esta conversación para que el equipo pueda ayudarte.', submit: 'Enviar solicitud', receipt: 'Solicitud enviada', promise: 'El equipo responderá en', businessDay: 'un día hábil', hours: 'horas hábiles', minutes: 'minutos hábiles', empty: 'Todavía no tienes solicitudes.', powered: 'Con tecnología de Andy', loading: 'Cargando…', retry: 'Reintentar', error: 'No pudimos completar la solicitud. Puedes reintentar.', auth: 'Tu sesión de soporte no está disponible. Vuelve a iniciar sesión en esta aplicación.', denied: 'El soporte no está disponible para esta cuenta.', transcript: 'mensajes', reply: 'Escribe tu respuesta', reopen: 'Reabrir', reopening: 'Cuéntanos qué volvió a ocurrir', otherProblem: 'Es otro problema', reopened: 'Reabierto', unread: 'Respuestas sin leer', resolvedReply: 'Esta solicitud está resuelta. Reábrela para continuar con el mismo problema.', open: 'Recibido', in_progress: 'En curso', waiting_customer: 'Espera tu respuesta', resolved: 'Resuelto' },
-	en: { support: 'Support', close: 'Close', back: 'Back', menu: 'Menu', new: 'New conversation', team: 'Talk to the team', requests: 'My requests', placeholder: 'How can we help?', send: 'Send', subject: 'Subject', detail: 'Tell us what happened', notice: 'This conversation will be attached', consent: 'By sending, you agree to attach this conversation so the team can help you.', submit: 'Send request', receipt: 'Request sent', promise: 'The team will reply within', businessDay: 'one business day', hours: 'business hours', minutes: 'business minutes', empty: 'You have no requests yet.', powered: 'Powered by Andy', loading: 'Loading…', retry: 'Retry', error: 'We could not complete the request. You can retry.', auth: 'Your support session is unavailable. Sign in again in this application.', denied: 'Support is unavailable for this account.', transcript: 'messages', reply: 'Write your reply', reopen: 'Reopen', reopening: 'Tell us what happened again', otherProblem: 'This is another problem', reopened: 'Reopened', unread: 'Unread replies', resolvedReply: 'This request is resolved. Reopen it to continue with the same problem.', open: 'Received', in_progress: 'In progress', waiting_customer: 'Waiting for your reply', resolved: 'Resolved' }
+	es: { support: 'Soporte', close: 'Cerrar', back: 'Volver', menu: 'Menú', new: 'Nueva conversación', team: 'Hablar con el equipo', requests: 'Mis solicitudes', placeholder: '¿En qué te podemos ayudar?', send: 'Enviar', subject: 'Asunto', detail: 'Cuéntanos qué ocurrió', notice: 'Se adjuntará esta conversación', consent: 'Al enviar, aceptas adjuntar esta conversación para que el equipo pueda ayudarte.', submit: 'Enviar solicitud', receipt: 'Solicitud enviada', promise: 'El equipo responderá en', businessDay: 'un día hábil', hours: 'horas hábiles', minutes: 'minutos hábiles', empty: 'Todavía no tienes solicitudes.', powered: 'Con tecnología de Andy', loading: 'Cargando…', retry: 'Reintentar', error: 'No pudimos completar la solicitud. Puedes reintentar.', auth: 'Tu sesión de soporte no está disponible. Vuelve a iniciar sesión en esta aplicación.', denied: 'El soporte no está disponible para esta cuenta.', transcript: 'mensajes', transcriptSingular: 'mensaje', reply: 'Escribe tu respuesta', reopen: 'Reabrir', reopening: 'Cuéntanos qué volvió a ocurrir', otherProblem: 'Es otro problema', reopened: 'Reabierto', unread: 'Respuestas sin leer', resolvedReply: 'Esta solicitud está resuelta. Reábrela para continuar con el mismo problema.', open: 'Recibido', in_progress: 'En curso', waiting_customer: 'Espera tu respuesta', resolved: 'Resuelto' },
+	en: { support: 'Support', close: 'Close', back: 'Back', menu: 'Menu', new: 'New conversation', team: 'Talk to the team', requests: 'My requests', placeholder: 'How can we help?', send: 'Send', subject: 'Subject', detail: 'Tell us what happened', notice: 'This conversation will be attached', consent: 'By sending, you agree to attach this conversation so the team can help you.', submit: 'Send request', receipt: 'Request sent', promise: 'The team will reply within', businessDay: 'one business day', hours: 'business hours', minutes: 'business minutes', empty: 'You have no requests yet.', powered: 'Powered by Andy', loading: 'Loading…', retry: 'Retry', error: 'We could not complete the request. You can retry.', auth: 'Your support session is unavailable. Sign in again in this application.', denied: 'Support is unavailable for this account.', transcript: 'messages', transcriptSingular: 'message', reply: 'Write your reply', reopen: 'Reopen', reopening: 'Tell us what happened again', otherProblem: 'This is another problem', reopened: 'Reopened', unread: 'Unread replies', resolvedReply: 'This request is resolved. Reopen it to continue with the same problem.', open: 'Received', in_progress: 'In progress', waiting_customer: 'Waiting for your reply', resolved: 'Resolved' }
 }
 
 /** Private Requester UI. Sales bootstrap, visitor identity and storage never enter this renderer. */
 const SupportPanel: React.FC<SupportAndyChatProps> = ({ support, lang, orientation = 'right', initialOpen = false, tooltip }) => {
-	const { state, controller } = useSupportChat(support)
-	const replyLanguage = lang || state.config?.defaultLang || 'es'
+	const { state, controller } = useSupportChat({ ...support, lang: lang || support.lang })
+	const replyLanguage = lang || support.lang || state.config?.defaultLang || 'es'
 	const strings = copy[replyLanguage]
 	const [open, setOpen] = useState(initialOpen)
 	const [menu, setMenu] = useState(false)
@@ -85,7 +85,7 @@ const SupportPanel: React.FC<SupportAndyChatProps> = ({ support, lang, orientati
 					</>}
 					{state.view === 'form' && <form className='andy-support__form' onSubmit={event => { event.preventDefault(); void controller?.submit(subject, body, replyLanguage) }}>
 						<h2>{strings.team}</h2><label>{strings.subject}<input required maxLength={200} value={state.submission?.subject ?? subject} readOnly={!!state.submission} disabled={state.busy} onChange={event => setSubject(event.target.value)} /></label><label>{strings.detail}<textarea required maxLength={20000} rows={5} value={state.submission?.body ?? body} readOnly={!!state.submission} disabled={state.busy} onChange={event => setBody(event.target.value)} /></label>
-						<details className='andy-support__transcript'><summary>{strings.notice} · {state.transcript.length} {strings.transcript}</summary>{state.transcript.map((message, index) => <p key={index}>{message.content}</p>)}</details><p className='andy-support__muted'>{strings.consent}</p><button type='submit' className='andy-support__primary' disabled={state.busy || !subject.trim() || !body.trim()}>{state.busy ? strings.loading : strings.submit}</button>
+						<details className='andy-support__transcript'><summary>{strings.notice} · {state.transcript.length} {state.transcript.length === 1 ? strings.transcriptSingular : strings.transcript}</summary>{state.transcript.map((message, index) => <p key={index}>{message.content}</p>)}</details><p className='andy-support__muted'>{strings.consent}</p><button type='submit' className='andy-support__primary' disabled={state.busy || !subject.trim() || !body.trim()}>{state.busy ? strings.loading : strings.submit}</button>
 					</form>}
 					{state.view === 'receipt' && state.ticket && <div className='andy-support__receipt'><span className='andy-support__check' aria-hidden='true'>✓</span><h2>{strings.receipt}</h2><strong>#{state.ticket.number}</strong><p>{state.ticket.subject}</p>{promiseText && <p>{strings.promise} <strong>{promiseText}</strong>.</p>}<button type='button' className='andy-support__primary' onClick={() => void controller?.showRequests()}>{strings.requests}</button></div>}
 					{state.view === 'requests' && <><h2>{strings.requests}</h2>{state.tickets.map(ticketRow)}{!state.busy && !state.error && !state.tickets.length && <p className='andy-support__muted'>{strings.empty}</p>}</>}
@@ -96,7 +96,7 @@ const SupportPanel: React.FC<SupportAndyChatProps> = ({ support, lang, orientati
 				</div>
 				{state.view === 'conversation' && <form className='andy-support__composer' onSubmit={event => { event.preventDefault(); send() }}><input aria-label={strings.placeholder} placeholder={strings.placeholder} value={draft} maxLength={10000} disabled={!state.config} onChange={event => setDraft(event.target.value)} /><button type='submit' aria-label={strings.send} disabled={state.busy || !state.config || !draft.trim()}>↑</button></form>}
 				{state.view === 'request' && state.ticket && (state.ticket.status !== 'resolved' || reopening) && <form className='andy-support__followup' onSubmit={event => { event.preventDefault(); void followup() }}><label>{reopening ? strings.reopening : strings.reply}<textarea rows={3} maxLength={20000} required value={state.followup?.body ?? replyDraft} readOnly={!!state.followup} disabled={state.busy} onChange={event => setReplyDraft(event.target.value)} /></label><button type='submit' className='andy-support__primary' disabled={state.busy || !replyDraft.trim()}>{state.busy ? strings.loading : reopening ? strings.reopen : strings.send}</button></form>}
-				<footer className='andy-support__footer'><span>{strings.powered}</span>{state.config?.branding.footer.map(link => <a key={link.url} href={link.url} target='_blank' rel='noopener noreferrer'>{link.label}</a>)}</footer>
+				<footer className='andy-support__footer'><span>{strings.powered}</span>{state.config?.branding.footer.map(link => <a key={link.url} href={sanitizeUrl(link.url)} target='_blank' rel='noopener noreferrer'>{link.label}</a>)}</footer>
 			</section>}
 		</div>, portal)}
 	</div>

package/src/hooks/useSupportChat.ts

@@ -20,8 +20,10 @@ export const useSupportChat = (options: SupportOptions | null) => {
 		void controller.bootstrap()
 		return () => controller.dispose()
 	}, [key])
+	useEffect(() => { controller?.setLanguage(options?.lang) }, [controller, options?.lang])
+	const ready = !!state.config
 	useEffect(() => {
-		if (state.config && options?.ticketId) void controller?.inspect(options.ticketId)
-	}, [controller, state.config, options?.ticketId])
+		if (ready && options?.ticketId) void controller?.inspect(options.ticketId)
+	}, [controller, ready, options?.ticketId])
 	return { mode: 'support' as const, state, controller }
 }